JavaScript

1.快速入门

1.0、引入JavaScript

1. 内部标签

   <script>
       .....;
   </script>
   

2. 外部引入

   sxy.js

   alert('hello world');
   

   index.html

   <script src="sxy.js"></script>		//url 你的js代码目录
   

2.0、基本语法入门

<script>
    // 1.定义变量 var 后面可以接任意类型
    var age = 12;
    //alert(age);

    // 2.条件控制  和Java是一样的
    if (age > 1){
        alert(true)
    }
    //可以在网页控制台 debug js代码 console.log(age) 可以输出age的值
</script>

浏览器调试技巧

3.0、数据类型

数值，文本，图形，音频，视频…

变量

var

number
不区分小数和整数

123 			//整数123
123.123 		//浮点数
1.123e3			//科学记数法
-123			//负数
NaN				//not a number
Infinity		//无穷的

字符串

'abc' "abc"

布尔值

true  false

逻辑运算

&&   ||   !    与 或 非

比较运算符

=  赋值
== 等于(类型不一样,数值一样,就是相等 不推荐使用)
=== 绝对等于(类型数值都一样,才是相等)

PS：

• NaN===NaN 为false，NaN与所有的值都是不相等的，包括自己

• 只能通过isNaN(NaN) 来判断一个数是否是NaN

• 浮点数和Java一样存在精度问题

  console.log(Math.abs(1/3-(1-2/3)) < 0.00000001); 			//结果是true,近似判断这两个数相等
  

null 和 undefined

• null 空
• undefined 未定义

数组

var arr = [1,2,3,4,'5',"6",true,null];    //和Python有点像
new Array(1,2,3,'4',"5",true,null);

数组越界会报：undefined 错误

对象

对象是大括号，数组是中括号，每个属性之间用逗号隔开，最后一个不需要

var person = {
    name: "sxy",
    age: 3,
    arr: [1,2,3,'s','y','j',null]
}

console

> person.name
< "sxy"
> person.age
< 3

4.0、严格检查格式

<!-- 在ES6中
'use strict'; 在JavaScript代码前面写上这句话,那么js代码就会全部严格检查,会避免一些忽略的错误
局部变量建议用 let 来定义
-->
<script>
    'use strict';
    let i = 0;
</script>

2、数据类型

2.1、字符串

1、正常字符串和Java是一样的，区别可以用单引号和双引号两种修饰字符串

2、转义字符

\'
\n
\t
\u4e2d Unicode 字符
\x41  ascll字符

3、多行字符串编写 使用**``**符号

<script>
    'use strict';
    var st = `sxy
    syj
    xhj`;
</script>

4、模板字符串

<script>
    'use strict';
    let name = 'sxy';
    let age = 23;
    let mga = `hello ${name}${age}`;		//类似shell语法里面的变量
    console.log(mga);
</script>

5、字符串长度

console.log(st.length);

6、字符串也是一个常量不可修改。

7、大小写转换

//通过方法转变的
console.log(st.toUpperCase()); //小写转大写
console.log(st.toLowerCase());

8、实用的方法

str.indexOf(str[2]); //获取某个字符的位置
str.substring(int b);	//获取从b到最后一个字符的位置的字符串
str.substring(int a,int b);	//获取从[a,b)的字符串

2.2、数组

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

let arr = [1,2,3,4,5];
通过下标取值和赋值

1、长度

arr.length

2、indexOf和字符串是一样的

3、slice() 和 字符串的substring是一样的，返回一格新的数组，前闭后开

4、push(), pop() 在尾部添加和删除，添加可以是多个

5、unshift(),shift() 同上，区别是在头部操作

6、sort() 排序

arr = ['b','c','a'];
arr.sort();
> arr
< 'a' 'b' 'c'

7、reverse() 反转函数

8、concat() 拼接函数，返回一个新的数组

arr.concat([1,2,3]);
> arr
< 'a' 'b' 'c' 1 2 3

9、连接符 join

['1','2','3']
arr.join('-');
'1-2-3';

10、多维数组

arr = [[1,2],[3,4]];
console.log(arr[0][0]);
< 1

2.3、对象

对象是一堆键值对，所有的键都是字符串，值是任意的对象，默认继承了一个父类**_proto_**类

var 对象名 = {
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
}
var person = {
    name:'sxy',
    age:23,
    sex:'男'
}
//用逗号隔开,最后一个没有逗号

1、对象赋值

person.name = 'syj';
person.age = 18;

2、不存在的属性不会报错

person.pos
//只是undefined

3、动态删减属性

delete person.sex;

4、动态添加属性

person.pos = 110;

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

'age' in person;	//返回true
'toString' in person; //返回true 因为 person的父类中有这个方法

6、判断属性值是否在这个对象中(自身拥有的)

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

2.4、流程控制

• if…else…
• while(…){…}
• for(let i = 0; i < 10; i ++){…}
• arr.forEach(function (value)){ console.log(value); }
• for(let index in object){} index 是索引 (不推荐使用，老版本的漏洞)
• for(let a of arr){ console.log(a); } a 是 arr 的具体元素

2.5、Map 和 Set

Map 和Java中的hashMap差不多

<script>
    let map = new Map([['sxy',99],['syj',100],['xhj',98]]);
    map.set('yj',100); //增加键值对
    console.log(map.get('syj'));      //通过key可以得到value
	map.delete('yj');
	for(let x of map){
        console.log(x);		//可以通过for(x of map)来遍历
    }
</script>

Set 和Java也是差不多的

<script>
    let set = new Set([6,2,2,3,3,4,5,5]);
    set.add(1);		//添加
    console.log(set);
    set.delete(3);	//删除
    console.log(set);	
    console.log(set.has(3));	//判断是否存在
	for(let x of set){
        console.log(x);		//可以通过for(x of set)来遍历
    }
</script>

2.6、iterator

通过 for (let x of string|array|Map|Set) 遍历全部元素，都是利用了iterator

3、函数

3.1、定义一个函数

定义方式一

function abs(x){
    if (x >= 0){
        return x;
    }else{
        return -x;
    }
}

如果没有return就会出现undefined的结果。

定义方式二

let abs = function(x){
    //手动抛出异常
    if (typeof x !== 'number'){
        throw 'Not a Number';
    }
    if (x >= 0){
        return x;
    }else{
        return -x;
    }
}

arguments

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

let fun = function(x){
    console.log('x: ' + x);
    for (int i = 0; i < arguments.length; i ++){
        console.log(arguments[i]);
    }
}

输入 1,2,3,4,5
输出 x: 1
1 2 3 4 5

问题：arguments包含传进来的所有的参数，但是有时候我们不知道函数本身有个几个参数，那么使用的arguments就可能会出现问题。

rest

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

let fun = function(x,...rest){
    console.log('x: ' + x);
    console.log(rest);
}

输入 1,2,3,4,5
输出 x: 1
[2 3 4 5]

rest只能写在参数后面，必须用…表示

3.2、变量的作用域

在JavaScript中，var定义的变量是有作用域的。

在函数体声明，在函数体外则不可以使用。 (后面可以通过闭包来使用)

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

内部函数使用与外部函数相同变量名，由内向外查找。

<script>
    'use strict'
    function fun(){
        var x = 1;
        x = x + 1;
    }
    // x = x + 1;   x is not defined
</script>

JavaScript会自动提升变量的作用域

function fun(){
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}

输出: xundefined

说明JavaScript执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

所以为了避免出现一些错误，一般习惯在写js代码时，把要声明的变量写在代码的最前面。(规范)全局变量

全局变量window

var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量都会绑定到window对象上

alert() 函数本身也是一个window变量

window.alert(x);

var old_alert = window.alert;
old_alert(x);	//也能在网页弹出

**规范：**由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如果能够减少冲突?

//唯一的全局变量 
var sxy = {};


//定义全局变量
sxy.name = 'sxy';
sxy.add = function(a,b){
    return a + b;
}

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

局部作用域(let)

for (var i = 0; i < 10; i ++){
    console.log(i);
}
console.log(i);
输出1 2 3 4 5 6 7 8 9 10
for (let i = 0; i < 10; i ++){
    console.log(i);
}
console.log(i);
输出1 2 3 4 5 6 7 8 9

建议使用let定义局部变量

常量(const)

在ES6以前默认大写字符定义的变量是常量。

const PI = '3.14';

3.3、方法

<script>
    'use strict'
    var person = {
        name: 'sxy',
        birth: 1999,
        age: function (){
            var now = new Date().getFullYear();
            return now - this.birth;
        }
    }
</script>

还可以拆开写

<script>
    'use strict'
    function getAge (){
        var now = new Date().getFullYear();
        return now - this.birth;
    }
    var person = {
        name: 'sxy',
        birth: 1999,
        age: getAge
    }
</script>

但是调用的时候还是只能用 person.age() 因为this是无法指向的，是默认指向调用它的那个对象。

如果想直接调用 getAge() 可以通过 getAge.apply(person,[]) this 指向 person ，并传入一个空参数，apply是所有方法共有的。

4、内部对象

4.1、Date

var now = new Date();
console.log(now);//Sun Oct 24 2021 14:27:01 GMT+0800 (中国标准时间)
now.getFullYear();  //年
now.getMonth();     //月[0-11]
now.getDate();      //日
now.getDay();       //周
now.getHours();     //时
now.getMinutes();   //分
now.getSeconds();   //秒
now.getTime();      //时间戳
console.log(new Date(now.getTime));	//通过时间戳转成时间

转换

var now = new Date();
console.log(now);//Sun Oct 24 2021 14:27:01 GMT+0800 (中国标准时间)
console.log(now.toLocaleString());  //2021/10/24 下午2:34:54
console.log(now.toGMTString());     //Sun, 24 Oct 2021 06:36:01 GMT

4.2、JSON

JSON字符串和JS对象的转化

var person = {
    name: 'sxy',
    age: 22,
    sex: '男'
}
//将对象转化成字符串 {"name":"sxy","age":22,"sex":"男"}
var jsonUser = JSON.stringify(person);
//将字符串转化成对象 
var obj = JSON.parse('{"name":"sxy","age":22,"sex":"男"}')

5、面向对象编程

5.1、什么是面向对象

原型对象

<script>
    var Student = {
        name: 'sxy',
        age:8,
        run: function (){
            console.log(this.name + " run...");
        }
    };
    var xiaoMing = {
        name: 'xiaoMing'
    };
    //原型对象  相当于继承
    xiaoMing.__proto__ = Student;
    xiaoMing.run(); //xiaoMing run...
</script>

class 继承

1、定义一个类，属性，方法

<script>
    //ES6 之后通过class继承
    class Student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert('hello')
        }
    }
    var xiaoMing = new Student("xiaoMing");
    var xiaoHong = new Student("xiaoHong");
</script>

2、继承
本质还是原型写法，但是更方便写了

<script>
    'use strict'
    //ES6 之后通过class继承
    class Student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert('hello')
        }
    }
    class XiaoStudent extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert('xiaoStudent');
        }
    }
    var xiaoMing = new Student("xiaoMing");
    var xiaoHong = new XiaoMing("xiaoHong",4);
</script>

原型链

6、操作BOM对象(重点)

BOM是browser object model的缩写，简称浏览器对象模型 ，提供了独立于内容而与浏览器窗口进行交互的对象；

• window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性
• document对象，文档对象
• location对象，浏览器当前URL信息
• navigator对象，浏览器本身信息
• screen对象，客户端屏幕信息
• history对象，浏览器访问历史信息；

window(重要)

window.innerHeight
423
window.innerWidth
1920
window.outerHeight
1038
window.outerWidth
1918

Navigator(不建议使用)

Navigator:封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36"
navigator.platform
"Win32"

大多时候我们不会使用navigator对象，因为会被人为修改。不建议使用这些属性来判断和编写代码。

screen 代表屏幕的尺寸

screen.width
1920
screen.height
1080

location(重要)

location 代表当前页面的URL信息

host: "localhost:63342" //当前页面
href: "http://localhost:63342" //跳转页面
protocol: "http:" //使用的协议
reload: ƒ reload() //刷新页面
location.assign('www.baidu.com')	//设置新的地址

document

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

document.title
"百度一下，你就知道"

获取具体的文档树结点，可以动态修改网页

<dl id="app">
    <dt>Java</dt>
    <dt>JavaEE</dt>
    <dt>JavaSE</dt>
</dl>
<script>
    'use strict'
    var dl = document.getElementById('app');
	var java = document.getElementsByTagName('dt');
</script>

获取 cookie

document.cookie		//获取cookie值

劫持 cookie 原理 : 登录淘宝 就自动登录了 天猫，天猫通过淘宝获取了你的cookie，然后登陆。

服务器端可以设置 cookie: httpOnly 防止被劫持

history

代表浏览器的历史记录

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

7、操作DOM对象(重点)

核心

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

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

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

获得Dom结点

<div id="father">
    <h1>h1</h1>
    <p id="p1"></p>
    <p class="p2"></p>
</div>
<script>
    'use strict'
    //对应的 css 选择器
    var h1 = document.getElementsByName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');

    var father = document.getElementById('father');
    var childrens = father.children;    //获取父节点下的所有子节点
    // father.firstChild
    // father.lastChild
</script>

更新结点

<div id="id1">
</div>
<script>
    'use strict'
    var id1 = document.getElementById('id1');
</script>

操作文本

• id1.innerText='123' 修改文本的值
• id1.innerHTML='<strong>123</strong>' 可以解析HTML文本标签

操作JS

id1.style.color='red';		//属性使用 字符串 包裹
id1.style.fontSize='20px'; //font-size 变成了 fontSize
id1.style.padding='2em';

删除结点

删除结点：先找到父节点，再删除本节点

<div id="father">
    <h1>h1</h1>
    <p id="p1"></p>
    <p class="p2"></p>
</div>
<script>
    'use strict'
    var self = document.getElementById('p1');
	var father = self.parentElement;
	var removed = parent.removeChild(self);
	removed === self; // true

	father.removeChild(father.children[0]);
	father.removeChild(father.children[1]);
	father.removeChild(father.children[2]);
</script>

注意：再删除多个结点时，children 是时刻在变化的(下标)，删除时一定要注意。

插入结点

我们获得了某个DOM结点，假设这个结点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个DOM结点已经存在元素了，我们就不能这么操作了，因为会产生覆盖。

追加

<p id="js">javascript</p>
<div id="list">
    <p id="se">SE</p>
    <p id="ee">EE</p>
    <p id="me">ME</p>
</div>
<script>
    'use strict'
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);

	
	//创建新结点插入
    var newP = document.createElement('p'); //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello word';
    list.appendChild(newP);

    //创建一个标签结点  通过这个属性，可以设置任意的值
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    //使背景变色
    //法一
    //var body = document.getElementsByTagName('body')[0];
    //body.style.backgroundColor = "yellow";
    
    //法二
    var myStyle = document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerText = 'body{background-color: chartreuse;}';
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

追加效果：

插到前面

<p id="js">javascript</p>
<div id="list">
    <p id="se">SE</p>
    <p id="ee">EE</p>
    <p id="me">ME</p>
</div>
<script>
    'use strict'
    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.insertBefore(js,ee);   //要包含结点.insertBefore(newNode,targetNode)
</script>

8、操作表单

表单是什么 form input DOM 树

• 文本框
• 下拉框
• 单选框
• 多选框
• 隐藏域
• 密码框
• 等等…

表单的目的：提交信息

获得要提交的信息

<form action="" method="post">
    <p><span>用户名:</span> <input type="text" id="username"></p>
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl"> 女
    </p>
</form>
<script>
    var input_text = document.getElementById('username');
    var boy = document.getElementById('boy');
    var girl = document.getElementById('girl');

    // 得到输入框的值
    input_text.value;
    // 修改输入框的值
    input_text.value = '123';

    //对于单选框，多选框等等固定的值，xxx.value 只能获取到当前值
    boy.checked;    //查看返回结果,是否为true,如果为true,则被选中
    boy.checked = true; //赋值,控制表单
</script>

提交表单 md5 加密 ，表单优化

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <form action="https://www.baidu.com/" method="post" onsubmit="return fun()">
        <p><span>用户名:</span> <input type="text" id="username" name="username"></p>
        <p><span>密码:</span><input type="password" id="input-password"></p>
        <!--隐藏提交-->
        <input type="hidden" id="md5-password" name="password">
        <!--绑定事件 onclick 被点击 -->
        <button type="submit">提交</button>
    </form>
    <script>
        function fun(){
            var uname = document.getElementById('username');
            var pwd = document.getElementById('input-password');
            var md5pwd = document.getElementById('md5-password');
            pwd.value = md5(pwd.value);
            md5pwd.value = md5(pwd.value);
            return true;       //false阻止提交
        }
    </script>
</body>

9、JQuery

JQuery库，里面存在大量的JavaScript函数

获取JQuery

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>	 <!--在线库-->
</head>
<body>
<!--
公式: $(selector).action()
-->
    <a href="" id="test-jquery">点我</a>
    <script>
        $('#test-jquery').click(function (){
            alert('hello world')
        })
    </script>
</body>

选择器

<script>
    // 原生js: 选择器少,记忆麻烦
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery
    $('p').click()              //标签选择器
    $('#id1').click()           //id选择器
    $('.class1').click()        //类选择器
</script>

jQueryAPI 中文文档

事件

鼠标事件，键盘事件，其他事件
鼠标事件例子：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    mouse : <span id="mouseMove"></span>
    <div id="divMove">移动鼠标</div>
    <script>
        //当网页元素加载完毕之后,响应事件
        $(function () {     //$(document).ready(function(){}) 可以简写为 $(function(){})
            $('#divMove').mousemove(function (e){
                $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
            })
        })
    </script>
</body>

效果: 在下面红框框里移动鼠标，在上面会显示鼠标的坐标

操作DOM元素

$('#test-ul li[name=python]').text();	//获得值
$('#test-ul li[name=python]').text('123456');//设置值
$('#test-ul li[name=python]').css("color","red")	//设置成红色
$('#test-ul li[name=python]').hide()   //隐藏这个标签 等价 display = none
$('#test-ul').html();	//获得值
$('#test-ul').html('<strong>123</strong>');   //设置值