JavaScript 是世界上最流行的编程语言
JavaScript 是脚本语言
HTML 中的脚本必须位于 <script> 与 </script> 标签之间
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中
写入 HTML 输出
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
改变 HTML 内容
x=document.getElementById("demo"); //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
改变图片 match()是匹配方法
<img id="myimage" onclick="changeImage()" src="/i/eg_bulbon.gif">
element=document.getElementById('myimage');
if (element.src.match("bulbon"))//图片名字是否包含bulbon字符串
{
element.src="/i/eg_bulboff.gif";
}
改变 HTML 样式
x=document.getElementById("demo");//找到元素
x.style.color="#ff0000"; //改变样式
document.getElementById(id).style.property=new style;
document.getElementById("p2").style.color="blue";
document.getElementById('p1').style.visibility='hidden';
document.getElementById('p1').style.visibility='visible';
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
<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[0].innerHTML);
</script>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
验证输入
数字验证 isNaN(x)
E-mail 验证
输入的数据必须包含 @ 符号和点号(.)
同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
外部的 JavaScript
<script> 标签的 "src" 属性中设置该 .js 文件
<head>标签中如下引入
<script type="text/javascript" src="../js/myScript.js"></script>
在.js文件中 不能包含 <script> 标签 直接定义方法，不用写其他东西
JavaScript 对大小写敏感
对代码行进行折行 用于展示过长字符串 输出仍是 Hellow Word!
document.write("Hello \
World!");
js定义变量
一条语句，多个变量
var name="Gates", age=56, job="CEO";
横跨多行
var name="Gates",
age=56,
job="CEO";
声明新变量时，可以使用关键词 "new" 来声明类型：
JavaScript 变量均为对象,当声明一个变量时，就创建了一个新的对象
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
js数据类型 字符串、数字、布尔、数组、对象、Null、Undefined
字符串
var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';
小数
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
boolean
var x=true
var y=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"];
遍历数组
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + "<br>");
i++;
}
对象 使用{}来定义 常见三种方式
var person={firstname:"Bill", lastname:"Gates", id:5566};
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
获取对象属性
name=person.lastname; 或者
name=person["lastname"];
for/in 遍历对象
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
访问对象的方法objectName.methodName()
var message="Hello world!";
var x=message.toUpperCase();
函数
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
局部 JavaScript变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，只能在函数内部访问它。（该变量的作用域是局部的）。
可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
注：局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除
switch()方法 switch 语句来选择要执行的多个代码块之一
default 关键词来规定匹配不存在时做的事情
var day=new Date().getDay();
switch (day)
{
case 6:
x="Today it's Saturday";
break;
case 0:
x="Today it's Sunday";
break;
default:
x="Looking forward to the Weekend";
}
JavaScript 捕捉错误 Throw、Try 和 Catch
try
{
//在这里运行代码
}
catch(err)
{
alert(err.message)//在这里处理错误
}
throw 与 try 和 catch 一起使用能够控制程序流，并生成自定义的错误消息。
<script>
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>
添加和删除节点（HTML 元素）
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
提示：DOM 需要知道删除的元素以及它的父元素，不能直接删除
parent.removeChild(child);√removeChild(child)×
解决方案：找到希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
js事件
onclick事件
onload 事件
onload 当页面完成加载时的事件。
onunload 事件
onfocus 当输入字段获得焦点时的事件。
onchange 事件
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分
使用 JavaScript 来向 HTML 元素分配事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
