- 浏览: 1810080 次
文章分类
最新评论
-
coosummer:
推荐使用http://buttoncssgenerator.c ...
CSS控制<a>标签变为button -
Allen_J_Will:
哥们,事情没有你说的那么简单,很大的一个项目中,依赖jar包的 ...
struts中java.lang.NoClassDefFoundError: com/opensymphony/xwork2/util/TextUtils的解决办法
JavaScript脚本语言初解
JavaScript脚本语言
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,它是通过嵌入或调入在标准的HTML语言中实现的。
1、JavaScript的基本介绍
HTML语言能实现文字、表格、声音、图像和动画等多媒体信息的检索,但是它缺少动态的客户端与服务器端的交互。JavaScript的出现可以使得信息和用户之间不只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交互的表达能力。在现在的网络中,静态网络已经面临淘汰,动态网络的应用越来越广泛。
1)、JavaScript语言概括
JavaScript是一种脚本语言,是以小代码的方式实现编程。它是一种基于对象的语言,不想Java一样是面向对象的语言。它比Java简单的多,最重要的是它是弱变量型语言。JavaScript是动态的,可以直接响应用户输入,无须经过Web服务程序。它对用户的请求响应时采用事件驱动进行的。JavaScript也是一种平台无关性的语言,它依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript就可以正确执行。
2)、JavaScript代码结构
JavaScript代码是嵌入在HTML中的,下面是一个简单的JavaScript程序:
<html> <head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <scriptLanguage="JavaScript"> //下面添加JavaScript代码 alert("这是第一个JavaScript例子!"); </script> </head> </html>
另外,还有另一种JavaScript程序编写方法,就是将HTML和JavaScript语句分为两个问津啊。如下面的程序所示:
<html> <head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <scriptLanguage="JavaScript" src="js01.js"> </script> </head> </html>
在本程序文件的同一目录下有一个js01.js文件,其代码为:
alert("这是第一个JavaScript例子!");
JavaScript代码不但可以位于<head>...</head>标记中,也可以位于<body>...</body>标记中,如下面的JavaScript程序所示:
<html> <head> <meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> <scriptLanguage="JavaScript"> alert("这是放在<head>...</heand>标记中的代码。"); </script> </head> <body> <scriptLanguage="JavaScript"> alert("这是放在<body>...</body>标记中的代码") </script> </body> </html>
3)、JavaScript数据类型
在JavaScript中有4中基本的数据类型:数字、字符串、布尔型和空值。基本类型中的数据可以使常量,也可以是变量。因为JavaScript采用弱类型的形式,所以一个数据的变量或常量不必首先进行声明,而是在使用或赋值时确定其数据的类型。
4)、JavaScript运算符与表达式
表达式是对变量、常量进行赋值、计算等的过程。在JavaScript中,表达式可以分为算术表达式、字串表达式、赋值表达式以及布尔表达式等。运算符是完成操作的一系列符号。在JavaScript中有算术运算符、比较运算符、位运算符、字串运算符等。
5)、JavaScript常量和变量
JavaScript中的常量包括数字、布尔值、字符型常量、空值和特殊字符。其中数字包括整型常量和浮点常量,字符型常量指的是用引号括起来的字符,特殊字符指的是以“/”开头的不可显示的特殊字符。
这和Java很相似,而且也是严格区分大小写的。下面提供了一个综合运用常量和变量的程序,介绍如何使用JavaScript常量和变量。
<html> <head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <scriptLanguage="JavaScript"> var r; var PI = 3.1415926; var s; r = 2; s = PI*r*r; //显示输出 document.writeln(s); </script> </head> <body> <br>JavaScript常量和变量 </body> </html>
变量是通过命令var成名的。可以先声明,也可以不作声明,在使用时可根据数据的类型来确定变量的类型。根据作用域划分,JavaScript变量也可分为全局变量和局部变量。
2、JavaScript事件
JavaScript是基于对象(object-based)的语言,而基于对象的基本特征就是采用事件驱动。它是在有形界面的环境下,使得一切输入变化简单化。通常鼠标或热键的动作称之为事件(Event),由鼠标或热键引发的一连串程序的动作称之为事件驱动(EventDriver)。而对事件进行梳理的程序或函数称之为事件处理程序(Event Handler)。除了下面要详细讲解的OnClick事件和OnChange事件外,还有OnSelect事件、OnFocus事件、OnBlur事件、OnLoad事件和OnUnload事件等。
1)、OnClick事件
此事件由单击鼠标按钮引发。产生此事件的对象有button、checkBox、radioButton、selectList。下面是一个OnClick事件的实例:
<html> <head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <script Language="JavaScript"> function click1() { alert("确定"); } function click2() { alert("取消"); } </script> </head> <body> <center> <form name="myform"> <input type="button"value="确定" name="test1" onclick="click1()" /> <input type="button"value="取消" name="test2" onclick="click2()" /> </form> </center> </body> </html>
2)、OnChange事件
当text或textarea中输入的字符值改变时会触发该事件,当在select表格项中一个选项状态改变后也会触发该事件。OnChange事件产生的对象也只有3个。
<html> <head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <scriptLanguage="JavaScript"> function dispmdg() { alert("TextBox值发生了变化!"); } </script> </head> <body> <center> <form name="myform"> <input type="text"value="TextBox值发生了变化" name="Text" onchange="dispmdg()"/> </form> </center> </body> </html>
3.JavaScript对象
JavaScript中的对象是由属性(properties)和方法(methods)两个基本元素构成的。引用对象的主要途径有3种:应用JavaScript内部对象、由浏览器环境中提供和创建新对象。在JavaScript中常用的对象有String、Math、Date和数组,下面分别进行介绍。
1)、String字符串
String对象只有一个属性,及length属性。下面是一个使用字符串的实例:
<scriptLanguage="JavaScript">
var myTest;
var myStringLenght;
myTest = "This is aJavaScript";
myStringLenght = myTest.length;
document.write("字符串为:");
document.write(myTest);
document.write("<br>");//在JavaScript中使用HTML标记
document.write("字符串长度为:");
document.writeln(myStringLenght);
</script>
String的主要方法如下:
>锚点anchor():该方法创建如同HTML文档中的anchor标记,使用anchor如用(A NAME=””)一样,通过下列各式访问:string.anchor(anchorName);
>字符显示的控制方法:big()为大体字显示,Italics()为斜体显示,bold()为粗体字显示,blink()为字符闪烁显示,small()为字符用小体字显示,fixed()为固定高亮字显示,fontsize(size)为控制字体大小等;
>字体颜色方法:fontcolor(color);
>字符串大小写转换:toLowerCase()为小写转换,toUpperCase()为大写转换。把一个给定的字符串分别转换成大写和小写的格式:string-stringValue.toUpperCas和string-stringValue.toLowerCase;
>字符搜索:indexOf[charactor, fromIndex],从指定fromIndex位置开始搜索charactor第一次出现的位置;
>返回字符串的一部分字符串:substring(start, end),从start开始到end的字符串全部返回。
下面是一个关于使用String方法的程序:
<scriptLanguage="JavaScript"> var str; str = "This is aJavaScript"; document.write("字符串:"); document.write(str); document.write("<br><br>"); document.write("substring()方法:"); document.write(str.substring(4 ,10)); </script>
接下来再看一个对字符进行搜索的程序:
<html> <head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <scriptLanguage="JavaScript"> function check(){ var temp , str; str =document.myform1.text1.value; temp = str.indexOf('@'); if (temp < 0) alert("请输入合法Email地址"); else alert(temp); } </script> </head> <body> <center> <form name="myform1"> 请输入Enail地址:<br> <input type="text"name="text1" value="" /> <p><inputtype="button" name="btn" value="提交" onclick="check()"/> </form> </center> </body> </html>
上面用到了String类的一个对象调用它的indexOf()方法,String对象的方法很多,它们大多是对字符串的显示、大小、颜色的设定和对字符串的搜索。
2)、Math对象
Math对象的常用属性有PI、自然对数E,它们就是Java中的常量。Math对象的方法也很多,它们都很简单。例如绝对值abs()、正弦余弦值sin(),cos()、反正弦反余弦asin(),acos()、正切反正切tan(),atan()、四舍五入round()、平方根aqrt()、基于几次方的值Pow(base , exponent)。由于它们都很简单,这里不再讲解。
3)、Date对象
对Date对象的使用方式为:myDate = new Date();,它用get()方法返回Date,用set()方法来设置Date,其中唯一的不同就是toGMTstring()方法,它用于返回格林威治格式的时间字符串。下面是一个关于Date对象的实例:
<body> <form name="myform"> 您的在线时间为: <input name="clock"size="18" value="在线时间" /> </form> <scriptlang="JavaScript"> var id , iM = 0 , iS = 1; start = new Date(); function go(){ now = new Date(); time = (now.getTime() -start.getTime())/1000; time = Math.floor(time); iS = time % 60; iM = Math.floor(time / 60); if(iS < 10) document.myform.clock.value ="" + iM + " 分 0" + iS + " 秒"; else document.myform.clock.value ="" + iM + " 分 " + iS + " 秒"; id = setTimeout("go()" ,1000); } go(); </script> </body>
4、浏览器内置对象
浏览器中提供了navigator对象、Window对象、History对象、Location对象、Document对象和form对象等内置对象。下面主要讲解History对象和Document对象。
1)、History对象
History对象的length属性,指出在本窗口中已经打开了多少个网页。还有back()方法表示打开后一个网页,foward()方法表示打开前一个网页,go()方法表示打开指定的网页。下面是一个应用实例:
<body> <form name="myform"> <input type="button"name="back" value="后退" onclick="history.back()" /> <input type="button"name="forward" value="前进" onclick="history.forward()" /> <input type="button"name="button1" value="显示length属性"onclick="alert(history.length)" /> <ahref="javascript:history.back()">单击这里返回</a> </form> </body>
2)、Document对象
在浏览器中,Document对象是核心,同时也是最重要的。在Document中主要有links、anchor、form3个最重要的对象。在Document对象中,有write()、writelin()、close()和clear()4中方法。
在HTML网页中可以用两种模式访问网页中的所有节点,第一种是以前的方法,语法为:
>document.all[“<要访问的节点id>”]
>document.all.<要访问的节点id>
第二种是通过DOM树进行访问,导航方法主要有childNodes[n]、firstChild、lastChild、nextSibling。通过DOM树不但可以进行导航访问,而且可以动态添加节点,主要方法有createElement(“<标记名称>”)/createTextNode(“<文本内容>”)、appendChild(<节点句柄>)、removeNode(true)。
5、窗体对象
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户交互,不用再之前首先进行数据输入,即可实现动态改变Web文档的行为。
1)、窗体对象简述
窗体(form)构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问。窗体对象的属性如下:
>Name = “表单的名称”。
>Target = “指定信息的提交窗口”
>Action = “接收窗体程序对应的URL”
>Method = “信息数据传送方式(get/post)”
>enctype = “窗体编码方式”
>[onSubmit = “javascript代码”]
在JavaScript中访问窗体对象可由两种方法实现:第一种是通过form对象名进行访问,如document.myform;第二种是通过窗口对象数组进行访问,如document.forms[0]。窗体对象的方法只有一个submit()方法,该方法的主要功能就是实现窗体信息的提交。
窗体中的基本元素由按钮、单选按钮、复选框、提交框、重置按钮、文本框等组成。在JavaScript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或窗体元素名称来实现。
2)、button按钮
button有name和value属性。用name设定提交信息时显示的信息名称,对应文档中button的Name;用value设定出现在窗口中对应HTML文档中的Value信息。
<head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <scriptlang="JavaScript"> function check(){ alert("按钮名是:" +document.myform.button1.value); } </script> </head> <body> <form name="myform"> <input type="button"name="button1" value="确定" onclick="check()" /> </form> </body>
3)、text单行文本框
name属性用来设定提交信息时的信息名称及对应于HTML文档中的Name;value属性用来设定出现在窗口中对应HTML文档中的Value信息。
<head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <scriptlang="JavaScript"> function check(){ document.myform.text1.value ="text"; } </script> </head> <body> <form name="myform"method="POST" action=""> <input type="text"name="text1" size="25" /> <br> <input type="button"name="button1" value="提交" onclick="check()" /> <input type="reset"name="button2" value="重置" /> </form> </body>
text的方法有:blur()方法用来将当前焦点移到后台;select()方法用来高亮文字。Text有4个主要事件:onFocus()在获取焦点时产生;OnBlur()在失去焦点时产生;OnSelect()在文字被高亮显示后产生;OnChange()在text元素值改变时产生。
4)、select选择文本框
Select的作用是对滚动选择内容进行控制。它有很多属性:用name设定提交信息时的信息名称;用length对应文档中的length;用options组成多个选项的数组。下面是一个关于select选择文本框的实例,使用这个下拉菜单可以显示多个值:
<head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <scriptlang="JavaScript"> function func(){ alert("您的所在地是" +st.value); } </script> </head> <body> <select type="select"name="st" size="3" onchange="func()" > <optionselected="true" value="北京">北京</option> <option value="天津">天津</option> <option value="唐山">唐山</option> </select> </body>
再来看以个带有options属性的程序,这个程序与上面的实例有点类似
<body> <form method="POST"action="" name="myform"> <select name="D1"size="4" multiple="true"> <option>长城</option> <option>故宫</option> <optionselected="true">北戴河</option> <option>漓江</option> <option>西湖</option> </select> <input type="button"name="B1" value="你想去的是" onclick="test(myform.D1)" /> </form> <scriptlang="JavaScript"> function test(a){ var mystr = "" for(var i = 0 ; i <a.options.length ; i++){ if(a.options[i].selected) mystr += a.options[i].text+ "\n" } alert(mystr) } </script> </body>
用selectIndex属性指明该下标指明一个选项。Select的每一个选项都有他们的属性:用text刷属性对应选项对应的文字;用selected属性指明当前选项是否被选中,用Index属性指明当前选项的位置,用defaultselected属性来说明默认选项。Select的事件由OnBlur、OnChange和OnFocus。
5)、checkBox复选框
作用是对一个复选框中的内容进行控制。来看一个使用checkBox复选框的程序,它经常应用到下载时选择下载项的时候:
<body> <form name="myform"> <input type="checkbox"name="cb1" />长城<br/> <input type="checkbox"name="cb2" />故宫<br/> <input type="checkbox"name="cb3" />北戴河<br/> <input type="checkbox"name="cb4" />西湖<br/> <input type="checkbox"name="cb5" value="全部反选" onclick="test()" />全部反选 <input type="checkbox"name="cb6" value="全选" onclick="checkAll()" />全选 </form> <scriptlang="JavaScript"> function test(){ document.myform.cb1.click(); document.myform.cb2.click(); document.myform.cb3.click(); document.myform.cb4.click(); } function checkAll(){ if(document.myform.cb6.checked== true){ document.myform.cb1.checked= true; document.myform.cb2.checked= true; document.myform.cb3.checked= true; document.myform.cb4.checked= true; } else{ document.myform.cb1.checked= false; document.myform.cb2.checked= false; document.myform.cb3.checked= false; document.myform.cb4.checked= false; } } </script> </body>
上面用了click()方法和OnClick事件,它们的含义和前面的一样。
6)、radio单选按钮
radio有5种属性,除了name、value和ckecked属性在checkbox中讲解过以外,还有length属性和index属性。使用单选按钮的代码如下:
<body> <form name="myform"> <input type="radio"name="myradio" value="长城"/>长城<br/> <input type="radio"name="myradio" value="故宫"/>故宫<br/> <input type="radio"name="myradio" value="北戴河"/>北戴河<br/> <input type="radio"name="myradio" value="西湖"/>西湖<br/> <input type="radio"name="myradio" value="漓江" />漓江<br/> </form> <form name="btnForm"> <input type="button"name="displayBtn" value="显示长度" onclick="alert(myform.myradio.length)"/><br/><br/> <input type="button"name="whickBtn" value="谁被选中" onclick="alert(whichRadio())" /><br/> </form> <script lang="JavaScript"> function whichRadio(){ for(var i = 0 ; i < 5 ;i++){ if(document.myform.myradio[i].checked == true) returndocument.myform.myradio[i].value; } return "没有想去的地方"; } </script> </body>
用length属性来说明单选按钮中的按钮数目;用index属性说明选中的按钮的位置。Radio的方法和事件与checkBox中的一样。
相关推荐
JavaScript脚本语言基础
如何在C++程序中嵌入JavaScript脚本语言.pdf
JavaScript语言基础 JavaScript程序流程控制语句 JavaScript函数和事件处理程序 HTML文档对象模型 JavaScript内置的常用对象 用JavaScript脚本对HTML数据的的验证
这个程序可以打开网页,进而找出网页中的javascript脚本,提取出来,然后测试脚本功能。
javascript基础、流程控件语句与函数,数据验证方法。 课件PPT加文档加实例
初学者javascript脚本语言,初学专用
JavaScript脚本语言实现用户注册页面
脚本语言:包括一些简单的例子,还可以自己去试试,毕竟是要自己多多练习才可以的。
JavaScript脚本语言发.ppt
ASP基础理论,Web网页制作,JavaScript脚本语言,VBScript脚本语言
第二讲 javascript脚本语言.ppt 一个ppt适合讲解用
用JavaScript脚本语言编写试题网页
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。Javascript提供了丰富的运算功能,...
C# 动态解析 javascript 脚本引擎源码
JavaScript脚本技术JavaScript脚本技术
JavaScript脚本语言基础PPT教案学习.pptx
AI CC 2015 JavaScript脚本手册,用于学习编写JSX脚本,官方文档
第07讲JavaScript脚本语言三.ppt
应用JavaScript脚本语言实现电子政务网站.pdf
浅谈关于JavaScript脚本语言的学习.pdf