JavaScript简介
JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。
Java（由 Sun 发明）是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。
Netscape 发明了 JavaScript 当 Netscape Navigator 崭露头角时，Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page（浓咖啡般的页面），它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。
当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。此时，大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络，即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次地往返交互。设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处理后，看到的却是一条告诉你忘记填写一个必要的字段。
那时正处于技术革新最前沿的 Netscape，开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。
当时工作于 Netscape 的 Brendan Eich，开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。
就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript，目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报，JavaScript 从此变成了因特网的必备组件。
http://www.w3school.com.cn/js/pro_js_history.asp
JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
Windows 8 中的 JavaScript 提示：微软支持通过 JavaScript 创建 Windows 8 app。
对于因特网和视窗操作系统，JavaScript 都意味着未来。
JS 测验
结果：16/20
5.外部脚本必须包含 <script> 标签吗？
正确答案：否
7.如何创建函数？
正确答案：function myFunction()
19.如何在浏览器的状态栏放入一条消息？
正确答案：window.status = "put your message here"
20.如何获得客户端浏览器的名称？
正确答案：navigator.appName
那些老旧的实例可能会在 < script > 标签中使用 type=”text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
或 中的 JavaScript 您可以在 HTML 文档中放入不限数量的脚本。 脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。 通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。 外部的 JavaScript 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。 外部 JavaScript 文件的文件扩展名是 .js。 如需使用外部文件，请在 < script > 标签的 "src" 属性中设置该 .js 文件： 实例 ``` <!DOCTYPE html> ``` 在 或 中引用脚本文件都是可以的。实际运行效果与您在您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</html> ``` 上面例子中的 JavaScript 语句，会在页面加载时执行。 通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。 如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。 您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。 ### 对事件作出反应 alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。 onclick 事件只是您即将在本教程中学到的众多事件之一。 ``` <!DOCTYPE html> ``` ### 改变 HTML 内容 使用 JavaScript 来处理 HTML 内容是非常强大的功能。 实例 ``` x=document.getElementById("demo") //查找元素 x.innerHTML="Hello JavaScript"; //改变内容 ``` 亲自试一试 您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。 DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。 ``` <!DOCTYPE html>我的第一段 JavaScript
JavaScript 能改变 HTML 元素的内容。
``` ### 改变 HTML 图像 本例会动态地改变 HTML
点击灯泡来点亮或熄灭这盏灯
``` ### 改变 HTML 样式 改变 HTML 元素的样式，属于改变 HTML 属性的变种。 实例 ``` x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式 ``` ### 验证输入 JavaScript 常用于验证用户的输入。 实例 ``` if isNaN(x) {alert("Not Numeric")}; ``` ``` <!DOCTYPE html>我的第一段 JavaScript
请输入数字。如果输入值不是数字，浏览器会弹出提示框。
``` 字符串可以单引号或者双引号。字符串对象的 length 属性来查找字符串的长度： ``` var message="Hello World!"; var x=message.length; ``` 在以上代码执行后，x 的值是：12 ``` var message="Hello world!"; var x=message.toUpperCase(); ``` 单行注释：// 多行注释以 /* 开始，以 */ 结尾。 使用 var 关键词来声明变量 一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。 在执行过以下语句后，变量 carname 的值将是 undefined： var carname; 重新声明 JavaScript 变量 如果重新声明 JavaScript 变量，该变量的值不会丢失： 在以下两条语句执行后，变量 carname 的值依然是 "Volvo"： ``` var carname="Volvo"; var carname; ``` JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型： 实例 ``` var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill"; // x 为字符串 ``` 布尔（逻辑）只能有两个值：true 或 false。 数组 下面的代码创建名为 cars 的数组： ``` var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; ``` 或者 (condensed array): ``` var cars=new Array("Audi","BMW","Volvo"); ``` 或者 (literal array): 实例 ``` var cars=["Audi","BMW","Volvo"]; ``` 数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。 ## JavaScript 对象 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔： ``` var person={firstname:"Bill", lastname:"Gates", id:5566}; ``` 上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。 空格和折行无关紧要。声明可横跨多行： ``` var person={ firstname : "Bill", lastname : "Gates", id : 5566 }; ``` 对象属性有两种寻址方式： 实例 ``` name=person.lastname; name=person["lastname"]; ``` Undefined 和 Null Undefined 这个值表示变量不含有值。 可以通过将变量的值设置为 null 来清空变量。 声明变量类型 当您声明新变量时，可以使用关键词 "new" 来声明其类型： ``` var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object; ``` JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。 在 JavaScript 中，对象是拥有属性和方法的数据。 向未声明的 JavaScript 变量来分配值 如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。 这条语句： carname="Volvo"; 将声明一个全局变量 carname，即使它在函数内执行。 === 全等（值和类型） x===5 为 true；x==="5" 为 false ### 条件运算符 JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。 语法 ``` variablename=(condition)?value1:value2 ``` ### 循环 JavaScript 支持不同类型的循环： - for 循环代码块一定的次数 - for/in 循环遍历对象的属性 - while 当指定的条件为 true 时循环指定的代码块 - do/while 同样当指定的条件为 true 时循环指定的代码块 ``` for (var i=0;i<cars.length;i++) { document.write(cars[i] + ""); } ``` ``` var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; } ``` ``` while (i<5) { x=x + "The number is " + i + "
"; i++; } ``` ``` do { x=x + "The number is " + i + "
"; i++; } while (i<5); ``` ### break与continue continue 语句（带有或不带标签引用）只能用在循环中。 break 语句（不带标签引用），只能用在循环或 switch 中。 通过标签引用，break 语句可用于跳出任何 JavaScript 代码块： 实例 ``` cars=["BMW","Volvo","Saab","Ford"]; list: { document.write(cars[0] + "
"); document.write(cars[1] + "
"); document.write(cars[2] + "
"); break list; document.write(cars[3] + "
"); document.write(cars[4] + "
"); document.write(cars[5] + "
"); } ``` ### try catch throw - try 语句测试代码块的错误。 - catch 语句处理错误。 - throw 语句创建自定义错误。 ``` <!DOCTYPE html> ``` ``` <!DOCTYPE html>
我的第一个 JavaScript 程序
请输入 5 到 10 之间的数字：
``` # JavaScript HTML DOM - JavaScript 能够改变页面中的所有 HTML 元素 - JavaScript 能够改变页面中的所有 HTML 属性 - JavaScript 能够改变页面中的所有 CSS 样式 - JavaScript 能够对页面中的所有事件做出反应 参考：[HTML DOM Style 对象](http://www.w3school.com.cn/jsref/dom_obj_style.asp) ## 查找 HTML 元素 通常，通过 JavaScript，您需要操作 HTML 元素。 为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事： - 通过 id 找到 HTML 元素 - 通过标签名找到 HTML 元素 - 通过类名找到 HTML 元素 - 通过 id 查找 HTML 元素 ### 通过id查找 HTML 元素 在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。 实例 本例查找 id="intro" 元素： ``` var x=document.getElementById("intro"); ``` 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。 如果未找到该元素，则 x 将包含 null。 ### 通过标签名查找 HTML 元素 实例 本例查找 id="main" 的元素，然后查找 "main" 中的所有元素： ``` var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); ``` 通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。 ### 改变 HTML 属性 如需改变 HTML 元素的属性，请使用这个语法： ``` document.getElementById(id).attribute=new value <!DOCTYPE html>
``` ### 改变 HTML 样式 如需改变 HTML 元素的样式，请使用这个语法： document.getElementById(id).style.property=new style 例子 1 下面的例子会改变元素的样式： ```
Hello World!
onclick="document.getElementById('p1').style.visibility='hidden'" onclick="document.getElementById('p1').style.visibility='visible'" ``` ## 事件 HTML 事件的例子： - 当用户点击鼠标时 - 当网页已加载时 - 当图像已加载时 - 当鼠标移动到元素上时 - 当输入字段被改变时 - 当提交 HTML 表单时 - 当用户触发按键时 ### 使用 HTML DOM 来分配事件 HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件： 实例 向 button 元素分配 onclick 事件： ``` ``` ### onload 和 onunload 事件 onload 和 onunload 事件会在用户进入或离开页面时被触发。 onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。 onload 和 onunload 事件可用于处理 cookie。 实例 ``` <!DOCTYPE html>提示框会告诉你，浏览器是否已启用 cookie。
``` ### onchange 事件 onchange 事件常结合对输入字段的验证来使用。 下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。 实例 ``` ``` ### onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 一个简单的 onmouseover-onmouseout 实例： ``` <!DOCTYPE html>把鼠标移到上面
``` ### onmousedown、onmouseup 以及 onclick 事件 onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。 一个简单的 onmousedown-onmouseup 实例： ``` <!DOCTYPE html>请点击这里
``` ### onmousedown 和 onmouseup 当用户按下鼠标按钮时，更换一幅图像。 ``` <!DOCTYPE html> 按住鼠标不放可以点亮这盏灯！
``` ### onload 当页面完成加载时，显示一个提示框。 ``` <!DOCTYPE html> ``` ### onfocus 当输入字段获得焦点时，改变其背景色。 ``` <!DOCTYPE html> 请输入英文字符：当输入字段获得焦点时，会触发改变背景颜色的函数。
``` ### 鼠标事件 当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。 ``` <!DOCTYPE html>请把鼠标移到这段文本上
``` ## 添加和删除节点（HTML 元素）。 ### 创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 实例 ``` <!DOCTYPE html>这是一个段落。
这是另一个段落。
这是一个段落。
这是另一个段落。
文档信息
- 本文作者：zhupite
- 本文链接：https://zhupite.com/javascript/js-study.html
- 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）