网页设计与制作.ppt
,JavaScript 基础,JavaScript内容介绍,客户端和服务器端脚本语言JavaScript概述基本语法流程控制函数和事件内置对象文档对象模型,网页的脚本语言,客户端的脚本语言在浏览器上运行的Javascript服务器端的脚本语言在服务器上运行后把结果发送到客户端Jsp,asp,php等等,JavaScript概述,JavaScript是客户端脚本语言,是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言。JavaScript认为文档和显示文档的浏览器都是由不同的对象组成的集合。这些对象具有一定的属性，你可以对这些属性进行修改或计算。JavaScript的基本特点：脚本语言基于对象简单性动态性跨平台性,JavaScript与Java的区别,JavaScript和Java是两个公司开发的不同产品Java是SUN公司推出的新一代面向对象的程序设计语言而JavaScript是Netscape公司的产品，其目的是为了扩展其浏览器功能现在JavaScript已被标准化为ECMAScript，主流的浏览器都支持,认识JavaScript,function sum()var s1=document.f1.s1.value;var s2=document.f1.s2.value;var s3=Number(s1)+Number(s2);document.f1.s3.value=s3;+=效果演示,示例说明,在标识标签对之间就可加入JavaScript脚本代码。其中的language属性指明这段代码是用JavaScript来编写的。JavaScript可以直接嵌入到html中通过浏览器直接运行的。Html中嵌入JavaScript代码的方式：放在标签中（推荐使用）放在标签中,JavaScript中的注释,JavaScript中的注释和Java基本一致，也分为单行和多行注释。注释信息仅仅做为说明来使用，在程序的解释和运行中是被忽略的。单行注释：使用/符号对单行信息进行注释多行注释：使用/*.*/对多行信息进行注释例子：/下面的alert()是弹出一个对话框/*下面的alert()是弹出一个对话框*/alert(这是第一个JavaScript例子!);,JavaScript基本语法,数据类型变量及类型转换表达式和运算符数组,数据类型,字符串：abc hello 你好数字：包括整数数字和浮点型数字布尔值：true 和false空值：null未定义值：undefined,变量及类型转换,变量的声明：使用 var来声明变量var str=你好类型转换：字符-数字 Number()Number(1)数字-字符 String()String(1),表达式和运算符,算术运算符：+-*/%+-比较运算符：=!=逻辑运算符,流程控制,顺序：按照程序编写的顺序来执行条件 if(条件)语句1 else if(条件)else 语句 nswitch(表达式)case label 1：语句1;break;case label n：语句n;break;default：语句n+1;循环 for(初值;条件;更新)语句 do语句while(条件)while(条件)语句,函数,函数在JavaScript中的函数可以简单理解为一组语句，用来完成一系列工作创建函数function 函数名（参数 1,参数2,参数N）函数体（语句集）,事件调用函数,事件：就是Web页面在浏览器处于活动状态时发生的各种事情。如：浏览器加载、卸载一个页面，用户单击鼠标、移动鼠标，以及按下键盘的某个键事件调用函数：当发生了某个事件之后去调用函数进行处理的方式。事件调用函数的格式：on事件名事件处理函数,主要的事件调用函数,事件调用函数举例,function clickme()alert(按钮被点击);演示效果,JavaScript中的对象,内置对象JavaScript将一些非常常用的功能预先定义成对象，用户可以直接使用，这种对象就是内置对象浏览器对象网页和浏览器本身的各种元素在JavaScript程序中的体现它使JavaScript可以定位、改变内容以及展示HTML页面的所有元素自定义对象JavaScript允许用户自定义对象进行使用,常见内置对象,Math 数学对象提供了进行所有基本数学计算的功能和常量的属性和方法Date 日期对象提供了获取、设置日期和时间的属性和方法String 字符串对象提供了对字符串进行处理的属性和方法Array 数组对象用来创建数组,内置对象举例,alert(Math.abs(-1);/返回绝对值alert(Math.round(3.8);/返回四舍五入之后的整数alert(Math.random();/返回0和1之间的一个伪随机数效果演示,浏览器对象,窗口对象(Window)Window对象处于对象层次的最顶端，它提供了处理浏览器窗口的方法和属性。位置对象(Location)Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。历史对象(History)History对象提供了与历史清单有关的信息。文档对象(Document)document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。,文档对象模型,window,screen,history,document,location,frame,archors,links,area,forms,applets,images,plugins,text,textarea,password,radio,reset,submit,checkbox,button,select,option,file,各种浏览器对象形成了一种层次模型，我们称其为文档对象模型（Document Object Model），简称DOM,浏览器对象的引用方式,对应于文档对象模型中的层次关系，JavaScript对浏览器对象的引用是逐层引用例如：在引用forms对象时，使用 通过对象的name属性来引用例如：引用一个name属性是form1的表单对象，使用。数组型浏览器对象的引用在文档对象模型中，有些对象属于数组型对象，如document对象下一层的images、links、forms等对象，在引用这种数组对象时，可以使用对象在数组中的位置(下标)来引用例如：window.document.forms0，表示引用文档中的第一个表单。注：Window对象作为文档对象模型中的最顶层对象，JavaScript认为它是默认的，因此可以不写出来。如：可以写成document.forms,window对象,介绍：Window对象也就是窗口对象，处于文档对象模型的最顶层，代表当前浏览器窗口。主要介绍两个方法：open(“url”,“window name”,“window feature”)功能：打开一个新的窗口参数说明：url:要打开窗口的url地址Window name是新打开窗口的名称Window features 是新窗口的实际特性（窗口的外观）可选项Window features的可能参数：height 窗口的高度width 窗口的宽度menubar是否有菜单scrollbars 是否有滚动条resizable 窗口大小是否可以改变close()功能：关闭窗口,window对象示例,function creatwindow()window.open(1.html,mywindow,menubar=no,height=200,width=300);function closewindow()window.close();演示效果,window的三种对话框方法,alert()方法 弹出一个显示信息的警示对话框alert(您好)confirm()方法 弹出带有提示信息的确认对话框confirm(确认删除吗?)prompt()方法 弹出一个带有输入信息的对话框name=prompt(请输入你的名字),document对象,document对象是JavaScript实现网页各种功能中最常用的基本对象之一，它代表浏览器窗口中的文档，可以用来处理文档中包含的html元素，如表单，图像，超链接等。write()作用：向文档中写入文本举例说明document.write(欢迎大家);效果演示,document对象(续),getElementsByName()通过html标签的name属性来获得一些元素对象返回的是具有相同name属性的html元素对象数组getElementById()通过html标签的id属性来获得一个html元素对象返回具有该id属性的html元素对象function check()var name=document.getElementsByName(name);var age=document.getElementById(age);alert(name0.value);alert(age.value);示例效果,
