1、JavaScript 基础知识学习目标JavaScript 编程基础JavaScript 工作原理如何在 Html 页面中使用 JavaScript（数据类型、变量、常量、运算符、表达式、控制流程、数组、函数）JavaScript 事件处理对象和系统函数浏览器对象什么是 JavaScriptJavaScript 是 Netscape 公司开发的一种脚本语言。该语言编程的程序可以被嵌入到 HTML 页面中，并直接在浏览器中解释执行。JavaScript 功能(1)增强页面动态效果(2)实现页面与用户之间的实时、动态交互JavaScript 语言特点脚本语言(Script Language)解释执
2、行(Interpreted Language)基于对象(Object Based)事件驱动(Event Driven)简单弱类型(Weakly Typed Language)JavaScript 嵌入到 HTML 页面中在 HTML 页面中使用标记嵌入脚本代码。Type=”text/javascript”JavaScript 代码的出现位置(1) HTML 页面主体部分() 例01.html(2) HTML 页面头部() 02.html(3) 单独的外部文件03.html数据类型JavaScript 支持基本数据类型和对象类型(1)基本数据类型整型 浮点型字符型布尔型(2)对象类型内置对象 (
3、String、Math、Date)浏览器对象 (Window、Document、History,Forms、)用户自定义对象变量(1)命名规则:必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。变量名区分大小写。不允许使用 JavaScript 关键字做变量名。使用 Var 声明变量,变量声明时不指定具体数据类型，其具体数据类型由给其赋的值决定。也可以不经声明而直接使用变量，但必须先赋值再取值。例 04.htmlJavaScript 关键字被赋以定特含义字符，并用于专门的用途Break continue switch case delete function retur
4、n typeof if Else var try catch throw finallyin this void false true instanceof do while debugger new with default for null常量整型常量十进制表示:12十六进制表示:0x12八进制表示:012浮点型常量 3.14布尔型常量 true字符型常量 a “abc”空值常量: null例 05.htmlJavaScript 运算符算术运算符: + - * / + - %逻辑运算符:表达式表达式是符合一定语法规则的运算符和操作数的序列。表达式的类型和值:(1)对表达式中操作数进行运算得
5、到的结果就称为表达式的值(2)表达式值的数据类型就是表达式的类型表达式的运算顺序:(1)按照运算符的优先级从高到低进行运算。(2)优先级相同的运算符按照事先预定的接合方向进行运算。程序控制流程分支语句If else 例 06.htmlSwitch 分支语句 例 07.html循环语句 例 08.html For 循环While 循环Do-while 循环For-in 循环特殊流程控制语句 09.htmlBreak 跳出循环Continue 结束本次循环，继续下次循环数组数组是多个相同类型数据的组合,实现对数据的统一管理。JavaScript 数组的声明方式:Var a = new Array(
6、);Var b = new Array(size);Var c = new Array(v1,v2,v3,);JavaScript 数组长度可变，数组对象的length 属性表明了该数组的长度。数组元素访问格式: 数组名元素下标有效元素下标的范围: 0length-1;Shift:删除数组的第一项，并返回删除元素的值；如果数组为空则返回 undefined。Var a = 1,2,3,4Var b = a.Shift(); b =1;Unshift:将数据添加到数组的开头，并返回数组的长度Var a = 1,2,3,4Var b = a.Unshift (0,-1); A =0,-1, 1,2
7、,3,4 b = 6;Pop:删除数组的最后一项, 并返回删除元素的值；如果数组为空则返回 undefined。Push: 将数据添加到数组的尾部，并返回数组的长度Concat:返回一个新的数组，将数组添加到源数组中Var a = 1,2,3,4Var b = a. Concat(0,-1);B = 1,2,3,4, 0,-1 a=1,2,3,4Reverse:数组反转 a.Reverse()Sort:排序Slice(start,end)Var a = 1,2,3,4Var b = a. Slice (2,4);B =2,3,4Join(separator)将数组的元素以separator 为
8、分隔符组成新的字符串,如果缺省的话以逗号为分隔符Var a = 1,2,3,4Var b = a.Join(“|”);B = “1|2|3|4”例 10.html函数JavaScript 中的函数(function)，是用来完成相对独立功能的一段代码的集合。格式:Function ()return 语句函数在定义时不需要指定其返回值类型和是否有返回值。例 11.html事件及事件处理机制1、 事件(Event)用于描述发生了什么事情,用户的鼠标或键盘操作(点击，文字输入,下拉框的选中)以及其他的页面操作(页面的加载和卸载)都会触发相应的事件。2、 事件源(Event Source)可能产生事件
9、的组件，一般网页中为表单组件3、 事件驱动(Event Driven)由事件引发程序的响应，执行事先准备好的事件处理代码，这种程序运行方式称为事件驱动。4、 事件处理代码(Event Handle)JavaScript 中事件处理代码通常定义为函数的形式，在其中加入所需要的处理逻辑，并将之关联到所关注的事件源组件上。常用的事件类型OnClick 组件被点击onDbClick 组件被双击onLoad 页面加载onUnload 页面卸载onChange 组件内容发生变化或条目选中状态发生变化onMouseMove 鼠标移动onFocus 获得焦点onBlur 失去焦点举例说明 12.html 13
10、.htmlJavaScript 常用对象1、数学对象 Math(静态对象)Math 对象的属性:PI 圆周率,EMath 对象的方法:Ceil(数值) 向上取整Floor(数值) 向下取整Min(数值 1, 数值 2)最小值Max(数值 1, 数值 2)最大值Pow(数值 1, 数值 2) 数值 1 的数值 2 次方Random() 0 到 1 的随机数Round(数值) 四舍五入到整数Sqrt(数值) 开平方根Abs(),sin(),cos()举例: 14.html2、 时间对象 封装了日期和时间信息，并提供相关的操作功能。使用前需要声明/创建对象:Var curtime = new Dat
11、e();如下的相关方法:得到时间的方法:getYear() 返回年份getFullYear() getMonth() 返回月份getDate() 返回日期getDay() 返回星期几 0getHours()返回小时数getMinutes()返回分钟数getSeconds()返回秒数getTime() 返回整个时间设置时间的方法:setYear() 设置年份setMonth()设置月份setDate() 设置日期setHours()设置小时数setMinutes()设置分钟数setSeconds()设置秒数setTime()设置整个时间转换时间的方法:toLocaleString()把 Date
12、 对象转换成本地格式的时间字符串。举例: 15.html3、 字符串对象 String 对象描述和处理文本字符串信息创建 String 对象的语法：New String(s);属性:Length 字符串长度方法:charAt(idx) 返回指定下标的字符indexof(chr) 返回字符所在的位置indexof(chr,idx)lastindexof(chr)substring(m,n)从 m 位置截取到 n 位置的字符串substring(m) 从 m 位置截取到当前字符串尾部的子字符串substr(m,n) 从 m 位置截取 n 个字符串substr(m) 从 m 位置截取到当前字符串尾部
13、的子字符串 toLowerCase()转成小写toUpperCase()转成大写search(str) 检索与正则表达式匹配的值。match(str)找到一个或多个正则表达式的匹配。如果没有找到 str,返回null;如果找到则返回一个数组。Replace(str1,str2)替换与正则表达式 str1 匹配的子字符串 str2 Split()把子字符串分割成数组举例: 16.htmlRegExp 对象创建正则表达式的对象语法:(1)Var p = new RegExp(pattern,attributes);(2)Var p = /pattern/attributes;参数 pattern
14、是一个字符串,指定了正则表达式的模式或其他正则表达式。Attributes 是一个可选的字符串,包含的属性”g”(全局匹配),”i”(区分大小写匹配)和”m”(多行匹配),注:如果 pattern部分是正则表达式，而不是字符串的话，则该参数必须省略。匹配方法:Test()方法: regexp 对象实例.test(字符串)返回值:如果字符串满足 regexp 对象实例中规定的正则规则时,返回 true,否则返回 false;Exec()方法：regexp 对象实例. Exec (字符串) 返回值:如果 EXEC()方法中没有找到匹配，则返回 null，如果找到匹配，则返回一个数组。并且更新全局
15、RegExp 对象的属性，以反应匹配结果。数组的 0 元素包含了完整的匹配，从第 1 到 n 元素中包含的是匹配中出现的任意一个子匹配字符串。例 17.html系统函数系统函数不属于任何对象，可以在JAVASCRIPT 代码中的任何位置直接使用Eval(str) 计算字符串形式给出的表达式的值。parseInt(str) parseInt(str,radix) radix 表示进制将字符串形式的数值解析为整数，如果解析到字符串中间遇到非法字符则返回已解析的内容，而不是出错；如果字符串开头的第一个就是非法字符的话，则返回NaN(非数值类型 not a number)parseFloat(str)
16、 将字符串形式的数值解析为浮点数isNaN(v)判断该数的值是否为 NaN例 19.html浏览器对象浏览器对象属于 javascript 内置对象，使用这些对象可以实现与 HTML 页面进行交互。浏览器对象的层次模型:DOM 模型(Document Object Model,文档对象类型)BOM browse object model =Window 对象表示是浏览器的窗口。(1) 可以使用 window 对象来获取浏览器窗口的状态信息，也可以通过它来访问其他浏览器对象及窗口发生的事件信息。(2) window 对象是其他浏览器对象的共同祖先，所以一般在 javascript 程序中可以省略
17、 window 对象。(3) 浏览器打开 HTML 文档时，通常会创建一个 window 对象。Window 对象常用方法:Alert(object)Open(URL,windowname,parameterlist)补充说明:Parameterlist 参数列表的内容Toolbar = yes/no 标准工具条location = yes/no 位置输入字段directions = yes/no 标准目录按钮status = yes/no 状态条menubar = yes/no 菜单条scrollbar = yes/no 滚动条revisable = yes/no 能否改变窗体的大小widt
18、h = 值 窗口的宽度height = 值 窗口的高度top = 值 窗口的顶部距离屏幕的距离left = 值 窗口的左部距离屏幕的距离Close()Prompt(text,defaulttext)Confirm(text) 返回值:”点击确定”返回 true,否则返回 falsesetInterval(func,timer)clearInterval(timer)opener 例 18.htmlNavigator 对象Navigator 对象是 window 对象的属性，它封装了当前浏览器的相关信息。Navigator 对象主要属性:appName 浏览器名称appVersion 浏览器的版
19、本号language 浏览器使用的语言systemlanguage 系统语言userlanguage 用户言语platform 操作系统平台例 20.htmlLocation 对象Location 对象是 window 对象的属性,表示当前打开的 URL,提供相关的操作方法。Location 对象的常用属性和方法:Window.location = “url”;指向目标页面Reload() 刷新，重加载例: 21.html=History 对象History 对象是 window 对象的属性，主要封装了当前浏览器曾经访问过的网页信息，并提供了相应的访问和页面跳转功能。History 对象的主要
20、属性和方法:Go(index) 前进或后退指定的多个页面Back();后退一个页面Forward();前进一个页面例: 22.htmlDocument 对象Document 对象是 window 对象的属性,它表示的是当前显示的文档，其中封装了文档中元素的相关信息，并提供了相应的操作功能。常用属性:Document.title 设置文档标题等价于标签。Document.Write();Html DOM 结构图Window-navigator-plugins-mime types-frames-location-history-window objects(self,parent)-docume
21、nt-forms-elements-images-embeds-links-anchors-appllets对象属性Document.title 设置文档标题等价于标签。Document.bgcolor 背景颜色Document.fgcolor 前景颜色(文本颜色)Document.linkcolor 未点击的连接颜色 Document.alinkcolor 焦点在连接上的颜色Document.vlinkcolor 点击过后的连接颜色 Document.charset 字符集Document.cookie 设置和读取 cookie常用方法Document.write();Document.cr
22、eateElement(Tag); /创建一个 html 标签对象.Document.getElementById(id) /获取指定 ID 值的对象。Document.getElementsByName(name) /获取指定 Name 值的对象。Document.body /Document.body.linkDocument.body.alinkDocument.body.vlinkDocument.body.textDocument.body.leftMarginDocument.body.rightMarginDocument.body.topMarginDocument.body.
23、bottomMarginDocument.body.backgroundDocument.body.innerText /在文本内容Document.body.innerHTML /在HTML 代码Document.body.appendChild(Tag);/绑定一个对象到正文部分常用事件Document.body.onclick = “”Document.body.onmouseover = “”Document.body.onmouseout = “”=HTML DOMDOM （Document Object model）文档对象模型DOM 树结构：Document 最顶层的节点，其他节
24、点都附属于它。DocumentType - DTD 引用节点DocumentFragment 碎片文档Element 表示起始标签到结束标签之间的内容Attr 表示属性名和内容Text 表示标签之间的文本内容CDataSection 节点Entity Entity 定义节点EntityReference 实体引用节点ProcessingInstruction PI 节点Comment 注释节点Notation DTD 规范中定义的记号创建节点的方法createElement(tagname) 创建一个标签名为 tagname 的元素createTextNode(text) 创建一个包含文本te
25、xt 的文本节点appendChild(节点对象) 添加节点removeChild(节点对象) 删除节点对象删除当前节点的子节点，返回删除的节点。这个被删除的节点可以被插入到其他地方。节点的 parentNode 特性replaceChild(节点 1，节点 2)用节点 1 替换节点 2。insertBefore(节点 1，节点 2)在节点 2 之前插入节点 1.cloneNode(deepBoolean)复制节点，复制了原节点的属性，在把这个新节点插入到document 前需要修改 ID 属性确保 ID 值唯一。布尔参数 deepBoolean 为 true 时，复制当前节点的所有子节点，包
26、括该节点内的文本。Node 接口 attributes 方法 注意，只有 element 节点才能具有该特性。getNamedItem(name) 返回 nodename 属性值等于 name 的节点setNamedItem(node)NameNodeMap 对象 length 包含节点数量的。nihaoVar pp = document.getElementById(“p1”);pp.attributes.getNamedItem(“id”).nodevalue = “yy”;pp.attributes.item(0).nodevaluegetAttribute(name)setAttribute(name,value)getElementsByTagName();Javascript 操作 xml 例:testxml.htmlXMLHttpRequest 对象创建 XMLHttpRequest 对象的语法:xmlhttp = new XMLHttpRequest();xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP “);OPEN(“GET、POST”,url,true);Send()
