1、浏览器内核-2、css与js引入方式

1、浏览器内核

我们把浏览器中识别代码绘制页面的东西称之为浏览器的内核或者渲染引擎

谷歌浏览器（Chrome）：Webkit内核（V8引擎）
safari[sə'fɑːri]，大部分国产浏览器、安卓和IOS大部分手机浏览器都是V8引擎
node也是基于V8渲染JS的
Natetive App（原生App）渲染H5页面的

火狐浏览器-moz-（firefox）：Gecko['ɡekoʊ]内核

欧朋浏览器-o-（opera）：Presto['prestou]内核

IE浏览器-ms-（Trident）：Trident['traɪdnt]内核

前端开发者遵循W3C（万维网联盟）规范来开发网页
浏览器开发商开发的浏览器按照W3C的规范，识别出开发者编写的代码，并在页面中绘制出开发者预想的页面和效果（GPU：显卡来渲染），我们把浏览器中识别代码绘制页面的东西称之为浏览器的内核或者渲染引擎

2、CSS与JS引入方式

CSS引入方式

1.行内样式（不推荐）


    
    选项卡

2.内嵌式；

略显麻烦，维护成本高，因此仅适用于对特殊的页面设置单独的样式风格。


    
    选项卡

3.外链式 - 使用频率最高，最为实用的方法。

使用外链式时，会在加载HTML结构之前装载css文件，这样显示出来的网页从一开始就是带有样式

优势:CSS代码和HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。前期制作和后期维护都方便，网站后台技术人员和美工设计者有很好的分工合作；对于同一个CSS文件可以链接到多个HTML文件中，甚至是所有页面，网站风格统一，协调，后期维护量大大减少。


    
    选项卡

4.导入式（不常用）

导入式，会在HTML结构加载完成后再加载css文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式页面，闪一下之后再出现设置样式后的效果。

import "1.css";

导入式和外链式的区别：

1.加载时间不同，外链式CSS会先于HTML结构加载，而导入式CSS会后于HTML结构加载
2.对于较大网站，为了便于维护，可能会希望把所有的css样式分类别放到几个css文件中，这样如果使用链接式引入，就需要几个语句分别导入css，如果要调整css的文件分类，就需要同时调整HTML文件。这对于维护工作来说，是一个缺陷。如果使用导入式，则可以只引进一个总的css文件，在这个文件中再导入其他独立css文件;而链接则不具备这个特性

三种方式在实际使用中，代码分离程度上外链>内链>嵌入式。比较通用的样式适合抽离出来用外链比如（清除标签的默认样式），提高复用性，同时降低样式和内容的耦合；元素独立的不太多的样式感觉可以用嵌入式方便些。

JS引入方式

1.行内样式（安全性比较低，不推荐）

缺点:
1.因为这种方式跟页面结构代码耦合性太强了，后期维护很不方便，
2.而且这种方式在开发过程中会导致产生很多的冗余代码

2.内嵌式

优点：

相对于使用行内js，内嵌式js代码较为集中，与页面结构的实现代码耦合度较低，比较便于维护

缺点：

js代码仅限于当前页面的使用，代码无法被多个页面重复使用，导致代码冗余度较高

3.外链式(一般放在body的最后面)

优点：
1.页面代码跟js代码实现有效分离，降低耦合度
2.便于代码的维护和扩展
3.有利于代码的复用
我们通常将JS放在Body的最后面，因为html页面是从上到下开始加载的，JS通常是获取html标签给予动态操作效果的，所以需要先加载html标签之后再加载JS，如果想把JS放在HTML标签前面，则需要用window.onload=function(){} 来实现等HTML结构加载完成后再加载JS

总结：

真实项目中，我们一般把CSS文件导入放在head标签中，而把JS导入放在Body的最下面，这样做的好处就是：CSS使用外链式时会在加载HTML页面结构之前加载CSS文件，然后再加载HTML结构，这样显示出来的的网页从一开始就是带有样式的；因为JS操作通常是获取HTML标签给予动态操作效果的，所以需要先加载HTML标签之后再加载JS，所以需要最后加载JS

3、JavaScript基础知识

变量

可变的量，在JS中我们使用 var 关键词来声明一个变量，而变量存储的值是可以改变的
注意：声明一个变量一定要用var，不然就是给window设置了一个属性a

在JS中变量本身没有什么意义，仅仅是一个名字而已，我们操作变量其实想要操作的都是它存储的那个值

//->创建了一个叫做aa的变量,并且给变量赋值为1
var aa = 1;
console.log(aa);

aa = 2;
console.log(aa);

常量

相对于变量来说，常量是不会改变的，我们可以把JS中的数据值理解为常量，例如：1就是数字1，不可能变为其它的，所以它就是常量 每一个具体的数据类型值都是常量

如果和变量对比，我们的常量应该是：定义一个常量名字，给它存储一个值，这个值是不能修改的，在新版本ECMAScript中(ES6/ES7)，我们可以使用 const 来定义一个常量

const bb = 1;
console.log(bb);

bb = 2;//=>Uncaught TypeError: Assignment to constant variable.
console.log(bb);

JS中的命名规范

从现在开始做一名有职业操守的IT编程者：养成规范的命名习惯

1、在JS中是严格区分大小写的
2、命名的时候遵循 驼峰命名法

一个名字如果是由多个有意义单词组成的，那么第一个单词首字母小写，其余每一个有意义单词的首字母都要大写
行业中常用的一些短词组：

info：information 信息
imp：important 重要的
init：initially 初始化、最初的
del：delete 删除
rm：remove 移除
add：增加
insert：插入
create：创建
fn：function 函数
update：修改
select：查询选择
query：获取
get：获取
con：content 内容、容器
...

3、可以使用数字、字母、下划线（一般这样的情况代表变量是一个全局或者公用的变量）、$来命名（一般都是应用jq获取到得值），但第一个字符不能是数字，不能包含空格和其他标点符号；
4、不能使用关键字和保留字命名

关键字：在JS中有特殊含义的关键字：
声明定义删除：var，new，throw，delete，void，with，this
检测：typeof，instanceof
if语句：if，else
do-while语句：do，while
for循环：for，continue，in
switch-case：switch，case，break，default
try-catch-finally：try，catch，finally
function：function，return，
特殊：debugger
保留字：
implements 、 interface 、 let 、 package 、private 、 protected 、 public 、 static 和 yield 作为变量名。这些都是保留字，将来的 ECMAScript版本中可能会用到它们。在严格模式下，用以上标识符作为变量名会导致语法错误。
保留字：未来可能会成为关键字的，例如：class

JS中的数据类型

基本数据类型(值类型)
- number 数字
- string 字符串
- boolean 布尔（只有两个值 true和false）
- null 空对象指针
- undefined 未定义
引用数据类型
- object 对象数据类型
  - {} 对象
  - [] 数组
  - /^$/ 正则
  - Math 数学函数
  - Date的实例
  - ...
- function 函数数据类型

12 -12 -12.5 0 =>number类型的
'' "" =>单双引号包起来的都是字符串，单双引号没有区别
true false =>boolean布尔类型
null 空(没有)
undefined 未定义(没有)

{name:'zxt',age:28} =>对象
[12,23,34] =>数组
/^-?(\d|([1-9]\d+))(\.\d+)?$/ =>正则（表示验证是否是有效数字正则）

function fn(){
    //=>函数
}

number数字类型

在JS中除了传统的数字，NaN也是number类型的值

NaN：not a number 不是一个数，但是属于number类型的

isNaN：这个方法是用来检测当前的值是否不是一个有效数字的，如果检测的值不是有效数字返回TRUE，是有效数字返回FALSE,isNaN在检测的时候，浏览器会默认的调用number方法把其他类型转化为数值类型

console.log(isNaN(NaN));//=>TRUE
console.log(isNaN(1));//=>FALSE
console.log(isNaN('1'));//=>FALSE 它是有效数字:当浏览器发现我们检测的值不是NUMBER类型的时候,首先会默认的把值转换为NUMBER类型,然后再验证是否是有效的数字  '1'->1  isNaN(1)->false
console.log(isNaN(true));//=>首先把布尔类型转换为数字 TRUE->1 FALSE->0  最后的结果是isNaN(1)->false
console.log(isNaN(false));//=>FALSE
console.log(isNaN(null));//=>NULL转换为数字0 =>FALSE
console.log(isNaN(undefined));//=>UNDEFINED转换为数字的NaN =>TRUE

Number(true) =>1
Number(false) =>0
Number(null) =>0
Number(undefined) =>NaN

Number('') =>0
Number('12') =>12
Number('12.5') =>12.5
Number('true') =>NaN
Number('12px') =>NaN
=>使用Number把字符串转换为数字的时候，空字符串是零，其它字符串中如果出现的字符代表纯数字可以转为正常的数字，如果出现了任何一个非有效数字的字符，最后的结果都是NaN

Number({name:'zxt'}) =>NaN
Number({}) =>NaN
Number([12,23]) =>NaN
Number([12]) =>12
Number(['aa']) =>NaN
Number([]) =>0
Number(/^$/) =>NaN
Number(function(){}) =>NaN
=>使用Number把引用数据类型转为数字类型的时候，先把引用类型转换为字符串(toString)，然后再把字符串转为数字

({name:'zxt'}).toString() =>"[object Object]"
({}).toString() =>"[object Object]"
[12,23] => "12,23"
[12] => "12"
[] => ""
['aa'] =>"aa"

parseInt()

也是把其它数据类型转换为数字，整体情况和Number用法一样，区别在于：在转换字符串的时候，Number是只要出现一个非有效数字字符结果就是NaN， parseInt没有这么霸道，它能把有效的部分识别出来转为数字，非有效的部分直接忽略掉

Number('12px') =>NaN
parseInt('12px') =>12
parseInt('12px13') =>12  在查找转换的时候，按照从左到右的顺序依次查找，一直到遇到一个非有效数字字符结束（不管后面是否还有有效数字字符，都不在继续查找），把找到的转换为数字
parseInt('px13') =>NaN
parseInt([12,13]) =>12

parseFloat()

用法和parseInt一样，区别在于，parseFloat可以识别小数点

parseInt('12.5px') =>12
parseFloat('12.5px') =>12.5
parseFloat('12.5.8px') =>12.5
parseFloat('px12.5') =>NaN

JS这门语言是松散类型的

在JS中创建变量直接使用var/const/let定义即可，可以存储任何数据类型的值

toFixed()

控制数字保留小数点后面几位，括号内不写参数则会把小数四舍五入到整数上。结果为字符串

12.5.toFixed() =>不写参数,相当于不留小数点，会把数字四舍五入到整数上 =>'13'
12.4.toFixed(0) =>'12'
12.4.toFixed(2) =>'12.40'
Math.PI.toFixed(2) =>'3.14'

Math.PI.toFixed(-2) =>Uncaught RangeError: toFixed() digits argument must be between 0 and 20

思考题：parseInt / parseFloat 都支持第二个参数parseInt('12px',10) 获取后自己查找第二个参数的作用！

boolean布尔类型

只有两个值：true真/false假

Boolean()

把其它数据类型转化为布尔类型

只有0、NaN、空字符串、null、undefined五个会转换为false，其余的都会转换为true

Boolean(1) =>true
Boolean(0) =>false
Boolean('0')=>true
Boolean(-1) =>true
Boolean('') =>false
Boolean('xxx') =>true
Boolean(null) =>false
Boolean(undefined) =>false
Boolean({}) =>true
Boolean([]) =>true 除了那五个其余都是TRUE

! 或者 !!

取反，把其它数据类型先转换为布尔类型，然后再取反
！：取一次反
!!：取两次反(相当于没有取反，只剩把其它类型的值转换为布尔类型，和Boolean是相同的效果)

!null => true
!!undefined =>false
![] =>false
!![] =>true

null和undefined

null：空对象指针，但它不是对象类型的，而是基本类型的，表示为空或者没有

undefined：未定义，也代表没有

0或者空字符串 和 null或者undefined 的区别

在JS中null属于没有开辟内存，而空字符串是开辟了内存，里面没有存内容而已，null消耗的性能更低

null 和 undefined 的区别

null：意料之中的没有，一般都是当前暂时没有，后期基本上会有
undefined：意料之外的没有，一般都是当前没有，以后可能有可能没有，但是规划中是不计后面有没有的

object对象数据类型

var obj={
    name:'zxt',
    age:28,
    sex:'man',
    friend:['tom','jerry','li lei','han mei mei']
};

每一个对象数据类型值，都是由零到多组 属性名 和 属性值 组成的
属性名：描述当前对象具备这些特征（数字或者字符串格式）
属性值：描述某个特征具体的样子（任何数据类型都可以）

对象是由零到多组键(key:属性名)值(value:属性值)对组成的，每一组之间用逗号分隔

创建对象

字面量创建方式：var obj={}
实例创建方式：var obj=new Object();

var obj={name:'zxt'};//=>不仅可以创建空对象，还可以在创建的时候就增加一些键值对

var obj2=new Object(); //=>空对象

对象键值对的操作：增、删、改、查

var obj = {};
obj.name = 'zxt';//=>增加一个叫做NAME的属性,属性值是:'zxt'
obj['age'] = 28;//=>增加一个叫做AGE的属性,属性值是:28

obj['age'] = 29;//=>修改AGE对应的属性值：一个对象的属性名是不能重复的(唯一性)，之前没有这个属性，我们的操作是增加操作，之前有这个属性，当前操作就是在修改现有属性名的属性值
obj.age = 30;

obj.age = null; //=>假删除：把属性值设置为空，但是属性名是存在的 <=> obj['age'] = null  =>获取age的属性值结果是null
delete obj.age;//=>真删除：把属性名和属性值彻底从对象中移除掉 =>获取age的属性值结果是undefined
//=>获取一个对象某一个属性名对应的属性值，如果当前这个属性在对象中并不存在，获取的结果是undefined

console.log(obj.name);//=>获取NAME属性的值
console.log(obj['name']);

总结1：

操作一个对象的属性有两种：
对象.属性名：obj.name 属性名只能是字符串，不能是数字
对象[属性名]：obj['name'] 属性名只能是数字或者字符串，如果是字符串的话，需要加单双引号

特殊情况：属性名是数字时，访问此属性时不能用obj.0而要用obj[0]属性名为数字则没有必要加引号
var obj={0:'zhufeng'};
obj.0 =>Uncaught SyntaxError: Unexpected number 数字属性名不能使用点的方式处理
obj[0] / obj['0'] =>使用这种方式是没有问题的，属性名为数字，也就没有必要在加单双引号了

思考：
obj[age] 和 obj['age'] 的区别?
obj[age]代表访问obj对象中age这个变量所代表值的属性名对应的属性值；
obj['age']<==>obj.age

//-> age：变量名，代表的是它存储的值
//-> 'age'：常量，字符串的具体值
var age = 'name';
var obj = {
    name:'zhufeng',
    age:8
};
console.log(obj.age); =>8
console.log(obj['age']); =>8
console.log(obj[age]); => obj[age变量] =>obj['name'] =>获取name属性名的属性值 =>'zhufeng'

总结2：

对象的属性名是唯一的，一个对象的属性名不能重复；获取某个属性名对应属性值的时候，如果属性存在，获取值即可，如果属性不存在，获取的属性值是undefined；

数据类型检测

typeof ：用来检测数据类型的运算符
instanceof ：用来检测当前某一个实例是否属于这个类的运算符
constructor ：检测当前实例所属类的构造器的属性
Object.prototype.toString.call() ：检测数据值所属的类（获取当前实例的所属类信息）

typeof

typeof [value] ：返回的是当前[value]的数据类型（这个类型是一个字符串格式的）返回的是一个字符串

typeof 12 =>"number"
typeof NaN =>"number"
typeof true =>"boolean"
typeof 'zhufeng' =>"string"
typeof null =>"object"
typeof undefined =>"undefined"

typeof {} =>"object"
typeof [] =>"object"
typeof /^$/ =>"object"
typeof function(){} =>"function"

局限性：

typeof null =>"object" 检测null的时候返回的是"object"，但是null不是对象数据类型的
typeof 不能具体细分是大括号普通对象还是数组或者正则，因为检测这些值返回的结果都是"object"

腾讯面试题：

console.log(typeof typeof typeof []);
//typeof [] ->'object'
//typeof 'object' ->'string'
//typeof 'string' ->'string'
=>'string'

基本数据类型(值类型)和引用数据类型的本质区别 (很很很重要)

当我们把JS代码放在浏览器中运行的时候，浏览器会提供给JS一个赖以生存的环境(执行代码的环境)，我们这个环境叫做全局作用域(window[前端]/global[后台])

JS代码会在全局作用域下自上而下执行

基本数据类型之所以称之为值类型是因为：基本数据类型的值在进行赋值操作的时候，是直接按照值来操作的，例如：var a=12; 它是把12这个值直接的赋值给变量a

引用数据类型是按照引用地址操作的，不是按照值操作的，步骤如下

var obj = {
    name:'zhufeng',
    age:28
    heigth:170
};

1：创建一个变量叫做obj

2：由于引用数据类型要存储的内容可能有很多，所以浏览器遇到{}或者[]等

首先开辟一个新的内存空间（即堆内存，为了方便后期找到这个空间，给空间设置了一个16进制的地址）

对于对象数据类型来说，会把对象中的键值对依次存储到新开辟的空间中，在没有全部存储完之前，不能在值中直接调用obj.属性名，因为此时obj这个变量还没有拿到新开辟空间的地址，如果直接调用会报错。但是如果属性对应的值是一个函数（自执行函数不行，包括给自执行函数传参），可以在函数中调用。

3：最后在把新开辟空间的地址赋值给当前创建的变量，所以：变量存储的不是对象具体的值，而是对象开辟的那个堆内存的引用地址

4、JavaScript常用的操作语句-5、math中的常用方法

4、JavaScript常用的操作语句

JS判断操作语句

通过一系列的逻辑判断，来完成特定的事情

`if 、else if、else`

if(条件1){
    //=>条件1成立执行的操作
}else if(条件2){
    //=>条件1不成立,条件2成立执行的操作
}else if(条件3){
    //=>上面条件不成立，条件3成立执行的操作
}
...
else{
    //=>以上条件都不成立执行的操作
}

案例剖析

var num = 10;
if (num < 5) {
    num++;//=>num+=1  =>num=num+1  在自身基础上累加1
} else if (num >= 5 && num <= 15) {
    //=>&&：并且,所有条件都成立整体才成立
    //=>||：或者,只要有一个条件成立整体就成立
    num += 2;
} else {
    num--;
}
console.log(num);//=>12

当在判断的操作中,很多条件都是符合的,执行完成第一个符合的条件后,后面的条件不管是否符合都不在处理了


var num = 10;
if (num <= 10) {
    num++;
} else if (num >= 5) {
    num--;
}
console.log(num);//=>11

三元运算符

语法：条件?条件成立执行:条件不成立执行;

三元运算符是对if(){}else{}这种简单判断处理的简写，即使不使用三元运算符,if else也能处理

如果条件成立或者不成立的情况下，我们需要处理很多操作，那么需要把处理的事情用 小括号 包起来，每一个处理事情之间使用 逗号 分隔

var num = 10;
//------------------
// if (num >= 10) {
//     num++;
//     num = num * 10;
// } else {
//     num--;
//     num = num / 10;
// }

//------------------
num >= 10 ? (num++, num = num * 10) : (num--, num = num / 10);
console.log(num);//=>110

对于复杂的一些判断操作，使用 if else会更加的清晰明了，此时慎用三元运算符

如果条件成立或者不成立的情况下，我们不需要做任何事情，可以在三元运算符中使用null或者void 0(等价于undefined)来占位即可
注意：在三元运算符的操作中不能出现 break、continue、return 这些关键词

`switch case`

也是if else某种特定情况的简写(另外一种写法)，可以在switch 语句中使用任何数据类型（在很多其他语言中只能使用数值），无论是字符串，还是对象都没有问题。其次，每个 case 的值不一定是常量，可以是变量，甚至是表达式。

switch(变量或者值){
    case [value]:
        value可以是任何数据类型（来自高程三62页）
        如果switch中的变量或者值和当前case后面的值相等，则执行这些操作;
        break; //=>每一种case情况结束都需要加break，达到条件成立处理完成，跳出当前判断
    ...
    default:
        以上值都不满足，执行这里的操作，最后一个就不需要加break  
}

在switch case中我们可以利用case后面不加break的特点（不管后面条件是否成立都会继续执行，直到遇到break为止），实现当变量等于某几个值的时候，我们做相同的事情

var num = 5;
switch (num) {
    case 0:
        num++;
        break;
    case 5:
    case 10:
        num *= num; //=>只要当前的NUM等于5或者等10都去做同样的事情
        break;
    default:
        num = 0;
}
console.log(num);

每一种case情况的比较都是使用===进行比较的：绝对相等

=：赋值，变量=值
==：比较，值==值
===：绝对比较，值===

如果左右两边比较的值是相同类型的，那么直接比较内容是否一样即可；如果两边值的类型不一样，==和===是有区别的：
===类型不一样，最后的结果就是false，更加的严谨
==类型不一样，浏览器首先会默认的把类型转化为一样的，然后再比较内容，相对松散一些

'10'==10：true  浏览器会把'10'->10然后再比较
'10'===10：false

数学运算中的一些细节知识点

在JS中* / -都是数学运算，遇到非数字操作，浏览器也会转换为数字进行操作；但是+不一定是数学运算，如果遇到了字符串，属于字符串的拼接

'10'*10 =>100  浏览器会把字符串转为数字然后再运算（数学）
'10'/10 =>1
'10'-10 =>0
'10'+10 =>'1010'  字符串拼接

腾讯面试题

var result=10+null+[]+undefined+'zhufeng'+null+[]+undefined;
console.log(result); =>'10undefinedzhufengnullundefined'

/*
 10+null：数学运算,先把null变为数字0 ->10
 10+[]：数学运算,先把[]变为数字,[].toString()变为'',10+'',变为字符串拼接 ->'10'
 '10'+undefined：字符串拼接 ->'10undefined'
 '10undefined'+'zhufeng'：字符串拼接 ->'10undefinedzhufeng'
 '10undefinedzhufeng'+null：字符串拼接 ->'10undefinedzhufengnull'
 ...
 */

var result = 10+false+true+null+undefined+null+'zhufeng'+null+true+undefined;
=>'NaNzhufengnulltrueundefined'

//->分析步骤
10+false ->10
10+true ->11
11+null ->11
11+undefined ->NaN
NaN+null ->NaN
NaN+'zhufeng' ->'NaNzhufeng'
'NaNzhufeng'+null ->'NaNzhufengnull'
'NaNzhufengnull'+true ->'NaNzhufengnulltrue'
'NaNzhufengnulltrue'+undefined ->'NaNzhufengnulltrueundefined'

JS中的循环语句

重复做相同的事情就是循环：在真实项目中只要我们想重复做一件事件就要用到循环

for循环

for in 循环

while循环

do while循环

...

`for循环`

for(设置初始值;设置循环执行的条件(可以设置多个条件);步长累加){
    //->条件成立，执行循环体中的内容(循环体中存放的就是我们需要重复处理的事情)
}
第一步：设置初始值
第二步：验证(设置)循环能够执行的条件
第三步：条件成立，执行循环体中的内容，不成立直接结束循环，//如果有多个条件则，只按最后一个判断
第四步：每一次执行完成循环体中内容，为了能够执行下一次的循环，做一下步长的累加

for(var i=0;i<5;i+=3){
    console.log(i);//=> 0 3
}
console.log(i);//=> 6

for(var i=1;i<=5;i+=2){
    i<3?i++:i--;
    console.log(i);//=>2 3 4
}
console.log(i);//=>6

在循环的循环体中经常会出现两个关键词：
continue：结束当前本轮循环，继续执行下一轮循环，步长累加
break：结束整个循环，步长不再累加

所谓结束本轮循环：其实就是让循环体中continue后面的代码不在执行，直接的去进行步长累加，开启下一轮的循环
所谓结束整个循环：其实就是当循环体中遇到break，break后面的操作语句都不在执行，步长累加也不再执行，所有和循环有关的都结束了