HTML+CSS+JS.ppt

1、目录,1.HTML/CSS/JavaScript先睹为快 2.HTML 3.CSS 4.JavaScript,1.1 HTML代码, 未使用css，JavaScript的html网页 未使用css，JavaScript的html网页 这是一个未使用css，JavaScript的html网页 使用记事本即可编写HTML代码，扩展名是html或htm。 使用浏览器就可以查看其效果。,1.2 CSS代码, 使用了css的html网页 h2 font-size:50 pfont-size:20;font-style:italic 使用了css的html网页 这是一个使用了css的html网页 ,1.3

2、 JavaScript代码, 使用了css和JavaScript的html网页 h2 font-size:50 pfont-size:20;font-style:italic alert(这是JavaScript起的作用); 使用了css和JavaScript的html网页 这是一个使用了css和JavaScript的html网页 ,1.4 HTML、CSS、JavaScript的角色,HTML：超文本标记语言。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素，其基本架构都是HTML. CSS：层叠样式表。是目前唯一的网页排版样式标准，弥补了HTML在网页格式化方面的不

3、足，帮助用户对页面的布局加以更多的控制。 JavaScript用于开发Internet客户端应用程序，实现了一种实时、动态、交互的页面功能。它的出现使静态的HTML页面逐渐本客户端可做出响应的动态页面所取代。 可以在HTML语言中直接编写CSS和JavaScript代码，也可以独立编写。扩展名分别是.css和.js,2 HTML,1:HTML简介 2:基本标记 3:列表list 4:表格table 5:表单form 6:框架frame 7:层div,2.1.1 HTML概念,HTML Hyper Text Markup Language 超文本标识语言 是一种用来制作超文本文档的简单标记语言。

4、 用HTML编写的超文本文档称为HTML文档 HTML文档：*.htm或*.html 文件名区分大小写 浏览HTML文件的工具:浏览器 例：Netscape Navigator ,Microsoft IE,Mazilla FireFox,2.1.2 HTML文档的编写方法,手工直接编写 记事本等，存成.htm .html格式，要求用户必须掌握HTML 使用可视化HTML编 辑 器 Frontpage、Dreamweaver等,容易产生废码,2.1.3 HTML 文档结构, my first page This is my first homepage! 这是我的第一张网页！ ,2.1.3 HT

5、ML 文档结构,标记(签)是HTML语言的基本部分，比如、。大多数标记总是成对出现，每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。 属性：HTML标记有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。 my first homepage 注意： 标记不区分大小写。例都可以 标记中不要有空格，否则浏览器无法识别。例错误 任何空格和回车在代码中无效。插入空格和回车分别用 和 属性的值可以用双引号引起来，也可以不引，最好引起来 各属性之间无先后次序，属性也可省略（即取默认值）,2.1.3 HTML 文档结构-head(title),标记出现在文档的开头部分。

6、 与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 1: 标记定义HTML文档的标题。 与之间的内容将显示在浏览器窗口的标题栏。,2.1.3 HTML 文档结构-head(meta),2:标记 标记定义网页的一些相关信息，例文件的关键字，作者，网页过期时间等，这些信息不会在浏览器的文档窗口显示 用来标记搜索引擎在搜索你的页面时所取出的关键词。 用来标记文档的作者。 用来标记你的页面的解码方式。 用来自动刷新网页,2.1.3 HTML 文档结构-(head)meta,编写一个网页，要求3秒钟后自动跳转到北软教育首页。 my first page 三秒钟后本网页将自动跳转到

7、北软教育首页 ,2.1.3 HTML 文档结构-body,表明是HTML文档内容主体部分。在与之间，通常都会有很多其它标记；这些标记和标记属性构成HTML文档的主体部分。 自身属性主要有： 1)bgcolor bgcolor属性标志HTML文档的背景颜色。如：bgcolor=#CCFFCC。 2)background background属性标志HTML文档的背景图片。可以使用的图片格式为gif,jpg 如：background=“images/bg.gif。 3)text text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。 text定义的颜色将应用于整篇文档。,2

8、.1.3 HTML 文档结构-body,2.2 基本 HTML 标记,1.标题标记 2.文字标记 3.段落级标记 4.字符级标记 5.水平标尺标记 6.HTML注释 6.超级链接 7.图像标记 8.移动的文字,2.2.1 标题标记,可显示六种大小的标题，即到，为最大，为最小 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 ,2.2.2 文字标记,文字属性标记 1.文字颜色 . #=RRGGBB 16 进制数码 2.文字字体 . #=客户端可获得的字体 3.文字大小 . #=1, 2, 3, 4, 5, 6, 7等,2.2.3.段落

9、级标记,段落标记(paragraph) 换行符标记 预格式化标记： HTML的段落与段落之间有一定的空隔。 如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。 利用标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落。即浏览器会以文本输入格式显示 用三种标记分别实现登鹳雀楼的显示,2.2.4 字符级标记,常用字符级标记 倾斜文本 粗体文本 下划线文本 删除线文本 强调文本 居中显示文本 空格标记,2.2.5 水平线标记,水平线 ：设定线宽 ：设定线长 ：设定对齐方式 #=left, right ：设定线的颜色 ,2.2.6 HTML注释,HTML文档

10、可以插入注释。不但便于对程序排错，也使其他人更易读懂自己的代码 HTML注释的格式为：源码依然存在，不会被浏览器所解释 注释语句的特点是仅用于程序中某一句或一段语句的作用说明，浏览器在执行过程中将忽略掉注释语句的内容，对其视而不见。,2.2.7 超级链接,超级链接是用锚元素定义的 在元素下，有元素属性href,href的属性值为一个URL地址 如：指向学院的超级链接 如：普通超级链接 如：普通超级链接 开一个新的(浏览器)窗口 (Target Window) . ,2.2.7 超级链接,超级链接的路径 绝对路径：指文件的完整路径，包括协议，主机地址等，一般用于网站的外部链接。 http:/12

11、:8080/digitalhome/a.jpg 相对路径：指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，一般用于网站的内部链接。,2.2.8 图像标记, 的基本属性是src属性，src的属性值为所引用的图片的URL地址。 src属性是必须的。src的URL可以是绝对地址，也可以是相对地址 width指定宽度，height指定高度。它们的属性值可以是象素，也可以是%。 定义图片替代文本的方法是： 替代文本有两个作用： 提示：若图片下载成功，把鼠标放在图片上，会出现提示文本。 替代：若图片下载不成功，在图片位置出现替代文本。 图片的对齐方式 #=left,right,

12、top,middle,bottom,2.2.8 图像标记,HTML 文档中的图片 GIF（Graphics Interchange Format ）图像 (.GIF) 支持无损压缩 只支持256色 JPEG（Joint Photographic Experts Group）图像 (.JPG) 有损压缩 ，但这个损失是剔除一些视觉上不易察觉的部分。 通常用来保存超过256色的图片文件 PNG（Portable Network Graphics ） 新兴的网络图片格式，结合了gif和jpeg的优点。 可以将图片文件以最小的方式压缩而不造成图片失真 支持48bit的色彩。,2.2.8 图像标记,图像

13、的超级链接 图像的超级链接是指整个图像的超级链接，当点击图像的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是： 图像的热区链接 热区就是在图片中特意划分出一个热点区域。当点击图象的热区时，才会打开这个超级链接。 需要使用map标记指定热区。,2.2.9 移动的文字,基本语法 . 文字移动属性 (1)方向 ：direction=# #=left, right,up,down (2)方式： behavior=# #=scroll(循环), slide(只走一次), alternate(来回走) (3)循环: loop=# #=次数；若未指定则循环不止(infinite) (4)速度:

14、scrollamount=# (5)延时: scrolldelay=#,2.3.1 无序列表,无序列表由和元素定义的: sports food drink friends 无序列表的默认符号是圆点。 元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle （圆圈）、square（方块） 支持嵌套定义,2.3.2 有序列表,有序列表由和定义: sports drink friends 元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C作为列表的编号 元素还可以定义列表的起始编号，

15、如我们希望列表的第一个编号为5，而不是1，则需要定义元素的start属性 支持嵌套定义,2.4.1 表格的基本结构,定义表格 定义表头 定义表行 定义单元格 . 定义表行 定义单元格 ,2.4.1 表格的基本结构, 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。 元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。 元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。 元素：定义表格的表头行，一个表格只能有一个表头行或者没有，

16、所以对于一个表格来说是唯一的或没有。,2.4.2 表格的属性,表格的属性 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。 height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性：表格边线粗细 bgcolor属性：指定表格或某一个单元格的背景颜色。 background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址 align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式(left,center,right)。,2.4.3 单元格的属性,单元格属性 valign属性：指定某一个单元格里的内容（文本、

17、图片等）的垂直对齐方式。垂直对齐方式的属性值包括： top：顶端对齐； middle：居中对齐； bottom：底端对齐; baseline：相对于基线对齐; align属性：指定某一个单元格里的内容（文本、图片等）的水平对齐方式（left,center,right） colspan：属性值表示当前单元格跨越几列 rowspan：属性值表示当前单元格跨越几行,2.4.4 行的属性,行属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包 top：顶端对齐； middle：居中对齐；bottom：底端对齐。 baseline：相对于基线对齐。

18、2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的水平对齐方式(left,center,right) 3、height属性：指定表格中某一行的高度。单位可以是%或者象素,2.4.5 表格的嵌套,在 之间插入表格，实现表格嵌套 导航列表 计算机 政治 军事 法律 正文内容 ,2.4.5 表格的作用,表格是用于在 HTML 页面上设计数据和图像布局的常用工具，可使用表格来组织数据，控制页面布局 制作网页时，为了以一定的形式将网页中的信息组织起来，同时使网页便于阅读和页面美观，需要对页面的版式进行设计或进行页面 布局。而表格能将网页分成多个任意的矩形区域，表格是网页制作中是常用的一

19、种简单布局工具。 表格的作用一般只是控制文本和图像的显示，而不显示表格的边框,2.4.6 表格举例, 第一季度 第二季度 一月 二月 三月 四月 五月 六月 1000 550 240 1500 2765 1240 , 3000 2430 2500 1250 900 3400 ,2.5.1 表单form,HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。 表单是网页上的一个特定区域。这个区域是由一对元素定义的。,2.5.2 表

20、单举例,设计一个注册表单，输入姓名，年龄，密码，密码确认，电子邮件，性别，爱好，身份，个人简历，单击提交按钮提交，单击重置按钮重置。 姓名，年龄，电子邮件：text 密码，密码确认：password 性别：radio 爱好：checkbox 身份：select 个人简历：textarea 提交按钮：submit 重置按钮：reset,2.5.2 表单举例,2.5.2 表单举例, 姓名 密码 密码确认 性别 男 女 年龄 电子邮件 爱好体育 音乐 美术 身份 学生 教师 解放军 个人经历请输入个人简历 ,2.5.2 表单举例,2.5.2 表单举例, 姓名 密码 密码确认 性别 男 女 年龄 ,2

21、.5.2 表单举例, 电子邮件 爱好 体育 音乐 美术 身份 学生 教师 解放军 个人经历 请输入个人简历 ,2.5.3 表单基本语法,1.表单的基本语法: . action属性：用来定义表单处理程序（一个ASP、JSP等程序）的位置(相对地址或绝对地址)。 method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。 GET有数据量限制，POST无以上限制,以文件形式传输,2.5.3 表单基本语法,2.文本框的基本语法: ? 文本框的名字 * 默认值 * 长度 ? 最大输入字符数 3.密码框的基本语法：数据以圆点形式显示，提高密码安全性 ,2.5.3 表单基本语法,

22、3.复选框的基本语法: 在一个表单里的所有多选框可以有一个或多个被选中。 /默认选中 4.单选框的基本语法: 一个表单里的所有变量名相同的单选框只能够有一个被选中。 / 默认选中 各个选项的name必须一样才能达到预期效果 5.标准按钮的基本语法: ,2.5.3 表单基本语法,6.提交按钮和重置按钮的基本语法: 7.图象域的基本语法:：相当于漂亮的submit按钮。 8. 隐藏域的基本语法 隐藏域在网页中对用户是不可见的，用户单击提交按钮提交表单时，隐藏域的信息也被一起发送到服务器。 ,2.5.3 表单基本语法,9.文本区域的基本语法: . 10.下拉菜单的基本语法 音乐 美术 体育 ,2.5

23、.3 表单基本语法,2.6.1 框架举例, ,2.6.1 框架举例,框架的嵌套 ,2.6.2 框架简介,框架是一种在一个网页中显示多个网页的技术，通过超级链接可以为框架之间建立内容之间的联系，从而实现页面导航。 在网页文件中，框架常用于网页的布局。 框架的基本结构分为框架集frameset和框架frame两个部分。 使用框架集的页面的标记将被标记替代，然后在利用标记去定义框架结构。 每个框架frame由一个单独的 HTML 页面组成。 框架支持嵌套。当一个框架集中既有左右分割，又有上下分割是，就要用到框架嵌套。,2.6.2 framset基本语法, 框架由一对定义 有两个属性：rows和col

24、s rows定义上下分割的框架的大小； cols定义左右分割的框架的大小； 在定义大小时，rows和cols可使用相对大小或以百分比为单位,2.6.2 frame基本语法,的属性 src：在本框架里显示的网页的URL。 frameborder：是否显示边框 name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用。 noresize：框架在浏览器里不可以被调整大小。 scrolling：是否显示滚动条。yes, no, auto,2.6.2 frame基本语法, left.html: 快乐的生活 在当前框架中打开超链接页面 默认就是在当前框架页中打开,也可以采用 target=

25、“_self” 在指定框架中打开超级链接页面 target=“name” 新开窗口打开链接页面 target=“_blank” 跳出整个框架集 target=“_parent”,2.7.1 图层,图层也是网页制作中用于定位元素或布局的一种技术，图层比表格的布局更加灵活，它能够将层中的内容摆放到浏览器的任意位置，放入到层中的HTML元素包括：文字、图像、动画甚至是图层。 一个网页中可以使用多个层，层与层之间可以重叠，在网页制作中，使用层可以将网页中的任何元素布局到网页的任意位置，同时可以以任何方式重叠。 可以想象在word文档中不同图片之间的上下左右位置和前后重叠关系。 图层也可以实现嵌套的功能

26、。嵌套图层最主要的特点就是可以保证子层永远位于父层之上。,2.7.2 图层举例, 将元素分组 第一层 这是第一部分内的一个段落元素 第一层的内容。 该部分之外 第二部分 这是第二部分内的一个段 第一层的内容。 ,2.7.3 图层属性讲解,基本语法 /设置图层背景色 . /图层的具体内容 ,3.1 CSS的作用,CSS是Cascading Style Sheets(层叠样式表)的简称.,是一系列格式规则，它们控制网页内容的外观。css简单来说就是用来美化网页用的。 使用CSS样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。 即使不改动HTML，只是通过添加不同的C

27、SS规则，就可以得到各种不同样式的网页。 可以通过简单的更改CSS文件,改变网页的整体表现形式,从而减少我们的工作量,所以她是每一个网页设计人员的必修课. CSS可以嵌入到html文档中，也可以单独文件形式存在，扩展名是.css,3.1 CSS的作用,当样式定义在外部文件中时，一个样式表可以用于多个页面，甚至整个工作点，因此具有更好的易用性和扩展性。 总的来说，CSS可以完成下列工作： （1）弥补HTML对网页格式化功能的不足，如段落间距、行距等。 （2）设置字体变化和大小。 （3）设置页面格式的动态更新。 （4）进行排版定位。 CSS的特点 （1）控制页面中的每一个元素（精确定位）。 （2）

28、对HTML语言处理样式的最好补充。 （3）把内容和格式处理相分离，减少工作量。,3.2 样式表规则,CSS的样式规则 css样式规则由两部分组成：选择器和声明。 选择器是样式名称（如TR或P）。 声明是用于定义样式元素。 pfont-style:italic; font-weight:bold; color:limegreen .water color:blue ,用法： RuleSelector property:value;property: value; . ,规则选择器,声明,属性,属性值,3.3 样式表中的选择器,1：简单选择器(仅描述元素，而不考虑该元素在文档结构中的位置) 1.1

29、 HTML选择器-选择器是HTML标记的名称 1.2 类选择器使用HTML元素的CLASS属性 1.3 ID选择器使用HTML元素的ID属性 2：上下文选择器(引用元素的上下文),3.3 样式表中的选择器,1.1：HTML选择器示例 h1, h2, h3, h4, h5, h6 color: green Pfont-style:italic; font-weight:bold; color:red 测试HTML选择器 这些选择器使用HTML元素的名称唯一区别是删除了尖括号。 ,3.3 样式表中的选择器,1.2：类选择器示例 .water color:blue; text-align:right

30、 p.danger color:red; text-align:center 测试CSS 测试水 测试危险 无样式 ,3.3 样式表中的选择器,1.3：ID选择器示例 ID选择器 #control color:red 这是火焰的颜色 本段没有应用样式 ,3.3 样式表中的选择器,所有的HTML标签都可以作为类选择器。 省略HTML标记的类选择器是最常用的CSS方法，使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式 HTML页面中ID参数指定了某个单一元素，ID选择器用来对这个单一元素定义单独的样式。由于ID选择器局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。 ID

31、是先给某个元素定义标签，再给它定义样式；class是先定义好一种样式，再套给多个元素。 用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id控制这个元素时(如div)，那就会出现错误,3.3 样式表中的选择器,2：上下文选择器示例 acolor:red;font-size:20 table acolor:green;font-size:25 table a:hovercolor:blue 北软教育 北软教育 北软教育 ,3.3 样式表中的选择器,2：上下文选择器示例 上下文选择器 BODYcolor:blue;background:lavender;font-f

32、amily:Arial; UL color:red ul acolor:green; font-size:15 芒果桔子苹果 芒果桔子苹果 ,3.4 在HTML中引用样式表,1：使用Style元素 2：使用Style属性 3：使用Link元素,3.4 在HTML中引用样式表,1：使用Style元素 STYLE元素应插入文档的元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响, H1color:maroon; Pcolor:hotpink; font-family:Arial; ,3.4 在HTML中引用样式表,2：使用Style属性 sty

33、le属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。, 本段应用了内嵌样式 本段以默认样式显示。 您能发现本行中的 不同之处吗？ ,3.4 在HTML中引用样式表,3：使用Link元素链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内, 设置属性 。 ,3.5 样式表属性,3.5 样式表属性,JavaScript,JavaScript概述 JavaScript基本语法 JavaScript事件 JavaScript对象,4.1.1 JavaScri

34、pt先睹为快,举例 在HTML页面中显示“你好,欢迎学习JavaScript！” 创建交互式的网页 允许用户以适当的格式输入数据； 使用弹出窗口为用户显示信息等 控制浏览器的行为 设置页面的背景颜色； 在状态栏显示信息等,4.1.1 JavaScript先睹为快,用HTML代码实现在页面中显示“你好,欢迎你学习JavaScript!” 1、在HMTL中嵌入JavaScript document.write(你好，欢迎你学习JavaScript！) 2、链接JavaScript文件 链接JavaScript代码 test.js文件要显示的内容如下： document.write(你好，欢迎你学习

35、JavaScript！),4.1.1 JavaScript先睹为快, function checkPw() fm = document.form1; if (fm.pw2.value != fm.pw1.value) alert(密码不符，请重新输入); document.form1.pw2.select(); else alert(谢谢你，+.value); 姓名： 输入密码： 重新输入： ,4.1.1 JavaScript先睹为快, document.bgColor=green; document.fgColor=white function mOver(object,msg

36、) status = msg; object.color = red; object.face = 华文楷体; function mOut(object) status = 谢谢指向; object.color = blue; object.face = 黑体; Javapro技术学习网 ,4.1.2 什么是JavaScript,JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。 JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)并具有安全性能的脚本语言。 使用它的目的是与HTML

37、超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中连接多个对象，与Web客户交互作用,从而可以开发客户端的应用程序等。 它是通过嵌入或调入到标准的HTML语言中实现的。它的出现弥补了HTML语言只能制作静态网页的缺陷，它是Java与HTML折衷的选择,4.1.3 JavaScript 的基本特点,1、脚本编写语言 脚本语言是一种简单的程序，这些程序是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如C、C+、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执

38、行。 脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。,4.1.3 JavaScript 的基本特点,2、基于对象的语言 面向对象有三大特点（封装，继承，多态）却一不可 通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”。 现在的很多流行技术都是基于对象的，它们使用一些封装好的对象，调用对象的方法，设置对象的属性。但是它们无法让程序员派生新对象类型。他们只能使用现有对象的方法和属性。,4.1.3 JavaScript 的基本特点,3、简

39、单性 它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。 它的变量类型是采用弱类型，并未使用严格的数据类型。 var a,b,c; a=123; b=“abc”; a=b;,4.1.3 JavaScript 的基本特点,4、安全性 JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，而只能通过浏览器实现信息浏览或动态交互 5、跨平台性 JavaScript依赖于浏览器本身，与操作平台无关，只要计算机上安装了支持JavaScript 的浏览器（装有JavaScript解释器），JavaScript 程

40、序就可以正确执行。,4.1.3 JavaScript 的基本特点,6、动态性（交互性） JavaScript可以直接对客户输入在客户端做出响应，实现人机交互，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。 事件驱动：在网页中执行了某种操作的动作，被称为“事件”(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。,4.1.3 JavaScript 的基本特点,JavaScript的局限性 各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScr

41、ipt脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。 当把JavaScript的一个设计目标设定为“Web安全性”时，就需要牺牲JavaScript的一些功能。这时，纯粹的JavaScript将不能打开、读写和保存用户计算机上的文件。 它有权访问的唯一信息就是它所嵌入的那个Web主页中的信息，简言之，JavaScript将只存在于它自己的小小世界-Web网页里。,4.1.4 JavaScript的作用,交互式操作 表单验证 网页特效 Web游戏 服务器脚本开发等,4.1.5 其他脚本语言,JScript :Microsoft 公司在Netscape 公司发布的JavaScript的基

42、础上，也开发了自己的JavaScript规范，叫JScript ECMAscript:国际上通用的标准化版本的JavaScript，是未来JavaScript的发展方向 VBScript：Microsoft开发的VB家族的成员，与JavaScript运行原理相同。但是，目前只有IE浏览器支持VBScript 注意：JavaScript也有服务器端和客户端两种形式，客户端JavaScript就是指把JavaScript解释器嵌入到web浏览器中，这是迄今为止最为普通的JavaScript，一般提到的JavaScript都是指客户端JavaScript,4.1.6 JavaScript 和Java

43、的区别,Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发； Java的前身是Oak语言。 JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；,4.1.6 JavaScript 和Java的区别,JavaScript是脚本语言，是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。不支持继承和多态。 Java是面向对

44、象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序也必须设计对象。支持封装、继承和多态。,4.1.6 JavaScript 和Java的区别,JavaScript与Java在浏览器中执行的方式不一样。 JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端，即JavaScript语句本身随Web页面一起下载下来，由浏览器解释执行。 Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上须具有相应平台上的解释器，传到客户端的是编译后的字节码。,4.1.6 JavaScript 和Java的区别,两种语言所

45、采取的变量是不一样的。 Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;String s=“abcd”; JavaScript中是弱类型变量。统一采用var声明，可赋各种数据类型值。 var a,b,c; a=123; b=“abc”; a=b;,4.1.6 JavaScript 和Java的区别,Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。在HTML文档中，Java使用.来标识。 JavaScript的代码是一种文本字符格式，可以直接嵌入或间接调入到HTML文档中

46、，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。在HTML文档中，JavaScript使用.来标识,4.1.7 在网页中加入JavaScript,在HTML中加入JavaScript代码，必须将JavaScript代码放在与标签之间。 / JavaScript语言代码；JavaScript 语言代码; . JavaScript中的注释语句两种：单行注释/.与多行注释/*/。 可以利用HTML注释语句“”标记JavaScript代码，让那些老浏览器不执行这些JavaScript代码,4.1.7 在网页中加入JavaScript,一个HTML文档中可以出现多个标签。 JavaScrip

47、t代码的出现次序就是JavaScript的执行次序。 标签可出现在HTML文档的任何位置，但一般放在内部，可以早于部分执行 JavaScript除了可以直接嵌入HTML文件中，也可以独立存在与HTML文件之外。可以通过设置标签中src属性来指定外部JavaScript文件的地址。,4.1.8 JavaScript的执行方式,1 直接执行 在与标签中的JavaScript代码，只要不是放置在函数中的，都是属于直接执行的JavaScript代码。 2 与事件结合调用 JavaScript可以支持很多事件，比如说单击鼠标左键、按下键盘、移动鼠标等等。与事件结合，可以调用执行JavaScript的函数

48、。,4.2.1 数据类型,数值型：整数和浮点数统称为数值。例如85或3.1415926等。 字符串型：由0个,1个或多个字符组成的序列。在JavaScript中，用双引号或单引号括起来表示，如“您好”、学习JavaScript 等。 逻辑（布尔）型：用true或false来表示。 空（null）值：表示没有值，用于定义空的或不存在的引用。要注意，空值不等同于空字符串或0。 未定义（undefined）值：它也是一个保留字。在两种情况下可能得到一个未定义的值，一种是根本不存在的对象，另一种就是虽然已经声明，但却没有赋值。,4.2.1 数据类型,null是一个特殊的数据类型，其所代表的意思为“空”

49、。需要注意，这个“空”并不代表是0或空字符串。数字0代表的是数字，是数字型的数据；空字符串代表的是长度为0的字符串，是字符串类型的数据。而null代表没有值，不是一个有效的数字、字符串，也不是数组、对象和函数，什么数据类型都不是。 undefined也是一个特殊的数据类型，只有定义了一个变量但没有为该变量赋值、使用了一个并未定义的变量、或者是使用了一个不存的对象的属性时，JavaScript才会返回undefined。 除了以上五种基本的数据类型之外，JavaScript还支持复合数据类型，复合数据类型包括对象和数组两种。,4.2.2 变量,JavaScript中的变量是没有类型或者说是弱类型

50、的，这就意味着在JavaScript中的变量可以是任何一种数据类型。 1变量定义 在JavaScript声明一个变量时，可以使用以下方式实现： var up,down,left,right; /大小写敏感 也可以直接给它赋值，如下： x=3; 2变量的作用范围 当在一个函数之外定义一个变量，那这个变量就叫做全局变量。全局变量可用于当前所有的文档。 在函数内部定义的变量则叫做局部变量，它只作用于函数内部。,4.2.2 变量,使用变量注意事项： 重复定义变量：后者覆盖前者 变量必须要先声明后使用：否则出错。 给未声明的变量赋值：可以

51、引用未赋值的变量：undefined var x; /声明一个为赋值的变量，它的值是undefined。 alert(i) ; /使用未声明的变量将引发错误。 d=123; /给未声明的变量赋值，将创建该变量。,4.2.3 常量,1整型常量 整型常量可以使用十六进制、八进制和十进制表示其值。 2浮点数常量 有小数和指数两种表示方式，如3.1415926、-3.1E12、1e12和2E-12。 3字符串常量 字符串是由单引号（）或双引号（“）括起来的字符序 列。其中字符序列的个数可以是零个或多个。 单引号所括起 来的字符序列里可以包括双引号，而双引号所括起来的字符序列里也可以包含单引号。,4.2

52、.3 常量,4布尔常量 布尔类型只有两种值：true和false。 5数组常量 数组常量是零或更多表达式的列表，它包含在一对方括号内。使用数组常量来创建一个数组时，它的元素和长度由所指定的值进行初始化。例如下面常量有3个元素，其长度为3。 apple=fruit,China,vitamin 不必在数组常量中指定所有的元素。如果在一行中输入两个逗号，它会自动为没有指定的元素留出空间，如下例所示： God=Belial,Angel“ 该数组包含两个元素值和一个空元素，要注意的是，如果把逗号放到数组的最后，那它将会被忽略不计。,4.2.4 运算符,算术运算符 赋值运算符 关系运算符 逻辑运算符 位运

53、算符 条件运算符 其他运算符,4.2.4 运算符, var x = 11; var y = 5; with (document) write(x = 11, y = 5); write(x + y 是 , x + y); write(x - y 是 , x - y); write(x * y 是 , x * y); write(x / y 是 , x / y); write(x % y 是 , x % y); write(+ x 是 , + x); write(- y 是 , - y); ,4.2.4 运算符, var x = 5; /x 是数值5 var y = 5; /y 是字符串5 va

54、r z = 6; /x 是数值6 with (document) write(x = 5, y = 5, z = 6); write(x = y 吗？, x = y); write(x = y 吗？, x = y); write(x != y 吗？, x != y); write(x != y 吗？, x != y); write(x y ,4.2.4 运算符, var t = true; var f = false; with(document) write(true ,4.2.5 控制结构,if表达式 Switch while循环 do-while循环 for循环 break contin

55、ue,4.2.6 函数function,JavaScript函数分为系统函数和自定义函数 自定义函数定义方法 function 函数名(参数1,参数2) return 返回值; 无论是否有返回值，都无需指定返回值类型。 JavaScript中可通过arguments .Length来检查参数的个数 在JavaScript中对象事件的处理通常由函数(function)担任。,4.2.6 函数function, function checkPassword(testObject) if (testObject.value.length 请输入密码： ,4.2.6 函数function, funct

56、ion check() if(document.forms0.elements0.value.length ,4.2.6 函数function,系统函数 eval()函数的主要作用是将字符串表达式转换成数字。 parseInt()函数是把字符串值转换成数字。 parseFloat()函数是把字符串值转换成浮点数。 在JavaScript中，如果对非数字型变量进行数值运算，如两个字符串相除，将会返回NaN。NaN所代表的是“Not a Number”的意思。在JavaScript中在进行数值运算时，可以先使用isNaN()函数来判断变量是否为数字型变量。如果该参数返回true，说明该变量为 非数

57、字型变量，否则说明该变量为数字型变量。,4.2.6 函数function, with (document) write(eval(12.34*10)是 , eval(12.34*10); write(eval(12*(3+4)是 , eval(12*(3+4); write( eval(12.34abc1.2), eval(12.34abc1.2); write( ); write(parseInt(0 x11)是 , parseInt(0 x11); write(parseInt(1234)是 ,parseInt(1234); write(parseInt(12abc)是 , parseIn

58、t(12abc); write(parseInt(12.34*10)是 , parseInt(12.34*10); write(parseInt(abc123)是 , parseInt(abc123); write( ); write(parseFloat(12.34*1.2)是, parseFloat(12.34*1.2); write(parseFloat(12.34e10)是, parseFloat(12.34e10); write(parseFloat(12abc)是, parseFloat(12abc); write(parseFloat(2.1e4abc)是 , parseFloat(2.1e4abc); write(parseFloat(xyz123)是, parseFloat(xyz); ,4.2.6 函数function, function add() var sc1=document.fm.chj1.value; var sc2=document.fm.chj2.value; if(s