简单javascript概述

什么是JavaScript

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：

1、是一种脚本编写语言
JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。
它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2、基于对象的语言。
JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3、简单性
JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

4、安全性
JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

5、动态性的
JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

6、跨平台性
JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。

综合所述JavaScript是一种新的描述语言，它可以被箝入到HTML的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。

JavaScript 和 Java 很类似，但到底并不一样！ Java 是一种比 JavaScript 更复杂许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者可以不那麽注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支援。
二、JavaScript的程序构成
JavaScript脚本语言的基本构成是由控制语句、函数、对象、方法、属性等,来实现编程的。

（一）、程序控制流

在任何一种语言中，程序控制流是必须的，它能使得整个程序减小混乱，使之顺利按其一定的方式执行。下面是JavaScript常用的程序控制流结构及语句:

１、if条件语句

1）基本格式

if（表述式）
语句段１；
......
else
语句段２；
......

2）功能：若表达式为true，则执行语句段１；否则执行语句段２。

3）说明：

·if -else 语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。
·表达式中必须使用关系语句，来实现判断，它是作为一个布尔值来估算的。
·它将零和非零的数分别转化成false和true。
·若if后的语句有多行，则必须使用花括号将其括起来。

4）if语句的嵌套

if（布尔值）语句１；
else（布尔值）语句２；
else if（布尔值）语句３；
……
else 语句４；

在这种情况下，每一级的布尔表述式都会被计算，若为真，则执行其相应的语句，否则执行else后的语句。

２、For循环语句

1）基本格式

for（初始化；条件；增量）
语句集；

2）功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。

3）说明：

·初始化参数告诉循环的开始位置，必须赋予变量的初值；
·条件：是用于判别循环停止时的条件。若条件满足，则执行循环体，否则 跳出。
·增量：主要定义循环控制变量在每次循环时按什么方式变化。
·三个主要语句之间，必须使用逗号分隔。

３、while循环

1）基本格式

while（条件）
语句集；

该语句与For语句一样，当条件为真时，重复循环，否则退出循环。

2）For与while语句

两种语句都是循环语句，使用For语句在处理有关数字时更易看懂，也较紧凑；而while循环对复杂的语句效果更特别。

４、break和continue语句

与C++语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。

（二）、函数

函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。

１、JavaScript函数定义

Function 函数名 （参数,变元）{
函数体;.
Return 表达式;
}

说明：

·当调用函数时,所用变量或字面量均可作为变元传递。
·函数由关键字Function定义。
·函数名：定义自己函数的名字。
·参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其它表达式。
·通过指定函数名（实参）来调用一个函数。
·必须使用Return将值返回。
·函数名对大小写是敏感的。

２、函数中的形式参数：

在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。例：

Function function_Name(exp1,exp2,exp3,exp4)
Number =function _Name . arguments .length;
if (Number>1）
document.wrile(exp2);
if (Number>2)
document.write(exp3);
if(Number>3)
document.write(exp4);
...

（三）、事件驱动及事件处理

１、基本概念

JavaScript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。它是在用形界面的环境下，使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）。

２、事件处理程序

在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。格式如下：

Function 事件处理名（参数表）{
事件处理语句集；
……
}

３、事件驱动

JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：

（１）单击事件onClick

当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：

·button（按钮对象）
·checkbox（复选框）或（检查列表框）
·radio （单选钮）
·reset buttons（重要按钮）
·submit buttons（提交按钮）

例：可通过下列按钮激活change()文件：

<Form>
<Input type="button" Value=" " onClick="change()">
</Form>

在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例：

<Input type="button" value=" " onclick=alert("这是一个例子"）;

（２）onChange改变事件

当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。

例：

<Form>
<Input type="text" name="Test" value="Test" onCharge="check('this.test)">
</Form>

（３）选中事件onSelect

当Text或Textarea对象中的文字被加亮后，引发该事件。

（４）获得焦点事件onFocus

当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。

（５）失去焦点onBlur

当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。

（６）载入文件onLoad

当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。

（７）卸载文件onUnload

当Web页面退出时引发onUnload事件，并可更新Cookie的状态。

（四）、范例

范例1：下例程序是一个自动装载和自动卸载的例子。即当装入HTML文档时调用loadform()函数,而退出该文档进入另一HTML文档时则首先调用unloadform()函数,确认后方可进入。

test3_1.htm

<HTML>
<HEAD>
<script Language="JavaScript">
<!--
function loadform(){
alert("这是一个自动装载例子!");
}
function unloadform(){
alert("这是一个卸载例子!");
}
//-->
</Script>
</HEAD>
<BODY OnLoad="loadform()" OnUnload="unloadform()">
<a href="test.htm">调用</a>
</BODY>
</HTML>

范例2：这是一个获取浏览器版本号的程序。该程序首先显示一个波浪一提示信息。之后显示浏览器的版本号有关信息。

test3_2.htm

<html>
<head>
<script language="JavaScript"><!--
// -->
function makeArray(n){
this.length=n
return this
}
function hexfromdec(num) {
hex=new makeArray(1);
var hexstring="";
var shifthex=16;
var temp1=num;
for(x=1; x>=0; x--) {
hex[x]=Math.round(temp1/shifthex - .5);
hex[x-1]=temp1 - hex[x] * shifthex;
temp1=hex[x-1];
shifthex /= 16;
}
for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }
return (hexstring);
}
function getletter(num) {
if (num < 10) { return num; }
else {
if (num == 10) { return "A" }
if (num == 11) { return "B" }
if (num == 12) { return "C" }
if (num == 13) { return "D" }
if (num == 14) { return "E" }
if (num == 15) { return "F" }
}
}
function rainbow(text){
var color_d1;
var allstring="";
for(i=0;i<text.length;i=i+2){
color_d1=255*Math.sin(i/(text.length/3));
color_h1=hexfromdec(color_d1);
allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";
}
return allstring;
}
function sizefont(text){
var color_d1;
var allstring="";
var flag=0;
for(i=0,j=0;i<text.length;i=i+1){
if (flag==0) {
j++;
if (j>=7) {
flag=1;}}
if (flag==1) {
j=j-1;
if (j<=0) {
flag=0; }}
allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";
}
return allstring;
}
document.write("<font size=8><CENTER>")
document.write("<BR><BR>")
document.write( sizefont("这是一个获取WEB浏览器的程序"))
document.write("</CENTER></font>")
document.write("浏览器名称: "+navigator.appName+"<br>");
document.write("版本号: "+navigator.appVersion+"<br>");
document.write("代码名字: "+navigator.appCodeName+"<br>");
ocument.write("用户代理标识: "+navigator.userAgent);
</script>
<body>
</body>
</html>

三、js函数大全
1.document.write(""); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value)
6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:(""+变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用+号.
12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:var来进行声明
14.JS中的判断语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:window.status="字符";
21.弹出提示信息:window.alert("字符");
22.弹出确认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href="URL"
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符:+=
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i<form.elements.length;i++){
      if (form.elements[i].type == "text"){
          form.elements[i].value = "";
      }


}
31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判断是否被选中也是用checked.
34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)
35.字符串的定义:var myString = new String("This is lightsword");
36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:String1.indexOf("String2")!=-1则说明没找到.
38.取字符串中指定位置的一个字符:StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最大 值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor (Math.random()*(n+1))返回随机数
41.定义日期型变量:var today = new Date();
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份, dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到 日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分, dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设 置年,dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,dateObj.setDay(val)设 置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,dateObj.setSeconds (val)设置秒   [注意:此日期时间从0开始计]
43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript:)来开头后面加函数名
48.在老的浏览器中不执行此JS:<!--       //-->
49.引用一个文件式的JS:<script type="text/javascript" src="aaa.js"></script>
50.指定在不支持脚本的浏览器显示的HTML:<noscript></noscript>
51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:<a href= "a.html" onclick="location.href='b.html';return false">dfsadf</a>
52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number, Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
53.JS中的换行:\n
54.窗口全屏大小:<script>function fullScreen(){ this.moveTo(0,0); this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script>
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1
57.innerHTML的值是表单元素的值:如<p id="para">"how are <em>you< /em>"</p>,则innerHTML的值就是:how are <em>you</em>
58.innerTEXT的值和上面的一样,只不过不会把<em>这种标记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.
60.isDisabled判断是否为禁止状态.disabled设置禁止状态
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状态.
66.防止用户对文本框中输入文本:onfocus="this.blur()"
67.取出该元素在页面中出现的数量:document.all.tags("div(或其它HTML标记符)").length
68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()
69.状态栏文字的设置:window.status='文字',默认的状态栏文字设置:window.defaultStatus = '文字.';
70.添加到收藏夹:external.AddFavorite("http://www.dannyg.com","jaskdlf");
71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener...的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状态栏显示内容:window.status="内容"
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否确认的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
78.JS中的窗口重定向:window.navigate("http://www.sina.com.cn");
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt("message","defaultReply");
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]);
85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue= "we really like you and hope you will stay longer.";}}   window.onbeforeunload=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息)
89.window.location.reload()刷新当前页面.
89-1.parent.location.reload()刷新父亲对象（用于框架）
89-2.opener.location.reload()刷新父窗口对象（用于单开窗口）
89-3.top.location.reload()刷新最顶端对象（用于多开窗口）
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94."abc".charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用+=进行连接
96.变量.indexOf("字符",起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var