day43

    xiaoxiao2021-04-16  26

    JavaScript课件

    1开发JS的插件aptana

    1.1apatana的安装

    1.1.1在eclipse下的安装

    1.1.1.1可以识别是哪个插件的安装方法

    1、在eclipse的plugins文件夹的同级目录新建文件夹,命名为plugInsNew; 2、打开plugInsNew,在其中新建一个你插件容易记的文件夹,比如: aptana_update_024747 3、打开aptana_update_024747 在其中新建一个eclipse文件夹; 4、打开eclipse文件夹,将你的features和plugins文件夹放入; 5、在plugInsNew同级目录新建links文件夹(如有可省); 名字自定义,后缀名是.link 6、在links文件夹里新建文件如:aptana_update_024747.link文件,并将插件路径引入: 如 path= C:\Program Files\MyEclipse 6.5\eclipse\pluginsNew\aptana_update_024747 重新启动eclipse即可! 这样引入插件的好处是可以方便的识别,加入或删除你所需要的插件! 1.1.1.2最简单的安装方法 1、把E:\java\java课件\javascript\ajax\aptana\aptana_update_024747\features目录下的所有的文件以及文件夹copy到C:\Program Files\MyEclipse 6.5\eclipse\features相应的文件夹下去。 2、同样把E:\java\java课件\javascript\ajax\aptana\aptana_update_024747\plugins所有的文件和文件夹copy到C:\Program Files\MyEclipse 6.5\eclipse\plugins文件夹里去。

    1.1.2在myeclipse下的安装

    1、写一个类,这个类的功能是插件配置代码生成器,这个类的名字为PluginConfigCreator.java

    2、把PluginConfigCreator.java复制到MyEclipse Java工程中 。把 String plugin = "E:/Plugins/aptana_update_024747/";改成你要安装的插件的路径,运行,把生成的文件粘贴到D:\Program Files\MyEclipse\MyEclipse 10\configuration\org.eclipse.equinox.simpleconfigurator\bundles.info文件最下面

    3、 重启一下就OK了

    1.2在myeclipse中查看aptana

    如果打开window->Preferences->Aptana->Editors->JavaScript->Code Assist能出现上述的界面,说明安装成功了。 注:aptana插件不能应用于jsp页面

    1.3Aptana功能

    1.3.1 Code Assist

    1、JavaScript,JavaScript函数,HTML,CSS语言的Code Assist功能 2、Outliner(大纲):显示JavaScript,HTML和CSS的代码结构 3、支持 JavaScript,HTML,CSS代码提示,包括JavaScript 自定函数 4、代码语法错误提示。 5、支持流行AJAX框架的 Code Assist功能:JQuery

    2 回顾javascript

    2.1函数定义的三种方式

    2.1.1第一种方式

    2.1.1.1说明 1、这是最正常的一种函数表达式 2、函数aa可以接受任意的参数 3、可以有返回值,可以用变量来接受其返回值 4、如果没有return,则返回undefined.

    2.1.2第两种方式

    2.1.2.1说明 1、直接给变量赋值一个函数 2、在项目开发中是一种比较常见的形式

    2.1.3第三种方式

    2.1.3.1说明

    2.2Boolean类型

    2.2.1情景一

    2.2.2情景二

    2.2.3情景三

    3 Dom对象

    3.1定义

    1、DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件 2、D:文档 – html 文档 或 xml 文档 3、O:对象 – 把document里的所有节点都看成对象 4、M:模型(用于建立从文档到对象的模型) 5、DOM 是针对xml(html)的基于树的API。 6、DOM树:节点(node)的层次。 7、DOM 把一个文档表示一个树模型 8、DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

    注:树模型必须具备的特点: 1、子节点只能具有一个父亲 2、只有一个根节点 3、一个父节点可以有多个子节点

    艳照门

    家族图谱

    HTML DOM树组成

    3.2节点

    1、从结构图可以看出,整个html称为dom树。而dom的引用为document,也称为一个节点 2、每一个HTML标签都为一个元素节点 3、标签中的文字则是文本节点 4、标签中的属性则是属性节点 5、dom中元素、文本、属性都是节点 6、dom树是由节点构成的 7、每个节点都代表一个对象

    3.3DOMAPI

    3.4重点API

    3.4.1getElementById()

    3.4.1.1说明: 1、 查询给定ID属性值的元素,返回该元素的元素节点。也称为元素对象。 2、 因为在一个html页面中id的值是唯一的,所以返回值也是唯一的。所以方法的名称为getElementById()而不是getElementsById() 3、 该方法只能用于document对象,类似与java的static关键字。

    3.4.1.2例子

    注:txtElement为!

    这里写图片描述的对象。所以我们可以通过对象.属性的方式访问其属性。

    3.4.2 getElementsByName()

    3.4.2.1说明:

    1、查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合。 2、这个集合可以作为数组来对待,length属性的值表示集合的个数。 3、因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName

    3.4.2.2例子

    3.4.3getElementsByTagName()

    3.4.3.1说明 1、查询给定标签名的所有元素 2、因为在html页面中,标签名不是唯一的,所以返回值为节点的集合。 3、这个集合可以当做数组来处理,length属性为集合里所有元素的个数 4、可以有两种形式来执行这个方法: 1、var elements =document.getElementsByTagName(tagName); 2、var elements = element.getElementsByTagName(tagName); 5、从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象 (document).也可以是某一个元素节点。

    3.4.3.2例子

    3.4.4 hasChildNodes()

    3.4.4.1说明 1、该方法用来判断一个元素是否有子节点 2、返回值为true或者false 3、文本节点和属性节点不可能再包含子节点,所以对于这两类节点使用 ChildNodes()方法 返回值永远为false. 4、如果hasChildNodes()返回值为false,则childNodes,firstChild,lastChild将为空数组或者空字符串。

    3.4.4.2例子

    3.4.5 nodeName

    3.4.5.1说明 1、文档中的每一个节点都有这个属性 2、为给定节点的名称 3、如果节点是元素节点,nodeName返回元素的名称 如果给定节点为属性节 点,nodeName返回属性的名称 如果给定节点为文本节点,nodeName返回为#text的字符串

    3.4.5.2例子

    3.4.6nodeType

    3.4.6.1说明 1、该节点表明节点类型,返回值为一个整数 2、常用的节点类型有三种: 1、元素节点类型 值为1 2、属性节点类型 值为2 3、文本节点类型 值为3 3.4.6.2例子

    3.4.7nodeValue

    3.4.7.1说明 1、返回给定节点的当前值(字符串) 2、如果给定节点是属性节点,返回值是这个属性的值 如果给定节点是文本节点,返回值是这个文本节点的内容 如果给定节点是元素节点,返回值是null 3、nodeValue是一个读写属性 3.4.7.2例子

    3.4.8练习一

    如图所示,输出下拉列表框要显示的值。

    3.4.9练习二

    如图所示:打印出ul子节点的所有节点的nodeName,nodeType,nodeValue及文本节点的值。

    3.4.10 replaceChild()

    3.4.10.1说明 1、把一个给定父元素里的一个子节点替换为另外一个子节点 2、var reference = element.replaceChild(newChild,oldChild) 3、返回值指向已经被替换掉的那个子节点的引用

    3.4.10.2例子

    3.4.11getAttribute()

    3.4.11.1说明 1、返回一个给定元素的给定属性的节点的值 2、var attributeValue = element.getAttribute(attributeName) 3、给定属性的名字必须以字符串的形式传递给该方法 4、给定属性的值将以字符串的形式返回 5、通过属性获取属性节点 getAttributeNode(属性的名称) ———–返回属性节点

    3.4.11.2例子

    3.4.12 setAttribute()

    3.4.12.1说明 1、将给定元素添加一个新的属性或改变它现有属性的值 2、element.setAttribute(attributeName,attributeValue); 3、属性的名字和值必须以字符串的形式传递 4、如果这个属性已经存在,那么值将被attributeValue取代 5、如果这个属性不存在,那么先创建它,再给他赋值

    3.4.12.2例子

    3.4.13

    3.4.14createElement()

    3.4.14.1说明 1、按照给定的标签名创建一个新的元素节点,方法的参数为被创建的元素的名称 2、var reference = document.createElement(elementName); 3、方法的返回值指向新建节点的引用,返回值是一个元素节点,所以nodeType 为1 4、新建的节点不会自动添加到文档里,只是存在于document里一个游离的对象

    3.4.14.2例子

    3.4.15 createTextNode()

    3.4.15.1说明 1、创建一个包含给定文本的新文本节点 2、这个方法的返回值指向这个新建的文本节点的引用 3、该方法有一个参数:新建文本节点的文本内容 4、它是一个文本节点,所以nodeType值为3 5、新建的文本对象不会自动添加到文档里,属于游离态的对象。 3.4.15.2例子

    3.4.16 appendChild()

    3.4.16.1说明 1、为给定元素增加一个子节点 var newreference = element.appendChild(newChild); 2、给定子节点newChild将成为element的最后一个节点 3、方法的返回值指向新增节点的引用 4、该方法通常与createElement()与createTextNode()一起使用 5、新节点可以追加给文档中的任何一个元素(不是属性和文本)

    3.4.16.2例子

    3.4.17练习三

    如图所示,给option项新增加一个<option value=”幼儿园”>幼儿园学位</option>

    3.4.18 insertBefore()

    3.4.18.1说明 1、把一个给定节点插入到一个给定元素子节点的前面 2、var reference = element.insertBefore(newNode,targetNode) 3、newNode节点将作为element的子节点出现,并在targetNode节点的前面 4、节点targetNode必须是element的一个子节点 5、该方法通常与createElement和createTextNode结合使用

    3.4.18.2例子

    3.4.19 练习四

    怎么样实现insertAfter

    3.4.19.1例子

    3.4.20 removeChild()

    3.4.20.1说明 1、从给定的元素里删除一个子节点 2、var reference = element.removeChild(node) 3、返回值指向已经被删除的子节点的引用 4、当某个子节点被删除时,这个子节点所包含的子节点也被删除掉 5、如果想删除一个子节点,但不知道父节点,可以使用parentNode属性

    3.4.20.2例子

    3.4.21 childNodes()

    3.4.21.1说明 1、返回一个数组,这个数组是由给定节点的子节点组成的。 2、var nodeList = node.childNodes() 3、文本节点和属性节点不可能再包含子节点,所以他们的childNodes()方法返回一个空的数组 4、如果想知道这个节点有没有子节点可以利用hasChildNodes方法。 5、一个节点的子节点有多少个可以调用数组的length来得到。 6、如果这个节点还有子节点,那么这个节点肯定是元素节点

    3.4.21.2例子

    3.4.22 firstChild

    3.4.22.1说明 1、该属性返回给定节点的第一个子节点 2、var reference = node.firstChild 3、文本节点和属性节点不包括任何子节点,所以返回值为null 4、node.firstChild=node.childNodes[0]

    3.4.22.2例子 见3.4.20例子

    3.4.23 lastChild

    3.4.23.1说明 1、该属性返回给定节点的最后一个子节点 2、var reference = node.lastChild

    3.4.23.2 例子

    3.4.24 nextSibling

    3.4.24.1说明 返回给定节点的下一个兄弟节点

    3.4.24.2例子

    3.4.25 parentNode

    3.4.25.1说明 1、返回给定元素节点的父节点 2、document没有父节点

    3.4.25.2例子 见3.4.18

    3.4.26 previousSibling

    3.4.26.1说明 返回给定节点的上一个兄弟节点

    3.4.26.2例子 见3.4.23

    3.4.27 innerHTML

    3.4.27.1说明 用来读写某个元素中的HTML内容

    3.4.27.2例子

    3.4.28 window.onload

    3.4.28.1 说明 1、在页面上所有的数据加载完以后触发该方法 2、这样做的好处是,有时候一些JS函数要用到页面上的一些数据,但是此时有些数据还没有加载进来。这个时候触发函数,就会报一些异常。所以用window.onload方法可以确保数据安全落地。

    3.4.28.2例子

    3.5综合练习

    3.5.1练习五

    如图所示:对这张表实现增加和删除

    3.5.2练习六

    3.5.3练习七

    3.5.4 练习八

    下拉列表框的两级联动

    4 js对象

    4.1实例

    4.2实例

    4.2.1说明 1、因为add前面是function关键字,所以add是一个js函数 2、add.invokeTimes意思是给add添加一个属性,所以在这里add为一个对象 3、add.invokeTimes = 0;给add对象的invokeTimes赋值为0 4、add(5,6);add作为一个函数被调用

    4.3实例

    4.3.1说明 1、从函数的角度,可以把Person看为一个函数,但是从面向对象的角度而言Person可以看作构造函数 2、Person.prototype定义Person的原型,也可以理解为为Person对象定义了一个类 3、上述的this都代表当前对象,在这个例子中当前对象是person 4、当执行var person = new Person(“11”,”22”)时,执行过程如下: 1、创建了一个空白对象 new Object(); 2、copy prototype的属性到对象中 3、将刚创建的这个对象通过this关键字传递到构造函数中,执行构造函数

    4.4实例

    4.4.1说明 1、Person.prototype.getName为Person对象的原型模式添加一个getName方法 2、Person.prototype.getSex为Person对象的原型模式添加一个getSex方法 3、所以person对象由getName和getSex方法

    4.5实例

    4.5.1说明 1、delete person.age相当于在person对象中,把age删除掉了 2、如果不是连接而是拷贝,则person不会拥有prototype的引用,如果是这种情况,执行完delete person.age应该age就没有值了,但是实际上又重新引用了prototype中的age的值,所以是引用方式

    4.6实例

    4.6.1说明 如果把this放到全局的位置(不在任何一个函数中),这个时候的this相当于window,代表当前窗口。

    4.7实例

    4.7.1说明 1、执行第20行程序,相当于调用foo函数。也可以写为window.foo(); 所以这个时候第13行的this代表window 2、在第23行定义了一个对象pack,其中一个属性foo就是foo. 3、所以在第28行foo的函数的调用者变成了pack.这个时候this为pack 4、从这个例子中可以看出this不是不变的,而是可以代表不同的对象

    4.8实例

    4.8.1说明 1、foo.apply(window)相当于window.foo() 2、foo.call(pack)相当于pack.foo() 3、第一次对foo的调用对象是window而第二次是pack

    4.9例子

    4.9.1说明 1、foo既可以是函数又可以是对象 2、在第20行代码中,foo就是一个对象,给这个对象添加一个属性boo,而这个属性是一个方法 3、第27行foo()的对象为window,28行对象为foo,29行对象变为window.所以this的值一直在改变

    4.10例子

    4.10.1说明 相当于给Array对象增加了一个圆形方法为min,求数组的最小值,通过这样的方式扩充了Array的API。这是一种比较好的写法

    4.11例子

    4.11.1说明 1、constructor对象是指向了构造器对象 2、所以18行array.constructor为Array构造器 3、23行定义了一个Foo空的构造器,那么构造器就相当于Function 4、所以一行代码的结果就成立了

    4.12例子

    4.12.1说明 1、这个例子是constructor与prototype结合的例子 2、20行到22行代码给Person对象的原型增加了一个getName方法 3、Person.prototype.constructor为Person对象原型的构造器为Person 4、Person.prototype.constructor.constructor为Function

    4.13例子

    4.13.1说明 1、第22到26行代码相当于为Person对象定义了原型 2、所以第37行输出的是false 3、所以constructor始终指向创建自身的构造函数,所以构造函数变成了Object 4、49行代码提供了改成原来的构造函数的方式

    4.14例子

    4.14.1说明 1、从前面学到的例子可以得出上面的这个例子可以实现继承 2、但是Employee的构造函数指向了Person,而不是Employee 3、所以通过47行这个问题得到了修正

    转载请注明原文地址: https://ju.6miu.com/read-672177.html

    最新回复(0)