1. HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
2. 那些老旧的实例可能会在<script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
3. 浏览器是按照jsp或者html的顺序执行的,比如有script和html,谁在前面就先执行谁。
4. 在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。提示:外部脚本不能包含 <script> 标签。
5. 访问HTML 元素:document.getElementById(id)。
6. document.write()用法说明:可以向body中写元素,但是如果文档已经加载完,再调用此方法,将导致原来的内容被覆盖,如在方法中调用此方法。
7. 分号用于分隔JavaScript 语句。您也可能看到不带有分号的案例。在 JavaScript 中,用分号来结束语句是可选的。
8. JavaScript 对大小写是敏感的。
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:alert("df\
df");
而alert("dfdf"\
);是不对的。
9. 提示:JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
10. 注释: // 或/* */。
11. Javascript变量:变量必须以字母开头;变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做);变量名称对大小写敏感(y 和 Y 是不同的变量)。
12. 一条语句,多个变量:var name="Gates", age=56,job="CEO"。
13. 在执行过以下语句后,变量 carname 的值将是 undefined:var carname;
14. JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x // x 为 undefined
var x =6; // x 为数字
var x ="Bill"; // x 为字符串
x的值以最后一次为准。
15. 字符串可以用单引号也可以用双引号。
16. 极大或极小的数字可以通过科学(指数)计数法来书写:如var z = 123e-5;
17. 数组的定义方式:
1) var cars=new Array();
cars[0]="Audi";
2) var cars=newArray("Audi","BMW","Volvo");
3) varcars=["Audi","BMW","Volvo"];
18. JavaScript 对象
varperson={firstname:"Bill", lastname:"Gates", id:5566};
或
var person={
firstname :"Bill",
lastname : "Gates",
id : 5566
};
或
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
或使用对象构造器构建对象
functionperson(firstname,lastname) {
this.firstname=firstname;
this.lastname=lastname;
//方法
functionchangeName(name) {
this.lastname=name;
}
}
var myFather=new person("Bill","Gates");
在定义完对象之后,可以再向其中加属性和方法
访问对象的方式:name=person.lastname;或name=person["lastname"];
19. Undefined 和 Null:前者表示变量没有值,当想要清空某个变量时,可以用Null对其赋值。
20. 可以使用new声明变量:
var carname=new String;
var x=new Number;
var y=new Boolean;
var cars=new Array;
var person= new Object;
21. JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。在 JavaScript 中,对象是拥有属性和方法的数据。字符串对象拥有内建的属性 length,字符串对象同时拥有若干个内建的方法,如txt.indexOf()、txt.replace()、toUpperCase等。
22. 函数的定义:
不带返回值的函数:functionmyFunction(name,job){alert("Welcome");}
带返回值的函数:functionmyFunction(){var x=5;return x;},也可以使用return;语句停止函数。
23. 局部变量与全局变量:
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。如:carname="Volvo";将声明一个全局变量 carname,即使它在函数内执行。
24. 运算符:==表示判断值是否相等,===便表示判断值和类型是否相等。也支持variablename=(condition)?value1:value2。
25. Javascript支持和java一样的ifelse方式,和switch方式。
26. 循环
1) For循环
for (var i=0; i<5; i++) {
x=x + "The number is " + i +"<br>";
}
2) For/In 循环
varperson={fname:"John",lname:"Doe",age:25};
for (x in person) {
txt=txt + person[x];
}
3) While循环和java中的一样。
在循环中也可以使用break和continue语句。
27. 异常捕获
try {
//在这里运行代码
}
catch(err) {
//在这里处理错误
err.message:为错误信息
}
抛出异常并捕获
try {
varx=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){
vary=document.getElementById("mess");
y.innerHTML="Error: " + err +".";
}
28. HTML DOM
DOM 是 W3C(万维网联盟)的标准,该标准被分为核心dom、html dom和xml dom。HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。在html中所有的东西都视为节点,包括文本节点。所有 HTML 元素被定义为对象。
当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObject Model)
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
JavaScript选择器:
通过 id 找到 HTML 元素:
varx=document.getElementById("intro");(返回的是元素的对象)
通过标签名找到 HTML 元素:
varx=document.getElementById("main");
vary=x.getElementsByTagName("p");
z=y[1];:获取第一个p标签,下标是从0开始的。
z.length,也可以用for循环遍历z
通过类名找到 HTML 元素:
通过类名查找 HTML 元素在 IE5,6,7,8 中无效。
改变Html内容:
document.getElementById("p1").innerHTML="Newtext!";
改变属性值:
<img id="image"src="smiley.gif">
document.getElementById("image").src="landscape.jpg";
改变 HTML 样式:
document.getElementById("p2").style.color="blue";
显示或隐藏:
document.getElementById('p1').style.visibility='hidden';
document.getElementById('p1').style.visibility='visible';
事件之点击:
<h1οnclick="changetext(this)">请点击该文本</h1>
functionchangetext(id) {
id.innerHTML="谢谢!";
}
<h1οnclick="this.innerHTML='hello!'">请点击这段文本!</h1>
事件之分配事件:
document.getElementById("myBtn").οnclick=function(){displayDate()};
事件之onload:
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。onload与jquery的ready是有区别的,前者是浏览器还未加载document,而ready是已经加载完了document。
事件之onchange
<input type="text"id="fname" οnchange="upperCase()">
事件之onmouseover和onmouseout:
onmouseover 和onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
事件之onmousedown、onmouseup 以及 onclick 事件:
onmousedown,onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
事件之onfocus
<input type="text"οnfοcus="myFunction(this)">
事件之onkeyup
捕获键盘事件
一些常用的 HTML DOM 方法:
getElementById(id) - 获取带有指定 id 的节点(元素)
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild(para,child) 替换子节点。
insertBefore(para,child) 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
一些常用的 HTML DOM 属性:
innerHTML - 节点(元素)的文本值
parentNode- 节点(元素)的父节点
firstChild
lastChild
childNodes- 节点(元素)的子节点
attributes- 节点(元素)的属性节点
nodeName属性规定节点的名称。
nodeValue 属性规定节点的值。
nodeType 属性返回节点的类型。
document.body- 文档的主体
document.title-文档的标题
document.URL-当前文档的url
document.domain-当前文档的url的域名
还有很多例子在w3school网站上。
29. Javascript中的方法
JavaScript 是面向对象的语言,但JavaScript 不使用类。
在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
JavaScript 基于 prototype,而不是基于类的。
关于Javascript中的方法以及prototype的使用,见博客:
http://blog.csdn.net/tianyitianyi1/article/details/6929916
30. Javascript中内置的对象:
数字、字符串、日期、数组等可参考w3school使用(javascript帮助文档)
31. RegExp对象的使用
RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。可参考w3school使用(javascript帮助文档)
32. Window对象
浏览器对象模型 (BOM) 使JavaScript 有能力与浏览器“对话”。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一。
window.document.getElementById("header")
等价于
document.getElementById("header");
window的尺寸:
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于InternetExplorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight- 浏览器窗口的内部高度
window.innerWidth- 浏览器窗口的内部宽度
对于 InternetExplorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
window的其他方法:
window.open()- 打开新窗口
window.close()- 关闭当前窗口
window.moveTo()- 移动当前窗口
window.resizeTo()- 调整当前窗口的尺寸
33. Window Screen对象
在编写时可以不使用 window 这个前缀。
获取屏幕可用宽度:screen.availWidth
获取屏幕可用高度:screen.availHeight
34. Window Location对象
在编写时可以不使用 window 这个前缀。用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.href:返回当前页面的 URL
location.hostname返回 web 主机的域名
location.pathname返回当前页面的路径和文件名
location.port返回 web 主机的端口 (80 或 443)
location.protocol返回所使用的 web 协议(http:// 或 https://)
location.assign()将当前页面转为新的文档。
35. window.history 对象或者history 对象
history.back()方法加载历史列表中的前一个 URL。
historyforward() 方法加载历史列表中的下一个 URL。
36. window.navigator对象或者navigator对象
该对象包含有关访问者浏览器的信息。
navigator.appCodeName:返回浏览器的代码名。
还有很多属性参照(javascript帮助文档)
37. JavaScript 消息框
可以在 JavaScript 中创建三种消息框:
警告框:alert("文本")
确认框:
var r=confirm("Press a button!");
if (r==true) {
alert("You pressedOK!");
}
else {
alert("You pressedCancel!");
}
提示框:
varname=prompt("请输入您的名字","BillGates")
if(name!=null && name!="") {
document.write("你好!" +name + " 今天过得怎么样?")
}
38. JavaScript 计时
在JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setTimeout():var t=setTimeout("javascript语句",毫秒)
clearTimeout():clearTimeout(t)
39. JavaScript Cookie
参见(javascript帮助文档)
参考资料:w3school网站