javascript简介

什么是Javascript？

Javascript，简称js，是一种脚本语言，主要用于制作前端页面的交互效果，例如选项卡、模态框弹出、表单验证等等。除了应用在网页中之外，还广泛应用于手机游戏开发、服务器、nosql数据库等领域。

JavaScript用途

当我们在做网站的时候，网站是分层的，分别为：

• 结构层 HTML 从语义的角度描述页面的结构
• 样式层 CSS 从审美的角度装饰页面
• 行为层 JavaScript 从交互的角度提升用户体验

而其中的JavaScript用来制作web页面交互效果，提升用户体验。常见的应用如下：

• 轮播图

  
  image.png

• 选项卡

  
  image.png

• Ajax表单验证

  
  image.png

• 炫酷HTML5页面
  

  image.png

JavaScript诞生

在1995 年 Netscape（网景公司，我们要非常感谢网景公司，首先提出的交互的概念，首先提出的用户体验的概念），一位名为 Brendan Eich 的工程师创造了 JavaScript，随后在 1996 年初，JavaScript 首先被应用于 Netscape 2 浏览器上。最初的 JavaScript 名为 LiveScript（活力脚本），后来因为 Sun Microsystem 的 Java 语言的兴起和广泛使用，Netscape 出于宣传和推广的考虑，将它的名字从最初的 LiveScript 更改为 JavaScript——尽管两者之间并没有什么共同点。这便是之后混淆产生的根源。（也就是说，JavaScript和Java没有任何关系，就是为了“榜大牌”的，和北大青鸟和北大的关系一样）。

几个月后，Microsoft 随着 IE 3 推出了一个与之基本兼容的语言 JScript。又几个月后，Netscape 将 JavaScript 提交至 Ecma International（一个欧洲标准化组织）， ECMAScript 标准第一版便在 1997 年诞生了，随后在 1999 年以 ECMAScript 第三版的形式进行了更新，从那之后这个标准没有发生过大的改动。由于委员会在语言特性的讨论上发生分歧，ECMAScript 第四版尚未推出便被废除，但随后于 2009 年 12 月发布的 ECMAScript 第五版引入了第四版草案加入的许多特性。第六版标准已经于2015年六月发布。
ECMAScript是JavaScript的标准，现在我们学习的版本的大部分是ECMAScript5、6。

Brendan Eich (JavaScript之父)

JavaScript的发展历程

2003年：牛皮鲜，页面上漂浮的广告、弹窗广告；所以当时的浏览器就推出一个功能，禁用广告，实际上本质就是禁用JavaScript。页面上的特效，都特别俗，比如鼠标后面跟随的星星，然后工程师对JS的感觉就是不用学习，生搬硬套，大量的“效果宝盒”软件，一套就有各种特效了。没有人琢磨语言特性。

2004年：谷歌打开了Ajax这个潘多拉的盒子，从此JavaScript被人重视，很多人开始学习JS语言。当时问世了两本JS巨作《犀牛书》、《高级程序设计》。

2007年：三层分离，iPhone发布，人们开始重视用户体验。大家发现了，JavaScript是web页面中制作交互效果唯一的语言，所以把JS的重视程度，提到了相当高的一个地位。招聘信息里面开始出现独立的“JS工程师”职位了，之前都是后台工程师捎带脚写写JS。

2008年：Chrome浏览器发布，V8引擎加快了JS的解析，之前的浏览器解析JS的时候卡顿卡顿的，动画效果是蹦蹦的。在Chrome里，它的引擎叫做V8，运行JS很流畅。

2009年：jQuery变得流行，解决了浏览器兼容问题，制作页面效果变得简单，越来越多的初学者愿意学习JavaScript。

2010年：Canvas画布技术得到众多浏览器支持，可以用Canvas替代Flash了，并且能可以制作小游戏。

2011年：Node.js得到广泛应用，实际上就是把JavaScript运行在了服务器上，单线程非阻塞，能够让企业用最小的成本实现后台网站，比如之前4万的服务器都卡，现在用了node之后，4000的机器都很流畅。

2012年：HTML5+CSS3的流行，也带火了JavaScript。

2013年： hybrid app模式开始流行。当时做手机app的时候，老板们发现要雇佣三队人马，ios、安卓、windows phone。花三份工资，并且产品还不好迭代。所以人们发明了用网页技术开发手机App的技术，叫做web app。但是web app 并不能调用底层的硬件设备，这个时候hybrid app就诞生了，可以结合web技术和原生开发技术进行APP的开发，达到省钱，好迭代的目的。

2015年：ECMA6发布，叫做ECMA2015。重量级的改变，把语言的特性颠覆性的一个增强。

javascript之HelloWorld！

学习任何的语言，我们都喜欢在屏幕上直接输出一点什么，当做最简单、最基本的案例。输出什么大家随意，但是很多人都习惯输出“hello world”，世界你好。感觉自己很有情怀的样子。

如何运行Javascript代码

只要有javascript的引擎就可以运行js的代码，在浏览器中都内置了这种引擎所以在html页面中可以直接嵌入js的代码。目前最快的引擎是谷歌出的V8引擎。

网页中应用Javascript代码

1. 在HTML页面使用 script 标签嵌入
2. 在纯js文件编写，然后使用script引入该脚本文件

alert()语句

alert("helloworld！");

编码规范

• JavaScript语句和语句之间的换行、空格、缩进都不敏感。
• 语句后面的分号，不是必须写的，如果语句是一行一行写的，那么分号是没有必要的。但是压缩页面的时候，语句结尾的分号，非常重要。

字面量

字面量：英语叫做literals，有些书上叫做直接量。看见什么，它就是什么。

数字的字面量

数字的字面量，就是这个数字自己，并不需要任何的符号来界定这个数字。

字符串字面量

字符串是一个术语，就是人类说的语句、词。字符串的字面量，必须用双引号、单引号包裹起来。字符串被限定在同种引号之间；也即，必须是成对单引号或成对双引号。

变量

变量用于在程序运行过程中临时保存数据的。和高中代数学习的x、y、z很像，用来保存信息的。

变量定义

变量在使用之前必须先定义，否则会出错。

var name;// 声明
var age = 12; // 声明同时赋值
var number1 = 12, number2= 24; // 声明多个同时赋值

变量命名规范

变量名只能包含字母、数字、下划线(_) 和 $，只能以字母、下划线和$开头。

扩展：
JS中有一些关键字（保留字）不能用来当变量名。

image.png
image.png
image.png
image.png

注释

• 单行注释 // 注释内容
• 多行注释 /* 注释内容 */

变量输出

• console.log(var1)：在浏览器的控制台输出
• alert(var2)：在浏览器弹窗输出

数据类型

变量保存的值的类型。变量的数据类型由这个变量所保存的值来决定

• number
• string
• boolean
• array
• object
• undefined
• null

数据类型转换

• parseInt：转化成整型
• join：数组转字符串
• split：字符串转数组
• prompt：接收用户输入的信息
• 1 + '' ：将一个数字转换为字符串

运算符

• 赋值运算
• 算术运算
• 逻辑运算
• 比较运算
• 三目运算

流程控制

• 顺序（代码从上到下执行）
• 分支（单向分支、双向分支、多向分支）
• 循环（for、while、do...while、for...in、break、continue）

函数

将经常使用的一段代码写到一个函数中，用时直接调用这个函数即可，不需要再重新写相同的代码。

函数定义

function fnName(参数1，参数2....){
    // 注释、下面写函数体
   var name = 'andy'; // 每条语句以分号结尾
}

函数调用

fnName();

变量作用域

• 全局变量：函数外部使用var定义的变量。在整个脚本中的任何位置都可以使用
• 局部变量：函数内部使用var定义的变量。只在函数内部可以使用，并且只要函数执行过程中存在，函数执行结束就销毁了。

函数返回

在函数中执行return会退出函数的执行并返回调用函数的地方。注意：return只能用在函数内部用来退出函数的。

function fnName(参数1，参数2....){
    // 注释、下面写函数体
   var name = 'andy'; // 每条语句以分号结尾
    return;
}

函数的参数

匿名函数

没有名字的函数被称为匿名函数，一般用于事件的回调，或者避免执行被污染。

递归函数

数内部又调用自身的函数。例如求取阶乘。

javascript中自带的系统函数

• parseInt：转换为整数
• setInterval和clearInterval ：周期性去执行
• setTimeout和clearTimeout：定时只执行一次

事件

当页面中发生一个行为（也称为动作或者交互）时触发执行一段JS代码。
常见事件有哪些呢？

• 鼠标相关事件：

  • onclick ：鼠标点击时
  • ondblclick：鼠标双击时
  • onmousemove：鼠标移动
  • onmouseout：鼠标离开时
  • onmouseover：鼠标放上时

• 键盘相关事件：

  • onkeypress：键盘按键按下并未释放时
  • onkeydown：键盘按键按下瞬间时
  • onkeyup：当键盘按键放开时

• 表单相关事件：

  • onfocus：得到焦点时
  • onblur：失去焦点时

绑定事件处理函数

可以为页面中任何元素绑定一个事件处理函数，当事件发送后，则该函数执行。该函数一般被称为事件的回调函数。

事件冒泡

当多个元素重叠是，当点击内层的一个元素时，这个点击事件会一直向上级传递，所以如果外层上级也绑定了点击事件，那么外层上级的事件也会依次被触发！

事件冒泡

事件对象

在绑定事件的回调函数中可以加一个参数，这个参数就是这个事件的对象，参数名可以任意取。该对象记录了事件发生时候的相关信息，例如事件发生的主体，事件发生的坐标点...

常见属性和方法：

• target：事件发生主体，就是事件发生在谁身上，谁就是事件主体
• preventDefault()：阻止默认行为，比如我们可以阻止 a标签点击之后跳转的这个默认行为
• stopPropagation()：阻止冒泡
• clientX ：触发事件时鼠标的x坐标
• clientY ：触发事件时鼠标的鼠标y坐标
• keyCode ：单击键盘的按钮对应的键码

---

DOM操作

有的时候我们需要通过js去操作 网页里面的元素（这些元素被称为DOM元素【文档对象模型】），例如去更改某个元素的背景色、字体大小等。在编程中，可以使用document对象【或者：window.document对象】来操作窗口中的HTML文档中的元素。

查找元素

• document.getElementById：根据id查找一个元素，返回这个元素对象。
• document.getElementsByTagName：根据标签名字查找元素，返回包含所有元素的数组

设置元素样式 - style

当查询到一个元素之后就可以使用style属性来修改标签的css样式

元素对象的属性

获取到一个标签之后可以获取或者设置这个标签上的属性

• getAttribute(属性名); ：获取标签上的属性值
• setAttribute(属性名,属性值); ：设置标签上的属性值

元素内容 - innerHTML和innerText

可以使用innerHTML和innerText属性获取和设置元素里面的内容。

创建、追加、删除元素

我们可以使用JS代码在页面中生成一个HTML元素，或者删除。

• document.createElement：创建节点
• document.body.appendChild：追加节点
• document.body.removeChild：删除子元素

---

BOM操作

有的时候我们需要通过js去操作浏览器，例如改变浏览器的url地址，或者让当前网页刷新，或者进行前进或者后退，则这个时候我们可以通过BOM（浏览器对象模型）进行操作。

location对象

在javascript中可以使用location对象获取当前访问的页面地址信息。

image.png

history对象

可以使用history对象实现历史页面的跳转

• history.go(-1)：后退一页
• history.go(1)：前进一页
• history.back()：后退一页
• history.forward()：前进一页

---

---

数学运算 - Math

当要做一些数学运算时就可以使用这个对象，该对象提供了一些对数字做处理的方法。

• Math.abs()：计算绝对值
• Math.ceil()：向上取整
• Math.floor()：向下取整
• Math.round：四舍五入取整
• Math.max：获取一系列数字中最大的那个数
• Math.random()：取一个 0~1之间的随机数， 包含0，不包含1
• Math.pow(3,4)：求取 3^4
• Math.sqrt(81)：求取81的平方

思考：如何随机到一个指定区间的数字呢？ 比如 [12, 30]

日期操作 - Date

Date对象可以做时间相关的操作，例如获取年月日、时分秒

• var d = new Date()
  +d.getDate()：返回一个月的某一天【1~31】
• d.getDay()：返回一周中的某一天【0~6】
• d.getMonth()：返回一年中的某一个月【0~11】
• d.getFullYear()：返回四位数的年
• d.getHours()：返回小时【0~23】
• d.getMinutes()：返回分钟【0~59】
• d.getSeconds()：返回秒【0~59】
• d.getTime()：返回时间戳

扩展：moment.js 是一个专门做时间处理的js插件。

moment.js