朱皮特的博客 自由的飞翔

一小时学JavaScript

2018-04-03
朱皮特
阅读量:

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 的来源 (src): The Light bulb 点击灯泡就可以打开或关闭这盏灯 JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。 ``` <!DOCTYPE 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>

这是一个段落。

这是另一个段落。

``` ### 删除已有的 HTML 元素 如需删除 HTML 元素,您必须首先获得该元素的父元素: 实例 ```

这是一个段落。

这是另一个段落。

``` 提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。 不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。 这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素: ``` var child=document.getElementById("p1"); child.parentNode.removeChild(child); ``` ### 八进制和十六进制 如果前缀为 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() ``` ### 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"); ``` ### RegExp 对象 http://www.w3school.com.cn/js/js_obj_regexp.asp http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp # 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model)尚无正式标准。 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。 ## Window 对象 http://www.w3school.com.cn/js/js_window.asp - window.location 对象在编写时可不使用 window 这个前缀。 window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。 - location.href 属性返回当前页面的 URL。 - location.hostname 返回 web 主机的域名 - location.pathname 返回当前页面的路径和文件名 - location.port 返回 web 主机的端口 (80 或 443) - location.protocol 返回所使用的 web 协议(http:// 或 https://) - location.assign() 方法加载新的文档。 - window.history 对象包含浏览器的历史。 - history.back() - 与在浏览器点击后退按钮相同 - history.forward() - 与在浏览器中点击按钮向前相同 - window.navigator 对象包含有关访问者浏览器的信息。 警告:来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为: navigator 数据可被浏览器使用者更改 浏览器无法报告晚于浏览器发布的新操作系统 ## JavaScript 消息框 可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。 ### 警告框 警告框经常用于确保用户可以得到某些信息。 当警告框出现后,用户需要点击确定按钮才能继续进行操作。 语法: ``` alert("文本") ``` ### 确认框 确认框用于使用户可以验证或者接受某些信息。 当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。 如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。 语法: ``` function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } ``` ### 提示框 提示框经常用于提示用户在进入页面前输入某个值。 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。 语法: ``` prompt("文本","默认值") function disp_prompt() { var name=prompt("请输入您的名字","Bill Gates") if (name!=null && name!="") { document.write("你好!" + name + " 今天过得怎么样?") } } ``` ## JavaScript 计时事件 通过使用JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。 在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: ### setTimeout() 未来的某时执行代码 ### clearTimeout() 取消setTimeout() ## JavaScript Cookies http://www.w3school.com.cn/js/js_cookies.asp 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息。 ``` ``` # JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。 为了应对这些调整,许多的 JavaScript (helper) 库应运而生。 这些 JavaScript 库常被称为 JavaScript 框架。 在本教程中,我们将了解到一些广受欢迎的 JavaScript 框架: - jQuery - Prototype - MooTools 所有这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理。 ## jQuery jQuery 是目前最受欢迎的 JavaScript 框架。 它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。 jQuery 同时提供 companion UI(用户界面)和插件。 http://www.w3school.com.cn/jquery/index.asp ## Prototype Prototype 是一种库,提供用于执行常见 web 任务的简单 API。 Prototype 通过提供类和继承,实现了对 JavaScript 的增强。 ## MooTools MooTools 也是一个框架,提供了可使常见的 JavaScript 编程更为简单的 API。 MooTools 也含有一些轻量级的效果和动画函数。 ## CDN - 内容分发网络 您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小,同时您希望浏览器尽可能多地进行缓存。 如果许多不同的网站使用相同的 JavaScript 框架,那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。 CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。 Google 为一系列 JavaScript 库提供了免费的 CDN,包括: - jQuery - Prototype - MooTools - Dojo - Yahoo! YUI 如需在您的网页中使用 JavaScript 框架库,只需在 **< script >** 标签中引用该库即可: ## 引用 jQuery 如需测试 JavaScript 库,您需要在网页中引用它。 为了引用某个库,请使用 < script > 标签,其 src 属性设置为库的 URL: ``` ``` ## jQuery 描述 主要的 jQuery 函数是 $() 函数(jQuery 函数)。如果您向该函数传递 DOM 对象,它会返回 jQuery 对象,带有向其添加的 jQuery 功能。 jQuery 允许您通过 CSS 选择器来选取元素。 在 JavaScript 中,您可以分配一个函数以处理窗口加载事件: ``` JavaScript 方式: function myFunction() { var obj=document.getElementById("h01"); obj.innerHTML="Hello jQuery"; } onload=myFunction; 等价的 jQuery 是不同的: jQuery 方式: function myFunction() { $("#h01").html("Hello jQuery"); } $(document).ready(myFunction); ``` 上面代码的最后一行,HTML DOM 文档对象被传递到 jQuery :$(document)。 当您向 jQuery 传递 DOM 对象时,jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。 jQuery 函数会返回新的 jQuery 对象,其中的 ready() 是一个方法。 由于在 JavaScript 中函数就是变量,因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。 提示:jQuery 返回 jQuery 对象,与已传递的 DOM 对象不同。jQuery 对象拥有的属性和方法,与 DOM 对象的不同。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。 jQuery 允许链接(链式语法),链接(Chaining)是一种在同一对象上执行多个任务的便捷方法。 # 参考 JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp


上一篇 office2016激活

Comments

Content