JS
2016-04-17 22:07
393 查看
1.JavaScript使用
HTML 中的脚本必须位于 <script>与 </script>
标签之间。
脚本可被放置在 HTML
页面的 <body> 和 <head>部分中
2.<script>
标签
如需在 HTML
页面中插入 JavaScript，请使用 <script>标签。
<script> 和 </script>会告诉 JavaScript在何处开始和结束。
<script> 和 </script>之间的代码行包含了 JavaScript：
<script>
alert("My First JavaScript");
</script>
3.<body>
中的 JavaScript
在本例中，JavaScript会在页面加载时向 HTML
的 <body>
写文本：
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>
<head> 或 <body>中的 JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body>或 <head>
部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容
4.JavaScript
函数和事件
上面例子中的 JavaScript 语句，会在页面加载时执行
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数
<head> 中的 JavaScript函数
在本例中，我们把一个 JavaScript函数放置到 HTML
页面的 <head>
部分。
该函数会在点击按钮时被调用：
实例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
<body> 中的 JavaScript函数
在本例中，我们把一个 JavaScript函数放置到 HTML
页面的 <body>
部分。
该函数会在点击按钮时被调用：
实例
<!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 文件：
实例
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
4.JavaScript
输出
操作 HTML
元素
如需从 JavaScript访问某个 HTML
元素，您可以使用 document.getElementById(id)
方法。
请使用
"id" 属性来标识 HTML元素
写到文档输出
下面的例子直接把 <p> 元素写到 HTML文档输出中
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
document.write("<p>My First JavaScript</p>");
</script>
</body>
</html>
警告
请使用 document.write()仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML页面将被覆盖
5.JavaScript
语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
下面的 JavaScript语句向
id="demo"
的 HTML 元素输出文本"Hello World"：
document.getElementById("demo").innerHTML="Hello World";
分号 ;
分号用于分隔 JavaScript语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
提示：您也可能看到不带有分号的案例。
在 JavaScript 中，用分号来结束语句是可选的。
JavaScript 对大小写敏感。
空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：
var name="Hello";
var name = "Hello";
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("Hello \
World!");
不过，您不能像这样折行：
document.write \
("Hello World!");
6.JavaScript
变量
变量是存储信息的容器
变量必须以字母开头
变量也能以 $ 和 _符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y是不同的变量）
var 关键词来声明变量
一条语句，多个变量
var name="Gates", age=56, job="CEO";
声明也可横跨多行：
var name="Gates",
age=56,
job="CEO";
JavaScript 数据类型
JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。
在 JavaScript
中，类似 "Bill Gates"
这样一条文本被称为字符串。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理
Value = undefined
在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
在执行过以下语句后，变量 carname的值将是 undefined
var carname;
重新声明 JavaScript变量
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname
的值依然是 "Volvo"：
var carname="Volvo";
var carname;
7.JavaScript
数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
var x // x 为 undefined
var x = 6;
// x 为数字
var x = "Bill";
// x 为字符串
JavaScript 字符串
字符串是存储字符（比如 "Bill Gates"）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
var carname="Bill Gates";
var carname='Bill Gates';
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"];
JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value)来定义。
属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates",id:5566};
上面例子中的对象 (person)有三个属性：firstname、lastname以及
id。
空格和折行无关紧要。声明可横跨多行：
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 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
8.JavaScript
对象
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据
创建 JavaScript
对象
本例创建名为 "person"的对象，并为其添加了四个属性：
实例
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
访问对象的属性
objectName.propertyName
var message="Hello World!";
var x=message.length;//12
访问对象的方法
objectName.methodName()
9.JavaScript
函数
avaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
这里是要执行的代码
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript在任何位置进行调用。
提示：JavaScript
对大小写敏感。关键词 function
必须是小写的，
并且必须以与函数名称相同的大小写来调用函数
调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：
myFunction(argument1,argument2)
当您声明函数时，请把参数作为变量来声明：
function myFunction(var1,var2)
{
这里是要执行的代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推
局部 JavaScript
变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除
全局 JavaScript
变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
avaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
10.JavaScript
运算符
用于字符串的 + 运算符
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，请使用 +
运算符
对字符串和数字进行加法运算
如果把数字与字符串相加，结果将成为字符串
10.JavaScript For
循环
JavaScript 支持不同类型的循环：
for -循环代码块一定的次数
for/in -
循环遍历对象的属性
while -当指定的条件为
true时循环指定的代码块
do/while
- 同样当指定的条件为 true时循环指定的代码块
JavaScript 标签
正如您在 switch语句那一章中看到的，可以对
JavaScript语句进行标记。
如需标记 JavaScript 语句，请在语句之前加上冒号：
label:
语句
break和
continue语句仅仅是能够跳出代码块的语句。
语法
break labelname;
continue labelname;
continue语句（带有或不带标签引用）只能用在循环中。
break语句（不带标签引用），只能用在循环或
switch中。
通过标签引用，break语句可用于跳出任何 JavaScript
代码块
11.JavaScript
表单验证
JavaScript 可用来在数据被送往服务器前对 HTML表单中的这些输入数据进行验证被 JavaScript验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field)中输入了文本？
12.JavaScript HTML DOM
通过 HTML DOM，可访问 JavaScript HTML文档的所有元素
通过可编程的对象模型，JavaScript
获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML元素
JavaScript 能够改变页面中的所有 HTML属性
JavaScript 能够改变页面中的所有 CSS样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML
元素
通常，通过 JavaScript，您需要操作 HTML元素。
有三种方法来做这件事：
通过
id 找到 HTML元素
id="intro"
var x=document.getElementById("intro");
通过标签名找到 HTML 元素
例查找
id="main"
的元素，然后查找 "main"
中的所有 <p> 元素：
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b>方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main"的
div中的第一段文本是：' + y[1].innerHTML);
</script>
</body>
</html>
通过类名找到 HTML 元素
通过类名查找 HTML
元素在 IE 5,6,7,8中无效。
13.JavaScript HTML DOM -
改变 HTML
改变 HTML
输出流
在 JavaScript
中，document.write()
可用于直接向 HTML 输出流写内容
改变 HTML
内容
修改 HTML
内容的最简单的方法时使用 innerHTML
属性
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
改变 HTML
属性
如需改变 HTML
元素的属性，请使用这个语法：(<img id="image" src="smiley.gif">)
document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";
14.HTML DOM
允许 JavaScript
改变 HTML 元素的样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
15.JavaScript HTML DOM
事件
HTML DOM 使 JavaScript有能力对 HTML
事件做出反应
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML
事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时:<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML
表单时
当用户触发按键时
HTML 事件属性
如需向 HTML 元素分配事件，您可以使用事件属性。
向 button
元素分配 onclick 事件：
<button onclick="displayDate()">点击这里</button>
16.Window
对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM
的 document 也是 window对象的属性之一
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera以及
Safari：
window.innerHeight -
浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
实例
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
17.JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息
window.screen 对象在编写时可以不使用 window这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight -
可用的屏幕高度
Window Screen 可用宽度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
返回您的屏幕的可用宽度：
<script>
document.write("可用宽度：" + screen.availWidth);
</script>
18.JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
window.location 对象在编写时可不使用 window这个前缀。
一些例子：
location.hostname 返回 web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web主机的端口
（80
或
443）
location.protocol 返回所使用的 web协议（http://或 https://）
Window Location Href
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL的路径名。
location.assign() 方法加载新的文档
Window Location Assign
location.assign() 方法加载新的文档
<script>
document.write(location.href);
document.write(location.pathname);
window.location.assign("http://www.w3school.com.cn")
</script>
Window Location Pathname
19.JavaScript Window History
window.history 对象包含浏览器的历史
window.history 对象在编写时可不使用 window这个前缀。
为了保护用户隐私，对 JavaScript
访问该对象的方法做出了限制。
一些方法：
history.back() - 与在浏览器点击后退按钮相同
history.back() 方法加载历史列表中的前一个 URL。
history.forward() - 与在浏览器中点击按钮向前相同
history forward() 方法加载历史列表中的下一个 URL。
20.JavaScript Window Navigator
window.navigator 对象包含有关访问者浏览器的信息
警告：来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
navigator 数据可被浏览器使用者更改
浏览器无法报告晚于浏览器发布的新操作系统
21.JavaScript
消息框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("文本")
确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为false。
语法：
confirm("文本")
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("文本","默认值")
22.JavaScript
计时
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
setTimeout()
未来的某时执行代码我们称之为计时事件
var t=setTimeout("javascript语句",毫秒)
clearTimeout()
取消setTimeout()
clearTimeout(setTimeout_variable)
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text"
id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
23.JavaScript Cookies
cookie 用来识别用户
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，
就会发送这个 cookie。你可以使用 JavaScript来创建和取回 cookie
的值
HTML 中的脚本必须位于 <script>与 </script>
标签之间。
脚本可被放置在 HTML
页面的 <body> 和 <head>部分中
2.<script>
标签
如需在 HTML
页面中插入 JavaScript，请使用 <script>标签。
<script> 和 </script>会告诉 JavaScript在何处开始和结束。
<script> 和 </script>之间的代码行包含了 JavaScript：
<script>
alert("My First JavaScript");
</script>
3.<body>
中的 JavaScript
在本例中，JavaScript会在页面加载时向 HTML
的 <body>
写文本：
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>
<head> 或 <body>中的 JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body>或 <head>
部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容
4.JavaScript
函数和事件
上面例子中的 JavaScript 语句，会在页面加载时执行
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数
<head> 中的 JavaScript函数
在本例中，我们把一个 JavaScript函数放置到 HTML
页面的 <head>
部分。
该函数会在点击按钮时被调用：
实例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
<body> 中的 JavaScript函数
在本例中，我们把一个 JavaScript函数放置到 HTML
页面的 <body>
部分。
该函数会在点击按钮时被调用：
实例
<!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 文件：
实例
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
4.JavaScript
输出
操作 HTML
元素
如需从 JavaScript访问某个 HTML
元素，您可以使用 document.getElementById(id)
方法。
请使用
"id" 属性来标识 HTML元素
写到文档输出
下面的例子直接把 <p> 元素写到 HTML文档输出中
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
document.write("<p>My First JavaScript</p>");
</script>
</body>
</html>
警告
请使用 document.write()仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML页面将被覆盖
5.JavaScript
语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
下面的 JavaScript语句向
id="demo"
的 HTML 元素输出文本"Hello World"：
document.getElementById("demo").innerHTML="Hello World";
分号 ;
分号用于分隔 JavaScript语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
提示：您也可能看到不带有分号的案例。
在 JavaScript 中，用分号来结束语句是可选的。
JavaScript 对大小写敏感。
空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：
var name="Hello";
var name = "Hello";
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("Hello \
World!");
不过，您不能像这样折行：
document.write \
("Hello World!");
6.JavaScript
变量
变量是存储信息的容器
变量必须以字母开头
变量也能以 $ 和 _符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y是不同的变量）
var 关键词来声明变量
一条语句，多个变量
var name="Gates", age=56, job="CEO";
声明也可横跨多行：
var name="Gates",
age=56,
job="CEO";
JavaScript 数据类型
JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。
在 JavaScript
中，类似 "Bill Gates"
这样一条文本被称为字符串。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理
Value = undefined
在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
在执行过以下语句后，变量 carname的值将是 undefined
var carname;
重新声明 JavaScript变量
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname
的值依然是 "Volvo"：
var carname="Volvo";
var carname;
7.JavaScript
数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
var x // x 为 undefined
var x = 6;
// x 为数字
var x = "Bill";
// x 为字符串
JavaScript 字符串
字符串是存储字符（比如 "Bill Gates"）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
var carname="Bill Gates";
var carname='Bill Gates';
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"];
JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value)来定义。
属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates",id:5566};
上面例子中的对象 (person)有三个属性：firstname、lastname以及
id。
空格和折行无关紧要。声明可横跨多行：
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 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
8.JavaScript
对象
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据
创建 JavaScript
对象
本例创建名为 "person"的对象，并为其添加了四个属性：
实例
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
访问对象的属性
objectName.propertyName
var message="Hello World!";
var x=message.length;//12
访问对象的方法
objectName.methodName()
9.JavaScript
函数
avaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
这里是要执行的代码
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript在任何位置进行调用。
提示：JavaScript
对大小写敏感。关键词 function
必须是小写的，
并且必须以与函数名称相同的大小写来调用函数
调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：
myFunction(argument1,argument2)
当您声明函数时，请把参数作为变量来声明：
function myFunction(var1,var2)
{
这里是要执行的代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推
局部 JavaScript
变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除
全局 JavaScript
变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
avaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
10.JavaScript
运算符
用于字符串的 + 运算符
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，请使用 +
运算符
对字符串和数字进行加法运算
如果把数字与字符串相加，结果将成为字符串
10.JavaScript For
循环
JavaScript 支持不同类型的循环：
for -循环代码块一定的次数
for/in -
循环遍历对象的属性
while -当指定的条件为
true时循环指定的代码块
do/while
- 同样当指定的条件为 true时循环指定的代码块
JavaScript 标签
正如您在 switch语句那一章中看到的，可以对
JavaScript语句进行标记。
如需标记 JavaScript 语句，请在语句之前加上冒号：
label:
语句
break和
continue语句仅仅是能够跳出代码块的语句。
语法
break labelname;
continue labelname;
continue语句（带有或不带标签引用）只能用在循环中。
break语句（不带标签引用），只能用在循环或
switch中。
通过标签引用，break语句可用于跳出任何 JavaScript
代码块
11.JavaScript
表单验证
JavaScript 可用来在数据被送往服务器前对 HTML表单中的这些输入数据进行验证被 JavaScript验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field)中输入了文本？
12.JavaScript HTML DOM
通过 HTML DOM，可访问 JavaScript HTML文档的所有元素
通过可编程的对象模型，JavaScript
获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML元素
JavaScript 能够改变页面中的所有 HTML属性
JavaScript 能够改变页面中的所有 CSS样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML
元素
通常，通过 JavaScript，您需要操作 HTML元素。
有三种方法来做这件事：
通过
id 找到 HTML元素
id="intro"
var x=document.getElementById("intro");
通过标签名找到 HTML 元素
例查找
id="main"
的元素，然后查找 "main"
中的所有 <p> 元素：
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b>方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main"的
div中的第一段文本是：' + y[1].innerHTML);
</script>
</body>
</html>
通过类名找到 HTML 元素
通过类名查找 HTML
元素在 IE 5,6,7,8中无效。
13.JavaScript HTML DOM -
改变 HTML
改变 HTML
输出流
在 JavaScript
中，document.write()
可用于直接向 HTML 输出流写内容
改变 HTML
内容
修改 HTML
内容的最简单的方法时使用 innerHTML
属性
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
改变 HTML
属性
如需改变 HTML
元素的属性，请使用这个语法：(<img id="image" src="smiley.gif">)
document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";
14.HTML DOM
允许 JavaScript
改变 HTML 元素的样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
15.JavaScript HTML DOM
事件
HTML DOM 使 JavaScript有能力对 HTML
事件做出反应
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML
事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时:<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML
表单时
当用户触发按键时
HTML 事件属性
如需向 HTML 元素分配事件，您可以使用事件属性。
向 button
元素分配 onclick 事件：
<button onclick="displayDate()">点击这里</button>
16.Window
对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM
的 document 也是 window对象的属性之一
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera以及
Safari：
window.innerHeight -
浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
实例
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
17.JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息
window.screen 对象在编写时可以不使用 window这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight -
可用的屏幕高度
Window Screen 可用宽度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
返回您的屏幕的可用宽度：
<script>
document.write("可用宽度：" + screen.availWidth);
</script>
18.JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
window.location 对象在编写时可不使用 window这个前缀。
一些例子：
location.hostname 返回 web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web主机的端口
（80
或
443）
location.protocol 返回所使用的 web协议（http://或 https://）
Window Location Href
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL的路径名。
location.assign() 方法加载新的文档
Window Location Assign
location.assign() 方法加载新的文档
<script>
document.write(location.href);
document.write(location.pathname);
window.location.assign("http://www.w3school.com.cn")
</script>
Window Location Pathname
19.JavaScript Window History
window.history 对象包含浏览器的历史
window.history 对象在编写时可不使用 window这个前缀。
为了保护用户隐私，对 JavaScript
访问该对象的方法做出了限制。
一些方法：
history.back() - 与在浏览器点击后退按钮相同
history.back() 方法加载历史列表中的前一个 URL。
history.forward() - 与在浏览器中点击按钮向前相同
history forward() 方法加载历史列表中的下一个 URL。
20.JavaScript Window Navigator
window.navigator 对象包含有关访问者浏览器的信息
警告：来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
navigator 数据可被浏览器使用者更改
浏览器无法报告晚于浏览器发布的新操作系统
21.JavaScript
消息框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("文本")
确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为false。
语法：
confirm("文本")
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("文本","默认值")
22.JavaScript
计时
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
setTimeout()
未来的某时执行代码我们称之为计时事件
var t=setTimeout("javascript语句",毫秒)
clearTimeout()
取消setTimeout()
clearTimeout(setTimeout_variable)
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text"
id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
23.JavaScript Cookies
cookie 用来识别用户
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，
就会发送这个 cookie。你可以使用 JavaScript来创建和取回 cookie
的值
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript对象的属性及序列化
- JS ==和===区别
- JS学习笔记 —— 原生Ajax总结
- JSTL <fmt:formatNumber>
- 【bzoj 1031】[JSOI2007] 字符加密Cipher
- JavaScript中的对象、类、构造函数
- JSP语法学习笔记
- PJSIP学习总结
- 深入理解JavaScript模块化编程：RequireJS
- jsp 自定义标签
- json-lib 的maven dependency
- 使用pjsua-i386-Win32-vc8-Debug.exe测试，可以看到视频
- JS面向对象
- Js 标签云
- js屏幕触控，手机屏幕触摸
- JSON与MODEL互转
- javaScript--for循环的性能提升
- zepto.js介绍
- javascript typeof 和 instanceof 的区别和联系
- JSONP浅析