1javascript语法

Posted 小飞虫bin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1javascript语法相关的知识,希望对你有一定的参考价值。

javascript是Navigator2.0中的关键组件之一,javascript是解释型的,以对象为基础的,易于使用与学习且紧紧集成与html的语言。javascript将当前浏览器会话的属性提供给了编程者,这些属性包括当前加载的html页面的元素,如窗体、框架以及链接。javascript是区分大小写.

java与javascript之间存在着差别,虽然它们是相关的,javascript借用了java大多数的语法,但他们在本质上是不同的而且服务于不同的目的,可以说java与javascript是互为补充的,而不是互相竞争的。

javascript中对象的使用
javascript是以对象为基础的,从根本上讲,对象是组织信息以及操纵和使用这些信息的方法的一种方式。对象提供了一种定义与当前项有关的专门数据片的方法,这些片称为属性,此外,任务又补充了属性,它可以在这些信息上或使用这些信息进行操作,这又称为方法。属性和方法一起构成了对象。

内置对象的使用
javascript提供了一套内置对象,它们提供了反映当前加载的web页面及其内容以及Navigator的当前会话的信息。
Navigator Object Hierarchy(Navigator对象层次)
Javascript中的大多数内置对象属于Navigator对象层次。Navigator对象层次是由成为window对象的单个基本对象建立的。
Window
    Location
    History
    Document
          Forms
          Anchors
window对象提供处理实际的Navigator窗口的方法与属性,包括每个框架的对象。
location对象提供与当前打开的Url一起工作的属性和方法
History对象提供了有关历史清单方面的信息,并可与该清单进行有限制的交互。
document 对象是层次中最常用的对象之一,它包括与文档元素一起工作的对象、属性与方法。这些文档元素包括窗体、连接、
 
其他内置对象
除了Navigator对象层次内的对象外,Javascript提供了若干与当前窗口或加载的文档没有关联的对象。
string对象使程序能与文本串一起工作,并使程序能够处理文本串。其中包括提取子字符串,以及将文本转变成大写或小写的字符。
Math对象提供运算三角函数以及一般数据函数的方法
Date对象程序能够与当前的日期一起功过或给指定的日期建立实例。

自定义对象的使用
Javascript除具有众多的内置对象外,作为javascript编程者,还可以建立自己的脚本中使用的自己的对象。

1什么是JavaScript
javaScript是一种基于对象和事件驱动并且安全性能较强的脚本语言。javaScript语句在客户端浏览器被解释执行,提供响应并且具有处理用户交互事件的能力。应此JavaScript是客户端执行的脚本语言,并且能够被嵌入到HTML的文件之中。

JavaScript的基本特点:
一种脚本语言,JavaScript是一种容易学习的脚本语言,它采用小程序段的方式实现编程。JavaScript同样是一种解释性语言,在程序运行过程中被逐行地解释,它与HTML表示结合在一起,从而方便用户的使用操作。

基于对象的语言,JavaScript是一种基于对象的语言,可以看作一种面向对象的语言。

安全性,JavaScript是一种安全性语言,它不允许访问本地硬盘,并不能将数据存入到服务器上,只能通过浏览器实现信息或动态交互,从而有效地防止数据的丢失。

动态性,JavaScript是动态的,它可以直接对用户或客户的输入作出响应,无须经过Web服务程序。

跨平台性,javaScript以赖于浏览器本省,与操作环境无关,只要能运行浏览器的计算机,并且该浏览器支持javaScript就可以正确执行javaScript。

javaScript和Java的区别
JavaScript其本身与Java语言并没有直接的联系,只是语法与Java语言类似。java是一种程序设计语言,而javaScript是一种脚本描述语言。
解释和编译
两种语言在浏览器中所执行的方式不同,java源代码在传递到客户端执行之前必须经过编译,因而客户端上必须具有相应平台上的java虚拟机。javaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送客户端由浏览器解释执行。

一个javaScript程序:
<html>
<head>
my first JavaScript!
</head>
<body>
<br>
this is a normal HTML document
<br>
<script language="JavaScript">
<!--
document.write("这是用javaScript显示的!")
//-->
</script>
<br>
back in HTML again
</body>
</html>
JavaScript代码由<script language="JavaScript">...</script>说明,在标识符<script>与</script>之间就可以加入JavaScript脚本。

通过<!--...//-->标识说明,若不认识JavaScript代码的浏览器,则所有在其中的表示均被忽略。如果认识,则执行其中的结果。

document.write()是javaScript的窗口对象方法,其功能是显示一串文字至HTML文件中。

2JavaScript的数据类型
javaScript提供了4中基本的数据类型用来处理数字和文字。
String字符串型, Number数值型,Boolean布尔型,Null空值,object、function

3JavaScript的变量
变量的主要作用是存取数据,提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明以及变量的作用域。
变量的命名,变量必须以字母开头,中间可以出现数字和下划线。不能使用javaScript中的关键字作为变量。

变量的类型
在JavaScript中,变量可以用命名var作声明,例:var mytest="this is a book";

JavaScript中,变量可以不做声明,而在使用时系统会自动在根据其赋值数据的类型来确定其变量的类型。

javaScript中同样有全局变量和局部变量之分,全局变量是定义在所有函数体之外,其作用范围是整个函数;而局部变量是定义在函数体之外,只对其该函数是可见的。

4JavaScript的常量
JavaScript的常量是不能改变的数据:
整型常量,整型常量可以使用十六进制、八进制和十进制表示其值。

实型常量是由整数部分加小数部分表示。

布尔值,布尔常量只有两种状态,True或False。

字符常量,使用单引号或双引号括起来的一个或几个字符。

空值,JavaScript中有一个空值Null。

控制字符,JavaScript中同样有些以反斜杠(/)开头不可显示的特殊字符,通常称为控制字符。

5JavaScript的表达式和运算符。
JavaScript中的三目运算符:
操作数?结果1:结果2
操作数为真,则表达式的结果为结果1,否则为结果2。

算术运算符
+(加),减(-),乘(*),除(/),取模(%),按位或(|),按位与(&),左移(<<),右移(>>),右移零填充(>>>)

-(取反),~(取补),++(递加1),--(递减1)
注意javascript数字相加可能被被当作字符连接在一起而不是,数字相加。需要使用parseInt()和parsetFloat()进行转换。

比较运算符
比较运算符的基本操作过程是,首先对它的操作数进行比较,然后再返回一个True或False。比较运算符共有6个。
<(小于),>(大于),<=(小于等于),>=(大于等于),==(等于),!=(不等于)

布尔逻辑运算符
!(取反),&&(逻辑与),||(逻辑或),^(异或),?:(三目运算符),==(等于),!=(不等于)

||表达式,下面的m为null,0,undefined时,v就取100
var m=null;
var v=m||100;
alert(v)

6JavaScript的函数
javaScript函数可以封装那些在程序中可能多次用到的模块,并且可作为事件驱动的结果所调用的程序,从而实现一个函数与事件驱动相关联。函数可以使用return返回值,也可以不返回。

javaScript函数定义:
function 函数名(参数变量名称){
函数体;
return 表达式;
}
例如:
function test(ff){
alert(ff);
}
记住不能写成function 函数(var 参数变量名称){...},不应该有var,这样会带来错误。

函数名对大小写敏感。


匿名函数
匿名函数就是没有名字的函数
var abc=function(x,y){
return x+y;
}
alert(abc(2,3)); // "5"
上面的操作其实就等于换个方式去定义函数,这种用法是我们比较频繁遇到的。
对匿名函数的调用其实还有一种做法,也就是我们看到的jQuery片段——使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)如:
方式1:强制运算符使函数调用执行
(function(x,y){
    alert(x+y);
    return x+y;
}(3,4));

方式2:强制函数直接量执行再返回一个引用,引用在去调用执行
(function(x,y){
    alert(x+y);
   return x+y;
})(3,4);
上面的两种方式都需要放在函数中作为一条语句执行。这两种方式都会有返回值,下面的匿名函数将会作为语句直接执行,没有返回值:
 void function(x) {
          x = x-1;
          alert(x);
    }(9);

错误的调用方式
function(x,y){
    alert(x+y);
    return x+y;
}(3,4);


闭包
“官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。看下面这段代码:
function a() {    var i = 0;    function b() {        alert(++i);    }    return b;}
var c = a();
c();//i==1
c();//i==2
这段代码有两个特点:
函数b嵌套在函数a内部;
函数a返回函数b。

当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个我们通常所谓的“闭包”。
让我们说的更透彻一些。所谓“闭包”,就是在构造函数体内定义另外的函数作为目标对象的方法函数,而这个对象的方法函数反过来引用外层外层函数体中 的临时变量。这使得只要目标 对象在生存期内始终能保持其方法,就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束,临时变量的名称也都消失了,但在目 标对象的方法内却始终能引用到该变量的值,而且该值只能通这种方法来访问。即使再次调用相同的构造函数,但只会生成新对象和方法,新的临时变量只是对应新 的值,和上次那次调用的是各自独立的。

闭包有什么作用和效果?
简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。
在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。
那么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会 被b引用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被GC回收.

javascript中运用闭包和自执行函数解决大量的全局变量问题
(function() {
  var msg = "Hello, world!";
  window.onunload = function() {
    alert(msg);
  }
})();
虽然代码增长了,但是:
msg变量只在各自的自执行函数内有效。不会和其它全局变量之间产生混淆。
代码的结构变得更加的清晰。
解决了大量使用全局变量的情况。

Javascript的垃圾回收机制
在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因。

***************
我们在调用函数向函数的参数传递字符串值,应该用单引号将字符串值括起来,不要用双引号括起来,否则没有响应。因为对于javascript,对于在双引号之中的内容,其中需要用引号括起来的字符串值,都必须使用单引号。如果使用在双引号中出现双引号,会使程序没有响应。
如:
onClick="test(‘123‘)"
onClick="test1(document.getElementById(‘t1‘).value)"
***************

在函数定义中,函数名后面有参数表,这些参数可以能是一个或几个,那么怎样才能确定参数便利的个数。在JavaScript中通过函数名.argument.length来检查参数的个数。

arguments
在函数代码中,使用特殊对象arguments,开发者无需指出参数名,就能访问他们。如:
在函数sayHi()中,第一个参数是message,用arguments[0]也可以访问这个值,即第一个参数的值是位于0,第二个参数的值是位于1。

还可以用arguments对象检测传递给函数的参数个数,引用属性 函数名.arguments.length即可。

escape()函数
escape(string)函数可以对字符串进行编码(是unicode编码的),这样可以在所有计算机上读取该字符串,escape方法会将传入参数中的所有空格,标点符号,重音字符以及其其它任何非ASCII字符转换为%xx的编码形式,这些特殊的字符需要unescape()方法才能解码出来。

unescape()函数是对escape()编码的字符串进行解码。
例如:
<html>
<head>
<title>数组</title>
<script language="javascript">
<!--
function test(){
var m=escape("hebinbin*& %");
document.writeln(m);
document.write(unescape(m));
}
//-->
</script>
</head>
<body onLoad="test();">
</body>
</html>

7JavaScript中的系统函数
JavaScript中的系统函数称为内部函数。
eval(字符串表达式),返回字符串表达式中的值。
例:test=eval("8+9+5/2");

如果eval函数括号中的参数是字符串数值(eval("33.4")),返回的将是数值33.4,而不是字符串了。

unEscape(string),返回字符串ASCII码。

escape(character),返回字符的编码。

parseFloat(floustring),返回实数。转换以数字开头的字符串,会去掉字符串后的非数字字符。
如:parseFloat("12px")会返回12

parseInt(numberstring,rad.X),返回不同进制的数。rad.X是数的进制,numberstring字符串数。

eval(string),将字符串转换称数字。

isNaN,判断是否是数值,NaN是一种特殊的number。
    if (isNaN(xxx))
    {
        alert(‘请输入数字!‘);
    }
    这个表达式认为123,1.23,-1.23甚至是-.23都是正确的

对话框的使用
JavaScript为编程者提供了在小的对话框中生成输出的能力。输出到对话框的最简单的方式是使用alert()方法。alert("字符串");
注意在alert()方法的前面没有对象名字,这是因为alert()方法是window对象的部分。

confirm()方法
window.confirm (message,ok,cancel)
confirm函数用于提供确认功能,它首先显示给定的message参数所包含的信息,并提供两个可选择的回答“ok”和“cancel”,然后等待用户选择其中的一个。如果用户选择“ok”则返回true;否则,如若选择“cancel”则返回false。

它有3个参数,其中参数message是欲显示的字符串形式的提示信息;参数ok也是用于显示的一个字符串信息,它可以是“OK”,也可以是其他表示OK意义的文本信息,如“I Agree”、“I Like”等等;同样,参数cancel也是用于显示的字符串信息,可以是“Cancel”文本,也可以是其他表示Cancel意义的文本信息。

与用户交互
与用户交互的最简便的方式是使用prompt()方法,prompt()建立一个具有所指定的消息的对话框,但它也提供1个缺省入口的入口字段。用户需要填充该字段,然后单击OK按钮。
prompt("提示字符串","入口字段缺省字符串");
prompt()方法将返回的结果可以存储于变量中,也可也用作其他方法的变元。

html标记语言是不区分大小写。但是javascript是区分大小写。

文本显示
使用document.write(),在当前文档中显示文本。
8JavaScript的程序流程
if条件语句:
if(表达式){
语句段1;
}else{
语句段2;
}
另外还有if-else if-else结构。

for循环语句:
for(初始化;条件;增量){
循环体语句段;
}

while循环:
while(条件){
循环语句段;
}


for...in 语句
for...in 语句用于对数组或者对象的属性进行循环操作。
  var u1=new User();
        u1.uname="张三";
        u1.age="18";
        
        var content="";
        for(var key in u1){
            content += key+": "+u1[key]+"<br/>";
        }    
        document.getElementById("content").innerHTML = content;
    }
结果为:
uname: 张三
age: 18


var mycolors = new Array(‘blue‘,‘red‘,‘yellow‘);
    function f1(){        
        var content="";
        for(var key in mycolors){
            content += key+": "+mycolors[key]+"<br/>";
        }    
        document.getElementById("content").innerHTML = content;
    }
结果为:
0: blue
1: red
2: yellow





break和continue语句
使用break语句跳出循环体,continue跳过循环内剩余的语句而进入下一次循环。

9JavaScript对象的使用
JavaScript是基于对象的语言,而不是面向对象的语言。主要是因为它没有提供抽象、继承、重载等有关方面向对象语言的许多功能,而是把其他语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统。

JavaScript中的对象是由属性和方法两个基本元素构成的。一个对象要真正地被使用,可采用以下3种方式获得:
引用JavaScript内部对象。
由浏览器环境中提供。
创建新对象。

JavaScript提供了几个用于操作对象的语句、关键字和运算符。
for...in语句
格式如下:
for(对象属性名 in 已知对象名)
该语句的功能是用于对已知对象的所有属性进行操作的控制循环。

with语句
该语句的功能是,在该语句体内,任何对现了的引用都被认为是这个对象的属性。
with object{
}

this关键字
this是对当前对象的引用。

new运算符
使用new运算符可以创建一个新的对象。
newObject=new Object(parameters table);

10对象属性和方法的引用
university是一个已存在的对象,Names、City、Date是它的三个属性。
使用“.”运算符,例:
university.Name="陕西省";

通过对象的下标实现引用
university[0]="陕西省";

通过字符串的形式实现
university["Name"]="陕西省";

对象方法的引用
JavaScript中对象方法的引用是非常简单的:
ObjectName.methods();

11常用对象的属性和方法
JavaScript提供了一些非常有用的常用的内部对象和方法。用户不需要用脚本来实现这些功能。

JavaScript提供了string、math和date三种对象和其他一些相关的方法。

JavaScript中对于对象属性与方法的引用有两种情况:一是该对象是静态对象,即在引用该对象的属性或方法时不需要为它创建实例;而另一种对象则在引用它的对象或方法必须为它创建一个实例,即该对象是动态对象。

串对象
该对象只有一个属性即length()。它表明字符串中的字符个数,包括所有符号。

串对象的方法
串对象的方法主要用于有关字符串在web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。

字符显示的控制方法:
big()大写体显示,italics()斜体字显示,blink()字体闪烁显示,small()字符用小体字显示,fixed()固定高亮显示,fontSize(size)控制字体大小,fontcolor(color)字体颜色。

字符串大小写转换
toLowerCase()为小写转换,toUpperCase()为大写转换。

字符搜索
indexOf[charactor,fromIndex]
从制定fromIndex位置开始搜索第一次出现charactor的位置。

返回字符串的一部分字符串:
substring(start,end);

算术函数math对象
math中提供6个属性,常用到的常数E,PI(3.1415926),

Math三角函数与属性
Math.sin() -- 返回数字的正弦值
Math.cos() -- 返回数字的余弦值
Math.tan() -- 返回数字的正切值
Math.asin() -- 返回数字的反正弦值
Math.acos() -- 返回数字的反余弦值
Math.atan() -- 返回数字的反正切值
Math.atan2() -- 返回由x轴到点(x,y)的角度(以弧度为单位)
Math.PI 属性 -- 返回圆的周长与其直径的比值(圆周率π),约等于3.1415926

Math自然对数相关函数与属性
Math.exp() -- 返回E(自然对数的底数)的x次幂(指数)
Math.log() -- 返回数字的自然对数
Math.E 属性 -- 返回自然对数的底数,E约等于2.718
Math.LN2 属性 -- 返回2的自然对数loge2,约等于0.693
Math.LN10 属性 -- 返回10的自然对数loge2,约等于2.302
Math.LOG2E 属性 -- 返回以2为底的E的对数log2e,约等于1.442
Math.LOG10E 属性 -- 返回以10为底的E的对数log10e,越等于0.434

Math四舍五入类函数
Math.abs() -- 返回数字的绝对值
Math.ceil() -- 返回大于等于数字参数的最小整数(取整函数),对数字进行上舍入
Math.floor() -- 返回小于等于数字参数的最大整数,对数字进行下舍入
Math.round() -- 返回数字最接近的整数,四舍五

Math最大最小类函数
Math.max() -- 返回数个数字中较大的值
Math.min() -- 返回数个数字中较小的值

Math幂指类函数
Math.pow() -- 返回底数的指定次幂
Math.sqrt() -- 返回数字的平方根
Math.SQRT1_2 属性 -- 返回0.5的平方根,或2的平方根除1,约等于0.707
Math.SQRT2 属性 -- 返回2的平方根,约等于1.414

Math随机数函数
Math.random() -- 返回0和1之间的伪随机数

日期和时间对象
提供一个有关日期和时间的对象,必须使用New运算符创建一个实例。
myDate=new Date();
日期的起始值是:1770年1月1日 00:00:00

获取日期的时间方法
getYear(),返回年数。
getMonth(),返回当月号数。
getDate(),返回当日号数。
getDay(),返回星期几。
getHours(),返回小时数。
getMintes(),返回分钟数。
getSeconds(),返回秒数。
getTime(),返回毫秒数。

设置日期和时间
setYear(),设置年份
setDate(var date),设置当前日期,参数是一个js日期对象
setMonth(),设置当前月份
setHours(),设置小时数
setMintes(),设置分钟数
setSeconds(),设置秒数
setTime(),设置毫秒数

12JavaScript的事件驱动
JavaScript是基于对象的语言,基于对象的基本特征就是采用事件驱动。

在javaScript中对象事件的处理通常由函数担任。格式如下:
funtion 事件处理名(参数表){
事件处理语句集;
}

单击事件onClick
当用单击鼠标按钮时,产生onClick事件。通常在下列基本对象中产生:
button
checkbox
radio
reset buttons(重设按钮)
submit buttons(提交按钮)
例:
<form>
<input type="button" value="改变" onClick="change()">//当用户单击按钮会调用change()方法。
</form>

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

onSelect选中事件
当text或textarea对象中的文字被加亮后,引发该事件。

onFocus获得焦点事件
当用户单击text或textarea以及select对象时,产生该事件。

onBlur失去焦点事件
当text或textarea以及select对象不再拥有焦点而退倒后台时,引发该事件。

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

onUnload卸载文件
当Web页面退出时引发onUnload事件,并可更新cookie的状态。


new
JavaScript中new运算符是创建一个新对象。使用方法:

new constructor[(arguments)]
其中constructor是必选项。对象的构造函数。如果构造函数没有参数,则可以省略圆括号。
arguments是可选项。任意传递给新对象构造函数的参数。

JavaScript中new运算符说明
new 运算符执行下面的任务:
创建一个没有成员的对象。
为那个对象调用构造函数,传递一个指针给新创建的对象作为 this 指针。
然后构造函数根据传递给它的参数初始化该对象。
示例
下面这些是有效的 new 运算符的用法例子。 my_object = new Object;
my_array = new Array();
my_date = new Date("Jan 5 1996");
var i = new Number( ‘1‘ );
var b = new Boolean( true );
var s = new String( ‘a‘ );
var temp = function( a, b )
  {
     this.a = a;
     this.b = b;
  }
  var t = new temp;


function test(a,b){
document.write(a);
document.write(b);
}
var t=new test(‘bb‘,‘b‘);
//创建t时会调用test函数

Object
我们可以认为 Object 是一个特殊的“类”,而这里的“类”即:function
同时,js中,所有对象(不包括js语言外部对象)都可视为是 Object 的一个实例, Function 不例外.

******************
typeof运算符
返回一个用来表示表达式的数据类型的字符串。
javascript typeof的用法经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组.

if(document.mylist.length != "undefined" ) {} 这个用法有误.
正确的是 if( typeof(document.mylist.length) != "undefined" ) {}
或 if( !isNaN(document.mylist.length) ) {}

如果一个javascript变量是undefined,则if(此变量){ ..语句}中的语句是不会执行的。


typeof的运算数未定义,返回的就是 "undefined".
运算数为数字 typeof(x) = "number"
字符串 typeof(x) = "string"
布尔值 typeof(x) = "boolean"
对象,数组和null typeof(x) = "object"
函数 typeof(x) = "function"

typeof 运算符返回一个用来表示表达式的数据类型的字符串。
可能的字符串有:"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。
如:
alert(typeof (123));//typeof(123)返回"number"
alert(typeof ("123"));//typeof("123")返回"string"

typeof后面跟上数据类型,还可以用来判断浏览器是否支持该数据类型。例如:
if(typeof(XMLHttpRequest)!=‘undefined‘){
document.write("浏览器支持XMLHttpRequest");
}

instanceof和typeof的区别
instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量。
typeof用以获取一个变量的类型,typeof一般只能返回如下几个字符串结果:number,boolean,string,function,object,undefined。我们可以使用typeof来获取一个变量是否存在,如if(typeof a!="undefined"){},而不要去使用if(a)因为如果a不存在(未声明)则会出错,对于Array,Null等特殊对象使用typeof一律返回object,这正是typeof的局限性。

如果我们希望获取一个对象是否是数组,或判断某个变量是否是某个对象的实例则要选择使用instanceof。instanceof用于判断一个变量是否某个对象的实例,如var a=new Array();alert(a instanceof Array);会返回true,同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类。再如:function test(){};var a=new test();alert(a instanceof test)会返回true。


判断NaN:
NaN在JavaScript中行为很怪异,是因为那NaN和任何值都不相等(包括它自己)。
            NaN === NaN; // false
因为下面的代码可能会让一些人抓狂:

            parseInt(‘hello‘, 10); // NaN
            parseInt(‘hello‘, 10) == NaN; // false
            parseInt(‘hello‘, 10) === NaN; // false

那么如何来检查一个值是否NaN?
可以使用window.isNaN来判断:
            isNaN(parseInt(‘hello‘, 10)); // true


*****************
javascript 中 "undefined" 与 "is not defined" 分析

方式1属于undefined
var age;
console.log(typeof age === ‘undefined‘);//只能用 === 运算来测试某个值是否是未定义的,因为 == 运算符认为 undefined 值等价于 null。


方式2属于is not defined
console.log(age1 === undefined);//null 表示无值,而 undefined 表示一个未声明的变量,或已声明但没有赋值的变量,或一个并不存在的对象属性。
如果不声明age1.方式2会报错.未声明的变量(is not defined)参与typeof运算是可以的.

****************
javascript当某元素的属性没有赋值默认为""。例如没有给button的id赋值则document.getElementById("button名").id等于"";

****************
前台javascript如何与后台JSP通信,可以通过AJAX来完成。另外还有方法:
后台JSP可以通过getParameter()来获得javascript提交过来的信息。
而前台javascript可以通过document.getElementById("id").value="<%=xxx%>"来将JSP变量的值传递给Dom元素

****************
在一个javascript函数中通过传过来的参数调用另一个函数:

<html>
<head>
<script type="text/javascript">

function m1(aa){
//传过来的参数为‘m2(kk)‘
alert(aa);//这一句只会输出字符串
var kk="alert";

//下面这一句将执行m2(kk)这个函数。alert出变量kk的内容。
eval(aa);

var ad=[];
ad.push(1,2,3);
var ct=‘ad‘;
var value=eval(ct+‘[2]‘);//将数组成员ad[2]的值赋给value
}

function m2(elem){
alert(elem);
}

</script>
</head>
<body>
<input type="button" id="ff"  value=" fsdfsd" onclick="m1(‘m2(kk);‘)"/>
</body>
</html>

*************************
禁用空格
给元素onkeypress事件,事件函数如下:
  function mypressw(){
     if(event.keyCode==32)
    {
        event.keyCode=0;
        
    }
    }


***********************
如果.js文件出现中文乱码,那个将.js文件中的中文换用相应的unicode编码格式,具体如何换成中文编码格式可以采用java的工具:native2ascii -GBK命令。

另外还有一个办法就是把该js文件另存为UTF-8的格式。

如果.js文件另存为的格式为UTF-8,那么后台reponse对象输出的格式也要设置为UTF-8(response.setCharacterEncoding("UTF-8");)否则输出给js文件的中文会出现乱码。


****************
<script type="text/javascript">
history.go(1);
</script>
让页面不能后退

****************
取消<a>的链接
如果给<a>指定了href属性,那么<a>就会执行它的链接,如果没有指定href属性就不会执行它的链接。

<a href="javascript:void(0);">单此处什么也不会发生</a>这样a就不会执行它的链接。void是javascript的一个操作符,该操作符指定要计算一个表达式但是不返回值。

a href=#与 a href=javascript:void(0) 的区别:
#包含了一个位置信息,默认的锚是#top 也就是网页的上端
javascript:void(0),仅仅表示一个死链接

当<a>既有onclick事件又有href属性,是先执行onclick事件,再执行href链接。

href可以连接到一个javascript函数,如:
<a href="javascript:test(this)" id="mmmmm">fffff</a>

function test(aa){
window.open("http://www.baidu.com","_blank");
alert(aa.id);
}
需要再函数名前面加上javascript:,也可以像函数传递参数,但是不能像onclick事件那样传递this参数。

**********************
javascript函数中不用var关键字声明的变量是全局的。
另外javascript的全局变量都是window对象的而属性,可以通过window.全局变量名来调用。

*****************
encodeURI()和decodeURI()是javascript的函数
encodeURI() 函数可把字符串作为 URI 进行编码,encodeURI 方法不会对下列字符进行编码:"#"、":"、"/"、";" 和 "?"。请使用 encodeURIComponent 方法对这些字符进行编码。
decodeURI()定义和用法:decodeURI() 函数可对 encodeURI() 函数编码过的URI 进行解码
decodeURIComponent()定义和用法:decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

encodeURIComponent(),将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件。因为 encodeURIComponent 方法对所有的字符编码(这与encodeURI不同),请注意,如果该字符串代表一个路径,例如 /folder1/folder2/default.html,其中的斜杠也将被编码。这样一来,当该编码结果被作为请求发送到 web 服务器时将是无效的。如果字符串中包含不止一个 URI 组件,请使用 encodeURI 方法进行编码。

escape(),对于所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替,其中 xx 等于表示该字符的十六进制数。例如,空格返回的是 "%20"

js其实内置了Unicode和UTF-8的编码解码函数了。
Unicode编码:escape
Unicode解码:unescape
UTF-8编码:encodeURI
UTF-8解码:decodeURI

由于encodeURI不对一些特殊字符进行编码那么对于test.action?organid=‘111‘&customerN=#jack&s_ServiceT=2012-08-02&e_ServiceT=2012-08-03这样的请求路径由于customerN的值#jack是以特殊符号开头,那么我们在后台通过request.getParamer是得不到customerN,s_Service,e_ServiceT的值,这样在遇到一些特殊字符就会出错。我们只有使用encodeURIComponent()来customerN的值进行处理了:"test.action?organid=‘111‘&customerN="+encodeURIComponent(‘#jack‘)+"&s_ServiceT=2012-08-02&e_ServiceT=2012-08-0",这样我们在后台通过
String value=new String(request.getParameter("customerN").getBytes("ISO8859-1"),"utf-8");就可以得到对应的值。


IE下ajax传中文参数到后台,后台得到的是乱码,则需要用encodeURIComponent(参数值)处理后再传递过去,后台按照UTF-8来获取就可以了。

Javascript版 UrlEncode和UrlDecode函数
function UrlEncode(str)
{
    var ret="";
    var strSpecial="!\"#$%&()*+,/:;<=>?[]^`{|}~%"; var tt="";
    for(var i=0;i<str.length;i++)
    {
        var chr = str.charAt(i);
        var c=str2asc(chr);
        tt += chr+":"+c+"n";
        if(parseInt("0x"+c) > 0x7f)
        {
            ret+="%"+c.slice(0,2)+"%"+c.slice(-2);
        }
        else
        {
            if(chr==" ")
                ret+="+";
            else if(strSpecial.indexOf(chr)!=-1)
                ret+="%"+c.toString(16);
            else
                ret+=chr;
        }
    }
    return ret;
}  

function UrlDecode(str){
    var ret="";
    for(var i=0;i<str.length;i++)
    {
        var chr = str.charAt(i);
        if(chr == "+")
        {
            ret+=" ";
        }
        else if(chr=="%")
        {
            var asc = str.substring(i+1,i+3);
            if(parseInt("0x"+asc)>0x7f)
            {
                ret+=asc2str(parseInt("0x"+asc+str.substring(i+4,i+6)));
                i+=5;
            }
            else
            {
                ret+=asc2str(parseInt("0x"+asc));
                i+=2;
            }
        }
        else
        {
            ret+= chr;
        }
    }
    return ret;
}
*********************
.js文件的编写: 新建一个文件它的后缀为.js即为js文件,在这个js文件中我们可以直接书写js语句,js的函数等。然后通过src把书写的好js文件导入要用的页面。如:
<script type="text/javascript"  src="${pageContext.request.contextPath}/js/insertIndex.js"></script>
注意直接在js文件中书写javascript的语句,javascript的函数,不用在js文件将书写的内容用<script language="javascript">....</script>包括,如果被包括则会有问题。

********************
区别IE还是火狐
navigator.appName
navigator.appName用于区别不同的浏览器,对于IE输出为Micrsoft Internet Explorer
对于火狐输出:Netscape

//简单判断是否是IE
 if(document.all) {
            alert("IE");
        } else {
            alert(‘FF OK‘);
        }


判断各种浏览器
function GetBrowser() {
    var ua = navigator.userAgent.toLowerCase();
    return {
        VERSION: ua.match(/(msie|firefox|webkit|opera)[\/:\s](\d+)/) ? RegExp.$2 : ‘0‘,
        IE: (ua.indexOf(‘msie‘) > -1 && ua.indexOf(‘opera‘) == -1),
        GECKO: (ua.indexOf(‘gecko‘) > -1 && ua.indexOf(‘khtml‘) == -1),
        WEBKIT: (ua.indexOf(‘applewebkit‘) > -1),
        OPERA: (ua.indexOf(‘opera‘) > -1),
        FIREFOX: (ua.indexOf(‘firefox‘) > -1)
    };
};
alert(GetBrowser().FIREFOX);//如果是火狐则返回true。

******************
getElementById在火狐与IE的不同
火狐中getElementById严格的按照元素的id属性进行匹配,而在IE中getElementById是先按照元素的name属性是否匹配,如果不匹配再看id属性是否匹配。

******************
js判断页面加载是否完成
var start;
    window.onload = function () {
        if(document.all) {//简单判断是否是IE
            start = setInterval(‘updateImg()‘, 1000);
        } else {
            alert(‘FF OK‘);
        }
    }
    function updateImg() {
         
        if (document.readyState == "complete") {
            try{
                alert(‘IE OK‘);
                clearInterval(start);//执行成功,清除监听
            }catch(err){
                return true;
            }
        }
    }
**********************************
在js文件中想页面某个元素中传入图片路径,如果路径前面是/开头则表示相对于当前根路径下的路径,如果不是以/开头,则表示相对于当前页面的路径。

如果js是写在jsp页面中的,那么可以在js代码中使用EL表达式。
*********************
在加载图片的时候(onload事件)对图片进行等比例压缩:
//第二个和第三个参数分别是不能超过的最大宽度和最大高度
<img onload="showImage(this,500,500)"/>
function showImage(ImgD,MaxWidth,MaxHeight){
     var image=new Image();
     image.src=ImgD.src;
   
     if(image.width>0 && image.height>0){
      if(image.width/image.height>= MaxWidth/MaxHeight)
          {
            if(image.width>MaxWidth)
            {
             ImgD.width=MaxWidth;
             ImgD.height=(image.height*MaxWidth)/image.width;
            }
            else
            {
             ImgD.width=image.width;
             ImgD.height=image.height;
            }
           }else{
            if(image.height>MaxHeight)
            {
             ImgD.height=MaxHeight;
             ImgD.width=(image.width*MaxHeight)/image.height;
            }
            else
            {
             ImgD.width=image.width;
             ImgD.height=image.height;
            }
        }
     }
    }

***********************
js回车提交表单
整个页面用一个回车提交事件:
<input type="button" value="回车提交" id="auto" onclick="alert(‘你按了回车‘)"/>
<script type="text/javascript">
    document.onkeydown = function(event){
     event= event || window.event;//火狐中是 window.event

        if((event.keyCode || event.which) == 13){
            document.getElementById("auto").click();
        }
    }

</script>

某个输入框中注册回车事件,一般用于用户在页面输入后按回车:
<script>
function enterIn(evt){
  var evt=evt?evt:(window.event?window.event:null);//兼容IE和FF
  if (evt.keyCode==13){
  var obj ;
  queryDistrict(obj,2);
}
}
</script>

<input type="text" id ="input1" maxlength="3" onkeydown="enterIn(event);"/>  


*********************
javascript函数指定命名空间:
下面为函数show()指定了命名控件com.corejsf,那么调用此函数则需要这样调用:com.corejsf.show("fff");
if(!com) var com={};
if(!com.corejsf){
com.corejsf={

show:function(param){
alert(param);
tt();//可以直接调用外部函数。
}

}
}

function tt(){
    alert("ttt");
}
或者
$.myspace = $.myspace || {};
$.myspace["list"] = {};
$.myspace["list"].lastSel = "fffff";
$.myspace["list"].selectArray = new Array();
alert($.myspace["list"].lastSel);
***************
通过使用var 关键字为在函数中使用的变量设定一个作用域
如果在函数中使用了var,那么该变量是局部变量
如果没有使用var,那么该变量是全局变量

*********************
mousedown、mouseup、click执行顺序是从左到右的,更重要的是一旦mousedown事件激活,正常情况(不在mousedown事件中绑定的方法使用alert类似方法,因为弹出对象框就阻止了事件传递,即后续调用事件丢失)下后面两个事件也肯定会被激活


*******************
js获取url问号后面的参数值
第一种方法:
function getParam(name){
            var search = document.location.search;
            var pattern = new RegExp("[?&]"+name+"\=([^&]+)", "g");
            var matcher = pattern.exec(search);
            var items = null;
            if(null != matcher){
                    try{
                            items = decodeURIComponent(decodeURIComponent(matcher[1]));
                    }catch(e){
                            try{
                                    items = decodeURIComponent(matcher[1]);
                            }catch(e){
                                    items = matcher[1];
                            }
                    }
            }
            return items;
    };
alert(getParam("ni"));//执行函数

第二种方法:
function GetRequest()  
{  
var url = location.search; //获取url中"?"符后的字串  
var theRequest = new Object();  
if(url.indexOf("?") != -1)  
{  
  var str = url.substr(1);  
  var strs = str.split("&");  
  for(var i = 0; i < strs.length; i ++)  
    {  
     theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);  
    }  
}  
return theRequest;  
}

var Request=new Object();  
Request=GetRequest();
alert(Request["ni"]);//获取对应的参数值

****************
判断页面元素是否存在
if(document.getElementById("XXX"))   
{   
//存在   
}

***********************
div的换行样式:
强制不换行 div{white-space:nowrap;}
自动换行  div{ word-wrap: break-word; word-break: normal; }
强制英文单词断行div{word-break:break-all;}

word-break : normal | break-all | keep-all
取值:
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本


**************
限制文本框只能输入数字
第一种方式:输入非数字后自动取消输入的非数字
<input type="text" value="" onkeyup="value==value.replace(/[^\d]/g,‘‘)"/>

第二种方式:输入非数字不能输入
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function setNumValue(event) {
event= event || window.event
 if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 35 || event.keyCode == 36 || event.keyCode == 13) {
 
    } else {
if(document.all) {
        return false;//IE
}else{
 event.preventDefault();//FF
}
    }
}
</script>
</head>
<body>
<input type="text" name="icstart" size="20" maxlength="20" onkeydown="return setNumValue(event);" class="boxinput" value="1">
</body>
</html>

***************************
javascript获取元素的标签名
如: <input id="date" type="text" value="2012-01-01"/>
$("#date")[0].tagName,将返回INPUT;
$("#date").attr("tagName"),不能这样获取。

*******************
javascript获得窗口滚动条信息
function getScroll()  {    
     var t, l, w, h;         
     if (document.documentElement && document.documentElement.scrollTop) {           

       t = document.documentElement.scrollTop;
      l = document.documentElement.scrollLeft;       
      w = document.documentElement.scrollWidth;         
      h = document.documentElement.scrollHeight;    
     } else if (document.body) {        
      t = document.body.scrollTop;      
      l = document.body.scrollLeft;        
      w = document.body.scrollWidth;        
      h = document.body.scrollHeight;    
     }
        
     return { top: t, left: l, width: w, height: h };
    }

*******************
判断一个变量是否是数组
var isArray = function(obj) {
return Object.prototype.toString.call(obj) === ‘[object Array]‘;
}


//表单数据对象化{name:‘luc‘,age:13},对于多选checkbox,将用逗号分隔值
    jQuery.fn.objParam=function(){
        var data={};
        if(this.length>0){
        var fields =this.serializeArray();
        jQuery.each( fields, function(i, field){
            var key=field.name;
            var keyvalue=$.trim(field.value);
            if(keyvalue!=""){
                if(data[key]==undefined)
                    data[key]=keyvalue;
                else
                    data[key]=data[key]+","+keyvalue;    
            }
        });
        }
        return data;
    };


/**
将指定的元素转换为拼接字符串name=luc&mobile=136xxx,并将value使用encodeURIComponent编码
防止中文乱码,后台在转换为utf-8来读取。
var senior_param=new Array("userName","brandId","customerInfo,infoValue");
<input type="text" id="userName" name="name" value="luc"/>
<select name="customerInfo" id="customerInfo">
<option value="customerN" selected>客户名称</option>
<option value="mobile">客户手机</opetion>
</select>
<input type="text" name="infoValue" id="infoValue"/>

*/
function paramFun(parray){
var str=‘‘;
for(var i=0;i<parray.length;i++){
 if(parray[i].indexOf(‘,‘)>0){
 var arr=parray[i].split(",");
 var k=$("#"+arr[0]).val();
 var v=jQuery.trim($("#"+arr[1]).val());
 if($("#"+arr[1]).attr("type")==‘checkbox‘ && !$("#"+arr[1])[0].checked)
   v=‘‘;

 if($("#"+arr[1]).attr("type")==‘radio‘ && !$("#"+arr[1])[0].checked)
   v=‘‘;
 
 if(v.length>0){
v=encodeURIComponent(v);
str+="&"+k+"="+v;
    }

 }else{
 var tk=jQuery.trim($("#"+parray[i]).val());
 var tv=$("#"+parray[i]).attr("name");
 if($("#"+parray[i]).attr("type")==‘checkbox‘ && !$("#"+parray[i])[0].checked)
   tv=‘‘;

 if($("#"+parray[i]).attr("type")==‘radio‘ && !$("#"+parray[i])[0].checked)
   tv=‘‘;
 
 if(tv.length>0){
tv=encodeURIComponent(v);
str+="&"+tk+"="+tv;
    }
 }

}
 return str;
}

***********************
js时间戳转换为时间格式
function formatDate(now) {
var year=now.getYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
}

var d=new Date(1230999938);
alert(formatDate(d));

************************
js在html中的执行顺序
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head runat="server">
<title>测试js的执行顺序</title>
<script language="javascript" type="text/javascript">
var a = "1这是一段在Header里面的JS代码";
alert(a);
alert($("#form1").length);
</script>
</head>
<body onload="javscript:alert(‘3这是在body的Onload事

以上是关于1javascript语法的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript

JavaScript语法之对象

1JavaScript基础

从零开始学习前端JAVASCRIPT — 1JavaScript基础

从零开始学习前端JAVASCRIPT — 1JavaScript基础

JavaScript入门笔记