JavaScript如今也算的上是如日中天,学好js还是很有必要的。
JS教程
认识JavaScript
JavaScript 是脚本语言。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
特别提示
JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。
Java(由 Sun 发明)是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。
使用
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
外部的 JavaScript
JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 <script>
标签的 "src" 属性中设置该 .js 文件。
外部脚本不能包含 <script>
标签。
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
JavaScript 输出
操作HTML元素
document.getElementById(id)
document.getElementById("demo").innerHTML="My First JavaScript";
写到文档输出
document.write("<p>My First JavaScript</p>");
警告使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
JavaScript 语句
分号
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
在 JavaScript 中,用分号来结束语句是可选的。
JavaScript 对大小写敏感。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。
下面的例子会正确地显示:
document.write("Hello \
World!");
不过,您不能像这样折行:
document.write \
("Hello World!");
JavaScript 变量
变量以字母、$ 和 _ 符号开头(不推荐$_开头)。
变量名称对大小写敏感(y 和 Y 是不同的变量)。
声明(创建) JavaScript 变量
var 关键词来声明变量:var carname;
向变量赋值使用等号:carname="Volvo";
在声明变量时对其赋值:var carname="Volvo";
一条语句,多个变量
var name="Gates", age=56, job="CEO";
var name="Gates",
age=56,
job="CEO";
Value = undefined
在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。
在执行过以下语句后,变量 carname 的值将是 undefined:var carname;
重新声明 JavaScript 变量
如果重新声明 JavaScript 变量,该变量的值不会丢失:
在以下两条语句执行后,变量 carname 的值依然是 "Volvo":
var carname="Volvo";
var carname;
JavaScript 数据类型
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
JavaScript 字符串
字符串可以是引号中的任意文本。您可以使用单引号或双引号。
var carname="Bill Gates";
var carname='Bill Gates';
您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:
var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';
JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
JavaScript 布尔
布尔(逻辑)只能有两个值:true 或 false。
var x=true
var y=false
JavaScript 数组
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];
JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"Bill", lastname:"Gates", id:5566};
空格和折行无关紧要。声明可横跨多行:
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
Undefined 和 Null
Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null;
声明变量类型
当您声明新变量时,可以使用关键词 "new" 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。
属性和方法
属性是与对象相关的值。
方法是能够在对象上执行的动作。
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法
function functionname()
{
这里是要执行的代码
}
调用带参数的函数
myFunction(argument1,argument2)
当您声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2)
{
这里是要执行的代码
}
带有返回值的函数
function myFunction()
{
var x=5;
return x;
}
在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
这条语句:
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
JavaScript 运算符
用于字符串的 + 运算符
+
运算符用于把文本值或字符串变量加起来(连接起来)。
如果把数字与字符串相加,结果将成为字符串。
JavaScript 比较和逻辑运算符
===
全等(值和类型)
Switch
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
For
JavaScript for/in 语句循环遍历对象的属性:
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
While
do/while 循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。
do
{
需要执行的代码
}
while (条件);
JavaScript Break 和 Continue 语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
JavaScript 错误 - Throw、Try 和 Catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
实例:
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
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" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail 验证
<html>
<head>
<script type="text/javascript">
function validate_email(field, alerttxt) {
with(field) {
apos = value.indexOf("@")
dotpos = value.lastIndexOf(".")
if (apos < 1 || dotpos - apos < 2) {
alert(alerttxt);
return false
} else {
return true
}
}
}
function validate_form(thisform) {
with(thisform) {
if (validate_email(email, "Not a valid e-mail address!") == false) {
email.focus();
return false
}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this);" method="post">
Email:
<input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
JS HTML DOM
HTML DOM (文档对象模型):当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
简介
查找 HTML 元素
- 通过 id 找到 HTML 元素
var x=document.getElementById("intro");
- 通过标签名找到 HTML 元素
查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
- 通过name找到 HTML 元素
getElementsByName()
DOM HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
document.write()
可用于直接向 HTML 输出流写内容
示例:
<script>
document.write(Date());
</script>
绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
改变 HTML 内容
document.getElementById(id).innerHTML=new HTML
示例:
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
改变 HTML 属性
document.getElementById(id).attribute=new value
示例:
<script>
document.getElementById("image").src="landscape.jpg";
</script>
DOM CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
document.getElementById(id).style.property=new style
示例:
document.getElementById("p2").style.color="blue";
DOM 事件
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
示例:
<body onload="checkCookies()">
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
DOM 元素(节点)
创建新的 <p>
元素:
var para=document.createElement("p");
创建文本节点:
var node=document.createTextNode("这是新段落。");
向 <p>
元素追加这个文本节点:
para.appendChild(node);
从父元素中删除子元素:
parent.removeChild(child);
常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
JavaScript对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript 允许自定义对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
访问对象的属性
objectName.propertyName
示例:
var message="Hello World!";
var x=message.length;
访问对象的方法
objectName.methodName()
示例:
var message="Hello world!";
var x=message.toUpperCase();
Number 对象
JavaScript 数字
JavaScript 数字可以使用也可以不使用小数点来书写:
var pi=3.14; // 使用小数点
var x=34; // 不使用小数点
极大或极小的数字可通过科学(指数)计数法来写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
八进制和十六进制
如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
var y=0377;
var z=0xFF;
提示:绝不要在数字前面写零,除非您需要进行八进制转换。
JS Window
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Window 对象
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。