JavaScript基础教程2

通过这一节课，可以使听众对js脚本语言基本结构和语法有一个概括性的认识。Window窗口对象通过HTMLDOM，可访问JavaScriptHTML文档的所有元素。文档对象模型采用的分层结构为树形结构，以树节点的方式表示文档中的各种内容。htmlheadtitle标题内容/title/headbodyh3三号标题/h3b加粗内容/b/body/htmlhtmlheadbodytitleh3标题内容3号标题加粗内容b实例2-1获取某一个节点的名称获取某个节点的类型返回节点的三个属性nodeName属性nodeType属性nodeValue属性实例：访问指定节点通常，通过JavaScript，您需要操作HTML元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：通过id找到HTML元素通过标签名找到HTML元素通过类名找到HTML元素通过id查找HTML元素：在DOM中查找HTML元素的最简单的方法，是通过使用元素的id。实例：本例查找id=intro元素：varx=document.getElementById(intro);通过标签名查找HTML元素实例：本例查找id=main的元素，然后查找main中的所有p元素：varx=document.getElementById(main);vary=x.getElementsByTagName(p);如果找到该元素，则该方法将以对象（在x中）的形式返回该元素。如果未找到该元素，则x将包含null。实例2-2-1实例2-2-2改变HTML输出流JavaScript能够创建动态的HTML内容：今天的日期是：SunMar11201817:21:24GMT+0800(CST)在JavaScript中，document.write()可用于直接向HTML输出流写内容。例：document.write(Date());实例2-3改变HTML内容修改HTML内容的最简单的方法时使用innerHTML属性。如需改变HTML元素的内容，请使用这个语法：document.getElementById(id).innerHTML=newHTML例：实例2-4如需改变HTML元素的属性，请使用这个语法：document.getElementById(id).attribute=newvalue实例2-7HTMLDOM允许JavaScript改变HTML元素的样式。改变HTML样式如需改变HTML元素的样式，请使用这个语法：document.getElementById(id).style.property=newstyle实例2-8实例：应用document对象的getElementById()方法获取页面元素，实现网站导航菜单的功能。实例2-5练习：改变上例中的样式实例2-5-1实例2-5-1使用document对象的getElementsByName()方法可以通过元素的name属性获取元素，通常用于获取表单元素。inputtype=textname=likeRadioid=radiovalue=体育/inputtype=textname=likeRadioid=radiovalue=美术/inputtype=textname=likeRadioid=radiovalue=文艺/scripttype=text/javascriptalert(document.getElementsByName(likeRadio)[0].value);/script实例：应用document对象的getElementsByName()方法和setInterval()方法实现电影图片的轮换效果。实例2-6补充：setInterval('changeimage()',3000);//每隔3秒钟执行一次changeimage()函数详情见下页数组元素的索引范围从0到Length-1所有的数组都是由连续的内存位置组成的。最低的地址对应第一个元素，最高的地址对应最后一个元素。声明数组变量并不是声明number0、number1、...、number99一个个单独的变量，而是声明一个就像numbers这样的变量，然后使用numbers[0]、numbers[1]、...、numbers[99]来表示一个个单独的变量。数组中某个指定的元素是通过索引来访问的。Numbers[0]Numbers[1]Numbers[2]Numbers[3]……Numbers[Length-1]第一个元素最后一个元素补充：HTMLDOMsetInterval()方法实例2-6定义和用法setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。语法setInterval(code,millisec[,lang])对事件做出反应我们可以在事件发生时执行JavaScript，比如当用户在HTML元素上点击时。如需在用户点击某个元素时执行代码，请向一个HTML事件属性添加JavaScript代码：onclick=JavaScriptHTML事件JS常用事件在本例中，当用户在h1元素上点击时，会改变其内容：实例2-9实例2-9-2向button元素分配onclick事件：onload和onunload事件会在用户进入或离开页面时被触发。onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload和onunload事件可用于处理cookie。实例bodyonload=checkCookies()实例2-10onchange事件常结合对输入字段的验证来使用。下面是一个如何使用onchange的例子。当用户改变输入字段的内容时，会调用upperCase()函数。实例inputtype=textid=fnameonchange=upperCase()实例2-11语法stringObject.toUpperCase()返回值一个新的字符串，在其中stringObject的所有小写字符全部被转换为了大写字符。实例在本例中，Helloworld!将以大写字母来显示：onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。实例一个简单的onmouseover-onmouseout实例：实例2-12onmousedown,onmouseup以及onclick构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown事件，当释放鼠标按钮时，会触发onmouseup事件，最后，当完成鼠标点击时，会触发onclick事件。实例一个简单的onmousedown-onmouseup实例：实例2-13获得焦点与失去焦点事件例子：在用户选择页面中的文本框时，改变文本框的背景颜色，当选择其他文本框时，将失去焦点的文本框恢复为原来的颜色。实例2-13实例2-15鼠标移入和移出事件例子：window.属性名window.方法名(参数列表)Window对象可以直接调用其方法和属性。parent.属性名parent.方法名(参数列表)在实际运用中，JavaSctipt允许使用一个字符串来给窗口命名，也可以使用一些关键字来代替某些特定的窗口。例如，使用“parent”代表父级窗口。语法格式语法格式警告对话框利用Window对象的alert()方法可以弹出一个警告框，并且在警告框内可以显示提示字符串文本。window.alert(str)确认对话框Window对象的confirm()方法用于弹出一个确认对话框。window.confirm(question)实例2-16打开窗口（一）打开窗口可以使用Window对象的open()方法。WindowVar=window.open(url,windowname[,location]);当前打开窗口的句柄打开窗口的参数目标窗口的URLwindow对象的名称window.open(new.html,new);window.open(new.html,new,height=140,width=690);window.open(new.html,new,top=300,left=200);window.open(new.html,new,scrollbars,resizable);varwin=window.open(bookinfo.html,bookinfo,width=600,height=500);打开窗口（二）实例：通过open()方法可以在进入首页时，弹出一个指定大小及指定位置的新窗口。实例2-17实例：当单击查看影片详情的图片时，会按指定的大小及位置打开影片详情页面。实例2-17-2关闭窗口利用window对象的close()方法可以实现关闭当前窗口的功能。window.close();window.close();close();this.close();语法格式三种方式实例2-18关闭窗口关闭子窗口在窗口创建时，将窗口句柄以变量的形式进行保存，然后通过close方法关闭创建的窗口。windowname.close();实例2-19已打开窗口的句柄移动窗口在窗口打开时，将窗口放在屏幕的左上角，并将窗口从左到右以随机的角度进行移动，当窗口的外边框碰到屏幕四边时，窗口将进行反弹。实例2-20滚动窗口在打开页面时，当页面出现纵向滚动条时，页面中的内容将从上向下进行滚动，当滚动到页面最底端时停止滚动。scroll(x,y);实例2-21补充：设置超时Window对象的setTimeout()方法用于设置一个超时，以便在超出这个时间后触发某段代码的运行。timerId=setTimeout(要执行的代码,以毫秒为单位的时间)在超时事件未执行前可以中止该超时设置，使用Window对象的clearTimeout()方法实现。clearTimeout(timerId);•语言基础注释，标识符，关键字，声明&初始化，运算符和表达式•基本类型变量，常量，结构，枚举，数组，字符串，委托，事件•流程控制ifelse,switchcase,for,while&dowhlie,break&continue,return•方法的定义与调用••对象的概念和定义