笔记-javascript

1. 简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

2. 使用

2.1. 开始

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

如果把<script>标签放到body中，浏览器会在页面加载时执行；

2.2. javascript函数和事件触发运行机制

上面例子中的 JavaScript 语句，会在页面加载时执行，但使用js主要目的是动态改变网页内容，而不仅仅是加载时；

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

我们可以在 HTML 文档中放入不限数量的脚本，脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

较好的实践是把函数统一放入 <head> 部分中，或者放在页面底部。

也可以把脚本放到外部文件中，文件扩展名为.js；

当然这样需要进行说明，在 <script> 标签的 "src" 属性中设置 .js 文件：

案例：

<!DOCTYPE html>

<html>

<body>

</body>

</html>

3. 语法

3.1. 基础语法

JavaScript 对大小写是敏感的；

JavaScript 会忽略多余的空格；

分号用于分隔 JavaScript 语句；

可以在文本字符串中使用反斜杠对代码行进行换行

document.write("Hello \

World!");

这样的代码是允许的；

3.2. 注释

3.2.1. 单行注释

单行注释以 // 开头

// 输出标题：

document.getElementById("myH1").innerHTML="Welcome to my Homepage";

// 输出段落：

document.getElementById("myP").innerHTML="This is my first paragraph.";

var x=5; // 声明 x 并把 5 赋值给它

var y=x+2; // 声明 y 并把 x+2 赋值给它

这样也是可以的；

3.2.2. 多行注释

多行注释以 /* 开始，以 */ 结尾。

下面的例子使用多行注释来解释代码：

下面的这些代码会输出

一个标题和一个段落

并将代表主页的开始

document.getElementById("myH1").innerHTML="Welcome to my Homepage";

document.getElementById("myP").innerHTML="This is my first paragraph.";

3.3. 变量及变量声明

var x=2;

var y=3;

var z=x+y;

变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）

声明（创建） JavaScript 变量

var carname;

3.4. 数据类型

与python类似，javascript变量是动态类型的；

字符串：
数字：只有一种类型，可以带小数点，也可以不带；

var x= 34; var y=34.00;

布尔：true,false
数组：

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"];

对象：

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

对象属性寻址方式：

name=person.lastname;

name=person["lastname"];

3.4.1. 声明变量类型

声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;

var x= new Number;

var y= new Boolean;

var cars= new Array;

var person= new Object;

3.4.2. 变量作用域，生存周期

与python类似，不解释

3.5. 函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()

{

这里是要执行的代码

return

}

3.6. 流程控制

if…else
switch #类似c下的case

switch(n)

{

case 1:

执行代码块 1

break;

case 2:

执行代码块 2

break;

default:

n 与 case 1 和 case 2 不同时执行的代码

}

循环for,while,break,

3.7. 异常处理

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

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>

<button type="button" onclick="myFunction()">Test Input</button>

4. javscript HTML DOM

4.1. 查找元素

4.1.1. 通过id查找元素

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

4.1.2. 通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

4.2. 修改内容

4.2.1. document.write()

document.write() 可用于直接向 HTML 输出流写内容。

案例

document.write(Date());

</script>

输出：上述语句输出日期及时间

4.2.2. innerHTML

修改元素内容

document.getElementById("p1").innerHTML="New text!";

4.2.3. 改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

document.getElementById("image").src="landscape.jpg";

4.2.4. 改变样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

案例：

document.getElementById("p2").style.color="blue";

4.3. HTML DOM事件

4.3.1. 对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时

当网页已加载时

当图像已加载时

当鼠标移动到元素上时

当输入字段被改变时

当提交 HTML 表单时

当用户触发按键时

4.3.2. HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

实例

向 button 元素分配 onclick 事件：

4.3.3. 使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

实例

向 button 元素分配 onclick 事件：

document.getElementById("myBtn").onclick=function(){displayDate()}

4.3.4. 事件说明

1. onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

2. onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

3. onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

4. onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

onfocus

获得焦点时触发事件；

------附录------

5. javascript库

常用的javascript库/框架有

jQuery

Prototype

MooTools

jQuery

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）

6. JAVASCRIPT/DOM对象

本章节简要列出JAVASCRIPT/DOM对象

6.1. JavaScript 对象参考手册

Array，Boolean，Date，Math，Numbe，String，RegExp，Global

6.2. Browser 对象参考手册

Window，Navigator，Screen，History，Location，

6.3. HTML DOM 对象参考手册

本参考手册描述每个对象的属性和方法，并提供实例。

Document

Anchor

Area

Base

Body

Button

Canvas

Event

Form

Frame

Frameset

IFrame

Image

Input Button

Input Checkbox

Input File

Input Hidden

Input Password

Input Radio

Input Reset

Input Submit

Input Text

Link