• 1. JS 更多内容:www.foxitjob.com 的“网站设计”栏目
  • 2. 什么是JavaScript来历和用途 Javascript是网景(Netscape)公司开发的一种基于客户端浏览器、基于对象、事件驱动式的网页脚本语言 不是JScript,更不是Java javascript和vbscript的区别 特点: 是一种在网页客户端执行的弱类型脚本语言 语法风格类似C语言 严格的区分大小写 分号表示一句话的结尾 网页客户端最通用的脚本语言之一2
  • 3. 如何定义javascript在元素的客户端事件中直接调用脚本 常见的html的事件如:onclick, onload, onunload, onchange 在html定义脚本块 把脚本放在单独的文件(后缀名是.js),引用到html 脚本块定义位置决定其执行顺序3
  • 4. 用函数封装调用脚本函数的写法 function Fun() { ... } 调用函数 onclick="Fun()"4
  • 5. 脚本的调试使用VS和IE调试脚本 使用FireFox的插件FireBug调试脚本5
  • 6. 定义变量局部变量 function Fun() { var i; } 全局变量 var i; funtction Fun() { ... } 6
  • 7. 数据类型有以下类型: number:数值类型(整数,浮点数) string:字符串(单引号,双引号) boolean:布尔类型(true,false) object:对象类型(内置对象,自定义对象) undefined:未定义类型(不存在的对象、已定义但未赋值 ) null:空值 特点: 一:没有高级语言严格数据类型的定义 二:可以使用typeof(变量),获得数据类型的标示符7
  • 8. 常见运算符号和类型转换运算符 对number类型执行四则运算 string类型的连接符号是:+ 支持++,--运算符号 支持类C语言大多数常见运算符 转换 parseInt():转换为整数 parseFloat():转换为浮点数 IsNaN():是否为数字 eval():执行字符串8
  • 9. 流程控制语句注释:// 或 /* ... */ 分支 If switch 循环 for() while() do{ ... }while() 跳转 break; continue; return; 三元运算:?:9
  • 10. JS内置对象:Date声明: var today = new Date(); 年,月,日 getFullYear() , getMonth() ,getDate() 当前日期时间 toLocaleString() toLoacleTimeString()10
  • 11. JS内置对象:MathPI Math.PI 平方根 Math.SQRT2 2的10次方 Math.pow(2,10) 四舍五入 Math.round(100.12); 取整 Math.floor() 随机数 Math.random()11
  • 12. 数组一维数组 格式1: fruit=new Array(3);      fruit[0]="苹果";     fruit[1]="梨子";     fruit[2]="橘子"; 格式2: fruit=new Array("苹果","梨子","橘子"); 格式3:fruit=["苹果","梨子","橘子"]; 二维数组 var fruit = new Array(2); fruit[0] = new Array("苹果", 2); fruit[1] = new Array("梨子", 4);12
  • 13. JS内置对象:字符串大小写转换:toUpperCase() / toLowerCase() 查找索引:indexOf 截取字符:charAt 截取字符串:substring, substr ASCII转换:charCodeAt(); / fromCharCode(); 拆分:split 字符集编码和解码:escape / unescape13
  • 14. DOM什么是DOM Document Object Model,定义了浏览器各对象间的层次关系 DOM对象的层次 window location frames history navigator event screen document forms all body styleSheets14
  • 15. 基本的DOM元素控制使用document获得文本框的值: var v = document.getElementById("txt").value; 使用document设置div的值: document.getElementById("div1").innerHTML="AAAAA"; 使用document打印脚本: document.write("AAAA");15
  • 16. DOM对象之windowwindow对象是DOM的顶层对象,代表浏览器的整个窗口 常见方法 窗口控制:open(),close(),moveTo(),resizeTo() 对话框:alert(),confirm(),prompt(),showModalDialog() 时钟控制:setTimeout(),setInterval()16
  • 17. DOM对象之window新开浏览器窗口 window.open(url,"_blank","width=800,height=600,menubar=1,toolbar=1,status=1"); 关闭浏览器 window.close(); 获得子窗口对象 var w = window.open(...); 获得父窗口对象 var w = window.top.opener;17
  • 18. DOM对象之window调整窗口大小 window.resizeTo(宽,高); 移动窗口位置 window.moveTo(x, y); 滚动条控制 window.scrollTo(x,y);18
  • 19. DOM对象之window弹出提示框 window.alert("AAAAAAAAAAAAA"); 确认提示框 window.confirm("AAAAAAAAA"); 输入提示框 var w = window.prompt("AAAAAAA", "BBBBBBBB");19
  • 20. DOM对象之window网页模式对话框 打开:window.showModalDialog("a.html"); 接收:var v = window.dialogArguments; 回传:window.returnValue="BB";20
  • 21. DOM对象之window定时器 setTimeout 设置浏览器过多长时间后执行指定的程序,时间以毫秒为单位 setInterval 设置浏览器每隔多长时间定期执行指定的程序,时间以毫秒为单位 clearTimeout 取消setTimeout的设置 clearInterval 取消setInterval的设置21
  • 22. DOM对象之location用来设置和返回当前网页的URL 跳转页面 location.href="http://www.foxitjob.com" 刷新页面 locaton.reload(); 22
  • 23. DOM对象之event获取或设置当前事件,如键盘和鼠标事件 获得键盘按键:event.keyCode 获得事件源:event.srcElement.type 获得鼠标按键:event.button 获得鼠标的坐标 相对事件源父容器:event.x, event.y 相对事件源:event.offsetX, event.offsetY 相对客户区:event.clientX, event.clientY 相对屏幕:event.screenX, event.screenY23
  • 24. DOM对象之history用以存储客户端最近访问的网址清单 回到上一个历史记录:back() 回到下一个历史记录中:forward() 前往历史记录中的网址:go() 24
  • 25. DOM对象之screen描述屏幕的显示及颜色属性 availHeight 屏幕区域的可用高度 availWidth 屏幕区域的可用宽度 colorDepth 颜色深度 8 16 32 height 屏幕区域的实际高度 width 屏幕区域的实际宽度 25
  • 26. DOM对象之navigator检测浏览器的版本、所支持的MIME类型、已安装的外挂程序(plug-in) appCodeName 代码 appName 名称 appVersion 版本 platform 编译浏览器的机器类型 plugins 以数组表示已安装的外挂程序 userAgent 用户代理程序的表头 26
  • 27. DOM对象之frames获取frame:window.frames[0] 控制iframe元素 控制frameset27
  • 28. DOM对象之document代表当前HTML对象,是由标签组构成的,对每个HTML文件会自动建立一个文件对象 获得表单元素 查找form里面指定id的元素:document.forms[索引].id 查找指定name的元素:document.getElementsByName(name) 查找指定id的元素:document.getElementById(id) 查找form里面的所有元素:document.forms[0].elements 使用JS提交表单 指定action 调用submit()28
  • 29. JS动态创建控件使用innerHTML的局限 使用document的API 创建:var obj = document.createElement(“input”) 添加:div.appendChild(obj); 删除:div.removeChild(obj);29
  • 30. JS动态创建控件创建Select下拉控件 选项:var op = new Option(); 添加:sel.options.add(op); 级联创建Select效果30
  • 31. JS动态创建控件动态创建table 结构:rows 行集合, cells 单元格集合 添加行:table.insertRow(0) 添加单元格:row.insertCell(0); 删除行:table.deleteRow(row); 删除列:row.deleteCell();31
  • 32. JS控制CSS使用style属性 使用className属性32
  • 33. JS的自定义对象几乎所有流行的JS第三方框架库是用自定对象封装 Object和直接初始化对象 JavaScript 语言中所有对象都由 Object 对象派生 直接初始化对象:var a = { name:”AA”, … } 定义对象的构造函数和用new创建对象 构造函数:function ClassA(name) { this.name=name; } new: var a = ClassA(“AA”); JavaScript 只负责创建该对象,对象资源的回收由浏览器完成 构造函数方式创建对象的缺陷 33
  • 34. JS的自定义对象通过原型扩展JS对象 每个对象都有指定了其结构的原型(prototype)属性,该属性描述了该类型对象共有的代码和数据,可以通过对象的 prototype,属性为对象动态添加新属性和新方法。 格式:对象.prototype.属性=值; 原型法创建对象的缺陷 使用构造+原型混合方式创建对象34
  • 35. JS的动态参数函数实现变参效果 关键字:arguments35
  • 36. JS的闭包应用什么是JS的闭包 JS的闭包改变变量的作用访问 通过JS的闭包返回函数对象 JS版本的ArrayList JS版本的委托和事件36
  • 37. JSONJSON是一种用于数据交换的文本格式。其作用是提供结构化数据的一种表示,而不依赖所用的语言和平台。使用这种格式,可以在不同语言编写的应用程序之间交换数据,而且可以在不同机器上运行应用程序。和XML相比,JSON的语法很简洁,通过网络传输JSON数据通常需要更少的带宽 JSON建立在JavaScript语言的一个子集的基础上 Json是JS对象和数组组合的产物37
  • 38. JQUERYJquery是目前著名的第三方JS函数库之一,主要用来快速实现DOM控制。它良好的封装和API的易用甚至被MS所认可,asp.net mvc框架默认的JS函数库之一就是Jquery Jquery是免费开源的JS框架项目 官方网站提供下载:http://www.jquery.com/ Jquery提供VS的开发版本:jquery-版本号-vsdoc.js38
  • 39. JQUERY如何引用JQ框架