《web基础JavascriptandCSS》由会员分享，可在线阅读，更多相关《web基础JavascriptandCSS（75页珍藏版）》请在金锄头文库上搜索。
1、L o g ov讲师：刘英杰 v中软培训中心 v邮件：课程名称 web基础主要内容 了解javaScript出现的背景 javaScript函数的定义 变量的定义 函数的调用 onLoad onClick主要内容 对象 基本对象 Math Date DOM 对象 Text getElementById innerHTMLJavaScript语言概况 javaScript 出现的背景JavaScript语言概况 什么是JavaScript ？ 它是Netscape开发出的一种脚本语言，其目的是为了扩展基 本HTML 的功能. 它是一种运行在客户端的脚本语言，代码可以直接放入HTML 文档中，可以
2、直接在支持JavaScript的浏览器中运行JavaScript语言概况 为什么使用javaScript? 防止客户的非法输入 客户端验证如何使用JavaScript 在HTML文档的head中直接写： /javaScript Code 从外部引入 引入JS文件后，在HTML文件中就可以调用JS文件定义的函数了JavaScript在HTML插入方式 定义函数和调用函数 函数是JavaScript的基本组成部分，由一系列描述语句 组成，用以完成特定的任务。函数定义由以下四部分 组成： 一个function关键字； 一个函数名； 参数列表； 函数描述语句。 function f1() /code
3、函数的调用 通常是点击”button”触发事件. 实例 alert();JavaScript基本语法 变量的声明 JavaScript不是强类型语言，变量可以不声明而直接使用。即 使声明也不用指明类型 var =;/注意有分号 var tmp=3; JS是区分大小写的 JavaScript基本语法 JavaScript变量的类型可以是： 1、整型 var f = 123; 2、浮点型 var f = 1.23; 3、字符串型 var f = hello; 4、布尔型 true和 false var f= true; 5、对象JavaScript基本语法 语句：以分号结束，可以使用将多个语句括在
4、一起 JavaScript语句在语法上与Java基本相同，也包括了顺 序、分支、循环三种程序结构 JS的注释 单行注释：/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中的重要用途之一是编写事件处理程 序。
5、如按钮被按下会激发OnClick事件。这些事件发生时，可以激 发相应的用JavaScript编写的事件处理程序 通过用户事件执行脚本 在打开页面时执行脚本 利用onLoad 事件执行脚本在打开页面时执行脚本 当浏览器打开一个HTML 文档时，它会从头开始解释整 个文档包括HTML 标签和脚本，如果脚本中有可以直接 执行的语句，则会在遇到的时候马上解释执行。利用onLoad 事件执行脚本 onLoad 事件是一个页面在浏览器中打开时发生的，该 方法常用于在打开一个页面的同时向用户显示一些消 息。在下面的例子中脚本定义了一个opennews 函数， 如果不调用该函数，它将不会被执行，我们可在 标签
6、的onLoad 事件中调用该函数。利用onLoad 事件执行脚本 执行结果通过用户事件执行脚本 用户在浏览器中阅读Web 页时经常会使用鼠标和键盘 ，比如移动鼠标点击链接、单击按钮等行为，这些行 为都会产生相应的事件，我们可以通过对这些事件编 写脚本来进行特殊的处理通过用户事件执行脚本 通过用户事件执行脚本 执行结果表单提交 同个表单有2个按钮完成提交对象 JavaScript采用了对象化编程，对象包括基本对象和对 象DOM 基本对象：可以将声明的变量视为对象，依其类型不同可以 调用对象不同的属性和方法 DOM(document object model)对象：页面内容也可以抽象成对 象. D
7、OM是一种理念，一种思想，一种方法使 Web开发人 员可以访问HTML元素！基本对象 常用的 全局对象Global “数学”对象Math 数组对象-Array全局对象 全局对象是一个虚拟的对象，通常用Global代表它 JavaScript有一些全局的函数，通常认为是Global对象 的，调用这些方法时直接写名字就可以了，无须用对 象名限定 parseInt(“123”);全局对象 方法 alert() 弹出警告窗口 parseInt 转化为int类型 isNaN() 如果括号内的值是“NaN”则返回 true 否则返回 false parseInt() 把括号内的内容转换成整数。如果字符串，
8、则字符 串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN”。parseFloat() 转换浮点数 confirmconfirm confirm var test = confirm(“确定要删除吗？“); if(test) alert(“您已经成功删除！“); else alert(“您的删除操作已经取消！“); Math对象 Math对象提供了与数学计算相关的属性和方法 Math对象的属性和方法调用时的格式都是 Math.Math对象 方法 abs(x) 返回 x 的绝对值。 acos(x) 返回 x 的反余弦值（余弦值等于 x 的角度），用弧度 表示。 asin(x) 返回
9、x 的反正弦值。 atan(x) 返回 x 的反正切值。 random() 返回大于 0 小于 1 的一个随机数。Math.random()Array对象 Array var b1= new Array(); b = new Array(0,1,2,3,4); alert(b2); b1=b.reverse();/反转 for(var i=0;i、等等 DOM对象同基本对象一样，也有属性、方法和事件， 尤其是DOM对象对事件的响应是JavaScript中尤为重要 的部分窗口对象 方法 open() 打开一个窗口。 open(, , ); 1、：打开页面URL 2、：窗口名称（window.na
10、me）， 可使用_top、_blank等内建名称。 3、：窗口样貌。如打开普通窗口则留空窗口对象 例：打开一个 400 x 100 的窗口： window.open(“b.html“,“_blank“,“height=200,width=400,s tatus=yes,toolbar=no,menubar=no,scrollbars=no“); open() 方法返回打开的窗口对象。 注意要以_blank的方式 showModalDialog();窗口对象 关闭窗口 window.close();窗口对象 父窗口和子窗口值的传递 var tmp = window.showModalDialog
11、(“a.html“,form1.user1.value,“”); dialogArguments window.returnValue 实例企业应用实例 父窗口 show.html 子窗口 a.html父窗口 function f1() var tmp = window.showModalDialog(“a.html“,form1.user1.value,“height=200,width=40 0,status=yes,toolbar=no,menubar=no,scrollbars=no“); form1.user1.value=tmp; f1Link 子窗口 function f1()
12、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类型的输入框即为document.myForm.user
14、表单对象 forms的属性： name 表单名称，即属性。 action 返回/设定表单提交地址，即action属性。 method 返回/设定表单提交方法，即method属性 target 返回/设定表单提交后返回的窗口，也就是属性。 encoding 返回/设定表单提交内容的编码方式，也就是属性。 length 返回该表单所含元素的数目。 表单对象 方法 reset() 重置表单。这与按下“重置”按钮是一样的。 submit() 提交表单。这与按下“提交”按钮是一样的表单对象 以下对象都可以做为表单属性使用，但需要指定名字 1、文本框对象 2、多行文本输入区对象 3、隐藏对象 4、密码输入区对象 5、单选域对象表单对象 6、复选框对象 7、下拉菜单对象 8、选择项对象 9、重置按钮对象 10、按钮对象 11、提交对象文本类对象 包括text、texta
