javaweb视频教程_day4-资料源码pptjavascript

1、高级软件人才实作培训专家!JavaScript北京传智播客教育高级软件人才实作培训专家!JavaScript概述 Javascript是基于对象和主要应用在客户端。 特点： 交互性（信息的动态交互） 安全性（不可以直接访问本地硬盘） 跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）驱动的脚本语言，北京传智播客教育 高级软件人才实作培训专家!JavaScript与java不同 Netscape公司开发的一种脚本语言 ，并且可在所有主要的浏览器中运行 IE、Firefox、Chorme、Opera JavaScript 是基于对象的，

2、java是面向对象 JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行。 JavaScript 是一种弱类型语言，java是强类型语言。北京传智播客教育 高级软件人才实作培训专家!JavaScript历史 在早期浏览器竞争的背景下，各浏览器厂商标新立异，独树一帜，JavaScript 脚本编写者们苦不堪言 W3C、ECMA 的不懈努力下，随着Microsoft 的 IE浏览器的不断改进，一个遵奉标准、笃行规范的 Web 新世界展现在世人面前北京传智播客教育 高级软件人才实作培训专家!JavaScript语言组成

3、一个完整 JavaScript实现由以下3个部分组成 核心（ECMAScript） 文档对象模型（DOM） 浏览器对象模型（BOM）北京传智播客教育 高级软件人才实作培训专家!JavaScript程序编写 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中 编写JavaScript 两种方式：内部JS和外部JS 内部JS程序，在HTML源码中 alert(1);language 属性不赞成使用，请使用type属性替代 外部JS程序，在HTML中引入单独的JS程序 1.js 内容alert(2);在引用外部JS的script标签间不能编写JavaS

4、cript代码北京传智播客教育 高级软件人才实作培训专家!JavaScript基本语法 变量、函数、运算符区分大小写 变量是弱类型的 var a = 10; var b = true; var c = hello; 每行结尾的;可有可无，建议编写 两种类型的注释 单行注释以双斜杠开头（/） 多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）北京传智播客教育 高级软件人才实作培训专家!JavaScript的数据类型 JavaScript和Java一样存在两种数据类型原始值 （存储在栈Stack中简单数据）引用值 （存储在堆heap中

5、对象） 5种原始数据类型Undefined、Null、Boolean、Number 和 StringJavaScript中字符串是原始数据类型 通过typeof运算符，查看变量类型所有引用类型都是object 通过instanceof 运算符解决typeof对象类型判断问题 区分 undefined 和 null变量定义了未初始化/ 访问对象不存在属性 - undefined访问的对象不存在 - null北京传智播客教育 高级软件人才实作培训专家!JavaScript语句 判断语句中，条件如果直接写=号，那就是赋值操作。 Switch语句和java中的一样。 For循

6、环也和java中的一样，但是要注意定义变量时使用var，不要写成java的int。 练习99乘法表北京传智播客教育 高级软件人才实作培训专家!JavaScript运算符 Javascript中小数和整数都是数字类型，所以除法中没有整数，会出现小数。 字符串与数字相加，是字符串链接，如果相减，字符串直 接转换成数字再相减。 Boolean类型可以进行运算，false就是0或者null，非0非空是true，默认用1显示。+ - 等和java中一样。北京传智播客教育 高级软件人才实作培训专家!JavaScript数组 数组有两种定义方式 var a

7、rr = 1,2,4;定义一个数组，包含三个元素。 var arr = new Array(5);定义一个数组，数组的长度是5 var arr = new Array(1,2,4);定义数组，包含三个元素 数组有属性length 数组的长度是可变的 数组可以存放不同的数据类型的数据北京传智播客教育 高级软件人才实作培训专家!JavaScript 函数的定义 方式一function add(a,b) return a + b;函数无需定义返回值，可以直接返回 方式二var add = function(a,b)return a+b; 方式三（不推荐使用）var add=

8、new Function(a,b,return a+b;);方法的最后一个参数是函数体，之前是可变参数北京传智播客教育 高级软件人才实作培训专家!JavaScript中函数的重载 Java 重载：方法名相同参数个数 或参数 类型不同. JavaScript中是否存在重载? 需要使用一个对象arguments arguments就是一个数组.用于存储函数传入的参数的个数.北京传智播客教育 高级软件人才实作培训专家!JavaScript全局变量和局部变量 全局变量：在标签中间定义的变量，在该标签内乃至整个页面都有效。 局部变量：在函数体内定义的变

9、量。北京传智播客教育 高级软件人才实作培训专家!JavaScript对象之String对象 String对象的方法分成两类，一种是关于与html有关的方法。 另一种和java中的String相似的方法。北京传智播客教育 高级软件人才实作培训专家!JavaScript对象之Array对象 数组定义方法： var arr = 3,4,5; var arr = new Array(5); var arr = new Array(1,2,3); 一些常用方法： concat() 连接两个或更多的数组，并返回结果。 join() 把数组的所有元素放入一

10、个字符串。元素通过指定的分隔符进行分隔。 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素，并返回新的长度。 reverse()颠倒数组中元素的顺序北京传智播客教育 高级软件人才实作培训专家!JavaScript对象之Date对象 创建Date对象：var date = new Date(); 常用方法：getDate() 从 Date 对象返回一个月中的某一天 (1 31)getDay() 从 Date 对象返回一周中的某一天 (0 6)getMonth() 从 Date 对象返回月份 (0 11)getFullYear() 从

11、 Date 对象以四位数字返回年份getTime() 返回 1970 年 1 月 1 日至今的毫秒数 常用在防止浏览器缓存时候setTime() 根据毫秒数设置时间toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。北京传智播客教育 高级软件人才实作培训专家!JavaScript对象之Math对象 Math对象中的方法全部是静态方法，所以不用new直接调用即可。 常用方法： ceil(x) 对一个数进行上舍入。 floor(x) 对一个数进行下舍入。 round(x) 把一个数四舍五入为最接近的整数 pow(x,y) 返回 x 的 y

12、次幂 random() 返回 0 1 之间的随机数北京传智播客教育 高级软件人才实作培训专家!JavaScript 全局函数(global) encodeURI / decodeURI编解码URI进行url跳转时可以整体使用encodeURI escape / unescape对字符串进行unicode编码1、escape不编码字符有69个：*，+，-，.，/，_，0-9，a-z，A-Z2、encodeURI不编码字符有82个：!，#，$，&，(，)，*，+，,，-，.，/，:，;，=，?，_，0-9，a-z，A-Z3、encodeURIComponent不编码字符有

13、71个：!， ，(，)，*，-，.，_，0-9，a-z，A-Z isNaN 检查某个值是否为数字 eval 把javascript 字符串作为脚本代码来执行 parseInt方法：把字符串转换成整数北京传智播客教育 高级软件人才实作培训专家!BOM基础加强北京传智播客教育高级软件人才实作培训专家!浏览器对象BOM DOM Window DOM Navigator DOM Screen DOM History DOM Location北京传智播客教育 高级软件人才实作培训专家!浏览器对象的使用 HistoryHisto

14、ry 对象包含用户（在浏览器窗口中）访问过的 URLback()加载 history 列表中的前一个 URLforward()加载 history 列表中的下一个 URLgo()加载 history 列表中的某个具体页面练习：返回按钮制作 LocationLocation 对象包含有关当前 URL 的信息通过href属性完成超链接效果练习：超链接按钮效果北京传智播客教育 高级软件人才实作培训专家!Window对象Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。confirm()显示带有一段消息以及确认按钮和

15、取消按钮的对话框。prompt()显示可提示用户输入的对话框。open()打开一个新的浏览器窗口或查找一个已命名的窗口。close()关闭浏览器窗口。setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。setTimeout()在指定的毫秒数后调用函数或计算表达式。clearInterval()取消由 setInterval() 设置的 timeout。alert()显示带有一段消息和一个确认按钮的警告框。北京传智播客教育 高级软件人才实作培训专家!window的open close练习北京传智播客教育 高级软件人才实作

16、培训专家!与对话框有关的方法 window.alert(String) Boolean window.confirm(String) String mpt(String)北京传智播客教育 高级软件人才实作培训专家!setInterval和setTimeout setInterval(code,millisec,lang)setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式setInterval() 方调用或窗口被关闭不停地调用函数，直到 clearInterval() 被 setTimeout(code,millise

17、c)setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式注意：setTimeout() 只执行 code 一次。如果要多次调用，可以让 code 自身再次调用 setTimeout()。北京传智播客教育 高级软件人才实作培训专家!DOM基础加强北京传智播客教育高级软件人才实作培训专家!DOM（文档对象模型）文档：标记型文档对象：封装了属性和行为的实例，可以直接被调用。模型：所有的标记型文档都具有一些共性特征的一个体现。用来将标记型文档封装成对象，并将标记型文档中的所有内容（标签、文本、属性）都封装成对象。封装成对象的目的是为

18、了更方便的操作这些文档及其文档中的所有内容。因为对象包含属性和行为。标记型文档包含标签、属性、标签中封装的数据。只要是标记型文档，DOM这种技术都可以对其进行操作。常见的标记型文档包括：HTMLXML。DOM要操作标记型文档必须先进行解析。北京传智播客教育 高级软件人才实作培训专家!DOM结构模型北京传智播客教育 高级软件人才实作培训专家!DOM三个级别和DHTML介绍 DOM模型有三种：DOM level 1：将html文档封装成对象。DOM level 2：在level 1的基础上添加新的功能，例如：对于持。DOM level 3：支持x

19、ml1.0的一些新特性。 DHTML动态的HTML，它不是一门语言，是多项技术综合体的简称。包括html，css，dom，javascript。 这四种语言的职责：Html：负责提供标签，封装数据，这样便于操作数据。Css：负责提供样式，对标签中的数据进行样式定义。和css样式的支Dom：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。Javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。北京传智播客教育 高级软件人才实作培训专家!BOM 和HTML DOM关系图北京传智播客教育 类高型/返级回类软型件人才实作培说

20、训专家!明特性/方法N O D E接口的特性和方法nodeNameString节点的名字；根据节点的类型而定义nodeValueString节点的值；根据节点的类型而定义nodeTypeNumber节点的类型常量值之一ownerDocumentDocument指向这个节点所属的文档firstChildNode指向在childNodes列表中的第一个节点lastChildNode指向在childNodes列表中的最后一个节点childNodesNodeList所有子节点的列表parentNodeNode返回一个给定节点的父节点。previousSiblingNode指向前一个兄弟节点；如果这个节

21、点就是第一个兄弟节点，那么该值为nullnextSiblingNode指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为nullhasChildNodes()Boolean当childNodes包含一个或多个节点时，返回真attributesNamedNodeMap包含了代表一个元素的特性的Attr对象；仅用于Element节点appendChild(node)Node将node添加到childNodes的末尾removeChild(node)Node从childNodes中删除nodereplaceChildNode将childNodes中的oldnode替换成newnode(

22、newnode, oldnode)insertBeforeNode北京传智播在客c教hil育dNwodwews中.itc的asret.fcnnode之前插入newnode (newnode, refnode)高级软件人才实作培训专家!Document对象 每个载入浏览器的 HTML 文档都会成为 Document 对象 常用属性all 提供对文档中所有 HTML 元素的访问 FF不支持forms返回对文档中所有 Form 对象引用body提供对 元素的直接访问 常用方法getElementById()返回对拥有指定 id 的第一个对象的引用getElementsByName()返回带有指定名称

23、的对象集合getElementsByTagName()返回带有指定标签名的对象集合write()向文档写 HTML 表达式 或 JavaScript 代码北京传智播客教育 高级软件人才实作培训专家!Element 对象 操纵 Element 对象的属性(首先要获取到element) 获取属性：getAttribute(name)方法。 设置属性：setAttribute(name,value)方法。 删除属性：removeAttribute(name)方法。 在 Element 对象中查找 Element 对象在Element对象的范围内，可以用来查找其他节点的唯一有

24、效方法就是getElementsByTagName()方法。而该方法返回的是一个集合北京传智播客教育 高级软件人才实作培训专家!Node常用属性 nodeName如果节点是元素节点，nodeName返回这个元素的名称如果是属性节点，nodeName返回这个属性的名称getAttributeNode如果是文本节点，nodeName返回一个内容为#text 的字符串 nodeTypeNode.ELEMENT_NODE-1Node.ATTRIBUTE_NODE-2- 元素节点- 属性节点Node.TEXT_NODE nodeValue-3- 文本节点如果给定节点是一个属性节

25、点，返回值是这个属性的值如果给定节点是一个文本节点，返回值是这个文本节点内容如果给定节点是一个元素节点，返回值是 null北京传智播客教育 高级软件人才实作培训专家!节点名称、值和类型 nodeName：其内容是给定节点的名字。 如果是元素节点，nodeName返回这个元素的名称(标签名)。 如果是属性节点，nodeName返回这个属性的名称(属性名)。 如果是文本节点，nodeName返回一个内容为#text 的字符串。 nodeType：返回一个整数，这个数值代表着给定节点的类型。 Node.ELEMENT_NODE Node.ATTRIBUTE_NODE Nod

26、e.TEXT_NODE-1-2-3- 元素节点- 属性节点- 文本节点 nodeValue：返回给定节点的当前值（字符串）。 如果给定节点是一个属性节点，返回值是这个属性的值。 如果给定节点是一个文本节点，返回值是这个文本节点内容。 如果给定节点是一个元素节点，返回值是 null。北京传智播客教育 高级软件人才实作培训专家!父节点、子节点和同辈节点 父节点： parentNode parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。 document 节点的没有父节点。 子节点 childNodes：获取指定节点的所有子节点集合

27、。 firstChild：获取指定节点的第一个子节点。 lastChild：获取指定节点的最后一个子节点。 同辈节点 nextSibling: 返回一个给定节点的下一个兄弟节点。 previousSibling：返回一个给定节点的上一个兄弟节点。北京传智播客教育 高级软件人才实作培训专家!节点属性(了解) 节点属性attributes是Node接口定义的属性。 节点属性attributes就是节点（特别是元素节点）的属性。 事实上，attributes中包含的是一个节点的所有属性的集合。 attributes.getNameItem()和Element对象的getAt

28、tribute()方法类似。北京传智播客教育 高级软件人才实作培训专家!检测子节点和属性 查看是否存在子节点： hasChildNodes() 查看是否存在属性：hasAttributes() 即使节点中没有定义属性，其attributes属性仍然有效的，而且长度值为0。 同样节点中的childNodes属性也是如此。 当你想知道某个节点是否包含子节点和属性时，可以使用hasChildNodes() 和hasAttributes()方法。但是，如果还想知道该节点中包含多少子节点和属性的话，仍要使用attributes和childNodes属性。 在IE浏览器中，不存在

29、hasAttributes()方法！北京传智播客教育 高级软件人才实作培训专家!操作 DOM节点树 插入节点 appendChild()方法 insertBefore(newNode,oldNode)方法 没有insertAfter()方法 删除节点：removeChild()方法 替换节点：replaceChild(newNode,oldNode)方法北京传智播客教育 高级软件人才实作培训专家!移动节点 复制节点：cloneNode(boolean)方法，其中，参数boolean是判断是否复制子节点。 移动节点：由以下三种方法组合完成 查找

30、节点 getElementById()：通过节点的id属性，查找对应节点。 getElementsByName()：通过节点的name属性，查找对应节点。 getElementsByTagName()：通过节点名称，查找对应节点。 插入节点 appendChild()方法 insertBefore()方法 替换节点：replaceChild()方法北京传智播客教育 高级软件人才实作培训专家!innerHTML属性 浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。 innerHTML 属性可以用来读，写某给定元素里的HTML 内容。 innerHTML 属性多与

31、div或span标签配合使用。北京传智播客教育 高级软件人才实作培训专家!练习北京传智播客教育 高级软件人才实作培训专家!练习北京传智播客教育 高级软件人才实作培训专家!练习北京传智播客教育 高级软件人才实作培训专家!JavaScript常用 鼠标移动 鼠标点击 加载与卸载 聚焦与离焦 键盘 提交与重置 选择与改变北京传智播客教育 高级软件人才实作培训专家!鼠标移动 onmouseout/onmouseover function mouseovertest()document.getElementById(info).value = 鼠标在输入框上;function mouseouttest() document.getEl