01_javascript基础.ppt

1、JavaScript,本章内容,C/S与B/S 静态网页和动态网页 HTML基本元素 CSS JavaScript(重在应用) XML(基本知识、DTD、dom4j解析),JavaScript,JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用户之间的交互性能 JavaScript是一种基于对象的语言 由Netscape公司开发 它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是函数式的语言。 客户端的JavaScript 必须要有浏览器的支持,在网页中加入JavaScript,通过在网页中加入标记JavaScript的开始和

2、结束，将JavaScript代码放到之间(8.htm) 也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名 原则上，放在之间。但视情况可以放在网页的任何部分 一个页面可以有几个 ，不同部分的函数和变量，可以共享。,JavaScript基本语法,JavaScript是一门弱类型的语言，所有的变量定义均以var来实现 JavaScript区分大小写,javascript常用方法,为了教学演示方便，我们先介绍javascript里的常用方法 window.alert(内容): window对象的一个方法，在页面弹出一个警告框。 document.writ

3、e(内容): document对象的一个方法，在网页显示指定的内容。,JavaScript基本语法变量,变量定义： 用var来定义变量 var i = 10; var myName = zhangsan; var 性别 = 男; 虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做(12.htm),JavaScript基本语法运算符与表达式,运算符 算术运算符: +、-、*、/、%（14.htm） 条件运算符: 、=、=、= 逻辑运算符: condition ; step) 22.htm for(var var_name in 数组),JavaScript基本语法字符串对象,创

4、建 var myName = zhangsan; var gender = new String(男); 常用方法、属性 得到字符串的长度(属性): length 取子串：substring(index1,index2)(17.htm) 取指定长度的子串:substr(beginIndex,length) 判断子串的位置indexOf 取指定字符的位置charAt() 替换replace() 拆分为数组split(),JavaScript基本语法常用内置对象_数组,数组定义 var arr = new Array(3); var arr = 1, 2, 3; 通过arr.length取得数组的

5、长度 例子:13.htm,JavaScript基本语法常用内置对象_Date,Date对象的创建: var date = new Date(); Date对象常用方法: getYear() getMonth() getDate() getDay() getHourse() getMinutes() getSeconds() setXxx() . 例子: 是JavaScript在页面显示当前系统时间,JavaScript基本语法常用内置对象_Math,和java.util.Math用法类似,JavaScript基本语法函数,函数的定义 function fun_name(paramName) /

6、 函数体 注意: 函数没有返回值类型，也没有形参的类型 函数可以有返回值 函数的执行一定和某个事件关联的 例子 利用function来定义一个函数(25.htm) 传入参数(26.htm) 传出值(27.htm),JavaScript事件处理,事件及处理描述: 这里所说的事件特指在网页中点击鼠标、键盘响应时发生的事情，如点击按钮，就触发了按钮的点击事件；在文本框输入数据时可能发生键盘按下事件，等等。事件触发后，常常用js的函数来处理事件。 js常用事件 onfocus：在用户为了输入而选择select、text、textarea时(onFocus.htm) onblur：在select、tex

7、t、password、textarea失去焦点时。(Blur.htm) onchange：在select、text、textarea的值被改变且失去焦点时(onChange.htm/SelectonChange.htm) onclick：出现在一个可选对象被鼠标选中时（button,checkbox,radio,link,reset,submit,text,textarea等）/ ondblclick (双击) onload：出现在一个文档完成对一个窗口的载入时 onmouseover：鼠标被移动到一个标签元素上时 onmouseout：鼠标从一个标签元素上移开时 onselect：当form

8、对象中的内容被选中时 onsubmit：出现在用户通过提交按钮提交一个表单时 onunload：当用户退出一个文档时,键盘事件,onkeydown: 表示 onkeyup onkeypress,A,onkeydown,onkeyup,onkeypress,常用内置函数,parseInt(numString):返回由字符串转换得到的整数 parseFloat(numString ):返回由字符串转换得到的浮点数 isNaN(numString ):返回一个 Boolean 值，指明提供的值是否是一个数字 (is Not a Number),+,=,计算,浏览器对象,我们平常看到的浏览器在JS中可

9、以用浏览器对象表示，它包括网页的HTML部分（称为文档-document对象、浏览过的网页记录(history对象)、地址栏(location对象)、状态栏(status对象)等,window,location,history,document,status,screen,form,anchor,img,图解window对象,screen,document,location,status,history,window对象,window对象是浏览器对象模型的顶层对象，表示一个浏览器窗口 window对象的常用属性 document: 表示浏览器窗口的HTML文档 frames: 表示当前浏览器窗

10、口所有iframe对象的集合 history: 关于访问过的网页历史记录 location: 表示当前浏览器的URL(地址栏) status: 表示当前浏览器的状态栏 screen: 表示当前屏幕信息 opener: parent: selt,window对象常用方法,alert(“”): 显示一段消息和一个确认按钮的警告框 prompt(“提示内容”,”初始值”): 显示可提示用户输入的对话框 confirm(“提示消息”): 显示一段消息以及一个确认按钮和取消按钮的 对话框 open(“url”,”name”,“窗口特性”):打开指定url并具有指定特性的新窗口 showModalDial

11、og(“url”,”name”,”窗口特性”): 打开模式窗口 dialogWidth:200px;status:off; close(): 关闭当前窗口 setInterval(“method”,ms): 设置定时器 setTimeout(“method”,ms): 设置超时时间,JavaScript的对话框,警告框(alert)：出现一个提示信息 28.htm 询问框(prompt)：返回输入的值 29.htm 确认框(confirm)：根据不同的选择，返回true/false 30.htm,window.open(),window.open(“url”,”name”,“窗口特性”):打开

12、指定url并具有指定特性的新窗口 url: 在打开窗口显示的网页的URL name: 新窗口的名称 表示新窗口的打开方式 _self: 在当前窗口打开 _blank: 新开启一个窗口 _parent: 在父窗口打开 窗口特性,窗口特性,window.showModalDialog,window.showModalDialog(“url”,”name”,”窗口特性”): 打开一个模式窗口,setTimeout、setInterval,setInterval(code, millisec):可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setTimeout(code, millisec):

13、在指定的毫秒数后调用函数或计算表达式 例子: 用JS实现时钟的效果,History对象,利用history对象可以访问浏览器的最近访问过的网页历史 常用方法 back() forward() go(“url” | num),location对象,location对象表示浏览器的地址栏信息 常用属性 host: 设置或返回主机名和当前 URL 的端口号 hostname: 设置或返回当前 URL 的主机名 href:设置或返回完整的 URL 常用方法 assign(url):加载新的文档。 reload():重新加载当前文档。 replace(url):用新的文档替换当前文档。,status对象

14、,status表示当前浏览器的状态栏属性 status=“文本”: 设置窗口状态栏的文本,document对象,document: 表示当前的文档对象,document常用方法,getElementById(id):返回对拥有指定 id 的第一个对象的引用 getElementsByName(name):返回带有指定名称的对象集合 getElementsByTagName(tagName):返回带有指定标签名的对象集合 write(content): 向文档写入 HTML 表达式或 JavaScript 代码,HTML标签元素常用属性,innerText: 设置或得到开始标签和结束标签之间的文

15、本内容 innerHTML:设置或得到开始标签和结束标签之间的HTML内容,表单元素的处理,表单元素常用方法 focus(): 获得焦点 select(): 选中状态 blur(): 失去焦点 下来列表（框）的常用属性、方法事件 length value options var item = new Option(“label”,”value”) selectedIndex add(option) onchange 改变表单元素回车提交表单的操作 window.event.keyCode 为13(回车键)改为event.keyCode为9(Tab键) window.event.srcEleme

16、nt: 获得触发事件的标签元素,练习,完成用户登录页面的输入校验功能,Java Script与DOM,DOM,DOM(Document Object Model): 文档对象模型 W3C定义的一组规范 定义了如何以编程的方式访问文档结构(如HMTL、XML)中的元素 以树型层次结构组织文档，文档结构中的元素称为一个DOM的一个节点(根节点、父节点、子节点、兄弟节点、叶子节点、属性节点等)或对象,HTML DOM 通用节点类型,文档节点表示整个 HTML 文档。 元素节点表示 HTML 元素，如 a 或 img。 属性节点表示 HTML 元素的属性，如 href(a 元素)或 src(img 元

17、素)。 文本节点表示 HTML 文档中的文本，如 “Click on the link below for a complete set list”。这是出现在 p、a 或 h2 这些元素中的文字。,HTML DOM,描述HTML的DOM 根节点: ,html,head,body,title,style,script,div,div(submenu_1),span,子菜单11,label,body,html,span,HTML,Head,body,title,meta,div,div,div,span,label,label,label,label,label,操作HTML DOM,获得一个H

18、TML元素(对象、节点): document.myfrm.firstNum document.getElementById() document.getElementsByName() document.getElemnetsByTagName() 获得一个节点的相关属性 nodeType: 节点的类型 1 表示元素节点，2表示属性节点，3表示文本节点 节点名字: obj.nodeName, 大写的标签名 父节点: obj.parentNode 所有子节点: obj.childNodes 第一子节点: obj.firstChild 最后一个子节点: obj.lastChild 前一个兄弟节点: obj.previousSibling 后一个兄弟节点: obj.nextSibling,操作HTML DOM,节点的属性: obj.属性名 节点的文本: obj.innerText(HTML DOM) 创建一个节点: 创建元素节点: var newEle = document.createElement(“tr”) obj.appendChild(newEle) 设置属性: 创建属性节点 var at