第2讲 javascript1
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
适用于
与 body 和 frameset 元素一 起使用 与 body 和 frameset 元素一 起使用 与绝大多数元素一起使用 与绝大多数元素一起使用 与绝大多数元素一起使用 与绝大多数元素一起使用
事件
功能
适用于
Onmouseover
当鼠标从网页的某元素上方经 过时发生
当鼠标在一个元素上方移动时 发生 当鼠标离开一个元素是发生 当一个元素接收到பைடு நூலகம்自鼠标或 键盘的焦点时发生 当一个元素失去来自鼠标或键 盘的焦点时发生
事件
Onload Onunload Onclick Ondbclick Onmousedown Onmouseup
功能
当 web 浏览器加载窗口或框架时 发生 当 web 浏览器从窗口或框架卸载 一个文档时发生 当一个元素被鼠标单击时发生 当一个元素被鼠标双击时发生 当鼠标在一个元素上方被按住 时使用 当鼠标在一个元素上方被释放 时使用
JavaScript同其它语言一样，有其自身的语法结构、 程序结构和函数。 三、 JavaScript的语法结构 1、JavaScript的数据类型 2、运算符 3、表达式 4、数组 四、JavaScript程序流程 １、条件语句 if(条件){ 执行语句1 }else{ 执行语句2 }
2、分支语句 switch(表达式){ case 1:执行语句1; break; case 2:执行语句2; break; default:执行语句n; break; } 3、循环语句 循环语句包含for语句、fon…in语句及while语句。 1）for语句 for(变量初始化;条件;更新变量){ 执行语句; }
JavaScript对象由对象属性和对象方法构成。 对象属性是指对象的背景色、长度、名称等。 对象属性的访问：对象名称.属性名称 例：document.bgColor=“blue”; location.href = “”; 对象方法是指对属性所进行的操作，即对象自己 所属的函数，如对对象取整，使对象获得焦点，使对 象获得个随机数等等一系列操作。 对象的方法调用:对象名称.方法名称 例：window.open(“hello.htm”,””);
（1）window对象：处于最顶级位置，代表一个浏览器窗口。 （2）location对象：含有当前网页的URL地址。 （3）history对象：含有以前访问过的网页的URL地址。 （4）document对象：含有当前网页的各种特性，如标题等。 （5）forms对象：从属于document对象，为处理表单及其中 的界面对象提供属性和方法。 （6）anchors对象：从属于document对象，为处理锚提供属 性和方法。 （7）links对象：从属于document对象，为处理超级连接提 供属性和方法。 （8）images对象：从属于document对象，为处理图像提供属 性和方法。
静态网页设计技术
页面布局混乱 网站缺少个性 页面内容呆板 _html(表格、框架) _css _JavaScript
本讲内容
JavaScript
JavaScript动态效果
1、不同时间访问效果不同 2、弹出提示框1 ,2 3、自动弹出新页面 4、网页内容随鼠标变化1，2 5、显示当前日期、时间 6、计算器 7、表单校验 8、动态菜单折叠，伸展，下拉
（3）JavaScript是一种与平台无关的解释性脚本语言 ，依赖于浏览器，与操作系统无关，只要计算机能运行浏 览器，该浏览器支持JavaScript，就可以执行JavaScript 脚本程序。 在网页中引入JavaScript，只需加入<Script>元素， 然后再设置所用语言即可。例如： <html> <body> <script language="javascript"> document.write(“欢迎光临！") </script> </body> </html> 注意：JavaScript区分大小写，而HTML不区分大小写。 <Script>元素可以放在<head>区，也可以放在<body>区。
（一）window对象 该对象包括许多有用的属性、方法和事件驱动程序，对应 于HTML文档中的<Body>和<FrameSet>两种标识，在JavaScript 脚本中可直接引用。 1、事件 包括加载页面事件onload和离开页面事件onunload。 例：在浏览器的状态栏上显示文本 <script> function aa(){ window.status="欢迎光临我的站点"} function bb(){ alert("再见,欢迎再来")} </script> <body onload=aa() onunload=bb()> <a href=>sohu</a> </body>
3、方法: （1）open(“URL”,“窗口名字”,“窗口属性”)：创 建一个新的浏览器窗口，并在新窗口中载入一个指定的 URL地址。window属性参数是由一个字符串列表项它由逗 号分隔，它指明了有关新创建窗口的属性。 例：使用window对象open方法
<HTML><HEAD> <SCRIPT LANGUAGE="JavaScript"> function new_win(){ window.open(“time.htm","my","toolbar=no, left=150, top=200, menubar=no, width=150,height=150"); } </SCRIPT> </HEAD> <BODY onload="new_win()"> </BODY></HTML>
六、JavaScript事件
事件是浏览器响应用户交互操作的一种机制，浏览 器为了响应某个事件而进行的处理过程，叫做事件处理 。 JavaScript的事件处理机制可以改变浏览器响应用户 操作的方式。 事件定义了用户与页面交互时产生的各种操作。浏 览器在程序运行的大部分时间都等待交互事件的发生， 并在事件发生时，自动调用事件处理函数，完成事件处 理过程。 事件有三大类： 1、引起页面之间跳转的事件，如超连接事件。 2、浏览器自己引起的事件。 3、在表单内部同界面对象的交互事件。
2）for„in语句 for(变量 in 对象或数组){ 执行语句; } 3）while循环 while(条件){ 执行语句 } 4）break语句 使用break语句使得循环从For或while中跳出。 5）continue语句 使用continue语句跳过循环内剩余的语句而进入下一 次循环。
五、 JavaScript函数 在进行复杂的程序设计时，根据所要完成的功能， 将程序划分为一些相对独立的部分即函数。 JavaScript函数可以封装那些在程序中可能要多次 用到的模块。并可作为事件驱动的结果而调用的程序。 从而实现一个函数把它与事件驱动相关联。 格式如下： function 函数名称(参数){ 函数执行部分 return 表达式 } return语句表示函数的返回值，如果没有返回值可 以省略。
与绝大多数元素一起使用
Onmousemove Onmouseout Onfocus
与绝大多数元素一起使用 与绝大多数元素一起使用 Label 、 input 、 select 、 textarea和button元素 Label 、 input 、 select 、 textarea和button元素
文件代码
JavaScript基础
一、JavaScript简介及特点 1993年，美国伊利诺大学的国家超级计算机应用中心（ NCSA）发表了一个浏览器 “Mosaic”，1994年MOSAIC开发的 中心人物马克·安德生和他人合作创建网景通信公司开发浏 览器网景导航者（Netscape Navigator） 。 Netscape公司因网速低为提高数据验证效率开发脚本语 言LiveScript。在Sun公司推出Java后与其合作将脚本语言改 名为JavaScript。JavaScript引进了Java程序概念，语法上 与Java有类似之处，可以和HTML语言混合使用。 JavaScript具有很多优点： （1）采用在HTML文本中嵌入小程序段的方式，开发过程非常 简单，并且提高了响应速度。 （2）可以不经过Web服务器直接对用户的输入做出响应，减 少了客户浏览器与服务器之间的通信量、提高了速度。
适用于 与绝大多数元素一起使 用 与绝大多数元素一起使 用 与form元素一起使用 与form元素一起使用 与 input 、 textarea 一 起使用 与 input 、 select 、 textarea一起使用
七、JavaScript对象 JavaScript对象包括浏览器对象和JavaScript内置 对象。 浏览器对象与JavaScript语言本身并没有太大的关 系，在脚本语言中调用的方法都是一样的。浏览器对象 有一定的层次，即有一定的从属关系。层次结构如下:
代码也可写作： <body onload=window.status=“欢迎光临我的站点 onunload=alert('再见,欢迎再来')></body> 2、属性 窗口对象中的属性主要用来对浏览器中存在的各种 窗口和框架的引用，其主要属性有以下几个： （１）frames（帧）确文档中帧的数目 （２）parent 指明当前窗口或帧的父窗口。 （３）defaultStatus:默认状态，它的值显示在窗口的 状态栏中。 （４）status:包含文档窗口中帧中的当前信息。 （５）top:包括的是用以实现所有的下级窗口的窗口。 （６）window:指的是当前窗口 （７）self:引用当前窗口。
Onblur
Onkeypress
当在一个元素上方一个键被按 下后和松手时发生
与绝大多数元素一起使用
事件 Onkeydown Onkeyup Onsubmit Onreset Onselect Onchange
功能 当在一个元素上方一个键被 按住不放时发生 当在一个元素上方一个键被 松手时发生 当一个表单被提交时发生 当一个表单被重置时发生 当文本被选择时发生 当一个元素失去焦点，其值 被改变时发生
函数的返回值：
<HTML><HEAD> <SCRIPT LANGUAGE="JavaScript"> function f (y) { var x = y * y; return x; } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> for(x = 0; x < 10; x++){ y = f(x); document.write(y); document.write("<br>"); } </SCRIPT> </BODY></HTML>
二、JavaScript与Java的区别
1、JavaScript是基于对象和事件驱动的，而Java是面 向对象的语言。 2、Java的源代码在传递到客户端执行之前，必须经过 编译，而JavaScript不需编译。 3、Java采用强类型变量，所有变量在编译之前必须声 明。JavaScript采用弱类型变量，在使用前不需声明。 4、代码格式不一样。Java格式与HTML无关，独立保存 。JavaScript的代码可以直接嵌入HTML文档中。 5、JavaScript使用 <script>...</script> 来标识， 而Java使用<applet> ... </applet>来标识。 6、Java对象引用必须在编译时进行，以使编译器能够 实现强类型检查。JavaScript采用动态联编，即JavaScript 的对象引用在运行时进行检查。
函数定义和调用： <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function getSqrt(iNum){ var iTemp = iNum * iNum; document.write(iTemp); } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> getSqrt(8); </SCRIPT> </BODY></HTML>