@Feb 11, 2014
下文主要整理自 http://www.w3school.com.cn/js/js_intro.asp
1 什么是JavaScript
JavaScript 是一种轻量级语言,被设计为向 HTML 页面增加交互性。JavaScript可嵌入到html中,由浏览器解释执行。
1.1 Javascript代码示例1
一段javascript代码:
<!DOCTYPE html>
<html>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>This is aheading</h1>");
document.write("<p>This is aparagraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
</body>
</html>
Note:只能在 HTML 输出中使用document.write。如果您在文档加载后使用该方法,会覆盖整个文档。
1.2 Javascript示例2:响应事件
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击:
</p>
<button type="button"οnclick="alert('Welcome!')">点击这里</button>
</body>
</html>
1.3 Javascript示例3:改变元素内容
document.getElementById("demo").innerHTML="HelloJavaScript"; //改变内容
getElementById("someid")。这个方法是 HTML DOM 中定义的, DOM(文档对象模型)是用以访问 HTML 元素的正式 W3C 标准。
改变图片:
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage');
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
</script>
<img id="myimage"οnclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>
</html>
2 JavaScript基本语法
2.1 Script标签
HTML 中的脚本必须位于<script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的<body> 和 <head> 部分中。Javascript也可以定义在自己的文件中,扩展名为.js,然后在html中通过下面的方式进行引用:
<scriptsrc="myScript.js"></script>
上面javascript代码示例1中的javascript代码会在页面加载时执行。示例2中的javascript则会在事件发生时执行。
2.2 操作操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素,如代码示例3中的代码。
2.3 JavaScript 语句
用分号来分隔语句是可选的。
Note:JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
3 JavaScript变量
使用var声明变量:
var carname;
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
3.1 JavaScript 数组
下面的代码创建名为 cars 的数组:
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
varcars=["Audi","BMW","Volvo"];
3.2 JavaScript 对象
3.2.1 创建 JavaScript 对象
JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
你也可以创建自己的对象。
本例创建名为"person" 的对象,并为其添加了四个属性:
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
还可以这样,对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"Bill",lastname:"Gates", id:5566};
也可以这样写:
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
3.3 声明变量类型
声明新变量时,可以使用关键词"new" 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
Note:JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。
3.4 全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
3.5 JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。所以切换页面后,全局变量的值就不再有效了。可以使用cookie来达到全局变量的效果。
3.6 向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
这条语句:
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
4 JavaScript函数
function myFunction(var1,var2)
{
//这里是要执行的代码
}
带有返回值的函数
function myFunction()
{
var x=5;
return x;
}
5 JavaScript运算符
与其它语言如java类似。
Note:如果把数字与字符串相加,结果将成为字符串。
6 JavaScript语句
6.1 条件语句
If和if else和 if…else if…else
6.2 Switch语句
6.3 循环语句
JavaScript 支持不同类型的循环:
l for - 循环代码块一定的次数
l for/in - 循环遍历对象的属性 for(x in person){…}
l while - 当指定的条件为 true 时循环指定的代码块
l do/while - 同样当指定的条件为 true 时循环指定的代码块
6.3.1 For in 循环
遍历一个对象的所有属性:
for(x in student)
{
…
}
for in 循环有时候很有用,比如想要将一个对象的所有属性放到同名的cookie,可以这样写:
for(attribute in obj ) // 遍历对象的属性名
{
//$.cookie(…)是jquery的写法, obj[attribute] 根据属性名获取对象该属性的值
$.cookie(attribute, obj[attribute]);
}
7 JavaScript Error
Try, catch, throw
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
8 JavaScript用作表单验证
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if(value==null||value=="")
{alert(alerttxt);return false}
else{return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if(validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"οnsubmit="return validate_form(this)" method="post">
Email: <input type="text"name="email" size="30">
<input type="submit"value="Submit">
</form>
</body>
</html>
9 HTML DOM
通过 HTML DOM,可访问JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
9.1 查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
l 通过 id 找到 HTML 元素:document.getElementById(“…”)
l 通过标签名找到 HTML 元素:document.getElementsByTagName(“…”)
l 通过类名找到 HTML 元素:在 IE5,6,7,8 中无效
9.2 DOM事件
9.2.1 onload onunload
事件会在用户进入或离开页面时被触发。
onload完成加载时调用,可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理cookie。
其他事件举例:
onchange
onmouseoveronmouseout
onmousedownonmouseup
onclick
onfocus