语句
JavaScript编写的代码必须嵌在一份html/XHTML 文档中才能得以执行。
<!DOCTYPE html> <html> <head> <script type="text/javascript"> JavaScript goes here …… </script> </head> <body> Mark-up goes here…… </body> </html>
更好的办法把JavaScript代码存入一个独立的文件——.js(扩展名)
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="file.js"> </script> </head> <body> Mark-up goes here…… </body> </html>
示例：test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Just a test</title> <script type="text/javascript" src="example.js"> </script> </head> <body> Mark-up goes here…… </body> </html>
语法
JavaScript语言的语法与Java和C++等一些程序设计语言的语法非常相似。
语句
JavaScript或任何一种其他程序设计语言编写出来的脚本都是由一系列指令构成的，称为语句（statement）。
良好的编程习惯：
first statement；
second statement；
注释
不希望JavaScript解释器真的去执行这样的语句。称为注释（comment）。
可以把编写代码时的一些想法和考虑记载下来供今后参考，追踪有关代码的执行流程。
单行注释：
//Note to self：comments are good.
多行注释：
/* Note to self： comments art good */
变量
会发生变化的东西称为变量（variable）。
把值存入变量的操作称为赋值（assinment）。
JavaScript中对这些变量进行赋值发语法：
mood = “happy”；
age = 33 ；
弹出式警告窗口：
alert（mood）;
alert（age）;
声明
JavaScript允许程序员直接对变量进行赋值而无需提前对它们做出声明（declare）。
做出声明：
var mood； var age；
JavaScript不允许变量的名字中包含空格或是标点符号（$ 例外）。
数据类型
JavaScript脚本中不需要对数据类型做出声明，类型声明（typing）。
JavaScript被称为弱类型（weakly typed）语言。
字符串
var mood = "happy"; var mood = 'happy'; var mood = 'don\'t ask'; （\ 字符转义 escaping）
数值
var age = 33.25;
布尔值 （boolean）
var sleeping = true; var married = false;
数组（array）
集合中的每个值都是这个数组的元素（element）。
array[index] = element;
var beatles = Array(4); beatles[0] = "John"; beatles[1] = "Paul"; beatles[2] = "George"; beatles[3] = "Ringo";
var beatles = Array("John","Paul","George","Ringo"); var beatles =["John","Paul","George","Ringo"];
var beatles = Array(1990,3554,1244,6565);
操作
算术操作符
var year = 2015; var message = "The year is"; message += year; alert（message）;
条件语句
JavaScript脚本需要使用条件语句（conditional statement）来做出判断和决策。
if语句
if（condition）{ statement； }
示例
if（1>2）{ alert("The world has gone mad!"); }else{ alert("All is well with the world"); }
比较操作符
= 赋值 == 等于 比较 ！= 不等于 比较
逻辑操作符 （operand）
&& 逻辑与 || 逻辑或 ！逻辑非
循环语句
if语句或许是最重要、最有用的条件语句。不足是无法用来完成重复性的操作。
while语句
while（condition）{ statement； }
示例
var count = 1; while(count < 11){ alert(count); count++; }
do...while语句
do{ statements; } while(condition );
示例
var count = 1; do{ alert(count); count++; }while(count < 11);
变体
var count = 1; do{ alert （count）; count++; } while(count < 1);
for语言
initialize; while(condition){ statements; increment; }
for循环
for（initial condition; test condition; alter condition）{ statement; }
示例
for（var count=1；count < 11; count++）{ alert(count); }
示例
var beatles = Array（"John","Paul","George","Ringo"）; for(var count = 0; count < beatles.length; count++){ alert(beatles[count]); }
函数（function）
先对函数做出定义再调用它们：
function shout(){ var beatles = Array("John","Paul","George","Ringo"); for( var count = 0; count < beatles.length; count++ ){ alert(beatles[count]); } }
定义一个函数的语法：
function name(arguments){ statements； }
传递两个参数的函数：
function multiplay(num1,num2){ var total = num1*num2; alert(total); }
在定义了这个函数的脚本里，我们可以从任意位置去调用这个函数：
multiply(10,2);
函数不仅能够（以参数的形式）接收数据，还能够返回数据。需要用到return语句：
function multiplay(num1,num2){ var total = num1*num2; return total; }
函数只是个参数，并返回一个数值：
function convertToCelsius(temp){ var result = temp - 32; result = result / 1.8; return result; }
函数真正价值可以当作一种数据类型来实用，这意味着我们可以把一个函数的调用结果赋值给一个变量：
var temp_fahrenheit = 95; var temp_celsius = convertToCelsius(temp_fahrenheit); alert(temp_celsius);
把华氏温度值95转为摄氏温度值：35
变量的作用域(scope)
全局变量（global variable）
局部变量（local variable）
对象（object）
对象是自我包含的数据集合，可以通过两种形式——属性（property）和方法（method）访问：
属性是隶属于某个特定对象的变量；
方法是知识某个特定对象才能调用的函数。
在JavaScript脚本里，属性和方法都需要使用如下所示的“点”语法来访问：
Object.property
Object.method()
一、用户定义对象（user-defined object）
利用JavaScript语言创建自己的对象。
JavaScript提供一系列预先定义好的对象，可以把这些对象直接用在自己的脚本里，这些对象称为内建对象（native object）。
二、内建对象（native Object）
Array数组就是一种JavaScript内建对象。Math 对象和Date 对象也是内建对象。
创建一个Array对象的新实例：
var beatles = new Array();
获取数组有多少个元素时：
beatles.length;
Math对象
var num = 7.651; var num = Math.round(num); alert(num);
Date对象
JavaScript解释器会自动使用当前日期和时间：
var current_date = new Date();
Date对象提供了 getDay（）、getHours（）、getMouth（），用来检索与特定日期有关的各种信息。
var today = current_date.getDay();
三、宿主对象（host Object）
由Web浏览器提供的预定义对象被称为宿主对象（host object）。主要包括Form、Image和Element。
document对象也可以用来获得关于某给定网页上的任何一个元素的信息。
四个非常实用的DOM方法：
getElementById
getElementsByTagName
getAttribute
setAttribute
DOM（Document Object Model）文档对象模型
D 文档
O 对象
M 模型
BOM （Window Object Model）浏览器对象模型
家谱树：parent （父）、child（子）、sibling（兄弟）
基本网页——购物清单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><!-- 视口标签 -->
<title>Shopping list</title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
</body>
</html>
节点（node）
文档是由节点构成的集合。
元素节点（element node）：p、ul……
文本节点（text node）：元素里面包含的文本。
属性节点（attribute node）： title……
CSS（层叠样式表）：继承（inheritance）
class属性：所有的元素都有class属性，不同的元素可以有同样的class属性值。
id属性：给网页里的某个元素加上一个独一无二的标识符。
getElementById（）方法
document.getElementById（id）；
示例
document.getElementById（"purchases"）;
getElementById（）方法将返回一个对象，可以用typeof操作符来验证。
<script type="text/javascript"> alert(typeof document.getElementById（"purchases"）); </script>
getElementsByTagName（）方法
element.getElementsByTagName（tag）;
示例
document.getElementsByTagName（"li"）;
getElementsByTagName（）方法将返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。也是只有一个参数的函数。
<script type="text/javascript"> alert(document.getElementsByTagName（"li"）.length); </script>
利用循环语句和typeof操作符去遍历这个数组的办法验证：
for（var i=0; i< document.getElementsByTagName（"li"）.length; i++）{ alert(typeof document.getElementsByTagName（"li"）[ i ]); }
赋值变量：
var items = document.getElementsByTagName（"li"）; for( var i=0; i < items.length; i++){ alert(typeof items[ i ]); }
获取某份文档总共有多少个元素节点：
alert（document.getElementsByTagName（"*"）.length）;
获取id属性purchase的元素包含着多少个列表项（li）：
var shopping = document.getElementById（"purchases"）; var items = shopping.getElementsByTagName（"*"）;
items数组的长度刚好与这份文档里的列表项元素的总数相等：
alert（items.length）;
证明items数组里的每个值确实是一个对象：
for( var i=0; i < items.length; i++){ alert(typeof items[ i ]); }
一份文档就是一棵节点树。
节点分为不同的类型：元素节点、属性节点和文本节点等。
getElementById（）方法将返回一个对象，该对象对应着文档里的一个特定的元素节点。
getElementsByTagName（）方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。
这些节点中的每个都是一个对象。
getAttribute（）方法
是一个函数，它只有一个参数——打算查询的属性的名字：
objece.getAttribute( attribute );
不能通过document对象调用，只能通过一个元素节点对象调用。
查询每个P元素的title属性：
var paras = document.getElementsByTagName（"p"）; for( var i=0; i< paras.length; i++ ){ alert( paras[ i ].getAttribute(" title ") ); }
只在title属性存在时弹出一条消息：
var paras = document.getElementsByTagName（"p"）; for( var i=0; i< paras.length; i++ ){ var title_text = paras[i].getAttribute(" title ") ; if( title_text != null ){ alert( title_text ); } }
简化：
var paras = document.getElementsByTagName（"p"）; for( var i=0; i< paras.length; i++ ){ var title_text = paras[i].getAttribute(" title ") ; if( title_text ) alert( title_text ); }
setAttribute（）方法
允许我们对属性节点的值做出修改。
只能通过元素节点对象调用的函数，但setAttribute（）方法需要我们向它传递两个参数：
object.setAttribute( attribute,value );
示例：检索id属性purchase，把title属性设置为a list of goods：
var shopping = document.getElementById("purchases"); shopping.setAttribute("title","a list of goods");
利用getAttribute（）方法来证明这个元素的title属性值确实发生了变化：
var shopping = document.getElementById("purchases"); alert（shopping.getAttribute("title")）; shopping.setAttribute("title","a list of goods"); alert（shopping.getAttribute("title")）;
p元素有了title属性，通过setAttribute（）方法来改变它的当前值：
var paras = document.getElementsByTagName（"p"）; for( var i=0; i< paras.length; i++ ){ var title_text = paras[i].getAttribute(" title ") ; if（title_text）{ paras[ i ].setAttribute("title","brand new title text"); alert（paras[ i ].getAttribute("title")）; } }
DOM的工作模式：先加载文档的静态内容，再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。
DOM其他属性与方法
nodeName
nodeValue
chileNodes
nextSibling
parentNode
示例：用JavaScript和DOM建立一个图片库
思想
编写一份优秀的标记语言文档。
编写一个JavaScript函数以显示用户想要查看的图片。
在标记语言文档里触发一个调用JavaScript图片显示的函数。
对这个JavaScript函数的功能进行扩展，这需要用到几个新的DOM方法。
编写标记语言文档
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><!-- 视口标签 --> <title>Image Gallery</title> </head> <body> <h1>Snapshots</h1> <ul> <li> <a href="images/fireworks.jpg" title="A fireworks display"></a> </li> <li> <a href="images/fireworks.jpg" title="A fireworks display"></a> </li> <li> <a href="images/fireworks.jpg" title="A fireworks display"></a> </li> <li> <a href="images/fireworks.jpg" title="A fireworks display"></a> </li> </ul> </body> </html>
把这份文档保存为gallery.html文件，图片保存在子目录images里。
当点击某个链接时，留在这个网页而不是转到另一个窗口。
当点击某个链接时，在这个网页上同时看到那张图片以及原有的图片清单。
需要做的几项改进：
通过增加一个”占位符“图片的办法在这个主页上为图片预留一个浏览区域。
在点击某个链接时，将拦截这个网页的默认行为。
在点击某个链接时，将把”占位符“图片替换为与那个链接相对应的图片。
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
通过改变”占位符“图片的src属性的办法将其替换为想要查看的那张图片：
function showPic（whichpic） whichpic.getAttribute("href"); var source = whichpic.getAttribute("href"); document.getElementById("placeholder"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); document.getElementById("placeholder").setAttribute("src",whichpic.getAttribute（"href"）);
1719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
