【JavaWeb前传系列】第05章_JavaScript简明教程
【JavaWeb前传系列】第05章_JavaScript简明教程——v512工作室 编辑：玄玉
| 函数 | 数组 | 浏览器对象 | 流程控制 | 常用对象 |
| 常量 | 事件 | Window | 分支语句 | 数学对象 |
| 变量 | 常用事件 | Document | 循环语句 | 时间对象 |
| 关键字 | 数据类型 | Location | 特殊语句 | 字符串对象 |
| 运算符 | 系统函数 | History | 我的博客 | v512工作室 |
| 表达式 | 嵌入HTML中 | Navigator |
JavaScript简介：由Netscape公司开发的一种脚本语言，其编写的程序可被嵌入到HTML/XML中并直接在浏览器中解释执行
类似的还有VBScript。实际上Script本身翻译过来可以叫做脚本
所谓脚本或脚本语言是说：使用这种语言所编写的代码通常不独立的存在和运行
而是要嵌入到其它的主体中起到辅助或增强的功能
类似的：JavaScript和VBScript可以被嵌入到微软的ASP动态页面中
此时它们可以选择在客户端浏览器中解释执行，也可以被设置为在服务器端运行
JavaScript功能：①增强页面动态效果
②实现页面(浏览器)与用户之间的实时、动态的交互(JavaWeb程序员学习的重点)
JavaScript特点：脚本语言(Script Language)
解释执行(Interpreted Language)：每次运行的时直接从源代码开始转换，转换成目标码的指令再执行
相对于编译型的语言来讲，它的运行效率会低，但能够提供比较好的通用性或跨平台性
基于对象(Object Based)：JavaScript不是很纯粹的面向对象，或者说是Java的面向对象的精简版
它引入了对象、属性、方法或者说函数的体系和概念，但是又非常的不彻底
主要是为了兼顾它的简便易用性
比如说我们很少使用JavaScript来定义自己的类型、创建对象，虽然它的语法上也是支持这样做的
事件驱动(Event Driven)：用户的操作<比如鼠标点击、移动，键盘敲击>都会触发相应的事件或者说在相应的事件元组件上触发约定好的事件
然后再由系统调用事先关联好的处理代码。这个原理同JavaSE中的GUI事件处理是完全相同的
简单：灵活、简单、易学、易用。而且能够很好的解决常规问题
弱类型(Weakly Typed Language)：它的数据类型并没有特别严格的明确性的要求
比如说弱类型的语言变量声明的时候可以不指定它的类型甚至可以不经声明直接使用
看上去比较方便也容易初学者上手，但实际上给编译器和运行环境都加重了负担
因为若变量或数据类型是不确定的，在运行的过程中由赋给它的值来决定，中间还可以自由的转换
实际上不利于它空间的分配回收以及在这个数据上可以进行何种运算的合法性检查
比如说一个变量，我们不知道它是什么类型，
到时候我们到底可不可以在它上面进行加法、乘法、除法的运算
那么其实编译器或者说我们的解释运行环境实现起来是很复杂的
嵌入到HTML页面中
在HTML页面中使用<script>(这是一个HTML标记，就像<body>一样)标记嵌入脚本代码：
<script language="javascript">//或者使用type="text/javascript"
/*Javascript代码*/
</script>
说明：属性名language是约定好的，属性值javascript标明将要嵌入的脚本语言的种类是javascript
类似的也可以设定脚本语言的种类为vbscript，二者语法也非常相似
目前也有另外一个更推荐使用的属性名叫type，属性值为text/javascript。同language属性的作用完全相同
脚本区可以使用它专有的注释/**/(里面可以跨多行)
JavaScript变量名大小写是敏感的，而它的关键字、属性名大小写是不敏感的
JavaScript代码的出现位置
HTML页面主体(<body>元素)(相当于内嵌式样式表，直接出现在元素的位置，直接使用，一次性的工作)
举例：<body><script language="javascript">document.write("Hello，你好!");</script></body>
说明：document.write类似Java语言中的System.out.println
其功能是显示参数数据的值到浏览器的窗体中的当前的位置(跟该段代码出现的先后位置有关)
document是JavaScript的一个内置对象，可以直接使用，write是它的一个成员方法，我们在这里叫做函数
HTML页面头部(<head>元素)(相当于内部样式表)
举例：<head><script language="javascript">document.write("Hello，你好！");</script></head>
说明：普通的<script>代码按照它出现的位置就直接显示了
这里即使是<head>中出现的代码区中的代码，也会运行输出到前面
很显然这种做法并不是很合理
实际上在<head>中的<script>代码通常不是直接写语句做事情
而是定义函数或者定义后文中讲到的相当于Java语言中的方法
将来可以在<body>主体中被调用。这样可以实现页面范围内的代码重用
单独的外部文件中(相当于外部样式表)
<script language="javascript" src="外部脚本文件url"></script>
举例：<body><script language="javascript" src="m3.js"></script></body>
m3.js文件中的内容：document.write("Hello，你好！");
说明：代码区中没有代码。这种元素也可以称为空元素。便于多个页面间的代码重用。
补充：<body>
<script language="javascript">
/*Javascript代码*/
</script>
<script language="javascript">
/*Javascript代码*/
</script>
<script language="javascript">
/*Javascript代码*/
</script>
<body>
代码区可以有多段。实际上所有的代码区均按照它们出现的先后顺序被运行
但是多段代码区跟一段代码区在逻辑上没有什么区别，它们可以认为是一个整体
比如说前面声明的变量，后面也可以用，它的值实际上还是在的
但若重复声明它，浏览器也不会报错
数据类型
各种高级编程语言(脚本语言也勉强算是吧)都有共通的地方
就是基本语法中包括类型、变量、常量、运算符、表达式、流程控制等等都是相通的
JavaScript支持基本数据类型和对象类型(相当于Java语言中的基本数据类型和引用类型)
基本数据类型：整型、浮点型、字符型、布尔型
对象类型：内置对象(String、Math、Date)(这是最主要的三类)
浏览器对象(Window、Document、History、Forms、...)(我们可以认为它们有自己的类型，并且使用的是该类型的一个实例一个对象)
用户自定义对象(我们很少有这种需要，不需要自己定义。通常使用它的内置对象或者浏览器对象就能够满足要求)
说明：①字符型(也可以说包含了我们所习惯的字符串类型。严格来说字符串类型是一个对象类型)
②JavaScript中很少强调类型和对象的关联，因为我们会直接的使用对象，所以也习惯于管它们直接叫做对象
变量
命名规则：必须以字母、下划线("_")、或美圆符("＄")开头，后面可以跟字母、下划线、美圆符和数字
变量名区分大小写(Case-Sensitive)(这里指的是变量的名字，不是关键字。比如说A、a是不同的)
不允许使用JavaScript关键字做变量名
说明：可以简单说这里的字母就是指26个英文字母的大小写，实际上也可以采用汉语的字符，但是我们没必要搞的那么复杂
JavaScript为弱类型语言，变量声明时不指定数据类型，其具体数据类型由给其所赋的值决定
通常使用var声明变量，也可以不经声明而直接使用变量。但必须是先赋值，再取用其值
假设在JavaScript中有这样一段代码：var b;document.write(b);即只声明b而没有赋值，那么就会输出undefined
这里的undefined并不是指它没被定义过，只是说它没有被赋值而已
举例：var a;//注意A和a是不同的
var b=3.14;//声明变量的同时赋值，此时b的值是浮点型的3.14，那么此时b这个变量就是浮点型，b可以做四则运算
var c="Hello,你好";//同理，此时c是一个字符串
var d=5,e=6;//其实使用var声明变量是跟VB学来的或者说差不多的这种语法
b = c + d;//实际上实现了字符串常量和整型数值之间的连接的操作
//其结果就是Hello,你好5，那么还是一个字符串。把它赋值给b，这时b又变成了字符串类型的数据
//这种做法在Java、C、C++等强类型的语言中是难以想象的，但在这种脚本语言中确实比较方便
//我们也很难指望它们来实现非常严谨的、体系庞大的编程的任务，但是简介的任务用它们都还比较顺手
f="Welcome to JavaScript";//注意此处没有声明f的类型，变量未经声明，直接使用
document.write(b);//打印输出b，即输出Hello,你好5
document.write("<br>");//换行
document.write(f);//显示输出f的内容到浏览器的窗体中
关键字(编程语言中，一些被赋以特定的含义、并用做专门用途的单词称为关键字(Keyword)或保留字(Reserved Word))
实际上我们可以形成这样一种规律性的认识：各种高级编程语言的关键字都大同小异，
比如用来声明数据类型、标明循环、流程控制、布尔型、常量等等
编程时尽量避开使用这些可能引起混淆的或与关键字发生冲突的标识符
就是我们的变量名、方法名或者叫函数名都不要起这类的名字
JavaScript关键字列表
| break | delete | function | return | typeof |
| case | do | if | switch | var |
| catch | else | in | this | void |
| continue | false | instanceof | throw | while |
| debugger | finally | new | true | with |
| default | for | null | try |
常量
整型常量：十进制表示：3,200
十六进制表示：0x12,0X4a(这里是零X，不是欧X)
八进制表示：012,027(这里开头也是零，不是欧)
浮点型常量：3.14，2.1e3,2e4
布尔型常量：true,false
字符型常量：'a',"china",'abc'：单引号引起来的单个字符。双引号引起来的零到多个字符
但JavaScript有一种我们Java程序员很难接受的做法：就是它允许用单引号引起来多个字符
其实也是一个字符型常量
我们还是习惯于用双引号好了
转义字符常量："\n","\t","\""(\n是换行。\t是输出一个制表键，缩进一个制表位，相当于四个空格。\"是输出一个双引号)
空值常量：null
举例：var a2 = 0x12;(声明十六进制的a2并赋值)
var a3 = 012;(下面是输出a2和a3)
document.write("<br>0x12->" + a2)(显示时它们的值会自动转换成十进制，这是为了符合人们的日常习惯)
document.write("<br>012->" + a3);(各种高级编程语言在数据显示的时候都进行了类似的处理)
运算符(跟Java语言基本相同，实际上各种高级编程语言都是类似的)
|
算数运算符
|
|
逻辑运算符
|
|
比较运算符
|
|
扩展赋值运算符
|
|
位运算符
|
|
其他
|
||||||
|
+
|
加法 |
!
|
逻辑"非" |
>
|
大于 |
+=
|
a+=b<=>a=a+b; |
~
|
按位"取反" |
=
|
赋值运算符 | |||||
|
-
|
减法 |
&
|
逻辑"与" |
>=
|
大于或等于 |
-=
|
&
|
按位"与" |
?:
|
三目运算符 | ||||||
|
*
|
乘法 |
|
|
逻辑"或" |
<
|
小于 |
*=
|
|
|
按位"或" |
+、+=
|
字符串连接符 | ||||||
|
/
|
除法 |
^
|
逻辑"异或" |
<=
|
小于或等于 |
/=
|
^
|
按位"异或" | ||||||||
|
++
|
增量/单目加 |
!=
|
不等于 |
%=
|
<<
|
左移 | ||||||||||
|
--
|
减量/单目减 |
==
|
相等 |
!=、&=、|=、^=
|
>>
|
带符号右移 | ||||||||||
|
%
|
取余/求模 |
===
|
全相等 |
<<=、>>=、>>>=
|
>>>
|
无符号右移 | ||||||||||
也可以把其他任何类型的数据以字符串形式的数据进行连接操作
那么实际上连的是它们的值
全相等(===)：它比较的是两个变量的值与类型均相等
也只有在这种弱类型语言中才会出现这种情况
实际上我们很不习惯，也很少用到它
整数的处理：JavaScript也是采用补码的形式来表示整数，
所以复数的带符号和无符号右移结果是不同的，但正数是相同的
举例：整型的a的值为3和字符串类型的b的值为"3"二者做对比。
用全等号比较，它们是不等价的。若是用相等号比较的话，二者的结果还真就是等价的了
表达式(符合一定语法规则的运算符和操作数的序列)
表达式的类型和值：对表达式中操作数进行运算得到的结果称为表达式的值
表达式的值的数据类型即为表达式的类型
表达式的运算顺序：首先应按照运算符的优先级从高到低的顺序进行
优先级相同的运算符按照事先约定的结合方向进行(通常是从左到右)
var s1=3+5+"hello";//对于复杂的表达式，建议使用小括号显式的标明运算次序，增强代码可读性
document.write(s1);//输出结果：8hello
var s2="hello"+3+5;
document.write(s2);//输出结果：hello35
程序流程控制(简单的说，跟Java语言基本相同，只是有个别的差异之处)
分支语句：if-else分支语句
举例：<script language="JavaScript">
var sex = window.prompt("请输入您的性别（男/女）","");//说明①
if(sex == "男"){//说明②
document.write("先生您好！");
}else if(sex == "女"){
document.write("女士您好！");
}else{document.write("输入有误！");}</script>
说明①：有点类似于document.write。浏览器对象window代表当前窗体。
prompt是一个函数，window对象的一个方法，其功能是弹出来一个文本输入框
"请输入您的性别(男/女)"是它的提示性的文字，逗号后面的""是它缺省的初值
在这里我们不想设一个默认的初值(男/女)，所以给它一个空的字符串
说明②：这一点跟Java语言不同，JavaScript没有equals方法专门来判断字符串的等价性
那么比较数据是否等价，只是使用==号而已，比较的就是它们的值
switch分支语句
举例：<script language="JavaScript">
var month = window.prompt("请输入月份（1~12）","");//说明①
document.write(month);//说明②
var total = 0;
switch(month){
case "1": case "3": case "5": case "7": case "8": case "10": case "12":total = 31;
break;//说明③
case "4": case "6": case "9": case "11": total = 30; break;
case "2":
var year = window.prompt("2月份的天数与年份有关，请继续输入年份","2008");
if((year%4 == 0 && year%100!=0) || year%400 == 0)
total = 29;
else
total = 28; break;
default://说明④
total = -1;
}document.write("月份总天数为：" + total); </script>
说明①：month接收到的是字符串，这跟一些Java初学者喜欢使用Swing组件来接收键盘输入的这种不伦不类的做法是很类似的
说明②：这里的month实际上是一个字符串，Java语言中的switch表达式只接收int或者是整型的兼容类型，不接收String型
但JavaScript可以在switch中接收字符串
说明③：终止switch代码块的运行转而执行后面的代码
说明④：若有人输入57这种不合理的月份，就让total=-1。事实上default也可去掉，然后在定义时让total=-1，这样逻辑上是相同的
循环语句：for循环
补充：for(i=1,i<=10,i++){}：这里的i在for之前的代码中没有声明过
在这里加个var声明一下(即for(var i=1,i<=10,i++){})是可以的，那么不加var也是可以的
while循环
do-while循环
for-in循环
举例：<script language="JavaScript">
var sum = 0; var i = 0; document.write("<hr>for-in循环:" ); document.write("<ul>");
var a = new Array(3);//说明①
a[0] = "苹果"; a[1] = "香蕉"; a[2] = "杨桃";
for(var s in a){//说明②
document.write("<li>" + a[s] + "</li>");} document.write("</ul>");</script>
说明①：这是JavaScript中声明数组语法格式的三种方法中比较常用的一种
里面的三个元素此时没有赋值，那么就不可使用它，所以才会在下一行中对它们赋值
说明②：var s确实是一个中间变量。in a在数组a中。在接下来的循环体中，s相当于一个循环的下标
s实际上是字符串形式的0、1、2(还不是int型)。但具体循环几次，系统会自动检测数组有多少个元素，那它就循环几次
a[s]中s是中间变量，这一点跟Java的for-each循环就不同了
for-each里面s做为记录了当前元素的一个变量。而for-in里的这个s还相当于一个下标
补充①：for-in循环类似于Java语言中从jdk1.5开始引入的for-each增强型循环，但实际上两者是不同的
它能够用来遍历数组，我们说它是JavaScript数组中的元素
或者也可以遍历JavaScript中对象的属性，它能遍历对象所有的属性
补充②：其实也可以使用传统的for循环来遍历a数组的，我们在下面数组的部分也会有演示
特殊流程控制语句：break语句
举例：for(i=1; i<=10; i++){if(i%3 == 0)
break;//说明
document.write("<br>" + i);}
说明：如果i能被3整除的话，就执行break语句
这就意味着一旦遇到能被3整除的数将终止当前循环，后面的循环不做了。所以它只能输出1，2
continue语句
举例：for(i=1; i<=10; i++){
if(i%3 == 0)
continue;//说明
document.write("<br>" + i);}
说明：如果i能被3整除的话，跳过本次循环或者说是提前结束本次循环开始下一次循环，跳转到i++的位置
也就是说每次遇到3的整数倍的i值时，将continue。就是跳过循环体中后面还没有执行的语句开始下一次循环，转到i++
所以它的输出结果就是：1、2、4、5、7、8、10
数组(多个相同类型数据的组合，实现对这些数据的统一管理)
实际上Java语言中的数组是松散的，也可以是不同类型的数据
JavaScript数组声明方式：var a1=new Array();//里面包含零个元素，长度为零
//我们可以认为这就是Java语言中new调用构造方法或者Java语言的声明数组(new+类型+方括号)
var a2=new Array(size);//这里创建的数组规定了它的长度(即整型参数size)
var a3=new Array(v1,v2,...vn);//相当于静态初始化。后面的多个参数即给出了数组中每一个元素的值
//这并不是指定了一个多维数组，而是指定了一个一维数组里面包含的具体元素
//v1--vn中数字1--n是下标
JavaScript数组长度可变，数组对象的自动属性length标明了其长度：也就是说，我们可以声明一个数组，长度为3，但是我们可以往里面加入5个或更多的元素
当然必须先赋值后使用，那么它的长度会自动调整
若我们使用了一个声明过的变量，但没有赋过值，通常会输出undefined
数组元素访问格式为：数组名[元素下标]，有效元素下标为0～length-1
举例：<script language="JavaScript">
var a1 = new Array(2);//此处故意声明该数组长度为2
a1[0] = "中国";//但是我们用的时候却往里面加入了4个元素，下标分别为0、1、2、4
a1[1] = "法国";//按理说最后一个元素下标应该为3，可是我们故意跳跃性的使用4
a1[2] = "美国";//它的长度已经被自动撑大了，变为5个长度，可用下标是0到4
a1[4] = "德国";//但是第四个数没有赋值，所以显示输出的时候变成了undefined(未赋值)
for(var i=0;i<a1.length;i++){document.write(a1[i] + "<br>");}
var a2 = new Array(3,40,52,66,77);
for(var i=0;i<a2.length;i++){document.write(a2[i] + "<br>");}</script>
函数(Function)※(重点)※
JavaScript中的函数相当于其他编程语言中的方法(Method)或子程序(Subroutine)，是用来完成相对独立功能的一段代码的集合
定义格式：function<函数名>(<形式参数列表>){
<函数体代码>
[<return语句>]
}
补充：我们给它起个名字就叫方法名或者函数名
它需要处理数据或者它运行的时候需要外界提供给它数据，我们就可以规定它的形参列表
那么它运行之后可能有结果，我们就可以给它返回值
JavaScript函数在定义时不需要指定其返回值类型和是否有返回值
补充：因为本来我们就对类型没有什么强制性的约定或要求
那么甚至我们也不在乎或者说不必须事先标明它是不是又返回值
最后呢想返回就返回，没有值就不返回
举例：<head><script language="JavaScript">//<script>出现在<head>中说明①
function showArray(a){//说明②
document.write("<hr>数组遍历结果：<ul>");
for(var i=0;i<a.length;i++){document.write("<li>" + a[i] + "</li>");}
document.write("</ul>");}
function max(m,n){if(m>n) return m;else return n;}
</script></head>
<body><script language="JavaScript">
var a1 = new Array(3);
a1[0] = "中国";a1[1] = "法国";a1[2] = "美国";showArray(a1);//说明③
var a2 = new Array(3,40,52);showArray(a2);
document.write("<hr>");var a=33,b=44;var result = max(a,b);//说明④
document.write("最大值为:" + result);
</script></body>
说明①：如果是在文件头部<head>区域中使用<script>标记，通常应该定义的是函数
函数本身不会运行，将来在代码区中通过函数名调用它，那么这个函数才能运行
说明②：function相当于Java中方法前面的修饰符(public static void main)
这里面是显式的说明我们要定义一个函数
showArray是函数名，a是形参列表，形参也不需要指定类型
说明③：直接调用showArray()函数
上面定义的函数可以认为它不属于任何Java语言中的类型或者说是对象
它只属于当前的文档，在当前文档的范围内可以被访问
说明④：注意这个max方法是有返回值的
实际上其他的函数或者叫方法尾部也有这种隐含的return语句，那么确实看起来很自由
函数声明的时候根本不需要指明它有没有返回值，我们可以再里面随便返回最后的值或者不返回
也不需要指定返回值的类型。我们在这里就直接接收它的返回值打印输出
那么我们就可以定义自己的函数来进行表单参数的格式验证或者实现其他更复杂的动态逻辑
事件及事件处理机制
事件(Event)：用于描述发生什么事情，用户的鼠标或键盘操作(如点击、文字输入、选中条目等)
以及其他的页面操作(如页面加载和卸载等)都会触发相应的事件
补充：HTML页面在浏览器中显示的时候，首先要加载到浏览器的内存中，然后再解析它，这个过程叫加载
当我们跳到另外一个页面或者关闭浏览器的时候会卸载当前的页面。我们称之为load或者unload
事件源(Event Source)：可能产生事件的组件，通常为表单组件。实际上在JavaScript中一般不太强调事件源的概念
事件驱动(Event Driven)：由事件引发程序的响应，执行事先准备好的事件处理代码这种程序运行方式称为事件驱动
补充：实际上现在的高级编程语言都是采用事件驱动的方式
比如说鼠标点击、键盘输入都会触发程序中的处理代码。因为它比较便捷
事件处理代码(Event Handle)：JavaScript中事件处理代码通常定义为函数的形式
其中加入所需的处理逻辑，并将之关联到所关注的事件源组件上
补充：也会指定它是针对哪一种事件才会触发。这一点特别像Java语言的注册监听器
常用事件类型：
|
事件类型
|
事件描述(触发事件的时机)
|
| onClick | 组件被点击 |
| onDbclick | 组件被双击 |
| onLoad | 页面装载 |
| onUnload | 页面卸载 |
| onChange | 组件内容或条目选中状态被改变 |
| onMouesemove | 鼠标移动 |
| onFocus | 当组件获得焦点 |
| onBlur | 当对象失去焦点 |
function sayHello(){window.alert("欢迎光临!");} //说明①
function sayBye(){window.alert("再见!");}
</script></head>
<body onLoad="sayHello()" onUnload="sayBye()"> //说明②
正文内容！
</body>
说明①：alert是window的一个方法，其作用是弹出一个提醒框或者叫警报、警告对话框
说明②：onLoad和onUnload是<body>的一个属性
当页面加载到浏览器中的时候即当前页面产生onLoad事件的时候，会自动一次性调用sayHello()
当页面被卸载的时候会自动调用sayBye()
当跳到另外一个页面时，会首先卸载当前页面，会触发onUnload事件，便会直接调用它所关联的方法
这跟Java的事件处理相比，少了一个创建监听器对象(注册监听器的过程)
举例：<head><script language="JavaScript">
function test1(){
var name = window.prompt("请输入您的姓名","");
window.alert("经四柱预测，您的名字很吉利！请付测算费￥8888！");
}</script></head>
<body onLoad="sayHello()" onUnload="sayBye()"> //说明①
<input type="button" name="b1" value="开始测试" onClick="test1()"> //说明②
</body>
说明①：这里并没有提供相应的sayHello()和sayBye()，所以onLoad和onUnload就多余了
它没有起作用但也没有影响页面的运行，可以认为是浏览器有比较强的容错性
它不像Java，语法上有一点问题或者说运行的时候找不到资源的话，都会报错
说明②：我们经常使用的submit和reset按钮，实际上都是button按钮的一个子类
点击submit和reset有约定的功能，而button缺省的情况下点击它，什么也不做
后面的onClick也就是指明了点击它的时候就调用test1()函数
补充①：实际上这种事件处理可以看得出来就是实现了当前页面和用户或者浏览器和用户之间的一个简单的交互
但是它没有通过服务器，所以并不需要远程的服务器有什么开销
将来我们访问网络服务器上的一个页面的时候，可以直接在我们客户端进行交互
比如可以回答智商测试的选择题，答完了一点交卷，就在本地就转到了script函数区
接收每一个表单组件的状态、选中的值，然后得到一个结果再显示给用户。都不需要经过服务器
举例：<head><script language="JavaScript">
function clear1(){document.myform1.uname.value="";} //说明①
function show(){window.alert("您填写的姓名是：" + document.myform1.uname.value);}
</script></head>
<body>
请输入注册信息：
<form name="myform1">
姓名：<input type="text" name="uname" value="请输入姓名:" onFocus="clear1()" onBlur="show()"><br>
年龄：<input type="text" name="age" ><br>
<input type="submit">
</form></body>
说明①：我们又用到了document对象，但这次不是用它的write方法而是访问了它的一个属性myform1
myform1是文件主体中一个form表单的名字，相当于Java中的一个组件名
uname是myform1表单中的文本框组件的名字，value就是它的值
这句代码就是将当前文档中myform1的uname文本框的值赋成空的双引号(清空)
举例：<head>
<style>.mystyle{position:absolute;//这里是绝对定位了一个块形显示的一个元素
left:12;//这是它左上角的横纵坐标初始的位置
top:222;}</style>
<script language="JavaScript">
function move(x, y){ //说明①
mypic.style.left = x; //说明 ②
mypic.style.top = y;}
</script></head>
<body onMousemove="move(event.x, event.y)" > //说明③
<div class="mystyle" id="mypic"><img src="fish.gif"></div>
</body>
说明①：该函数就是要将我们的一个组件的样式表中的左上角的横纵坐标改成函数参数指定的两个值
说明②：mypic是一个<div>元素，它是块形显示的一个元素的id标识。本行代码就是说mypic元素的样式中的left属性被改成x
说明③：event.x和event.y是当前浏览器对象window的一个内置的属性(也就是event对象)的x和y的值
那么其作用是获取鼠标当前的位置
补充①：id有点类似form表单中的name属性，二者的差别比较微妙
大致可以这样理解：通常我们用name属性来标识一个元素是用来将来访问它的值，访问其中所包含的信息
而用id来标识元素的时候就相当于一个元素的编号，是用来将来寻找并操作这个元素
补充②：我们举这个例子并不是真的要用它或者说让学习者都掌握到这种程度
这可以说算是专业的网页设计人员比较常用的功能
我们只是要认识到JavaScript还能够实现这样的动态效果
常用对象
需要说明的是：做为一种基于对象的脚本语言(注意这个语言很自觉地没有管自己叫面向对象)
JavaScript确实也允许使用着定义自己的对象
其实就相当于我们定义自己的类型，再创建该类的对象
而且还可以使用构造函数之类的，因为比较繁琐，也很少有人真的会这样用
那么我们通常用的就是它的几个常用的内置对象和浏览器对象，也都是内嵌对象
常用对象有三种：数学对象、时间对象和字符串对象
数学对象(内置对象Math提供常规的数学运算方法和数学常量)(跟Java中的Math类差不多)
PI、E、abs()、sin()、cos()、...、round()、sqrt()、pow()、random()
举例：<script language="JavaScript">
var d = Math.random();//说明
document.write(d); document.write("<br>");
document.write(Math.PI); document.write("<br>");
document.write(Math.E); document.write("<br>");
document.write(Math.pow(2,4)); document.write("<br>");
document.write(Math.sqrt(100)); document.write("<br>");</script>
说明：首先声明一个变量d，然后调用了Math.random()。调用了数学对象的random()方法
我们可以把Math叫做对象，甚至可以把它理解成相当于Java语言中的一个类调用了它的一个static方法
但在JavaScript中我们说：我们使用了一个Math对象(或者说这是一个静态对象)调用了一个它的方法
实际上它的本质我们是理解的
输出：0.3902098394838459(随机出现的)、3.141592653589793、2.718281828459045、16、10
时间对象(封装日期和时间信息并提供相关操作功能)(特别类似于Java语言中的Date()类的对象)
使用前需要声明/创建对象：var currentTime=new Date();
Date对象跟Math对象不同，使用前需要声明/创建对象
因为不同的时刻是由不同的Date对象来描述的
而Math对象只要有一个就够了，相当于里面都是静态方法
常用方法：
| getYear() | setYear() |
| getMonth() | setMonth() |
| getDate() | setDate() |
| getDay() | |
| getHours() | setHours() |
| getMinutes() | setMinutes() |
| getSeconds() | setSeconds() |
| getTime() | setTime() |
跟Java语言一样，它也是以1970年1月1日0点0分0秒0毫秒为基准点。实际保存的还是一个长长的毫秒数
实例：var cur = new Date();//获取当前的系统时间
document.write(cur);//直接打印。有点类似于Java中，它会直接将对象转换成本地表示的字符串形式
document.write(cur.getTime());//获取从70年到现在所经历的毫秒
document.write(cur.getMonth());//注意月份都是从0--11而不是1--12
//所以我们实际用的时候可以对其进行+1的调整
举例：<head><script language="JavaScript">
function showTime() {
var now = new Date(); var year = now.getYear(); var month = now.getMonth()+1; var date = now.getDate();
var day = now.getDay(); day = day==0?"天":day; //说明①
var hours = now.getHours(); var mins = now.getMinutes(); var secs = now.getSeconds();
var timeVal1 = "今天是:"; var timeVal2 = "现在时间:"; timeVal1 += year + "年";
timeVal1 += ((month<10)?"0":"")+month+"月"; //说明②
timeVal1 += date + "日 星期"; timeVal1 += day;
if (hours<12) //说明③
timeVal2 += "上午";
else
timeVal2 += "下午";
timeVal2 += ((hours <= 12) ? hours : hours - 12);
timeVal2 += ((mins < 10) ? ":0" : ":") + mins;
timeVal2 += ((secs <= 10) ? ":0" : ":") + secs;
document.clockForm.clock1.value = timeVal1;
document.clockForm.clock2.value = timeVal2;}
function startClock(){
showTime(); //说明④
window.setInterval("showTime()",1000);} //说明⑤
</script></head>
<body onLoad="startClock()" >
<form name="clockForm">
<input type="text" name="clock1" size=30 readonly><br>
<input type="text" name="clock2" size=30 readonly>
</form></body>
说明①：这里星期几返回值实际上是0--6。1--6是周一到周六，星期天返回的是0
如果day=0，我们就把它的值改为"天"。否则就是它本身
说明②：如果月份小于10月，我们就在它前面加上个0，否则还输出它本身
说明③：如果小时不到12点，我们就在时间前面追加"上午"，反之则追加"下午"
说明④：如果没有此行代码，那么页面首次装载时会先空白一下，1秒后才showTime()
这个有点像Java中多种定时器Timer()
但是Timer()可以设置首次延迟时间，这里不方便，那我们就直接先调用一次
说明⑤：调用了window对象的另外一个函数setInterval()
功能是每隔指定的时间调用一次指定的函数
这是里每隔1000毫秒(即1秒)调用一次shouTime()
shouTime()每被调用一次就刷新一次时间
字符串对象(String对象描述和处理文本字符串信息)(跟Java中String类的方法类似)
常用属性和方法： length：返回当前字符串的长度。就是其中字符的个数
charAt(idx)：返回指定下标处的字符
indexOf(chr)：判断指定的字符或子串在当前字符串中第一次出现的下标(0--length-1)
indexOf(chr,fromIdx)：子串从指定的下标开始第一次出现的下标
lastIndexOf(chr)：子串最后一次出现的下标
substring(m,n)：取子串。从当前字符串的下标m的字符开始到下标n的字符结束，
包含下标m对应的字符，不包含结束下标n对应的字符，取出一个子串
substring(m)：取子串。从下标m开始(包含下标m对应的字符)直到结尾
toLowerCase()：转换成小写
toUpperCase()：转换成大写
举例：<head><script language="JavaScript">
function check(){
var valid = true;
var n = document.myform1.uname.value;
var p = document.myform1.psw.value;
var e = document.myform1.email.value;
if(n == ""){
window.alert("用户名不能为空!");
valid = false;
}else if(p.length<4){
window.alert("密码不能为空且长度不能小于4个字符!");
valid = false;
}else{
var idx = e.indexOf('@');
if(idx<=0 || idx==e.length-1){
alert("Email地址格式不合法!");
valid = false;}
}if(valid) document.myform1.submit(); //说明③
}</script></head>
<body>
请输入注册信息：
<form name="myform1" action="http://v512.com/regist.jsp" method="post"> //说明①
姓名：<input type="text" name="uname" ><br>
密码：<input type="password" name="psw" ><br>
邮箱：<input type="text" name="email" ><br>
<input type="button" value="提交信息" onClick="check()"><br> //说明②
<input type="reset">
</form></body>
说明①：起了个名字myform1做标识，将来容易找到它。action标明提交到哪里去。method标明了提交的方式
说明②：正常的button组件点击时不做任何事情，但我们关联了一个onClick="check()"，调用了一个check()函数
说明③：document是一个内置的浏览器对像。myform1.submit()调用myform1表单对象的submit方法提交表单
即把表单里所有组件的信息(包括参数名、参数值)提交到目标页面中
就相当于我们点submit按钮的时候发生的事情
submit()函数也能提交指定的表单。这就是一个标准的客户端表单验证
系统函数(不是面向对象的语言所应该有的)
系统函数不隶属于任何类或者说任何对象，可以在JavaScript代码中的任何位置直接使用
常用系统函数：eval(str)：计算字符串形式给出的表达式的值
parseInt(str)：将字符串形式的数值解析为整数(缺省为解析为十进制整数)
如果解析到字符串中间遇到非法字符则返回已解析的内容，而不是出错，这点其实很害人，并不是很好
如果字符串的开头第一位即为非法字符(如："K"、"中")，则返回NaN(Not a number，非数值型)
相当于Java中Integer类的parseInt()，但是这个方法更健壮
parseInt(str,radix)：按照指定的进制解析字符串。parseInt()要求字符串是数值型
parseFloat(str)：将字符串形式的数值解析为浮点数。要求字符串本身是数字和小数点组成的一个浮点值
isNaN(v)：判断参数的值是否为NaN
举例：eval("3+5*2")//值为13
parseInt("21")//值为21
parseInt("21",8)//声明该字符串内的值为八进制数，输出时自动解析为十进制，故值为17
parseInt("021")//字符串本身也可以表明它的进制。零开头的是八进制，缺省的就会按八进制转换。故值为17
parseInt("0x21")//零X开头的位十六进制。故值为33
parseInt("456a")//值为456(这种做法对我们意义不大，因为它含有欺骗性)
parseInt("a123")//值为NaN(可以认为NaN是个常量，它并不是说NaN代表不是数值型的数据，可以理解成它根本就不是数值，不是数据)
isNaN(123)//值为false
isNaN(parseInt("a123"))//值为true
浏览器对象(属于JavaScript内置对象，使用这些对象可以实现与HTML页面间的交互)
主要浏览器对象层次：(红色背景的是最常用到的)
| Navigator | Links | |||
| Location | ||||
| History | Anchors | |||
| Window—→ | Document | —→ | Forms | Form Elements |
| Event | Images | |||
| ...... | ...... | |||
| ...... | ...... |
Navigater：表示当前的浏览器，返回当前浏览器的版本名称等信息
Location：表示当前的URL，也可以进行操作
Document：表示当前的页面，就是网页的HTML页面主体的元素信息
History：记录当前窗体打开之后，Window访问的各个页面的历史(之前访问过那些页面，前、后、顺序等)
Event：表示事件对象，相当于Java语言的GUI中的事件对象(我们很少直接使用)
Links:链接 Anchors:锚标记 Forms:表单 Images:图片 Form Elements:表单元素
DOM模型(Document Object Model，文档对象模型)：当我们在描述或解析文本文档时，可以采用一种主流的模式，即将整个文档封装成一个对象
把里边的每个元素分层次的封装成一个对象，逐层的逐级的进行定位，比如北京市.海淀区.什么什么
DOM模型接近于面向对象思想，将各个不同层次的信息封装成对象，对象间建立了封装、包含的关系
Window对象：可使用Window对象获取浏览器窗口的状态信息，也可以通过它来访问其他的浏览器对象及窗口中发生事件信息
Window对象是其他浏览器对像的共同祖先，所以一般在JavaScript程序中可以省略Window对象 //说明①
浏览器打开HTML文档时，通常会创建一个Window对象 //说明②
说明①：称Window对象是祖先，并不是指继承层面的含义
而是说所有其他浏览器对象都是Window对象的属性，都是Window所封装的，都可以通过Window去访问
也正是因为Window是最高层，所以经常我们也可以省略它
说明②：当浏览器打开一个HTML文档的时候，应该说当浏览器窗口打开的时候，通常就会自动对应一个Window对象
但是有的时候一个HTML文档中被切割成多个Frame，这时每个窗格都会对应一个window对象
但彼此之间可能会有逻辑上的隶属关系，我们并没有用到这么复杂的程度
Window对象常用方法： alert()
open(URL,windowName,parameterList)：打开一个显示URL的新窗口，并指定窗口名和一些参数(比如有没有工具条、菜单条)
close()：关闭一个窗口
promt(text,Defaulttext)：弹出一个文本输入框
confirm(text)：弹出一个确认窗口，让用户确认一下他/她的操作
setInterval(func,timer)/clearInterval(timer)：清除原来设置的定期执行的任务。指定时间间隔和任务/指定一个时间间隔
举例：<head><script language="JavaScript">
function advertise(){
window.open("adv.html","myAdvWindow","toolbar=no,left=300,top=200,menubar=no,width=250,height=200");
}//toolbar=no指没有工具条//menubar=no指没有菜单条
function f1(){//点击"确定"返回true，否则返回false，返回值由flag接收
var flag=window.confirm("确定要删除此记录吗？");
if(flag){document.form1.submit();}
}//如果flag值是true则直接提交当前表单(这里即删除指定的记录)
</script></head>
<body onload="advertise()">
<form name="form1" action="http://www.v512.com/del.jsp">
记录1<input type="text"><input type="button" name="r0l" value="删除" onClick="f1()"><br>
记录2<input type="text"><input type="button" name="r02" value="删除" onClick="f1()"><br><hr>
<input type="button" value="关闭窗口" onClick="window.close()">
</body>//因为是很简单的功能，也可以直接写在事件名的后面，也可以定义单独的函数，函数里只写window.close()一句
Document对象：是Window对像的属性，它表示的是当前显示的文档，其中封装了文档中元素的相关信息，并提供了相应的操作功能
我们用的时候注意要小写，大写有的时候不能正常的起作用
我们一般不直接使用Document里面的元素，因为我们下面会用到它的from子元素等等
但我们会用到它的write()方法
Document对象主要方法： write()：输出信息到浏览器窗体中
Location对象：是Window对像的属性，表示当前打开的URL，并提供了相关的基本操作方法
Location对象常用方法： window.location="targetUrl"：该语句一旦被执行，就会转到目标页面，实现了页面转向
reload()：重载。其实就是刷新当前页面
举例：<head><script language="JavaScript">
function redirect(){
var flag = window.confirm("确定要转到搜索页面吗?");
if(flag){window.location="http://www.v512.com/batch.search.php";}}</script></head>
<body>
<script language="JavaScript">
document.write(new Date());
</script>//输出系统当前时间。页面每被加载或刷新一次，该语句都会执行一次，更新显示的时间
<input type="button" value="刷新页面" onClick="location.reload()">
<input type="button" value="搜索功能" onClick="redirect()">
</body>
History对象：是Window对象的属性，它封装了当前浏览器窗口(Window对象)曾经访问过的网页URL信息，并提供了相应的访问和页面跳转功能
History对象主要属性和方法： go(index)：前进或后退指定的页面(如前进1个页面或后退2个页面)
back()：仅前进一次页面//相当于go(-1)
forward()：仅后退一次页面//相当于go(1)
Navigator对象：是Window对象的属性，它封装了当前浏览器的相关信息，一般不进行操作
它有很多个属性，而且它与浏览器的版本和品牌都有差别，都有影响
Navigator对象主要属性(指在IE中)： appName：浏览器的名称
appVersion：浏览器的版本号
language：浏览器的语言(又分为系统语言systemLanguage和用户语言userLanguage)
platform：平台(当前使用的操作系统)
举例：<script language="JavaScript">
document.write("<b>navigator.appName: </b>" + navigator.appName + "<br>");
document.write("<b>navigator.appVersion: </b>" + navigator.appVersion + "<br>");
document.write("<b>navigator.systemLanguage: </b>" + navigator.systemLanguage + "<br>");
document.write("<b>navigator.userLanguage: </b>" + navigator.userLanguage + "<br>");
document.write("<b>navigator.platform: </b>" + navigator.platform + "<br>");
</script>