javaScript

1、什么是javaScript

“Javascript（JS）是一种脚本语言，主要用于Web。它用于增强HTML页面，通常可以嵌入HTML代码中。JavaScript是一种解释型语言。因此，它不需要编译

2、快速入门

2.1、引入javaScript

内部标签

<script>
alert("Hello,world")
</script>

外部引用

<script src="js/my.js"></script>

2.2、基本语法入门

// 1、定义变量  变量类型  变量名 =变量值;
 var score= 10;
 // alert(score);
// 2、条件控制
if (score>1){
    alert("true");
    console.log(score)
}

//      在浏览器的控制台打印变量  console.log(score)

1、浏览器必备调试须知

2.3、数据类型

变量

var a="王者荣耀";

number

123//整数123
123.1//浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN  //not  a number
Infinity //表示无限大

字符串

'abc';
"abc";

布尔值

true，false

逻辑运算

&& 两个值都为真，结果为真

|| 一个为真，结果为真

!   真即假，假即真

比较运算符

=    赋值
==   等于(类型不一样，值一样，也会判断为true)
===  绝对等于(类型一样,值一样，结果为true)

这是一个js的缺陷，检查不要使用==

浮点数问题：

console.log((1/3)===(1-2/3))

尽量避免使用浮点数进行运算，存在精度问题

Math.abs((1/3)-(1-2/3))<0.00000001;

null 和 undefined

null 空
undefined 未定义

数组

java的数值必须是相同类型的对象，js中不需要这样！

var arr=[1,2,3,'hello',null,true];

取数组下标：如果越界了，就会

undefined

对象

对象是大括号，数组是中括号

var person={
    name:"husai",
    age:3,
    tags:['js','java']
}

2.4 、严格检查格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //前提：idea需要支持Es6语法
        'use strict';//严格检查模式,预防javaScript的随意          性导致产生的一些问题
         //必须写在第一行
         //局部变量建议都使用let去定义
        let  i=1;
    </script>
</head>
<body>

</body>
</html>

3、数据类型

3.1、字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符

'
n 换行
t 空格
u4e2d   unicode字符
x41 Ascll 字符

3、多行字符串编写

let  msg=`
  hello
  world
`

4、模板字符串

let name="张三";
let age=3;
let msg=`你好呀,${name},你的年龄是,${age}岁`
console.log(msg);

5、字符串长度

console.log(student.length)

6、字符串的可变性，不可变

7、大小写转换

\大写，这里是方法，不是属性
console.log(student.toUpperCase())
\小写
console.log(student.toLocaleLowerCase())

8、字符串截取

console.log(student.indexOf("t"))

9、substring

console.log(student.substring(1))//从第一个字符串截取到最后一个字符串
console.log(student.substring(1,3))//包含第一个不包含第三个

3.2、数组

Array可以包含任意是数据类型

let arr=[1,0,5,2,3]

1、长度

arr.length

注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

2、indexOf,通过元素获得下标索引

arr.indexOf(2)

字符串的”1“和数字的1是不同的

3、Slice()截取Array的一部分，返回一个新数组，类似于String中的SubString

4、push()、pop()

push: 压入到尾部
pop: 弹出尾部的一个元素

5、unshift(),shift()

unshift(): 压入到尾部
shift(): 弹出尾部的一个元素

6、排序sort()

(3) ["B", "C", "A"]
a.sort()
(3) ["A", "B", "C"]

7、元素反转 reverse()

a.reverse()
(3) ["C", "B", "A"]

8、concat()

console.log(a)
(3) ["C", "B", "A"]
a.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]
a
(3) ["C", "B", "A"]

注意：concat()并没有修改数组，只是会返回一个新的数组

9、连接符join

打印拼接数组，使用特定的字符串连接

a.join("-")
"C-B-A"

10、多维数组

arr=[[1,2],[3,4],["5",6]];
arr[2][0]
"5"

3.3、对象

javaScript中的所有的键都是字符串，值是任意对象！

若干个键值对

var 对象名={
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}

 let person={
    name: "zhangsan",
    age: 10,
    score: 50,
    email: "1479531014@qq.com"
}

1、对象赋值

person.name="李四"
"李四"

2、使用一个出存在的对象属性，不会报错！undefined

person.aaa
undefined

3、动态的删减属性,通过delete删除对象的属性

delete person.name
true
person
{age: 10, score: 50, email: "1479531014@qq.com"}

4、动态的添加

person.name="aa"
"aa"
person
{age: 10, score: 50, email: "1479531014@qq.com", name: "aa"}

5、判断属性值是否在这个对象中

'age' in person
true
//继承
'toString' in person
true

6、判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false

3.4、流程控制

if判断

 'use strict'
 let  a=2;
  if (a>3){
  alert("hhh")
   }else {
  alert("ku")
 }

while循环，避免程序死循环

let  a=3;
while (a<100){
    a++;
    console.log(a);
}

for循环

for (let i = 0; i <100 ; i++) {
    console.log(i)
}

forEach循环

let a=[1,2,3,4,5];
//函数
a.forEach(function (value) {
    console.log(value)
})

for...in

for (let aKey in a) {
    console.log(a[aKey]);
}

3.5、 Map和Set

Map

'use strict'
let map=new Map([["张三",80],["李四",70],["王五",50]]);
// let number = map.get("张三");//通过key取得values
map.set("hh",50);
console.log(map)
// console.log(number);
// new Set();

Set

let  set=new Set([1,2,3,44,44,44])//Set可以去重
set.add(5)  //添加
set.delete(2);//删除
console.log(set.has(1));//是否包含某个元素
console.log(set)

3.6、iterator

遍历数组

//通过for of /for in下标
let  a=[11,55,40];
for (let number of a) {
    console.log(number)
}

遍历map

let map=new Map([["张三",80],["李四",70],["王五",50]]);
// let number = map.get("张三");//通过key取得values
// map.set("hh",50);
for (let mapElement of map) {
    console.log(mapElement)
}

遍历Set

let  set=new Set([1,2,3,44,44,44])//Set可以去重
for (let number of set) {
    console.log(number)
}

4、函数

4.1、定义函数

绝对值函数

'use strict'
function f(x) {
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

一旦执行return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是 undefined

定义方式二

'use strict'
let f=function(x) {
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

function(x){...}这是一个匿名函数。但是可以把结果赋值给f，通过f调用

函数！

方式一和方式二等价

调用函数

f(10) //10
f(-10) //10

javaScript可以传任意个参数，也可以不传递参数

参数进来是否存在问题？

假设不存在参数，如何规避？

        let f=function(x) {
            //手动抛出异常来判断
            if (typeof x!=="number"){
                throw 'not a Number';
            }
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }

arguments

arguments是一个js免费赠送的关键字；

代表，传递进来的所有的参数，是一个数组！

        let f=function(x) {
            console.log("xxx"+x)
            // if (typeof x!=="number"){
            //     throw 'not a Number';
            // }
            for (let i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

function f(a,b,...rest) {
    console.log("aaa "+a);
    console.log("bbb "+b);
    console.log(rest);
}

rest参数只能写在最后面，必须用...标识。

4.2、变量的作用域

  function qj() {
          let  x=1;
          x=x+1;
        }

        x=x+2;  //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj() {
    let  x=1;
    x=x+1;
}
function qj2(){
    let x='A';
    x=x+1;
}

内部函数可以访问外部函数，反之则不行

function qj() {
    let  x=1;
    //内部函数可以访问外部函数，反之则不行
    function qj2(){
        let y=x+1;

    }
    let z=y+1; //Uncaught ReferenceError: z is not defined
}

全局函数

let x=1;
function f() {
    console.log(x);
}
f();
console.log(x);

全局对象 window

var x='xxx';
alert(x)
alert(window.x);

规范

//唯一全局变量
let hs={};
//定义全局变量
hs.name="hello,world"
    hs.add=function (a,b) {
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域

 function aaa() {
            for (let i = 0; i < 100; i++) {
                 console.log(i);
            }
            console.log(i+1);
        }
aaa()//Uncaught ReferenceError: i is not defined

建议大家都是用let去定义局部作用域的变量；

常量 const‘’

在ES6之前，这么定义常量：只有用全部大写字母命名的变量就是常量；建议不用修改这样的值

var PI='3.14';

console.log(PI);
PI='213';//可以改变这个值
console.log(PI);

在ES6引入了常量关键字const

const PI='3.14'; //只读变量
console.log(PI);
PI='213';//不可以改变这个值
console.log(PI);

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
let hs={
    name:"张三",
    birth:1997,
    //方法
    age:function () {
        //今年-出生的年
        let now=new Date().getFullYear();
        return now-this.birth;
    }
}

//属性
hs.name
//方法，一定要带
hs.age()

5、内部对象

标准对象

typeof 123
"number"
typeof "123"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1、Date

let now=new Date();
now.getFullYear() //年;
now.getMonth()// 月;
now.getDate()//  日；
now.getDay() //星期
now.getHours()  //时
now.getMinutes()  //分
now.getSeconds()  //秒

now.getTime()  //时间戳
console.log(new Date(1590072080010))//时间戳转换为时间

转换

now=new Date(1590072080010)
Thu May 21 2020 22:41:20 GMT+0800 (中国标准时间)
now.toLocaleString
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2020/5/21 下午10:41:20"
now.toGMTString()
"Thu, 21 May 2020 14:41:20 GMT"

5.2、JSON

JSON和JS对象的转换

let  user={
    name:"zhangsan",
    age:3,
    sex:"男"
};
console.log(user);

//将对象转换成json
let userJson=JSON.stringify(user);
console.log(userJson);

//将json字符串转换成对象,参数为json字符串
let  obj=JSON.parse('{"name":"zhangsan","age":3,"sex":"男"}');
console.log(obj);

6、操作BOM对象(重点)

document

document代表当前的页面，HTML DOM文档树

document.title='张三'
"张三"

获取具体的文档树节点

<body>
    <div id="add">
        <dt>java</dt>
<dt>javaSe</dt>
<dt>javaEE</dt>
</div>
</body>
<script>
        let byId = document.getElementById('add');
</script>

获取cookie

document.cookie
"BAIDUID=3AE4261FA7848C488225C2F42FE13768:FG=1; rsv_i=5f22G7b2aersof83Sb4zfA9jgyZ5U8No5q7BUc8kC7j1hjpOXBDOfSfI7JL5G79q2kphXRK1Ov1WFiVc3kmBwHCDgGFmjto; BDSVRTM=40; plus_lsv=e1339ee5f098ff6b; BDORZ=AE84CDB3A529C0F8A2B9DCDD1D18B695; Hm_lvt_12423ecbc0e2ca965d84259063d35238=1590132849; Hm_lpvt_12423ecbc0e2ca965d84259063d35238=1590132849; plus_cv=1::m:49a3f4a6; bd_af=1; SE_LAUNCH=5%3A26502214_0%3A26502214"

劫持cookie原理

<script src="aa.js"></script>
<!--恶意人员;获取你的cookie上传到他的服务器-->

服务器端可以设置cookie:HttpOnly

historytory

history代表浏览器的历史记录

history.back()//后退
history.forward() //前进

7、操作DOM对象（重点）

核心

浏览器网页就是一个Dom树形结构！

更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新发节点

要操作一个Dom节点，就必须要先获得这个Dom节点

let elementsByName = document.getElementsByTagName('h1');
let elementById = document.getElementById('p1');
let elementsByClassName = document.getElementsByClassName('p2');
let elementById1 = document.getElementById('father');


let children = elementById1.children; //获取父节点下的所有子节点

更新节点

<body>
    <div id="id1"></div>
</body>
<script>
        let byId = document.getElementById(`id1`);
</script>

byId.innerText='123'  //修改文本的值
"123"
byId.innerHTML='<Strong>456<Strong>'  //可以解析HTML标签
"<Strong>456<Strong>"

操作js

byId.style.color='yellow';
byId.style.fontSize='20px';
byId.style.padding='2em';

删除节点

删除节点的步骤，先获取父节点，在通过父节点删除自己
  <div id="father">
       <h1>标题</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
  </div>
 <script>
     let elementById = document.getElementById('p1');
     let  father =  elementById.parentElement;
     father.removeChild(elementById); 
 </script>

插入节点

<body>
   <p id="js">javaJs</p>
   <div id="aa">
       <p id="se">javaSe</p>
       <p id="ee">javaEE</p>
       <p id="me">javaMe</p>
   </div>
</body>

<script>
     let jsId = document.getElementById('js');
     let byId = document.getElementById('aa');
     aa.append(jsId);//追加在后面
</script>

创建一个新的标签

  //通过js，创建一个标签
    let element = document.createElement('p'); //创建一个p标签
     element.id='element';  //创建一个id;
     element.innerText='Hello,world';

     byId.appendChild(element);

8、jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script          src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>

</body>
</html>

<a href="" id="jq">点我</a>

<script>
     $('#jq').click(function () {
         alert('Hello,world');
     })


</script>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-1.12.4.js"></script>
</head>
<body>
<script>
    //<!--标签-->
       $('p').click()//标签选择器

    //<!--id-->
       $('#id1').click() //id选择器

    //<!--类-->
       $('.class1').click()  //类选择器
</script>

</body>
</html>

事件

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-1.12.4.js"></script>
    <style>
        #divMove{
             500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
mouse :<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
</body>
<script>
     $(function () {
         $('#divMove').mousemove(function (e) {
             $('#mouseMove').text('x:'+e.pageX+'y: '+e.pageY)
         })
     })
</script>
</html>