Javascript入门与语法

1、T01 入门与语法基础,JavaScript的地位,目标,什么是JavaScript JavaScript与Java的区别 如何调用JavaScript JavaScript的语法基础 常用函数与方法 Eval/isNaN/parseInt 自定义函数,为什么要学JavaScript,表单验证 演示案例 登录验证 页面动态效果 演示案例 层的切换 滤镜进的使用 其他动态网页的功能实现,什么是JavaScript,JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 用于创建客户端脚本和服务器端脚本 与HTML超文本标记语言、Java

2、 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用 它是通过嵌入或调入在标准的HTML语言中实现的 由Sun Microsystems 和 Netscape 开发，是从 Netscapes 的 Livescript 发展而来的,什么是JavaScript,如何使用JavaScript实现此部分内容？,什么是JavaScript,脚本的执行原理,应用 服务器,IE,IE,解析HTML标签和JavaScript脚本,从服务器端下载含JavaScript的页面,返回响应,客户端请求含JS的页面,发送请求,1,用户输入,2,3,JavaScript和Java的区别

3、,与其他任何语言一样，JavaScript 也遵循一些基本的语法规则如： 区分大小写 使用成对的符号 使用空格 使用注释,网页中调用JavaScript的方式,三种方式调用JS文件 使用Script标记 使用外部文件 在事件处理程序中使用JavaScript,使用Script标记示例, 祝学有所成! ,说明： 通过标识.指明JavaScript脚本源代码将放入其间。 通过属性Language =“JavaScript”说明标识中是使用的何种语言， 这里是JavaScript语言, 表示在JavaScript中使用的语言。,使用外部文件示例, 祝学有所成! ,说明: Document. writ

4、e()是文档对象的输出函数，其功能是将括号中的字符 或变量值输出到窗口； document. close()是将输出关闭。,在事件处理程序中使用JavaScript, JavaScript示例 ,通过给控件添加相应的事件来实现,例如onclick, onchange 等,JavaScript的基本语法,变量的声明和赋值-1,var count;,count = 5;,定义变量,赋值,“var” 用于声明变量的关键字 “count” 变量名,var x, y, z = 10;,var count = 10;,同时声明和赋值变量,声明多个变量,变量的声明和赋值-2,变量的命令约定 变量名必须以字母

5、或下划线 (_) 开头 变量名可以包含数字 由于JavaScript区分大小写，所以可用的字母包括A到Z（大写）和a到z（小写）的字符 变量还可以不作声明，而在使用时再根据数据的类型来确其变量的类型 x=100 ; y=125 ; xy= True ; 在JavaScript中同样有全局变量和局部变量: 全局变量是定义在所有函数体之外，其作用范围是整个函数； 局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。,运算符号,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值 根据所执行的运算，运算符可分为以下类别： 算术运算符 +、-、 * 、 / 、%、+、-

6、、-(求反) 比较运算符 =、!=、=、= 18) ? adult : minor,x = yellow; y = green; z = x + y + white; 则z为yellowgreenwhite w = y + 9; 则w为green9,逻辑控制语句,if条件语句 switch多分支语句 for、while循环语句,if(条件) statements; else statements; ,switch (expression) case value1: statements; break; case value2: statements; break; . default :sta

7、tements; ,for(初始化; 条件; 增量) statements; while(条件) statements; ,阶段案例1,使用JavaScript写一个9 9 乘法表,注释,单行注释以 / 开始，以行末结束 例如： /表示JavaScript代码的开始,多行注释以 /* 开始，以 */ 结束，符号 /* */ 指示中间的语句是该程序中的注释。 例如： /* helloWorld.html 2007-9-29 第一个JavaScript程序 */,类型转换,parseInt (String)将字符串转换为整型数字 parseInt (“86”)将字符串“86”转换为整型值86 pa

8、rseFloat(String)将字符串转换为浮点型数字 parseInt (“34.45”)将字符串“34.45”转换为浮点值34.45 eval(str):返回字符串表达式中的值 isNaN(str):判断制定的内容是否为数字,什么是函数,函数的含义：类似于Java中的方法，是执行特定任务的语句块。,如何希望点击某个按钮后才显示“HelloWorld”， 并能输入显示的次数，怎么办？,演示示例3：调用函数输出“HelloWorld”,什么是函数,1、在页面中放置一个文本框和一个按钮，让用户输入次数后点击按钮才显示 2、把循环显示的代码放置到函数中，当点击按钮时，才调用函数显示HelloWo

9、rld 经过分析，该如何解决上面问题？,使用自定义函数,如何使用函数,创建函数 function 函数名( 参数1,参数2， ) 语句; 调用函数 函数调用一般和表单元素的事件一起使用，调用格式为： 事件名“函数名” ;,function showHello( ) var count=document.myForm.txtCount.value ; for(i=0; iHelloWorld); ,表示单击此按钮时，调用函数showHello( )执行,自定义函数案例1,编写如左图所示，具有能对两个操作数进行加、减、乘、除运算的简易计算器。,名为myform的表单,名为divButton2的普通

10、按钮,名为txtNum1的文本框,提示：加、减、乘、除四个按钮分别调用四 个函数实现两个数相加、相减、相乘和相除,界面代码,计算器功能实现,如何使用函数,在案例1的功能实现代码中，4个按钮调用的函数的代码很类似，怎么优化代码？,比较4个函数，只有运算符号不一样，将运算符号作为函数的参数即可。怎么用一个函数来代替4个结构相似的函数？,使用有参函数,定义有参函数,JavaScript 代码, function compute(op) var num1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value); if (op=+) document.myform.txtResult.value=num1+num2 ; if (op=-) document.myform.txtResult.value=num1-num2 ; if (op=*) document.myform.txtResult.value=num1*num2 ; if (op=/ ,定义有参函数