JavaScript的用途
JavaScript用来制作web页面交互效果，提升用户体验。
简单列出几个JavaScript能够制作的页面效果，它能干什么：
轮播图
Tab栏（选项卡）
地图
表单验证
web前端三层来说：w3c的规范：行内样式（淘汰）
结构层 HTML 从语义的角度，描述页面结构
样式层 CSS 从审美的角度，美化页面
行为层 JavaScript 从交互的角度，提升用户体验
什么是JS
Js由网景公司开发；是一款基于客户端浏览器的脚本语言，用户与组件之间的交互。必须伴随着其他语言运行。
JS特点
1. 简单、易学、易用；
2. 跨平台；IE、Navigator
3. 符合ECMA（欧洲计算机制造协会）标准，可移植；
4. 事件驱动式的脚本程序设计思想；
5. 动态、交互式的操作方式。
JavaScript历史背景介绍
1995年在网景公司，发明的JavaScript。
一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。
同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。
JavaScript的作用：
1. 交互式操作；
2. 表单验证；
3. 网页特效；
4. Web游戏
5. 服务器脚本开发等。
JavaScript和ECMAScript的关系
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association，制定的标准。
JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。就是说，你JavaScript学完了，Flash中的程序也会写了。
ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强。但是，浏览器的厂商不能那么快的去追上这个标准。
今天的JavaScript：承担更多责任
2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。
百度的智能感应
再比如：
网易的Ajax验证
2007年乔布斯发布了iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。
JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，人们越来越重视JavaScript了。
聚划算的手机页面2010年的时候，人们更加了解HTML5技术了，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
canvas制作的水果忍者
2011年，Node.js诞生，使JavaScript能够开发服务器程序了。
今天，JavaScript工程师是绝对的吃香，能够和iOS、Android工程师比肩，毫不逊色的。
现在，公司都流行WebApp，就是用网页技术开发手机应用。什么意思呢？手机系统有iOS、安卓、windows phone。那么公司比如说开发一个“携程网”APP，就需要招聘三队人马，比如iOS工程师10人，安卓工程师10人，windows工程师10人。共30人，工资开销大。并且，如果要改版，要改3个版本。所以，现在公司，都用web技术，用html+css+javascript技术来开发app。好处是不用招聘那么多工程师，只需要几个前端开发工程师即可。并且也易于迭代，就是网页一改变，所有的终端都变了。
JavaScript非常好学
JavaScript在“对初学者友好的语言”排行榜中排名第一。
JavaScript是有界面效果的，比如你学习C语言，对不起，白底黑字。而JavaScript有绚丽的效果，效果是可见的。你的劳动，是真真正正有效果啊。
一段简单的js 代码分析
<h1 onmouseover="this.className = 'yellow'" onmouseout="this.className = ''">什么是javascript</h1>
1. onmouseover 鼠标进入当前元素的事件 当鼠标进入时...执行一段JS代码
2. onmouseout 当鼠标离开时...执行一段JS代码
3. this this代表当前元素
4. className 类名
取消IE安全设置
更改IE设置的方法：
ie--工具---internet选项--高级--勾选"允许活动内容"
JS实现的过程
1. 获取元素
2. 给该元素绑定事件
3. 一般事件由用户出发
4. 执行结果
什么是事件
事件是用来捕获用户行为，当...出发一个事件...执行结果（带有功能性的JS代码）
事件
1. onmouseover 鼠标进入
2. onmouseout 鼠标离开
3. onclick 鼠标单击
4. onload事件 先加载窗体，我们先读取HTML代码再读取JS代码
DOM对象：里边封装了很多方法，通过点语法调用。
write方法
document中的write（""）方法允许用户通过js实现在html文档中写入标签或文本的功能
JS中常用的属性
1. 动态获取或者添加文本（标记） innerHTML
2. style
获取页面中的元素
沟通ID去获取页面中的元素，由于ID是唯一的，所以拿到的是一个元素
getElementById（） ps：所有英文单词后面加小括号的都是方法（函数）
在获取页面元素时一定要通过document对象获取 document.
代码分析
document.getElementById('box').style.display = 'block'
通过文档对象获取页面中的box元素，让box元素的样式里的display属性等于显示
显示隐藏元素
1. display：none 隐藏 block 显示
2. visibility：hidden 隐藏 （隐藏元素后仍然占位置）
JS的引入方式
1. <script type="text/javascript"></script>
2. <script type="text/javascript" src="JS文件的路径"></script>
JS中的注释
1. // 单行注释
2. /**/ 多行注释
JS结构
1. ECMAscript 标准规范
2. DOM 文档对象模型
3. BOM 浏览器对象模型
javascript的初体验：
将来在编写代码的时候一定不要写<javascript>,这个标签不存在。
javascript代码的书写位置：
可以有两个：
1.0可以放在head标签之中的title标签之下，如果页面上还有样式，那么一般情况下javascript会放在样式的下面。
2.0还可以放在body标签之中。
javascript的书写规则：
1.0javascript与html，css一样，对空格、换行，以及缩进是不敏感的
2.0如果代码末尾不加分号，必须换行，如果不换行页面会报错。
3.0书写的规范：每句javascript写完之后必须加”;”,必须换行。
javascript代码的执行顺序：
从上到下依次执行。
javascript中的注释：
sublime:ctrl+/
1.0单行：//
2.0多行注释：/**/
window对象的弹窗方法（常用来调试）：
alert();
作用：在页面上打开一个弹出框，框上显示的内容就是alert()括号中的内容。
特点：一旦这个弹出框打开以后，页面就无法关闭，和移动。
将来写代码尽可能不要使用alert(“”);
console.log(内容);
作用：也是向页面上输出一句话，不是以弹出框的形式输出。(给开发人员用的)
特点：不会让页面”卡死”，直接在控制台中输出。
confirm（） 确认框
prompt()
作用：在页面上弹出一个输入框，输入框上面的提示文本就是prompt()括号中的内容。
开发人员工具调试javascript代码的错误：
1.0打开开发人员工具
2.0注意开发人员工具的右上角（小红点）：
3.0点击小红x,打开console(控制台：检查页面输出的信息（自己输出的信息，以及页面的错误信息。）)
4.0点击控制台中错误信息的链接，定位到具体的错误。就可以排除错误了。
直接量：
定义：可以直接使用的数据叫做直接量。
“123”,123就叫做直接量。
数据类型：
在javascript中有很多的数据类型：
string:字符串。
作用：就是一段文本（可以理解为人说的一句话）。
特点：
1.0所有的字符串都是用””引起来的。
2.0可以当作直接量。
3.0字符串的引号可以是单引号’’也可以双引号””.
** isNaN（） 是不是一个数字吗 当返回true时不是数字 ps：此方法只判断是否为数字，不判断数据类型。 此函数特殊，当数字外面有单引号套着时，也会检测出来是数字，而不会是字符串**
number:数字
作用：就是用来表示所有的数字。
123，-123，0.1，-0.1
特点：
1.0数字用来表示物品的数量;
2.0如果数字加上了引号之后就不是number类型是string类型。
boolean：bool类型：
作用：判断对和错。
对：true
错：flase
但是它的表达式有很多：
undefined:未定义
一个变量申明但没有赋值，就叫做undefined
typeof：判断数据的类型
如何判断：
1.0直接将直接量放在typeof的后面，将来得到的结果会以字符串的形式返回回来。
typeof 直接量
2.0将直接量放在typeof后面的括号中。
typeof (直接量)
通过sublime来设置一个页面的模板
1.0工具--->新代码段
2.0打开以后会打一个新的文档，这个文档的内容就是模板
3.0将画红框的代码删掉，换成我们想要的模板代码
4.0将注释的tabTrigger标签打开，将标签之中的内容修改成我们自己的命名。将文件保存。
运算符：
算数运算符
+（加）：
作用：
1.0两个数值进行相加
2.0将两个数据进行连接
-（减）
*（乘）
/（除）
%（取余）
()(提高优先级)
算术运算符在编写的时候可以简写：
var a = 3; a = a + 3;可以简单写为：a +=3;(+=之间不能有空格)
自增，自减运算符：
1.0：自增：
作用：都是让数据在原来的基础上加一。
a = a + 1;可以简写成 a++(数据的自增);
先加加
++a
特点：先自增，再运算
后加加
a++
特点：先运算，再自增
2.0：自减：
作用：在原来的基础上将数据减一：
先减减：
--a:
特点：先自减，再运算
b后减减
a--:
特点：先运算再自减;
注意：自增最多只算两层，如果增加到三层以上，不但同学们会晕，开发工具也会晕（不同的开发工具，产生的结果是不一样的）。
也就是 var a = 1;var b = a++ + ++a + a ++;（本身就存在争议）
高级运算对象：Math(平方，立方，4次方，sin,cos)
1.0Math.pow(a,b)//求a的b次方的值。
2.0Math.round(c)//将c以小数后面一位开始四舍五入。
3.0Math.ceil(d);//将d进行向上取整（天花板函数）
4.0Math.floor(e);//将e进行向下取整（地板函数）
5.0Math.max(a,b,c);//在a,b,c中取得其中最大小的数据
6.0Math.min(a,b,c);//在a,b,c中取得最小的数据
7.0Math.random();//生成一个大于0小于1的随机数。
逻辑运算符：
==逻辑运算符一般跟boolean类型一起使用。==
跟boolean有关：
&& ：与（并且）
1 > 3 &&1 < 3
特点：一false都false
**|| ：或 **
1>3 || 1<3
特点：一true都true;
！：非（取反）
特点：取相反的值。
赋值运算符（=）
作用：将等号右边结果赋值给等号左边的变量。
var a = 1;
var b = 2;
var c = a + b;
var a = b = c = 1;
逗号运算符：
如果将来要申明多个变量，不想写多个var可以使用逗号运算符。
var a ;var b ;var c ;
var a,b,c;
注意：算术运算符有自己的优先级:先乘除再加减，
逻辑运算符也有自己的优先级：先算&&，再算||，如果有！先算！
比较运算符：
var a = 3;var b =”3”; var c = a = =b;==>c =true;
注意：==在比较的时候比较的是内容，没有关注数据的类型。
===(全等)
var a = 3;var b = “3”;var c = a== =b;==>c=false;
注意：===在比较的时候比较的是内容，还有类型。
!=
注意：!=比较的是内容
!==
注意：！==比较的内容和类型
网友评论