JavaScript入门.pptx

1、学习目标,JavaScript编程基础 JavaScript工作原理 如何在页面中使用JavaScript数据类型、变量、常量、运算符、 表达式、与控制流程、数组、函数 JavaScript事件处理 对象和系统函数 浏览器对象,JavaScript,什么是JavaScript JavaScript是有Netscape公司开发的一种脚本语言，其编写的程序可以被嵌入到HTML/XML页面中，并直接在浏览器中解释执行。 JavaScript功能 增强页面动态效果 实现页面(浏览器)与用户之间的实时、动态的交互 JavaScript语言特点 脚本语言(Script Language) 解释执行(Int

2、erpreted Language) 基于对象(Object Based) 事件驱动(Event Driven) 简单 弱类型(Weakly Typed Language),JavaScript嵌入到HTML页面中,(1)在HTML页面中，使用标记嵌入脚本代码： /或者使用:type=text/javascript /*JavaScript代码*/ JavaScript代码的出现位置 (1)HTML页面主体(元素) (2)HTML页面头部(元素) (3)单独的外部文件中 ,数据类型,JavaScript支持基本数据类型和对象类型 (1)基本数据类型 整型 浮点型 字符型 布尔型 (2)对象类型

3、 内置对象 (String、Math、Date) 浏览器对象 (Window、Document、History、Forms、.) 用户自定义对象,变量,(1) 命名规则 必须以字母、下划线或美元符开头、后面可以跟字母、下划线、美元符和数字 变量名区分大小写 不允许使用JavaScript关键字做变量名 (2) JavaScript为弱类型语言,变量声明时不指定数据类型，其具体数据类型由给其所赋的值决定。 (3) 通常使用var声明变量，也可以不经声明而直接使用变量 但必须是先赋值、再取用其值,JavaScript关键字,编程语言中，一些被赋以特定的含义、 并用做专门用途的单词称为关键字(Key

4、word)或保留字(Reserved Word) break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try,常量,整型常量 十进制表示: 12 十六进制表示：0 x12 八进制表示: 012 浮点型常量： 3.14 布尔类型常量：true 字符型常量：a china abc 转义字符常量：n t 控制常量: nu

5、ll,JavaScript运算符,算术运算符: + - * / + - % 逻辑运算符: ! 非 i=100;i+) ; ; ; ; while循环 while() do-while循环dowhile() for-in循环 foreach for(var a : array) 特殊流程控制语句 break语句 continue语句,数组,数组是多个相同类型数据的组合，实现对这些数据的统一管理 JavaScript数组声明方式: var a1= new Array(); var a2= new Array(size); var a1= new Array(v1,v2,v3,.vn); JavaS

6、cript数组长度可变,数组对象的自动属性length标明了其长度 数组元素访问格式为数组名元素下标，有效元素下标为0length-1,函数,JavaScript中的函数(function)相当于其他编程语言中的方法(method)或 子程序(subroutine),是用来完成相对独立功能的一段代码的集合。 格式: function () JavaScript函数在定义时不需要指定其返回值类型和是否有返回值,事件以及事件处理机制,1、事件(Event) 用于描述发生了什么事情，用户的鼠标或键盘操作(如点击、文字输入、选中条目等)以及其他的页面操作(如页面加载和卸载等)都会触发相应的事件 2、事

7、件源(Event Source) 可能产生事件的组件，通常为表单组件 3、事件驱动(Event Driven) 由事件引发程序的响应，执行事先准备好的事件处理代码，这种程序运行方式成为事件驱动 4、事件处理代码(Enevt Handle) JavaScript中事件处理代码通常定义为函数的形式，其中加入所需要处理的逻辑， 并将之关联到所关注的事件源组件上。,常用事件类型及处理,JavaScript常用事件类型： onClick 组件被点击 onDbclick 组件被双击 onLoad 页面加载 onUnload 页面卸载 onChange 组件内容或条目选中状态发生改变 onMousemove

8、 鼠标移动 onFocus 获得焦点 onBlur 失去焦点,JavaScript常用对象,1、数学对象 内置对象Math提供常规的数学运算方法和数学常量 PI,E,abs(),sin(),cos(),.,round(), sqrt(),pow(),random() 2、时间对象 封装日期和时间信息并提供相关操作功能 使用前需要声明/创建对象: var currentTime = new Date(); getYear(),getMonth(),getDate(),getDay(), getHours(),getMinutes(),getSeconds(),getTime(),JavaScri

9、pt常用对象,3、字符串对象 String对象描述和处理文本字符串信息 length charAt(idx) indexof(chr) indexof(chr,fromidx) lastindexof(chr) substring(m,n) substring(m) toLowerCase() toUpperCase() split() -将字符串按照指定分隔符转换成数组,系统函数,系统函数不从属于任何的对象，可以在JavaScript代码中的任何位置直接使用 常用系统函数： eval(str) 计算字符串形式给出的表达式的值 parseInt(str) parseInt(str,radix)

10、将字符串形式的数值解析为整数，如果解析到字符串中间遇到非法字符则返回已解析的内容、而不是出错；如果字符串的开头第一位就是非法字符，则返回NaN(not a number,非数值型) parseFloat(str)将字符串形式的数值解析为浮点数 isNaN(v)判断参数的值是否为NaN,浏览器对象,浏览器对象属于JavaScript内置对象，使用这些对象可以实现与HTML页面间的交互 主要浏览器对象层次： navigator links location anchors window document forms formElements history images event DOM模型(D

11、ocument Object Model, 文档对象模型),Window对象,Window对象表示的是浏览器窗口 (1)可以使用Window对象获取浏览器窗口的状态信息，也可以通过它来访问其他的浏览器对象及窗口中发生事件信息。 (2)Window对象是其他浏览器对象的共同祖先，所以一般在JavaScript程序中可以省略Window对象。 (3)浏览器打开HTML文档时，通常会创建一个Window对象。 Window对象常用方法 alert(); open(URL,windowName,parameterList); close(); prompt(text,defaulttext); con

12、firm(text); setInterval(func,timer); clearInterval(timer);,Document对象,Document对象是Window对象的属性，它表示的是当前显示的文档，其中封装了文档中元素的相关信息，并提供了相应的操作功能。 Document对象主要方法 write();,Location对象,Location对象是Window对象的属性，表示的是当前打开的URL，并提供相关的基本操作方法。 Location对象常用方法 Window.location=URL 指向目标页面 reload(); 刷新，重新加载,History对象,History对象是Window对象的属性，他封装了当前浏览器窗口(Window对象)曾经访问过的网页URL信息，并提供了相应的访问和页面跳转功能。 History对象主要属性和方法 go(index); 前进或后退指定的多个页面 back(); 后退一