BlogJava-和风细雨-随笔分类-JavaScript

JavaScript基本语法

和风细雨 — Fri, 14 Mar 2008 04:49:00 GMT

JavaScript的运行环境和代码位置

编写JavaScript脚本不需要任何特殊的软件，一个文本编辑器和一个Web浏览器就足够了,JavaScript代码就是运行在Web浏览器中。
用JavaScript编写的代码必须嵌在一份html文档才能得到执行，这可以通过两种方法得到，第一种是将JavaScript代码直接写在html文件中，这多用于仅适用于一个页面的JS程序；另一种是把JavaScript代码存入一个独立的文件中（.js作为扩展名）,在利用

这个页面应该很快消失,如果它停止说明Web容器已经停止运作了，或JavaScript功能未开启

将JavaScript存入单独的文件中(页面文件)

<%@ page contentType="text/html; charset=UTF-8" %>

"我的事务备忘录"用户登录页面

type="text/css" />

欢迎进入"个人事务备忘录",请输入您的用户名和密码,再按登录键登录

   用户登录.

    用户名:
           style="width: 300px; height: 20px" />


    密码:
           style="width: 300px; height: 20px" />



           style="width: 100px; height: 20px" />

将JavaScript存入单独的文件中(ajax.js)

var prjName="/MyTodoes/";
var ajaxObj;

function $(id){
return document.getElementById(id);
}

JavaScript中的语句和注释

JavaScript中的语句和Java中一样,也是一行书写一条语句,末尾加上分号’;’,虽然js中也可以把多条语句写在一行,但推荐不要这样做.
JavaScript中注释也和Java中一样,以// 来注释单行,/*….*/来注释多行,虽然HTML风格的注释在JS中也有效,但建议不要这样做.

JavaScript中的变量

在js中,变量允许字母,数字,美元符号和下划线字符.变量定义使用var关键字,如
var age;
age=23;
var name=“andy”;
虽然js允许程序员可以直接对变量进行赋值而无需提前对它们做出声明,但我们强烈建议不要这样做.
Js中变量和其它语法元素都是区分字母大小写的,如变量age,Age,AGE没有任何关系,它们都不是同一个变量.

JavaScript是一种弱类型语言

和强制要求程序员对数据类型做出声明的强类型(Strongly typed)程序设计语言如java,C#等不一样,js不要求程序员进行类型说明,这就是所谓的弱类型”weakly typed”语言.这意味着程序员可以随意改变某个变量的数据类型.
以下写法在Java中是绝对不允许的,但在js中完全没有问题:
var age=23;
age=“Twenty three”
Js并不关心age的值是字符串还是变量.

JavaScript中的数据类型-字符串

字符串必须放在单引号或双引号中.如
var name=“Andy”;
var name=‘Bill’;
一般情况下宜使用双引号,但如果字符串中有双引号则应该把字符串放在单引号中,反之则应该把字符串放在双引号中.

JavaScript中的数据类型-数值

Js中并没有int,float,double,long的区别,它允许程序员使用任意位数的小数和整数,实际上js中的数值应该被称为浮点数.
如:
var salary=10000;
var price=10.1;
var temperature=-6;

JavaScript中的数据类型-布尔值

Js中的布尔值和Java中的一致,true表示真,false表示假,如:
var isMale=true;
var isFemale=false;

注意布尔值true和false不要写成了字符串”true”和’false’.

JS中的函数

如果需要多次使用同一组语句，可以把这些语句打包成一个函数。所谓函数就是一组允许人们在代码中随时调用的语句。从效果上看，每个函数都相当于一个短小的脚本。
和Java中每个函数都在类中不一样，JS中函数不必属于一个类，在使用上它类似于Java中的静态公有函数，只要引入这个函数所在的文件就可以使用它。

JS中函数的语法

JS中，一个函数的大致语法如下：
function fname(args){
statements;
}
Function是函数的固定标志；fname是函数名；args是函数参数，它可以有很多个，只要你把它们用逗号分割开来即可；statements是其中的语句，每句结尾都和java中一样用“；”表示结束。

在定义了这个函数的脚本（页面）中，你可以从任意位置去调用这个函数；引入这个页面后，你还可以从其它页面访问它。

一般来说，对于共通性强，适用面广，会在多个页面中调用的函数，我们一般把它们放在一个JS页面中，然后由需要使用这些函数的页面引入它们；而对于只适用于一个页面的函数，还是把它放在单个页面中较好。

JS函数的返回值

在JS中，函数不仅能够以参数的形式接受数据，运行代码，它和其它编程语言中的函数一样，可以返回数据。
让JS函数返回数据，你不需要也不能在函数签名上动任何手脚，只需要用return语句返回你想返回的数字即可，举例如下：
function substract(op1,op2){
return op1-op2; }
}

JS中变量的作用域

在JS中，我们提倡用var来定义一个变量，凡是变量就会有作用域的问题，根据定义方式和位置的不同，它既可能是全局的，也有可能是局部的。
用var定义在脚本文件中，不属于任何一个函数的变量，它的作用域就是全局性的，它可以在脚本中的任何位置被引用，包括有关函数的内部。全局变量的作用域是整个脚本。
用var定义在函数中的变量，它的作用域就是局部性的，它的作用域仅限于这个函数，在函数的外部是无法使用它的。
不用var定义在函数中的变量，它的作用域是全局的，如果你的脚本里已经存在一个与之同名的变量，这个函数将覆盖那个现有变量的值。
定义函数时，我们必须明确的把它内部的变量都明确的声明为局部变量，如果从来没有忘记在函数中使用var关键字，就可以避免任何形式的二义性隐患。

JS中的数组

在JS中，我们使用Array关键字声明数组，在声明时对数组长度进行限定，如：
var arr=Array(3)；
有时运行起来才知道数组长度，JS中我们也可以这样定义数组：
var arr=Array();
向数组中添加元素时你需要给出新元素的值，还需要在数组中为新元素制定存放位置，这个位置由下标给出，如arr[1]=4。

在JS中定义数组的例子

定义方式一：
var arr=Array(3)；
arr[0]=“刘备”； arr[1]=“关于”； arr[2]=“张飞”；
定义方式二：
var arr=Array();
arr[0]=3; arr[1]=4;arr[2]=5;
定义方式三：
Var arr=Array(“1”,2，true);
定义方式四：
var arr=[“征东”,”平西”,”镇南”,”扫北”];

和风细雨 2008-03-14 12:49 发表评论

在JavaScript中使用正则表达式验证表单字段

和风细雨 — Sun, 02 Mar 2008 08:00:00 GMT

JavaScript中对正则表达式的支持
正则表达式在JS的最大用处就是验证表单字段，如验证数字，验证邮件和验证汉字等。
JavaScript中对正则表达式的支持是通过RegExp类实现的。你可以以如下方式建立一个正则表达式：
var regex=new RegExp("^[1-9]+\\d*$");
而验证的方法是regex.test(str)，它返回str是否符合regex的结果。

JS中正则表达式和Java中的异同。
JavaScript
1.建立：
var regex=new RegExp("^[1-9]+\\d*$");
2.验证
return regex.test(str);
3.写法上，要验证字符串，JS中必须把起始符号^和结束符号$写全,否则就是包含验证而不是全匹配验证.除此外其它部分都是一致的.

Java
1.建立:
String regex="\\d*";
2.验证：
return Pattern.matches(regex,text);
3.写法上,JAVA中进行全匹配验证不需写全起始符号^和结束符号$.

一个完整的验证过程

表单元素:
value="1" />

表单提交之前的验证函数:
var positiveinteger=$("positiveinteger").value;
if(isPositiveInteger(positiveinteger)==false){
     $("positiveinteger").focus();
     $("checkMsg").innerHTML="正整数验证不通过";
     return false;
}
else{
     $("checkMsg").innerHTML="正整数验证通过";
}

验证函数:
function isPositiveInteger(str){
var regex=new RegExp("^[1-9]+\\d*$");
return regex.test(str);
}

常用验证函数

/**
* 正整数验证*/
function isPositiveInteger(str){
var regex=new RegExp("^[1-9]+\\d*$");
return regex.test(str);
}

/**
* 负整数验证
*/
function isNegativeInteger(str){
var regex=new RegExp("^-{1}\\d+$");
return regex.test(str);
}

/**
* 非负整数验证
*/
function isNonnegativeInteger(str){
var regex=new RegExp("^\\d+$");
return regex.test(str);
}

/**
* 整数验证
*/
function isInteger(str){
var regex=new RegExp("^-?\\d+$");
return regex.test(str);
}

/**
* 有理数验证
*/
function isRationalNumber(str){
var regex=new RegExp("^-?\\d+(\\.*)(\\d*)$");
return regex.test(str);
}

/**
* 英语字母验证
*/
function isLetter(str){
var regex=new RegExp("^[a-zA-Z]+$");
return regex.test(str);
}

/**
* 英数字验证
*/
function isLetterOrInteger(str){
var regex=new RegExp("^[a-zA-Z0-9]+$");
return regex.test(str);
}

/**
* 邮件验证
*/
function isEmail(str){
var regex=new RegExp("^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$");
return regex.test(str);
}

/**
* 汉字验证
*/
function isCharacter(str){
var regex=new RegExp("^[\u4E00-\u9FA5]+$");
return regex.test(str);
}

/**
* 货币验证
*/
function isCurrency(str){
return str.search("^\\d+(\\.\\d{0,2})*$")==0;
}

和风细雨 2008-03-02 16:00 发表评论

使用JavaScript操作表单

和风细雨 — Sun, 02 Mar 2008 07:23:00 GMT

获取表单的引用

在开始对表单进行编程前，必须先获取表单

的引用.有以下方法可以来完成这一操作。
1)采用典型的DOM树中的定位元素的方法getElementById()，只要传入表单的id即可获得表单的引用:
var vform=document.getElementById(“form1”);

2)还可以用document的forms集合,并通过表单在form集合中的位置或者表单的name特性来进行引用:
var oform=document.forms[0];
var oform=document.forms[“formZ”];

访问表单字段

每个表单字段,不论它是按钮,文本框还是其它内容,均包含在表单的elements集合中.可以用它们的name特性或者它们在集合中的位置来访问不同的字段:
Var oFirstField=oForm.elements[0];
Var oTextBox1=oForm.elements[“textBox1”];
此外还可以通过名字来直接访问字段,如:
Var oTextBox1=oForm.textbox1;
如果名字中有标记,则可以使用方括号标记:
Var oTextBox1=oForm[“text box 1”];

最常见的访问表单字段的方法

最简单常用的访问表单元素的方法自然是document.getElementById(),举例如下:
value="" />
在JS中取得此元素内容的代码为:
var name=document.getElementById("name").value
这种方法无论表单元素处于那个表单中甚至是不在表单中都能凑效,一般情况下是我们用JS访问表单元素的首选.
鉴于document.getElementById比较长,你可以用如下函数代替它:
function $(id){
return document.getElementById(id);
}
把这个函数放在共有JS库中,在jsp页面通过如下方法引用它:

"記賬系统"添加资源页面

type="text/css" />

此后你就可以直接使用$访问表单元素中的内容:
var name=$("name").value;

表单字段的共性

以下是所有表单字段(除了隐藏字段)
Disabled可以用来获取或设置表单控件是否被禁用.
Form特性用来指向字段所在的表单.
Blur()方法使表单字段失去焦点.
Focus()方法使表单字段获得焦点.
当字段失去焦点是,发生blur事件,执行onblur事件处理程序.
当字段获取焦点时,发生focus事件,执行onfocus事件处理函数.

当页面载入时将焦点放在第一个字段

在body代码中如此书写:

JS函数如下书写:
Fucntion focusOnFirstElm(){
document.forms[0].elements[0].focus();
}
如果第一个字段不是隐藏字段此方法就是凑效的,如果是的话把elements的下标改成非隐藏字段的下标即可.

控制表单只被提交一次

由于Web的响应问题，用户有可能会点击多次提交按钮从而创建重复数据或是导致错误，我们可以使用JS对提交按钮进行设置以让表单只被提交一次。

这里在点击提交按钮时执行了两句JS代码，一次是this.disabled=true；这是让提交按钮被禁用；一次是this.form.submit()这是提交这个按钮所在的表单。

检查用户在表单元素中的按键

为控件添加 onkeydown事件处理，然后在函数查看keyCode，就能知道用户的按键，代码如下：
value="" onkeydown="testkey(this,event)"/>
JS代码如下：
function testkey(obj,event){
alert(event.keyCode);
}

这种技巧在改善用户体验如按回车键提交表单时很常用。

和风细雨 2008-03-02 15:23 发表评论

常见JavaScript验证

和风细雨 — Sat, 23 Feb 2008 10:34:00 GMT

/**
* Positive Integer Check
*/
function isPositiveInteger(str){
    var regex=new RegExp("^[1-9]+\\d*$");
    return regex.test(str);
}

/**
* Negative Integer Check
*/
function isNegativeInteger(str){
    var regex=new RegExp("^-{1}\\d+$");
    return regex.test(str);
}

/**
* Nonnegative Integer Check
*/
function isNonnegativeInteger(str){
    var regex=new RegExp("^\\d+$");
    return regex.test(str);
}

/**
* Integer Check
*/
function isInteger(str){
    var regex=new RegExp("^-?\\d+$");
    return regex.test(str);
}

/**
* Rational number Check
*/
function isRationalNumber(str){
    var regex=new RegExp("^-?\\d+(\\.*)(\\d*)$");
    return regex.test(str);
}

/**
* Letter Check
*/
function isLetter(str){
    var regex=new RegExp("^[a-zA-Z]+$");
    return regex.test(str);
}

/**
* Letter Integer Check
*/
function isLetterOrInteger(str){
    var regex=new RegExp("^[a-zA-Z0-9]+$");
    return regex.test(str);
}

/**
* Email Check
*/
function isEmail(str){
    var regex=new RegExp("^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$");
    return regex.test(str);
}

/**
* Character Check
*/
function isCharacter(str){
    var regex=new RegExp("^[\u4E00-\u9FA5]+$");
    return regex.test(str);
}

/**
* Currency Check
*/
function isCurrency(str){
    return str.search("^\\d+(\\.\\d{0,2})*$")==0;
}

和风细雨 2008-02-23 18:34 发表评论