JavaScript学习
JavaScript:写入 HTML 输出:
document.write("<h1>This is a heading</h1>");
若文档已经加载完成,则会覆盖整个文档内容.
JavaScript:对事件作出反应:
<button type="button" onclick="alert('Welcome!')">点击这里</button>
JavaScript:改变 HTML 内容:
x=document.getElementById("demo") //查找元素 x.innerHTML="Hello JavaScript"; //改变内容
JavaScript:改变 HTML 图像:
改变 HTML <image> 的来源 (src):
element=document.getElementById('myimage') //查找元素
element.src="/i/eg_bulboff.gif"; //改变图像
JavaScript:改变 HTML 样式:
x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式
JavaScript:验证输入:
if isNaN(x) {alert("Not Numeric")};
<head> 或 <body> 中的 JavaScript
通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
外部的 JavaScript
外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:
<script src="myScript.js"></script>
重新声明 JavaScript 变量
在以下两条语句执行后,变量 carname 的值依然是 "Volvo":
var carname="Volvo"; var carname;
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):
var cars=["Audi","BMW","Volvo"];
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
cars=null; person=null;
声明变量类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x= 123;
var x= ‘hello’;
可以使用关键词 "new" 来声明其类型
var x= new Number;
如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
提示:绝不要在数字前面写零,除非您需要进行八进制转换。
var y=0377; var z=0xFF;
JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。
例如:
var message="Hello World!"; var x=message.length; // 对象属性
var x=message.toUpperCase(); //对象方法
定义对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。
var person={firstname:"Bill", lastname:"Gates", id:5566};
对象属性有两种寻址方式:
name=person.lastname; name=person["lastname"];
也可以如下定义:
person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";
对象构造器
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor;
function changeName(name) { this.lastname=name; }}
myFather=new person("Bill","Gates",56,"blue");
JavaScript 函数
function functionname(argument1,argument2) { 这里是要执行的代码 }
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
这条语句:
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
比较运算符
运算符 | 描述 | 例子 |
---|---|---|
== | 等于 | x==8 为 false |
=== | 全等(值和类型) | x===5 为 true;x==="5" 为 false |
!= | 不等于 | x!=8 为 true |
> | 大于 | x>8 为 false |
< | 小于 | x<8 为 true |
>= | 大于或等于 | x>=8 为 false |
<= | 小于或等于 | x<=8 为 true |
For/In 循环
循环遍历对象的属性
var person={fname:"John",lname:"Doe",age:25};
for (x in
person)
{
txt=txt + person[x];
}
输出:JohnDoe25
JavaScript 表单验证
<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>
setTimeOut和setInterval的用法
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
SetInterval为自动重复,setTimeout不会重复。