1. 浏览器内核
通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同。
-
blink(webikt 内核的升级)(Google Chrome/ Safari /Opera/ 大部分的国产和手机浏览器)。
-
Gecko([ˈɡekəʊ])内核(Firefox 火狐)。
-
Presto ([ˈprestəʊ])欧朋。
-
Trident (ie浏览器)。
2. 服务器渲染与客户端渲染
2.1 服务器渲染
客户端(浏览器html+css+js发送消息给服务器要数据)-----> 服务器(去数据库查找相关的数据)-----> 数据库(返回数据)-----> 服务器(拿到数据,并渲染成一个完整的页面返回)-----> 客户端(将接收到的页面进行展示)。
2.2 服务器渲染的缺点
-
服务器渲染数据压力过大。
-
每次修改数据都需要服务器重新渲染一个页面,不能局部更新。
-
不利于团队协作。
2.3 客户端渲染
客户端(浏览器页面局部需要数据)-----> 服务器(去数据库查找相关的数据)-----> 数据库(返回数据)-----> 服务器(拿到数据,返回给客户端)-----> 客户端(将接收到的数据进行循环渲染)。
2.4客户端渲染的优点
-
减少了服务器的压力。
-
能局部更新数据。
-
有利于团队协作。
3. 为什么学JavaScript
-
所有主流浏览器都支持JavaScript。
-
目前,全世界大部分网页都使用JavaScript。
-
他可以让网页呈现各种动态效果。
-
作为一个Web开发工程师,如果你想提供漂亮的网页、令客户满意的上网体验,JavaScript是必不可少的工具。
4. JS的构成(背)
-
ECMAScript:语言的核心(语法)。
-
DOM(文档对象模型):Document Object Model,提供了一系列的应用程序接口(api),供我们开发者对DOM的添加删除修改等(说白了就是操作标签的)。
-
BOM(浏览器对象模型):Browser Object Model,客户端和浏览器端窗口操作的基础(操作浏览器窗口的),可以使用BOM对浏览器窗口进行访问和操作,比如移动窗口位置、返回历史记录等等,但是BOM没有一个成型的规范,但是所有的浏览器都支持。
5. 什么是JavaScript
5.1 简介
JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
5.2 JS的3种引入方式
5.2.1 行内JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box"></div>
<!-- 行内式:通过事件引入(有限制性) -->
<div onclick="alert('月薪过万')">点击</div>
</body>
</html>
5.2.2 内部JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
alert('月薪过万')
</script>
</body>
</html>
5.2.3 外部JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="Demo-01.js"></script>
</body>
</html>
6. JavaScript命名规范
-
区分大小写
-
名字以数字,字母、下划线、$ 符号组成,(但是不能以数字开头)。
-
不能是关键字或者保留字,关键字,就是代表特殊含义和功能的名字。
-
命名要有语义化,可以遵循:
1.小驼峰命名法(驼峰命名法):首单词的首字母小写,其余单词的首字母大写,例如:studentMessage
2.大驼峰命名法(又叫帕斯卡命名法):跟小驼峰命名法类似,只不过是每个单词的首字母都大写,例如:StudentMessage。
3.下划线命名法:要求单词与单词之间通过下划线连接即可。例如:my_name
7. JS的基础知识
7.1 注释
单行注释: //
多行注释 : /*多行注释*/
7.2 语句
js的语句是以;为结尾的,虽然不一定是必须的,但是我们建议不省略,代码块结束以后可以省略。
7.3 变量
7.3.1 简介
变量相当于容器,值就是容器中盛放的内容,变量名字就是贴在容器上的标签,通过这个标签可以找到变量,读取使用它。
在ECMAScript中,变量是松散类型的(弱类型、动态类型),也就是一个变量可以保存任何类型的值。
7.3.2 定义一个变量并使用
声明变量的关键字是var/let
1. 声明一个变量未赋值,默认是undefined(未定义)。
语法1:var/let 变量名;
2. 声明一个变量并赋值。
语法2:var/let 变量名 = 数据;
案例:
var name="xiaoxiaohui" (把等号后面的值赋给了前面定义的变量)
3. 还可以给多个变量同时赋值,或者是同时定义,使用英文逗号隔开。
var sex="女",age="18";
let sex="女",age="18";
4. 可以给同一个变量多次赋值或者多次定义。
var age=18;
age=19;
var age=20;
console.log(age);
7.3.3 var与let的区别
var关键字可以重复声明同一个变量,let关键字不可以重复声明同一个变量。
7.4 常量
1. 声明一个变量并赋初始值。
语法:const 变量名 = 数据;
2. 常量的特点:
8. JS的数据类型
8.1 基础数据类型(原始值类型)(7个)
-
Number 数值 :(数字,整数,小数,NaN(Not a Number))。
-
String 字符串:可以使用单引号或双引号或反引号(字符串模板)表示字符串。
-
Boolean 布尔: true(真),false(假)。
-
Null (空)
-
Undefined (未定义)
-
Symbol(唯一值,es6新增)
-
BigInt(大数,es6新增)
8.2 引用数据类型(11个)
-
Array
-
Object
-
Function
-
RegExp(正则表达式)
-
Math
-
Date
-
..........
9. 基础数据类型详解
9.1 number 数值类型
1. number 数值类型运行原理:把十进制数据转为二进制数据,二进制数据再转十进制数据。
2. number 数值类型包括:整型 (整数) 、浮点型 (小数) 、特殊的数值 NaN。
注意!!!
浮点型 (小数)的计算要注意浮点的精度问题(十进制小数转为二进制小数,大部分无法精确转换;整数不存在这个问题)。
0.1 + 0.2 = 0.30000....4
3. JS中数值的范围
JS 中的Number数据类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数,任何超出此范围的整数值都可能失去精度。
4. 特殊的数值 NaN 的特点
-
NaN是number类型,是一个数值,表示非有效数字。
-
特点1:NaN与任何数进行任何运算结果都是NaN。
-
特点2:NaN与任何数都不相等,包括自己。
5. 数值相关的运算符
+ :加
- :减
* :乘
/ :除
% :取余
6. 相关的函数
isNaN() :验证一下n是不是有效数字,如果是有效数字,则返回false;如果不是有效数字,则返回true。
isNaN()函数的底层运行逻辑:先把任何类型转化为数字类型Number(),再使用isNaN()函数判断。
<body>
<script>
console.log(isNaN(1)); //false
console.log(isNaN(NaN));//true
console.log(isNaN('AA'));//true
//"12.5"---Number("12.5")---12.5 isNaN(12.5) false
console.log(isNaN('12.5'));//false
//Number("12.5px")---NaN isNaN(NaN) true
console.log(isNaN('12.5px'));//true
//Number([])---0 false
console.log(isNaN([]));//false
//Number([10])---10 false
console.log(isNaN([10]));//false
//Number([10, 20])---NaN true
console.log(isNaN([10, 20]));//true
// Number({}) NaN true
console.log(isNaN({}));//true
//Number(null)---0 isNaN(0) false
console.log(isNaN(null));//false
//Number(undefined)--NaN true
console.log(isNaN(undefined));//true
console.log(isNaN(Symbol(1)));//报错
</script>
</body>
注意!!!!几个特殊值
NaN 转为数字类型值为NaN --- ture
null转为数字类型值为0 --- false
[] 转为数字类型值为0 --- false
[10,30] 转为数字类型值为NaN --- ture
{} 转为数字类型值为NaN--- true
undefined转为数字类型值为NaN --- true
Symbol(1) --- 报错
Number():Number是JS内置的转换方法,可以把其它数据类型“强制”转换为数字类型。
Number()的底层实现逻辑:把其它数据类型先转为字符串类型,再转为数字类型。
转换规则:
1.把字符串转换为数字:一但字符串中出现非有效数字字符(只要不是数字),则结果为NaN。
2.只有都是有效数字字符,才能转换为具体的数字。
3.把布尔转换为数字:true转换为1 false转换为0。
4.把null转换为数字:null转换为0 undefined转换为NaN。
5.不能把Symbol类型转换为数字,否则会报错。
案例:
<body>
<script>
console.log(Number('111'));//111
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number(Symbol());//报错
</script>
</body>
练习题:
console.log(Number('12')); //12
console.log(Number('12.5'));//12.5
console.log(Number('12px'));//NaN
console.log(Number('12.5.0'));//NaN
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number(function func() { }));//NaN
console.log(Number(Symbol(13)));//报错
parseInt()/parseFloat():把其它数据类型转换为number类型。
parseInt():其他类型转化为number,整数部分。
parseFloat():其他类型转化为number,整数+小数部分。
从字符串最左边开始查找,把找到的有效数字字符转换为数字,遇到不是数字的时候停止。如果找不出来,就是NaN。
console.log(Number('12px'));//NaN
console.log(parseInt('12px'));//12
console.log(parseInt('12px24'));//12
console.log(parseInt('width:12px'));//NaN
console.log(parseInt('12.5px'));//12
console.log(parseFloat('12.5px'));//12.5
console.log(parseFloat('12px'));//12
console.log(Number(true)); //1
console.log(parseInt(true));//NaN
console.log(parseInt('true'));//NaN
console.log(parseInt(NaN));//NaN
console.log(Number(null));//0
console.log(parseInt(null));//NaN
console.log(isNaN(Number(parseInt("0.8"))));//false
console.log(Number(''));//0
console.log(parseInt('')); //NaN
toFixed( ):保留小数点后面N位(最后的结果是一个字符串),要四舍五入。
var num = 12.349594354;
//装箱
console.log(num.toFixed(2)); //四舍五入
console.log(num.toFixed(1)); //四舍五入
console.log(num.toFixed(3)); //四舍五入
Number.MAX_SAFE_INTEGER :JS能够有效识别的最大整数。
console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991
最大安全数(JS能够有效识别的最大整数)
console.log(9007199254740992 == 9007199254740993); //=>true
应该是不一样的,但是超过了最大数值,JS无法精准计算
9.2 值类型string 字符串
-
定义字符串 :在JS中用 单引号/双引号/反引号 包起来的都是字符串。
-
string 字符串类型的特点:
-
字符串有长度length。
-
字符串有索引,但没有负索引,虽然能够使用负索引不报错,但是取不到值,默认为undefined。
-
数值类型的字符串没有方法。
//没有负索引
var str = "10ased";
console.log(str.length); //length 求长度
console.log(str[2]); //a [index] 求索引(下标) 0---X
console.log(str[5]); //d
console.log(str[-1]); //undefined 索引取不到值,默认 undefined
console.log(str[10]); //undefined
3. 相关函数
String( ):将其他类型转化为字符串。
console.log(String(100)); //"100"
console.log(String(null)); //"null"
console.log(String(undefined)); //"undefined"
console.log(String(true)); //"true"
console.log(String(false)); //"false"
console.log(String(Symbol())); //"Symbol()"
9.3 boolean 布尔类型
- 布尔值表示真或假 ,开或关,是或否。有 true 和 false 两个值。
- 数字转为布尔值: 0转为false,NaN转为false;其他都是true。
-
字符串转为布尔值: 空字符串转为false, 其他都是true。
-
null 转为 flase。
-
undefined 转为 false 。
6. 相关函数
Boolean():将其他类型转化为布尔类型。
console.log(Boolean(0)); //false
console.log(Boolean("")); //false
console.log(Boolean(null)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(" ")); //true
console.log(Boolean([])); //true
console.log(Boolean({})); //true
! 非(取反 ): 间接转化为布尔类型。
console.log(!"11"); // false "11"--真 !"11"---假
console.log(!null); //true null--假 !null--真
console.log(!!null); //false null--假 !null--真 !!null--假
9.4 null 和 undefined
null表示没有,即该处不应该有值:
undefined表示缺少值,即此处应该有值,但没有定义:
- 定义了变量没有给值,显示 undefined。
- 定义了形参,没有传实参,显示 undefined。
- 对象属性名不存在时,显示 undefined。
- 函数没有写返回值,即没有写return,拿到的是 undefined。
- 写了return,但没有赋值,拿到的是 undefined。
var str = "hello";
console.log(str[10]); //undefined
var arr = [10, 20, 30];
console.log(arr);
console.log(arr[100]); //undefined
var arr = null; //未来要存放引用类型的值,释放内存
9.5 Symbol类型
//es6 新增
var s1 = Symbol("a");
console.log(s1);
var s2 = Symbol("a");
console.log(s2);
console.log(s1 === s2); //false 唯一 可以用作对象的key,唯一的key
9.6 BigInt类型
BigInt类型:管理超过安全数值的数字。
ES6中提供了一个新的数据类型 BigInt:管理超过安全数值的数字。
console.log(BigInt(9007199254740992), BigInt(9007199254740993));
10 .引用数据类型详解
10.1 数组类型
1. 数组类型:可以放任何数据类型。
3. 数组的两种写法:
写法一:通过new的方式
var/let 变量名 = new Array(数据1,数据2,...);
写法二:通过[]字面量的方式,[]是数组字面量
var/let 变量名 = [数据1,数据2,...];
var arr1 = new Array(10, 20, 30);
console.log(arr1);
console.log(arr1[0]); //10
console.log(arr1.length); //3
//在数组的尾部添加一个值
arr1.push("hello");
console.log(arr1);
var arr2 = [100, 200, 300, 400];
console.log(arr2);
10.2 String引用数据类型
语法:var/let 变量名 = new String("变量值");
var str2 = new String("apple");
console.log(str2);
2. 值类型的string与引用类型的String的区别:
-
值类型的string有长度length,有索引,但是没有方法,而引用类型的string是有方法的。
-
声明的方法不同。 值类型的string的声明语法为var/let 变量名 = 变量值;,而引用类型的string的声明语法是var/let 变量名 = new String("变量值");。
3. 为什么值类型的string会有长度length和索引?
是因为装箱。
4. 装箱与拆箱的概念:
- 装箱:把值类型---转换成---引用类型用---转换成---值类型
- 拆箱:把引用类型---转换成---值类型---转换成---引用类型
10.3 Number引用数据类型
语法:var/let 变量名 = new Number(变量值);
2. 值类型的number与引用类型的Number的区别:
-
声明的方法不同。
-
值类型的number没有方法,引用类型的Number有方法。
10.4 Object引用数据类型
10.4.1 创建Object对象
Object引用数据类型把多组键值对用大括号{}包起来 ,并且属性与属性之间用“英文逗号”进行分割。
声明语法:var/let 对象名 = {
属性名1:属性值,
属性名2:属性值
......}
使用属性的语法:对象名['key'] 或 对象名.key
var obj = {
name: "lili", //"name":"lili"
age: 18,
"for one": true,
};
console.log(obj);
console.log(obj["name"]); //"lili"
console.log(obj.age); //18
console.log(obj["for one"]); //true
console.log(obj.school); // undefined
注意!!!
1. 属性名(key)不是使用string字符串类型,而是其它基础类型,属性名要使用[ ]包裹起来,会自动把其它基础类型转为字符串。
var obj = {
name : "lili",
age : 18,
[Symbol()] : 100,
[true]:true
}
3.虽然Symbol()可以使用[ ]包裹起来作为键,但是无法访问到数据。因为Symbol()是唯一的,下面的写法相当于声明了两个Symbol(),所以取不到值,默认是undefined的。如果使用常量把Symbol()装起来,就可以访问到同一个Symbol()。
<body>
<script>
var obj = {
name: "lili",
age: 18,
[Symbol()]: 100
};
console.log(obj[Symbol()]);//undefined
</script>
</body>
-------------------------------------------
<body>
<script>
const sym = Symbol('10');
var obj = {
name: "lili",
age: 18,
[sym]: 100
};
console.log(obj[sym]);//100
</script>
</body>
4. 对象的属性名不能是引用数据类型值 。
基于对象[属性名] 的方式操作,需要保证属性名是一个值(字符串/数字/布尔等都可以),如果不是值而是一个变量,它会把变量存储的值作为对象的属性名进行操作。
基于对象.属性名的方式操作,属性名就是点后面的。
let n = {
x: 100
};
let m = [100, 200];
let obj = {};
obj[n] = "高高";
obj[m] = "培训";
console.log(obj);
10.4.2 属性名和属性值
-
属性名:就是用来描述某种特征或者特点的名字,(又被称作键,key)。
-
属性值:就是这个特征的具体值(又被称作值,value)。
-
合称键值对。
基本操作:增、删、改、查。
10.4.3 获取属性值的方法
对象的属性名一般都是字符串格式(还可以是数字格式),属性值可以是任意类型数据。
方法一:对象.属性名;
方法二:对象['属性名']; 或 对象[“属性名”]; :如果key的类型是字符串,使用该方法必须加“ ”,不然是获取不到值的。默认为undefined的。
方法三:如果key的类型是变量或常量,获取语法:对象[属性名];
<body>
<script>
const sym = Symbol('10');
var obj = {
name: "lili",
age: 18,
[sym]: 100
};
console.log(obj.age);//18
console.log(obj.name);//lili
console.log(obj['name']);//lili
console.log(obj[name]);//undefined
console.log(obj[sym]);//100
</script>
</body>
注意!!!!
1.如果对象里面没有这个属性名,得到的值就是“undefined”。
2.如果key的类型是特殊类型(for age)、数字类型(number)、Symbol()、变量必须使用[ ]进行访问,点(.)只能访问字符串类型的数据。
10.4.4 增、改
对象的属性名(键)是不允许重复的,之前没有这个属性则为新增,之前有这个属性,则是修改对应的属性值。一般新增一项的key都是string类型。
语法:
方法一:对象[“属性名”] = 属性值;
方法二:对象.属性名 = 属性值;
var obj={
"name":"lili",
"age":18
}
obj.name="dawei"; ====>修改
obj.sex="男"; =====> 增加
obj.true = 180; =====>这种增加会把true转为字符串"true"
console.log(obj)
10.4.5 删除
彻底删除语法: delete 对象名["属性名"]
普通删除语法: 只是让对象中的属性值为空, 对象名["属性名"] = null;
var obj={
"name":"lili",
"age":18
}
//彻底删除
delete obj["age"];
//普通删除
obj.name=null;
console.log(obj);
思考题:
var obj={
name:"lili",
age:18
}
var name="zhufengpeixun";
console.log(obj.name);//lili
console.log(obj["name"]);//lili
//obj[name] === obj["zhufengpeixun"] ---对象中没有这个属性名 ----/undefiend
console.log(obj[name]);//undefiend