1、什么是JavaScript
2、快速入门
1、内部标签
<script>
//写JavaScript代码
</script>
2、外部标签
abs.js
alert('Hello,World!')
text.html
<script src="abs.js"></script>
练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 在 script 标签内写JavaScript代码 -->
<!-- <script>-->
<!-- alert('Hello,world!');-->
<!-- </script>-->
<!-- 外部引入-->
<!-- 注意：script标签必须要成对出现-->
<!-- 不用显示定义type，也默认就是JavaScript-->
<script type="text/javascript" src="我的第一个js文件.js"></script>
</head>
<body>
</body>
</html>
我的第一个js文件.js
alert('Hello,World!')
2.2、基本语法入门·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1.定义变量 变量类型 变量名 = 变量值;
var score = 71;
// alert(score);
// 2. 条件控制
if (score>60 && score<70){
alert("60~70");
}else if (score>70 && score<80){
alert("70~80");
}else{
alert("other");
}
console.log(score); // 在浏览器的控制台打印变量！
/*
* 多行注释
* */
</script>
</head>
<body>
</body>
</html>
浏览器必备调试须知：
elements
Control
Source
Network
Application
2.3、数据类型
数值，文本，图形，音频，视频……
变量
var 王者荣耀="倔强青铜";
number
js不区分小数和整数，Number
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN // not a number
Infinity //表示无限大数字
字符串
‘abc’ “abc”
布尔值
true,false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真
比较运算符
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）
这是一个JS的缺陷，坚持不要使用 == 比较
须知：
- NaN===NaNcy，这个与所有的数值都不相等，包括自己
- 只能通过 isNaN(NaN) 来判断这个数是否是 NaN
浮点数问题：
console.log((1/3) === (1-2/3))
// 推荐用以下方法判断两个小数是否相等
console.log(math.abs(1/3-(1-2/3))<0.00000001)
尽量避免使用浮点数进行运算，存在精度问题！
null 和 undefined
- null 空
- undefined 未定义
数组
Java的数值必须是相同类型的对象，JS中不需要这样！
// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',"worild",null,true];
new Array(1,2,3,"hello",null,true)
取数组下标：如果越界了，就会undefined
对象
对象是大括号，数组是中括号！！
每个属性之间使用逗号隔开，最后一个不需要添加
// Person person = new Person(1,2,3,4,5);
var person = {
name: "qingjiang",
age: 3,
tags: ['js','java','web']
}
取对象的值
person.name
person.age
person.tags[0]
person.tags[1]
person.tags[2]
2.4、严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA 需要设置支持ES6语法
‘use strict’; 严格检查模式，预防 JavaScript 的随意性导致产生一些问题
必须写在 JavaScript 的第一行！！！
局部变量建议都使用 let 去定义~
-->
<script>
'use strict';
// 全局变量
// i = 1;
// 局部变量
let i = 12;
// a = 13;
// ES6 let
</script>
</head>
<body>
</body>
</html>
3、数据类型
3.1、字符串
- 正常字符串我们使用单引号，或者双引号包裹
- 注意转义字符 /
/'
/n
/t
/u4e2d /u#### Unicode字符
/x41 ASC11字符
3、多行字符串编写
// Tab 上面 ESC键下面
var msg =
`hello
world
你好
世界！
`
4、模板字符串
'use strict';
let name = "qingjiang";
let age = 3;
let msg = `你好呀，${name},my age is ${age}`;
5、字符串长度
console.log(str.length)
6、字符串的可比性，不可变
student[0] = 1;
console.log(student[0])
s
console.log(student)
student
7、大小写转换
// 注意这里是方法，不是属性
student.toUpperCase() // 把值转换成大写
student.toLowerCase() // 把值转换成小写
8、student.indexOf(‘t’) 获取索引位置。
9、student.substring()
[)
student.substring(1) // 从第一个开始字符串截取到最后一个字符串
student.substring(1,3) // [1,3) 前包后不包
3.2、数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]; // 通过下标取值和赋值
arr[0];
arr[0] = 1;
1、长度
arr.length
注意：给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
2、indexOf，通过元素获取下标索引
arr.indexOf(2)
1
3、slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
4、push(), pop() 尾部
push: 压入到尾部
pop: 弹出尾部的一个元素
5、unshift(), shift() 头部
unshift(): 压入到头部
shift(): 弹出头部的一个元素
6、排序 sort()
['B', 'C', 'A']
arr.sort()
['A', 'B', 'C']
7、元素反转 reverse()
['B', 'C', 'A']
arr.sort()
['A', 'B', 'C']
arr.reverse();
['C', 'B', 'A']
8、concat() 拼接
arr = ["B","C","A"]
(3) ['B', 'C', 'A']
arr.sort()
(3) ['A', 'B', 'C']
arr.reverse();
(3) ['C', 'B', 'A']
arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]
注意：concat() 并没有修改数组，只会返回一个新的数组
9、连接符 join()
打印拼接数组，设置连接符。
arr.join("-")
'C-B-A'
10、多维数组
arr = [[1,2],[3,4],['5','6']]
arr[0][1]
2
arr[2][1]
'5'
数组：存储数据（如何存，如何取，方法都可以自己实现）
3.3、对象
若干个键值对
var 对象名 = {
属性名: 属性值，
属性名: 属性值，
属性名: 属性值
……
}
// 定义了一个person对象，它有四个属性！
var person = {
name: "kuangsheng",
age: 3,
email: "232243233@qq.com",
score: 0
}
JS中对象，{……}表示一个对象，键值对描述属性 xxxx: xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！。
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值
person.name = "qiangjiang"
'qiangjiang'
person.name
'qiangjiang'
2、使用一个不存在的对象属性，不会报错！ undefined
person.haha
undefined
3、动态的删减属性，通过 delete 删除对象的属性
delete person.name;
true
person
{age: 3, email: '232243233@qq.com', score: 0}
4、动态的添加，直接给新的属性添加值即可
person.hah = "hah"
'hah'
person
{age: 3, email: '232243233@qq.com', score: 0, hah: 'hah'}
5、判断属性值是否在这个对象中！ xxx in xxx；
'age' in person
true
// 继承
'tostring' in person
false
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('tostring')
false
person.hasOwnProperty('age')
true
3.4、流程控制
if 判断
'use strict';
var age = 3;
if (age<3){
alert("haha");
}else if (age<5){
alert("kuwa~");
}else {
alert("kuwa~");
}
while 循环，避免程序死循环
'use strict';
let age = 0;
while(age<100){
age = age + 1;
console.log(age);
}
do{
let age = 0;
age = age + 1;
console.log(age)
}while{age<100};
for 循环
'use strict';
let age = 0;
for ( let i = 0; i < 100; i++) {
console.log(i);
}
forEach 循环:(5.1引入的)
'use strict';
let age = [12,3,34,23,24,45,13,141,54];
// 函数
age.forEach(function (value) {
console.log(value);
})
for……in
'use strict';
let age = [12,3,34,23,24,45,13,141,54];
for(var num in age){
if (age.hasOwnProperty(num)){
console.log("存在");
console.log(age[num]);
}
}
3.5、Map和Set
ES6的新特性
Map和Set:
'use strict';
// 学生成绩，学生姓名
let map = new Map([['tom',100],['jack',99],['monkey',98]]);
let name = map.get('tom'); // 通过key获取value
map.set('admin',97); // 新增或修改
map.delete('tom'); // 删除
// Set:无序不重复的集合
var set = new Set([3,1,1,1,1,1]); // set 可以去重
set.add(2); // 添加
set.delete(3); // 删除
console.log(set.has(2)); // 检查是否包含这个元素
console.log(set);
console.log(name)
3.6、iterator
作业：使用 iterator 来遍历迭代我们Map，Set !
'use strict';
// 学生成绩，学生姓名
let map = new Map([['tom',100],['jack',99],['monkey',98]]);
let name = map.get('tom'); // 通过key获取value
map.set('admin',97); // 新增或修改
map.delete('tom'); // 删除
var set = new Set([3,1,1,1,1,1]); // set 可以去重
set.add(2); // 添加
set.delete(3); // 删除
console.log(set.has(2)); // 检查是否包含这个元素
console.log(set);
console.log(name);
var arr = [3,4,5];
// 打印下标
for (var i in arr) {
console.log(i);
}
// 打印具体的值
for (var x of arr){
console.log(x);
}
// for of 可以遍历Map和Set
for (var a of map){
console.log(a);
}
// arr 新增元素后，用for in遍历下标有bug
arr.name = 321;
for (let b in arr){
console.log(b);
}
4、函数及面向对象
4.1、函数定义
绝对值函数
定义方式一：
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到 return 代表函数结束，返回结果！
如果没有执行 return ，函数执行完也会返回结果，结果就是undefined
定义方式二：
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){….} 这是一个匿名函数。但是可以把结果赋值给abs,，通过abs就可以调用函数！
方式一和方式二等价！
调用函数
abs(10) // 10
abs(-10) // 10
参数问题：JavaScript 可以传任意个参数，也可以不传递参数！
参数传进来是否存在的问题？
假设不存在参数，如何规避？
'use strict'
// function abs(x){
// 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是一个JS免费赠送的一个关键字
代表传递进来的所有参数，是一个数组 ！
'use strict'
function abs(x){
console.log("x=>"+x);
for (var i = 0;i<arguments.length;i++){
console.log(arguments[i]);
}
if (x>=0){
return x;
}else{
return -x;
}
}
问题：arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest
以前：
if (arguments.length>2){
for (var i=0;i<arguments.length;i++){
//.....
}
}
ES6引入的新特性，获取除了已经定义的参数之外的所有参数~
function aaa(a,b,...rest){
console.log('a=>'+a);
console.log('b=>'+b);
console.log(rest);
}
rest 参数只能写在最后面，必须用 … 标识。
4.2、变量作用域
在JavaScript中，var 定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~ （非要实现的话，可以研究下闭包）
function bbb(){
var x = 1;
x = x + 1;
}
x = x + 2; // Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function bbb(){
var x = 1;
x = x + 1;
}
function bbb1(){
var x = 1;
x = x + 1;
}
// 内部函数可以访问外部函数的成员，反之则不行
function bbb(){
var x = 1;
function bbb1(){
var y = x + 1;
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}
假设， 内部函数变量和外部函数的变量，重名 ！
function ccc(){
var x = 1;
function ccc2(){
var x = 'a';
console.log('inner'+x);
}
console.log('outer'+x);
ccc2();
}
ccc();
假设在 JavaScript 中函数查找变量从自身函数开始，由 内 向 外 查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量的作用域
function aaa(){
var x = "x" + y;
console.log(x);
var y = 'y';
}
结果： xundefined
说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
function aaa(){
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；
function aaa2(){
var x = 1,
y = x + 1,
z,i,a; //undefined
// 之后随意用
}
全局函数
//全局变量
x = 1;
function f(){
console.log(x);
}
f();
console.log(x);
全局对象 window
var x = 'xxx';
alert(x);
alert(window.x); // 默认所有的全局变量，都会自动绑定在 window 对象下
alert() 这个函数本身也是一个window变量；
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
// old_alert(x);
window.alert = function (){
};
// 发现 alert() 失效了
window.alert(123);
// 恢复
window.alert = old_alert;
window.alert(456);
JavaScript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的 js 文件，使用了相同的全局变量，冲突 –> 如何能够减少冲突？
// 唯一全局变量
var GlobalApp = {};
// 定义全局变量
GlobalApp.name = 'globalApp';
GlobalApp.add = function (a,b){
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
jQuery
局部作用域 let
function aaa(){
for (var i = 0;i < 100;i++){
console.log(i);
}
console.log(i+1); // 问题？ i 出了这个作用还可以使用！
}
aaa();
ES6 let 关键字，解决局部作用域冲突问题！
function aaa(){
for (let i = 0;i < 100;i++){
console.log(i);
}
console.log(i+1); // Uncaught ReferenceError: i is not defined
}
aaa();
建议大家都是用 let 去定义局部变量；
常量 const
在ES6之前，怎么定义常量：只有用全部大写字母大写字母命名的变量就是常量；
var PI = '3.14';
console.log(PI);
PI = '21333'; // 可以被改变这个值
console.log(PI);
在 ES6 引入了常量关键字 const
const PI = '3.14'; // 只读变量
console.log(PI);
PI = '21333'; // TypeError: Assignment to constant variable
console.log(PI);
4.3、方法
4.3、闭包
4.4、箭头函数
4.5、创建对象
4.6、class继承（新特性）
4.7、原型链继承 (难)
5、常用对象
5.1、Date
5.2、JSON
6、操作Dom元素
6.1、插入Dom
6.2、更新Dom
6.3、删除Dom
7、操作Bom元素
7.1、window
7.2、navigator
7.3、screen
7.4、location
7.5、Document
7.6、History
7.7、操作表单
html基础验证
7.8、操作文件
可以看廖雪峰的视频
原创文章，作者：Carrie001128，如若转载，请注明出处：https://blog.ytso.com/273055.html