JavaScript学习
2016-07-27 16:20
393 查看
前端知识包括html、css等多数整理自W3School手册！
JavaScript是属于网络的脚本语言。JavaScript被数百万的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript：写入HTML输出
document.write(“<h1>This is a heading</h1>”);
提示：只能在HTML输出中使用document.write。如果在文档加载后使用该方法，会覆盖整个文档。
JavaScript：对事件作出反应
<button type=”button” onclick=”alert(‘Welcome’)”>点击这里</button>
alert()函数咋JavaScript中并不常用，但它对于代码测试非常方便。
onclick事件。
JavaScript：改变HTML内容
x = document.getElementById(“demo”) //查找元素
x.innerHTML = “Hello JavaScript”; //改变元素
document.getElementById()方法是HTML DOM中定义的，DOM(文档对象模型)是用以访问HTML元素的正视W3C标准。
JavaScript：改变HTML图像
JavaScript能够改变任意HTML元素的大多数属性，不仅仅是图片。
本例动态改变HTML<image>的来源(src):The Light bulb
点击灯泡就可以打开或关闭这盏灯。
<!DOCTYPE html>
<html><body>
<script>
function changeImage(){
element=document.getElementById('myimage')
if (element.src.match("bulbon")) {
element.src="../i/eg_bulboff.gif";
}else{
element.src="../i/eg_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="../i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body></html>
JavaScript：改变HTML样式
改变HTML元素的样式，属于改变HTML属性的变种。
x = document.getElementById(“demo”) //找到元素
x.style.color = “#ff0000”; //改变样式
JavaScript：验证输入(常用于验证用户的输入)
if isNaN(x) { alert(“No Numeric”) };
提示：JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。Java（由 Sun 发明）是更复杂的编程语言。ECMA-262 是 JavaScript 标准的官方名称。
JavaScript的使用：
HTML中的脚本必须位于<script>与</script>标签之间。
脚本可被放置在HTML页面的<body>和<head>部分中。
可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。 把JavaScript放到了页面代码的底部，这样就可以确保在<p id=”demo”>元素创建之后再执行代码,因为JavaScript语句中使用了demo。
外部的JavaScript：也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码，外部JavaScript文件的文件扩展名是.js
<body>
<script src="myScript.js"></script>
</body>
在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。 提示：外部脚本不能包含 <script> 标签
<body>中的JavaScript：JavaScript语句会在页面加载时执行。
<body>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script></body>
JavaScript通常用于操作HTML元素：如需从JavaScript访问某个元素，可以使用document.getElementById(id)方法。请使用“id”属性来标识HTML元素。
写到文档输出：document.write(“<p>My First JavaScript</p>”);
请使用document.write()仅仅向文档输出写内容。如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖。
JavaScript语句：向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
JavaScript变量：变量是存储信息的容器。
· 变量必须以字母开头
· 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
· 变量名称对大小写敏感（y 和 Y 是不同的变量）
提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。
使用var关键词来声明变量。可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：var name=”Gates”,age=56,job=”CEO”;
JavaScript数据类型：字符串、数字、布尔、数组、对象、Null、Undefined。
JavaScript拥有动态类型，这意味着相同的变量可用作不同的类型。
var x; //x为Undefined
var x = 6; //x为数字
var x = “Bill”; //x为字符串
JavaScript字符串可以是引号中的任意文本。可以使用单引号或双引号。
JavaScript对象属性有两种寻址方式：
name = person.lastname;
name = person[“lastname”];
声明新变量时，可以使用关键词 "new" 来声明其类型。JavaScript 变量均为对象。当声明一个变量时，就创建了一个新的对象。
JavaScript对象：JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。
JavaScript函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法：函数就是包裹在花括号中的代码块，前面使用了关键词
带有返回值的函数：通过使用return语句就可以实现。在使用return语句时，函数会停止执行，并返回指定的值。整个JavaScript并不会停止执行，仅仅是函数。JavaScript将继续执行代码，从调用函数的地方。
如果把值赋给尚未声明的变量，该变量将自动作为全局变量声明。即使它在函数内执行。
如果把数字与字符串相加，结果将成为字符串。
比较运算符= = =：全等（值和类型）。
JAvaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。
通过HTML DOM，可访问JavaScript HTML文档的所有元素。
HTML DOM（文档对象模型）：当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
· JavaScript 能够改变页面中的所有 HTML 元素
· JavaScript 能够改变页面中的所有 HTML 属性
· JavaScript 能够改变页面中的所有 CSS 样式
· JavaScript 能够对页面中的所有事件做出反应
查找HTML元素：
通常，通过 JavaScript，需要操作 HTML 元素。为了做到这件事情，必须首先找到该元素。有三种方法来做这件事：
· 1、通过 id 找到 HTML 元素 ：var x = document.getElementById(“intro”);
· 2、通过标签名找到 HTML 元素 :
· var x = document.getElementById(“main”);
· var y = x.getElementByTagName(“p”); //查找main中所有的p元素
· 3、通过类名找到 HTML 元素
· 提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
HTML DOM允许JavaScript改变HTML元素的内容。
改变HTML输出流：
JavaScript能够创建动态的HTML内容。
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
<script> document.write(Date()); </script>
改变HTML内容
改变HTML属性：document.getElementById(id).attribute = new value
HTML DOM允许JavaScript改变HTML元素的样式
改变HTML样式：document.getElementById(id).style.property = new style
HTML DOM使JavaScript有能力对HTML事件做出反应。
· 当用户点击鼠标时
· 当网页已加载时
· 当图像已加载时
· 当鼠标移动到元素上时
· 当输入字段被改变时
· 当提交 HTML 表单时
· 当用户触发按键时
当用户在 <h1> 元素上点击时，会改变其内容：
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
本例从事件处理器调用一个函数：
<!DOCTYPE html>
<html><head><script>
function changetext(id){
id.innerHTML="谢谢!";}
</script></head><body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body></html>
HTML事件属性：需向HTML元素分配事件时，可以使用事件属性。
实例：向button元素分配onclick事件：<button onclick=”displayDate()”>点击这里</button>
onload和onunload事件会在用户进入或离开页面时被触发。
onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload和onunload事件可用于处理cookie。
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("已启用 cookie")
}else{
alert("未启用 cookie")
}}</script>
onchange事件：常结合对输入字段的验证来使用。
<head><script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script></head><body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p></body>
onmouseover和onmouseout事件：可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。
onmousedown和onmouseup以及onclick事件：构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown事件，当释放鼠标按钮时，会触发onmouseup事件，最后，当完成鼠标点击时，会触发onclick事件。
添加和删除节点（HTML元素）
创建新的HTML元素：
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<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>
删除已有的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 需要清楚需要删除的元素，以及它的父元素。这是常用的解决方案：找到希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
JavaScript对象：
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。
var x=message.length;
var x=message.toUpperCase();
2. 使用函数来定义对象，然后创建新的对象实例
person.firstname="Bill";
...
替代语法（使用对象 literals）：
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
var myMother=new person("Steve","Jobs",48,"green");
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
x=person.firstname;
在以上代码执行后，x 的值将是：Bill
this.firstname=firstname; this.lastname=lastname;
this.age=age; this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name){
this.lastname=name;
}}
changeName() 函数 name 的值赋给 person 的 lastname 属性。
myMother.changeName("Ballmer");
lastname的值为Ballmer。
要执行的代码
}
注释：for...in 循环中的代码块将针对每个属性执行一次。
循环遍历对象的属性：
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
可以使用也可以不使用小数点来书写数字。
var x=34; // 不使用小数点
极大或极小的数字可通过科学（指数）计数法来写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
var z=0xFF;
提示：绝不要在数字前面写零，除非您需要进行八进制转换。
属性：MAX VALUE MIN VALUE NEGATIVE INFINITIVE POSITIVE INFINITIVE NaN prototype constructor
JavaScript字符串对象：
String对象用于处理已有的字符块
计算字符串的长度
为字符串添加样式
indexOf() 方法 ：使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
match() 方法 ：使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
替换字符串中的字符 - replace() ：使用 replace() 方法在字符串中用某些字符替换另一些字符。
JavaScript Date（日期）对象：
日期对象用于处理日期和时间。
当日的日期和时间
getTime() ：getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
setFullYear() ：使用 setFullYear() 设置具体的日期。
toUTCString() ：使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
getDay() ：使用 getDay() 和数组来显示星期，而不仅仅是数字。
显示一个钟表 在网页上显示一个钟表。
myDate.setDate(myDate.getDate()+5) //将日期对象设置为 5 天后的日期
注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。
myDate.setFullYear(2008,8,9);
var today = new Date();
if (myDate>today){
alert("Today is before 9th August 2008");
}else{alert("Today is after 9th August 2008");}
JavaScript Array（数组）对象：
数组对象的作用是：使用单独的变量名来存储一系列的值。
创建数组 ：创建数组，为其赋值，然后输出这些值。
For...In 声明 ：使用 for...in 声明来循环输出数组中的元素。
合并两个数组 - concat() ：使用 concat() 方法来合并两个数组。
用数组的元素组成字符串 - join() ：使用 join() 方法将数组的所有元素组成一个字符串。
文字数组 - sort() ：使用 sort() 方法从字面上对数组进行排序。
数字数组 - sort() ：使用 sort() 方法从数值上对数组进行排序。
1、有两种向数组赋值的方法（可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量：
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
下面是输出：
Saab
JavaScript Boolean（逻辑）对象：
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true或false）。
检查逻辑值 ：检查逻辑对象是 true 还是 false。
Boolean 对象
可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。
创建 Boolean 对象
使用关键词 new 来定义 Boolean 对象。下面定义了一个名为 myBoolean 的逻辑对象：
var myBoolean=new Boolean()
注释：如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）！下面的所有的代码行均会创建初始值为
false 的 Boolean 对象。
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
下面的所有的代码行均会创初始值为 true 的 Boolean 对象：
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");
JavaScript Math（算数）对象 ：
Math（算数）对象的作用是：执行常见额算数任务。
random() ：使用 random() 来返回 0 到 1 之间的随机数。
max() ：使用 max() 来返回两个给定的数中的较大的数。
min() ：使用 min() 来返回两个给定的数中的较小的数。
· 圆周率 Math.PI
· 2 的平方根 Math.SQRT2
· 1/2 的平方根 Math.SQRT1_2
· 2 的自然对数 Math.LN2
· 10 的自然对数 Math.LN10
· 以 2 为底的 e 的对数 Math.LOG2E
· 以 10 为底的 e 的对数 Math.LOG10E
上面的代码输出为：
5
下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：
document.write(Math.random())
上面的代码输出为：
0.9370844220218102
下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：
document.write(Math.floor(Math.random()*11))
上面的代码输出为：3
JavaScript RegExp对象：
RegExp对象用于规定在文本中检索的内容。
RegExp 是正则表达式的缩写。当检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。 简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置，以及要检索的字符类型，等等。
当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
true
exec()方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。例子1、
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
e
例子2、
可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。
在使用 "g" 参数时，exec() 的工作原理如下：1、找到第一个 "e"，并存储其位置 2、如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置
var patt1=new RegExp("e","g");
do{
result=patt1.exec("The best things in life are free");
document.write(result);
}while (result!=null)
由于这个字符串中 6 个 "e" 字母，代码的输出将是：
eeeeeenull
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"));
由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：
truefalse
JavaScript是属于网络的脚本语言。JavaScript被数百万的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
JavaScript：写入HTML输出
document.write(“<h1>This is a heading</h1>”);
提示：只能在HTML输出中使用document.write。如果在文档加载后使用该方法，会覆盖整个文档。
JavaScript：对事件作出反应
<button type=”button” onclick=”alert(‘Welcome’)”>点击这里</button>
alert()函数咋JavaScript中并不常用，但它对于代码测试非常方便。
onclick事件。
JavaScript：改变HTML内容
x = document.getElementById(“demo”) //查找元素
x.innerHTML = “Hello JavaScript”; //改变元素
document.getElementById()方法是HTML DOM中定义的，DOM(文档对象模型)是用以访问HTML元素的正视W3C标准。
JavaScript：改变HTML图像
JavaScript能够改变任意HTML元素的大多数属性，不仅仅是图片。
本例动态改变HTML<image>的来源(src):The Light bulb
点击灯泡就可以打开或关闭这盏灯。
<!DOCTYPE html>
<html><body>
<script>
function changeImage(){
element=document.getElementById('myimage')
if (element.src.match("bulbon")) {
element.src="../i/eg_bulboff.gif";
}else{
element.src="../i/eg_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="../i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body></html>
JavaScript：改变HTML样式
改变HTML元素的样式，属于改变HTML属性的变种。
x = document.getElementById(“demo”) //找到元素
x.style.color = “#ff0000”; //改变样式
JavaScript：验证输入(常用于验证用户的输入)
if isNaN(x) { alert(“No Numeric”) };
提示：JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。Java（由 Sun 发明）是更复杂的编程语言。ECMA-262 是 JavaScript 标准的官方名称。
JavaScript的使用：
HTML中的脚本必须位于<script>与</script>标签之间。
脚本可被放置在HTML页面的<body>和<head>部分中。
可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。 把JavaScript放到了页面代码的底部，这样就可以确保在<p id=”demo”>元素创建之后再执行代码,因为JavaScript语句中使用了demo。
外部的JavaScript：也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码，外部JavaScript文件的文件扩展名是.js
<body>
<script src="myScript.js"></script>
</body>
在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。 提示：外部脚本不能包含 <script> 标签
<script> 标签：
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript。
浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
<body>中的JavaScript：JavaScript语句会在页面加载时执行。
<body>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script></body>
JavaScript通常用于操作HTML元素：如需从JavaScript访问某个元素，可以使用document.getElementById(id)方法。请使用“id”属性来标识HTML元素。
写到文档输出：document.write(“<p>My First JavaScript</p>”);
请使用document.write()仅仅向文档输出写内容。如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖。
JavaScript语句：向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
分号：
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
提示：也可能看到不带有分号的案例。在 JavaScript 中，用分号来结束语句是可选的。
JavaScript 代码块
JavaScript 语句通过代码块的形式进行组合。
块由左花括号开始，由右花括号结束。
块的作用是使语句序列一起执行。
JavaScript 函数是将语句组合在块中的典型例子。
JavaScript 对大小写敏感。
空格:JavaScript 会忽略多余的空格。
对代码行进行折行：可以在文本字符串中使用反斜杠对代码行进行换行。
提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
JavaScript 注释：JavaScript 不会执行注释。我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。单行注释以 // 开头。
JavaScript 多行注释：多行注释以 /* 开始，以 */ 结尾
JavaScript变量：变量是存储信息的容器。
· 变量必须以字母开头
· 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
· 变量名称对大小写敏感（y 和 Y 是不同的变量）
提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。
使用var关键词来声明变量。可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：var name=”Gates”,age=56,job=”CEO”;
JavaScript数据类型：字符串、数字、布尔、数组、对象、Null、Undefined。
JavaScript拥有动态类型，这意味着相同的变量可用作不同的类型。
var x; //x为Undefined
var x = 6; //x为数字
var x = “Bill”; //x为字符串
JavaScript字符串可以是引号中的任意文本。可以使用单引号或双引号。
JavaScript对象属性有两种寻址方式：
name = person.lastname;
name = person[“lastname”];
声明新变量时，可以使用关键词 "new" 来声明其类型。JavaScript 变量均为对象。当声明一个变量时，就创建了一个新的对象。
JavaScript对象：JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。
JavaScript函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法：函数就是包裹在花括号中的代码块，前面使用了关键词
function：当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
提示：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
在调用函数时，可以向其传递参数。带有返回值的函数：通过使用return语句就可以实现。在使用return语句时，函数会停止执行，并返回指定的值。整个JavaScript并不会停止执行，仅仅是函数。JavaScript将继续执行代码，从调用函数的地方。
如果把值赋给尚未声明的变量，该变量将自动作为全局变量声明。即使它在函数内执行。
如果把数字与字符串相加，结果将成为字符串。
比较运算符= = =：全等（值和类型）。
JAvaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。
通过HTML DOM，可访问JavaScript HTML文档的所有元素。
HTML DOM（文档对象模型）：当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
· JavaScript 能够改变页面中的所有 HTML 元素
· JavaScript 能够改变页面中的所有 HTML 属性
· JavaScript 能够改变页面中的所有 CSS 样式
· JavaScript 能够对页面中的所有事件做出反应
查找HTML元素：
通常，通过 JavaScript，需要操作 HTML 元素。为了做到这件事情，必须首先找到该元素。有三种方法来做这件事：
· 1、通过 id 找到 HTML 元素 ：var x = document.getElementById(“intro”);
· 2、通过标签名找到 HTML 元素 :
· var x = document.getElementById(“main”);
· var y = x.getElementByTagName(“p”); //查找main中所有的p元素
· 3、通过类名找到 HTML 元素
· 提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
HTML DOM允许JavaScript改变HTML元素的内容。
改变HTML输出流：
JavaScript能够创建动态的HTML内容。
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
<script> document.write(Date()); </script>
改变HTML内容
改变HTML属性：document.getElementById(id).attribute = new value
HTML DOM允许JavaScript改变HTML元素的样式
改变HTML样式：document.getElementById(id).style.property = new style
HTML DOM使JavaScript有能力对HTML事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：onclick = JavaScript
HTML 事件的例子：· 当用户点击鼠标时
· 当网页已加载时
· 当图像已加载时
· 当鼠标移动到元素上时
· 当输入字段被改变时
· 当提交 HTML 表单时
· 当用户触发按键时
当用户在 <h1> 元素上点击时，会改变其内容：
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
本例从事件处理器调用一个函数：
<!DOCTYPE html>
<html><head><script>
function changetext(id){
id.innerHTML="谢谢!";}
</script></head><body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body></html>
HTML事件属性：需向HTML元素分配事件时，可以使用事件属性。
实例：向button元素分配onclick事件：<button onclick=”displayDate()”>点击这里</button>
使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
实例 向 button 元素分配 onclick 事件：
<script>document.getElementById(“myBtn”).onclickfunction(){displayDate()};</script>
在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。当按钮被点击时，会执行该函数。onload和onunload事件会在用户进入或离开页面时被触发。
onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload和onunload事件可用于处理cookie。
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("已启用 cookie")
}else{
alert("未启用 cookie")
}}</script>
onchange事件：常结合对输入字段的验证来使用。
<head><script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script></head><body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p></body>
onmouseover和onmouseout事件：可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。
onmousedown和onmouseup以及onclick事件：构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown事件，当释放鼠标按钮时，会触发onmouseup事件，最后，当完成鼠标点击时，会触发onclick事件。
添加和删除节点（HTML元素）
创建新的HTML元素：
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<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>
删除已有的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 需要清楚需要删除的元素，以及它的父元素。这是常用的解决方案：找到希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
JavaScript对象：
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。
访问对象的属性
属性是与对象相关的值。objectName.propertyName
这个例子使用了 String 对象的 length 属性来获得字符串的长度：
var message="Hello World!";var x=message.length;
访问对象的方法
方法是能够在对象上执行的动作。objectName.methodName()
这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：
var message="Hello world!";var x=message.toUpperCase();
创建 JavaScript 对象
通过 JavaScript，您能够定义并创建自己的对象。
创建新对象有两种不同的方法：
1. 定义并创建对象的实例2. 使用函数来定义对象，然后创建新的对象实例
创建直接的实例
person=new Object();person.firstname="Bill";
...
替代语法（使用对象 literals）：
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
使用对象构造器
function person(firstname,lastname,age,eyecolor){this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
创建 JavaScript 对象实例
一旦有了对象构造器，就可以创建新的对象实例，就像这样：
var myFather=new person("Bill","Gates",56,"blue");var myMother=new person("Steve","Jobs",48,"green");
把属性添加到 JavaScript 对象
可以通过为对象赋值，向已有对象添加新属性：
假设 personObj 已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：
person.firstname="Bill";person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
x=person.firstname;
在以上代码执行后，x 的值将是：Bill
把方法添加到 JavaScript 对象
方法只不过是附加在对象上的函数。
在构造器函数内部定义对象的方法：
function person(firstname,lastname,age,eyecolor){this.firstname=firstname; this.lastname=lastname;
this.age=age; this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name){
this.lastname=name;
}}
changeName() 函数 name 的值赋给 person 的 lastname 属性。
myMother.changeName("Ballmer");
lastname的值为Ballmer。
JavaScript 类
JavaScript 是面向对象的语言，但 JavaScript 不使用类。
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
JavaScript 基于 prototype，而不是基于类的。
JavaScript for...in 循环
JavaScript for...in 语句循环遍历对象的属性。
for (对象中的变量){要执行的代码
}
注释：for...in 循环中的代码块将针对每个属性执行一次。
循环遍历对象的属性：
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
JavaScript 数字：
JavaScript 只有一种数字类型。可以使用也可以不使用小数点来书写数字。
JavaScript 数字可以使用也可以不使用小数点来书写：
var pi=3.14; // 使用小数点var x=34; // 不使用小数点
极大或极小的数字可通过科学（指数）计数法来写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
所有 JavaScript 数字均为 64 位
JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。
JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。
精度
整数（不使用小数点或指数计数法）最多为 15 位。
小数的最大位数是 17，但是浮点运算并不总是 100% 准确：
var x=0.2+0.1;八进制和十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。
var y=0377;var z=0xFF;
提示：绝不要在数字前面写零，除非您需要进行八进制转换。
数字属性和方法
属性：MAX VALUE MIN VALUE NEGATIVE INFINITIVE POSITIVE INFINITIVE NaN prototype constructor
方法：toExponential() toFixed() toPrecision() toString() valueOf()
JavaScript字符串对象：
String对象用于处理已有的字符块
计算字符串的长度
为字符串添加样式
indexOf() 方法 ：使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
match() 方法 ：使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
替换字符串中的字符 - replace() ：使用 replace() 方法在字符串中用某些字符替换另一些字符。
JavaScript Date（日期）对象：
日期对象用于处理日期和时间。
当日的日期和时间
getTime() ：getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
setFullYear() ：使用 setFullYear() 设置具体的日期。
toUTCString() ：使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
getDay() ：使用 getDay() 和数组来显示星期，而不仅仅是数字。
显示一个钟表 在网页上显示一个钟表。
定义日期：可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：var myDate = new Date()
注释：Date 对象自动使用当前的日期和时间作为其初始值。
操作日期:通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。
var myDate=new Date()myDate.setDate(myDate.getDate()+5) //将日期对象设置为 5 天后的日期
注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。
比较日期:日期对象也可用于比较两个日期。
var myDate=new Date();myDate.setFullYear(2008,8,9);
var today = new Date();
if (myDate>today){
alert("Today is before 9th August 2008");
}else{alert("Today is after 9th August 2008");}
JavaScript Array（数组）对象：
数组对象的作用是：使用单独的变量名来存储一系列的值。
创建数组 ：创建数组，为其赋值，然后输出这些值。
For...In 声明 ：使用 for...in 声明来循环输出数组中的元素。
合并两个数组 - concat() ：使用 concat() 方法来合并两个数组。
用数组的元素组成字符串 - join() ：使用 join() 方法将数组的所有元素组成一个字符串。
文字数组 - sort() ：使用 sort() 方法从字面上对数组进行排序。
数字数组 - sort() ：使用 sort() 方法从数值上对数组进行排序。
定义数组
使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：
var myArray=new Array()1、有两种向数组赋值的方法（可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量：
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2: var mycars=new Array("Saab","Volvo","BMW")
注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
document.write(mycars[0])下面是输出：
Saab
修改已有数组中的值
如需修改已有数组中的值，只要向指定下标号添加一个新值即可：
mycars[0]="Opel";JavaScript Boolean（逻辑）对象：
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true或false）。
检查逻辑值 ：检查逻辑对象是 true 还是 false。
Boolean 对象
可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。
创建 Boolean 对象
使用关键词 new 来定义 Boolean 对象。下面定义了一个名为 myBoolean 的逻辑对象：
var myBoolean=new Boolean()
注释：如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）！下面的所有的代码行均会创建初始值为
false 的 Boolean 对象。
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
下面的所有的代码行均会创初始值为 true 的 Boolean 对象：
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");
JavaScript Math（算数）对象 ：
Math（算数）对象的作用是：执行常见额算数任务。
random() ：使用 random() 来返回 0 到 1 之间的随机数。
max() ：使用 max() 来返回两个给定的数中的较大的数。
min() ：使用 min() 来返回两个给定的数中的较小的数。
Math 对象
Math（算数）对象的作用是：执行普通的算数任务。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值：
· 常数 Math.E· 圆周率 Math.PI
· 2 的平方根 Math.SQRT2
· 1/2 的平方根 Math.SQRT1_2
· 2 的自然对数 Math.LN2
· 10 的自然对数 Math.LN10
· 以 2 为底的 e 的对数 Math.LOG2E
· 以 10 为底的 e 的对数 Math.LOG10E
算数方法
函数（方法）实例：
下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。
document.write(Math.round(4.7))上面的代码输出为：
5
下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：
document.write(Math.random())
上面的代码输出为：
0.9370844220218102
下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：
document.write(Math.floor(Math.random()*11))
上面的代码输出为：3
JavaScript RegExp对象：
RegExp对象用于规定在文本中检索的内容。
RegExp 是正则表达式的缩写。当检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。 简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置，以及要检索的字符类型，等等。
定义 RegExp
RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：
var patt1=new RegExp("e");当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
test()方法检索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
true
exec()方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。例子1、
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
e
例子2、
可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。
在使用 "g" 参数时，exec() 的工作原理如下：1、找到第一个 "e"，并存储其位置 2、如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置
var patt1=new RegExp("e","g");
do{
result=patt1.exec("The best things in life are free");
document.write(result);
}while (result!=null)
由于这个字符串中 6 个 "e" 字母，代码的输出将是：
eeeeeenull
compile()方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。例：
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"));
由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：
truefalse
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 浅谈 JavaScript 中定义变量时有无 var 声明的区别
- JavaScript--全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）
- Gson的JsonParser使用
- js处理对象参数值，过滤掉对象参数值为""、null、undefined，并返回一个新对象
- param动作标记详解。
- JS中数组的操作
- 学习Javascript闭包（Closure）
- javascript——实现继承的6种方式
- 使用Gson的JsonReader解析Json数据
- javascript --创建对象的9种方式
- js简单校验
- mac开启safari开发模式(用于OC和JS交互)
- Using Visual Studio to Debug JavaScript in IE
- javascript 引用类型 - Function类型(特性)
- JSp中 include指令标记与<jsp:include>动作标记的区别
- JSPatch应用的一些逻辑
- html往js文件传递参数
- js最近天数
- 很赞的JSF参考教程，走不路过，不要错过
- javascript正则表达式的基本知识