web基础JavascriptandCSS.ppt

《web基础JavascriptandCSS.ppt》由会员分享，可在线阅读，更多相关《web基础JavascriptandCSS.ppt（75页珍藏版）》请在三一办公上搜索。

1、讲师：刘英杰中软培训中心邮件：,课程名称 web基础,主要内容,了解javaScript出现的背景javaScript函数的定义变量的定义函数的调用onLoadonClick,主要内容,对象基本对象MathDateDOM对象TextgetElementByIdinnerHTML,JavaScript语言概况,javaScript 出现的背景,JavaScript语言概况,什么是JavaScript？它是Netscape开发出的一种脚本语言，其目的是为了扩展基本HTML 的功能.它是一种运行在客户端的脚本语言，代码可以直接放入HTML文档中，可以直接在支持JavaScript的浏览器中运行.,J

2、avaScript语言概况,为什么使用javaScript?防止客户的非法输入客户端验证,如何使用JavaScript,在HTML文档的head中直接写：/javaScript Code 从外部引入引入JS文件后，在HTML文件中就可以调用JS文件定义的函数了,JavaScript在HTML插入方式,定义函数和调用函数,函数是JavaScript的基本组成部分，由一系列描述语句组成，用以完成特定的任务。函数定义由以下四部分组成：一个function关键字；一个函数名；参数列表；函数描述语句。function f1()/code,函数的调用,通常是点击”button”触发事件.实例alert()

3、;,JavaScript基本语法,变量的声明JavaScript不是强类型语言，变量可以不声明而直接使用。即使声明也不用指明类型var=;/注意有分号var tmp=3;JS是区分大小写的,JavaScript基本语法,JavaScript变量的类型可以是：1、整型 var f=123;2、浮点型 var f=1.23;3、字符串型 var f=hello;4、布尔型 true和 falsevar f=true;5、对象,JavaScript基本语法,语句：以分号结束，可以使用将多个语句括在一起JavaScript语句在语法上与Java基本相同，也包括了顺序、分支、循环三种程序结构JS的注释

4、单行注释：/this is a comment多行注释：/*This is a comment block*/,分支结构,if语句if()else;switch语句switch(e)case r1:break;case r2:break;default:.,循环结构,for 循环for(=;);while循环while();do while();,调用JavaScript,JavaScript在HTML中的重要用途之一是编写事件处理程序。如按钮被按下会激发OnClick事件。这些事件发生时，可以激发相应的用JavaScript编写的事件处理程序通过用户事件执行脚本在打开页面时执行脚本利用onL

5、oad 事件执行脚本,在打开页面时执行脚本,当浏览器打开一个HTML 文档时，它会从头开始解释整个文档包括HTML 标签和脚本，如果脚本中有可以直接执行的语句，则会在遇到的时候马上解释执行。,利用onLoad 事件执行脚本,onLoad 事件是一个页面在浏览器中打开时发生的，该方法常用于在打开一个页面的同时向用户显示一些消息。在下面的例子中脚本定义了一个opennews 函数，如果不调用该函数，它将不会被执行，我们可在标签的onLoad 事件中调用该函数。,利用onLoad 事件执行脚本,执行结果,通过用户事件执行脚本,用户在浏览器中阅读Web 页时经常会使用鼠标和键盘，比如移动鼠标点击链接、

6、单击按钮等行为，这些行为都会产生相应的事件，我们可以通过对这些事件编写脚本来进行特殊的处理,通过用户事件执行脚本,通过用户事件执行脚本,执行结果,表单提交,同个表单有2个按钮完成提交,对象,JavaScript采用了对象化编程，对象包括基本对象和对象DOM基本对象：可以将声明的变量视为对象，依其类型不同可以调用对象不同的属性和方法DOM(document object model)对象：页面内容也可以抽象成对象.DOM是一种理念，一种思想，一种方法使 Web开发人员可以访问HTML元素！,基本对象,常用的全局对象Global“数学”对象Math数组对象-Array,全局对象,全局对象是一个虚拟

7、的对象，通常用Global代表它JavaScript有一些全局的函数，通常认为是Global对象的，调用这些方法时直接写名字就可以了，无须用对象名限定parseInt(“123”);,全局对象,方法alert()弹出警告窗口parseInt转化为int类型isNaN()如果括号内的值是“NaN”则返回 true 否则返回 falseparseInt()把括号内的内容转换成整数。如果字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。parseFloat()转换浮点数confirm,confirm,confirmvar test=confirm(确定要删除吗？);if(

8、test)alert(您已经成功删除！);elsealert(您的删除操作已经取消！);,Math对象,Math对象提供了与数学计算相关的属性和方法Math对象的属性和方法调用时的格式都是Math.,Math对象,方法abs(x)返回 x 的绝对值。acos(x)返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。asin(x)返回 x 的反正弦值。atan(x)返回 x 的反正切值。random()返回大于 0 小于 1 的一个随机数。Math.random(),Array对象,Arrayvar b1=new Array();b=new Array(0,1,2,3,4);alert(

9、b2);b1=b.reverse();/反转for(var i=0;ib1.length;i+)document.write(b1i);,DOM简介,DOM是Document Object Model的缩写，即文档对象模型DOM将HTML页面中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)。通过DOM 可以在JavaScript中操纵HTML页面的内容,DOM简介,大部分DOM对象是不确定不惟一的，因此需要在HTML标记中给他们起名，如、等等DOM对象同基本对象一样，也有属性、方法和事件，尤其是DOM对象对事件的响应是JavaScr

10、ipt中尤为重要的部分,窗口对象,方法open()打开一个窗口。open(,);1、：打开页面URL2、：窗口名称（window.name），可使用_top、_blank等内建名称。3、：窗口样貌。如打开普通窗口则留空,窗口对象,例：打开一个 400 x 100 的窗口：window.open(“b.html,_blank,height=200,width=400,status=yes,toolbar=no,menubar=no,scrollbars=no);open()方法返回打开的窗口对象。注意要以_blank的方式showModalDialog();,窗口对象,关闭窗口window.cl

11、ose();,窗口对象,父窗口和子窗口值的传递var tmp=window.showModalDialog(a.html,“”);dialogArgumentswindow.returnValue实例,企业应用实例,父窗口show.html子窗口a.html,父窗口,function f1()var tmp=window.showModalDialog(a.html,form1.user1.value,height=200,width=400,status=yes,toolbar=no,menubar=no,scrollbars=no);form1.user1.value=tmp;f1Link

12、,子窗口,function f1()window.returnValue=form1.user2.value;window.close();function f2()form1.user2.value=dialogArguments;,子窗口,文档对象,document 描述当前窗口或指定窗口对象的文档。它包含了从到的内容。,文档对象,document对象包含若干数组对象，它们代表了页面上的标记元素，即：links()链接对象集合，即appletsApplet对象集合forms表单对象集合，即images图片对象集合，即访问其中一个只需要加上索引即可，如docment.forms0,访问文档中

13、的元素,通过名字访问docment.form(form的name).username(input元素的name)通过id访问document.getElementById();扩展:innerHTML,表单对象,document.forms是一个数组，包含了文档中所有的表单。要引用单个表单，可以用 document.formsx。如果标记中加上“name=”.“”属性，那么直接用“document.”就可以引用了。所拥有的子元素，如等等也对应到JavaScript中的一类对象，通常使用中name来访问这些对象，如果有：则访问text类型的输入框即为,表单对象,forms的属性：name 表单名

14、称，即属性。action 返回/设定表单提交地址，即action属性。method 返回/设定表单提交方法，即method属性target 返回/设定表单提交后返回的窗口，也就是属性。encoding 返回/设定表单提交内容的编码方式，也就是属性。length 返回该表单所含元素的数目。,表单对象,方法reset()重置表单。这与按下“重置”按钮是一样的。submit()提交表单。这与按下“提交”按钮是一样的,表单对象,以下对象都可以做为表单属性使用，但需要指定名字1、文本框对象2、多行文本输入区对象 3、隐藏对象4、密码输入区对象 5、单选域对象,表单对象,6、复选框对象7、下拉菜单对象 8

15、、选择项对象 9、重置按钮对象10、按钮对象11、提交对象,文本类对象,包括text、textarea、hidden、password属性name 返回/设定用指定的元素名称。value 返回/设定密码输入区当前的值。方法blur()从对象中移走焦点。focus()让对象获得焦点。select()选中输入区里全部文本。需要注意的是，由于hidden不可见，因此hidden对象没有方法。,按钮类对象,包括button、reset、submit属性name 返回/设定用指定的元素名称。value 返回/设定用指定的元素的值。form 返回包含本元素的表单对象。方法blur()从对象中移走焦点。fo

16、cus()让对象获得焦点。click()模拟鼠标点击该对象,单/多选对象,Radio/checkbox对象属性name 返回/设定用指定的元素名称value 返回/设定用指定的元素的值checked 返回/设定该单选域对象是否被选中。这是一个布尔值。方法blur()从对象中移走焦点。focus()让对象获得焦点。click()模拟鼠标点击该对象注意：调用返回的是数组,下拉菜单对象,select属性name 返回/设定用指定的元素名称。length 返回 Select 对象下选项的数目。selectedIndex 返回被选中的选项的下标。这个下标就是在 options 数组中该选项的位置。for

17、m 返回包含本元素的表单对象。方法blur()从对象中移走焦点。focus()让对象获得焦点onChange(),扩展,DOMgetElementByIdinnerHTML,CSS,CSS概念为什么要使用CSSCSS的使用,HTML 样式单,CSS是Cascading Style Sheets（层叠样式表单）的简称CSS的基本语法：HTML 标志 标志属性：属性值；标志属性：属性值；标志属性：属性值；,B color:red I color:red H1 color:red,CSS,为什么要使用CSS美化元素方便统一修改,CSS 的使用,内部样式表 连接外部样式表,CSS基本结构,table

18、background-color:red;,内部样式表,.样式表信息必须包含在这对标签之间.这对标签必须放在中,分组使用样式表,多个标志相同属性的定义方式：B,I,H1color:redB 粗体I 斜体H1 1号标题,Css样式,定义在标签上的css格式H1,H2,H3,H4,H5,H6Color:red;text-decoration:underline;Font-family:”黑体”;,Css样式,设定在ID上的css格式为#id名 标志属性：属性值；标志属性：属性值；标志属性：属性值 引用的方法：。,Css样式,直接定义class：.类名标志属性：属性值；标志属性：属性值；标志属性：属

19、性值 引用：,CSS的作用范围,body font-family:sans-serif;h1,h2 color:gray;h1 border-bottom:1px solid black;,CSS的作用范围,在tag为p,class为a1的元素上生效p.a1p.a1font-size:24pt;border-collapse:collapse;border-width:1px;(Color=#BCD2E6,Direction=120,strength=5);,CSS的作用范围,忽略tag,在class为a1的所有元素上生效.a1font-size:24pt;border-collapse:co

20、llapse;border-width:1px;(Color=#BCD2E6,Direction=120,strength=5);,css链接样式,a:link 设置链接本来的颜色a:active 设置链接被激活的颜色a:visited 设置链接访问过后的颜色a:hover 设置链接在鼠标悬停时的颜色,设置链接本来的颜色,a:link text-decoration:none;color:#666666;,设置链接被激活的颜色,a:active text-decoration:none;,设置链接访问过后的颜色,a:visited text-decoration:none;color:#666666;,设置鼠标悬停时的颜色,a:hover text-decoration:underline;color:#0095EA;,总结,了解javaScript出现的背景javaScript函数的定义变量的定义函数的调用onLoadonClick对象基本对象Math,DateDOMTextCSS,作业,1.使用JS给昨天作业登陆页面添加验证要求 用户名为che密码为123才可以登陆成功.2.使用JS给注册页面添加验证 要求1:要求所有的必填项加入验证不能为空 要求2:用户名长度控制在 3-12 字节以内 要求3:密码英文字母或数字等不少于6位,