《PHP程序设计案例教程 教学课件 ppt 作者 陈建国 第3讲 第3讲 JavaScript程序基础知识》由会员分享，可在线阅读，更多相关《PHP程序设计案例教程 教学课件 ppt 作者 陈建国 第3讲 第3讲 JavaScript程序基础知识（32页珍藏版）》请在金锄头文库上搜索。
1、第3讲 JavaScript程序基础知识,教师姓名 教研室名称 2012年01月01日,机械工业出版社,内容要点 CONTENTS,本章任务,制作淘宝网购物 简易计算器页面,1）什么是JavaScript JavaScript是一种脚本编程语言，是基于对象且事件驱动的程序，只是其程序代码嵌在HTML网页文件中，需要浏览者的浏览器进行解释运行。 HTML、XHTML是一种标记语言，用某种结构存储数据并且在设备上显示的手段。,1 JavaScript介绍,2）JavaScript有什么功能 （1）控制文档的外观和内容：动态改变CSS样式及页面内容 （2）控制浏览器的行为：浏览器的退后、刷新、状态栏
2、信息 （3）用户交互操作：网上调查问卷、网上算命页面 （4）与页面各种元素交互：动态改变图片、元素属性等 （5） 读写部分客户端信息：读写客户端浏览器版本等,1 JavaScript介绍,3）在什么地方编写JavaScript JavaScript包含于标签之中 写在中（推荐） 写在中，可多处,1 JavaScript介绍,4） 一个简单的JavaScript程序, 脚本的基本结构 var count=0; document.write(“淘宝网欢迎您！“); for(i=0;i淘宝网欢迎您！“); BODY部分的内容 ,如何使用JavaScript实现此部分内容？,1 JavaScript介
3、绍,脚本的执行原理,应用 服务器,IE,IE,解析HTML标签和JavaScript脚本,从服务器端下载含JavaScript的页面,返回响应,客户端请求含JS的页面,发送请求,1,用户输入,2,3,1 JavaScript介绍, 脚本的基本结构 var count=0; document.write(“淘宝网欢迎您！“); for(i=0;i淘宝网欢迎您！“); BODY部分的内容 ,大家想想上面JavaScript代码与我们学过的Java、C#语言有相似的地方吗？,1 JavaScript介绍,2 JavaScript的基本语法,变量 运算符号 控制语句 注释 类型转换,2 JavaScr
4、ipt的基本语法,var count;,count = 5;,定义变量,赋值,“var” 用于声明变量的关键字 “count” 变量名,var x, y, z = 10;,var count = 10;,同时声明和赋值变量,声明多个变量,2 JavaScript的基本语法,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值 根据所执行的运算，运算符可分为以下类别： 算术运算符 +、-、 * 、 / 、%、+、-、-(求反) 比较运算符 =、!=、=、= 逻辑运算符 &、|、！,2 JavaScript的基本语法,if条件语句 switch多分支语句 for、while循环语句,if(
5、条件) /JavaScript代码; else /JavaScript代码; ,switch (表达式) case 常量1 : JavaScript语句1; break; case 常量2 : JavaScript语句2; break; . default : JavaScript语句3; ,for(初始化; 条件; 增量) 语句集; while(条件) 语句集; ,2 JavaScript的基本语法,单行注释以 / 开始，以行末结束 例如： /表示JavaScript代码的开始,多行注释以 /* 开始，以 */ 结束，符号 /* */ 指示中间的语句是该程序中的注释。 例如： /* hell
6、oWorld.html 2007-9-29 第一个JavaScript程序 */,2 JavaScript的基本语法,parseInt (String) 将字符串转换为整型数字 如: parseInt (“86”)将字符串“86”转换为整型值86 parseFloat(String) 将字符串转换为浮点型数字 如: parseInt (“34.45”)将字符串“34.45”转换为浮点值34.45,2 JavaScript的基本语法,函数的含义：类似于Java中的方法，是执行特定任务的语句块。,如何希望点击某个按钮后才显示“HelloWorld”， 并能输入显示的次数，怎么办？,演示：调用函数输
7、出“HelloWorld”,2 JavaScript的基本语法,1、在页面中放置一个文本框和一个按钮，让用户输入次数后点击按钮才显示 2、把循环显示的代码放置到函数中，当点击按钮时，才调用函数显示HelloWorld 经过分析，该如何解决上面问题？,演示：使用自定义函数,2 JavaScript的基本语法,如何使用函数,创建函数 function 函数名( 参数1,参数2， ) 语句; 调用函数 函数调用一般和表单元素的事件一起使用，调用格式为： 事件名“函数名” ;,function showHello( ) var count=document.myForm.txtCount.value
8、; for(i=0; iHelloWorld“); ,表示单击此按钮时，调用函数showHello( )执行,2 JavaScript的基本语法,编写如左图所示，具有能对两个操作数进行加、减、乘、除运算的简易计算器。,名为myform的表单,名为divButton2的普通按钮,名为txtNum1的文本框,提示：加、减、乘、除四个按钮分别调用四 个函数实现两个数相加、相减、相乘和相除,2 JavaScript的基本语法,在小结1中，4个按钮调用的函数的代码很类似，怎么优化代码？,比较4个函数，只有运算符号不一样，将运算 符号作为函数的参数即可。怎么用一个函数来 代替4个结构相似的函数？,使用有参
9、函数,2 JavaScript的基本语法,定义有参函数,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=“*“) d
10、ocument.myform.txtResult.value=num1*num2 ; if (op=“/“ ,定义有参函数compute( )，完成计算功能，op参数代表运算符号。,2 JavaScript的基本语法,调用有参函数,JavaScript 代码, ,调用有参函数,2 JavaScript的基本语法,常见错误1, function compute(op) x=5; var num1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value);
11、 if (op=“+“) document.myform.txtResult.value=num1+num2 ; if (op=“-“) document.myform.txtResult.value=num1-num2 ; ,变量可以不声明而直接赋值。如x=5; 不推荐使用，容易出错。,2 JavaScript的基本语法,常见错误2, function compute(op) var Num1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value)
12、; if (op=“+“) document.myform.txtResult.value=num1+num2 ; if (op=“-“) document.myform.txtResult.value=num1-num2 ; ,JavaScript大小写非常敏感,2 JavaScript的基本语法,常见错误3, function compute(op) var num1,num2; num1=document.myform.txtNum1.value; num2=document.myform.txtNum2.value; if (op=“+“) document.myform.txtRes
13、ult.value=num1+num2 ; if (op=“-“) document.myform.txtResult.value=num1-num2 ; ,需要使用parseFloat方法进行 转换，否则认为是字符串,2 JavaScript的基本语法,演示：具有验证功能的登录页面,演示：具有验证功能的注册页面,制作具有验证功能的登录页面,制作具有验证功能的注册页面,3 JavaScript交互方式,1. 表单验证验证,会员注册页面,获得焦点时（光标移入）,失去焦点时（光标移出）,失去焦点时（光标移出）,3 JavaScript交互方式,1. 表单验证验证,知识点： 几种样式？ 动态设置标签
14、内容？ 获取焦点事件？ 失去焦点事件？,3 JavaScript交互方式,1. 表单验证验证,30/63,知识点： 几种样式？ 动态设置标签内容？ 获取焦点事件？ 失去焦点事件？, function foucs_mail() document.getElementById(“span_mail“).className=“span2“; document.getElementById(“span_mail“).innerHTML=“8-50个字符“; 请输入邮箱 ,修改内容,修改属性,定位链接元素（对象）,获取焦点,失去焦点,3 JavaScript交互方式,1. 表单验证验证,实现步骤： 1）设置样式 2）编写Javascript代码 3）设置获取焦点事件 4）设置失去焦点事件,3 JavaScript交互方式,
