HTML与JavaScript.ppt

HTML与JavaScript,目标,HTML基本知识 JavaScript基本知识 JavaScript对话框 JavaScript对象 JavaScript事件处理,HTML 简介,HTML（Hypertext Markup Language，超文本标记语言）是一种用来制作Web网页的简单标记语言。 Web浏览器能够自动解释超文本文件（.html或.htm）中标记的含义，并按照一定格式显示。,HTML 示例, 网页 第一个HTML文件！ ,超链接,超链接是超文本的基本结构，利用链接可以将不连续的两段文字或两个文件联系起来。 分为同一网页中的链接和不同网页中的链接两种。 超链接的基本格式 描述,同一网页内的链接,分两步完成： 用text设置超链接（即建立指向目标的链接），其中name为标记名，对同一个文件可不用url； 通过text标识目标（即在被指向目标的地方做标记）。单击网页中的text就可以跳转到标记名为name的部分。,字体标记,HTML中有许多用于字体的形状、大小、颜色等有关字符描述的标记。对字符大小的描述分为6级，从到 ，题号越小，字体越大。 可以使用对齐属性，表示为：align=#，其中的#可以选left、center或right。 Chapter 3 字体可采用标记，并且可以带color属性。颜色也可以用十六进制数表示。 ,网页标记 3-1,注释：，注释中的文本不在网页中显示。 段标记： ，表示新一段开始， 在应用中经常被省略。 换行标记： 预格式化文本标记：，浏览器不认识段中缩进部分和空白，需要使用该标记预格式化文本。,网页标记 3-2,水平线标记：，为了产生较好的视觉效果，可用该标记将文本分开。 文字对齐标记： 居中对齐： 左对齐： 右对齐：,网页标记 3-3,背景彩色或背景图案 Background：背景图案和图像文件名及其定位路径 Bgcolor：背景彩色 text：非可链接文字的颜色 link：可链接文字的颜色 alink：正被单击的可链接文字的颜色 vlink：已经访问（单击）过的可链接文字的颜色 #=rrggbb，颜色用16进制的红-绿-蓝（RGB）值来表示,多窗口页面标记, 多窗口页面 ,HTML表格 2-1,一个表格由开始，由结束。 定义表格的行，定义表格的表头项，定义表格的内容。,HTML表格 2-2, 表项 表项 ,HTML 表单,表单允许用户填写某些信息，填写完后单击“提交”按钮发送到服务器端让一个程序去处理。 HTML中的表单主要由以下几种标记组成： ：定义HTML表单 ：输入型表单 ：定义下拉菜单 ：定义下拉菜单的项目，仅用于标记 ：定义多行输入域, method用于设定表单的传输方式（post、get）。 action指定了服务器端处理表单的程序。 enctype用于以编码方式传输表单。,定义表单上输入信息的输入域，其格式为： name参数指定该输入域的名称。 type可以使用如下参数：text（文本）、password（口令）、checkbox（复选框）、radio（单选项）、submit（提交）和reset（清除）、 hidden（隐藏域） 。,格式如下： 标记的常用属性有：name（指定控件名）、size（菜单项显示的行数）、multiple（允许选择多项）。 标记的常用属性有：selected（指定初始状态的选项）、value（指定初值）。,JavaScript 简介,JavaScript是Web页面中的一种脚本编程语言，可用于Web系统的客户端和服务器端编程。 JavaScript的前身叫做LiveScript，是Netscape公司开发的脚本语言。 Sun公司推出Java语言后， Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并将其更名为JavaScript。,JavaScript 特点,脚本编程语言：与HTML代码结合在一起，通常由浏览器解释执行。 基于对象的语言： JavaScript的许多功能来自于脚本环境中对象的方法与脚本的相互作用。 安全性：在HTML页面中JavaScript不能访问本地硬盘，也不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。 跨平台：在HTML页面中JavaScript的执行环境依赖于浏览器本身，只要安装了支持JavaScript的浏览器， JavaScript程序就可以执行。,JavaScript 应用,客户端应用 将客户端的JavaScript脚本程序嵌入或链接到HTML文件，当用户通过浏览器请求这样的HTML页面时， JavaScript的脚本程序与HTML一起被下载到客户端，由客户端的浏览器读取HTML文件，若包含JavaScript解释执行。 服务器端应用 JavaScript可以用来开发服务器端的Web应用程序。当用户通过浏览器请求URL时，服务器执行JavaScript脚本程序，将生成的数据以HTML格式返回浏览器。,JavaScript 嵌入 2-1,在HTML中嵌入JavaScript 在HTML中通过 引入JavaScript代码。当浏览器读取到标记时，解释执行其中的脚本。在使用标记时，必须通过Language属性指定块中包含的是何种类型的脚本。,JavaScript 嵌入 2-2, 嵌入JavaScript代码 /脚本标记 document.write(“Hello World!“) /在页面上显示一行文字 ,JavaScript 编程基础,常量：数值型(整数、浮点数)、字符串和布尔型 变量 使用关键字“var”声明变量。如 var name ; 运算符 算术运算符：+、-、*、/、%（取余数）、+、- 关系运算符：、=、= =、!= 逻辑运算符：&、|、! 字符串运算符：+（连接） 赋值运算符：= 条件运算符：condition?true_result:false_ result,JavaScript 对话框 2-1,alert:：警告对话框 confirm：确认对话框，返回一个bool值 prompt：输入对话框,JavaScript 对话框 2-2,确认对话框 var learned; var show_text; learned=confirm(“学习过java?“); show_text = learned?“是“:“否“; document.write(show_text); ,JavaScript 流程控制语句,分支结构：包括if语句和switch语句。 循环结构：包括for语句、while语句和do while语句。,JavaScript 函数,预定义函数： eval()：计算字符串表达式的值 parseFloat()：将字符串转换为浮点数 parseInt()：将字符串转换为整数,JavaScript 对象,可以使用三种对象，即内置对象、自定义对象和浏览器对象。 在JavaScript中，可通过new运算符来创建对象，即变量名= new 对象名() 。 将新创建的对象赋予一个变量后，就可以通过这个变量访问对象的属性和方法。,JavaScript 内置对象 2-1,Date对象：该对象主要提供获取和设置日期和时间的方法。例如，getFullYear() 、getMonth() 、getDate () 、getDay () 。 String对象：该对象提供了对字符串进行处理的属性和方法。例如：length()、toLowerCase()、toUpperCase()、substr()。 Array对象：在JavaScript中，使用内置对象Array创建数组对象。格式为： var arrayname=new Array(arraysize),JavaScript 内置对象 2-2, 显示星期几 var week,today,week_i; week=new Array(“星期日“,“星期一“,“星期二“,“星期三“,“星期四“,“星期五“,“星期六“); today=new Date(); week_i=today.getDay(); document.write(today.toLocaleString()+weekweek_i); ,动态网页编程技术,在HTML文档中使用脚本语言，通过文档对象模型和事件驱动（Event-Driven）技术，控制装载到浏览器中的页面及其元素。,文档对象模型,文档对象模型为层次结构，所有下层对象都是其上层对象的子对象。 子对象其实就是父对象的属性，其引用方式与对象属性的引用相同。 window对象是默认的最上层对象，因此引用其对象时可以不使用window。 当引用较低层次的对象时，要根据对象的包含关系，使用成员引用操作符 . 一层一层地引用对象。例如，引用文档中表单（form1）的文本输入框name，使用。,事件驱动,用户操作事件（操作鼠标或按键的动作）或系统操作事件（如载入页面等）引起一连串程序动作的执行方式，称为事件驱动。 为了响应某个事件而进行的处理过程，称为事件处理。 对事件进行处理的过程或函数，称为事件处理程序。,事件处理 2-1,在JavaScript中，使用事件有2种方法，即使用HTML标记或使用JavaScript语句。 许多HTML标记允许加上以事件名为名的属性，如在按钮标记中加上onclick事件属性，并为该属性给出值。例如，设计一个表单，放入两个按钮，单击它们时将显示内容。 使用事件的另一种方法是使用JavaScript语句：对象.事件=函数名。,事件处理 2-2,处理事件-HTML标记方式 function alts() alert(“你要小心了!“); ,验证表单,当用户单击了表单中的提交按钮之后，用户在表单中填写或选择的内容将被传送到服务器端特定的程序（由action属性指定），由该程序进行具体的处理。 表单正式提交到服务器之前，需要使onSubmit的值为true，因此可以通过为onSubmit事件指定的处理函数来进行表单数据的验证。,定时器 2-1, function display() var now=new Date();/获取当前时间的日期对象 var hours=now.getHours(); var minutes=now.getM