JavaScript实验_第1页
JavaScript实验_第2页
JavaScript实验_第3页
JavaScript实验_第4页
JavaScript实验_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、实验项目：浏览器脚本语言及其应用实验类型：设计实验课时：4实验目的：研究javascript及其应用实验方案：1 研究将JavaScript引入HTML页面创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">alert("内嵌JavaScript代码");</script><script type="text/javascript" src="a.js"><!- 引入js文件 ->alert(&

2、quot;引入js文件的script元素中的内嵌代码不会执行");</script><script type="text/javascript" src="a.js" /><!- 错误，必须使用结束标签 -><noscript>不支持JavaScript时的提示</noscript><div onclick="alert('事件句柄属性值中的Javascript代码')">点我</div> 2 研究JavaScript的执行时

3、序创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">        window.onload=function()alert(1);/文档装载完成时执行        onload=function()alert(2); /省略顶层对象名，覆盖上一次赋值</script><body onload="alert(3) &q

4、uot;>   <!-chrome在window.onload后执行,如果JS的onload代码在其后则会覆盖->   <!-IE覆盖window.onload,如果JS的onload代码在其后则会覆盖->   <button onclick="alert(4)">按钮单击事件</button></body>3 研究JavaScript名称创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="te

5、xt/javascript">var a=1;/定义变量，当前对象为window，所以a也是window的属性b=2;/window对象的属性var c=3;/不构成作用域，所以c仍是window的属性d(7,8);/函数名可以先调用，后定义alert("函数外："+a+b+c+e+g.h+g.i+g.j);function d(x,y)/函数构成作用域         e=x;/window对象的属性      

6、60;  var f=y;/定义局部变量         g=h:4,i:5;/对象与对象属性         g.j=6;/对象属性         alert("函数中："+a+b+c+e+f+g.h+g.i+g.j);</script>3 研究JavaScript值创建一个HTML文件，内容如下。在浏览器中打开

7、该文件。分析代码。<script type="text/javascript">/alert(a);/错误，a is not definedalert(typeof a);/typeof运算符可用于未定义的变量var a;/定义变量alert(a);/输出undefinedalert(typeof a);/输出undefineddelete a;/删除变量/alert(a);/错误，a is not definedalert(typeof a);/输出undefineda=undefined;/赋值为undefinedalert(a);/输出undefineda

8、lert(typeof a);/输出undefineda=;/赋值为对象字面量alert(a);/输出object Objectalert(typeof a);/输出objectalert(a.b);/输出undefined,属性未定义可访问alert(typeof a.b);/输出undefineda=null;/赋值为空对象alert(a);/输出nullalert(typeof a);/输出objecta=;/赋值为数组字面量alert(a);/输出空字符串alert(typeof a);/输出objecta=function();/赋值为函数字面量alert(a);/输出a=funct

9、ion()alert(typeof a);/输出function</script>4 研究访问对象和数组的成员创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">a=a:1,b:2;/赋值为对象字面量alert(a.a);/使用.运算符访问成员alert(a"a");/使用运算符访问成员b="a"alert(ab);/使用表达式下标访问成员a=1,2;/赋值为数组字面量alert(a0);/使用运算符访问元素b=1;alert(ab);/

10、使用表达式下标访问元素</script>5 研究内置名称创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">var a=new Number(1);/调用构造函数Number，传递参数1，a是对象alert(a);/输出1alert(typeof a);/输出objectalert(a instanceof Object);/输出true，说明a是显式创建的对象a=Number(1);/调用转换函数Number，传递参数1，a是数值，不是对象alert(a);/输出1alert

11、(typeof a);/输出numberalert(a instanceof Object);/输出false，说明a不是显式创建的对象a=1;alert(a instanceof Object);/输出false，说明a不是显式创建的对象Ototype.b=1;/构造函数Object的原型对象添加成员balert(a.b);/输出1，说明构造函数Object的原型是所有数据的原型Ntotype.c=2;/构造函数Number的原型对象添加成员calert(Number.c);/输出undefined，说明构造函数Number的原型不是Number对象的原型

12、alert(Number.b);/输出1，说明构造函数Object的原型是Number对象的原型alert(a.c);/输出2，说明数值常量继承了构造函数Number的原型</script>首先将参数1以对象方式赋给a，打开页面，会弹出a的值，接着弹出a的类型为object，然后判断a是否是object的实例对象，弹出true，说明a是显示创建的对象，随后将a转换为number类型，弹出的依然为1，由于类型转换，这次a的类型为number，因为a已被转换为number，所以他是会弹出false，在将1赋值给a，a为整数型，弹出false，因为a为int，不是object的实例对象，

13、接着页面弹出1，说明构造函数object的原型可以作为所有数据的原型，再然后页面弹出undefined，因为number是一个类型，而number对象是一个对象，类型不匹配，最后弹出2，说明数值常量继承了number的原型。6 研究with语句创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">var a=b:1,c:2;var b=3;var d=4;with(a)    alert(b);/输出1    alert(d);/输

14、出4</script>打开页面，弹出1和4，这是因为with语句先找寻a，a中存在b的值，于是直接输出了b的值，然后没有在d中检索到d，再检索d的值并输出。7 研究for-in语句创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">var s=""var a=b:1,c:2for(var i in a)         s+=i+":"+ai+"n&

15、quot;alert(s);var s=""var a=1,"2",3,'4'for(var i in a)         s+=i+":"+ai+"n"alert(s);</script>打开页面，弹出了a的键值对，因为for-in循环，把a的键与值转换成了字符串赋给a，然后弹出a另外一个键值对，原因同上。8 研究逻辑值创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script

16、type="text/javascript">var a=Boolean(false);alert(a&&true);/输出false，因为a是逻辑值falsevar b=new Boolean(false);alert(b&&true);/输出true，因为b是非空对象</script>首先将a创建为布尔型的false，因为&&是逻辑与运算，真与假得到假，所以输出false，然后创建一个对象b，赋值为false，因为逻辑与运算中，前一个字段非空即为真，真与真得到真，因此输出true。9 研究函数与argum

17、ents 对象创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">function a()         var s=""         for(var i=0;i<arguments.length;i+)        &

18、#160;          s+=argumentsi+"n"/将arguments里面的值赋给S                  for(var i in arguments)            &#

19、160;      s+=argumentsi+"n"/                  alert(s);/输出1234a(1,"2",3,a:4);</script>arguments 是一个对应于传递给函数的参数的类数组对象，长度为4，然后对其进行循环，将值赋给s，再将i在arguments里面进行遍历，将找到的结果赋给s。10

20、 研究构造函数创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">function A(a)         this.b=a+1;         this.c=function()alert(this.b+1);         return thi

21、s.b+2;alert(A);/作为字符串A.a=1;/作为对象d=new A(10);/作为构造方法alert(d.b);d.c();d=A(10);/作为普通方法alert(d);</script>this.b this.c就是A.b A.c，this指代当前运行的函数。11 研究保留字this创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">var a=1;/window对象的属性alert(this.a);/输出1，在所有函数外this代表window对象functi

22、on b()         this.a=2;/在构造函数中this代表新对象；在函数中this代表window对象var c=new b;alert(c.a);/输出2，对象属性c.d=function()         alert(this.a);/在对象方法中this代表对象;c.d();/输出2，对象属性function e(x,y)       

23、0; alert(this.a);/在函数中this代表window对象e(3,4);/输出1，window对象的属性e.call(c,3,4);/输出2，函数调用call方法时，this代表第一个参数e.apply(c,3,4);/输出2，函数调用apply方法时，this代表第一个参数e.f=function()         function g()             &#

24、160;     alert(this.a);/在函数中this代表window对象                  g();e.f();/输出1，window对象的属性</script>最外层的this指代当前的window函数，this.a等于window.a，call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，当你的参数是明确知道数量时，用

25、 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。12 研究调用其他对象的方法创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">var a=a.b="a"a.c=function()alert(this.b);a.c();/输出avar b=b:"b",c:a.c;b.c();/输出a</script>a.c调用a.b，输出结果a，b.c调用a.c，a.c再调用a.b，输出结果为a13 研究调用其他对象的

26、方法创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">var a=a.b="a"a.c=function()alert(this.b);a.c();var b=b:"b",c:a.c;b.c();</script>a.c调用a.b，输出结果a，b.c调用a.c，a.c再调用a.b，输出结果为a14 研究函数对象的call和apply方法创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type=&qu

27、ot;text/javascript">function a(b,c)          alert(this.a+b+c); b=a:'对象的成员'a.call(b,'参数1','参数2');a.apply(b,'参数1','参数2');</script>call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，当你的参数是明确知道数量时，用 call，而不确定的时候，用 a

28、pply，然后把参数 push 进数组传递进去。15 研究对象冒充创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">function A(a)     this.a = a;    this.b = function ()         alert(this.a);    ;function B(a)   &

29、#160; this.c = A;/引用构造方法A    this.c(a);/用this调用方法A，创建的对象成员属于this    delete this.c;/删除不再使用的成员b=new B(1);b.b();/B继承了A的属性和方法alert(b instanceof B);/输出truealert(b instanceof A);/输出false，说明这不是真正的继承</script>instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上，b是B（

30、）的实例化，可以使用B的方法。16 研究构造函数的原型创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">b=;b.c=1;function A()A.prototype=b;/构造函数的原型a=new A();alert(a.c);/1,原型的成员出现在构造实例中b.c=2;alert(a.c);/2,构造实例的成员与原型的成员共享a.c=3;b.c=4;alert(a.c);/3,构造实例的成员被赋值后不再与原型的成员共享</script>prototype 属性可以向对象

31、添加属性和方法。A.prototype构造函数的原型为b，构造实例的成员被赋值后不再与原型的成员共享。17 研究原型链创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">a=;a.x=1;function B()B.prototype=a;function C()b=new B();C.prototype=b;c=new C();alert(c.x);alert(c instanceof C);/c是构造函数C的实例alert(c instanceof B);/c是构造函数B的实例，C继承

32、了Balert(c instanceof Object);/所有对象都是构造函数Object的实例</script>prototype 属性可以向对象添加属性和方法。第一个c是构造函数C的实例，第二个c是构造函数B的实例，C继承了B，第三个所有对象都是构造函数Object的实例。18 研究闭包创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">function a() /每个function都是一个闭包       var i

33、= 0;/局部变量只能在函数内部或嵌套的函数中访问       return function()                  return +i;          var c = a();/c 是函数alert(c();/1，只能通过函数c访问ialert(c();/2,访问同一个ivar d=a();ale

34、rt(d();/1,访问另一个i</script>因为变量作用域的不同，导致相同的变量在不同的函数中定义会有不同的值，并且只能在函数内部访问。19 研究将字符串作为代码运行的函数eval()创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">var a=eval("1");alert(a);/1eval("var b=2;"); /将字符串的内容作为代码运行alert(b);/2var c=eval("3,4");/将

35、JSON数组字符串转换为数组alert(c0);/3var d=eval("e:3");/不能将JSON对象字符串解析为对象alert(d.e);/undefinedvar f=eval("("+"g:4"+")")/将JSON对象字符串解析为对象alert(f.g);/4var h;eval("h="+"i:5"); /将JSON对象字符串解析为对象alert (h.i);/5</script>eval() 函数可计算某个字符串，并执行其中的的 JavaScri

36、pt 代码。20 研究动态改变HTML创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<script type="text/javascript">function a()         var e=document.getElementById("a");         e.innerText="<b>再点我</b>"&

37、#160;        alert(e.outerHTML);         e.onclick=function()document.getElementById("a")         .innerHTML="<b>别点我</b>"</script><div id="

38、a" onclick="a()">点我</div>getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。点击时间改变了html渲染的文本。21 研究节点的关系创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<div id="a">a         <div id="b">b &

39、#160;                 <div id="c">c</div>                   <div id="d">d</div> &

40、#160;                 <div id="e">e</div>         </div></div><script type="text/javascript">var b=document.getElementById("b

41、");alert(b.parentNode.nodeName);/输出DIValert(b.parentNode.id);/输出aalert(b.childNodes.length);/输出7alert(b.childNodes0.nodeValue);/输出b<换行><空格><空格>var d=b.getElementsByTagName("div")1;alert(d.previousSibling.previousSibling.id);/输出calert(d.nextSibling.nextSibling.id);/输出

42、e</script>parentNode常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点，childNodes获得 body 元素的子节点集合。22 研究事件处理创建一个HTML文件，内容如下。在浏览器中打开该文件。分析代码。<div id="a">a         <div id="b">b         

43、;          <a id="c" onclick="return a(event)" href="">www</a>         </div></div><script type="text/javascript">var id="window"functi

44、on a(e)alert("a:"+this.id+"-"+e.type);/事件处理函数的第一个参数是eventevent.stopPropagation();/停止事件传递event.preventDefault();/取消事件的默认处理return false;/通过事件句柄绑定处理函数，可取消事件的默认处理;e=document.getElementById("c");e.onclick=a;/DOM方式通过事件句柄绑定处理函数e.addEventListener("click",a,true);/添加处理

45、函数，捕获阶段响应，不支持IE68/e.removeEventListener("click",a,true);/删除处理函数/e.attachEvent("onclick",a);/添加处理函数，支持IE6+/e.detachEvent("onclick",a);/删除处理函数</script>stopPropagation不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。23 设计一个用户登录客户端检验程序创建一个HTML

46、文件，内容如下。在浏览器中打开该文件。分析代码。<html><script type="text/javascript">function on_submit()/验证数据的合法性         /var e=document.getElementById("name") ;/通过ID获取元素,标准用法         /var e=document.forms0.nam

47、e;/通过对象层级获取元素         var e=;/通过对象层级获取元素         if (e.value.replace(/s/g,"") = "")/为空白字符                 

48、;  alert("用户名不能为空，请输入用户名！");                   /e.focus();/设置焦点                   e.select();/设置焦点                 &

人人文库> 全部分类> 教育资料 > 课设设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论