JavaScript-浙江大学-翁恺

JavaScript介绍

• 是一种可以在浏览器中运行的脚本语言
• 主要用来实现在浏览器端的动作
  • 用户交互
  • 数据处理

JavaScript与Java没有关系，Java是Sun公司于1995年发布。

• Java需要编译
• JavaScript是解释性语言
• JavaScript源代码放在HTML里头

变量和计算

变量

var hello;

计算

var hello = "Hello";var age = 16;var ot = true;document.write(hello + age);

控制

判断

if ... else

switch

循环

for

while

do-while

函数

function fun_name() {}

function fun_name(a, b) {}

• 定义在任何函数之外的变量属于全局（整个网页）空间，在网页的任何地方都可以使用
• 定义在某个函数内部的变量属于局部（函数内部）空间，只在函数内部有效
• 局部有和全局重名的变量时，采用局部的

数组

var a = new Array();

var b = new Array(size);

var c = new Array(d1, d2, ..., dn);

var d = [d1, d2, ..., dn];

• []运算符访问数组中的一个单元
• 索引从0开始
• a.length给出数组a的长度

堆栈

• color.push("red", "green");
• color.pop();

排序

• values.sort();
• values.reverse();    //输入顺序的反序

数组操作

• 连接：rgb = color.concat("yellow", ["red", "green"]);
• 截取：rgb = color.slice(1, 4);

splice()

• 删除：splice(0, 2);
• 插入：splice(2, 0, "red", "green");
• 替换：splice(2, 1, "red", "green");

对象

• 对象是JavaScript的一种复合数据类型，它可以把多个数据集中在一个变量中，并且给其中的每个数据起名字
• 或者说，对象是一个属性集合，每个属性有自己的名字和值
• JavaScript并不像其他OOP语言那样有类的概念，不是先设计类再制造对象

在JavaScript中创建对象

• var o = new Object();
• var circle = {x:0, y:0, radius:2};

遍历所有属性

• for (var x in o) ...

构造函数

• 不直接制造对象
• 通过this来定义成员
• 没有return

原型对象

• 对象的prototype属性指定了它的原型对象，可以用“.”运算符直接读它的原型对象的属性
• 当写这个属性时才在它自己内部产生实际的属性

浏览器里的JavaScript

window

全局对象

• 浏览器的全局对象是window
• 所有全局的变量实际上是window的成员

for (x in window.document)        document.write(x + "<br>");

HTML中的JavaScript

• 在<script></script>标记中
• 在<script>的src属性或archive指定的外部文件中
• 在某个HTML标记的事件处理器中

外部JavaScript文件

• <script src="util.js"></script>
• 一个纯粹的代码文件，没有HTML标记

事件处理器

• <p onMouseOver="alert('hi')"; onMouseOut="alert('bye')">;

body事件

• onLoad
• onUnload

简单对话框

• alert
• confirm
• prompt

定时器

• setInterval()

window的控制方法

• window.open()
• window.close()

location对象

• window.location代表当前文档的URL

document

Document Object Model

• 文档对象模型
• document对象的成员提供了HTML文档的信息

<img name="symz" src="symz00.jpg">

<p id="p1" name="dancing">

<script>

alert(document.images);

alert(document.images[0]);

alert(document.images[0].src);

alert(document.symz);

alert(document.getElementsByName("dancing"));

alert(document.getElementsById("p1"));

事件

• onLoad/onUnload
• onMouseOver/onMouseOut
• onClick/onDblClick
• onSubmit