web基础JavascriptandCSS.ppt

讲师：刘英杰中软培训中心邮件：811061249,课程名称web基础,主要内容,了解javaScript出现的背景javaScript函数的定义变量的定义函数的调用onLoadonClick,主要内容,对象基本对象MathDateDOM对象TextgetElementByIdinnerHTML,JavaScript语言概况,javaScript出现的背景,JavaScript语言概况,什么是JavaScript？它是Netscape开发出的一种脚本语言，其目的是为了扩展基本HTML的功能.它是一种运行在客户端的脚本语言，代码可以直接放入HTML文档中，可以直接在支持JavaScript的浏览器中运行.,JavaScript语言概况,为什么使用javaScript?防止客户的非法输入客户端验证,如何使用JavaScript,在HTML文档的head中直接写：/javaScriptCode从外部引入引入JS文件后，在HTML文件中就可以调用JS文件定义的函数了,JavaScript在HTML插入方式,定义函数和调用函数,函数是JavaScript的基本组成部分，由一系列描述语句组成，用以完成特定的任务。函数定义由以下四部分组成：一个function关键字；一个函数名；参数列表；函数描述语句。functionf1()/code,函数的调用,通常是点击”button”触发事件.实例alert();,JavaScript基本语法,变量的声明JavaScript不是强类型语言，变量可以不声明而直接使用。即使声明也不用指明类型var=;/注意有分号vartmp=3;JS是区分大小写的,JavaScript基本语法,JavaScript变量的类型可以是：1、整型varf=123;2、浮点型varf=1.23;3、字符串型varf=hello;4、布尔型true和falsevarf=true;5、对象,JavaScript基本语法,语句：以分号结束，可以使用将多个语句括在一起JavaScript语句在语法上与Java基本相同，也包括了顺序、分支、循环三种程序结构JS的注释单行注释：/thisisacomment多行注释：/*Thisisacommentblock*/,分支结构,if语句if()else;switch语句switch(e)caser1:break;caser2:break;default:.,循环结构,for循环for(=;);while循环while();dowhile();,调用JavaScript,JavaScript在HTML中的重要用途之一是编写事件处理程序。如按钮被按下会激发OnClick事件。这些事件发生时，可以激发相应的用JavaScript编写的事件处理程序通过用户事件执行脚本在打开页面时执行脚本利用onLoad事件执行脚本,在打开页面时执行脚本,当浏览器打开一个HTML文档时，它会从头开始解释整个文档包括HTML标签和脚本，如果脚本中有可以直接执行的语句，则会在遇到的时候马上解释执行。,利用onLoad事件执行脚本,onLoad事件是一个页面在浏览器中打开时发生的，该方法常用于在打开一个页面的同时向用户显示一些消息。在下面的例子中脚本定义了一个opennews函数，如果不调用该函数，它将不会被执行，我们可在标签的onLoad事件中调用该函数。,利用onLoad事件执行脚本,执行结果,通过用户事件执行脚本,用户在浏览器中阅读Web页时经常会使用鼠标和键盘，比如移动鼠标点击链接、单击按钮等行为，这些行为都会产生相应的事件，我们可以通过对这些事件编写脚本来进行特殊的处理,通过用户事件执行脚本,通过用户事件执行脚本,执行结果,表单提交,同个表单有2个按钮完成提交,对象,JavaScript采用了对象化编程，对象包括基本对象和对象DOM基本对象：可以将声明的变量视为对象，依其类型不同可以调用对象不同的属性和方法DOM(documentobjectmodel)对象：页面内容也可以抽象成对象.DOM是一种理念，一种思想，一种方法使Web开发人员可以访问HTML元素！,基本对象,常用的全局对象Global“数学”对象Math数组对象-Array,全局对象,全局对象是一个虚拟的对象，通常用Global代表它JavaScript有一些全局的函数，通常认为是Global对象的，调用这些方法时直接写名字就可以了，无须用对象名限定parseInt(“123”);,全局对象,方法alert()弹出警告窗口parseInt转化为int类型isNaN()如果括号内的值是“NaN”则返回true否则返回falseparseInt()把括号内的内容转换成整数。如果字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。parseFloat()转换浮点数confirm,confirm,confirmvartest=confirm(确定要删除吗？);if(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对象,Arrayvarb1=newArray();b=newArray(0,1,2,3,4);alert(b2);b1=b.reverse();/反转for(vari=0;ib1.length;i+)document.write(b1i);,DOM简介,DOM是DocumentObjectModel的缩写，即文档对象模型DOM将HTML页面中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)。通过DOM可以在JavaScript中操纵HTML页面的内容,DOM简介,大部分DOM对象是不确定不惟一的，因此需要在HTML标记中给他们起名，如、等等DOM对象同基本对象一样，也有属性、方法和事件，尤其是DOM对象对事件的响应是JavaScript中尤为重要的部分,窗口对象,方法open()打开一个窗口。open(,);1、：打开页面URL2、：窗口名称（），可使用_top、_blank等内建名称。3、：窗口样貌。如打开普通窗口则留空,窗口对象,例：打开一个400 x100的窗口：window.open(“b.html,_blank,height=200,width=400,status=yes,toolbar=no,menubar=no,scrollbars=no);open()方法返回打开的窗口对象。注意要以_blank的方式showModalDialog();,窗口对象,关闭窗口window.close();,窗口对象,父窗口和子窗口值的传递vartmp=window.showModalDialog(a.html,form1.user1.value,“”);dialogArgumentswindow.returnValue实例,企业应用实例,父窗口show.html子窗口a.html,父窗口,functionf1()vartmp=window.showModalDialog(a.html,form1.user1.value,height=200,width=400,status=yes,toolbar=no,menubar=no,scrollbars=no);form1.user1.value=tmp;f1Link,子窗口,functionf1()window.returnValue=form1.user2.value;window.close();functionf2()form1.user2.value=dialogArguments;,子窗口,文档对象,document描述当前窗口或指定窗口对象的文档。它包含了从到的内容。,文档对象,document对象包含若干数组对象，它们代表了页面上的标记元素，即：links()链接对象集合，即appletsApplet对象集合forms表单对象集合，即images图片对象集合，即访问其中一个只需要加上索引即可，如docment.forms0,访问文档中的元素,通过名字访问docment.form(form的name).username(input元素的name)通过id访问document.getElementById();扩展:innerHTML,表单对象,document.forms是一个数组，包含了文档中所有的表单。要引用单个表单，可以用document.formsx。如果标记中加上“name=”.“”属性，那么直接用“document.”就可以引用了。所拥有的子元素，如等等也对应到JavaScript中的一类对象，通常使用中name来访问这些对象，如果有：则访问text类型的输入框即为document.myForm.user,表单对象,forms的属性：name表单名称，即属性。action返回/设定表单提交地址，即action属性。method返回/设定表单提交方法，即method属性target返回/设定表单提交后返回的窗口，也就是属性。encoding返回/设定表单提交内容的编码方式，也就是属性。length返回该表单所含元素的数目。,表单对象,方法reset()重置表单。这与按下“重置”按钮是一样的。submit()提交表单。这与按下“提交”按钮是一样的,表单对象,以下对象都可以做为表单属性使用，但需要指定名字1、文本框对象2、多行文本输入区对象3、隐藏对象4、密码输入区对象5、单选域对象,表单对象,6、复选框对象7、下拉菜单对象8、选择项对象9、重置按钮对象10、按钮对象11、提交对象,文本类对象,包括text、textarea、hidden、password属性name返回/设定用指定的元素名称。value返回/设定密码输入区当前的值。方法blur()从对象中移走焦点。focus()让对象获得焦点。select()选中输入区里全部文本。需要注意的是，由于hidden不可见，因此hidden对象没有方法。,按钮类对象,包括button、reset、submit属性name返回/设定用指定的元素名称。value返回/设定用指定的元素的值。form返回包含本元素的表单对象。方法blur()从对象中移走焦点。focus()让对象获得焦点。click()模拟鼠标点击该对象,单/多选对象,Radio/checkbox对象属性name返回/设定用指定的元素名称value返回/设定用指定的元素的值checked返回/设定该单选域对象是否被选中。这是一个布尔值。方法blur()从对象中移走焦点。focus()让对象获得焦点。click()模拟鼠标点击该对象注意：调用document.form.radioName返回的是数组,下拉菜单对象,select属性name返回/设定用指定的元素名称。length返回Select对象下选项的数目。selectedIndex返回被选中的选项的下标。这个下标就是在options数组中该选项的位置。form返回包含本元素的表单对象。方法blur()从对象中移走焦点。focus()让对象获得焦点onChange(),扩展,DOMgetElementByIdinnerHTML,CSS,CSS概念为什么要使用CSSCSS的使用,HTML样式单,CSS是CascadingStyleSheets（层叠样式表单）的简称CSS的基本语法：HTML标志标志属性：属性值；标志属性：属性值；标志属性：属性值；,Bcolor:redIcolor:redH1color:red,CSS,为什么要使用CSS美化元素方便统一修改,CSS的使用,内部样式表连接外部样式表,CSS基本结构,tablebackground-color:red;,内部样式表,.样式表信息必须包含在这对标签之间.这对标签必须放在中,分组使用样式表,多个标志相同属性的定义方式：B,I,H1color:redB粗体I斜体H11号标题,Css样式,定义在标签上的css格式H1,H2,H3,H4,H5,H6Color:red;text-decoration:underline;Font-family:”黑体”;,Css样式,设定在ID上的css格式为#id名标志属性：属性值；标志属性：属性值；标志属性：属性值引用的方法：。,Css样式,直接定义class：.类名标志属性：属性值；标志属性：属性值；标志属性：属性值引用：,CSS的作用范围,bodyfont-family:sans-serif;h1,h2color:gray;h1border-bottom:1pxsolidblack;,CSS的作用范围,在tag为p,class为a1的元素上生效p.a1p.a1font-size:24pt;border-collapse:collapse;border-width:1px;filter:progid:DXImageTransform.Microsoft.Shadow(Color=#BCD2E6,Direction=120,strength=5);,CSS的作用范围,忽略tag,在class为a1的所有元素上生效.a1font-size:2