问题：什么是web前端

前端：指界面，计算机（PC）软件桌面的界面； 计算机端的浏览器界面； 移动端的软件（app）界面； 移动端的浏览器界面。

Html+css+JavaScript 使用网页技术（Html，css，JavaScript）开发界面；

Html，css和JavaScript的关系：

HTML:架构师，网页内容；

CSS:修饰师：装饰内容。

JavaScript：魔术师，内容网页进行交互。

关于学习方法：编程没有捷径；只能多写，多记，多理解。

JavaScript历史：

1. navigator：网景公司，在1995年推出。Livescript很简单的。完成网页中基本的交互能。

2.  1995 java很火。Write one，run anywhere！！，写一遍代码，在各个平台运行。

3 .网景公司和sun公司合作，推出了javascript。

4. 网景公司，招人，Brendan Eich开发Scheme；开发javascript，像极了java，要比java简单。怄气加赶工，10天开发出了javascript。推出javascript1.0。

5. 1996年时，将javascript1.1提交给了ECMA组织，作为js标准。a)提供标准：ECMAScript标准，javascript是实现了ECMAScript标准的语言。

6. 微软：1996没有浏览器，收购了一家公司，产品：IE，也实现了ECMAScript标准jscript。

7.为期8年的浏览器大战开始。谷歌，火狐，欧鹏，IE safari。

注意：ECMAscript和JavaScript有什么区别？

ECMAscript：语言标准，简称ES，JavaScript是实现了ECMAscript的编程语言。

关于浏览器及其内核

作为前端开发，熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。 

1、IE浏览器内核：Trident内核，也是俗称的IE内核； 

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核； 

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核； 

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）； 

8、百度浏览器、世界之窗内核：IE内核； 

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

前五个属于主流浏览器。

一些国内的浏览器他们的内核：

搜狗浏览器：兼容模式（IE：Trident）和高速模式（webkit）

傲游浏览器：兼容模式（IE：Trident）和高速模式（webkit）

QQ浏览器：普通模式（IE：Trident）和极速模式（webkit）

360极速浏览器：基于谷歌（Chromium）和IE内核 360安全

什么是JavaScript？

JavaScript是一门脚本语言。弱数据类型，基于对象，基于事件驱动的语言。

Javascript是解释执行的。 解释器是浏览器。

JS特点

(1) 脚本语言。JavaScript是一种解释型的脚本语言，C、C++、java等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象，也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提上机器上的浏览器支持JavaScript脚本语言，目前JavaScript已被大多数的浏览器所支持。

JS应用：

网站后端开发：Node.js让程序员可以用js自由地写后端了。

(2) Web app：HTML5提供了很多API支持，可以实现原生应用拥有的大部分功能，但是性能有待提高。像Firefox OS就是基于web app的移动操作系统。

(3) 混合式应用开发：把原生应用的一部分用前端技术实现，使原生应用更加灵活。很多应用都会这样做。PhoneGap，React Native之类平台的出现允许程序员使用js来进行移动应用开发。

JavaScript的构成：

1. ECMAScript语言基础；（JS基本语法）

(1) JavaScript的历史

(2) ECMAScript标准

(3) 基本语法

(4) 语句

JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。

var x=1+2;复制代码

这条语句先用var命令，声明了变量x，然后将1 + 2的运算结果赋值给变量a

1 + 2叫做表达式（expression），指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。凡是 JavaScript 语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。

语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。

var x=1+2;    var y=1+3;复制代码

分号前面可以没有任何内容，JavaScript引擎将其视为空语句。

;;;复制代码

上面的代码就表示3个空语句。

表达式不需要分号结尾。一旦在表达式后面添加分号，则 JavaScript 引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。

1+2;
"abc";复制代码

上面两行语句只是单纯地产生一个值，并没有任何实际的意义。

语句分为条件语句和 循环语句，

条件语句：JavaScript 提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。

if 语句，if else 语句，

switch 语句，

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。

switch (fruit) {case "banana":// ...break;case "apple":// ...break;default:// ...
}
复制代码

上面代码根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执行最后的default部分。需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

三元运算符，

JavaScript 还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。

(条件) ? 表达式1 : 表达式2
复制代码

上面代码中，如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值。

var even = (n % 2 === 0) ? true : false;
复制代码

上面代码中，如果n可以被2整除，则even等于true，否则等于false。它等同于下面的形式。

var even;
if (n % 2 === 0) {even = true;
} else {even = false;
}
复制代码

这个三元运算符可以被视为if...else...的简写形式，因此可以用于多种场合。

var myVar;
console.log(myVar ?'myVar has a value' :'myVar does not have a value'
)
// myVar does not have a value
复制代码

上面代码利用三元运算符，输出相应的提示。如果过变量有 value 值，输出？前面的值，如果没有值，输出后面的值。

var msg = '数字' + n + '是' + (n % 2 === 0 ? '偶数' : '奇数');
复制代码

上面代码利用三元运算符，在字符串之中插入不同的值。

(5) 变量

1.概念：变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名。（变化的量，在JS程序中，用于存储数据的容器。）

2.如何在JS程序中使用变量？

a) 声明变量：告诉浏览器，我要使用这个变量；var 变量名称;//这是声明变量的语法。

b) 初始化变量：给变量赋值；

变量名称=值;   //=;赋值，将值存储到变量中；

赋值操作：将等号右边的值（可以是变量）赋值给左边的变量；

c) 声明并初始化变量

var 变量名称=值；

注意：变量使用之前必须要声明；

只声明不赋值，系统给变量默认值：undefined；

变量名称用于到内存中存储数据或者是取数据；

d) 定义多个变量;

var a,b,c; 即var 变量名称，变量，变量

e) 关键字和保留字

关键字：在JS程序中，有特定含义的单词；

保留字：在JS程序中，与特定含义的单词，但是还没有被JS程序使用。

标识符命名规范：

• 标识符由字母，数字，下划线，$构成；
• 标识符的首字母不能为数字：var 8a；//错误
• 标识符不能为关键字或者是保留字；var var; //错误
• 约定俗称：标识符要见名知意；
• 约定俗成：标识符要使用驼峰式命名；变量使用小驼峰（第一个单词首字母小写）;

getElementById //小驼峰    GetElementById //大驼峰

• JS严格区分大小写。

(6) 数据类型 typeOf()

基本数据类型：typeof()变量，获取变量的数据类型；

a) 数字类型： 整数：十进制：0-9 ；   浮点数（小数）

b) 字符串类型：用单引号或者双引号括起数据，字符串，由字符（文本）构成；

c) 布尔类型：用于判断    true:真    false:假

d) 特殊类型

• null：代表空值，一般清除资源的时候用，初始化变量；
• undefined：代表变量未初始化；
• NaN：Not a Number 不是一个整数，非数字之间的运算，结果为NaN；
• isNaN(s)判断是否NaN（不是数字）,如果该字符里不是全数字，则返回true；如果是全数字，则返回false。

引用数据类型

"a"+"bc" //"abc"复制代码

1+"a" //"1a"
false+"a" //"false"复制代码

"3"+4+5 //"345"
3+4+"5" //"75"复制代码

-1%2 //-1
1%-2 //1复制代码

x=x+y; <=> x+=y;
x=x-y; <=> x-=y;
x=x*y; <=> x*=y;
x=x/y; <=> x/=y;
x=x%y; <=> x%=y;
x=x**y; <=> x*=y;复制代码