javascript

来源：互联网发布：国外域名国内备案编辑：程序博客网时间：2024/06/05 05:10

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=newString;

var x=newNumber;

var y=newBoolean;

var cars=newArray;

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!";

改变属性值：

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';

事件之点击：

<h1onclick="changetext(this)">请点击该文本</h1>

functionchangetext(id) {

id.innerHTML="谢谢!";

}

<h1onclick="this.innerHTML='hello!'">请点击这段文本!</h1>

事件之分配事件：

document.getElementById("myBtn").onclick=function(){displayDate()};

事件之onload：

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload与jquery的ready是有区别的，前者是浏览器还未加载document，而ready是已经加载完了document。

事件之onchange

事件之onmouseover和onmouseout：

onmouseover 和onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

事件之onmousedown、onmouseup 以及 onclick 事件：

onmousedown,onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

事件之onfocus

事件之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网站

0 0