1、JavaScript 程序设计基础,有什么用吗？,JavaScript的应用范围,改善页面设计、实现动态效果 传统的HTML的功能 图片的交互显示 控制层的显示 显示时间、并通过时间触发程序 人机交互,JavaScript 程序设计基础,掌握基本的JavaScript程序设计技术 掌握基于对象和事件驱动的编程技术,JAVASCRIPT 简介,什么是JavaScript JavaScript是Web上的一种功能强大的(脚本)编程语言，用于开发交互式的Web页面。 JavaScript的前身叫做LiveScript Netscape Sun公司合作。1995,JavaScript 的基本特点,Ja
2、vaScript是脚本编程语言 JavaScript是基于对象的语言 安全性 跨平台性,其他常用的Web开发语言,Java VBScript JScript Perl,JavaScript可以在客户端和服务器端运行,编程区别： 客户端： . 服务器端：. 编译脚本区别：,JavaScript语言概述,JavaScript的脚本包括在HTML中，它成为HTML文档的一部分。可以直接将JavaScript脚本加入文档： JavaScript语言代码； JavaScript 语言代码; 说明： （1）通过标识.指明JavaScript脚本源代码将放入其间。 （2）通过属性Language =“Jav
3、aScript“说明标识中是使用的何种语言，这里是JavaScript语言, 表示在JavaScript中使用的语言。,演示,JavaScript语言基本数据结构,JavaScript脚本语言同其它语言一样，有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。,JavaScript语言基本数据结构,基本数据类型 在JavaScript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或括起来的字符或数值）、布尔型（使True或False表示）和空值。在JavaScript的基本类型中的数据可以是常量，也可以变量。一个数据的变量或常量不必首先作声明，在使用或赋值时确定其数
4、据的类型的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。,JavaScript语言基本数据结构,常量 整型常量 JavaScript的常量通常又称字面常量，它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。 实型常量 实型常量是由整数部分加小数部分表示，如12.32、193.98 。可以使用科学或标准方法表示：5E7、4e5等。 布尔值 布尔常量只有两种状态：True或False。,JavaScript语言基本数据结构,字符型常量 使用单引号（）或双引号（“）括起来的一个或几个字符。如 “This is a book of JavaScript “
5、、“3245“、“ewrt234234“ 等。 空值 JavaScript中有一个空值null,表示什么也没有。如试图引用没有定义的变量,则返回一个Null值。 特殊字符 同语言一样，JavaScript中同样以有些以反斜杠（）开头的不可显示的特殊字符。通常称为控制字符。,JavaScript语言基本数据结构,变量 变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。,JavaScript语言基本数据结构,表达式和运算符 在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又叫称一个叫表达式来完成，可以说它是变
6、量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。,运算符 1）算术运算符 双目运算符： +（加） 、-（减）、 *（乘）、 /（除）、 %（取模） 、|（按位或）、&(按位与)、（右移）、 （右移，零填充）。 单目运算符： -（取反）、（取补）、+（递加1）、-（递减1）。 （2）比较运算 , = （3）布尔逻辑运算符 在JavaScript中增加了几个布尔逻辑运算符: !（取反)、&=（与之后赋值）、 &（逻辑与）、 |=（或之后赋值）、 |（逻辑或）、 =（异或之后赋值）、 （逻辑异或）、 ?:（三目操作符）、|（或）、=(等于)、|=(
7、不等于)。,JavaScript语言基本数据结构,运算实例： 算术运算实例 比较运算实例 逻辑运算实例 字符串运算实例,JavaScript编程的流程控制 （函数、过程、条件语句、循环语句）,语句块 ( 顺序) Var astring=“这是一个语句块”； Var bstring=“这个语句块是由大括号包起来的” ,JavaScript编程的流程控制,使用对话框：警示对话框 确认对话框 提示对话框,JavaScript编程的流程控制,分支结构 分支结构包括if语句和switch语句 根据一定条件去执行一条语句或语句组。1 if 语句 一、ifelse 语句 形式: if(condition)
8、statement1； else statement2；,JavaScript编程的流程控制,switch 语句switch语句根据表达式的值，选择不同的分支执行。 switch() case 常数表达式1:语句1;break; case 常数表达式2:语句2; break; case 常数表达式n:语句n; break; default: 语句n+1; break; 例，常识问答，请选择“中国的首都在哪个城市? A.香港B.广州C.北京D.上海”。,JavaScript编程的流程控制,循环控制语句：For循环语句 基本格式 for（初始化；条件；增量） 语句集； 功能：实现条件循环，当条件成
9、立时，执行语句集，否则跳出循环体。 说明： 初始化参数告诉循环的开始位置，必须赋予变量的初值； 条件：是用于判别循环停止时的条件。若条件满足，则执行循环体，否则 跳出。 增量：主要定义循环控制变量在每次循环时按什么方式变化。 三个主要语句之间，必须使用逗号分隔。,JavaScript编程的流程控制,While语句 基本格式 while（条件） dowhile,JavaScript编程的流程控制,break和continue语句 使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。,JavaScript编程的流程控制,函数的使用 函数为
10、程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。 JavaScript函数定义 Function 函数名 （参数,变元） 函数体; Return 表达式; ,JavaScript编程的流程控制,事件驱动及事件处理 JavaScript是基于对象(object-based)的语言。这与Java不同，Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。它是在用形界面的环境下，使得一切输入变化简单化
11、。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）。,JavaScript编程的流程控制,事件处理程序 在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。格式如下： Function 事件处理名（参数表） 事件处理语句集； ,JavaScript编程的流程控制,事件驱动 JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主
12、要有以下几个事件： 单击事件onClick 当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生： button（按钮对象） checkbox（复选框）或（检查列表框） radio（单选钮） reset buttons（重要按钮） submit buttons（提交按钮）,JavaScript编程的流程控制,onChange改变事件 当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。 选中事件onSelect 当Text或Textarea对象中的文
13、字被加亮后，引发该事件。 获得焦点事件onFocus 失去焦点onBlur 载入文件onLoad 卸载文件onUnload,基于对象的JavaScript语言,对象的基础知识 JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。引用对象的途径 引用JavaScript内部对象； 由浏览器环境中提供； 创建新对象。,常用内部对象,在JavaScript中对于对象属性与方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或方法时不需要为它创建实例；而另一种对象则在引用它的对象或方法是必须为它创建一个实例，即该对象是动态对象。
14、,常用内部对象,串对象 string对象：内部静态性。 对象只有一个属性，即length string对象的方法共有19个 锚点anchor()：该方法创建如用Html文档中一样的anchor标记。使用anchor如用Html中(A Name=“”)一样。通过下列格式访: string.anchor(anchorName)。,常用内部对象,有关字符显示的控制方法 big字体显示, Italics()斜体字显示，bold()粗体字显示，blink()字符闪烁显示，small（）字符用小体字显示，fixed()固定高亮字显示、fontsize(size)控制字体大小等。字体颜色方法；fontcol
15、or(color) 字符串大小写转换 toLowerCase()小写转换，toUpperCase()大写转换。,常用内部对象,字符搜索：indexOfcharacter,fromIndex 从指定formIndtx位置开始搜索charactor第一次出现的位置。返回字串的一部分字串：substring(start,end) 从start开始到end的字符全部返回。,常用内部对象,算术函数的math 主要属性 math中提供了个属性，它们是数学中经常用到的常数、以为底的自然对数LN10、以为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。 主要方法
16、 绝对值：abs() 弦余弦值：sin(),cos() 反正弦反余弦 :asin(), acos() 正切反正切：tan(),atan() 四舍五入：round() 平方根：sqrt() 基于几方次的值：Pow(base,exponent),常用内部对象,日期及时间对象 功能：提供一个有关日期和时间的对象。 静动性：动态性，即必须使用New运算符创建一个实例。例: MyDate=New Date() Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。,常用内部对象,获取日期的时间方法 getYear(): 返回年数 getMonth():返回当月号数 getDate():
17、返回当日号数 getDay():返回星期几 getHours():返回小时数 getMintes(:返回分钟数 getSeconds():返回秒数 getTime() : 返回毫秒数,常用内部对象,设置日期和时间： setYear();设置年 setDate():设置当月号数 setMonth():设置当月份数 setHours():设置小时数 setMintes():设置分钟数 setSeconds():设置秒数 setTime ():设置毫秒数 . 数组对象,使用内部对象系统,浏览器对象层次及其主要作用 浏览器对象(Navigator) 提供有关浏览器的信息窗口对象(Windows) Wi
18、ndow对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。 位置对象(Location) Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。 历史对象(History) History对象提供了与历史清单有关的信息。文档对象(Document) document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。,使用内部对象系统,文档对象功能及其作用document中三个主要的对象 1）anchor锚对象： anchor对象指的是 标识在HTML源码中存在时产生的对象。它包含着文档中所有的an
19、chors信息。 2）链接links对象 link对象指的是用 标记的连接一个超文本或超媒体的元素作为一个特定的URL。 3）窗体（Form）对象 窗体对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。通过document. Forms数组来使得在同一个页面上可以有多个相同的窗体,使用forms数组要比使用窗体名字要方便得多。,使用内部对象系统,文档对象中的attribute属性 1）链接颜色：alinkcolor 这个元素主要用于，当选取一个链接时，链接对象本身的颜色就按alinkcolo r指定
20、改变。 2）链接颜色：linkcolor 当用户使用 Text string 链接后，Textstring的颜色就会按Linkcolor所指定的颜色更新。 3）浏览过后的颜色：VlinkColor 该属性表示的是已被浏览存储为已浏览过的链接颜色。 4）背景颜色：bgcolor 该元素包含文档背景的颜色。 5）前景颜色：Fgcolor 该元素包含HTML文档中文本的前景颜色。,使用内部对象系统,文档对象的基本元素 1）窗体属性： 窗体属性是与HTML文档中.相对应的一组对象在HTML文档所创建的窗体数，由length指定。通过document.forms.length反映该文档中所创建的窗体数目。 2）锚属性：anchors 该属性中，包含了HTML文档的所有 标记为Name=.的语句标识。所有“锚”的数目保存在document.anchors.length中。 3）链接属性：links 链接属性是指在文档中.的由Href=.指定的数目，其链接数目保存在document.links.length中。,窗口及输入输出,JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。,如何知道详细的信息！,
