JS概述

• css是一门标记语言，并不是编程语言，不具备任何语法支持。
• 因此有了CSS预处理器：用一种专门的编程语言，通过编译器转化为正常的CSS文件，以供项目使用，否则一般的网页几千行，无法直接编写。
  • SASS：Sass是一个将脚本解析成CSS的脚本语言，即SassScript。基于Ruby，需要学习Ruby语言，更高效。
  • LESS：基于NodeJS，简单易学
  • Stylus：来自于Node.js社区
• JS是世界上最流行的脚本语言。
• ECMAScript是JS的规范，最新版本ES6。ECMA:European Computer Manufacturers Association
• JavaScript框架：使用流行框架的意义:运行快，效率高，其中最鲜明的特点是写得少，做得多；还为我们提供了丰富的插件。
  • jQuery
  • Vue
  • Axios

快速入门

引入js

<!--内部标签-->
<script>
    alert("hello world");
</script>

---

<!--外部引入-->
<script src="js/qj.js"></script>
<!--不用写type，默认的有-->
<scrip type="text/javascript"></scrip>
==========================================
#js/qj.js
alert("hello world");

基本语法

在控制台输入

console.log(name)
alert(age)

数据类型

1、JS不区分小数和整数，都是Number

NaN #not a number

Infinity #无限

2、比较运算符

=

== #等于：类型可以不一样，值一样

=== #绝对等于：类型、值都一样

须知

NaN == NaN 和 NaN === NaN
false

==============

isNaN(NaN) #需要通过这种方法
true

3、浮点数问题

#尽量避免浮点数问题，存在精度问题

#返回false
console.log((1/3) === (1-2/3))

#返回true
console.log(Math.abs(1/3-(1-2/3))<0.0000001)

4、null VSundefined

5、定义数组（JS不严谨）

var arr = [1,2,3,"abc"]
#取数组下标越界，出现undefined

6、对象

#每个属性后面加逗号，最后一个不需要，person={键值对}
var person = {
    name: "adair",
    age: 18,
    tags: [1,2,3,"abc"]
}
===============================
#console
person.name
> 'adair'

严格检查模式

<script>
    /*
    *'use strict'：必须写在JS的第一行，是由于JS的随意性导致的
    * 局部变量使用let定义
    *  */
    'use strict'
    let i = 1;
</script>

数据类型

字符串

1、转义字符

<script>
    'use strict'

    console.log("a\'")    /*输出a'*/
    console.log("\u4e2d")   /*中*/
    console.log("\x41")     /*A*/

</script>

2、多行字符串

var string = `
ni
hao`

3、模版字符串

'use strict'
var name = "adair";
var msg =`nihao ,${name}`;	//字符串中有其他字符串,${string}
console.log(msg)
#输出nihao ,adair

4、字符串长度

var student = "zhangsan"
console.log(student.length)
#输出8

5、字符串的内容不可变。

student[0] = 1
1
console.log(student)
#输出zhangsan

6、大小写转换

#这里是方法，不是属性
console.log(student.toUpperCase())
#输出ZHANGSAN

7、搜查字符串中的字符

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

8、substring

console.log(student.substring(1,4))
#输出han

数组

var arr = [1,2,3]

#console
console.log(arr)		//同arr

1、arr.length是可以改变的

arr.length = 10   //数组大小由原来的3变为10，如果变小，后面的舍去

2、获取元素的下标

arr=[1,2,3,"1"]

arr.indexOf(1)
0

arr.indexOf("1")
#3

3、slice()，截取数组，返回一个新的数组≈字符串中的substring

arr.slice(1,3)

4、push()和pop()：在尾部操作

arr.push('a','b')		//压入尾部
arr.pop()		//弹出尾部的一个元素

5、unshift()，shift()：在头部操作

arr.unshift('a','b')		//压入头部
arr.shift()		//弹出头部的一个元素

6、排序

arr.sort()

7、元素反转

arr.reverse()

8、concat()：只会当时改变，并没有修改数组

arr.sort()
(4) [1, '1', 2, 3]
arr.concat([7,8,9])
(7) [1, '1', 2, 3, 7, 8, 9]
arr
(4) [1, '1', 2, 3]

9、连接符join：打印拼接字符

arr.join('-')
'1-1-2-3'

10、多维数组

arr = [[1,2],[3,4],['1','2']]
arr[1][1]

对象

JS中的对象｛……｝，（并不是面向对象）

利用键值对XX:XXXX，多个属性之间用逗号隔开，最后一个不加逗号

JS中所有键都是字符串，键值是任意对象

var person = {
    name: "adair",
    age: 18,
    tags: [1,2,3,"abc"]
}

1、对象赋值

person.name = "adair2"
#'adair2'

person.name
#'adair2'

2、使用一个不存在的属性不会报错

person.haha
#undefined

3、动态的增删属性

delete person.age
#true

person.haha = "haha1"		//和给属性赋值一样
#"haha1"			//再次打印就有了haha的属性

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

"age" in person
#false

"haha" in person
#true

#父级元素也可以，toString在父级元素中
"toString" in person
true

5、判断这个属性是否是自己的

person.hasOwnProperty("name")
true

person.hasOwnProperty("toString")
false

流程控制

1、if条件

2、while循环

while(age<100){
    age += 1;
    console.log(age);
}

#尽量避免死循环
while(age<100){			
    alert(123)
}

3、for循环

4、数组循环

• 利用函数（≈Java中的方法）

var age = [3,4,5,6];
age.forEach(function (value) {
    console.log(value)
})

• 利用循环

#let num in age
var age = [3,4,5,6];
for(let num in age){		//此处为num为index
    console.log(age[num]);
}

#let x of arr
var arr=[4,5,6];
for(let x of arr){		//此处的x为数字arr中的值
	console.log(x);
}

Map和Set

ES6的新特性

• Map:

var map = new Map([["tom",90],["jack",80],["adair",60]]);
var name = map.get("tom");//通过key获得value
console.log(name);      //输出90

map.set("zhangsan",20);//向map中增加一对键值
map.delete("adair");
console.log(map);

• Set：

var set = new Set([1,2,3,4,3,2,1]);     //去重
set.add(6);
set.delete(1);
console.log(set.has(3));        //是否包含，输出true

Iterator

• 遍历Map

var map = new Map([["tom",90],["jack",80],["adair",60]]);
for (let mapElement of map) {
    console.log(mapElement);
}

• 遍历Set

var set = new Set([2,3,4])
for (let number of set) {
    console.log(number);
}

函数

定义函数

• 定义abs(后端常用)

<script>
    function abs(x) {
        if(x>0){
            return x;       //x不可写在下二行，JS会自动加分号
        }else {
            return -x;
        }
    }
</script>
#在控制台调用
abs(-10)

• 定义abs(前端常用)

<script>
    var abs = function (x) {
        if(x>0){
            return x;
        }else{
            return -x;
        }
    }
</script>

#在控制台调用
abs(-10)

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

• 由于JS的报错系统太垃圾，自己抛出

function abs(x) {
    //手动抛出异常
    if(typeof x !== "number"){
        throw "not a number adair";
    }
    
    if(x>0){
        return x;       //x不可写在下二行，JS会自动加分号
    }else {
        return -x;
    }
}

arguments是JS中默认的关键字

function abs(x) {
    console.log("x->"+x);       //输出第一个参数

    for (let i = 0; i < arguments.length; i++) {//如果x是输入的数组，则遍历
        console.log(arguments[i]);
    }

    if(x>0){
        return x;       //x不可写在下二行，JS会自动加分号
    }else {
        return -x;
    }
}

rest关键字：多的数全部为rest数组

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

变量作用域

1、在JS中，var定义的范围实际是有作用域的

function adair() {
	var x = 1;
	x = x+1;
}

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

function adair2() {  //与这个x和上一个函数x无关
	var x = 1;
	x = x+1;
}

• 内部函数可以利用外部变量

var x = 1;
function adair() {
	x = x+1;
}
var y = x+1;

• 内部变量和外部变量同名，各用各的

var x = 1;
    function adair() {
        var x = 2;
        console.log('inner'+x);
    }
console.log('outer'+x);//outer1
adair();		//inner2

• 通常情况：所有定义变量，都放在头部。

#定义乱放，不可取
function adair() {
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}
adair();        //xundefined
#说明y已经定义了，只是没有赋值

2、alert本身也是window对象的，而且是全局对象

var x = "123";
alert(window.x);//所有的全局变量，都在windows对象下
window.alert(window.x);//这个alert函数下，也是在windows对象下

var old_alert = window.alert;
old_alert(x);

window.alert =function () {//重新定义，原来的失效

}
alert(x);

//恢复
window.alert = old_alert;

• JS实际上只有一个全局作用域，任何变量（函数），假设没有找到，就会向外找。如果全局作用域没有找到，报错ReferError。
• 由于我们的所有的全局变量都会在绑在window上，不同的js文件如果有相同的全局变量，则冲突。
• 解决方式：把自己的代码放自己的唯一空间名字中，降低全局命名冲突的问题。

var adairApp={};
adairApp.name = adair;
adairApp.add = function (a,b) {
    return a+b;
}

3、在for中建议使用let，而不使用var去定义。

function aa() {
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log(i+1);//i出了for，还是可以用的，解决：把var换成let
}

4、const只读变量，不可修改

const PI = '3.14';
console.log(PI);
PI = '123';//TypeError: Assignment to constant variable.

方法

• 调用

var person={
    name: 'adair',
    birth: 2000,
    age: function () {
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}

#console调用属性，方法
person.name
person.age()

• 在JS中可以通过apply改变this的指向

function getAge() {
    var now = new Date().getFullYear();
    return now-this.birth;
}
var person={
    name: 'adair',
    birth: 2000,
    age: getAge
}

#在console
person.age();       //ok
getAge();           //不行，函数this自己找上一个对象，window中没有this.bith。
getAge.apply(person,[]);	//改变this的指向

内部对象

标准对象

typeof 12
'number'
typeof NaN
'number'
typeof true
'boolean'
typeof '21'
'string'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

Date

时间的基本

var now = new Date();

#全部在console中输入
now.getFullYear();
now.getMonth();//0~11
now.getDate();
now.getHours();
now.getMinutes();
now.getSeconds();

now.getTime();//时间戳：从1970.1.1开始,ms数，全世界一样
console.log(new Date(1646652310689));//化回来
now.toLocaleString();
now.toDateString();

JSON

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

• BSON之名缘于JSON，含义为Binary JSON（二进制JSON）。

• 在JS中，任何js支持的类型都可以用JSON表示

• 格式

  • 对象都是{}
  • 数组都是[]
  • 所有的键值都是key:value

• js对象和json字符串之间的互转

var user={
    name: "adair",
    age:18,
    sex:'男'
}
var jsonUser = JSON.stringify(user)			//转为json
var obj = JSON.parse('{"name":"adair","age":18,"sex":"男"}')	//转为js
    
#
console.log(user)
{name: 'adair', age: 18, sex: '男'}
console.log(jsonUser)
'{"name":"adair","age":18,"sex":"男"}'

• js对象vsjson字符串

Ajax

• 原生的js写法，xhr异步请求
• jQuery封装好的方法$("#name").ajax("")
• axios 请求

面向对象编程

javascript、java、c#……：面向对象。javascript有些区别

原型

var student={
    name: "adair",
    age:18,
    run:function () {
        console.log(this.name+"run……")
    }
}
var xiaoming={
    name: "xiaoming"
}
var bird={
    fly:function () {
        console.log(this.name+"fly……")
    }
}
//小明找个原型，其实就是找一个父类
xiaoming.__proto__ = student;//此时小明就有跑的方法了
xiaoming.__proto__ = bird;

• ES6之前的，不用看

function Stuent(name) {
    this.name = name
}
Stuent.prototype.hello = function () {		//增加一个函数 
    alert("hello")
}

原型的改版

class Student{
    constructor(name) {
        this.name = name
    }
    hello(){
        alert("hello")
    }
}
class XiaoStudent extends Student{
    constructor(name,age) {
        super(name);
        this.age = age;
    }
    myGrade(){
        alert("我小学生")
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",8);

操作BOM对象

• JS的诞生就是为了让他能够在浏览器中运行
• BOM浏览器对象模型：内核（不是第三方：egQQ浏览器）
  • IE6~11（自带）
  • Chrome
  • Safari（apple）
  • Firefox（Linux）
  • Opera

window

• window代表浏览器窗口

#可以看到窗口的宽高，可以直接调，看到
window.innerHeight
window.innerWidth

navigator（不建议使用）

navigator.appName
'Netscape'

navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36'

navigator.platform
'Win32'

navigator.userAgent		//网页端
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36'
navigator.userAgent		//applese 
'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1'

• 一般情况下，我们不会使用navigator，这容易被人为修改

screen

#????为不是屏幕的大小
screen.height
720
screen.width
1280

location

location代表当前URL的信息

host: "www.baidu.com"
hostname: "www.baidu.com"
protocol: "https:"
reload: ƒ reload()		//刷新网页
location.assign('https://www.wanfangdata.com.cn/index.html')

document

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

document.title
document.title = 'adair'

• 获得具体的文档节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
    <dd>JavaME</dd>

</dl>
<script>
    var dl = document.getElementById("app")
</script>
#之后可以在console上获得

• 获取cookie

#console
document.cookie
'Hm_lvt_3eec0b7da6548cf07db3bc477ea905ee=1646404464'

www.taobao.com
#登陆淘宝之后，天猫自动也登陆了，就是因为cookie

• 劫持cookie原理

<script scr="aa.js"></script>
#恶意人员，获取你的cookie上传到他的服务器

服务端也可以设置cookie：httpOnly

history（不建议使用）

• 代表浏览器的历史记录

history.forward()
history.back()

操作DOM对象

核心

• 浏览器网页就是一个DOM树形结构：（≈增删改查）

  • 增加：怎加一个DOM节点
  • 删除：
  • 更新：
  • 遍历：得到DOM节点

• 获得dom节点

<div id="father">
    <h1>这是h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应CSS选择器
    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById("p1");
    var p2 = document.getElementsByClassName("p2");

    var father = document.getElementById("father");//获取父节点的所有孩子
    var childrens = father1.children;
    
</script>
#console
father.firstElementchild
father.lastElementchild

这是原生代码，后面会用jQuery来代替

• 更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById("id1");
</script>

#console
//全部驼峰命名,且属性值用字符串
id1.innerText = '123'		//直接在网页上显示123
id1.innerHTML = "<em>123</em>"	//显示斜体123
id1.style.color = "red"			//123变红
id1.style.fontSize = "100px"	//
id1.style.padding = "2em"		//

• 在百度的网页上

#在console
var id1 = document.getElementById("su");
id1.style.color = "red"

• 删除节点的步骤：先找父节点，再把自己删了

<div id="father">
    <h1>这是h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>

    var self = document.getElementById("p1");
    var father = self.parentElement;//同var father = document.getElementById("father");
    father.removeChild(p1);
    
    //删除是一个动态的事情，这样是不对的
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);

</script>

注意：删除多个节点的时候，要注意children是时刻变化的

• 插入节点

如果我们获得一个dom节点，假设这个节点是空的，我们可以操作这个节点。如果节点非空的话，那么会覆盖

father.innerText = "1"
//那么father下面的内容会变成1

• 追加

<p id="js">javascript</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

<script>
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    list.appendChild(js)	//id=js，的内容会进入list，而且上面的会消失，因为id是唯一的
</script>

创建一个标签，并插入

var js = document.getElementById("js");
var list = document.getElementById("list");
list.append(js);
//创建一个新的p标签
var newP = document.createElement('p');
newP.innerText = "hello, adair";
list.append(newP);
//创建一个新的标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.appendChild(myScript)

var myStyle = document.createElement('style');//创建一个空的style标签
myStyle.setAttribute('type','text/css');    //设置标签的属性
myStyle.innerHTML = 'body{background-color: red}'//设置标签的内容，这里是标签选择器
//获得head部，增加创建的标签
document.getElementsByTagName('head')[0].appendChild(myStyle)

• 插入节点

var js = document.getElementById('js');
var ee = document.getElementById('ee');
var list = document.getElementById('list');
//insertBefore(newNode ,oldNode ) 
list.insertBefore(js,ee);

操作表单

表单是什么 form DOM数

• 文本框
• 下拉框
• 单选
• 复选
• 隐藏

表单的目的：提交信息

通过js操作form

<form action="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="woman" id="girl">女
    </p>
</form>

<script>
    var input_name = document.getElementById('username');
    input_name.value;   //实时得到输入框的内容
    input_name.value = "123";

    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //boy_radio.value只能获取值，
    //boy_radio.checked返回布尔，代表是否选中
    boy_radio.checked = true //选择为boy
    boy_radio.checked = false//不选择boy了
</script>

MD5提交表单

<!DOCTYPE html>
<html lang="en">
<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="#" method="post">
    <p>
        <span>用户：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>

    <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
    function aaa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(uname.value);
        console.log(pwd.value);

        pwd.value =  md5 (pwd.value);
        console.log(pwd.value);

    }
</script>

</body>
</html>

MD5加密优化

<!DOCTYPE html>
<html lang="en">
<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 aaa()">
    <p>
        <span>用户：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password">
    </p>
    <input type="hidden" id="md5-password" name="password">

    <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
    function aaa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('password');
        var md5pwd = document.getElementById('md5-password');
        //pwd.value = md5(pwd.value)
        md5pwd.value = md5(md5pwd.value);
        //alert(1)
        //可以校验判断的内容，true就是提交，false就是阻止提交
        return true;

    }
</script>

</body>
</html>

jQuery

公式：$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--cdn引入-->
    <!--<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->
    <script src="lib/jquery-3.6.0.js"></script>

</head>
<body>

<a href="" id="test-jquery">点我</a>

<script>
    // var aaa = document.getElementById('test-jquery');//这个不行
    // aaa.click(function () {
    //     alert('hello,jQuery');
    // })
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })
</script>


</body>
</html>

选择器

<script>
    document.getElementsByTagName();
    document.getElementsByClassName();
    document.getElementById()

    //jQuery:CSS中的选择器全部都能用
    $('p').click();
    $('.class1').click();
    $('#id11').click();
</script>

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

事件

• 获取鼠标的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
    </style>
</head>
<body>

mouse:  <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    // $(document).ready(function () {//页面加载完毕，简写后成下面的
    //
    // })
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'----y:'+e.pageY);
        })
    })
</script>

</body>
</html>

操作DOM

<ul id="test-ul">
    <li class="js">Javascript</li>
    <li name="python">Python</li>
</ul>

节点文本操作

$('#test-ul li[name=python]').text()		//输出Python
$('#test-ul li[name=python]').text("123")		//把原来列表的Python改为123
$('#test-ul').html()				//输出列表
$('#test-ul').html('<strong>hello</strong>')		//改变原来的值

css的操作

$('#test-ul li[name=python]').css('color','red')	//改变样式
$('#test-ul li[name=python]').css({'color':'red','font-size':'50px'})

本质是display：none

$('#test-ul li[name=python]').hide()		//隐藏
$('#test-ul li[name=python]').show()		//显示

也可以以window为对象

$(window).width()
1600
$(window).height()
188