JavaScript语言概述.ppt

JavaScript语言概述,课程地位,Logic Java,JavaScript,Java OOP,Project2:B/S,JSP,JSP/Servlet/JavaBean,Struts/Hibernate/Spring/Ajax,Project3:.B/S,行业手册,Project1:B/S页面,HTML CSS,就业技能结构图,掌握客户端Web表现技术,1、熟练掌握HTML语法，会使用表格、框架、DIV进行页面布局,2、熟练使用各种表单控件，并能完成常见的表单验证任务,3、能实现浏览器端各种常见动态效果,考察方法，可以做出图文并茂的美观页面,HTML:熟悉各种常见标准标签,HTML:熟悉表格(Table)的布局技术,HTML:熟悉框架(Frame)的布局技术,HTML:掌握层方式(DIV)的布局技术,HTML:掌握CSS的常用属性，如背景、字体、细边框、图边按钮设置等,考察方法，能在10分钟内完成一个包括用户姓名，口令，性别，出生日期，部门，e-mail，地址等字段的表单设计及客户端,HTML:熟练设计各种网页表单,JS:元素定位和查找,JS:常见验证算法，如：比较，非空，e-mail等的验证,考察方法，根据提供的动态效果源代码，能读懂并修改为类似效果,HTML：熟悉DOM各种元素的属性方法,HTML+JS:元素的定位和查找,HTML+JS:实现树形菜单的展开和关闭,HTML+JS:层的隐藏、显示，弹出层特效,HTML+JS:浮动广告，弹出广告窗口效果,本门课程主要技能点,1.1 JavaScript是什么？,JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行。JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies 主要特点：基于对象事件驱动解释性语言开发简单相对安全,JavaScript能做什么？,表单验证,案例演示,JavaScript能做什么？,网页特效,JavaScript能做什么？,交互式菜单,JavaScript还能做什么？,网页游戏数值计算,1.2 JavaScript编程起步,第一个JavaScript程序“Hello World！”,document.write(Hello World!),我的第一个网页 Hello World!,HTML,JavaScript,HTML 的 标签用于把 JavaScript 插入 HTML 页面当中,选择什么工具编写JavaScript脚本,DreamweaverMyEclipseVisual StudioWord记事本,引入JavaScript脚本代码到HTML文档中的方式,将JavaScript代码嵌入到HTML文档中有4种方法：直接嵌入到HTML文档中；通过标记的src属性引入外部JS文件；通过JavaScript伪URL地址引入；通过事件引入。,实例,可以在HTML中的什么位置引入JavaScript脚本,可以放置在任何位置通常放在之间之间Javascript是HTML页面的一部分，从上往下解释执行。由客户端的浏览器解释执行。,可以在HTML中的什么位置引入JavaScript脚本,位于 head 部分的脚本 之间位于 body 部分的脚本 之间,.,.,查看当前浏览器的版本信息,浏览器用navigator内置对象表示,1.3 JavaScript核心,JS由三大核心组成：ECMAScript核心：提供javascript基本功能。DOM（文档对象模型）：规定了访问HTML和XML的API接口。BOM（浏览器对象模型）：提供访问浏览器的API接口。,ECMAScript,ECMAScript是JavaScript的骨架核心，主要描述了：语法数据类型关键字保留字运算符对象语句ECMAScript由W3c标准组织定义，各个浏览器厂商都要遵守。而DOM和BOM是在ECMAScript上的扩展，不是标准，随厂商的不同而略有不同。,DOM（文档对象模型）,提供访问HTML文档各个功能部件(document、form、textarea)的属性和方法。DOM将HTML文档中的标签看做是具有层级的节点树。每一个标签都是一个树节点，便于DOM的查找。,灰色是文本节点,BOM（浏览器对象模型）,提供访问浏览器的各个功能部件的接口，如窗口本身、屏幕功能、浏览历史记录等。主要包括：关闭、移动浏览器及调整浏览器窗口大小；弹出新的浏览器窗口；提供跳转的定位对象；提供载入到浏览器窗口的文档详细信息的文档对象；提供用户屏幕分辨率的屏幕对象；提供cookie的支持；加入ActiveXObject对象支持。,小结,JavaScript是由浏览器解释执行的客户端脚本语言。JavaScript是嵌入到HTML中执行的。使用JavaScript可以减轻服务器的负担，为用户提供良好的交互和操作体验。JavaScript由ECMAScript、DOM、BOM组成。JavaScript脚本使用标签声明。学好JavaScript是学好AJAX（异步交互）的前提，也是进行Web开发的必备技能之一。,JavaScript语言基础,目标,注释语句变量数据类型运算符循环消息框函数事件特殊字JS验证,2.1 JavaScript注意事项,按照代码的出现顺序解释执行程序.大小写敏感.在HTML中是不区分大小写的,如onClick与onclick属性.但在JavaScript中只能是onclick.JavaScript中的属性和对象大都与他们所代表的HTML属性和对象同名,但都是小写.分号作为语句的结束.可以省略分号,以换行作为语句的结束,但一行不能写多个语句.为了可读性,建议使用分号作为语句的结束.,注释,单行注释多行注释,/这是单行注释,/*这是多行注释*/,/*我是注释*/,直接量,直接在程序中出现的数值叫做直接量.直接量举例,2.2 变量,变量的定义使用VAR关键字定义变量，合法的变量定义格式如下：除了关键字var来定义变量外，还可以直接给一个变量赋值，赋值语句在这时起到了定义变量的作用。变量命名规则第一个字符必须是字母、下划线（_）或美元符号（$）余下的字符可以是下划线、美元符号或任何字母或数字字符必须以字母或下划线”_”开始，后面可以是数字0到9或字母。,著名的变量命名规则,著名的变量命名规则 Camel 标记法 首字母是小写的，接下来的字母都以大写字符开头。例如：var myTestValue=0,mySecondValue=hi;Pascal 标记法 首字母是大写的，接下来的字母都以大写字符开头。例如var MyTestValue=0,MySecondValue=hi;,变量的作用区域,作用域：变量在自己所定义的区域中有效.按作用域区分变量分全部变量和局部变量全局变量在文档主体部分定义的变量，可在脚本的任何地方使用。在函数体或代码块中没有使用var关键字定义的变量。局部变量在函数体或代码块中定义的变量，只能在函数体或代码块中使用。注意:在不同范围内重复定义同名变量,不会出现语法错误,会出现覆盖.,代码,2.3 弱类型,JavaScript是弱类型语言,在定义变量时没有数据类型关键字.变量的数据类型由存储的数值决定.变量的类型随值的改变而改变.,2.4 JavaScript中的基本数据类型,六种基本数据类型Number类型变量举例如下：,数值类型特殊值,JavaScript中的基本数据类型,String类型变量举例如下：字符串用“”界定或界定。Javascript没有单个字符。Boolean类型变量举例如下：Undefined(未定义类型)：定义但没有赋值的变量是未定义类型。,JavaScript中的基本数据类型,Null类型：表示变量的值为空。一般对null和undefined等同对待。Function(函数数据类型)，函数类型变量举例如下：,var myFunction=new function()statement;,2.5 运算符,算术运算符关系运算符,运算符,逻辑运算符,2.6 条件语句,if 语句 在一个指定的条件成立时执行代码。if.else 语句 在指定的条件成立时执行代码，当条件不成立时执行另外的代码。if.else if.else 语句 使用这个语句可以选择执行若干块代码中的一个。switch 语句 使用这个语句可以选择执行若干块代码中的一个。,2.6 条件语句,If 语句如果希望指定的条件成立时执行代码，就可以使用这个语句。语法：if(条件)条件成立时执行代码 注意：请使用小写字母。使用大写的 IF 会出错！,2.6 条件语句,var d=new Date()var time=d.getHours()if(timeGood morning),练习,2.6 条件语句,If.else 语句如果希望条件成立时执行一段代码，而条件不成立时执行另一段代码，那么可以使用 if.else 语句。语法：if(条件)条件成立时执行此代码 else 条件不成立时执行此代码,2.6 条件语句,var d=new Date()var time=d.getHours()if(time,练习,2.6 条件语句,If.else if.else 语句当需要选择多套代码中的一套来运行时，请使用 if.else if.else 语句。语法：if(条件1)条件1成立时执行代码 else if(条件2)条件2成立时执行代码 else 条件1和条件2均不成立时执行代码,2.6 条件语句,var d=new Date()var time=d.getHours()if(timeGood morning)else if(time10&timeGood day)Else document.write(Hello World!),练习,2.6 条件语句,JavaScript Switch 语句如果希望选择执行若干代码块中的一个，你可以使用 switch 语句：语法：switch(n)case 1:执行代码块 1 break case 2:执行代码块 2 break default:如果n即不是1也不是2，则执行此代码,工作原理：switch 后面的(n)可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。,2.6 条件语句,var d=new Date()var theDay=d.getDay()switch(theDay)case 5:document.write(Finally Friday)break case 6:document.write(Super Saturday)break case 0:document.write(Sleepy Sunday)break default:document.write(Im looking forward to this weekend!),练习,2.7 JavaScript 消息框,在 JavaScript 中可以创建三种消息框：警告框 确认框 提示框,2.7 JavaScript 消息框,警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert(文本),2.7 JavaScript 消息框,确认框确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：confirm(文本),2.7 JavaScript 消息框,提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法：prompt(文本,默认值),2.7 JavaScript 消息框,练习,警告框,alert(我是警告框！),2.7 JavaScript 消息框,练习,确认框,var r=confirm(Press a button!);if(r=true)alert(You pressed OK!);else alert(You pressed Cancel!);,2.7 JavaScript 消息框,练习,提示框,var name=prompt(请输入您的名字,Bill Gates)if(name!=null&name!=)document.write(你好！+name+今天过得怎么样？),2.8 循环,JavaScript 循环在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。JavaScript 有两种不同种类的循环：for 将一段代码循环执行指定的次数 while 当指定的条件为 true 时循环执行代码,2.8 循环,for 循环在脚本的运行次数已确定的情况下使用 for 循环。语法：for(变量=开始值;变量=结束值;变量=变量+步进值)需执行的代码,2.8 循环,练习,var i=0 for(i=0;i),解释：下面的例子定义了一个循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 10 为止。注释：步进值可以为负。如果步进值为负，需要调整 for 声明中的比较运算符。,2.8 循环,while 循环while 循环用于在指定条件为 true 时循环执行代码。语法：while(变量=结束值)需执行的代码 注意：除了=，还可以使用其他的比较运算符。,2.8 循环,练习,var i=0 while(i)i=i+1,实例：解释：下面的例子定义了一个循环程序，这个循环程序的参数 i 的起始值为 0。该程序会反复运行，直到 i 大于 10 为止。i 的步进值为 1。,2.8 循环,do.while 循环do.while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为 true 时，它会继续这个循环。所以可以这么说，do.while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证。语法：do 需执行的代码 while(变量=结束值),2.8 循环,练习,var i=0 do document.write(The number is+i)document.write()i=i+1 while(i,2.8 循环,break与continue 有两种特殊的语句可用在循环内部：break 和 continue,代码,2.8 循环,代码,Breakbreak 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。实例：var i=0 for(i=0;i),2.8 循环,代码,Continuecontinue 命令会终止当前的循环，然后从下一个值继续运行。实例：var i=0 for(i=0;i),2.9 JavaScript 函数,JavaScript 函数概述函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的.js 文件，那么甚至可以从其他的页面中调用）。函数在页面起始位置定义，即 部分。,2.9 JavaScript 函数,function displaymessage()alert(Hello World!),练习,2.9 JavaScript 函数,函数定义语法：function 函数名(var1,var2,.,varX)代码 var1,var2 等指的是传入函数的变量或值。和 定义了函数的开始和结束。无参数的函数必须在其函数名后加括号：function 函数名()代码 注意：别忘记 JavaScript 中大小写字母的重要性。function 这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。,2.9 JavaScript 函数,return 语句return 语句用来规定从函数返回的值。因此，需要返回某个值的函数必须使用这个 return 语句。例子下面的函数会返回两个数相乘的值（a 和 b）：function prod(a,b)x=a*b return x 当您调用上面这个函数时，必须传入两个参数：product=prod(2,3)而从 prod()函数的返回值是 6，这个值会存储在名为 product 的变量中。,2.9 JavaScript 函数,return 语句return 语句用来规定从函数返回的值。因此，需要返回某个值的函数必须使用这个 return 语句。例子下面的函数会返回两个数相乘的值（a 和 b）：function prod(a,b)x=a*b return x 当您调用上面这个函数时，必须传入两个参数：product=prod(2,3)而从 prod()函数的返回值是 6，这个值会存储在名为 product 的变量中。,2.9 JavaScript 函数,return 语句return 语句用来规定从函数返回的值。因此，需要返回某个值的函数必须使用这个 return 语句。例子下面的函数会返回两个数相乘的值（a 和 b）：function prod(a,b)x=a*b return x 当您调用上面这个函数时，必须传入两个参数：product=prod(2,3)而从 prod()函数的返回值是 6，这个值会存储在名为 product 的变量中。,2.9 JavaScript 函数,function myfunction()alert(您好！)通过点击这个按钮，可以调用一个函数。该函数会提示一条消息。,练习,2.9 JavaScript 函数,function myfunction()alert(您好！),练习,2.10 JavaScript 事件,事件事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。事件举例：鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键 注意：事件通常与函数配合使用，当事件发生时函数才会执行。,2.10 JavaScript 事件,onFocus,onBlur 和 onChangeonFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail()函数就会被调用。,事件的调用,2.10 JavaScript 事件,事件列表,2.10 JavaScript 事件,练习,function myfunction(txt)alert(txt),