JavaScript-T1.ppt

《JavaScript-T1.ppt》由会员分享，可在线阅读，更多相关《JavaScript-T1.ppt（37页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScript与网页特效制作与网页特效制作 第一章第一章第一章第一章JavaScriptJavaScript语言基础语言基础课程地位课程地位Logic JavaC#SQL BaseHTML/CSSPrevSQL Advance.Net OOPJava OOPJavaScriptWinformsJava WebTestingOracleASSH2Ajax&Web2.0A MVCLinuxOOAD&UMLWindows MobileAndroidNTCSE&PM企业企业项目项目实训（商业项目）实训（商业项目）课程介绍课程介绍编写编写JavaScript程序程序掌握掌握DOM编程编程掌握常用掌

2、握常用JavaScript特效特效掌握掌握JavaScript自定义对象的使用自定义对象的使用本章案例本章案例编写第一个编写第一个JavaScript程序：简单计算器程序：简单计算器本章目标本章目标了解了解JavaScript脚本技术脚本技术掌握掌握JavaScript中的变量及分支结构中的变量及分支结构掌握掌握JavaScript常用类型转换常用类型转换掌握掌握JavaScript自定义函数自定义函数预习检查预习检查提问提问什么是什么是JavaScript？JavaScript脚本的基本结构是什么？脚本的基本结构是什么？如何在如何在JavaScript中声明变量？中声明变量？如何在如何在Ja

3、vaScript中自定义函数？中自定义函数？奇妙的奇妙的JavaScript问题一问题一什么是什么是JavaScript？Javascript是一种解释性的，基于对象的脚本语言是一种解释性的，基于对象的脚本语言(an interpreted,object-based scripting language)。JavaScript 是一种基于对象和事件驱动并具有相对安全是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，主要用于创建具有交互性较强的性的客户端脚本语言，主要用于创建具有交互性较强的动态页面。动态页面。为什么学习为什么学习JavaScriptJavaScript语言的特点语言的特

4、点 基于对象基于对象 事件驱动事件驱动解释性语言解释性语言实时性实时性动态性动态性 跨平台跨平台 开发使用简单开发使用简单 相对安全性相对安全性 JavaScript的用途的用途表单数据合法性验证表单数据合法性验证 JavaScript的用途的用途网页特效网页特效 JavaScript的用途的用途交互式菜单交互式菜单 JavaScript的用途的用途动态页面动态页面 JavaScript的用途的用途数值计算数值计算 第一个第一个JavaScript程序程序HelloWorlddocument.write(Hello World!);HelloWorlddocument.write(Hello

5、World!);HelloWorlddocument.write(Hello World!);脚本标记脚本标记脚本语言脚本语言脚本内容脚本内容演示程序演示程序Helloworld.htmlJavaScript基本数据结构基本数据结构数据类型数据类型数字型：整数和实数数字型：整数和实数字符串型：使用字符串型：使用“”或者或者括起来的字符或数字括起来的字符或数字逻辑型：用逻辑型：用true或者或者false表示表示空值：什么也没有空值：什么也没有JavaScript基本数据结构基本数据结构变量变量在程序运行过程中，其值可以改变的量在程序运行过程中，其值可以改变的量 变量声明变量声明var numb

6、er=10;或或number=10;（单一赋值）（单一赋值）var number1,number2,number3;（连续赋值）（连续赋值）变量命名规范变量命名规范必须以字母开头，其后可以跟数字和下划线等，不能有空格，不可必须以字母开头，其后可以跟数字和下划线等，不能有空格，不可以使用以使用“+”、“-”、“，”、“？”等运算符或者标点符号表示，等运算符或者标点符号表示，不可以使用关键字如不可以使用关键字如var、int、double等。等。JavaScript运算符运算符算术运算符算术运算符 基本数学运算符基本数学运算符举例举例简要说明简要说明+m=5+5将两个数据相加，并将结果返回操作符左

7、侧的将两个数据相加，并将结果返回操作符左侧的变量变量-m=9-4将两个数据相减，并将结果返回操作符左侧的将两个数据相减，并将结果返回操作符左侧的变量变量*m=3*4将两个数据相乘，并将结果返回操作符左侧的将两个数据相乘，并将结果返回操作符左侧的变量变量/m=20/5将两个数据相除，并将结果返回操作符左侧的将两个数据相除，并将结果返回操作符左侧的变量变量%m=14%3求两个数据相除的余数，并将结果返回操作符求两个数据相除的余数，并将结果返回操作符左侧的变量左侧的变量JavaScript运算符运算符比较运算符比较运算符基本数学基本数学运算符运算符举例举例简要说明简要说明=num=8相等，若两数据相

8、等，则返回布尔值相等，若两数据相等，则返回布尔值true，否则返回，否则返回false!=num!=8不相等，若两数据不相等，则返回布尔值不相等，若两数据不相等，则返回布尔值true，否则返回，否则返回falsenum8大于，若左边数据大于右边数据，则返回布尔值大于，若左边数据大于右边数据，则返回布尔值true，否，否则返回则返回falsenum=num=8大于或等于，若左边数据大于或等于右边数据，则返回布大于或等于，若左边数据大于或等于右边数据，则返回布尔值尔值true，否则返回，否则返回false=num=8小于或等于，若左边数据小于或等于右边数据，则返回布小于或等于，若左边数据小于或等于

9、右边数据，则返回布尔值尔值true，否则返回，否则返回falseJavaScript运算符运算符逻辑运算符逻辑运算符 运算符运算符举例举例作用作用&num2逻辑与，如果符号两边的操作数为真，逻辑与，如果符号两边的操作数为真，则返回则返回true，否则返回，否则返回false|num2逻辑或，如果符号两边的操作数为假，逻辑或，如果符号两边的操作数为假，则返回则返回false，否则返回，否则返回true!num5逻辑非，如果符号右边的操作数为真，逻辑非，如果符号右边的操作数为真，则返回则返回false，否则返回，否则返回true数据类型转换数据类型转换内置的转换方法内置的转换方法 parseInt

10、()-将字符串转换为整数将字符串转换为整数parseFloat()-将字符串转换为浮点类型将字符串转换为浮点类型var num1=parseInt(2342red);var num2=parseInt(0 xA);var num3=parseInt(22.5);var num4=parseInt(red);演示程序演示程序parseToNumber.html数据类型转换数据类型转换JavaScript提供了三种强制转换方式：提供了三种强制转换方式：Boolean(value)：将给定值转换为：将给定值转换为Boolean类型类型Number(value)：将给定值转换为数字类型：将给定值转换为

11、数字类型String(value)：将给定值转换为字符串类型：将给定值转换为字符串类型var atr1=Boolean(false);var atr2=Number(123);var atr3=String(233);控制流语句控制流语句条件语句条件语句 if结构结构语法语法if结构结构if(boolean表达式表达式)/语句或语句块语句或语句块 if-else结构结构 if-else结构结构if (boolean表达式表达式)/语句或语句块语句或语句块 else/语句或语句块语句或语句块语法语法控制流语句控制流语句switch结构结构语法语法switch结构结构switch(表达式表达式)c

12、ase 常量常量1:语句语句1;break;case 常量常量2:语句语句2;break;default:语句语句;break;注意：注意：case后面是分号后面是分号控制流语句控制流语句简易计算器，可实现加减运算。简易计算器，可实现加减运算。弹出一个可接收数据的提示弹出一个可接收数据的提示框框演示程序演示程序Calculator.htmlvar num1=10;var num2=20;/弹出一个可输入的对话框弹出一个可输入的对话框var op=prompt(请输入运算符：请输入运算符：+或或-);document.write(两个运算数分别为：两个运算数分别为：);document.writ

13、e(num1=+num1+);document.write(num2=+num2+);document.write(运算结果为：运算结果为：);if(op=+)document.write(num1+num2=+(num1+num2);else document.write(num1-num2=+(num1-num2);控制流语句控制流语句for循环循环语法语法for结构结构for(initial condition;test condition;alter condition)statements;循环迭代部分循环迭代部分循环条件部分循环条件部分初始化部分初始化部分123循环体循环体4控制流

14、语句控制流语句var iArray=new Array(JHX,QZY,LJY,HZF);var iLength=iArray.length;var msg=nfor 循环语句测试循环语句测试:nn;msg+=数组长度数组长度:n+iLength+n;msg+=数组元素数组元素:n;for(var i=0;iiLength;i+)msg+=iArray+i+=+iArrayi+n;document.write(msg);定义一个数组定义一个数组获取数组长度获取数组长度遍历数组遍历数组演示程序演示程序loop.html课堂练习课堂练习计算计算1-100之间所有偶数的和。之间所有偶数的和。自定义函

15、数自定义函数HelloWorldfunction showMessage()alert(Hello Function!);/弹出一个对话框弹出一个对话框showMessage();/可以在任意位置调用此方法可以在任意位置调用此方法HelloWorldfunction showMessage()alert(Hello Function!);/弹出一个对话框弹出一个对话框showMessage();/可以在任意位置调用此方法可以在任意位置调用此方法自定义函数自定义函数showMessage调用自定义函数调用自定义函数showMessage演示程序演示程序function.html自定义函数自定义函

16、数JavaScript 脚本语言允许开发者通过编写函数的方式组合脚本语言允许开发者通过编写函数的方式组合一些可重复使用的脚本代码块，增加了脚本代码的结构化一些可重复使用的脚本代码块，增加了脚本代码的结构化和模块化。和模块化。自定义函数自定义函数function funcName(parameters)statements;return 表达式表达式;语法语法funcName 为函数名，函数名可由开发者自行定义，与变量的命名规则基本相同；为函数名，函数名可由开发者自行定义，与变量的命名规则基本相同；parameters 为函数的参数，在调用目标函数时，需将实际数据传递给参数列表以完为函数的参数，

17、在调用目标函数时，需将实际数据传递给参数列表以完成函数特定的功能。参数列表中可定义一个或多个参数，各参数之间加逗号成函数特定的功能。参数列表中可定义一个或多个参数，各参数之间加逗号“,”分分隔开来，当然，参数列表也可为空；隔开来，当然，参数列表也可为空；statements 是函数体，规定了函数的功能，本质上相当于一个脚本程序；是函数体，规定了函数的功能，本质上相当于一个脚本程序；return 指定函数的返回值，为可选参数。指定函数的返回值，为可选参数。总结总结JavaScript是什么？是什么？JavaScript中的数据类型有哪些？中的数据类型有哪些？如何在如何在JavaScript中自定义函数，需要使用什么关键字？中自定义函数，需要使用什么关键字？作业作业JavaScript与网页特效制作与网页特效制作