JavaScript教程.docx
- 文档编号:17963321
- 上传时间:2023-08-05
- 格式:DOCX
- 页数:22
- 大小:26.52KB
JavaScript教程.docx
《JavaScript教程.docx》由会员分享,可在线阅读,更多相关《JavaScript教程.docx(22页珍藏版)》请在冰点文库上搜索。
JavaScript教程
JavaScript教程
Copyright©2004-2015梦之都()
作者联系方式
前言
1.什么是JavaScript?
1.1.什么是ECMAScript
2.JavaScript入门例子
3.在HTML中嵌入JavaScript
3.1.内部引用JavaScript
3.2.外部引用JavaScript
3.3.内联引用JavaScript
4.JavaScript语法
4.1.JavaScript注释
4.2.JavaScript变量
4.3.JavaScript数值类型
4.4.JavaScript字符串类型
4.5.JavaScript运算符与表达式
4.5.1.JavaScript算术运算符与表达式
4.5.2.JavaScript赋值运算符与表达式
4.5.3.JavaScript自增、自减运算符与表达式
4.5.4.JavaScript逗号运算符与表达式
4.6.JavaScript程序设计
4.7.JavaScript顺序程序设计
4.8.JavaScript选择程序设计
4.8.1.JavaScript布尔类型
4.8.2.JavaScript关系运算符与表达式
4.8.3.JavaScript逻辑运算符与表达式
4.8.4.JavaScriptif...else语句
4.8.5.JavaScript条件运算符与表达式
4.8.6.JavaScriptswitch...case语句
4.9.JavaScript循环程序设计
4.9.1.JavaScriptwhile语句
4.9.2.JavaScriptdo...while语句
4.9.3.JavaScriptfor语句
4.9.4.JavaScriptbreak与continue语句
5.JavaScript面向对象(OOP)语法
5.1.JavaScript面向对象代码实践
5.2.使用构造函数创建JavaScript对象
5.3.JSON法创建对象
JavaScript核心对象
JavaScriptBOM教程
JavaScript代码--可以自己编辑的示例代码
前言
梦之都的JavaScript教程,分为JavaScript初级教程和JavaScript高级教程两个阶段。
JavaScript初级教程包括:
JavaScript基本语法,JavaScript程序设计(此节将简单介绍编程思想),JavaScript面向对象编程,JavaScript内置对象,HTMLBOM教程,HTMLDOM教程,JavaScript事件,DHTML教程等。
JavaScript高级教程主要是对JavaScript初级教程中语法部分的深化,同时介绍一些经典的示例,比如JavaScript正则表达式,浏览器检测,JavaScript插件,拖拽,JavaScriptcookies,闭包,JavaScript安全与优化等。
学习JavaScript教程之前我假定你已经学会了HTML语言,你可以通过此链接学习HTML语言教程。
本教程会把所有JavaScript函数与内置对象做一个总结,供大家以后查找参考。
JavaScript初级教程将详细介绍JavaScript语法,适合初学者学习。
JavaScript在语法上参考了C语法类语言(Java,PHP,C#),因此有这几方面基础的同学,可以快速学会JavaScript。
From"前言-JavaScript教程"
1.什么是JavaScript?
1.1.什么是ECMAScript
1.2.什么是BrowserObjects
目录
什么是JavaScript
JavaScript的历史
JavaScript的组成
几个问题
为什么要学JavaScript?
JavaScript与Java相同吗?
JavaScript很难学吗?
JavaScript能做什么?
学习JavaScript需要什么软件?
什么是JavaScript
JavaScript是一种基于对象和事件驱动的客户端脚本语言。
JavaScript最初的设计是为了检验HTML表单输入的正确性。
JavaScript起源于Netscape公司的LiveScript语言。
JavaScript的历史
JavaScript最初起源于LiveScript语言,当互联网开始流行时,越来越多的网站开始使用HTML表单与用户交互,然而表单交互却成了制约网络发展的重大瓶颈(用户总是痛苦的等待数据传送到服务器端检测,并传回是否正确,仅仅的表单检测,就产生了多次客户端与服务器端交互)。
于是Netscape公司推出了LiveScript语言,最后Netscape与Sun将LiveScript命名为JavaScript(当时JAVA是很时髦的互联网名词),随后微软开始了其野心勃勃的浏览器计划,并且推出了JScript,于是网络上出现了几种类似的JavaScript语言,但是没有统一的特性与语法(当时的JavaScript开发被看做是一场噩梦,因此很多程序员并不看好JavaScript)。
最终JavaScript被提交到欧洲计算机制造商协会(ECMA),做为中立的ECMA开始了标准化脚本语言之路,并将其命名为ECMAScript。
JavaScript的组成
完整的JavaScript是由ECMAScript(语法)、BrowserObjects(DOM、BOM)(特性)组成的。
上图是JavaScript的组成图示,箭头代表调用关系[
几个问题
为什么要学JavaScript?
因为你别无选择,只有JavaScript可以控制所有常用的浏览器,而且JavaScript是世界上最重要的编程语言之一,学习web技术必须学会JavaScript。
JavaScript是一种优美的语言,它很好,所以我们要学:
)
JavaScript与Java相同吗?
javascript与java没有任何关系,他们本身就是两种语言,取成差不多的名字,主要是由于商业上的原因。
javascript是一种客户端脚本语言
java是服务器端语言。
(是SUN公司的产品.)
JavaScript很难学吗?
不难,JavaScript入门很简单,你只要学过小学数学就可学好JavaScript,但是你要先学好HTML语言。
JavaScript能做什么?
JavaScript可以检测表单的正确性,实现Ajax,读、写、改变HTML页面的架构DOM,对事件做出响应,检测浏览者所使用的设备,产生很酷很炫的网页效果DHTML等。
学习JavaScript需要什么软件?
只要windows的记事本与浏览器(IE,Firefox,Opera)就可以了,不过我推荐你使用强大的Notepad++编辑器。
From"什么是JavaScript?
-JavaScript教程"
1.1.什么是ECMAScript
ECMA是EuropeanComputerManufacturersAssociation的缩写,即欧洲计算机制造商协会。
欧洲计算机制造商协会是制定信息传输与通讯的国际化标准组织。
官方网站为,http:
//www.ecmascript.org/。
ECMAScript是ECMA制定的标准化脚本语言。
目前JavaScript使用的ECMAScript版本为ECMAScript-262。
ECMAScript被国际化标准组织采纳为ISO/IEC16262。
1.2.什么是BrowserObjects
目录
什么是Browser_Objects
什么是BOM
什么是DOM
什么是Browser_Objects
JavaScript包含许多浏览器对象(BrowserObjects),这些对象可以与浏览器窗体网页产生互动。
BrowserObjects也可被称作BOM,它包含一个名叫DOM的节点,每种对象模型都由一种层次结构组成,这种层次结构就像金字塔,DOM的顶层是document对象,BOM的顶层是window对象。
上图是BrowserObjects的图示,包括BOM与DOM两部分,箭头代表继承关系。
从上图可以大致了解JavaScript的所有特性。
什么是BOM
BOM是BrowserObjectModel的简写,既浏览器对象模型。
BOM由一系列对象组成,是访问、控制、修改客户端(浏览器)的属性的方法。
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象(BOM对象模型见上图)。
什么是DOM
DOM是DocumentObjectModel的简写,既文档对象模型。
DOM由一系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM是跨平台与跨语言的。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。
DOM标准是由w3c制定与维护的http:
//www.w3.org/DOM/。
DOM的顶层是document对象(DOM对象模型见上图)。
From"什么是BrowserObjects-什么是JavaScript?
-JavaScript教程"
2.JavaScript入门例子
如果还不了解从输入域名到访问网站的过程,先看看这个吧,网络的运作方式
看看猴子为什么学习做网页,猴子买报的故事:
)
你可以先通过这个链接学习一下HTML的入门例子。
JavaScript入门例子示例--可以尝试编辑
使用JavaScript在网页中输入文字
使用JavaScript弹出一个提示框
使用JavaScript与用户交互的输入框
使用JavaScript的数学计算,看看你退休时每月工资是多少?
使用JavaScript移动你的浏览器
使用JavaScript检测浏览器与操作系统
使用JavaScript验证输入表单的正确性
怎么样?
通过上面的例子,你已经感到JavaScript的强大了吧?
是不是感觉有几个例子比较复杂?
不要急,在下面的章节我将教会你上面示例的所有内容,还有不在示例中的更有趣的内容。
现在开始从头学习入门啦:
)
<1>打开记事本:
点击"开始"--选择"程序"--选择"附件"--选择"记事本"(或者打开你的Notepad++编辑器)
<2>输入下面代码(直接拷贝过去就可以啦)
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<3>点击"文件"--选择"保存"--选择文件类型为"所有文件"--文件名输入"dreamdu.html"并选择文件保存地址.(记住一定要把文件的后缀存为.html或.htm,否则网页无法显示)
<4>现在我们可以双击这个文件.看看效果吧。
现在解释一下上面的例子
HTML的相关内容,请见HTML入门例子。
JavaScript代码要放在这个开始与结束里面。
alert("");这句话是一个真正的JavaScript语句,alert代表弹出一个提示框,""代表提示框里面的内容。
几个问题
比如使用什么编辑器呀?
怎么显示扩展名等.大家可以参看HTML入门例子
延伸阅读
HTML入门例子
CSS入门例子
From"JavaScript入门例子-JavaScript教程"
3.在HTML中嵌入JavaScript
3.1.内部引用JavaScript
3.2.外部引用JavaScript
3.3.内联引用JavaScript
HTML教程中简单讲解了JavaScript在HTML中的加载方式,这里在全面总结一下。
在HTML文件中有三种方式加载JavaScript,这些方式与HTML中加载CSS很相似。
HTML加载JavaScript主要用到了两个HTML标签
HTMLscript标签
HTMLnoscript标签
内部引用JavaScript
目录
通过HTML的script标签加载JavaScript代码
通过注释隐藏JavaScript代码
在XHTML文档中使用CDATA避免解析HTML实体
没有使用CDATA
使用CDATA
屏蔽CDATA
使用noscript标签为用户提供更好的体验
延伸阅读
通过HTML的script标签加载JavaScript代码
通过HTML的script标签加载JavaScript代码
示例
");
通过注释隐藏JavaScript代码
示例
--document.write("dreamdu!
");//-->
--...//-->当浏览器不支持JavaScript时,屏蔽JavaScript代码。
这个代码是骇客技术,
--...-->属于HTML注释,//是JavaScript注释。
当浏览器支持JavaScript时//代码生效,因此HTML的注释没有效果;当浏览器不支持JavaScript时,//代码无效,因此屏蔽了
--...-->之间的JavaScript代码。
现在这种隐藏JavaScript代码的方式可以忽略,因为没有浏览器不支持JavaScript,除了部分用户手动禁止浏览器的JavaScript功能,但是这种情况很少发生。
在XHTML文档中使用CDATA避免解析HTML实体
CDATA将在XML教程中详细介绍。
这里简单介绍一下,使用CDATA囊括的内容中的HTML实体将不被翻译。
没有使用CDATA
显示6<5与dreamdu>5,在XHTML文件中必须使用<与>表示小于<与大于>
使用CDATA
[CDATA[document.write(6>5);document.write(dreamdu<5);]]> 使用CDATA后可以直接使用小于<与大于>等HTML实体。 当代码中有HTML实体时,不使用CDATA会使代码复杂(因为HTML实体通常很复杂,不直观),容易产生错误,其次代码的可读性较差。 屏蔽CDATA [CDATA[document.write(6>5);document.write(dreamdu>5);//]]> 当浏览器不支持CDATA时可以使用JavaScript注释屏蔽CDATA。 从上面描述可以看出使用CDATA还是比较麻烦的,最好的方法是不用。 怎么能不用CDATA呢? 我们可以通过外部引用加载JavaScript文件的方式避免使用XHTML中的CDATA。 使用noscript标签为用户提供更好的体验 通过JavaScript注释的方式可以隐藏JavaScript代码,通过noscript标签可以为用户提供更好的体验(提示用户你的浏览器不支持JavaScript) 示例 "); 通过上面的方式可以为用户提供更好的体验。 延伸阅读 HTMLscript标签 HTMLnoscript标签 HTML注释 HTML实体 From"内部引用JavaScript-在HTML中嵌入JavaScript-JavaScript教程" 外部引用JavaScript 目录 把JavaScript文件放在head中 把JavaScript文件放在body前 JavaScript文件的内容 JavaScript文件外部加载的好处 JavaScript文件外部加载的注意事项 外部引用就是引用HTML文件外部的JavaScript文件,这种方式可以使代码更清晰,更容易扩展。 可以通过HTML的script标签加载JavaScript文件。 把JavaScript文件放在head中 标准方法是把JavaScript文件放到head标签内。
如果浏览器不支持JavaScript,将忽略script标签里面的内容,可以避免使用
--...//-->(内部引用)。
当JavaScript有任何HTML实体时,也不需要使用CDATA标签了(因为JavaScript代码不直接在HTML文件中)。
JavaScript文件必须使用js为文件后缀。
把JavaScript文件放在body前
为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部,例如下面的代码。