helloworld

一般内嵌js放在head里或者body的下面

image-20201109153040417

基本语法

js中没有变量类型，所有的变量都是var

条件控制

1
2
3
4
5
6
7
8
var score = 1;
if(score > 60){
    alert("true");
}else if(score < 40){
    alert("false");
}else{
    alert("???");
}

js严格区分大小写

for循环类似python语法

js调试方式

使用浏览器的控制台

console.log(score)打印变量

使用sources栏，可以打断点调试，刷新页面可以开始进行调试

数据类型

数值、文本、图形、音频、视频 etc.

js不区分小数和整数

比较运算符

注意===才是等于，表示类型一样值也要一样才行。

NaN与所有的数值都不想等，包括自己，只能通过isNaN(NaN)来判断。

js中也存在浮点数的精度问题

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

数组

元素不需要类型一样

1
var arr = [1,2,3,"asdf",null, true];

数组越界会提示undefined

对象

对象用大括号表示，类似于python里的字典

可以使用delete person.name删除对象的属性。或者可以通过赋值的方式新建方法。

'toString' in person可以判断是否在自己或父类中有这个方法

Map和Set

1
2
3
4
var map = new Map([['a',1],['b',2],['c',3]]);
var name = map.get('a'); // 通过key获得value
map.set('dddd',13456); // 新增或修改
map.delete("a"); // 删除
1
2
3
4
var set = new Set([2,3,1,1,1]);
set.add(4);
set.delete(1);
// Set是无序不重复的集合

iterator

可以打印下标

1
2
3
4
var arr = [3,4,5];
for(var x of arr){
    console.log(x);
}

遍历map的时候只能用for … of

假如只需要打印数组的值则使用 for … in

严格检查模式

ES6中局部变量使用let i = 1;来定义 。

'use strict';放在第一行

函数及面向对象

定义函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 绝对值函数
// 方式一
function abs(x){
    if(typeof x !== 'number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}
// 方式二
var abs = function(x){
    // 手动抛出异常
    if(typeof x !== 'number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}

arguments

arguments是传递进来的所有参数，是一个数组。

rest

rest是除了已经定义的参数之外的所有参数。

1
2
3
4
5
function f(a,b,...rest){
    console.log(a);
    console.log(b);
    console.log(rest);
}

变量的作用域

和一般语言没啥区别

js执行引擎自动提升变量的声明但是不提升变量的赋值。

全局对象window

1
2
3
var x = 'aaa';
alert(x);
alert(window.x); // 默认所有的全局变量都会自动绑定再window对象下

alert()本身也是一个window的方法

由于所有的全局变量都是绑定在window上因此容易出现冲突，为了规避冲突，我们可以按照如下方式

1
2
3
4
5
6
7
8
// 唯一的全局变量
var GlobeVariables = {};

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

局部作用域

1
2
3
4
5
6
function a(){
    for(var i=0;i<100;i++){
        console.log(i);
    }
    console.log(i+1); // i离开了这个作用域还能够使用
}

使用let关键字，可以将变量变为局部有效

1
2
3
4
5
6
function a(){
    for(let i=0;i<100;i++){
        console.log(i);
    }
    console.log(i+1); // 现在该语句会报错
}

const

可以定义常量

1
const PI = '3.14';

方法

方法就是将函数放在对象里面

this始终指向调用它的那个东西

1
2
3
4
5
6
7
8
9
10
11
12
function getAge(){
    var now = new Date().getFullYear();
    return now - this.birth;
}

var tmp = {
    name: 'aaa',
    birth: 2000,
    age: getAge
};

getAge.apply(tmp, []); // 因为没有参数所以[]中没有值，this指向tmp

时间戳指的是从1970/1/1开始到现在的毫秒数

面向对象

使用原型来作为类似父类的东西

1
2
3
4
5
6
7
8
9
10
11
12
13
var Student = {
    name: "asdf",
    age: 5,
    run: function(){
        console.log(this.name + "run");
    }
};

var xiaoming = {
    name: "xiaoming"
};
xiaoming.__proto__ = Student;
xiaoming.run();

也可以使用class继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 首先定义一个类
class Student{
    constructor(name){
        this.name = name;
    }
    run(){
        console.log(this.name + "run");
    }
};
var xiaoming = new Student("xiaoming");

class primaryStudent extends Student{
    constructor(name, grade){
        this.name = name;
        this.grade = grade;
    }
    myGrade(){
        console.log(this.grade + "grade");
    }
};

原型链

image-20201110160855530

操作BOM对象

BOM：浏览器对象模型

window

window代表浏览器窗口

封装了浏览器的信息，例如appName、appVersion、userAgent、platform。但是大多数时候不会使用该对象，因为该对象会被人为修改。

screen

代表了屏幕的尺寸

1
2
screen.width
screen.height

location

location 代表当前页面的URL信息。可以通过location来跳转网页。

1
2
location.reload(); // 刷新页面
location.assign('https://www.baidu.com/'); // 设置新的地址

document

document代表当前的页面。

1
2
document.title = 'aaa'; // 修改title
document.cookie; // 获得cookie

获得节点

1
2
3
4
5
6
7
8
9
<dl id ="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('app');
</script>

history

history代表浏览器的历史记录

1
2
history.back(); // 后退
history.forward(); // 前进

操作DOM对象

DOM: 文档对象模型

浏览器网页就是一个DOM树形结构，我们可以通过操作这些节点的方式去更新改变网页的样式

1
2
3
// 获得dom节点
var a = document.getElementById('aaa');
var childrens = a.children; // 获取父节点下的所有子节点

修改节点：需要对节点的属性进行赋值

删除节点需要先获取父节点，然后利用该节点删除子节点。注意在删除多个节点的时候children是会改变的。

新增节点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p id="js">JavaScript</p>
<div id="list">
    <p id="SE">JavaSE</p>
    <p id="EE">JavaEE</p>
</div>

<script>
    var js = document.getElementByID("js");
    var list = document.getElementByID("list");
    list.appendChild(js);
    
    var np = new document.createELement('p');
    np.id = 'np';
    np.innerText = 'Hello';
    var ee = document.getElementById("EE");
    list.insertBefore(np, ee);
</script>

CSS3选择器

选择器用来选择页面上的某一个或者某一类元素

基本选择器

标签选择器（对h1，h2之类的标签有用）、类选择器（可以在标签中加class属性）、id选择器（id需要全局唯一）

层次选择器

可以选择某个标签后面的所有指定元素

1
2
3
body p{
    background: red;
}

可以选择向量的一层的指定元素

1
2
3
body>p{
    background: red;
}

可以选择向下一个的同层节点,，下面的active是类名

1
2
3
.active + p{
    background: red;
}

可以选择向下的所有同层节点

1
2
3
.active~p{
    background: red;
}

结构伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*ul的第一个子元素*/
ul li:first-child{
    background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: red;
}
/*选择父元素的第二个元素，而且该元素需要是p*/
p:nth-child(2){
    background: red;
}
/*选中父元素下的p元素的第二个*/
p:nth-of-type(2){
    background: red;
}

属性选择器

=是绝对等于

*=是包含关系

^=以。。。开头

操作表单

获取input标签中的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <label for="username">username:</label><input type="text" id="username">
</form>
<script>
    let input_text = document.getElementById("username");
</script>

</body>
</html>

在console中使用，如下指令获得它的值

1
input_text.value

对于多选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <label>
        female
        <input type="radio" name="sex" value="female">
    </label>
    <label>
        male
        <input type="radio" name="sex" value="male">
    </label>
</form>
<script>
    let sex_value = document.getElementsByName("sex");
</script>

</body>
</html>
image-20201112095944816

form中的actioin可以控制提交表单之后跳转到哪里

提交表单

使用md5进行加密

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/md5.min.js"></script>
</head>
<body>
<form method="post">
    <label for="username">username:</label><input type="text" name="username" id="username">
    <label for="password">password:</label><input type="password" name="password" id="password">
    <button type="submit" onclick="md5_check()">submit</button>
</form>
<script>
    let md5_check = function() {
        let pwd = document.getElementById("password");
        pwd.value = md5(pwd.value);
        // 在这里可以校验判断表单内容，校验成功返回true
        return true;
    }
</script>

</body>
</html>

这里使用的md5算法在https://github.com/blueimp/JavaScript-MD5#requirements

image-20201112104021662

jQuery

可以从官网上下载，也可以使用在线的CDN

jQuery的使用方法

1
2
3
$(selector).action()
// selector就是css中的选择器
// action是要执行的操作

具体操作查jQuery文档