js初学_js代码放在html开头可以吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41035527/article/details/80455435

一.js的执行位置

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

放在<head>部分

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

放在<body>部分

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

二.变量

JavaScript-什么是变量

什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。

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

1.变量必须使用字母、下划线(_) 或者美元符($) 开始。

2.然后可以使用任意多个英文字母、数字、下划线(_) 或者美元符($ ) 组成。

3.不能使用JavaScript关键词与JavaScript保留字。

变量需要先声明再赋值，可重复赋值

判断语句 if......else

三.函数

如何定义一个函数呢？基本语法如下:

function 函数名()

{

函数代码;

}

说明:

1. function定义函数的关键字。

2. "函数名"你为函数取的名字。

3. "函数代码"替换为完成特定功能的代码。

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

function add2(){

var sum = 3 + 2;

alert(sum);

}

********************

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

第一种 : 输出内容用""括起，直接输出 "" 号内的内容。

document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。

</script>

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

var mystr="hello world!";

document.write(mystr); //直接写变量名，输出变量存储的内容。

</script>

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

var mystr="hello";

document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接

</script>

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

var mystr="hello";

document.write(mystr+"<br>");//输出hello后，输出一个换行符

document.write("JavaScript");

</script>

四.警告

JavaScript-警告（alert 消息对话框）

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

语法:

alert(字符串或变量);

看下面的代码:

var mynum = 30;

alert("hello!");

alert(mynum);

</script>

注:alert弹出消息对话框(包含一个确定按钮)。

结果:按顺序弹出消息框

注意:

1. 在点击对话框"确定"按钮前，不能进行任何其它操作。

2. 消息对话框通常可以用于调试程序。

3. alert输出内容，可以是字符串或变量，与document.write 相似。

<html>

<head>

<title>alert</title>

function rec(){

var mychar="I love JavaScript";

alert(mychar);

}

</script>

</head>

<body>

<input name="button" type="button"

="rec()" value="点击我，弹出对话框" />

</body>

</html>

JavaScript-确认（confirm 消息对话框）

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

语法:

confirm(str);

参数说明:

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

返回值:

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

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

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

<html>

<head>

<title>alert</title>

function rec(){

var mychar="I love JavaScript";

alert(mychar);

}

</script>

</head>

<body>

</body>

</html>

JavaScript-提问（prompt 消息对话框）

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

语法:

prompt(str1, str2);

参数说明：

str1: 要显示在消息对话框中的文本，不可修改

str2：文本框中的内容，可以修改

返回值:

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

2. 点击取消按钮，将返回 null

看看下面代码:

var myname=prompt("请输入你的姓名:");

if(myname!=null)

{ alert("你好"+myname); }

else

{ alert("你好 my friend."); }

JavaScript-打开新窗口（window.open）

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

语法：

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

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称：可选参数，被打开窗口的名称。

1.该名称由字母、数字和下划线字符组成。

2."_top"、"_blank"、"_self"具有特殊意义的名称。

_blank：在新窗口显示目标网页

_self：在当前窗口显示目标网页

_top：框架网页中在上部窗口中显示目标网页

3. 相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

4. name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表:

1.function Wopen(){

window.open(' http://www.imooc.com ','_blank','width=600,height=400,top=100,left=0') ;

}

2.function Wopen(){

var $newwindow = prompt("请输入网址"," http://www.baidu.com ");

if($newwindow ==" http://www.baidu.com "){

window.open($newwindow,'_blank','width=600,height=400,left=200,top=100');

}else{

alert("你没有打开窗口！");

document.write("请输入默认网址百度网"); }

}

JavaScript-关闭窗口（window.close）

close()关闭窗口

用法：

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

或

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

例如:关闭新建的窗口。

var mywin=window.open(' http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中

mywin.close();

</script>

function openWindow(){

var newwindow = confirm("是否打开新窗口？");

if (newwindow==true)

{

var open = prompt("请输入要打开的网址：");

window.open(open,'_blank','width=400,height=500,menubar=no,toolbar=no');

}

// 新窗口打开时弹出确认框，是否打开

// 通过输入对话框，确定打开的网址，默认为 http：// www.imooc.com/

//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。

五.认识DOM

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

先来看看下面代码:

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

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性 href=" http://www.imooc.com "。

看下面代码:

<a href=" http://www.imooc.com">JavaScript DOM</a>

通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

语法:

document.getElementById(“id”)

看看下面代码:

结果:null 或[ object HTMLParagraphElement]

innerHTML 属性

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

语法:

Object.innerHTML

注意:

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

2.注意书写，innerHTML区分大小写。

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

结果:

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

语法:

Object.style.property=new style;

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

基本属性表（property）:

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

看看下面的代码:

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

<p id="pcon">Hello World!</p>

var mychar = document.getElementById("pcon");

mychar. style.color="red";

mychar. style.fontSize="20";

mychar. style.backgroundColor ="blue";

</script>

显示和隐藏（display属性）

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

语法：

Object.style. display = value

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

value取值:

看看下面代码:

控制类名（className 属性）

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

语法：

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

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

六.数组

数组的表达方式：

第一步：创建数组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]; //直接输入一个数组（称 “字面量数组”）

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

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

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

一维数组的表示: myarray[ ]

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

二维数组的表示: myarray[ ][ ]

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

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

}

注意: 关于for 循环语句，请看第四章4-5 。

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

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

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

3. 赋值

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

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

多种选择（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后的语句。

七.事件

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

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

主要事件表:

鼠标单击事件( onclick ）

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

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

<html>

<head>

function add2(){

var numa,numb,sum;

numa=6;

numb=8;

sum=numa+numb;

document.write("两数和为:"+sum); }

</script>

</head>

<body>

<form>

</form>

</body>

</html>

鼠标经过事件（onmouseover）

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

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

运行结果:

鼠标移开事件（onmouseout）

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

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

运行结果:

光标聚焦事件（onfocus）

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

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

运行结果：

*****************************************************************************************

function message(){

var new2=document.getElementById("new1");

new2.style.backgroundColor="pink";

}

function message1(){

var new3=document.getElementById("new1");

// new3.style.backgroundColor="purple";

new3.removeAttribute("style");

}

</script>

</head>

<body>

请选择您的职业：<br>

<form>

失焦事件（onblur）

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

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

运行结果：

内容选中事件（onselect）

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

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

文本框内容改变事件（onchange）

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

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

运行结果：

加载事件（onload）

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

注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。

2. 此节的加载页面，可理解为打开一个新页面时。

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

运行结果：

卸载事件（onunload）

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

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

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

运行结果：（IE浏览器）

document.getElementById(“id”）.value = 1；取值：var = document.getElementById(“id”）.value；

***************************************************************************************

function count(){

var opt1 = document.getElementById('txt1').value;

var opt = document.getElementById('select').value;

var opt2 = document.getElementById('txt2').value;

var result='';

switch(opt){

case '+':

result =parseFloat(opt1) + parseFloat(opt2);

break;

case '-':

result = opt1 - opt2;

break;

case '*':

result = opt1 * opt2;

break;

defult:

result = opt1/opt2;

}

document.getElementById('fruit').value = result;

}

</script>

</head>

<body>

</select>

***************************************************************************************

八.对象

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(); //使用字符串对象方法

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日

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

访问方法语法： “<日期对象>.<方法>”

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

注意:

1.结果格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)

2. 不同浏览器，时间格式有差异。

返回星期方法

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

var mydate=new Date(); //定义日期对象

var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

//定义数组对象, 给每个数组项赋值

var mynum= mydate.getDay();/ /返回值存储在变量mynum中

document.write( mydate.getDay()); //输出 getDay()获取值

document.write("今天是：" + weekday[mynum]); //输出星期几

</script>

返回/设置时间方法

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

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

var mydate=new Date();

document.write("当前时间："+mydate+"<br>");

mydate.setTime(mydate.getTime() + 60 * 60 * 1000);

document.write("推迟一小时时间：" + mydate);

</script>

时间推迟 1 小时,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”

String 字符串对象

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

var mystr = "I love JavaScript!"

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

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

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

var mystr="Hello World!";

var myl=mystr.length;

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

访问字符串对象的方法：

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

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

var mystr="Hello world!";

var mynum=mystr.toUpperCase();

返回指定位置的字符

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

语法:

stringObject.charAt(index)

参数说明：

注意： 1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。

2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。

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

var mystr="I love JavaScript!"

document.write(mystr.charAt(2));

</script>

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

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

语法

stringObject.indexOf(substring, startpos)

参数说明：

说明：

1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。

2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。

3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

注意：1.indexOf() 方法区分大小写。

2.如果要检索的字符串值没有出现，则该方法返回 -1。

例如: 对 "I love 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>

字符串分割split()

知识讲解：

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

语法：

stringObject.split(separator,limit)

参数说明:

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

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

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

var mystr = " www.imooc.com";

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

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

运行结果:

www,imooc,com

www,imooc

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

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

document.write(mystr.split("", 5));

运行结果:

w,w,w,.,i,m,o,o,c,.,c,o,m

w,w,w,.,i

提取字符串substring()

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

语法:

stringObject.substring(startPos,stopPos)

参数说明:

注意：

1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。

2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

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

var mystr="I love JavaScript";

document.write(mystr.substring(7));

document.write(mystr.substring(2,6));

</script>

运行结果 :

JavaScript

love

Math对象

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

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

var mypi=Math.PI;

var myabs=Math.abs(-15);

document.write(mypi);

document.write(myabs);

</script>

运行结果 :

3.141592653589793

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

Math 对象属性

Math 对象方法

数组方法：

颠倒数组元素顺序reverse()

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

语法：

arrayObject.reverse()

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

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

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

var myDate = new Date();

var weekDays = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]

document.write(myDate.getFullYear() + "年" + myDate.getMonth() + "月" + myDate.getDay() + "日" + weekDays[myDate.getDay()]);

//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦

var sorceStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";

var scoreArr = sorceStr.split(";");

//从数组中将成绩撮出来，然后求和取整，并输出。

var sum = 0;

var avg = 0;

for (var i = 0; i < scoreArr.length; i++) {

sum = sum + parseInt(scoreArr[i].slice(3,5));

}

avg = sum / scoreArr.length;

document.write(parseInt(avg));

window对象

window对象是BOM的核心，window对象指当前的浏览器窗口。

window对象方法:

JavaScript 计时器

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

计时器类型：

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

间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器方法：

计时器setInterval()

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

语法:

setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

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

返回值:

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

调用函数格式(假设有一个clock()函数 ):

setInterval("clock()",1000)

或

setInterval(clock,1000)

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

<!DOCTYPE HTML>

<html>

<head>

var int=setInterval(clock, 100)

function clock(){

var time=new Date();

document.getElementById("clock").value = time;

}

</script>

</head>

<body>

<form>

</form>

</body>

var attime;

function clock(){

var time=new Date();

attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

document.getElementById("clock").value = attime;

}

setInterval(clock,100);

</script>

取消计时器clearInterval()

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

语法：

clearInterval(id_of_setInterval)

参数说明:

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

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

<!DOCTYPE HTML>

<html>

<head>

function clock(){

var time=new Date();

document.getElementById("clock").value = time;

}

// 每隔100毫秒调用clock函数，并将返回值赋值给i

var i=setInterval("clock()",100);

</script>

</head>

<body>

<form>

</form>

</body>

</html>

计时器setTimeout()

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

语法:

setTimeout(代码,延迟时间);

参数说明：

1. 要调用的函数或要执行的代码串。

2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

当我们打开网页3秒后，在弹出一个提示框，代码如下:

<!DOCTYPE HTML>

<html>

<head>

setTimeout("alert('Hello!')", 3000 );

</script>

</head>

<body>

</body>

</html>

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

<!DOCTYPE HTML>

<html>

<head>

function tinfo(){

var t=setTimeout("alert('Hello!')",5000);

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

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

取消计时器clearTimeout()

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

语法:

clearTimeout(id_of_setTimeout)

参数说明:

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

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

<!DOCTYPE HTML>

<html>

<head>

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>

</form>

</body>

</html>

History 对象

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

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

语法：

window.history.[属性|方法]

注意：window可以省略。

History 对象属性

History 对象方法

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

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);

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

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

语法：

window.history.go(number);

参数：

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

window.history.go(-2);

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

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

window.history.go(3);

Location对象

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

语法:

location.[属性|方法]

location对象属性图示:

location 对象属性：

location 对象方法:

avigator对象

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

对象属性:

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

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.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。

使用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>");

}

screen对象

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

语法：

window.screen.属性

对象属性:

认识DOM

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

先来看看下面代码:

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

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

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href=" http://www.imooc.com"。

节点属性:

遍历节点树:

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

DOM操作:

注意:前两个是document方法。

认识DOM

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

先来看看下面代码:

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

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

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href=" http://www.imooc.com"。

节点属性:

遍历节点树:

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

DOM操作:

注意:前两个是document方法。

把上面的例子转换到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"> 跑步

1. document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个。

2. document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。

3. document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。