《JS基础知识及应用》PPT课件.ppt

JS基础知识及应用 国际软件工程师培训学校 什么是JavaScript JavaScript被设计用来向HTML页面添加交互行为 JavaScript是一种脚本语言 脚本语言是一种轻量级的编程语言 JavaScript由数行可执行计算机代码组成 JavaScript通常被直接嵌入HTML页面 JavaScript是一种编译语言 就是说 代码执行不进行预编译 所有的人无需购买许可证均可使用JavaScript JavaScript能做什么 JavaScript为HTML设计师提供了一种编程工具JavaScript可以将动态的文本放入HTML页面JavaScript可以对事件作出响应JavaScript可以读写HTML元素JavaScript可被用来验证数据JavaScript可被用来检测访问者的浏览器JavaScript可被用来创建cookies 如何实现JavaScript HTML的标签用于把JavaScript插入HTML页面当中 document write HelloWorld 把JavaScript放置在何处 位于head部分的脚本 位于body部分的脚本 使用外部JavaScript 注 当页面载入时 会执行位于body部分的JavaScript 当被调用时 位于head部分的JavaScript才会被执行 JavaScript语句 JavaScript是由浏览器执行的语句序列 JS语句是发给浏览器的命令 这些命令的作用是告诉浏览器要做的事情 这个JS语句告诉浏览器向网页输出 Helloworld document write Helloworld JS代码JS代码是JS语句的序列 document write Thisisaheader JS代码块JS可以分批地组合起来 代码块以左花括号开始 以右花括号结束 document write Thisisaheader JavaScript注释 JavaScript注释可用于增强代码的可读性 单行注释以 开始 这行代码输出标题 document write Thisisaheader 这行代码输出段落 document write Thisisaparagraph 多行注释以 开头 以 结尾 下面的代码将输出一个标题和两个段落 document write Thisisaheader document write Thisisaparagraph JavaScript变量 变量是用于存储信息的容器x 5 y 6 JavaScript变量名称的规则 变量对大小写敏感 y和Y是两个不同的变量 变量必须以字母或下划线开始声明 创建 JavaScript变量您可以通过var语句来声明JavaScript变量 varx 5 varcarname 北京现代 注 在为变量赋文本值时 请为该值加引号 JavaScript运算符 运算符 用于赋值 运算符 用于加值 如 varx vary varz y 5 z 2 x y z 在以上语句执行后 x的值是 y 5 z 2 x y z 在以上语句执行后 x的值是 JavaScript算术运算符 给定y 5 下面的表格解释了这些算术运算符 JavaScript赋值运算符 给定x 10和y 5 下面的表格解释了赋值运算符 JavaScript比较运算符 给定x 5 下面的表格解释了比较运算符 JavaScript逻辑运算符 给定x 6以及y 3 下面的表格解释了逻辑运算符 JavaScript条件运算符 JavaScript还包含了基于某些条件对变量进行赋值的条件运算符 语法 variablename condition value1 value2例如 y X 5 true false JavaScriptif else语句 if语句if 条件 条件成立时执行代码 if else语句if 条件 条件成立时执行此代码 else 条件不成立时执行此代码 if elseif else语句if 条件1 条件1成立时执行代码 elseif 条件2 条件2成立时执行代码 else 条件1和条件2均不成立时执行代码 注 请使用双等号 来比较变量 JavaScriptswitch语句 如果希望选择执行若干代码块中的一个 你可以使用switch语句 switch n case1 执行代码块1breakcase2 执行代码块2breakdefault 如果n即不是1也不是2 则执行此代码 JavaScript消息框 警告框alert 文本 当警告框出现后用户需要点击确定按钮才能继续进行操作 确认框confirm 文本 如果用户点击确认 那么返回值为true 如果用户点击取消 那么返回值为false提示框prompt 文本 默认值 如果用户点击确认 那么返回值为输入的值 如果用户点击取消 那么返回值为null JavaScript函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 如何定义函数function函数名 var1 var2 varX 代码 注 无参数的函数必须在其函数名后加括号 return语句return语句用来规定从函数返回的值 functionprod a b x a b returnx JavaScriptFor循环 JavaScript中的循环用来将同一段代码执行指定的次数语法 for 变量 开始值 变量vari 0for i 0 i JavaScriptWhile循环 while循环用于在指定条件为true时循环执行代码 while 变量 结束值 需执行的代码 do while循环do 需执行的代码 while 变量 结束值 区别 do while至少执行一次 JavaScriptBreak和Continue Break使用break语句来终止循环Continue使用continue语句来终止当前的循环 然后从下一个值继续执行 vari 0for i 0 i JavaScript获取html元素 getElementById getElementsByName getElementsByTagName 查看例子 JavaScript事件 事件是可以被JavaScript侦测到的行为 onload和onUnloadonFocus onBlur和onChangeonSubmitonMouseOver和onMouseOut查看例子 JavaScripttry catch try catch的作用是测试代码中的错误 有两种在网页中捕获错误的方法 1 使用try catch语句2 使用onerror事件try catch语句try 在此运行代码 catch err 在此处理错误 onerror事件只要页面中出现脚步错误 就会产生onerror事件 onerror handleErrfunctionhandleErr msg url l Handletheerrorherereturntrueorfalse 查看例子 12 JavaScriptthrow声明 throw声明的作用是创建exception 语法 throw exception exception可以是字符串 整数 逻辑值或者对象 throw声明的作用是创建exception 异常 你可以把这个声明与try catch声明配合使用 以达到控制程序流并产生精确错误消息的目的 请查看例子 JavaScript特殊字符 你可以在JavaScript中使用反斜杠来向文本字符串添加特殊字符 JavaScript字符串对象 计算字符串的长度 xxx length toUpperCase 方法Match 方法indexOf 方法查看例子 JavaScript日期对象 newDate 方法返回当日的日期getTime 方法计算从1970年到今天有多少年setFullYear 方法得到精确的日期 有三个参数 年 月 日 toUTCString 方法当日的日期 根据UTC 转换为字符串getDay 方法显示星期 是数字当前时间加N天varmyDate newDate myDate setDate myDate getDate N 查看例子 JavaScript数组 Array 对象 数组对象的作用是 使用单独的变量名来存储一系列的值 定义数组varmyArray newArray 第一种 VarmyArray newArray myArray 0 Java myArray 1 Javascript 第二种 VarmyArray newArray java javascript JavaScript浏览器检测 JavaScriptNavigator对象包含了有关访问者浏览器的所有信息 appName保存浏览器类型appVersion存有浏览器的版本信息 其他信息中的一项 查看例子 JavaScriptCookies 什么是cookie cookie是存储于访问者的计算机中的变量 每当同一台计算机通过浏览器请求某个页面时 就会发送这个cookie 你可以使用JavaScript来创建和取回cookie的值 名字cookie密码cookie日期cookie查看例子 谢谢