一、JavaScript基础
1.写入HTML输出
2.对事件作出反应
3.改变HTML内容
4.改变HTML图像
5.改变HTML样式
6.验证输入
<script>
Function myFunction(){
Var x=document.getElementById("demo").value;
If(X==""||isNaN(x)){
Alert("not mumeric");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
7.外部的JavaScript
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
8.通过指定的id来访问html元素，并改变内容
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
Document.getElementById("demo").innerHTML="my first JavaScript";
</Script>
</body>
</html>
9.document.write()仅向文档输出写内容，如果在文档已完成加载后执行document.write，整个hrml页面将被覆盖。
<!DOCTYPE html>
<html>
<body>
<h1> bla bla</h1>
<p> bla bal paragraph</p>
<button onclick="myFunction()">balbal</button>
<script>
Function myfunction()
{
Document.write("文档消失了");
}
</script>
</body>
</html>
10.JavaScript变量和数据类型
Var x = bla;变量必须以字母开头；变量也能以$和_符号开头；变量名称对大小写敏感。
文本值：name="bill gates"
Var pi=3.141592653589793
Var name=“bill gates”
var name="Gates", age=56, job="CEO";
var
name="Gates",
age=56,
job="CEO";
var carname; carname= 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;
var y=123e5; // 12300000
var z=123e-5;
JavaScript中布尔值
Var x = true；
Var y = false；
JavaScript中的数组
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"];
JavaScript对象和属性寻址
var person={firstname：“bill",lastname:"gates",id:5566};
Var person={
Firstname:"bill",
Lastname:"gates",
Id:5566
};
Name=person.lastname;
Name=person["lastname"];
Undefined和Null
Undefined这个变量不含有值，可以通过将变量设置为null来清空变量
Cars = null;
Person = null;
声明变量类型
Var carname = new String;
Var x = new Number;
Var y = new Boolean;
Var cars = new Array;
Var person = new Object;
<p
id="demo"></p>
var
carname="Volvo";
document.getElementById("demo").innerHTML=carname;
11.对象与函数
函数语法
Function funtionname（）
{
实体
}
Function funtionname（var1 var2）
{
实体
}
function myfountion()
{
实体
return ;
}
javaScript 中变量作用域和生命周期
局部变量：函数快内 函数运行以后被删除
全局变量：整个页面的脚本都可以访问 页面关闭以后被删除
字符创运算符：
txt1="What a
very";
txt2="nice day";
txt3=txt1+txt2;
如果把数字和字符串相加最后结果是字符串
12.JavaScript 错误 throw、 try catch
13.JavaScript表单验证
表单验证是数据被送到服务器之前对HTML表单中的数据进行验证。
1.用户是否已填写表单中的必填项目
fuction validate_required(field,alerttxt)
{
with(field)
{
if(value==null||value="")
{
alert(alerttxt);
return false;
}else{
return true;
}
}
}
<html>
<head>
<script type="text/javascript>
function validate_required(field,alerttxt)
{
with(field)
{
if(value==null||value=="")
{
alert(alerttxt);
return false;
}
}
}
function validate_form(thisform)
{
with(thisform)
{
if(validate_required(email,"must be filled out!")==false)
{
email.focus();
return false;
}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email:<input type="text" name="email" size="30">
<input type="submit" vlue="submit">
</form>
</body>
</html>
2.用户输入的邮件地址是否合法
fuction validate_email(field,alerttxt)
{
with(field)
{
apos=value.indexof(@);
dotpos=value.lastIndexOf(".")
if(apos<1||dotpos-apos<2)
{
alert(alerttxt);
return false;
}else
{
return true;
}
}
}
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with
(field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return
false}
else {return true}
}
}
function
validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail
address!")==false)
{email.focus();return
false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return
validate_form(this);" method="post">
Email: <input type="text" name="email"
size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
3.用户是否已输入合法的日期
4.用户是否在数据域中输入文本。
二、JS HTML DOM
1.DOM 文档树
改变HTML元素的内容（innerHTML）
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
2.改变HTML元素的样式（CSS）
Document.getElementById(id).style.property=new style;
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<h1 id="id1">My Heading 1<h/1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
</button>
3.对HTML DOM 事件作出反应
当用户点击鼠标
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交HTML表单时
当用户触发按键时
1.HTML事件属性
<button onclick="displayDate()">点击这里</button>
2.使用javascript 向HTML DOM来分配事件(向button元素分配onclick事件)
<script>
document.getElementById("myBtn").onclick=function()
{
displayDate();
}
3.onload和onunload事件
onload和onunload事件会在用户进入或离开页面时被触发。
onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确的版本。
onload和onunload事件可用于处理cookie。
<body onload="checkCookies()">
4.onchange事件
当用户改变输入字段的内容时，会调用upperCase（）函数。
<input type="text" id="fname" onchange="upperCase()">
5.onmouseover和onmouseout事件
用户鼠标移至html元素上方或移除元素时触发函数
6.onmousedown、onmouseup以及onclick事件
点击鼠标按钮：onmousedown
释放鼠标按钮：onmouseup
完成鼠标点击时;onclick
4.添加删除HTML元素
创建新的HTML元素，然后向一个已存在的元素追加该元素
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
var para=document.createElement("p");
//创建新的<p>元素
var node=document.createTextNode("这是新段落");
//创建文本节点
para.appendChild(node);
//向P元素追加文本节点
var element=document.getElementById("div1");
//找到一个已有的元素
element.appendChild(para);
//向这个已有的元素追加新元素
</script>
删除已有的元素
<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>
5.JavaScript对象
内建对象：string Date Array.
访问对象属性：objectName.porpertyName
创建新对象：1.定义并创建对象的实例。2.使用函数来定义对象，然后创建新的对象实例。
person = new Object();
person.firstname="bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
person={firstname:"John",lastname:"Doe",age:50,eyecolot:"blue"};
对象构造器
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
实例化对象
var myFountion=new person("bill","gates",56,"blue");
var myMother=new person("steve","Jobs",48,"greeen");
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
x=person.firstname;
对象添加方法
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
this.changeName=changeName;
funtion changeName(name)
{
this.lastname=name;
}
myMother.changeName("Ballmer");
循环遍历对象的属性
var person={fname:"Bill",lname:"Gates",age:56};
for (x in
person)
{
txt=txt + person[x];
}
1.JavaScript Number对象
JavaScript数字可以使用也可以不使用小数点来书写，支持指数表达。
所有JavaScript数字均为64位。数字精度整数为15位。小数的最大位数是17。
十六进制和八进制数。
var y=0377;
var z=0xFF;
属性和方法
MAX VALUE 可表示的最大的数
MIN VALUE 克表示最小的数
NEGATIVE INFINITIVE 负无穷大 溢出时返回该值
POSITIVE INFINITIVE 正无穷大，溢出时返回该值
NAN 非数字值
prototype 使有能力向对象添加属性和方法
constructor 返回创建此对象的Number函数的引用
方法
toString（）把数字转换成字符串，使用指定的基数把对象的值
toLocalString（） 把数字转换成字符串，使用本地数字格式顺序
toExponential（）转换成位指数计数法
toFixed（）把数字转换成字符串，结果的小数点后有指定位数的数字
toPrecision（）把数字格式化为指定的长度
valueOf（）返回一个Number对象的基本数字值
2.字符串对象http://www.w3school.com.cn/jsref/jsref_obj_string.asp
2.1计算字符串的长度：Var s=“巴拉巴拉” s.length();
2.1为字符串添加样式：
s.big();大字体。
s.small();小字体。
s.bold();加粗。
s.italics(); 倾斜。
s.blink();闪烁。
s.fixed();
s.striked();删除
s.fontcolor("Red");颜色
s.fontsize(16);字号
2.3indexOf（）方法
定位字符串中某一个指定的字符首次出现的位置。
match（）方法
如何使用match（）来查找字符串中特定的字符，兵器如果找到的话，则返回这个字符。
replace（）
使用replace（）方法在字符串中用某些字符替换另一些字符。
str.replace(/Microsoft/,"W3School")
3.Date对象参考手册http://www.w3school.com.cn/jsref/jsref_obj_date.asp
Date（）；返回当日的日期和时间。
getTime();返回从1970年1月1日至今的毫秒数
setfullYear();设置具体的日期
toUTCstring();将当日的日期转换为字符串。
getDate（）；使用方法和数字来显示星期，不仅仅是数字。获得星期中的第几天。
获得钟表：
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
m=checkTime(m)
s=checkTime(s)
4.数组对象http://www.w3school.com.cn/jsref/jsref_obj_array.asp
创建数组
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for in声明
For(x in mycars)
{
document.write(mycars[x]+"<br/>")
}
合并两个数组
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1]="John"
arr[2]="Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1]="Adrew"
arrr[2]="Martin"
document.write(arr.concat(arr2))
</script>
用数组的元素组成字符串
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br/>");
document.write(arr.join("."));
文字数组 sort
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br/>")
document.write(arr.sort())
数字数组 sort
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b;
}
var arr = new Array(6)
arr[0]="1"
arr[1]="50"
arr[2] = "10"
arr[3] = "10"
arr[4] = "10"
arr[5] = "10"
5.Boolean 对象
用于非逻辑值转换为逻辑值（true和false）
创建逻辑值为false的对象：
var myBoolean = new Boolean();
=new Boolean(0);
=new Boolean(null);
=new Boolean("");
=new Boolean(false);
=new Boolean(NaN):
创建逻辑值为true的对象：
var
myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");
6.Math对象
document.write(Math.round(4.7))
document.write(Math.random())
document.write(Math.floor(Math.random()*11))
7.JavaScript RegExp对象
用于规定在文本中检索的内容
通过new关键字定义RegExp对象。
var patt1 = new RegExp("e");
RegExp对象的方法：
test（）；检索字符串中的指定值。
exec（）；检索字符串中的指定值，返回值是被找到的值。如果没有发现匹配，返回null。
compile（）；用于改变RegExp。既可以改变检索模式，也尅添加或删除第二个参数。
// 搜索模式由e变为d。
var patt1 = new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
8.windows浏览器对象
window对象，表示浏览器窗口；
所有javascript全局对象，函数以及变量均称为window对象的成员。
全局变量是window对象的属性；
全局函数是window对象的方法；
HTML DOM的document也是window对象的属性之一。
8.1window尺寸（窗口尺寸不包括工具栏和滚动条）
window.innerHeight:浏览器窗口的内部高度。
window.innerWidth ：浏览器窗口内部宽度。
window.open() 打开窗口
window.close（） 关闭窗口
window.moveTo() 移动当前窗口
window.resizeTo() 调整当前窗口大小
9.window.screen对象包含有关用户的屏幕信息。
sceeen.availWidth 可用的屏幕宽度（以像素计，减去界面特性，比如窗口任务栏）
screen.vaaiWidth 可用的屏幕高度
10.Window.Location 对象用于获得当前页面的地址（URL），并把浏览器重定向到新的页面
location.hostname 返回web主机的域名
location。pathname返回当前页面的路径和文件名
location.port返回web主机的端口（80,443）
location。protocol返回所使用的web协议（http：//或https：//)
location.href 属性返回当前页面的整个URl。
Location.pathname属性返回URL的路径名
Window.Location Assign location.assign()方法加载新的文档。
10.window.History
window.history 对象在编写时可不使用window这个前缀。
history.back（）与在浏览器点击后腿按钮相同。
history.forward() 与在浏览器中点击按钮向前相同。
11.window.navigator（包含有关访问者浏览器的信息）
window.navigator对象在编写时可不使用window这个前缀。
<div id="example"></div>
<script>
txt
= "<p>Browser CodeName: " + navigator.appCodeName +
"</p>";
txt+= "<p>Browser Name: " + navigator.appName +
"</p>";
txt+= "<p>Browser Version: " + navigator.appVersion +
"</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled +
"</p>";
txt+= "<p>Platform: " + navigator.platform +
"</p>";
txt+= "<p>User-agent header: " + navigator.userAgent +
"</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage +
"</p>";
document.getElementById("example").innerHTML=txt;
</script>
12.JavaScript信息框
三种消息框：警告框、确认框、提示框。
警告框：alert("文本");
确认框：confirm（“文本”）；
提示框：prompt（“文本”，“默认值”）；
13.JavaScript计时事件Timming
通过计时事件，做到在一个设定的时间间隔之后执行代码，
计时事件方法：
setTimeout() 未来的某时执行的代码
clearTimeout()取消setTimeout（）
var t = setTimeout("javascript语句",毫秒）
clearTimeout(t);
14.Cookies
是存储在访问者计算机中的变量，每当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie。可以使用JavaScript来创建和获得cookie。
名字cookie，密码cookie，日期cookie。
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name
+ "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1)
c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function
setCookie(c_name,value,expiredays)
{
var exdate=new
Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function
checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again
'+username+'!')}
else
{
username=prompt('Please enter your
name:',"")
if (username!=null &&
username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body
onLoad="checkCookie()">
</body>