1.在HTML中添加JavaScript代码
head或者body标签里，大部分代码一般在head，函数调用在body里。
JavaScript code here.
</SCRIPT>
2.调用外部脚本文件
3.用脚本输出网页
4.注释
单行：//comment here
多行：/*comment here*/
5.变量定义和赋值
没有数型之分，可修改，字符串用"string"或者’string’，正则表达式用/string/。
转义符：，退格：，换页：f，换行：
，回车：
，制表： ，bool：true|false，空：null。
6.函数构造和使用
构造：
{func_body;
return ret_value;}
调用：
JavaScript严格区分大小写，变量有作用域，函数体内重新声明可避免修改全局变量。
7.运算符和程序控制语句
和C几乎完全一样。
8.事件句柄
JavaScript预定义关键字，用来处理网页上事件的激发，即是对某个动作的反应，如：鼠标点击，滑过，获得焦点等。
使用举例：
点击按钮可弹出一个窗口，内容为：Hi!。
常用句柄：
onClick,onMouseOver,onMouseOut,onLoad,onUnload,onFocus,onBlur,onChange,onSubmit,onAbort,onError,onDragDrop,onKeyDown,onKeyPress,onKeyup,onMouseDown,onMouseUp,onMouseMove,onReset,onResize,onSelect.
9.对象知识
建立对象(用构造函数)：
{properties go here
this.property1=para1;
this.property2=para2;
methods go here
this.method1=normal_func_in_thispage_without_bracket;}
对象实例化：
建立对象(对象初始化)：
10.预定义的JavaScript对象
Navigator对象：访问客户端浏览器属性，使用方法：
属性：navigator.property,
property主要有：
appCodeName,appName,appVersion,language,mimeTypes,platform,plugins,userAgent。
方法：navigator.method(),method()主要有：
javaEnabled(),plugins.refresh(),preference(),savePreferences()。
JavaScript有很多非常有用的预定义对象。
11.Document对象
属性：
alinkColor,anchors,applets,bgColor,cookie,domain,embeds,fgColor,formName,forms,images,lastModified,layers,all,linkColor,links,plugins,referrer,title,URL,vlinkColor。
方法：
open(),close(),write(),writeln()。
12.Window对象
属性：
closed,defaultStatus,frames,length,location,name,opener,parent,self,status,top。
方法：
Alert(),confirm(),find(),print(),prompt(),open(),close(),blur(),focus(),moveBy(),moveTo(),resizeBy(),resizeTo(),scrollBy(),scrollTo(),setInterval(),cleanInterval(),setTimeout(),cleanTimeout()。
其实里面有好多方法是不适合使用的，因为涉及到对用户窗口的操作，现在的倾向是尽量少控制用户窗口。
13.数组的定义和操作
JavaScript里的数组类似于对象，有属性和方法。
定义：var array_name=new Array(elem1,elem2,...);
访问：array_name[index]
属性：constructor,index,input,length,prototype。
方法：concat(),join(),pop(),push(),reverse(),shift(),unshift(),slice(),splice(),sort()。
14.关联数组
可以将两个数组关联起来，用一个的元素来代替另一个的索引号。
var array_name＝new Array();
array_name["Japanese"]="Evil";
array_name["American"]="Idiot";
15.数学和日期对象
Math属性：
E,LN10,LN2,LOG10E,LOG2E,PI,SQRT2,SQRT1_2。
Math方法：
abs(),acos(),asin(),atan(),ceil(),cos(),exp(),floor(),log(),max(),min(),pow(),random(),round(),sin(),sqrt(),tan()。
Date对象，必须先创建一个实例：var instance_name=new Date();
属性：
constructor,prototype。
方法：
getDate(),getDay(),getHours(),getMinutes(),getMonth(),getSeconds(),getTime(),getTimezoneOffset(),getYear(),getFullYear(),parse(),setDate(),setHours(),setMinutes,setMonth(),setSeconds(),setTime(),setYear(),setFullYear(),toGMTString(),toLocalString()。
16.字符串对象
实例化：var instance_name=new String("string");
属性：
constructor,length,prototype。
方法：
anchor(),big(),blink(),bold(),charAt(),charCodeAt(),concat(),fixed(),fontcolor(),fontsize(),fromCharCode(),indexOf(),italics(),lastIndexOf(),link(),match(),replace(),search(),slice(),small(),split(),strike(),sub(),substr(),substring(),toString(),toLowerCase(),toUpperCase()。
17.表单操作和框架操作
JavaScript可以使用document的属性进行表单和框架的操作，其中表单和框架也各自有自己的属性和方法。
18.Cookies的使用
建立：document.cookie="your_cookies";
其中your_cookies格式为：name:value&name:value，其中分隔符可用任何间隔符，但不能使用空格、逗号和分号。如果要使用它们，需要使用escape(var_string)将字符串转为CGI能接受的字符代码。
添加失效日期：在cookie里添加一个name/value对，expires:GMTdate。
读cookie：可直接读，也可用unescape()转换，然后用split()将其分割成需要的变量。
19.图像对象
实例化：var pic_name=new Image(width,length);
属性：
name,src,width,height,border,hspace,vspace,lowsrc,complete。
20.eval()函数
eval()可以将作为参数发给它的表达式按字符串形式求值。
eval("1+1")返回2；
var todo="alert"；
eval("window."+todo+"(’Hi!’);");会执行window.alert(’Hi!’);
这样非常有利于函数的动态调用。
正则表达式
正则表达式在验证输入错误的地方有非常好和方便的用处
定义正则表达式：
var var_name=/your_pattern/flags;
也可以用构造函数来创建实例：var pattern = new RegExp("your_pattern");
用正则表达式测试字串，var_name.test(string)返回true|false。
标志(flags)：
i：使匹配忽略大小写
g：进行全局匹配测试
ig：在全局进行匹配测试
正则表达式对象的属性
1.事件：即onclick=“” ，一个事件可以绑定多个函数，中间用分号隔开。
2.marquee的函数，this.stop()-暂停，this.start()-开始。
3.js中两个常用的函数:
|
1
2
3
|
document.getElementById(“sid”);//返回id属性值等于sid的第一个对象的引用，假如对应的为一组对象，则返回该组对象中的第一个。
document.getElementsByName(“cb”);//和getElementById()方法相似，但是它查询元素的name属性，而不是id属性，另外，因为一个文档中的name属性可能不唯一（如HTML表单中的单选按钮通常具有相同的name属性）所有的getElementsByName()方法返回的是元素的数组，而不是一个元素，如果一个文档中有两个以上的标签Name相同，那么getElementsByName()就可以取得这些元素组成的一个数组。
|
4.常用<span>来表示行内元素，它没有固定样式，只有对它进行样式定义时，才会有相应表现。
5.分别用span和a href制作一个点击响应链接:
|
1
2
3
|
<a
href=”#”onclick=”hiddenAll();”>
<span
onclick=”hiddenAll();” style=”cursor:pointer;”> //用cursor:pointer可以定义鼠标指向链接时显示手形形状
|
6.定义一个点击后可以展开相应结点的树
js：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script
language=”javascript”>
function showInfo(str){
for(var i=1;i<=3;i++)
document.getElementById(“tr”+i).style.display=”none”;//默认隐藏所有子节点
document.getElementById(str).style.display=”block”;//展开点击结点的所有子节点
}
</script>
|
html:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div
id="tr1" onclick="showInfo(‘tr1‘)">
<div
id="tr1-1"></div>
<div
id="tr1-2"></div>
</div>
<div
id="tr2" onclick="showInfo(‘tr2‘)">
<div
id="tr2-1"></div>
<div
id="tr2-2"></div>
</div>
<div
id="tr3" onclick="showInfo(‘tr3‘)">
<div
id="tr3-1"></div>
<div
id="tr3-2"></div>
</div>
|
7.内置的日期对象：
|
1
2
3
4
5
|
function showDate(){
var d=new Date();
d.getFullYear();//取得完整年份，若用getYear则只显示后两位,如2010只显示10
d.getMonth()+1;//取得正确月份，在js中默认的月份按索引值
}
|
8.判断电子邮件合法性：
|
1
2
3
4
5
|
verifyEmail(){
var em=document.getElementById("str").value;
if(em.indexOf("@")==-1)
alert("缺少@");
}
|
9.替换文本框的值：
|
1
2
3
4
|
replaceText(){
document.getElementById("money").value=document.getElementById("money").value.replace("delete","删除");//把前者转换为后者
}
|
10.正则表达式：
|
1
2
3
4
5
|
regFun(){
var pattern
= /^[0-9]$/; //正则表达式用"/^"和"$/"包含起来
var v
= "123456";
var flag=pattern.test(v);
}
|
1.js中的类用function来定义，这和java中的class是等价的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
//js面向对象和所有面向对象语言一样，都是通过实例化方法访问
function HeapObj(){//protytype方法创建的对象放在堆内存中
HeapObj.prototype.username="疯狂骇客";//普通属性
var HeapObj.girlfriend="还没有哦";//私有属性，不允许子类及外部类访问
HeapObj.cityName="福州";//静态属性，只能用类名调用，调用前必须先将类实例化，如new
HeapObj()，否则浏览器无法正常显示
HeapObj.prototype.sayHello=sayHello_fun;//调用外部函数
HeapObj.sayHello();
HeapObj.prototype.sayHello=function(){//动态方式创建函数，常用于重写父类方法
alert("动态方式创建函数");
}
}
function sayHello_fun(){//函数体写在对象外
alert("调用外部函数")
}
function childClass(){
childClass.prototype=new HeapObj();//子类继承父类
}
function StackObj(){//this创建的对象放在栈内存中
this.name="小新";
this.age=18;
}
|
2.JSON对象：
|
1
2
3
4
5
6
7
8
9
|
var jobj={
name:"张三",
sex:"男",
age:33,
sayHello:function(){alert("Hello!");},//定义方法
subObj:{//定义子对象
subName:"小A";
}
}
|
|
1
|
|
3.实现一个简单的对话框:
js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function run(){
window.alert=function(s){//这里的s是下面的alert("hahaha")中的字符串，作为值传入，这里对window对象中的alert方法进行了重载
var o=document.getElementById("Layer1");
o.innnerHTML="<input
name=a type=button value=关闭 onclick=‘hiddenWindow()‘/>"+s;
o.style.display="block";
}
alert("haha");//调用重载后的alert函数
}
function hiddenWindow(){
var o=document.getElementById("Layer1");
o.style.display="none";
}
|
html:
|
1
|
<div
id="Layer1"></div>
|
|
1
|
<input
type=”button” onclick=”run()”/>
|