前端入门 04：JavaScript入门

目的

JavaScript是前端基础内容中最复杂的一部分。前面两块HTML和CSS差不多都不能当作是编程语言来看待，而JavaScript是一门正式的编程语言。JavaScript入门需要学习的内容比较多，一篇文章难以介绍全面，这里只是稍微对JavaScript涉及的内容做个简单梳理，需要详细学习JavaScript的话可以参考下面链接：
《JavaScript教程》 - 廖雪峰的官方网站
《JavaScript教程》 - w3school

语法说明

注意下面内容都是些简单的记录，只是记个流水账，想要完整学习还是参考上面链接！

基础语法

上面是个简单的JS代码演示，功能是在页面加载完成后从控制台输出累加计数值。这段代码差不多就包含了JS大部分基础语法了下面分别进行介绍。

代码和代码块

JS代码是一行行一块块堆砌起来的，每一行以 ; 结尾（行结尾不写 ; 很多时候也能运行，但不推荐这么做），使用 { } 包围形成代码块。默认情况下代码从上到下一行行运行。

变量

可以用 var 、 let 或 const 声明变量，比如 var a = 1; 或者 let b = 2; 等，a、b是该变量的变量名，声明后在各自作用域内就可以通过变量名来调用。
var 是以前就有的变量声明方式，这个东西坑比较多，特别是对于学过其它类C语言的人来说甚至有可能产生理解困难，就我个人来说从有了let以后就不这么推荐用var了。
let 和其它类C语言中声明的变量相似，其作用域就是在 { } 外声明的变量在 { } 内可见，在 {} 内声明的变量在 {} 外不可见：

const 声明的变量必须在声明是赋值，并且之后无法修改。
除了上面方式声明变量还可以不通过关键词直接声明变量，比如 c = 3 。该方式声明的变量将是全局变量，全局可见。

数据类型

JS中数据最基本的类型有三种：数值、字符串、布尔值。

// 以下是数值
123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

// JS中使用 '' 或 "" 包围的既是字符串
// 以下是字符串
'' // 空字符串
"" // 空字符串
"Hello World!" //

// 以下是布尔变量
true; // 这是一个true值
false; // 这是一个false值

除了上面的基本类型外JS中还有两个有意思的东西 null 和 undefined 。这两个东西分别表示 空值 和 未定义 ，对于其它类C语言来说这个有点奇怪，感兴趣的话可以自行百度了解。

数组

数组是一种非常常用的东西，可以把很多数据串在一起，然后通过索引赋值和取值。下面是个简单的演示：

对象

在JS中任何东西都可以看作是一个对象，但通常情况下只把若干键值对组成的集合当作对象。下面是个简单的演示：

算术和赋值运算

和大多数语言一样变量和对象很多可以进行算术和赋值运算。以下是常见算术运算符：

运算符	描述	运算符	描述	运算符	描述	运算符	描述
+	加	-	减	*	乘	/	除
++	自增	–	自减	**	幂	%	取余
<<	左移	>>	右移	&	与	|	或
^	异或	()	括号

赋值运算主要是一些带有 = 的运算，经常还会和上面的算术运算组合。下面列举一些赋值运算：

运算符	例子	等同于	描述	例子	等同于
=	x=y	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	x=x>>y	<<=	x<<=y	x=x<<y
&=	x&=y	x=x&y	|=	x|=y	x=x|y
^=	x^=y	x=x^y

比较和逻辑运算

比较与逻辑运算通常应用在条件判断的语句中，通过运算最终得到 true 或 false 的结果。常见的比较运算符如下：

运算符	描述	运算符	描述	运算符	描述	运算符	描述
==	值相等	===	值和类型都相等	>	大于	>=	大于等于
!=	值不等于	!==	值或类型不相等	<	小于	<=	小于等于

和其他语言不同的，JS中使用 == 时对于不同类型的对象会自动转换类型再进行比较，所以还弄出来一个 === ：

常见的逻辑运算符如下：

运算符	描述	运算符	描述	运算符	描述
&&	与	||	或	!	非

条件判断

条件判断最常用的就是 if ( ... ) { ... } 语句了，如果圆括号中语句为真则执行花括号中语句。这个语句还有一个变种 if ( ... ) { ... } else { ... } 语句了，如果圆括号中语句为真则执行第一个花括号中语句，否则执行else后面花括号中语句。再更进一步的可以用 if ( ... ) { ... } else if ( ... ) { ... } else { ... } ，如果有多个条件就写多个else if语句。
除了上面的语句外JS中还可以用 switch ( ... ) { case x: ... ; break; case y: ... ; break; default: break;} 语句，该语句直根据圆括号中传入的值来选择后面执行的语句。
另外JS也支持三元运算符。

循环

循环最常用的就是 for ( ... ) { ... } 语句了只要圆括号中条件为满足就会循环执行花括号中语句。在JS中可以使用 for ( ... in ... ) { ... } 直接循环访问对象或数组中的内容。
除了上面循环语句外，常用的还有 while ( ... ) { ... } 语句。

函数

JS可以使用下面方式定义函数：

function fun(x){ // 方式一
 ... 
}

var fun = function (x){ // 方式二
 ... 
}

函数定义了之后就可以通过函数名（fun）进行调用了 。
JS函数的和其它很多语言一样可以设置默认值：

面向对象编程

JS传统的面向对象编程和其它类C语言有点差别，传统的JS并没有类的概念，它把某个对象当作原型，其它对象可以指向该原型，继承该原型的属性和方法，从而实现类似类和对象的功能。
在ES6标准中引入了用 class 定义类的方式，下面是个简单的演示：

浏览器对象模型（BOM）

JS可以通过BOM获取浏览器相关内容或与浏览器交互。BOM对于JS来说表现为一个 window 对象，用户可以操作这个对象来获取信息或交互。 window 对象还充当全局作用域，使用时可以省略 window 本身。这里列举些常用的 window 对象的属性与方法：

• innerWidth 页面宽度
  innerHeight 页面高度
  outerWidth 浏览器总宽度
  outerHeight 浏览器总高度
  

• screen.width 显示屏总宽度
  screen.height 显示器总高度
  screen.availWidth 显示器可用宽度
  screen.availHeight 显示器可用高度
  

• location.href 当前页面url
  location.protocol 使用的web协议
  location.host 主机名与端口号
  location.hostname 主机名
  location.port 端口号
  location.pathname url路径
  location.search url参数
  location.hash url锚部分
  location.assign(url) 加载新页面
  location.replace(url) 用新页面代替当前页面
  location.reload() 刷新页面
  

• navigator.language 浏览器设置的语言
  navigator.platform 操作系统类型
  navigator.userAgent 访问者信息
  

• history.back() 相当于点击浏览器的后退按钮
  history.forward() 相当于点击浏览器的前进按钮

• alert("sometext") 弹出警告框
  confirm("sometext") 弹出确认框
  prompt("sometext","defaultText") 弹出提示框

• setTimeout(function, milliseconds) 指定毫秒时间后单次执行函数，该方法返回定时器对象
  clearTimeout(timeoutVariable) 取消已设置的setTimeout对象
  setInterval(function, milliseconds) 指定毫秒时间后反复执行函数，该方法返回定时器对象
  clearInterval(timerVariable) 取消已设置的setInterval对象

• onload(function) 在网页文档加载完成后执行该方法

文档对象模型（DOM）

DOM其实也是BOM中的一部分，它是网页的主体内容，网页中的各种动态或交互效果很多都是操作它实现的。JS对DOM的操作主要是对一个个具体的html标签元素进行操作。

获取元素

获取元素方法常用的下面几个：
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(tagname) 通过标签名来查找元素
document.getElementsByClassName(classname) 通过类名来查找元素
通过id查找是最常用的方式，它返回单个元素对象。另外两种方式会返回一个对象数组。

除了上面的方式外还可以通过下面方法获取元素：
document.querySelector(CSS selectors) 通过CSS选择器字符串来获取符合条件的第一个元素
document.querySelectorAll(CSS selectors) 通过CSS选择器字符串来获取符合条件的所有元素

新增与删除元素

元素新增与删除主要通过下面方法：
document.createElement(tagname) 通过标签创建元素
document.removeChild(element) 移除元素
document.appendChild(element) 添加元素
document.replaceChild(newelement, oldelement) 替换元素

修改元素属性

对于具体某个元素可以用下面方法修改它的属性内容：
element.innerHTML = new html content 直接改写元素内部html文档内容
element.attribute = new value 修改元素属性
element.setAttribute(attribute, value) 修改元素属性
element.style.property = new style 修改元素样式
element.onclick = function(){code} 添加单击事件

jQuery

jQuery是一个第三方JavaScript库，可以让JavaScript前端操作变得简单非常多。不过这里我并不是要介绍jQuery，只是要说一点： 当你网上搜索JS代码时，注意这个代码是原生JS代码，还是使用的jQuery的JS代码。 当你看到JS代码中以 $ 开头的就有可能是用了jQuery的。 jQuery当年的影响力实在是太过巨大了。

在前端使用JS代码

在前端使用JS代码主要有三种方式。

内联方式

嵌入方式

嵌入方式主要就是把JS代码放到 <script></script> 标签之间，看下面演示：

这种方式有时候对代码前后顺序有要求，因为文档是从上到下解析的，如果JS代码中引用的元素还未加载则会报错，看下面演示：

外部引用

外部引用的方式也会出现文档解析顺序的问题，可以通过加 defer 属性来处理：

总结

JavaScript是一门类C语言，对于学过C、C++、C#、Java等语言的人来说上手都蛮简单的。对于没学过这类语言的人可能需要多花点时间才能入门。JavaScript这门语言因为其历史原因有各种各样的BUG，但并不妨碍它在这几年随着web技术的发展变得越来越流行。对于前端开发来说JavaScript是值得花时间好好学习的。更详细的内容请参考本文开头给出的链接。