JS教程
JavaScript简介
1 JavaScript 是脚本语言
2 JavaScript 是一种轻量级的编程语言。
3 JavaScript 是可插入 HTML 页面的编程代码。
4 JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript使用
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
JavaScript 输出
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
JavaScript 语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
JavaScript 注释
单行注释以 // 开头
多行注释以 /* 开始,以 */ 结尾。
JavaScript 变量
变量必须以字母开头
变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
变量名称对大小写敏感(y 和 Y 是不同的变量)
JavaScript 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined。
Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空 变量。
JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
<script>
function myFunction() {
alert("Hello World!");
}
</script>
JavaScript 运算符
[img][/img]
JavaScript 比较和逻辑运算符
比较和逻辑运算符用于测试 true 或 false。
[img][/img]
JavaScript If...Else 语句
条件语句用于基于不同的条件来执行不同的动作。
JavaScript Switch 语句
switch 语句用于基于不同的条件来执行不同的动作。
[img][/img]
JavaScript For 循环
循环可以将代码块执行指定的次数。
不同类型的循环
JavaScript 支持不同类型的循环:
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
JavaScript While 循环
只要指定条件为 true,循环就可以一直执行代码。
JavaScript Break 和 Continue 语句
break 语句用于跳出循环。
continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中 的下一个迭代。
JavaScript 错误 - Throw、Try 和 Catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行 验证。
JS HTML DOM
JavaScript HTML DOM
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model )。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
[img][/img]
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
JavaScript HTML DOM - 改变 HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
提示:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
document.getElementById("p1").innerHTML="New text!";
document.getElementById("image").src="landscape.jpg";
JavaScript HTML DOM - 改变 CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
document.getElementById(id).style.property=new style;
document.getElementById("p2").style.color="blue";
JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
onclick=JavaScript
HTML 事件的例子:
。当用户点击鼠标时
。当网页已加载时
。当图像已加载时
。当鼠标移动到元素上时
。当输入字段被改变时
。当提交 HTML 表单时
。当用户触发按键时
JavaScript HTML DOM 元素(节点)
添加和删除节点(HTML 元素)。
创建新的 HTML 元素
[img][/img]
删除已有的 HTML 元素
[img][/img]
JS 对象
JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript 允许自定义对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
如:string.length
JavaScript Number 对象
JavaScript 只有一种数字类型。
可以使用也可以不使用小数点来书写数字。
八进制和十六进制
如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数
var y=0377;
var z=0xFF;
数字属性和方法
[img][/img]
JavaScript 字符串(String)对象
String 对象用于处理已有的字符块。
[img][/img]
JavaScript Date(日期)对象
日期对象用于处理日期和时间。
[img][/img]
注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。
JavaScript Array(数组)对象
数组对象的作用是:使用单独的变量名来存储一系列的值。
[img][/img]
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量:
var mycars=new Array(3)
var mycars=new Array("Saab","Volvo","BMW")
JavaScript Boolean(逻辑)对象
Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。
JavaScript Math(算数)对象
Math(算数)对象的作用是:执行常见的算数任务。
[img][/img]
JavaScript RegExp 对象
RegExp 对象用于规定在文本中检索的内容。
RegExp 对象的方法
RegExp 对象有 3 个方法:test()、exec() 以及 compile()。
定义 RegExp var patt1=new RegExp("e");当您使用该 RegExp 对象在一个字 符串中检索时,将寻找的是字符 "e"。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
以上代码的输出将是:true
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹 配,则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
以上代码的输出将是:e
compile()
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"));
以上代码的输出是:truefalse
JS Window
JavaScript Window - 浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model)尚无正式标准。
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
Window 尺寸
JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息。
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性:
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性, 比如窗口任务栏。
JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新 的页面。
window.location 对象在编写时可不使用 window 这个前缀。
一些例子:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
[img][/img]
History---浏览器历史信息
window.history 对象包含浏览器的历史。
window.history 对象在编写时可不使用 window 这个前缀。
一些方法:
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同。
history.go(n):正数表示向前,负数表示向后
Navigator---浏览器资料信息
window.navigator 对象包含有关访问者浏览器的信息。
window.navigator 对象在编写时可不使用 window 这个前缀。
navigator.appCodeName 返回当前浏览器代码名字
navigator.appName 返回浏览器名。
navigator.appVersion 返回浏览器版本,包括了大版本号、小版本号、语言 、操作平台等信息。
navigator.cookieEnabled
navigator.systemLanguage 语言
navigator.userAgent 返回以上全部信息。
PopupAlert---消息框
消息框(警告框、确认框、提示框)
警告框:alert("文本");
确认框:confirm("文本")如果用户点击确认,那么返回值为 true。如果用户点 击取消,那么返回值为 false。
提示框:prompt("文本","默认值")如果用户点击确认,那么返回值为输入的值 。如果用户点击取消,那么返回值为 null。
Timing---计时
在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之 为计时事件
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setTimeout() 未来的某时执行代码.
clearTimeout() 取消setTimeout()
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount(){
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount(){
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
Cookies---用来识别用户
- 大小: 68.4 KB
- 大小: 12.9 KB
- 大小: 2.5 KB
- 大小: 4 KB
- 大小: 27.2 KB
- 大小: 26.4 KB
- 大小: 3.3 KB
- 大小: 7.1 KB
- 大小: 6.8 KB
- 大小: 6.6 KB
- 大小: 5.2 KB
- 大小: 9.9 KB
分享到:
相关推荐
本书是一本全面、深入介绍JavaScript语言的学习指南。本书共分四个部分,第1部分帮助读者快速入手,掌握基本的JavaScript编程要点;第2部分介绍JavaScript的发展和技术背景;第3部分深入探索JavaScript,介绍了语法...
《JavaScript权威指南》是JavaScript编程领域的一本经典之作,由著名技术作家David Flanagan撰写,被誉为"JavaScript犀牛书"。这本书深入浅出地讲解了JavaScript语言的核心概念、语法特性和高级特性,对于想要全面...
《Head First JavaScript源码》是2010年出版的一本中文版JavaScript学习书籍的源码,这本书以其独特的视觉设计和易理解的方式深入浅出地介绍了JavaScript编程语言。JavaScript是一种广泛应用于网页和网络应用的脚本...
《JavaScript语言精粹》是JavaScript开发者必读的经典之作,它深入浅出地讲解了JavaScript语言的核心概念和实用技巧。这本书不仅适合初学者作为入门指南,也适合经验丰富的开发者用来巩固和提升自己的技能。 首先,...
《JavaScript语言精粹》作为一本深入浅出讲解JavaScript编程语言的经典之作,对于想要提升自己JavaScript技能的开发者来说,无疑是一份宝贵的资源。本书由Douglas Crockford所著,他不仅是JSON格式的创始人,也是...
在这个场景中,我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件:JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先,关于“VS2015安装证书”,这通常是指安装过程中需要...
JavaScript,一种广泛应用于Web开发的脚本语言,是前端开发的核心技术之一。这份"JavaScript学习指南"高清PDF,无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面,我们将深入探讨...
《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第...
JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
### 面向对象JavaScript精要 #### 一、书籍概览 本书《面向对象JavaScript精要》由Nicholas C. Zakas编写,是面向对象编程领域中的权威指南之一,尤其针对JavaScript这门语言。作者深入浅出地介绍了面向对象编程的...
JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在客户端脚本方面扮演着核心角色。这份"javascript试题(附答案)"是为初学者设计的,旨在帮助他们更好地理解和掌握JavaScript的基础知识。 一、变量与数据...
ArcGIS JavaScript API 介绍与示例 ArcGIS JavaScript API 是 ESRI 提供的一种基于 JavaScript 的开发工具,允许开发者创建交互式的 Web 地图应用程序。本文将对 ArcGIS JavaScript API 进行详细的介绍,并提供多个...
JavaScript 动态网页设计期末大作业CHASMISH眼镜网(纯手打,高分项目)。 JavaScript 动态网页设计期末大作业CHASMISH眼镜网(纯手打,高分项目)。 JavaScript 动态网页设计期末大作业CHASMISH眼镜网(纯手打,...
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...
jQuery将JavaScript编程量精简为寥寥数行代码,使JavaScript变得更直观,更富魅力。iQuery还允许同时为一个或多个元素设置样式,使得通过JavaScript操纵CSS变得分外轻松。 在这本面向项目的精品书籍的指引下,即使是...
3- JavaScript参考手册.chm 4- JavaScript参考手册中文版.chm 5- Javascript高级教程.CHM 6- JavaScript使用手册.chm 7- 网页制作完全手册.chm 8- 样式表滤镜中文手册.CHM 9- 样式表中文手册2.0.CHM
《javascript基础教程(第8版)》循序渐进地讲述了javascript 及相关的css、dom、ajax、jquery 等技术。书中从javascript 语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并...
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...
《JavaScript权威指南(第6版)》全面介绍了JavaScript语言的核心,以及Web浏览器中实现的遗留和标准的DOM。它运用了一些复杂的例子,说明如何处理验证表单数据、使用cookie、创建可移植的DHTML动画等常见任务。...