1 初识 JavaScript

1.1 基础知识

JavaScript 概述

一、为什么JavaScript非常值得我们学习

所有主流浏览器都支持 JavaScript 。
目前，全世界大部分网页都使用 JavaScript 。
它可以让网页呈现各种动态效果。
做为一个 Web 开发师，如果你想提供漂亮的网页、令用户满意的上网体验， JavaScript 是必不可少的工具。

二、易学性

学习环境无外不在，只要有文本编辑器，就能编写 JavaScript 程序。
我们可以用简单命令，完成一些基本操作。

三、从哪开始学习呢？

学习 JavaScript 的起点就是处理网页，所以我们先学习基础语法和如何使用 DOM 进行简单操作。

JS 文本的位置

我们来看看如何写入JS代码？你只需一步操作,使用 <script> 标签在HTML网页中插入JavaScript代码。注意， <script> 标签要成对出现，并把 JavaScript 代码写在 <script></script> 之间。

<script type="text/javascript"> 表示在 <script></script> 之间的是文本类型（text）， javascript 是为了告诉浏览器里面的文本是属于 JavaScript 语言。

我们还可以把 HTML 文件和 JS 代码分开，并单独创建一个 JavaScript 文件（简称 JS 文件），其文件后缀通常为 .js ，然后将 JS 代码直接写在 JS 文件中。

注意:在JS文件中，不需要 <script> 标签，直接编写 JavaScript 代码就可以了。

JS 文件不能直接运行，需嵌入到 HTML 文件中执行，我们需在 HTML 中添加如下代码，就可将 JS 文件嵌入 HTML 文件中。

<script src="script.js"></script>

我们可以将 JavaScript 代码放在 HTML 文件中任何位置，但是我们一般放在网页的 head 或者 body 部分。

放在 <head> 部分

最常用的方式是在页面中 head 部分放置 <script> 元素，浏览器解析 head 部分就会执行这个代码，然后才解析页面的其余部分。

放在 <body> 部分

JavaScript 代码在网页读取到该语句的时候就会执行。

注意： JavaScript 作为一种脚本语言可以放在 HTML 页面中任何位置，但是浏览器解释 HTML 时是按先后顺序的，所以前面的 script 就先被执行。比如进行页面显示初始化的 js 必须放在 head 里面，因为初始化都要求提前进行（如给页面 body 设置 CSS 等）；而如果是通过事件调用执行的 function 那么对位置没什么要求的。

语句和符号

JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

每一句JavaScript代码格式: 语句;

先来看看下面代码

<script type="text/javascript">
   alert("hello!");
</script>

例子中的 alert("hello!"); 就是一个 JavaScript 语句。

一行的结束就被认定为语句的结束，通常在结尾加上一个分号 ; 来表示语句的结束。

看看下面这段代码,有三条语句，每句结束后都有 ; ，按顺序执行语句。

<script type="text/javascript">
   document.write("I");
   document.write("love");
   document.write("JavaScript");
</script>

注意：

1. 分号要在英文状态下输入，同样，JS 中的代码和符号都要在英文状态下输入。

2. 虽然分号也可以不写，但要养成编程的好习惯，记得在语句末尾写上分号。

注释

注释的作用是提高代码的可读性，帮助自己和别人阅读和理解你所编写的 JavaScript 代码，注释的内容不会在网页中显示。注释可分为单行注释与多行注释两种。

我们为了方便阅读，注释内容一般放到需要解释语句的结尾处或周围。

单行注释，在注释内容前加符号 // 。

<script type="text/javascript">
  document.write("单行注释使用'//'");  // 我是注释，该语句功能在网页中输出内容
</script>

多行注释以 /* 开始，以 */ 结束。

<script type="text/javascript">
   document.write("多行注释使用/*注释内容*/");
   /*
    多行注释
    养成书写注释的良好习惯
   */
</script>

变量初步

变量是用于存储某种 / 某些数值的存储器。

定义变量使用关键字 var ，语法如下：

var 变量名

变量名可以任意取名，但要遵循命名规则:

变量必须使用字母、下划线 _ 或者美元符 $ 开始。
然后可以使用任意多个英文字母、数字、下划线 _ 或者美元符 $ 组成。
不能使用 JavaScript 关键词与 JavaScript 保留字。

变量要先声明再赋值，如下：

var mychar;
mychar = "javascript";
var mynum = 6;

变量可以重复赋值，如下：

var mychar;
mychar = "javascript";
mychar = "hello";

注意：

在 JS 中区分大小写，如变量 mychar 与 myChar 是不一样的，表示是两个变量。
变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

条件语句初步

if...else 语句是在指定的条件成立时执行代码，在条件不成立时执行 else 后的代码。

语法：

if (条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

假设我们通过年龄来判断是否为成年人，如年龄大于等于 18 岁，是成年人，否则不是成年人。代码表示如下：

<script type="text/javascript">
   var myage = 18;
   if(myage >= 18)  //myage>=18是判断条件
   { document.write("你是成年人。");}
   else  //否则年龄小于18   { document.write("未满18岁，你不是成年人。");}
</script>

函数初步

函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。

定义一个函数基本语法如下：

function 函数名()
{
	函数代码;
}

说明：

function 定义函数的关键字。
"函数名" 你为函数取的名字。
"函数代码" 替换为完成特定功能的代码。

我们来编写一个实现两数相加的简单函数，并给函数起个有意义的名字：“add2”，代码如下：

function add2(){
	var sum = 3 + 2;
	alert(sum);
}

函数调用：

函数定义好后，是不能自动执行的，所以需调用它，只需直接在需要的位置写函数就行，代码如下：

1.2 常用互动方法

输出内容

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

第一种：输出内容用 "" 括起，直接输出双引号内的内容

<script type="text/javascript">
  document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>

第二种：通过变量，输出内容

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接写变量名，输出变量存储的内容。
</script>

第三种：输出多项内容，内容之间用 + 连接。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

第四种：输出 HTML 标签，并起作用，标签使用 "" 括起来。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"<br>");//输出hello后，输出一个换行符
  document.write("JavaScript");
</script>

警告

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击 “确定” ，就不能对网页做任何操作，这个小窗口就是使用 alert 实现的。

语法：

alert(字符串或变量);

看下面的代码：

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

注：alert 弹出消息对话框（包含一个确定按钮）。

结果：按顺序弹出消息框

注意：

在点击对话框 "确定" 按钮前，不能进行任何其它操作。
消息对话框通常可以用于调试程序。
alert 输出内容，可以是字符串或变量，与 document.write 相似。

确认

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？” 等。弹出对话框（包括一个确定按钮和一个取消按钮）。

语法：

confirm(str);

参数说明：

str ：在消息对话框中要显示的文本
返回值： Boolean值

返回值：

当用户点击 "确定" 按钮时，返回 true
当用户点击 "取消" 按钮时，返回 false

注：通过返回值可以判断用户点击了什么按钮

看下面的代码:

<script type="text/javascript">
    var mymessage = confirm("你喜欢JavaScript吗?");
    if(mymessage == true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大，要学习噢!");   }
</script>

结果：

注：消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作。

提问

prompt 弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

语法：

prompt(str1, str2);

参数说明：

str1 ：要显示在消息对话框中的文本，不可修改
str2 ：文本框中的内容，可以修改

返回值：

点击确定按钮，文本框中的内容将作为函数返回值
点击取消按钮，将返回 null

看看下面代码：

var myname = prompt("请输入你的姓名:");
if(myname != null)
  {   alert("你好" + myname); }
else
  {  alert("你好 my friend.");  }

结果：

注：在用户点击对话框的按钮前，不能进行任何其它操作。

打开新窗口

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：

window.open([URL], [窗口名称], [参数字符串])
// or
window.open('URL', '窗口名称', '参数字符串')

参数说明：

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1. 该名称由字母、数字和下划线字符组成。
2. _top 、_blank 、_self 具有特殊意义的名称。
  - _blank：在新窗口显示目标网页
  - _self：在当前窗口显示目标网页
  - _top：框架网页中在上部窗口中显示目标网页
3. 相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4. name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

例子：

window.open([http://www.juejin.cn], [_blank], [height=600,width=400,top=100,left=0]);
// or
window.open('http://www.juejin.cn', '_blank', 'height=600,width=400,top=100,left=0');

参数表:

注意：运行结果考虑浏览器兼容问题。

关闭窗口

close() 关闭窗口

用法：

window.close();   //关闭本窗口

或

<窗口对象>.close();   //关闭指定的窗口

例如：关闭新建的窗口。

<script type="text/javascript">
   var mywin = window.open('http://www.juejin.cn'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

注意：上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。

1.3 DOM 操作

认识 DOM

文档对象模型 DOM（Document Object Model）定义访问和处理 HTML 文档的标准方法。

DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

先来看看下面代码：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>DOM</title>
  </head>
  <body>
    <h2><a href="https://www/juejin.cn">javascript DOM</a></h2>
    <p>对HTML元素进行操作，可添加、改变或移除CSS样式等</p>
    <ul>
      <li>JavaScript</li>
      <li>DOM</li>
      <li>CSS</li>
    </ul>
  </body>
</html>

将 HTML 代码分解为 DOM 节点层次图：

三种常见的 DOM 节点：

元素节点：上图中 <html> 、 <body> 、<p> 等都是元素节点，即标签。
文本节点：向用户展示的内容，如 <li>...</li> 中的 JavaScript 、 DOM 、 CSS 等文本。
属性节点：元素属性，如 <a> 标签的链接属性 href="http://www.juejin.cn" 。

看下面代码：

<a href="http://www.juejin.cn">JavaScript DOM</a>

通过 ID 获取元素

网页由标签将信息组织起来，而标签的 id 属性值是唯一的。那么在网页中，我们通过 id 先找到标签，然后进行操作。

语法：

document.getElementById("id")

看看下面代码:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>获取元素</title>
    <script>
      var mye = document.getRlementById("con"); //获取元素存储在变量 mye 中
      document.write(mye); //输出变量 mye
    </script>
  </head>
  <body>
    <h3>Hello</h3>
    <p id="con">I love JavaScript</p>
  </body>
</html>

结果：null 或 [object HTMLParagraphElement]

注：获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

获取或替换元素内容

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法：

Object.innerHTML

注意：

Object是获取的元素对象，如通过 document.getElementById("ID") 获取的元素。
注意书写，innerHTML区分大小写。

我们通过 id="con" 获取 <p> 元素，并将元素的内容输出和改变元素内容，代码如下：

<!DOCTYPE HTML>
<html>
  <head>
    <title>innerHTML</title>
  </head>
  <body>
    <p id="con">Hello World!</p>
    <script>
      var mycon = document.getElementById("con");
      document.write("original content in p: " + mycon.innerHTML + "</br>"); //输入元素内容
      mycon.innerHTML = "Next text!"; //修改p元素内容
      document.write("current content in p: " + mycon.innerHTML);
    </script>
  </body>
</html>

结果：

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

语法：

Object.style.property = new style;

注意：

Object 是获取的元素对象，如通过 document.getElementById("id") 获取的元素。

基本属性表（property）：

注意：该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。

看看下面的代码：

改变 <p> 元素的样式，将颜色改为红色，字号改为 20 ，背景颜色改为蓝：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color = "red";
   mychar.style.fontSize = "20";
   mychar.style.backgroundColor = "blue";
</script>

结果：

显示和隐藏

网页中经常会看到显示和隐藏的效果，可通过 display 属性来设置。

语法：

Object.style.display = value

注意：

Object 是获取的元素对象，如通过 document.getElementById("id") 获取的元素。

value 取值：

看看下面代码：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>display</title>
    <script type="text/javascript">
	  function hidetext() {
	    document.getElementById("con").style.display="none";
	  }
	  function showtext() {
	    document.getElementById("con").style.display="block";
	  }
    </script>
  </head>
  <body>
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
  </body>
</html>

控制类名

className 属性设置或返回元素的 class 属性。

语法：

object.className = classname

作用：

获取元素的 class 属性
为网页内的某个元素指定一个 CSS 样式来更改该元素的外观

看看下面代码，获得 <p> 元素的 class 属性和改变 className ：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>className属性</title>
    <style type="text/css">
        input {
          font-size:10px;
        }
        .one{
		  width:200px;
		  background-color:#CCC;
        }
	    .two{
		  font-szie:18px;
		  color:#F00;
	    }
	</style>
  </head>
  <body>
    <p id="con" class="one">JavaScript</p>
    <form>
      <input type="button" value="点击更改" onlick="modifyclass()" />
    </form>
	<script type="text/javascript">
	  var mychar = document.getElementById('con');
	  document.write("p元素class值为: " + mychar.className + "</br>"); //输出p元素class属性
	  function modifyclass(){
	    mychar.className = "two"; //改变className      
	  }
	</script>
  </body>
</html>

结果：

2 JavaScript 基础语法

2.1 变量

什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，盒子用来存放物品，物品可以是衣服、玩具、水果等。

变量命名

为了区分盒子，可以用 box1，box2 等名称代表不同盒子， box1 就是盒子的名字（也就是变量的名字）。

变量名字可以任意取，只不过取名字要遵循一些规则：

必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下：

正确：

mysum            
_mychar         
$numa1

错误：

6num  //开头不能用数字
%sum //开头不能用除(_ $)外特殊符号,如(%  + /等)
sum+num //开头中间不能使用除(_ $)外特殊符号，如(%  + /等)

变量名区分大小写，如： A 与 a 是两个不同变量。
不允许使用 JavaScript 关键字和保留字做变量名。

变量声明

我们要使用盒子装东西，是不是先要找到盒子，那在编程中，这个过程叫声明变量。

语法：

var 变量名;

var 就相当于找盒子的动作，在 JavaScript 中是关键字（即保留字），这个关键字的作用是声明变量，并为 "变量" 准备位置（即内存）。

var mynum; //声明一个变量mynum

当然，我们可以一次找一个盒子，也可以一次找多个盒子，所以 var 还可以一次声明多个变量，变量之间用 , 逗号隔开。

var num1, mun2; //声明一个变量num1和一个变量num2

注意：变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。

变量赋值

我们可以把变量看做一个盒子，盒子用来存放物品，那如何在变量中存储内容呢?

我们使用 = 号给变量存储内容，看下面的语句：

var mynum = 5; //声明变量mynum并赋值。

我们也可以这样写：

var mynum; //声明变量mynum
mynum = 5; //给变量mynum赋值

注：这里 = 号的作用是给变量赋值，不是等于号。

其实，变量是无所不能的容器，你可以把任何东西存储在变量里，如数值、字符串、布尔值等，例如：

var num1 = 123;       // 123是数值
var num2 = "一二三";    //"一二三"是字符串
var num3 = true;    //布尔值true（真），false(假)

其中， num1 变量存储的内容是数值； num2 变量存储的内容是字符串，字符串需要用一对引号 "" 括起来， num3 变量存储的内容是布尔值（true、false）。

2.2 表达式

表达式与数学中的定义相似，表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。

我们先看看下面的 JavaScript 语句：

生活中 “再见” 表达方法很多，如：英语（goodbye）、网络语（88）、肢体语（挥挥手）等。在 JavaScript 表达式无处不在，所以一定要知道可以表达哪些内容，看看下面几种情况：

注意：串表达式中 mychar 是变量

注意：数值表达式中 num 是变量

注意：布尔表达式中 num 是变量

2.3 + 运算符

操作符是用于在 JavaScript 中指定一定动作的符号。

操作符

看下面这段 JavaScript 代码。

sum = numa + numb;

其中的 = 和 + 都是操作符。

JavaScript 中还有很多这样的操作符，例如，算术操作符（ + 、 - 、 * 、 / 等），比较操作符（ < 、 > 、 >= 、 <= 等），逻辑操作符（ && 、 || 、！）。

注意： “=” 操作符是赋值，不是等于。

+ 操作符

算术运算符主要用来完成类似加减乘除的工作，在 JavaScript 中，+ 不只代表加法，还可以连接两个字符串，例如：

mystring = "Java" + "Script"; // mystring的值是“JavaScript”这个字符串

2.4 自增自减运算符

算术操作符除了（ + 、 - 、 * 、 / ）外，还有两个非常常用的操作符，自加一 ++ ；自减一 -- 。首先来看一个例子：

mynum = 10;
mynum++; //mynum的值变为11
mynum--; //mynum的值又变回10

上面的例子中， mynum++ 使 mynum 值在原基础上增加 1 ， mynum-- 使 mynum 在原基础上减去 1 ，其实也可以写成：

mynum = mynum + 1; //等同于mynum++
mynum = mynum - 1; //等同于mynum--

2.5 比较运算符

我们先来做道数学题，数学考试成绩中，小明考了 90 分，小红考了 95 分，问谁考的分数高?
答：因为 “95 > 90” ，所以小红考试成绩高。

其中大于号 ">" 就是比较操作符，小红考试成绩和小明考试成绩就是操作数，并且是两个操作数。

也就是说两个操作数通过比较操作符进行比较，得到值为真（true）和假（false）。

在 JavaScript 中，这样的比较操作符有很多，这些操作符的含义如下：

看看下面例子：

var a = 5;//定义a变量，赋值为5
var b = 9; //定义b变量，赋值为9
document.write (a<b); //a小于b的值吗? 结果是真(true)
document.write (a>=b); //a大于或等于b的值吗? 结果是假(false)
document.write (a!=b); //a不等于b的值吗? 结果是真(true)
document.write (a==b); //a等于b的值吗? 结果是假(false)

2.6 逻辑运算符

与

数学里面的 “a>b” ，在 JavaScript 中还表示为 a>b ；数学中的 “b大于a，b小于c” 是 “a<b<c” ，那么在 JavaScript 中可以用 && 表示，如下：

b>a && b<c    //“&&”是并且的意思, 读法"b大于a"并且" b小于c "

“&&” 是逻辑与操作符，只有 “&&” 两边值同时满足（同时为真），整个表达式值才为真。

逻辑与操作符值表：

注意： 如果A为假，A && B为假，不会在执行B；反之，如果A为真，要由 B 的值来决定 A && B 的值。

或

|| 逻辑或操作符，相当于生活中的 “或者” ，当两个条件中有任一个条件满足，“逻辑或” 的运算结果就为 “真” 。

例如：本周我们计划出游，可是周一至周五工作，所以周六或者周日哪天去都可以。即两天中只要有一天有空，就可以出游了。

var a = 3;
var b = 5;
var c;
c = b > a || a > b;  //b>a是true，a>b是false，c是true

逻辑或操作符值表：

注意： 如果 A 为真，A || B为真，不会在执行B；反之，如果 A 为假，要由 B 的值来决定 A || B 的值。

非

! 是逻辑非操作符，也就是 "不是" 的意思，非真即假，非假即真。

逻辑非操作符值表：

看看下面代码，变量c的值是什么：

var a = 3;
var b = 5;
var c;
c = !(b > a);  // b>a值是true,! (b>a）值是false
c = !(b < a);  // b<a值是false, ! (b<a）值是true

2.7 运算符优先级

我们都知道，除法、乘法等操作符的优先级比加法和减法高，例如：

var numa = 3;
var numb = 6;
jq = numa + 30 / 2 - numb * 3;  // 结果为0

如果我们要改变运算顺序，需添加括号的方法来改变优先级：

var numa = 3;
var numb = 6;
jq = ((numa + 30) / (2 - numb)) * 3; //结果是-24.75

操作符之间的优先级（高到低）：

算术操作符 -> 比较操作符 -> 逻辑操作符 -> "=" 赋值符号

如果同级的运算是按从左到右次序进行，多层括号由里向外。

var numa = 3;
var numb = 6;
jq = numa + 30 > 10 && numb * 3 < 2;  //结果为false

3 数组

3.1 什么是数组

我们知道变量用来存储数据，一个变量只能存储一个内容。假设你想存储 10 个人的姓名或者存储 20 个人的数学成绩，就需要 10 个或 20 个变量来存储，如果需要存储更多数据，那就会变的更麻烦。我们用数组解决问题，一个数组变量可以存放多个数据。好比一个团，团里有很多人，如下我们使用数组存储 5 个学生成绩。

数组是一个值的集合，每个值都有一个索引号，从 0 开始，每个索引都有一个相应的值，根据需要添加更多数值。

3.2 创建数组

使用数组之前首先要创建，而且需要把数组本身赋至一个变量。

创建数组语法：

var myarray = new Array();

我们创建数组的同时，还可以为数组指定长度，长度可任意指定。

var myarray = new Array(8); //创建数组，存储8个数据。

注意：

创建的新数组是空数组，没有值，如输出，则显示 undefined
虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为 8 ，仍然可以将元素存储在规定长度以外。

3.3 数组赋值

数组创建好，接下来我们为数组赋值。

第一步：创建数组

var myarr = new Array();

第二步：给数组赋值

myarr[1] = "张三";
myarr[2] = "李四";

下面创建一个数组，用于存储 5 个人的数学成绩。

var myarray = new Array(); //创建一个新的空数组
myarray[0] = 66; //存储第1个人的成绩
myarray[1] = 80; //存储第2个人的成绩
myarray[2] = 90; //存储第3个人的成绩
myarray[3] = 77; //存储第4个人的成绩
myarray[4] = 59; //存储第5个人的成绩

注意： 数组每个值有一个索引号，从 0 开始。

我们还可以用简单的方法创建上面的数组和赋值：

第一种方法：

var myarray = new Array(66, 80, 90, 77, 59); //创建数组同时赋值

第二种方法：

var myarray = [66, 80, 90, 77, 59]; //直接输入一个数组（称 “字面量数组”）

注意： 数组存储的数据可以是任何类型（数字、字符、布尔值等）

3.4 向数组增加元素

上一节中，我们使用 myarray 变量存储了 5 个人的成绩，现在多出一个人的成绩，如何存储呢？

只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。

myarray[5] = 88; //使用一个新索引，为数组增加一个新元素

3.5 使用数组元素

数组中的每个值有一个索引号，从 0 开始，如下图， myarray 变量存储 6 个人的成绩：

要得到一个数组元素的值，只需引用数组变量并提供一个索引，如：

第一个人的成绩表示方法：myarray[0]
第三个人的成绩表示方法：myarray[2]

3.6 数组属性 length

如果我们想知道数组的大小，只需引用数组的一个属性 length 。Length 属性表示数组的长度，即数组中元素的个数。

语法：

myarray.length; //获得数组myarray的长度

注意： 因为数组的索引总是由 0 开始，所以一个数组的上下限分别是： 0 和 length - 1 。如数组的长度是 5 ，数组的上下限分别是 0 和 4 。

var arr = [55, 32, 5, 90, 60, 98, 76, 54]; //包含8个数值的数组arr 
document.write(arr.length); //显示数组长度8
document.write(arr[7]); //显示第8个元素的值54

同时， JavaScript 数组的 length 属性是可变的，这一点需要特别注意。

arr.length = 10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10

数组随元素的增加，长度也会改变，如下：

var arr = [98, 76, 54, 56, 76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15] = 34;  //增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16

3.7 二维数组

一维数组，我们看成一组盒子，每个盒子只能放一个内容。

myarray[ ]

二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。

myarray[ ][ ]

注意： 二维数组的两个维度的索引值也是从 0 开始，两个维度的最后一个索引值为长度 -1 。

二维数组的定义方法一

var myarr = new Array();  //先声明一维 
for(var i = 0; i < 2; i++){   //一维长度为2
  myarr[i] = new Array();  //再声明二维 
  for(var j = 0; j < 3; j++){   //二维长度为3
    myarr[i][j] = i + j;   // 赋值，每个数组元素的值为i+j
  }
}

将上面二维数组，用表格的方式表示：

2. 二维数组的定义方法二

var Myarr = [[0, 1, 2 ], [1, 2, 3]]

3. 赋值

myarr[0][1] = 5; //将5的值传入到数组中，覆盖原有值。

说明： myarr[0][1] ，0 表示表的行，1 表示表的列。

4 流程控制语句

4.1 if 语句

if 语句是基于条件成立才执行相应代码时使用的语句。

语法：

if ( 条件 )
{ 条件成立时执行代码 }

注意：if 小写，大写字母（IF）会出错！

假设你应聘 web 前端技术开发岗位，如果你会 HTML 技术，你面试成功，欢迎加入公司。代码表示如下：

<script type="text/javascript">
  var mycarrer = "HTML";
  if (mycarrer == "HTML")
  {
    document.write("你面试成功，欢迎加入公司。");
  }
</script>

if...else 语句是在指定的条件成立时执行代码，在条件不成立时执行 else 后的代码。

语法：

if( 条件 )
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

假设你应聘 web 前端技术开发岗位，如果你会 HTML 技术，你面试成功，欢迎加入公司，否则你面试不成功，不能加入公司。代码表示如下：

<script type="text/javascript">
  var mycarrer = "HTML"; //mycarrer变量存储技能
  if (mycarrer == "HTML")
    { document.write("你面试成功，欢迎加入公司。");  }
  else  //否则，技能不是HTML
    { document.write("你面试不成功，不能加入公司。");}
</script>

要在多组语句中选择一组来执行，使用 if..else 嵌套语句。

语法：

if ( 条件1 )
{ 条件1成立时执行的代码 }
else if ( 条件2 )
{ 条件2成立时执行的代码 }
...
else if ( 条件n )
{ 条件n成立时执行的代码 }
else
{ 条件1、2至n不成立时执行的代码 }

4.2 switch 语句

当有很多种选项的时候，switch 比 if else 使用更方便。

语法：

switch(表达式)
{
  case 值1:
  执行代码块 1
  break;
  case 值2:
  执行代码块 2
  break;
  ...
  case 值n:
  执行代码块 n
  break;
  default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}

语法说明：

Switch 必须赋初始值，值与每个 case 值匹配。满足执行该 case 后的所有语句，并用 break 语句来阻止运行下一个 case 。如所有 case 值都不匹配，执行 default 后的语句。

假设评价学生的考试成绩，10分满分制，我们按照每一分一个等级将成绩分等，并根据成绩的等级做出不同的评价。代码如下：

执行结果：

评语: 及格，加油!

注意：记得在 case 所执行的语句后添加上一个 break 语句。否则就直接继续执行下面的 case 中的语句，看以下代码：

执行结果：

评语: 继续努力!
评语: 及格，加油!
评语: 凑合，奋进
评语: 很棒，很棒
评语: 高手，大牛

在上面的代码中，没有 break 停止语句，如果成绩是 4 分，则 case 5 后面的语句将会得到执行，同样，case 6、7 - 10 后面的语句都会得到执行。

4.3 for 循环

很多事情不只是做一次，要重复做。如打印 10 份试卷，每次打印一份，重复这个动作，直到打印完成。这些事情，我们使用循环语句来完成，循环语句，就是重复执行一段代码。

for 语句结构：

for (初始化变量; 循环条件; 循环迭代)
{     
    循环语句 
}

假如，一个盒子里有 6 个球，我们每次取一个，重复从盒中取出球，直到球取完为止。

<script type="text/javascript">
var num = 1;
for (num = 1; num <= 6; num++)  //初始化值；循环条件；循环后条件值更新
{
	document.write("取出第"+num+"个球<br />");
}
</script>

结果：

执行思路：

4.4 while 循环

和 for 循环有相同功能的还有 while 循环，while 循环重复执行一段代码，直到某个条件不再满足。

while 语句结构：

while( 判断条件 )
{
    循环语句
}

使用 while 循环，完成从盒子里取球的动作，每次取一个，共 6 个球。

<script type="text/javascript">
var num = 0;  //初始化值
while (num <= 6)   //条件判断
{
  document.write("取出第"+num+"个球<br />");
  num = num + 1;  //条件值更新
}
</script>

4.5 do...while 循环

do while 结构的基本原理和 while 结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。

do...while 语句结构：

do
{
    循环语句
}
while ( 判断条件 )

我们试着输出 5 个数字。

<script type="text/javascript">
   num = 1;
   do
   {
     document.write("数值为:" + num + "<br />");
     num++; //更新条件
   }
   while (num <= 5)
</script>

执行结果：

执行思路：

4.5 退出循环 break

在 while、for、do...while、while 循环中使用 break 语句退出当前循环，直接执行后面的代码。

格式如下：

for (初始条件; 判断条件; 循环后条件值更新)
{
  if (特殊情况)
  { break; }
  循环代码
}

当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出 10 个数，如果数值为 5 ，就停止输出。

执行结果：

注：当 num=5 的时候循环就会结束，不会输出后面循环的内容。

4.6 继续循环 continue

continue 的作用是仅仅跳过本次循环，而整个循环体继续执行。

语句结构：

for (初始条件; 判断条件; 循环后条件值更新)
{
  if ( 特殊情况 )
  { continue; }
  循环代码
}

上面的循环中，当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会受到影响。好比输出 10 个数字，如果数字为 5 就不输出了。

执行结果：

注：上面的代码中，num=5 的那次循环将被跳过。

5 函数

5.1 什么是函数

函数的作用，可以写一次代码，然后反复地重用这个代码。

如：我们要完成多组数和的功能。

var sum;   
sum = 3 + 2;
alert(sum);

sum = 7 + 8 ;
alert(sum); 

....  //不停重复两行代码

如果要实现 8 组数的和，就需要 16 行代码，实现的越多，代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。

使用函数完成：

function add2(a,b){
  sum = a + b;
  alert(sum);
} //  只需写一次就可以

add2(3,2);
add2(7,8);
....  //只需调用函数就可以

5.2 定义函数

定义一个函数：

function 函数名( )
{
     函数体;
}

function 定义函数的关键字， “函数名” 你为函数取的名字， “函数体” 替换为完成特定功能的代码。

我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字： “add2” ，代码如下：

<script type="text/javascript">
  function add2(){
    sum = 3 + 2;
    alert(sum);
  }
  add2();
</script>

结果：

5.3 函数调用

函数定义好后，是不能自动执行的，需要调用它，直接在需要的位置写函数名。

第一种情况：在 <script> 标签内调用。

<script type="text/javascript">
	function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
    add2(); //调用函数，直接写函数名。
</script>

第二种情况：在HTML文件中调用，如通过点击按钮后调用定义好的函数。

<html>
  <head>
    <script type="text/javascript">
      function add2()
      {
         sum = 5 + 6;
         alert(sum);
      }
    </script>
  </head>
  <body>
    <form>
      <input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件，直接写函数名
    </form>
  </body>
</html>

5.4 有参数的函数

上节中 add2() 函数不能实现任意指定两数相加。其实，定义函数还可以如下格式：

function 函数名 (参数1, 参数2)
{
     函数代码
}

注意：参数可以多个，根据需要增减参数个数。参数之间用逗号 , 隔开。

按照这个格式，函数实现任意两个数的和应该写成：

function add2(x, y)
{
   sum = x + y;
   document.write(sum);
}

x 和 y 则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。

例如，add2(3，4) 会求 3 + 4 的和， add2(60, 20) 则会求出 60 和 20 的和。

5.5 返回值的函数

思考：上一节函数中，通过 "document.write" 把结果输出来，如果想对函数的结果进行处理怎么办呢？

我们只要把 "document.write(sum)" 这行改成如下代码：

function add2(x, y)
{
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
}

还可以通过变量存储调用函数的返回值，代码如下：

result = add2(3, 4); //语句执行后,result变量中的值为7。

注意：函数中参数和返回值不只是数字，还可以是字符串等其它类型。

6 事件响应与交互

6.1 什么是事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件表：

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本内容改变事件
onselect	文本框内容被选中事件
onfocus	光标聚集
onblur	光标移开
onload	网页导入
onunload	关闭网页

6.2 鼠标单击事件 onclick

onclick 是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时 onclick 事件调用的程序块就会被执行，通常与按钮一起使用。

比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数 add2() 。代码如下：

<html>
  <head>
   <script type="text/javascript">
      function add2(){
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("两数和为:"+sum);  }
   </script>
  </head>
  <body>
    <form>
      <input name="button" type="button" value="点击提交" onclick="add2()" />
    </form>
  </body>
</html>

注意：在网页中，如使用事件，就在该元素中设置事件属性。

6.3 鼠标经过事件 onmouseover

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发 onmouseover 事件，并执行 onmouseover 事件调用的程序。

现实鼠标经过 "确定" 按钮时，触发 onmouseover 事件，调用函数 info() ，弹出消息框，代码如下:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> onmouseover </title>
    <script type="text/javascript">
      function info() {
        confirm("请输入姓名后，再单击确定!"); 
      }
    </script>
  </head>
  <body>
    <form>
      密码:<input name="password" type="text" >
      <input name="确定" type="button" value="确定" onmouseover="info()"/>
    </form>
  </body>
</html>

运行结果：

6.4 鼠标移开事件 onmouseout

鼠标移开事件，当鼠标移开当前对象时，执行 onmouseout 调用的程序。

当把鼠标移动到 "登录" 按钮上，然后再移开时，触发 onmouseout 事件，调用函数 message() ，代码如下：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> onmouseout </title>
    <script type="text/javascript">
      function message() {
        confirm("不要离开，只要输入密码，再单击登录，就ok了!"); 
      }
    </script>
  </head>
  <body>
    <form>
      密码:<input name="password" type="text" >
      <input name="确定" type="button" value="确定" onmouseout="message()"/>
      <!-- 当移开登录按钮，触发onmouseout="message()" -->
    </form>
  </body>
</html>

运行结果：

6.5 光标聚焦事件 onfocus

当网页中的对象获得聚点时，执行 onfocus 调用的程序就会被执行。

如下代码，当将光标移到文本框内时，即焦点在文本框内，触发 onfocus 事件，并调用函数 message() 。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv"Content-Type" content="text/html; charset=utf-8">
    <title> onfocus </title>
    <script type="text/javascript">
      function message() {
        alert('请在此输入姓名！');
      }
    </script>
  </head>
  <body>
    <form>
      姓名：<input name="username" type="text" value="请输入姓名！" onfocus="message()">
      <!-- 当光标在文本框内时（即文本框得到焦点），调用message()函数 -->
    </form>
  </body>
</html>

运行结果：

6.6 失焦事件 onblur

onblur 事件与 onfocus 是相对事件，当光标离开当前获得聚焦对象的时候，触发 onblur 事件，同时执行被调用的程序。

如下代码，网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发 onblur 事件，并调用函数 message() 。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv"Content-Type" content="text/html; charset=utf-8">
    <title> onblur </title>
    <script type="text/javascript">
      function message() {
        alert('请确定已输入用户名后，在离开！');
      }
    </script>
  </head>
  <body>
    <form>
      用户名：<input name="username" type="text" value="请输入用户名！" onblur="message()" />
      密码：<input name="password" type="text" value="请输入密码！" />
    </form>
  </body>
</html>

运行结果：

6.7 内容选中事件 onselect

选中事件，当文本框或者文本域中的文字被选中时，触发 onselect 事件，同时调用的程序就会被执行。

如下代码,当选中用户文本框内的文字时，触发 onselect 事件，并调用函数 message() 。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv"Content-Type" content="text/html; charset=utf-8">
    <title> onselect </title>
    <script type="text/javascript">
      function message() {
        alert('您触发了选中事件！');
      }
    </script>
  </head>
  <body>
    <form>
      姓名：<input name="username" type="text" value="请输入用户名！" onselect="message()">
      <!-- 当选中用户文本框内的文字时，触发onselect事件 -->
    </form>
  </body>
</html>

运行结果：

6.8 文本框内容改变事件 onchange

通过改变文本框的内容来触发 onchange 事件，同时执行被调用的程序。

如下代码，当用户将文本框内的文字改变后，弹出对话框 “您改变了文本内容！” 。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv"Content-Type" content="text/html; charset=utf-8">
    <title> onfocus </title>
    <script type="text/javascript">
      function message() {
        alert('您改变了文本内容！');
      }
    </script>
  </head>
  <body>
    <form>
      用户：<input name="username" type="text" value="请输入姓名！" onchange="message()">
      <!-- 当改变用户文本框内文字后，触发onchange事件 -->
    </form>
  </body>
</html>

运行结果：

6.9 加载事件 onload

事件会在页面加载完成后，立即发生，同时执行被调用的程序。

注意：

加载页面时，触发 onload 事件，事件写在 <body> 标签内。
此节的加载页面，可理解为打开一个新页面时。

如下代码，当加载一个新页面时，弹出对话框 “加载中，请稍等…” 。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv"Content-Type" content="text/html; charset=utf-8">
    <title> onload </title>
    <script type="text/javascript">
      function message() {
        alert('加载中，请稍等...');
      }
    </script>
  </head>
  <body onload="message()">
    欢迎学习 JavaScript 。
  </body>
</html>

运行结果：

6.10 卸载事件 onunload

当用户退出页面时（页面关闭、页面刷新等），触发 onunload事件，同时执行被调用的程序。

注意：不同浏览器对 onunload 事件支持不同。

如下代码，当退出页面时，弹出对话框 “您确定离开该网页吗？” 。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv"Content-Type" content="text/html; charset=utf-8">
    <title> onunload </title>
    <script type="text/javascript">
      window.onunload = onunload_message;
      function onunload_message() {
        alert('您确定离开该网页吗？');
      }
    </script>
  </head>
  <body>
    欢迎学习 JavaScript 。
  </body>
</html>

运行结果：（IE浏览器）

7 JavaScript 内置对象

JavaScript 中的所有事物都是对象，如：字符串、数值、数组、函数等，每个对象带有属性和方法。

**对象的属性：**反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；

**对象的方法：**能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；

JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：

var objectName = new Array(); //使用new关键字定义对象

或者

var objectName = [];

访问对象属性的语法：

objectName.propertyName

如使用 Array 对象的 length 属性来获得数组的长度：

var myarray = new Array(6); //定义数组对象
var myl = myarray.length; //访问数组长度length属性

以上代码执行后，myl 的值将是：6

访问对象方法的语法：

objectName.methodName()

如使用 string 对象的 toUpperCase() 方法来将文本转换为大写：

var mystr = "Hello world!"; //创建一个字符串
var request = mystr.toUpperCase(); //使用字符串对象方法

以上代码执行后，request 的值是：HELLO WORLD!

7.1 Date 日期对象

日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。

定义一个时间对象：

var Udate = new Date();

注意：使用关键字 new，Date() 的首字母必须大写。

使 Udate 成为日期对象，并且已有初始值：当前时间（当前电脑系统时间）。

如果要自定义初始值，可以用以下方法：

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

我们最好使用下面介绍的 “方法” 来严格定义时间。

访问方法语法：

dateObject.method()

Date 对象中处理时间和日期的常用方法：

FullYear 年 Month 月 Date 日

返回/设置年份的方法

get/setFullYear() 返回/设置年份，用四位数表示。

var mydate = new Date(); //当前时间2014年3月6日
document.write(mydate+"<br>"); //输出当前时间
document.write(mydate.getFullYear()+"<br>"); //输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。

**注意：**不同浏览器， mydate.setFullYear(81) 结果不同，年份被设定为 0081 或 81 两种情况。

结果：

Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800

注意:

结果格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)
不同浏览器，时间格式有差异。

返回星期方法

getDay() 返回星期，返回的是 0 - 6 的数字，0 表示星期天。如果要返回相对应 “星期” ，通过数组完成，代码如下：

<script type="text/javascript">
  var mydate = new Date(); //定义日期对象
  var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; //定义数组对象,给每个数组项赋值
  var mynum = mydate.getDay(); //返回值存储在变量mynum中
  document.write(mydate.getDay()); //输出getDay()获取值
  document.write("今天是："+ weekday[mynum]); //输出星期几
</script>

以上代码是在2014年3月7日，星期五运行。

结果：

5
今天是：星期五

返回/设置时间的方法

get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。

如果将目前日期对象的时间推迟 1 小时，代码如下：

<script type="text/javascript">
  var mydate = new Date();
  document.write("当前时间：" + mydate + "<br/>");
  mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
  document.write("推迟一小时时间：" + mydate);
</script>

结果：

当前时间：Thu Mar 6 11:46:27 UTC+0800 2014

推迟一小时时间：Thu Mar 6 12:46:27 UTC+0800 2014

注意：

一小时 60 分，一分 60 秒，一秒 1000 毫秒
时间推迟 1 小时，就是： x.setTime(x.getTime() + 60 * 60 * 1000);

7.2 String 字符串对象

在之前的学习中已经使用字符串对象了，定义字符串的方法就是直接赋值。比如：

var mystr = "I love JavaScript!"

定义 mystr 字符串后，我们就可以访问它的属性和方法。

访问字符串对象的属性 length ：

stringObject.length; //返回该字符串的长度。

例如：

var mystr = "Hello World!";
var myl = mystr.length;

以上代码执行后，myl 的值将是：12

访问字符串对象的方法：

使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：

var mystr="Hello world!";
var mynum=mystr.toUpperCase();

以上代码执行后，mynum 的值是：HELLO WORLD!

同时，使用 String 对象的 toLowerCase() 方法来将字符串小写字母转换为大写

返回指定位置的字符

charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。

语法：

stringObject.charAt(index)

参数说明：

index 表示字符串中某个位置的数字，即字符在字符串中的下标。这个参数不能为空。

注意：

字符串中第一个字符的下标是 0 。最后一个字符的下标为字符串长度减一（string.length - 1）。
如果参数 index 不在 0 与 string.length - 1 之间，该方法将返回一个空字符串。

如：在字符串 "I love JavaScript!" 中，返回位置 2 的字符：

<script type="text/javascript">
  var mystr = "I love JavaScript!"
  document.write(mystr.charAt(2));
</script>

注意：一个空格也算一个字符。

以上代码的运行结果：

返回指定的字符串首次出现的位置

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

语法：

stringObject.indexOf(substring, startpos)

参数说明：

substring 表示规定需检索的字符串，不可为空。

startpos 表示规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1 。如省略该参数，则将从字符串的首字符开始检索。

说明：

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
可选参数，从 stringObject 的 startpos 位置开始查找 substring，如果没有此参数将从 stringObject 的开始位置查找。
如果找到一个 substring ，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

注意：

indexOf() 方法区分大小写。
如果要检索的字符串值没有出现，则该方法返回 -1。

例如：对 "I love JavaScript!" 字符串内进行不同的检索：

<script type="text/javascript">
  var str = "I love JavaScript!"
  document.write(str.indexOf("I") + "<br />");
  document.write(str.indexOf("v") + "<br />");
  document.write(str.indexOf("v", 8));
</script>

以上代码的输出：

0
4
9

字符串分割 split()

split() 方法将字符串分割为字符串数组，并返回此数组。

语法：

stringObject.split(separator, limit)

参数说明：

separator 从该参数指定的地方分割 stringObject。此参数不可省略。

limit 可选参数，分割的次数，如设置该参数，返回的子串不会多于这个参数指定的数组，如果无此参数为不限制次数。

注意： 如果把空字符串 '' 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

我们将按照不同的方式来分割字符串：

使用指定符号分割字符串，代码如下：

var mystr = "www.juejin.cn";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");

运行结果：

www,juejin,cn
www,juejin

将字符串分割为字符，代码如下：

document.write(mystr.split("")+"<br>");
document.write(mystr.split("", 5));

运行结果：

w,w,w,.,j,u,e,j,i,n,.,c,n
w,w,w,.,j

提取子串 substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法：

stringObject.substring(startPos, stopPos)

参数说明：

startPos 必须。一个非负的整数，开始位置。

stopPos 可选。一个非负的整数，结束位置，如果省略该参数，那么返回的子串会一直到字符串对象的结尾。

注意：

返回的内容是从 start 开始（包含 start 位置的字符）到 stop - 1 处的所有字符，其长度为 stop 减 start。
如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

使用 substring() 从字符串中提取字符串，代码如下：

<script type="text/javascript">
  var mystr = "I love JavaScript";
  document.write(mystr.substring(7));
  document.write(mystr.substring(2, 6));
</script>

运行结果：

JavaScript
love

提取指定数目的字符 substr()

substr() 方法从字符串中提取从 startPos 位置开始的指定数目的字符串。

语法：

stringObject.substr(startPos, length)

参数说明：

startPos 必须。要提取的子串的起始位置。必须是数值。

length 可选。提取字符串的长度。如果省略，返回从 stringObject 的开始位置 startPos 到 stringObject 的结尾的字符。

注意：

如果参数 startPos 是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
如果 startPos 为负数且绝对值大于字符串长度，startPos 为 0 。

使用 substr() 从字符串中提取一些字符，代码如下：

<script type="text/javascript">
  var mystr = "I love JavaScript!";
  document.write(mystr.substr(7));
  document.write(mystr.substr(2,4));
</script>

运行结果：

JavaScript!
love

7.3 Math 对象

Math 对象，提供对数据的数学计算。

使用 Math 的属性和方法，代码如下：

<script type="text/javascript">
  var mypi = Math.PI; 
  var myabs = Math.abs(-15);
  document.write(mypi);
  document.write(myabs);
</script>

运行结果：

3.141592653589793
15

注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与 Date，String 对象的区别。

Math 对象属性

Math 对象方法

向上取整 ceil()

ceil() 方法可对一个数进行向上取整。

语法：

Math.ceil(x)

参数说明：

x 必需。必须是一个数值。

注意：它返回的是大于或等于 x ，并且与 x 最接近的整数。

我们将把 ceil() 方法运用到不同的数字上，代码如下：

<script type="text/javascript">
  document.write(Math.ceil(0.8) + "<br />")
  document.write(Math.ceil(6.3) + "<br />")
  document.write(Math.ceil(5) + "<br />")
  document.write(Math.ceil(3.5) + "<br />")
  document.write(Math.ceil(-5.1) + "<br />")
  document.write(Math.ceil(-5.9))
</script>

运行结果：

向下取整 floor()

floor() 方法可对一个数进行向下取整。

语法：

Math.floor(x)

参数说明：

x 必需。必须是一个数值。

注意：返回的是小于或等于 x ，并且与 x 最接近的整数。

我们将在不同的数字上使用 floor() 方法，代码如下：

<script type="text/javascript">
  document.write(Math.floor(0.8)+ "<br>")
  document.write(Math.floor(6.3)+ "<br>")
  document.write(Math.floor(5)+ "<br>")
  document.write(Math.floor(3.5)+ "<br>")
  document.write(Math.floor(-5.1)+ "<br>")
  document.write(Math.floor(-5.9))
</script>

运行结果：

四舍五入 round()

round() 方法可把一个数字四舍五入为最接近的整数。

语法：

Math.round(x)

参数说明：

x 必需。必须是数字。

注意：

返回与 x 最接近的整数。
对于 0.5 ，该方法将进行上舍入。（ 5.5 将舍入为 6 ）

3. 如果 x 与两侧整数同等接近，则结果接近 +∞ 方向的数字值。（如 -5.5 将舍入为 -5；-5.52 将舍入为 -6），如下图：

把不同的数舍入为最接近的整数,代码如下：

<script type="text/javascript">
  document.write(`Math.round(1.6)` + "<br>");
  document.write(`Math.round(2.5)` + "<br>");
  document.write(`Math.round(0.49)` + "<br>");
  document.write(`Math.round(-6.4)` + "<br>");
  document.write(`Math.round(-6.6)`);
</script>

运行结果：

随机数 random()

random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1）之间的一个随机数。

语法：

Math.random();

注意：返回一个大于或等于 0 但小于 1 的符号为正的数字值。

我们取得介于 0 到 1 之间的一个随机数，代码如下：

<script type="text/javascript">
  document.write(Math.random());
</script>

运行结果：

0.190305486195328

注意：因为是随机数，所以每次运行结果不一样，但是 0 ~ 1 的数值。

获得 0 ~ 10 之间的随机数，代码如下：

<script type="text/javascript">
  document.write((Math.random())*10);
</script>

运行结果：

8.72153625893887

7.4 Array 数组对象

数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个 “下标” ，用来表示它在数组中的位置，是从零开始的。

数组定义的方法：

定义了一个空数组：

var  数组名 = new Array();

定义时指定有 n 个空元素的数组：

var 数组名 = new Array(n);

定义数组的时候，直接初始化数据：

var  数组名 = [<元素1>, <元素2>, <元素3>...];

我们定义 myArray 数组，并赋值，代码如下：

var myArray = [2, 8, 6];

说明：定义了一个数组 myArray ，里边的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

数组元素使用：

数组名[下标] = 值;

注意：数组的下标用方括号括起来，从 0 开始。

数组属性：

length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。

数组方法：

数组连接 concat()

concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。

语法：

arrayObject.concat(array1, array2, ..., arrayN)

参数说明：

array1 要连接的第一个数组

arrayN 第 N 个数组

注意：该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

我们创建一个数组，将把 concat() 中的参数连接到数组 myarr 中，代码如下：

<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya); 
</script>

运行结果：

1,2,3,4,5
1,2,3

我们创建了三个数组，然后使用 concat() 把它们连接起来，代码如下：

<script type="text/javascript">
  var mya1 = new Array("hello!")
  var mya2 = new Array("I","love");
  var mya3 = new Array("JavaScript","!");
  var mya4 = mya1.concat(mya2, mya3);
  document.write(mya4);
</script>

运行结果：

hello!,I,love,JavaScript,!

指定分隔符连接数组元素 join()

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

语法：

arrayObject.join(separator)

参数说明:

separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

注意：返回一个字符串，该字符串把数组中的各个元素串起来，用 separator 置于元素与元素之间。这个方法不影响数组原本的内容。我们使用 join() 方法，将数组的所有元素放入一个字符串中，代码如下：

<script type="text/javascript">
  var myarr = new Array(3);
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join());
</script>

运行结果：

I,love,JavaScript

我们将使用分隔符来分隔数组中的元素，代码如下：

<script type="text/javascript">
  var myarr = new Array(3);
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join("."));
</script>

运行结果：

I.love.JavaScript

颠倒数组元素顺序 reverse()

reverse() 方法用于颠倒数组中元素的顺序。

语法：

arrayObject.reverse()

注意：该方法会改变原来的数组，而不会创建新的数组。

定义数组 myarr 并赋值，然后颠倒其元素的顺序：

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "1"
  myarr[1] = "2"
  myarr[2] = "3"
  document.write(myarr + "<br />")
  document.write(myarr.reverse())
</script>

运行结果：

1,2,3
3,2,1

选定元素 slice()

slice() 方法可从已有的数组中返回选定的元素。

语法：

arrayObject.slice(start, end)

参数说明：

start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

说明：

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
该方法并不会修改数组，而是返回一个子数组。

注意：

可使用负值从数组的尾部选取元素。
如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
String.slice() 与 Array.slice() 相似。

我们将创建一个新数组，然后从其中选取的元素，代码如下：

<script type="text/javascript">
  var myarr = new Array(1,2,3,4,5,6);
  document.write(myarr + "<br>");
  document.write(myarr.slice(2,4) + "<br>");
  document.write(myarr);
</script>

运行结果：

1,2,3,4,5,6
3,4
1,2,3,4,5,6

数组排序 sort()

sort() 方法使数组中的元素按照一定的顺序排列。

语法：

arrayObject.sort(methodFunction)

参数说明：

methodFunction 可选。规定排序顺序。必须是函数。写函数名就行，不用带括号。

如果不指定 methodFunction ，则按 unicode 码顺序排列。
如果指定 methodFunction，则按其所指定的排序方法排序。

myArray.sort(sortMethod);

注意：方法函数 methodFunction要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若返回值 <= -1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值 > -1 && < 1，则表示 A 和 B 具有相同的排序顺序。
若返回值 >= 1，则表示 A 在排序后的序列中出现在 B 之后。

使用 sort() 将数组进行排序，代码如下：

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

运行结果：

Hello,JavaScript,John,love
1,100,16,50,6,80

注意：上面的代码没有按照数值的大小对数字进行排序。

如要实现这一点，就必须使用一个排序函数，代码如下：

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

运行结果：

80,16,50,6,100,1
1,6,16,50,80,100

8 浏览器对象

8.1 window 对象

window 对象是 BOM（Browser Objec Model）的核心，window 对象指当前的浏览器窗口。

window 对象方法：

注意：在初识 JavaScript 中，已讲解了部分属性，window 对象重点讲解计时器。

8.2 JavaScript 计时器

在 JavaScript 中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

计时器类型：

一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器方法：

方法	说明
setTimeout()	指定的延迟时间之后来执行代码
clearTimeout()	取消setTimeout()设置
setInterval()	每隔指定的时间执行代码
clearInterval()	取消setInterval()

计时器 setInterval()

在执行时，从载入页面后每隔指定的时间执行代码。

语法：

setInterval(代码,交互时间);

参数说明：

代码：要调用的函数或要执行的代码串。
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值：

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式（假设有一个clock()函数）：

setInterval("clock()",1000)
// or
setInterval(clock,1000)

我们设置一个计时器，每隔 100 毫秒调用 clock() 函数，并将时间显示出来，代码如下:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>计时器</title>
    <script type="text/javascript">
      var int = setInterval(clock, 100)
      function clock() {
        var time = new Date();
        document.getElementById("clock").value = time;
      }
    </script>
  </head>
  <body>
    <form>
      <input type="text" id="clock" size="50" />
    </form>
  </body>
</html>

如果想要显示 hh:mm:ss 的格式，可以使用如下 Date() 方法：

var attime;
  function clock(){
    var time = new Date();          
    attime = time.getHours()+':'+time.getMinutes()+':'+time.getSeconds();
    document.getElementById("clock").value = attime;
  }
  var int=setInterval(clock,100);

取消计时器 clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明：

id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>计时器</title>
    <script type="text/javascript">
      function clock(){
        var time = new Date();                     
        document.getElementById("clock").value = time;
      }
      // 每隔100毫秒调用clock函数，并将返回值赋值给i
      var i = setInterval("clock()",100);
    </script>
  </head>
  <body>
    <form>
      <input type="text" id="clock" size="50"  />
      <input type="button" value="Stop" onclick="clearInterval(i)"  />
    </form>
  </body>
</html>

计时器 setTimeout()

setTimeout() 计时器，在载入后延迟指定时间后，去执行一次表达式，仅执行一次。

语法：

setTimeout(代码,延迟时间);

参数说明：

代码：要调用的函数或要执行的代码串。
延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

例：当我们打开网页 3 秒后，在弹出一个提示框

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      setTimeout("alert('Hello!')", 3000 );
    </script>
  </head>
  <body>
  </body>
</html>

当按钮 start 被点击时，setTimeout() 调用函数，在 5 秒后弹出一个提示框。

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      function tinfo(){
        var t = setTimeout("alert('Hello!')",5000);
      }
    </script>
  </head>
  <body>
    <form>
      <input type="button" value="start" onClick="tinfo()">
    </form>
  </body>
</html>

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从 0 开始计数。

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      var num = 0;
      function numCount() {
        document.getElementById('txt').value = num;
        num = num + 1;
        setTimeout("numCount()",1000);
      }
    </script>
  </head>
  <body>
    <form>
      <input type="text" id="txt" />
      <input type="button" value="Start" onClick="numCount()" />
    </form>
  </body>
</html>

取消计时器 clearTimeout()

setTimeout() 和 clearTimeout() 一起使用，停止计时器。

语法：

clearTimeout(id_of_setTimeout)

参数说明：

id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      var num=0,i;
      function timedCount(){
        document.getElementById('txt').value=num;
        num = num + 1;
        i = setTimeout(timedCount,1000);
      }
      setTimeout(timedCount,1000);
      function stopCount(){
        clearTimeout(i);
      }
    </script>
  </head>
  <body>
    <form>
      <input type="text" id="txt">
      <input type="button" value="Stop" onClick="stopCount()">
    </form>
  </body>
</html>

8.3 History 对象

history 对象记录了用户曾经浏览过的页面（URL），并可以实现浏览器前进与后退相似导航的功能。

从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联。

语法：

window.history.[attribute|method]

注意：window可以省略。

History 对象属性

length 返回浏览器历史列表中的 URL 数量

History 对象方法

back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某一个具体的页面

使用 length 属性，当前窗口的浏览历史总长度，代码如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

返回前一个浏览的页面

back() 方法，加载 history 列表中的前一个 URL。

语法：

window.history.back();

比如，返回前一个浏览的页面，代码如下：

window.history.back();

注意：等同于点击浏览器的倒退按钮。

back() 相当于 go(-1) ，代码如下：

window.history.go(-1);

返回下一个浏览的页面

forward() 方法，加载 history 列表中的下一个 URL。

如果倒退之后，再想回到倒退之前浏览的页面，则可以使用 forward() 方法，代码如下：

window.history.forward();

注意：等价点击前进按钮。

forward() 相当于 go(1) ，代码如下：

window.history.go(1);

返回浏览历史中的其他页面

go() 方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

语法：

window.history.go(number);

参数：

number	参数说明
1	前一个，go(1) 等价于 forward()
0	当前页面
-1	后一个，go(-1) 等价于 back()
other	要访问的 URL 在 History 的列表中的相对位置

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：

window.history.go(-2);

注意：和在浏览器中单击两次后退按钮操作一样。

同理，返回当前页面之后浏览过的第三个历史页面，代码如下：

window.history.go(3);

8.4 Location 对象

location 用于获取或设置窗体的 URL ，并且可以用于解析 URL 。

语法：

location.[attribute|method]

location 对象属性图示：

location 对象属性：

例：返回完整 URL

var completeurl = location.href

location 对象方法：

8.5 Navigator 对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性：

查看浏览器的名称和版本，代码如下：

<script type="text/javascript">
   var browser = navigator.appName;
   var b_version = navigator.appVersion;
   document.write("Browser name" + browser);
   document.write("<br>");
   document.write("Browser version" + b_version);
</script>

userAgent

返回用户代理头的字符串表示（就是包括浏览器版本信息等的字符串）

语法：

navigator.userAgent

注意：没有括号！这是属性不是方法！

几种浏览器的 user_agent.：

使用 userAgent 判断使用的是什么浏览器(假设使用的是IE8浏览器)，代码如下：

function validB() { 
  var u_agent = navigator.userAgent; 
  var B_name = "Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox") > -1){ 
      B_name="Firefox"; 
  }else if(u_agent.indexOf("Chrome") > -1){ 
      B_name="Chrome"; 
  }else if(u_agent.indexOf("MSIE") > -1 && u_agent.indexOf("Trident") > -1){ 
      B_name="IE(8-10)";  
  }
    document.write("B_name:" + B_name + "<br/>");
    document.write("u_agent:" + u_agent + "<br/>"); 
}

运行结果：

8.6 Screen 对象

screen 对象用于获取用户的屏幕信息。

语法：

window.screen.attribute

对象属性：

屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。

screen.height 返回屏幕分辨率的高
screen.width 返回屏幕分辨率的宽

注意：

单位以像素计。
window.screen 对象在编写时可以不使用 window 这个前缀。

我们来获取屏幕的高和宽，代码如下:

<script type="text/javascript">
  document.write( "屏幕宽度：" + screen.width + "px<br />" );
  document.write( "屏幕高度：" + screen.height + "px<br />" );
</script>

屏幕可用的高和宽

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

注意：

不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度，代码如下：

<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>

注意：根据屏幕的不同显示值不同。

9 DOM 对象

9.1 认识 DOM

文档对象模型 DOM（Document Object Model）定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

先来看看下面代码：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>DOM</title>
  </head>
  <body>
    <h2><a href="https://www/juejin.cn">javascript DOM</a></h2>
    <p>对HTML元素进行操作，可添加、改变或移除CSS样式等</p>
    <ul>
      <li>JavaScript</li>
      <li>DOM</li>
      <li>CSS</li>
    </ul>
  </body>
</html>

将HTML代码分解为DOM节点层次图：

HTML 文档可以说由节点构成的集合，DOM 节点有：

元素节点：上图中 <html>、<body>、<p> 等都是元素节点，即标签。
文本节点：向用户展示的内容，如 <li>...</li> 中的 JavaScript、DOM、CSS 等文本。
属性节点：元素属性，如 <a> 标签的链接属性 href="http://www.juejin.cn" 。

节点属性：

遍历节点树：

以上图 ul 为例，它的父级节点 body ，它的子节点 3 个 li ，它的兄弟结点 h2、P 。

DOM操作：

注意：前两个是 document 方法。

9.2 获取节点的三种方法

getElementById() 方法

网页由标签将信息组织起来，而标签的 id 属性值是唯一的。那么在网页中，我们通过 id 先找到标签，然后进行操作。

语法：

document.getElementById("id")

看看下面代码:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>获取元素</title>
    <script>
      var mye = document.getRlementById("con"); //获取元素存储在变量 mye 中
      document.write(mye); //输出变量 mye
    </script>
  </head>
  <body>
    <h3>Hello</h3>
    <p id="con">I love JavaScript</p>
  </body>
</html>

结果：null 或 [object HTMLParagraphElement]

注：获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

getElementsByName() 方法

返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与 getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意：

1. 因为文档中的 name 属性可能不唯一，所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有 length 属性，可以和访问数组一样的方法来访问，下标从0开始。

看看下面的代码：

运行结果:

getElementsByTagName() 方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法：

document.getElementsByTagName(Tagname)

说明：

Tagname 是标签的名称，如 p、a、img 等标签名。
和数组类似也有 length 属性，可以和访问数组一样的方法来访问，所以从 0 开始。

看看下面代码，通过 getElementsByTagName() 获取节点。

三种方法的区别

以人来举例说明，人有能标识身份的身份证，有姓名，有类别（大人、小孩、老人）等。

ID 是一个人的身份证号码，是唯一的。所以通过 getElementById 获取的是指定的一个人。
Name 是他的名字，可以重复。所以通过 getElementsByName 获取名字相同的人集合。
TagName可看似某类，getElementsByTagName 获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

把上面的例子转换到HTML中，如下：

<input type="checkbox" name="hobby" id="hobby1">  音乐

input 标签就像人的类别。
name 属性就像人的姓名。
id 属性就像人的身份证。

方法总结如下：

注意：方法区分大小写

通过下面的例子（6个 name="hobby" 的复选项，两个按钮）来区分三种方法的不同：

  <input type="checkbox" name="hobby" id="hobby1">  音乐
  <input type="checkbox" name="hobby" id="hobby2">  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 
  <input type="button" value = "全选" id="button1">
  <input type="button" value = "全不选" id="button1">

document.getElementsByTagName("input")，结果为获取所有标签为 input 的元素，共 8 个。
document.getElementsByName("hobby")，结果为获取属性 name="hobby" 的元素，共 6 个。
document.getElementById("hobby6")，结果为获取属性 id="hobby6" 的元素，只有一个，"跑步"这个复选项。

9.3 元素节点的属性值

getAttribute() 方法

通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明：

elementNode：使用 getElementById() 、getElementsByTagName() 等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字。

看看下面的代码，获取 h1 标签的属性值：

运行结果：

h1标签的ID ：alink  
h1标签的title ：getAttribute()获取标签的属值

setAttribute() 方法

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name, value)

说明：

name ：要设置的属性名。
value ：要设置的属性值。

注意：

把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
类似于 getAttribute() 方法，setAttribute() 方法只能通过元素节点对象调用的函数。

9.4 节点属性

在文档对象模型（DOM）中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

一、nodeName 属性：节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

三、nodeType 属性：节点的类型，是只读的。以下常用的几种结点类型：

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

9.5 节点操作

访问子节点 childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有 length 属性。

语法：

elementNode.childNodes

注意：

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

我们来看看下面的代码：

运行结果：

IE：

UL子节点个数:3
节点类型:1

其它浏览器：

UL子节点个数:7
节点类型:3

注意:

IE 全系列、firefox、chrome、opera、safari 兼容问题
节点之间的空白符，在 firefox、chrome、opera、safari 浏览器是文本节点，所以IE是 3 ，其它浏览器是 7 ，如下图所示：

如果把代码改成这样：

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

运行结果：（IE 和其它浏览器结果是一样的）

UL子节点个数:3
节点类型:1

访问子节点的第一和最后一项

firstChild 属性返回 ‘childNodes’ 数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL 。

语法：

node.firstChild

说明：与 elementNode.childNodes[0] 是同样的效果。

lastChild 属性返回 ‘childNodes’ 数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL 。

语法：

node.lastChild

说明：与 elementNode.childNodes[elementNode.childNodes.length-1] 是同样的效果。

注意： 上一节中，我们知道 Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。

访问父结点 parentNode

获取指定节点的父节点

语法：

elementNode.parentNode

注意：父节点只能有一个。

看看下面的例子，获取 P 节点的父节点，代码如下：

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode = document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

运行结果；

parentNode 获取指点节点的父节点
DIV

访问祖节点：

elementNode.parentNode.parentNode

看看下面的代码：

<div id="text">  
  <p>
    parentNode      
    <span id="con"> 获取指点节点的祖节点</span>
  </p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.parentNode.nodeName);
</script>

运行结果：

parentNode获取指点节点的祖节点
DIV

注意：浏览器兼容问题，chrome、firefox 等浏览器标签之间的空白也算是一个文本节点。

访问兄弟节点

1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：

nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null。

注意：两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

解决问题方法：

判断节点 nodeType 是否为 1 ，如是为元素节点，跳过。

function get_nextSibling(n)
{
    var x = n.nextSibling;
    while (x && x.nodeType != 1) {
	    x = x.nextSibling;
    }
    return x;
}

完整代码：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>nextSibling</title>
  </head>
  <body>
    <ul id="u1">   
      <li id="a">javascript</li>   
      <li id="b">jquery</li>   
      <li id="c">html</li>   
    </ul>   
    <ul id="u2">   
      <li id="d">css3</li>   
      <li id="e">php</li>   
      <li id="f">java</li>   
    </ul>   
    <script type="text/javascript">
      function get_nextSibling(n) {
        var x = n.nextSibling;
        while (x && x.nodeType != 1) {
            x = x.nextSibling;
        }
        return x;
      }
    
      var x = document.getElementsByTagName("li")[0];
      document.write(x.nodeName);
      document.write(" = ");
      document.write(x.innerHTML);
    
      var y = get_nextSibling(x);
    
      if(y != null) {
        document.write("<br />nextsibling: ");
        document.write(y.nodeName);
        document.write(" = ");
        document.write(y.innerHTML);
      } else {
        document.write("<br>已经是最后一个节点");      
      }
    </script>
  </body>
</html>

运行结果:

LI = javascript
nextsibling: LI = jquery

appendChild() 插入节点

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法：

appendChild(newnode)

参数：

newnode：指定追加的节点。

我们来看看，div 标签内创建一个新的 P 标签，代码如下：

运行结果：

HTML
JavaScript
This is a new p

insertBefore() 插入节点

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode, node);

参数:

newnode：要插入的新节点。

node：指定此节点前插入节点。

我们在来看看下面代码，在指定节点前插入节点。

运行结果：

This is a new p
JavaScript
HTML

注意： otest.insertBefore(newnode,node); 也可以改为 otest.insertBefore(newnode,otest.childNodes[0]);

removeChild() 删除节点

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL 。

语法：

nodeObject.removeChild(node)

参数：

node：必需，指定需要删除的节点。

我们来看看下面代码，删除子点。

运行结果：

HTML
删除节点的内容: javascript

注意： 把删除的子节点赋值给 x，这个子节点不在 DOM 树中，但是还存在内存中，可通过 x 操作。

如果要完全删除对象，给 x 赋 null 值，代码如下：

replaceChild() 替换节点

replaceChild 实现子节点（对象）的替换。返回被替换对象的引用。

语法：

node.replaceChild (newnode,oldnew)

参数：

newnode : 必需，用于替换 oldnew 的对象。   
oldnew : 必需，被 newnode 替换的对象。

我们来看看下面的代码：

效果：将文档中的 Java 改为 JavaScript。

注意：

当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
newnode 必须先被建立。

creatElement() 创建元素节点

createElement() 方法可创建元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)

参数：

tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与 appendChild() 或 insertBefore() 方法联合使用，将元素显示在页面中。

我们来创建一个按钮，代码如下：

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   body.appendChild(input);  
 </script>

效果：在 HTML 文档中，创建一个按钮。

我们也可以使用 setAttribute 来设置属性，代码如下：

<script type="text/javascript">  
   var body = document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>

效果：在 HTML 文档中，创建一个文本框，使用 setAttribute 设置属性值。当点击这个文本框时，会弹出对话框 “This is a text!” 。

creatTextNode() 创建文本节点

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。

语法：

document.createTextNode(data)

参数：

data : 字符串值，可规定此节点的文本。

我们来创建一个 <div> 元素并向其中添加一条消息，代码如下：

运行结果：

9.6 浏览器窗口

可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法：

一、对于 Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight表示 HTML 文档所在窗口的当前高度。
document.documentElement.clientWidth表示 HTML 文档所在窗口的当前宽度。

或者

Document 对象的 body 属性对应 HTML 文档的 <body> 标签

document.body.clientHeight
document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

网页尺寸 scrollHeight

scrollHeight 和 scrollWidth ，获取网页内容高度和宽度。

一、针对 IE、Opera ：

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对 NS、FF ：

scrollHeight 是网页内容高度，不过最小值是 clientHeight 。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

注意：区分大小写

scrollHeight 和 scrollWidth 还可获取 Dom 元素中内容实际占用的高度和宽度。

网页尺寸 offsetHeight

offsetHeight 和 offsetWidth ，获取网页内容高度和宽度（包括滚动条等边线，会随窗口的显示大小改变）。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w = document.documentElement.offsetWidth || document.body.offsetWidth;
var h = document.documentElement.offsetHeight || document.body.offsetHeight;

网页卷去的距离与偏移量

我们先来看看下面的图：

scrollLeft：设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。

scrollTop：设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

注意：

区分大小写
offsetParent：布局中设置 postion 属性（Relative、Absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到 HTML 的 body 。

JavaScript 基础语法 | 前端

1 初识 JavaScript

1.1 基础知识

JavaScript 概述

JS 文本的位置

语句和符号

注释

变量初步

条件语句初步

函数初步

1.2 常用互动方法

输出内容

警告

确认

提问

打开新窗口

关闭窗口

1.3 DOM 操作

认识 DOM

通过 ID 获取元素

获取或替换元素内容

改变 HTML 样式

显示和隐藏

控制类名

2 JavaScript 基础语法

2.1 变量

2.2 表达式

2.3 + 运算符

2.4 自增自减运算符

2.5 比较运算符

2.6 逻辑运算符

2.7 运算符优先级

3 数组

3.1 什么是数组

3.2 创建数组

3.3 数组赋值

3.4 向数组增加元素

3.5 使用数组元素

3.6 数组属性 length

3.7 二维数组

4 流程控制语句

4.1 if 语句

4.2 switch 语句

4.3 for 循环

4.4 while 循环

4.5 do...while 循环

4.5 退出循环 break

4.6 继续循环 continue

5 函数

5.1 什么是函数

5.2 定义函数

5.3 函数调用

5.4 有参数的函数

5.5 返回值的函数

6 事件响应与交互

6.1 什么是事件

6.2 鼠标单击事件 onclick

6.3 鼠标经过事件 onmouseover

6.4 鼠标移开事件 onmouseout

6.5 光标聚焦事件 onfocus

6.6 失焦事件 onblur

6.7 内容选中事件 onselect

6.8 文本框内容改变事件 onchange

6.9 加载事件 onload

6.10 卸载事件 onunload

7 JavaScript 内置对象

7.1 Date 日期对象

返回/设置年份的方法

返回星期方法

返回/设置时间的方法

7.2 String 字符串对象

返回指定位置的字符

返回指定的字符串首次出现的位置

字符串分割 split()

提取子串 substring()

提取指定数目的字符 substr()

7.3 Math 对象

向上取整 ceil()

向下取整 floor()

四舍五入 round()