<font color='red'这么语言本身就不严谨,毕竟10天就设计出来了..对出现的结果感到别扭就忍着吧...
大多数知识点都没必要去刻意记忆,有点印象就行;只有部分需要加以理解..

javascript介绍

javaScript**一般用来编写客户端 脚本 **,来为html页面添加交互行为,是前端语言.

标签在js里叫做元素或者节点!!

w3school: https://www.w3school.com.cn/js/index.asp

浏览器的组成

浏览器 = 外壳 + 内核
内核 = 渲染引擎 (将h5和css代码渲染成图形) + JS引擎 (解析JS代码)

javascript的组成

JS = ECMAScript(基础语法) + BOM(操作浏览器) + DOM(操作页面元素) ECMAScript: JavaScript的语法标准
                包括变量、表达式、运算符、函数、if语句、for语句等.
BOM: 浏览器对象模型. 操作浏览器部分功能的API.
eg 浏览器弹窗 网页的前进后退 网页滚动条等... 
DOM: 文档对象模型. 操作网页上元素的API.
eg 使盒子移动、变色; 实现轮播图等...

其它相关概念

1> ECMAScript可以理解为是javascript的一个标准
2> java是后端语言
3> jquery是由javascript编写的
4> node.js是后端语言,以js代码来驱动底层C语言实现后端功能..

Ps:
1> 单行注释// 多行注释/* */
2> JavaScript对换行、缩进、空格不敏感(每一条语句末尾要加上 分号 ,虽然分号不是必须加的,但是为了程序今后要压缩,如果不加分号,压缩之后将不能运行)
3> 所有的符号,都是英语的. eg 括号、引号、分号.

---

js的引入方式

方式一:
可以在head标签里加,也可以在body标签里加..
整个文档树的加载时自上而下的依次加载的, 一般将其放在body里的最后 ,这样标签都能找到..

<script>
  // 在这里写你的JS代码
</script>

方式二: body里的最后一行引入js文件<script src="xxx.js"></script>

---

变量

命名规范:
1> 由字母、数字、下划线、$ 组成,但是不能数字开头,也不能纯数字
最好别用$,因为jquery章节会用到这个符号,避免冲突...
2> 严格区分大小写
3> js推荐使用驼峰体,python推荐使用下划线

先提一嘴, ES6新增了 let 命令,用于声明变量(声明的变量属于块级作用域)
ES6新增 const 用来声明常量. 一旦声明,其值就不能改变.

// 在浏览器Console交互环境下运行

/* 1> 先声明后定义 
	 声明变量时无需指定类型,变量x可以接受任意类型 */
var x;
x;      // undefined 表明变量已定义但未赋值
x = 10; // 给声明的变量赋值

/* 2> 声明立刻定义 */
var x = 1; // undefined 表明返回值为空

// Ps: js这门语言 `x = 333;` 这样定义这样写不会报错.
//	   但别这样做,按照规范来加var关键字,因为这跟作用域有关系!

---

数据类型与内置方法

☆ 数字 number

JavaScript不区分整型和浮点型,就只有一种数字类型,即number

typeof toFixed toString parseInt parseFloat

ps: python里的整型和浮点型转换成json格式,都会变成js里的数字number类型..
看json全称(JavaScript Object Notation, JS 对象简谱)是一种轻量级的数据交换格式.

var x = 3;
var y = 3.1;
var z = 13e5; // e5即10的5次方
var m = 13e-5; // e-5即10的-5次方
var n = NaN; // NaN 可以理解成 not a number 非数字

// 1. typeof 查看数据类型
typeof n; // 'number'
// 2. toFixed 四舍五入
var num=1.3456
num.toFixed(2) // '1.35' 保留两位小数
// 3. toString 数字类型 --> 字符串类型
var a=123; // undefined
var b=a.toString() // undefined
b // '123'
a // 123
// 4. 字符串类型 --> 数字类型
// ps: python里必须是全数字组成的字符串才能转整型
parseInt("22啦啦啦") // 22 带有自动净化的功能:只保留字符串最开头的数字,后面的中文自动消失
parseInt("啦啦啦22") // NaN
parseInt("22") // 18 还是推荐这样使用.. js语言本身的设计就是有很多不严谨的地方,习惯就好..
var a = parseInt("1.3") + parseInt("2.6");
a; // 3 自动带有截断小数的功能: 取整,不四舍五入
// 解决方案
var a = parseFloat("1.3") + parseFloat("2.6");
a; // 3.9000000000000004
// so, parseInt如何解析？从左到右开始,碰到一个非数字,后面的全都不要啦!

// javascript是弱类型语言; python是强类型动态语言
// js也是动态语言: 变量的类型到运行到那一行的时候才区分..不用像c语言一样指定int什么的...
x = 5
y = '3.1'
res1 = x - y // 1.9
typeof res1; // 'number'
res2 = x + y // '53.1'
typeof res2; // 'string'
// 解决方案
parseInt(x) + parseInt(y) // 2

☆ 字符串 string

var a = "Hello"
var b = "world;"
var c = a + b;
c // 'Helloworld;'

常用方法:

方法	说明
.length	返回长度
.trim()	只能移除空白, 不能移除指定字符
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符, 没有-1的索引,越界不会报错..
.concat(value, ...)	拼接, 拼接字符串通常使用“+”号
.indexOf(substring, start)	子序列位置, 未找到返回-1
.substring(from, to)	根据索引获取子序列, 类似于python切片操作,顾头不顾尾..
.slice(start, end)	切片
.toLowerCase()	全部转换成小写
.toUpperCase()	全部转换成大写
.split(delimiter, limit)	分割, limit切分的次数(与python不同的是,没切分的就丢弃了..)

Ps: string字符长有与正则结合的4个方法.. (详见后文的正则对象)
     .match .search .split .replace

var a = 'Hello' // undefined
a.charAt(30) // ''
a.concat(" World") // 'Hello World'
a //'Hello'
a.indexOf("ll",2) // 2
a.indexOf("ll",3) // -1

a = 'Hello World' // 'Hello World'
a.substring(1,3) // 'el'
a.slice(1,3) // 'el'
a.substring(3,1) // 'el'

var a = "egon:123:male"
a.split(":") // ['egon', '123', 'male']
a.split(":",1) // ['egon']
a.split(":",2) // ['egon', '123']

/* 
string.slice(start, stop)和string.substring(start, stop)：

[两者的相同点]:
	如果start等于end,返回空字符串
	如果stop参数省略,则取到字符串末
	如果某个参数超过string的长度,这个参数会被替换为string的长度

[substirng()的特点]:
	如果 start > stop, start和stop将被交换
	如果参数是负数或者不是数字,将会被0替换

[silce()的特点]:
	如果 start > stop 不会交换两者
	如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
	如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
*/

ES6中引入了模板字符串

// 1. 可以当做普通字符串使用
var msg = `my name is egon`

// 2. 可以用来定义多行字符串
var info = `
    name:egon
    age:18
    sex:male
`

// 3. 可以在字符串中嵌入变量
var name = "dc";
var age = 20;
var msg = `my name is ${name}, my age is ${age}`;
msg; // 'my name is dc, my age is 20'

// Ps: 若模板字符串中需要使用反引号,则在其前面要用反斜杠转义.

☆ 布尔值 boolean

区别于Python, true和false都是小写

布尔值为假的数据类型: 空字符串 0 null undefined NaN 其余数据类型的布尔值均为真: []      123

null和undefined的区别
1> null表示值是空,一般在需要指定或清空一个变量时才会使用, 如 name=null;
2> undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined;
     还有就是函数无明确的返回值时,返回的也是undefined
简单来说: null表示变量的值是空, undefined则表示只声明了变量, 但还没有赋值.

a = null; // null
typeof a; // 'object'

---

数据类型之对象

JavaScript 中的所有事物都是对象: 字符串、数值、数组、函数...
Array,Date,Math,Json 等等是js提供的内建对象 typeof结果为'object'

ps: javascript允许自定义对象..略.

☆ 数组对象Array

作用: 使用单独的变量名来存储一系列的值. 类似于Python中的列表. Ps: 从json的角度去看,哪怕定义时元素是单引号,也会自动转换成双引号..

**常用方法:**s

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素, pop(数字)不管填入的数字是几,弹出的都是最后一个元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片, 顾头不顾尾
.reverse()	反转
.join(seq)	拼接, 将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数, 没有返回值！
.splice()	删除元素,并向数组添加新元素; 亦可以实现python列表的insert功能
.map()	返回一个数组元素调用函数处理后的值的新数组

/* 数组没有下标 -1 */
var arr = [1,2,3,4,5]
arr[0] // 1
arr[1] // 2
arr[-1] // undefined 虽然不会报错,但取不到值.
arr[arr.length-1] // 5


/* 字符串的concat跟`+`号没有区别,数组类型有区别 */
var arr0 = [11,22,33,44,55]
var arr1 = ["aa","bb","cc"]
arr0 + arr1 // '11,22,33,44,55aa,bb,cc'
arr0.concat(arr1) // [11, 22, 33, 44, 55, 'aa', 'bb', 'cc']


/* .sort()
1> 若调用该方法时没有使用参数,则按照字符编码的顺序进行排序
2> 若想按照其他标准进行排序,就需要提供比较函数,
	 该函数应该具有两个参数 a 和 b,接收传入的a和b,执行函数体代码,然后返回一个值用于说明a和b的大小.
			返回值 < 0 : 代表a小于b
			返回值 = 0 : 代表a等于b
			返回值 > 0 : 代表a大于b
*/
var arr0 = [5,3,"a","-1"]
arr0.sort() // ['-1', 3, 5, 'a']
var arr1 = [123,9,1211,11]
arr1.sort() // [11, 1211, 123, 9] 如何比的？把它们当作字符串比的,首字母依次比较..
// 解决
function f(x,y){
    return x - y
}
arr1.sort(f) // [9, 11, 123, 1211]

/* .splice() 
	 可以实现从中间插入元素,类似于python的insert 
*/
var arr=['aa','bb','cc','dd','ee']
// 从下标为1的元素开始 包括自己往后共删除3个元素
// 删除'bb','cc','dd'这三个值,然后插入'xxxx','yyy'
arr.splice(1,3,'xxxx','yyy') 
arr // ['aa', 'xxxx', 'yyy', 'ee']
// 实现从中间插入元素
arr = [1,2,3]
arr.splice(1,0,'x','y','[2,3]') // 删除0个元素
arr // [1, 'x', 'y', '[2,3]', 2, 3]


/* forEach与map的区别 
	 它们都会遍历元素,但forEach返回值是undefined;map返回值是一个新数组
	 ps: 遍历元素还可以用for循环
*/
var namearr = ['dc','egon','alex']
var res = namearr.forEach(function(item){return item+'_yyds'})
res // undefined
var res = namearr.map(function(item){return item+'_yyds'})
res // ['dc_yyds', 'egon_yyds', 'alex_yyds']
namearr // ['dc', 'egon', 'alex']

☆ 日期对象Date

创建日期对象只有构造函数这一种方式,使用 new 关键字

吐槽: js受OOP的影响,但不想将其做成一门面向对象的语言,so,保留了一些面向对象的特性...

// 1> 获取当前时间
var d1 = new Date() 
// 2> 指定时间格式 参数为日期字符串
var d2 = new Date('2022/02/22 22:22:22')
// 3> 用时间戳 参数为毫秒数
var d3 = new Date(7000)
// 4> 参数为:年 月 日 时 分 秒 毫秒
var d4 = new Date(2022,02,22,22,22,22,3000)

console.log(d1) // VM2547:1 Mon May 30 2022 20:04:47 GMT+0800 (中国标准时间)
console.log(d1.toLocaleString()) // VM2593:1 2022/5/30 20:04:47
console.log(d1.toUTCString()) // VM2645:1 Mon, 30 May 2022 12:04:47 GMT

d1.getFullYear() // 2022 年
d1.getMonth()+1 // 5 月(范围0-11)
d1.getDate() // 30 日 
d1.getDay() // 1 星期几(0代表星期天)
d1.getHours() // 20 时
d1.getMinutes() // 4 分
d1.getSeconds() // 47 秒
d1.getMilliseconds() // 364 毫秒
d1.getTime() // 1653912287364 时间戳

☆ Math对象

方法	含义
Math.floor()	向下取整,如5.1取整为5
Math.ceil()	向上取整,如5.1取整为6
Math.max(a,b)	求a和b中的最大值
Math.min(a,b)	求a和b中的最小值
Math.random()	随机数,默认0-1之间的随机数,若想求min~max之间的数 公式为: min+Math.random()*(max-min)

☆ Json对象

var obj={"name":"egon","age":18};
typeof(obj) // 'object' 在python里是字典,js是对象数据类型
obj.name    // 'egon'   对象的取值方式一
obj['name'] // 'egon'   对象的取值方式二

/* 序列化 对象 --> json格式的字符串 */
var str_json=JSON.stringify(obj); 
str_json // '{"name":"egon","age":18}'

/* 反序列化 SON格式的字符串 --> 对象 */
var obj1=JSON.parse(str_json);
obj1 // {name: 'egon', age: 18}

☆ 正则对象

注意g模式下的那个坑！！

/* 创建正则对象的两种方式 */
var reg1 = new RegExp("^[a-zA-Z]([a-zA-Z0-9]){5,11}$")
var reg2 = /^[a-zA-Z]([a-zA-Z0-9]){5,11}$/
typeof reg1; // object
typeof reg2; // object
reg1.test("E123a45") // true
reg1.test("E123") // false

/* 匹配模式g与i */
var reg3 = new RegExp('l','gi') // g全局所有的,i忽略大小写
var reg4 = /l/gi
s1 = 'heLLo world' // 'heLLo world'
s1.replace('L','哈') // 'he哈Lo world' 若不用正则,它只会替换一个
s1.replace(reg3,'哈') // 等同于 s1.replace('/l/gi','哈')
'he哈哈o wor哈d'
s1.replace(reg4,'哈')
'he哈哈o wor哈d'

/* string字符串与正则结合的四个方法 */
var s1="heLLo world";
s1.match(/l/gi) // ['L', 'L', 'l'] 符合正则的内容
s1.search(/h/g) // 符合正则的第一个内容的索引0,若没找到返回-1
s1.split(/ /) // ["hello", "world"] 按照空格切
s1.replace(/l/g,'L') // "heLLo worLd"

var s2 = "a: -b/ c"
s2.split(/[: /-]/) // ['a', '', '', 'b', '', 'c']
var s3 = 'a:b:c:d:e'
s3.split(/:/) // ['a', 'b', 'c', 'd', 'e']
s3.split(/:/,2) // ['a', 'b']

/* 
注意: var reg3 = /egon/g;
		 g匹配模式下,有一个坑,匹配成功后,指针会停在最后;匹配失败,指针才会回到0的位置.
 		 每次匹配前, 通过 `reg3.lastIndex=0` 解决..
*/

---

运算符

算数运算符: + - * / % ++ --
比较运算符: > >= < <= != == === !==
逻辑运算符: ! || &&
赋值运算符: = += *= /= %=

/* 
  若无赋值操作, i++和++i没有区别..都是给i的值加1
  将i++放到赋值操作里,它先把i的值给左边的变量,然后再做i的自增操作..
  将++i放到赋值操作里,它先做i的自增操作,然后再把i的值给左边的变量
  i-- ; --i 同理
*/
var i = 0;
var res = i++;
res // 0
i // 1

var i = 0;
var res = ++i;
res // 1
i // 1

/*
  注意: === 更严谨了,比较的时候数据类型都必须一样
*/
1 == 1 // true
1 == "1" // true
1 === "1" // false

---

流程控制

if-else switch for while break continue 三元运算

<body>
<script>
    // if-else
    let d = new Date()
    if (d.getDate() == 0) {
        alert("今天是星期天.")
    } else if (d.getDay() == 6) {
        alert("今天是星期六.")
    } else {
        alert("老老实实的工作吧!")
    }

    // switch
  	// 记得break!!
    let x = new Date().getDate();
    switch (x) {
        case 0:
            console.log("今天是星期天.")
            break
        case 6:
            console.log("今天是星期六.")
            break
        default:
            console.log("老老实实的工作吧!")
            break
    }

    // for循环
    for (let i = 0; i <= 5; i++) {
        console.log(i)
    }
    // for循环遍历数组元素
    // 方式一
    let arr = [11, 22, 33, 44, 55]
    arr.forEach(function (item) {
        console.log(item)
    })
    // 方式二
    for (let i = 0; i <= arr.length; i++) {
        console.log(i)
    }

    // while循环
    let count = 0;
    while (count <= 5) {
        if (count == 3) {
            // continue
            break
        }
        console.log(count);
        count++;
    }

    // 三元运算
    let a = 1;
    let b = 2;
    let c = a > b ? a : b
    console.log(c)
</script>
</body>

---