定义
1.JavaScript 被设计用来向 HTML 页面添加交互行为。
2.JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
3.JavaScript 由数行可执行计算机代码组成。
4.JavaScript 通常被直接嵌入 HTML 页面。
5.JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
6.所有的人无需购买许可证均可使用 JavaScript。
作用
1.JavaScript 为 HTML 设计师提供了一种编程工具,是一种只拥有极其简单的语法的脚本语言!
2.JavaScript 可以将动态的文本放入 HTML 页面
3.JavaScript 可以对事件作出响应,设置为当某事件发生时才会被执行
4.JavaScript 可以读写 HTML 元素
5.JavaScript 在数据被提交到服务器之前,可被用来验证数据
6.JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面。
7.JavaScript 可被用来创建 cookies,存储和取回位于访问者的计算机中的信息。
HTML添加js
方法一:html文件body标签中加入
<html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>
当页面载入时,会执行位于 body 部分的 JavaScript。
方法二:html文件head标签中加入
<html> <head> <script type="text/javascript"> function message() { alert("该提示框是通过 onload 事件调用的。") } </script> </head> <body onload="message()"> </body> </html>
当用户触发事件时才执行脚本
方法三:使用外部JavaScript
<html> <head> <script src="xxx.js">....</script> </head> <body> </body> </html>
在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。外部文件不能包含 <script> 标签。
注释
单行的注释以 // 开始。
多行注释以 /* 开头,以 */ 结尾。
声明(创建) 变量
var x=5;
var carname="Volvo";
变量名称的规则:
变量对大小写敏感(y 和 Y 是两个不同的变量)
变量必须以字母或下划线开始
通过 var 语句 来声明 JavaScript 变量
注释:由于 JavaScript 对大小写敏感,变量名也对大小写敏感。
警告框
alert("我是警告框!!")
alert("再次向您问好!在这里,我们向您演示" + '\n' + "如何向警告框添加折行。")
确认框
<html> <head> <script type="text/javascript"> function show_confirm(){ var r=confirm("Press a button!"); if (r==true){ alert("You pressed OK!"); }else{ alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show a confirm box" /> </body> </html>
提示框
<html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("请输入您的名字","Bill Gates") if (name!=null && name!="") { document.write("你好!" + name + " 今天过得怎么样?") } } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="显示提示框" /> </body> </html>
提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
定义函数
1、有参数语法:
function 函数名(var1,var2,...,varX){
代码...
}
var1, var2 等指的是传入函数的变量或值。{ 和 } 定义了函数的开始和结束。
2、无参数的函数必须在其函数名后加括号:
function 函数名(){
代码...
}
注意:别忘记 JavaScript 中大小写字母的重要性。"function" 这个词必须是小写的,否则 JavaScript 就会出错。另外需要注意的是,必须使用大小写完全相同的函数名来调用函数。
3、有返回值函数
return 语句用来规定从函数返回的值。
例
function prod(a,b){
x=a*b
return x
}
break 和 continue 语句
break 命令可以终止循环的运行,然后继续执行循环之后的代码(如果循环之后有代码的话)。
continue 命令会终止当前的循环,然后从下一个值继续运行。
for...in 语句
for...in 语句用于对数组或者对象的属性进行循环操作。
for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
语法:
for (变量 in 对象){
在此执行代码
}
“变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。
实例:
使用 for ... in 循环遍历数组。
<html> <body> <script type="text/javascript"> var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars){ document.write(mycars[x] + "<br />") } </script> </body> </html>
事件
事件是可以被 JavaScript 侦测到的行为。
事件举例:
鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键
注意:事件通常与函数配合使用,当事件发生时函数才会执行。
onload 和 onUnload 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
onload 事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如,当某用户第一次进入页面时,你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时,你可以使用另一个消息框来和这个用户打招呼:"Welcome John Doe!"。
onFocus, onBlur 和 onChange
onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容,checkEmail() 函数就会被调用。
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit
onSubmit 用于在提交表单之前验证所有的表单域。
下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。假若域的值无效,此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true,则提交表单,反之取消提交。
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时,就会弹出一个警告框:
<a href="http://www.w3school.com.cn" onmouseover="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30">
</a>
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。
事件句柄
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。
FF: Firefox, N: Netscape, IE: Internet Explorer
属性 | 以下情况发生,出现此事件 | FF | N | IE |
onabort | 图像加载被中断 | 1 | 3 | 4 |
onblur | 元素失去焦点 | 1 | 2 | 3 |
onchange | 用户改变域的内容 | 1 | 2 | 3 |
onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
onfocus | 元素获得焦点 | 1 | 2 | 3 |
onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
onmousemove | 鼠标被移动 | 1 | 6 | 3 |
onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
onmouseover | 鼠标被移到某元素之上 | 1 | 3 | 4 |
onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
onreset | 重置按钮被点击 | 1 | 3 | 4 |
onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
onselect | 文本被选定 | 1 | 2 | 3 |
onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
onunload | 用户退出页面 | 1 | 2 | 3 |
捕获错误
两种在网页中捕获错误的方法:
使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)
注意:chrome、opera 和 safari 浏览器不支持 onerror 事件。
Try...Catch 语句
try...catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。
语法:
try{
//在此运行代码
}catch(err){
//在此处理错误
}
注意:try...catch 使用小写字母。大写字母会出错。
Throw 声明
throw 声明的作用是创建 exception(异常)。你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的。
语法:
throw(exception)
exception 可以是字符串、整数、逻辑值或者对象。
注意:使用小写字母编写 throw。使用大写字母会出错!
实例
下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0,错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后,就会显示出自定义的出错信息。
<html> <body> <script type="text/javascript"> var x=prompt("Enter a number between 0 and 10:","") try{ if(x>10) throw "Err1" else if(x<0) throw "Err2" } catch(er){ if(er=="Err1") alert("Error! The value is too high") if(er == "Err2") alert("Error! The value is too low") } </script> </body> </html>
onerror 事件
只要页面中出现脚本错误,就会产生 onerror 事件。
如果需要利用 onerror 事件,就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用:msg(错误消息)、url(发生错误的页面的 url)、line(发生错误的代码行)。
语法:
onerror=handleErr
function handleErr(msg,url,l){
//Handle the error here
return true or false
}
浏览器是否显示标准的错误消息,取决于 onerror 的返回值。如果返回值为 false,则在控制台 (JavaScript console) 中显示错误消息。反之则不会。
实例:
下面的例子展示如何使用 onerror 事件来捕获错误:
<html> <head> <script type="text/javascript"> onerror=handleErr var txt="" function handleErr(msg,url,l){ txt="There was an error on this page.\n\n" txt+="Error: " + msg + "\n" txt+="URL: " + url + "\n" txt+="Line: " + l + "\n\n" txt+="Click OK to continue.\n\n" alert(txt) return true } function message(){ adddlert("Welcome guest!") } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>
插入特殊字符
反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。
\' 单引号 ; \" 双引号 ; \& 和号 ;\\ 反斜杠 ;\n 换行符 ;\r 回车符 ;\t 制表符 ;\b 退格符 ;\f 换页符