前段 JavaScript
| 解译 | 归属 | 备注 | |
|---|---|---|---|
| Script | 脚本 | 脚本语言 | |
| alert | 警觉，弹窗 | Script | |
| console | 控制台 | Script | |
| log | 日志，打印 | console. | |
| Element | 基本部分,测试 | 浏览器调试 | |
| Source | 源码 | 浏览器调试 | |
| Network | 网络 | 浏览器调试 | |
| Application | 应用 | 浏览器调试 | |
| var | 全局变量 | Script | |
| let | 局部变量 | Script | |
| number | 数字，号码 | Script | 不区分小数，整数 |
| null | 无效的 | number | |
| undefined | 未定义 | Script | |
| use | 使用 | Script | |
| strict | 严格检查模式 | Script | use strict |
| upper | 上边 | ||
| case | 具体情况 | ||
| .toUpperCase() | 转换为大写 | ||
| lower | 下面 | ||
| .toLowerCase() | 转换为小写 | ||
| index | 索引 | ||
| .indexOf() | 获得下标位置 | ||
| t.substring() | 获得指定下标的属性 | ||
| indexOf() | 通过元素获得下标索引 | 数组 | 相同数字会返回第一个 |
| slice() | 截取 | 数组 | 包前，不包后 |
| push() | 压入到尾部 | 数组 | |
| pop() | 弹出尾部一个元素 | 数组 | |
| unshift() | 压入到头部 | 数组 | |
| shift() | 弹出头部的一个元素 | 数组 | |
| sort() | 排序 | 数组 | |
| reverse() | 元素反转 | 数组 | |
| concat() | 合并多数组 | 数组 | 并未修改原数组 |
| join | 连接符 | 数组 | 特定字符串连接 |
| * * * ： * * * ， | 用：号描述 用，结尾 | 对象 | |
| delete | 删减 | 对象 | 动态删减属性 |
| XXX in XXX | in 判断属性值是否相等 | 对象 | 可以继承父类属性 |
| hasOwnProperty() | 是否自身拥有 | 对象 | |
| forEach | 循环 | 流量控制 | |
| for…in | 遍历 | 流量控制 | 只能遍历数组下标 |
| for…of | 遍历 | 流量控制 | 可以遍历数组 |
| Map | 绘制 | 流量控制 | 遍历多个属性 |
| arguments | 转变成一个数组 | 流量控制 | |
| …rest | 获取除了 | 已经定义的参数 | 之外的所有参数 |
| window | 窗，全局对象 | 方法 | 绑定所有全局变量 |
| function | 函数 | 方法 | |
| apply | 申请，应用 | 方法 | 控制指向 |
| JSON.stringify | 对象转换为字符串 | JSON | |
| JSON.parse | 字符串转化为对象 | JSON | |
| Date() | 时间 | Date() | |
| __ proto __ | 原型对象 | 类似于继承 | |
| alert() | 弹窗 | BOM | |
| Navigator | 浏览器 | BOM | |
| screen | 屏幕尺寸 | BOM | |
| location | 位置 | DOM | 当前页面的URL信息 |
| document | 当前页面 | DOM | 获取节点 |
| history | 浏览器历史记录 | DOM | |
| getElementsByTagName() | 获取标题 | DOM | |
| getElementById() | 获取id | DOM | |
| getElementsByClassName() | 获取class | DOM | |
| innerText | 修改文本 | DOM | |
| innerHTML | 修改HTML | DOM | |
| .style.color | 属性使用包裹 | DOM | |
| removeChild() | 删除节点 | DOM | 通过父节点删除 |
| children[] | 动态删除 | DOM | 注意节点变化 |
| appendChild() | 追加到后面 | DOM | |
| createElement() | 创建标签 | DOM | |
| setAttribute(） | 同时创建标识和内容 | DOM | |
| inserBefore | 插入 | DOM | |
| onsubmit | 提交时 | DOM | |
| $(选择器).函数(动作) | jQuery |
1、什么是JavaScript
1.1、概述
JavaScript 是一门脚本语言
一个合格的后端人员，必须要精通JavaScript
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到 es6 版本
但是大部分浏览器还只停留在支持 es5 代码上
开发环境–线上环境，版本不一致
廖雪峰JavaScript
2、快速入门
2.1、引入JavaScript
- 内部标签6
<script>
//备注
</script>
- 外部引入
abs.js
//...
test.html
<script src="js/abs.js"></script>
- 第一个JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个JavaScript</title>
<!-- script标签内，写JavaScript代码 -->
<!-- 内部标签 -->
<!-- <script>-->
<!-- alert('hello,world');-->
<!-- </script>-->
<!--外部引入 -->
<!--注意：script标签必须成对出现 -->
<script src="js/dy.js"></script>
<!-- 不用显示定义type，也默认就是 javascript -->
<script type="text/javascript"></script>
</head>
<body>
<!--这里也可以存放代码-->
</body>
</html>
2.2、基本语法入门
<script>
// 1.定义变量 变量类型 变量名 = 变量值
var score = 1;
//alert(num);
// 2.条件控制
if(score>60 && score<70){
alert("60~70")
}else if(score>70 && score<80){
alert("70~80")
}else{
alert("other")}
/*
console.log(score) 在浏览器的控制台打印变量！类似于System.out.println();
*/
</script>
console.log(）打印变量
浏览器必备调试须知
Elements：测试 HTML、CSS
Console（控制台）：测试 JavaScript，可以直接输入script，打印消息
Sources（源码）：可以断点测试
Network（网络）：发生网络请求
Application（应用）：外部数据库，存一些简单的数据保存到网页里面
2.3、数据类型
变量
var 王者荣耀 = “倔强青铜”；
number
js不区分小数和整数，Number
- 123 整数
- 123.1 浮点数123.1
- 1.123e3 科学计数法
- -99 负数
- NaN not a number
- Infinity
字符串
‘abc’ “abc”
布尔值
true，false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真
比较运算符！！！
=
类似于 1 == “1”(true)
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）
这是一个js的缺陷，坚持不能使用**==**比较
须知
- NaN===NaN，这个与所有的数值都不相等，包括它自己
- 只能通过**isNaN(NaN)**来判断这个数是否是 NaN
浮点数问题
console.log((1/3)) === (1-2/3))
尽量避免使用浮点数进行运算，存在精度问题
Math.abs(1/3-(1-2/3))<0.00000001
可以这么计算，得出数已经接近于0
null 和 undefined
- null 空
- undefined 未定义
数组
Java数组的数值必须是相同类型的对象，js中不需要这样！
//保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true]
new Array(1,12,4,'hello')
取数组下标：如果越界了，会提示 undefined（未定义）
对象
对象是大括号{}，数组是中括号[]
每个属性之间使用逗号隔开，最后一个不需要添加
//Person Person = new Person(1,2,3,4);
var Person = {
name:"qinjiang",
age:3,
tags:['js','java','...']
}
取对象值
Person.name “qinjiang”
Person.age 3
2.4、严格检查规范
'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
<!--前提：IDEA 需要设置支持 ES6 语法
'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议使用 let 去定义
-->
<script>
'use strict'
//全局变量
//var
let i = 1;
</script>
3、数据类型
3.1、字符串
-
正常字符串我们使用单引号（’ ‘），或者双引号（“ ”）包裹
-
注意转义字符 \
\ ’
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符
-
多行字符串编写
//`` teb 上面 esc键下面 （~）var msg = ` hello world 你好ya 你好 ` -
模板字符串
let name = "qinjiang"; let age = 3; let msg = `你好呀，${ name}` //输出结果：你好呀，qinjiang -
字符串的长度和打印指定位置
str.length
console.log(student[0])
-
字符串的可变性：不可重新赋值
赋值：student[0] = 1
打印：console.log(student)
结果：student
0号位，未重新赋值
-
大小写转换
// 注意，这里是方法，不是属性
student.toUpperCase() //转换为大写
student.toLowerCase() //转换为小写
-
获取指定属性下标位置
student.indexOf(‘t’)
1
-
获取指定下标的属性
substring
// [ ) 包含前面，不包含后面
输入：student.substring(1) // 指：包含1号位及之后的元素
输出：tudent
输入：student.substring(1，3) // 指：包含1号位及3号位之前的元素
输出：tu
3.2、数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5]； // 通过下标取值和赋值
arr[0];
arr[0] = 1;
-
长度
arr.length
注意：
- JavaScript 数组长度可变，加入给 arr.length 赋值，数组大小就会发生变化
- 新加入的元素显示为 undefined 未定义
- 如果赋值过小，就会将多余的元素丢失
-
indexOf，通过元素获得下标索引
arr.indexof(2)
1
字符串的 “1” 和数字 1 是不同的
（当有相同数字时，它会返回第一个数字下标）
-
slice()
- 截取Array的一部分，返回一个新数组
- 类似于 student.substring(1)
- [ ) 包含前面，不包含后面
-
push() 、pop() 尾部
- .push()：压入到尾部
- .pop() ：弹出尾部的一个元素
-
unshift()、shift() 头部
- .unshift() ：压入到头部
- .shift() ：弹出头部的一个元素
-
排序 sort()
(3) [“B”, “C”, “A”];
arr.sort()
(3) [“A”, “B”, “C”];
-
元素反转 reverse()
(3) [“A”, “B”, “C”];
arr.reverse()
(3) [“C”, “B”, “A”];
-
concat()
(3) [“C”, “B”, “A”];
arr.concat([1,2,3])
(6) [“C”, “B”, “A”, 1, 2, 3];
arr
(3) [“C”, “B”, “A”];
注意：concat（）并没有修改数组，只是会返回一个新的数组
-
连接符 join
打印拼接数组，使用特定的字符串连接
(3) [“C”, “B”, “A”];
arr.join(’-’)
“C-B-A”
-
多维数组
arr = [[1,2] , [3,4] , [“5” , “6”]];
arr[1][1]4
数组：存储数据（如何存，如何取，方法都是可以自己实现）
3.3、对象
若干个键值对
var 对象名字 = {
属性名： 属性值，
属性名： 属性值，
属性名： 属性值}
//定义了一个person对象，它有四个值
var person = {
name:"kuangsheng",
age:3,
email:"24736743@qq.com",
score:59}
Js中对象，{…}表示一个对象，键值对描述属性 XXXX : XXXX，多个属性之间使用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象
-
对象赋值
person.name = “qinjiang”
person.name
“qinjiang”
-
使用一个不存在的对象属性，不会报错！undefined
person.haha
undefined
-
动态的删减属性，通过 delete 删除对象的属性
delete person.name
true
person //不在存现name属性
-
动态的添加，直接给新的属性添加值即可
person.haha = “haha”
“haha”
person //已存在haha属性
-
判断属性值是否在这个对象中！ XXX in XXX！
‘age’ in person
true
//继承，JavaScript也可以继承父类属性
‘toString’ in person
true
-
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty(“toString”)
false
person.hasOwnProperty(“aeg”)
true
3.4、流程控制
-
if 判断
var age = 3; if(age>10){ //第一判断 alert("hehe") }else if(age>3){ //第二判断 alert("haha") }else{ //否者... alert("kuwa~")} -
while 循环，避免程序死循环
while(age<100){ age = age + 1; console.log(age) } do{ age = age + 1; console.log(age) }while(age<100) -
for 循环
for(let i = 0; 1 < 100; i++){ console.log(i) } -
forEach 循环
ES5.1 引入
var age = [12,3,12,123,423,56,72]; //函数 == 方法 age.forEach(function(value)){ console.log(value) } -
for…in
//for(var index in object){} for(var num in age){ if(age.hasOwnProperty(num)){ console.lg("存在") console.log(age[num]) } }var arr
最低0.47元/天 解锁文章
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
