JavaScript
JS也是一门面向对象(OOP)语言,但是其OOP形式与C++、JAVA等不同,来看下面这段程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.write("Hello happy<br>");
var ren = new Object();
ren.name = "Mike";
ren.age = 16;
for(var v in ren){
document.write(ren[v]);
}
</script>
</body>
</html>
输出结果:
Hello happy
Mike16
要点:
- JS中使用对象不需要先建立类,在这个例子中,创建了一个Object(),然后直接赋值 ren.name = “Mike”; ren.age = 16;相当于给这个对象新加了俩成员变量。
- 可以将成员的名字当作索引,例如
ren[name]
ren[age]
- for循环如果这么写
for(var v in ren){
document.write(v);
}
则会输出
Hello happy
nameage
这种处理与JAVA、Python很相似
如果要自己建立类,不需要完整地构造整个类,只需要定义构造方法即可
<script>
function Rect(w, h){
this.wid = w;
this.hen = h;
this.area = function(){
return this.wid*this.hen;
}
}
var rect = new Rect(3, 3)
for(var v in rect){
document.write(rect[v]+" ");
}
document.write(rect.area());
</script>
输出如下:
3 3 function(){ return this.wid*this.hen; } 9
外部JS文件
<script src="util.js">
</script>
事件处理器
例如
<p onMouseOver="alert('hi~');">some contents</p>
<p onMouseOut="alert('hi~');">some contents</p>
简单对话框
confirm(str)
,一个二选一的对话框,返回bool
prompt(str)
,一个输入框,返回输入值
状态栏
浏览器左下角显示的东西叫状态栏
给页面上的东西的status
属性赋值即可
定时器
setInterval()
window
JS在浏览器中运行,浏览器给JS提供了一个根对象–window
window是一个全局对象,我们所声明的var都是它的成员变量
window.document就是我们上面所说的document,表示浏览器窗口中的HTML
window的控制方法
window.open()
,也可简写为open()
–>再打开一个html页面
window.close()
,也可简写close()
–>关闭某个html页面
凡是window的成员,都可以简写去掉window.,因为它是全局的
moveTo(x,y)
页面移动到某处
window.location
代表当前文档的URL,如果改变location,页面就会发生跳转
document
document中有很多成员变量,来看下面这段代码
<script>
for(x in document)
document.write(x + "<br/>");
</script>
例如images成员,它是一个collection容器(数组),使用images[0]这种格式可以访问document中的图片
DOM(document object model)
document的重要成员
anchors[]
、forms
、images[]
、cookie
、title
常见事件
- onLoad/onUnload
- onMouseOver/onMouseOUT
- onClick/onDblClick
- onSubmit