1 / 43

第 6 讲 脚本编程

第 6 讲 脚本编程. 内容简介. 脚本的概念 JavaScript 的基本语法 在页面上创建 JavaScript 函数的方法 JavaScript 内置对象和浏览器对象在 Web 页上的应用 本章要求 : 1 、熟练掌握 JavaScript 的基本语法 2 、掌握脚本的基本概念 3 、了解脚本语言. 静态页面 ： 1 、用 HTML 语言可以建立 Web 文档和超级链接 ( HyperLink ) ，完成各种操作。 2 、 HTML 是一种标记语言，提供的信息大多是静态的，不能提供条件、循环结构和交互能力；信息被下载到客户计算机后，固定不变。

gabi
Download Presentation

第 6 讲 脚本编程

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第 6 讲 脚本编程

  2. 内容简介 • 脚本的概念 • JavaScript的基本语法 • 在页面上创建 JavaScript函数的方法 • JavaScript内置对象和浏览器对象在 Web页上的应用 本章要求: 1、熟练掌握 JavaScript 的基本语法 2、掌握脚本的基本概念 3、了解脚本语言

  3. 静态页面： 1、用 HTML语言可以建立 Web文档和超级链接(HyperLink)，完成各种操作。 2、HTML是一种标记语言，提供的信息大多是静态的，不能提供条件、循环结构和交互能力；信息被下载到客户计算机后，固定不变。 3、浏览器只能按照从上至下的顺序解释执行每一个 HTML标签来显示文档内容，无法在客户端处理与用户的交互，从而无法构造出客户端的交互式动态页面。 动态页面： 引入 JavaScript来实现显示页面内容的控制和人/页面的交互。

  4. 脚本语言： • 脚本语言是在 HTML中运行的语言，用脚本编写的代码必须通过适当的解释器来执行； • 脚本语言分类： • JavaScript • VBScript • CGI—Perl • PHP • ShellScript • VBScript和 JavaScript既可作为客户端脚本，又可作为服务器端脚本 • Perl、ShellScript、PHP等均为服务器端脚本语言。

  5. VBScript： 1、VBScript是 VisualBasic和 VisualBasicAppliction (VBA) 的一个子集，程序设计与 VB 和 VBA 基本相同，但 VB 和 VBA中的一些强大功能，如类和 API 调用，在 VBScript中被删除了。主要是为了使 VBScript语言更简单和安全。 2、VBScript嵌入到 HTML中，可设计出生动活泼、互动的网页。且可在客户端和服务器端执行。 3、VBScript需要对应的脚本引擎来解释执行其脚本程序代码，IE3.0以上版本浏览器均可执行，NetScape需要安装相应的插件才能解释执行。 4、服务器产品中 IIS和PWS可解释执行服务器端 VBScript代码。

  6. JavaScript 1、JavaScript也是嵌入在 HTML文件中的脚本语言，简单易学、使用方便，特别是作为客户端脚本时，获得了包括 IE等主要浏览器的支持，通用性较好。 2、JavaScript基于对象和时间驱动，能对鼠标单击、表单输入、页面浏览等用户事件作出反应并进行处理。代码可直接由浏览器解释执行。 3、特点： 1) 简单性：语法灵活； 2) 基于对象：允许用户自定义对象，同时浏览器提供了大量的内置对象，使编程者可将浏览器中的不同元素都作为对象来处理。； 3) 可移植性：在大多数浏览器上，JavaScript脚本可不经修改即可直接运行； 4) 动态性：JavaScript是 DHTML的一个重要组成部分，是设计交互式动态页面，特别是客户端动态页面的重要工具。

  7. JavaScript程序的编辑和调试 • 可用任意的文本编辑器，如记事本、EditPlus等。 • 在DreamweaverMX中提供的编辑环境，同时还提供了JavaScript调试器来检查代码是否存在语法和逻辑错误。 • 基本操作： • 新建一空白网页  插入工具栏  脚本

  8. 代码检查器：窗口  其它  代码检查器或按 F10

  9. <scriptlanguage="JavaScript"type="text/JavaScript"> alert ("欢迎光临我的网站") </script> • 编写 JavaScript 程序时注意事项： • JavaScript 区分大小写； • JavaScript 程序中，语句结束标记为： • 换行符——单行语句 • 分号；——一行中有多条语句时

  10. 将JavaScript嵌入 HTML文件中的方法： 1、在HTML中使用 <script> ... </script>标签中加入JavaScript语句，HTML语句和 JavaScript语句位于同一个文件中； <scriptlanguage="JavaScript"> JavaScript 代码 </script> 2、将JavaScript程序以扩展名为 .js的文件单独存放，再利用以下格式的 script标记嵌入到 HTML文件中 <scriptsrc=“JavaScript 文件名”> 优点：HTML代码和 JavaScript代码分别存放，有利于程序共享

  11. JavaScript 的基本语法 1、数据类型 1）数值型：包括整数和浮点数 • 十进制：23，45，48.2，2.57E-2 • 八进制：以 0 开头，如 023 • 十六进制：以 0X 开头，如 0X4C 2）逻辑型：取值 true(逻辑真) 和 false(逻辑假) 3）字符型：以“ ” 或 ‘ ’ 括起来的任意长度的一连串字符 2、常量和变量： 1）常量：在程序中值保持不变； 2）变量：在程序中值可以改变的量,如 var str ; x = 3.02E10 num1 = 10 ; str ="欢迎光临"

  12. JavaScript 变量的命名规则： 1、变量名必须以字母开头，其后字符可为字母、数字和下划线组成； 2、变量名不得超过一行，且不得使用保留字； 3、变量名区分大小写； • 保留字：是系统预先定义的具有特殊含义和用途的字符串，不能用作它用；如： abstract、boolean、break、byte、case、catch char、class、const、continue • JavaScript 变量使用比较灵活，可以不必声明变量而直接使用，也可先定义后使用；

  13. 运算符： 1、算术运算符：＋、－、＊、／、％、＋＋、－－、－ 2、赋值运算符：+=、-=、*=、/=、%= 3、字符串运算符：　＋ var s1 = " Welcome" + "to MyWebsite" • 逻辑运算符和关系运算符： • >、>=、<、<=、!=、== • &&、||、!

  14. 表达式：由常量、变量、运算符、函数组成 1、算术表达式： 5 + a / b 2、字符串表达式： "abc" + "xyz" 3、逻辑表达式： (x == y) && (y >= 5) 4、条件表达式: 表达式1? 表达式2 ：表达式3

  15. 流程控制：顺序、分支、循环三种控制结构 1、顺序结构：按程序的各语句出现的先后次序顺序执行； 2、分支结构：条件转移语句 if 语句: if ( 条件) { 语句序列 1 } else { 语句序列 2 } var x = 3; var y = 5 ; if (x > y) Document.Write("x="+y) ; else Document.Write("y="+y) ;

  16. case 语句 switch(expression) { case var1: sentences1 case var2: sentences1 ... case varN: sentences1 }

  17. 2、while循环 • while (condition) { • sentences • } • 循环：for、while、break、continue 1、for循环 for (exp1; exp2; exp3) { sentences } 3、break和 continue语句 <scriptlanguage= "JavaScript"type= "text/JavaScript"> for ( i = 1; i <= 40; i++ ) { if ( i > 20 ) break ; if ( (i % 2 ) != 0) continue document.write ( i + " " ) } </script>

  18. 函数： function function_name(parameters) { function_block ; return exp; }

  19. <html> <head> <title> factor </title> <script language="JavaScript"> function factor(num) { var i, fact = 1 for(i=1; i<num+1; i++) fact = i * fact ; return fact } </script> </head> <body> <script language="JavaScript"> document.write("调用factor函数,5的阶乘是:"+factor(5)) </script> </body> </html>

  20. 6、事件触发和处理: • JavaScript 是基于对象的语言，其基本特征是采用事件驱动。当Web页的访问者与页进行交互时，浏览器发生事件；事件可用于调用引起动作发生的 JavaScript 函数； • 由鼠标或热键引发的一连串程序的动作，称为事件驱动。 • 对事件进行处理的程序和函数，称为事件驱动程序。

  21. 常见事件

  22. <script language="JavaScript"> function factor(num) { var i, fact = 1 for(i=1; i<num+1; i++) fact = i * fact ; return fact } function calculate(num){ var num1 = factor(num) alert(num+"!="+num1) } </script> </head> <body> <a href="#" onClick="calculate(6)">6</a> </body> </html>

  23. JavaScript对象： • JavaScript 内置对象，如 Date、Math、String • 用户自定义对象； • 由浏览器根据页面内容自动提供的对象； • 服务器上的固有的对象 • JavaScript 中的对象组成： • 属性(Property)：描述对象的数据 • 方法(Method)：对数据的操作

  24. 对象处理语句 1、this：指当前对象 2、for ... in ：in 后跟一个对象，循环次数是对该对象中所有元素的数量。如输出 document 对象的所有属性和方法： for ( list in document ) { document.write ( list + "<br>" ) } 3、with：用于简化引用对象的属性和方法；在 with 语句的作用范围内，凡没有指出对象的属性和方法，都是指默认对象。 语法： with ( object ) { sentences } • with ( document ) { • write("您好！<br>") • write("欢迎光临!") • }

  25. 4、new：用来创建一个对象实例 语法： var 对象实例名 = new 对象名( parameters ) • JavaScript 的内置对象 • String、Math、Date、Array 1、String 对象：JavaScript 中，每个字符串都是对象； 1) 创建 String 对象 [ var ] String 对象实例名 = new String ( string ) 或 var String 对象实例名 = 字符串值 str1 = new String ("This is a sample!") str2 = "This is a sample"

  26. 2) String 对象的属性 length, 值为字符串中包含的字符个数 document.write ( str1.length + "<br>" ) document.write ( str2.length ) 3) String 对象的常用方法: • CharAt (Position)：返回 String 对象实例中位于 position 位置上的字符，其中 position 为正数或负数 • indexOf (str , start – position) ：返回 String 对象的子串。若只给出 position1 ，则返回从 position1 开始到结束的子串 • toLowerCase( ) : • toUpperCase( ) :

  27. <script language = "JavaScript"> str = "abcdefghijk" with ( document ) { write ( str.length + "<br>") write ( str.substring(3,7) + "<br>") write (str.charAt(7) + "<br>") write (str.toUpperCase( ) + "<br>") write (str.indexOf("hi",0) + "<br>") } </script>

  28. 2、Math 对象：封装了常用的数学常数和运算，包括三角函数、对数函数，指数函数等。由系统创建，称为静态对象，不能用new 创建 Math 对象实例，调用方式如下： Math. 数学函数( 参数) 3、Date 对象：封装了有关日期和时间的操作，无属性 1) 创建： [ var ] Date 对象名 = new Date ( parameters ) 参数parameters 可以是以下的任一形式： • 无参数：当前日期和时间，如: var today = new Date() • 形如: 月日,年时:分:秒的参数,创建具有指定日期和时间的实例 var birthday = new Date("March 1,1983 12:00:0")

  29. 2) Date对象的方法 • getYear() • getMonth() • getDate() • getDay() • getHours() • getMinutes() • getSeconds() • getTime()

  30. function DispTime( ) { var now = now.getYear () var year = now.getMonth() + 1 var day = now.getDate() var hours = now.getHours() var min = now.getMinutes() var sec = now.getSeconds() var timeStr = year + "-" timeStr += ((month<10)?"0":"") + month + "-" timeStr += ((day<10?"0":"") + day + " " timeStr += (hour>12)?"PM":"AM" timeStr += hour timeStr += ((min <10)?":0":": ") + min timeStr += ((sec < 10)?":0" : ": ") + sec document.frmClock.txtClock.value = timeStr clock = setTimeout("DispTime()",1000) } <body ... onLoad = DispTime() ">

  31. 4、Array 对象 var 数组实例名 = new Array( ) <script language = "JavaScript"> var my_array = new Array() for(i=0; i<10; i++) { my_array[ i ] = i document.write (my_array[ i ] + "<br>") } </script>

  32. JavaScript 常用函数 1、eval () 函数：可接收一个字符串形式的表达式。作为参数的表达式可采用任何合法的 JavaScript 操作符和变量。 <script language = "JavaScript"> a =eval ("5 + 7 + 8") document.write (a) </script> 2、ParseInt() ：从字符串中提取整数。若在字符串中存在除了数字、符号、小数点和指数符号以外的字符，parseInt 就停止转换，返回已有的结果。若第一个字符就不能转换，返回NaN值。 3、parseFloat 函数：提取浮点数

  33. <script language = "JavaScript"> a = parseInt("789open") b = parseInt("789",8) c = parseInt("789.12open") document.write(a + "<br>") document.write(b + "<br">) document.write(c) </script>

  34. JavaScript 的浏览器对象 • navigator:封装了浏览器、版本等属性 • window:封装有关窗口的属性和窗口操作 • document：代表当前 HTML 文档 • location：含有当前网页的 URL 地址 • history：含有以前访问过的网页的 URL 地址 • form：包含表单的属性和操作 • button、password、checkbox等：form下层对象

  35. Windows History navigator Frames Location Document Document Document All Anthors Forms Element Body Links button checkbox

  36. 1、window对象： 属性： • parent • self • top • status • defaultStatus 方法： • alert() • confirm() • open() • close() • focus()

  37. open 语法 open("URL","窗口名称" [ , "窗口特性" ] newWin = open("index.htm","newwin", "width=400,height=300,menubar = no,toolbar = no")

  38. function confSubmit() { var name = document.frmInput.txtName.value var age = document.frmInput.txtAge.value if confirm("姓名:"+name+"\n"+"年龄:"+age+"\n"+"您确定输入正确吗？")) == true) { var newWin = open("","newWin","width=300, height=200") newWin.focus(); newWin.document.write("您输入的名字是:"+name) newWin.document.write("年龄是:"+parent.document.frmInput.txtAge.value) newWin.document.title="输入数据" } else alert("请重新输入") } <input name="btnSubmit" type="submit" value="提交" onClick="confSubmit()">

  39. 2、document对象: • bgColor • fgColor • title • write function CreateNewWin() { NewWin = window.open("","","width=300,height = 200") newWin.document.write("新建的窗口") newWin.document.bgColor = "#0000FF" newWin.document.fgColor = "#FFFFFF" newWin.document.title = "新窗口" } <input type="submit" name="submit" value="提交" onClick="CreateNewWin()">

  40. 3、form对象 • submit() 和 reset () 方法

  41. function check() { var tel = frmInput.txtTel.value var email = frmInput.txtEmail.value if (tel == "") { alert("您未输入电话号码!") frmInput.txtTel.focus() return false } if (email = "") { alert("请输入电子邮件地址") frmInput.txtEmail.focus return false } if ((email.indexOf('@',0)) == -1 ) { alert("请输入正确的电子邮件地址!") frmInput.txtMail.focus return false } } <form action="1.htm" method="POST" name=frmInput onSubmit ="return check()" >

More Related