1.什么是JavaScript

2.快速入门

2.1 引入JavaScript

2.2 基本语法

2.3 数据类型

变量

==依旧不能用数字开头==

var A;
var $a;
var _a;
var 英雄联盟 = "不屈黑铁";

number

与Java基本一致，不区分整型浮点型

若要判断两个浮点型是否相等：Math.abs(a - b) < 0.00001

字符串

1
2
3

//单双引号都可
'abc'
"abc"

布尔值

true
false

逻辑运算符

比较运算符（重要！）

a > b;
a < b;
a >= b;
a <= b;
a = b;		//赋值
a == b;		//等于（数值相同，类型不同，也是true）
a === b;	//绝对等于（数值相同，类型不同，结果是false）

数组

用中括号表示

1	var num = [1,2,3,4,5,6];

对象

用大括号表示

//Person person = new Person();
var person = {
    name: "wxs",
    age: 3,
    tags: ['js', 'java']
};

严格检查模式（必须支持 es6 ）：

在 JavaScript 的最前面加上一行代码：“use strict”，预防 JavaScript 的随意性所产生的一些问题

全局变量建议使用 let 去定义： let a = 3;

3.数据类型

3.1 字符串

多行字符串编写

let msg =
    `
	hello
	world
	你好
	世界
	`;

模板字符串

1 2	let name = 'world'; let msg = 'hello ${name}'; //hello world

字符串长度

1 2	let str = 'hello'; str.length; //注意这里是属性不是方法，没有括号

字符串是不可变的

大小写转换

1
2
3

let str = 'Hello';
str.toUpperCase();	//HELLO
str.toLowerCase();	//hello

查找下标和截取字串

1
2
3

let str = 'hello';
str.indexOf(e);		//1
str.substring(1,3);	//'ell',包头不包尾

3.2 数组

Array 可以包含任意数据类型

1	let arr = [1,2,3,'hh']

长度
1
arr.length //4
注意：直接给 arr.length 赋值，数组大小会发生变化！

arr中出现空位会用 undefined 占位
查找下标
1
arr.indexOf(2) //1
截取Array中的一部分，返回一个新数组
1
arr.slice(0,3) //[1,2,3]，与substring相似
push、pop
unshift、shift
排序 sort()、反转 reverse()
拼接 concat()

并没有修改数组，只是会返回一个新的数组

连接符 join()

1 2	let arr = ['a','b','c']; arr.join('-'); //返回一个新的字符串

3.3 对象

//定义了一个person对象，有四个属性
let person = {
    name: "Allen",
    age: 20,
    hobby: ['sing','jump','rap','basketball']
}

使用一个不存在的对象属性，不会报错，会返回 undefined
可以动态删减属性 delete person.hobby
动态的添加属性 person.haha = “haha”

判断某个属性/方法是否在某个对象中

'age' in person;		//true
'toString' in person;	//继承了父类的方法

person.hasOwnProperty('toString');	//false,判断自身有没有该方法或属性

3.4 流程控制

与 Java 语法基本一致

if
while
for

forEach

let ages = [10,11,10,11,12];
//需要传入一个函数
ages.forEach(function(value)){
	console.log(value);
}

for in

let ages = [10,11,10,11,12];
//注意取出的是索引！
for(let index in ages){
	console.log(age[index]);
}

for of

let ages = [10,11,10,11,12];
//注意取出的是值！
for(let value of ages){
	console.log(value);
}

3.5 Map 和 Set

ES6 的新特性

let map = new Map([['tom',100],['jack',90]]);
map.get('tom');
map.set('dog', 80);
map.delete('tom');

//遍历map
for(let e of map){
    console.log(e);
}

let set = new Set([1,2,3,4,1,1,1]);	//[1,2,3,4]
set.add(2);
set.delete(2);
set.has(1);

4.函数

4.1 定义函数

拿绝对值函数举例：

方式一（推荐，学习无成本）

function abs(x){
    //手动定义异常
    if (typeof x !== 'number') {
        throw "not a number"
    }
	if(x >= 0){
		return x;
	} else {
		return -x;
	}
}

方式二

let abs = function (x) {
    //手动定义异常
    if (typeof x !== 'number') {
        throw "not a number"
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

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

arguments：arguments 是JS免费赠送的关键字

通过 arguments 获得所有传入的参数，是一个数组

rest：获取除了使用的参数外其他传入的参数（ES6新特性）

1
2
3

function f(a,b,...rest) {
	console.log(rest)
}

4.2 变量作用域

var 定义的变量，在函数体中声明，则在函数体外不可用（不过可以通过闭包在函数体外进行使用）
内部函数可以访问外部函数的成员，反之则不行
JavaScript 所有变量声明提到最前面（习惯）
默认所有的全局变量，都自动绑定在 window 对象下

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

let MyApp = {};
//定义变量
MyApp.name = 'wxs';
//定义函数
MyApp.add = function (a,b) {
    return a + b;
}

建议使用 let 关键字定义局部作用域
在ES6引入了常量关键字（只读变量） const

4.3 方法

let person = {
    name: 'wxs',
    birth: 1999,
    //方法
    age: function () {
        return new Date().getFullYear() - this.birth
    }
}

//调用属性
person.name;
//调用方法
person.age();

apply：控制 this 指向

function getAge(){
    return new Date().getFullYear() - this.birth
}

/**
* 第一个参数为 this 需要指向的对象
* 第二个参数为传入的参数
*/
getAge.apply(person,[]);

5.内部对象

//标准对象
"number"
"string"
"boolean"
"Object"
"function"
"undefined"

5.1 Date

let now = new Date();
now.getFullYear();
now.getMonth()      //月 0-11
now.getDate();      //日
now.getDay();       //星期几
now.getHours();
now.getMinutes();
now.getSeconds();

now.getTime();      //时间戳 全世界统一 1970.1.1 0：00：00 到现在的毫秒数
now.toLocaleDateString();

5.2 JSON

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
在 JavaScript 中一切皆为对象，任何 js 支持的类型都可以用 JSON 表示
格式：
- 对象都用 {}
- 数组都用 []
- 键值对都用 key:value

6.DOM

DOM(Document Object Model)

HTML DOM 模型被构造为对象的树：

DOM HTML tree

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

1	document.getElementById("id");

……

7.jQuary

jQuery 是 JavaScript 的一个库，里面包含了大量 JavaScript 的函数

引入

下载：https://jquery.com/download/
CND：https://www.bootcdn.cn/

快速入门

<body>

<!--
    公式： $(selector).action
-->
<a href="" id="test-jquery">点我</a>

<script>
    document.getElementById('id');
    //选择器就是CSS选择器
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>

</body>

运行效果：

选择器

//原生js
document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();

//jQuery
$('p').click();         //标签选择器
$('#id1').click();      //id选择器
$('.class1').click()    //class选择器

文档工具站：http://jquery.cuishifeng.cn/

参考

狂神说Java：

菜鸟教程：https://www.runoob.com/js/js-htmldom.html