JAVASCRIPT相关

大学时的笔记,是以前学习javascript的记录。

1 myeclipse的javascript插件

a.spket的安装

首先安装spket-1.6.11.jar,把spket包拷贝到一个你能记的住的目录下,我这放在c:根目录下,接着进入DOS下,进入C:根目录,输入JAVA -jar spket-1.6.11.jar命令,之后会提示你安装spket,按着他提示的一直下一步,中间会提示你是安装eclipse插件,还是单独的开发工具,我选择的是eclipse plugin,最后完成

接着打开eclipse进行配置,打开window-preferences里面会有一个spket栏目,spket下有个javascript profiles 里面有很多浏览器的版本号,选择new 创建一个ExtJs目录,然后 Add Library 增加extJs,接着选中刚new的,Add Files选择你下载的ext2.1\source\ext.jsb文件,这时候会添加很多ext2.1的文件在里面,你按顺序一个个点下来,不要跳跃的点,因为跳跃的点,可能导致下面的类加载到上面,以后可能会出现问题,按OK确定

然后关闭你的eclipse,重新打开,这时候创建一个JS文件,试着打入Ext.看下是否会弹出他下面的方法,如果不会,右键你的JS文件,有个Open with - 选择spket JavaScript Editor,再尝试下,应该就没问题了

b.JSeclipse的安装

JSEclipse是个Eclipse下的免费Javascript脚本编辑器,最大的特点就是对js的自动完成功能非常完美。 

在Eclipse中如何安装JSEclipse: 在http://www.interaktonline.com/Products/Eclipse/JSEclipse/Overview/中下载JSEclipse中下载JSEclipse_1.5.5.jar。JSEclipse_1.5.5解压后。 

在Eclipse里如下选择:Help > Software Updates ->Find and Install再随后打开的对话框里选择Search for new features to install,再随后打开的对话框里选择New remote site按钮,在打开的"New Update Site"中输入如下: 

Name: JSEclipse from Adobe Labs 
URL : http://download.macromedia.com/pub/labs/jseclipse/autoinstall 
点击OK 
随后将 JSEclipse from Adobe Labs 选中,然后就是安装了;

参考文档:http://hi.baidu.com/yingshuishui1/item/fd3033ed7eadf5255b2d644a

2javascipt的注释

单行注释

插入单行注释的符号是“//”

多行注释

多行注释以"/*"开始,以"*/"结束。

3javascript获取表单对象 

document.all[]
document.表单名称.对象名称.属性值
getElementById()
getElementsByName()
getElementsByTagName()
参考文档: http://www.darkmi.com/blog/archives/482


4 javascript错误:xx is not a function

a 表单提交的时候遇到submit is not a function.要检查一下表单里不能有name="submit"的元素,否则在提交的时候该对象会和submit方法混淆发生错误。

b 另一种情况是name和id与方法名同名了,解决方法就是将name和id重命名。

5 javascript判断数字

javascript在通过parseIn或parseFloat将字符串转化为数字的过程中,如果字符串中包含有非数字,那么将会返回NaN,参考下面代码代码如下:

parseInt("Hello",10);//return NAN

parseInt("110",10);//return 110

所以简单的判断字符串是否为数字的方法就是利用isNaN(),如果返回true,则该字符串不为数字,否则为数字。代码如下:

isNaN(parseInt("Hello",10));//true;

isNaN(parseInt("110",10));//false;

注:不能利用以下方式判断:代码如下:

parseInt("Hello",10)==NaN;//return false

parseInt("110",10)==NaN;//return false

因为NaN和自身并不想等,这个比较特殊,判断NaN的方式利用isNaN();

6使用javascript及正则表达式判断数字

function checkRate(input){

     var re = /^[0-9]+.?[0-9]*$/;   //判断字符串是否为数字     
                                    //判断正整数 /^[1-9]+[0-9]*]*$/  
     if (!re.test(input.rate.value)){
        alert("请输入数字(例:0.02)");
        input.rate.focus();
        return false;
     }
}

下面为普通函数写法

function BASEisNotNum(theNum){

  //判断是否为数字
  if (BASEtrim(theNum)=="")
    return true;
  for(var i=0;i<theNum.length;i++){
    oneNum=theNum.substring(i,i+1);
    if (oneNum<"0" || oneNum>"9")
      return true;
  }
  return false;

}
function BASEisNotInt(theInt){

  //判断是否为整数
  theInt=BASEtrim(theInt);
  if ((theInt.length>1 && theInt.substring(0,1)=="0") || BASEisNotNum(theInt)){
    return true;
  }
  return false;

}
function BASEisNotFloat(theFloat){

  //判断是否为浮点数
  len=theFloat.length;
  dotNum=0;
  if (len==0)
    return true;
  for(var i=0;i<len;i++){
    oneNum=theFloat.substring(i,i+1);
    if (oneNum==".")
      dotNum++;
    if ( ((oneNum<"0" || oneNum>"9") && oneNum!=".") || dotNum>1)
      return true;
    }
    if (len>1 && theFloat.substring(0,1)=="0"){
       if (theFloat.substring(1,2)!=".")
         return true;
    }
   return false;
  }

7Javascript 判断输入是否为空 

/** 修剪字串前后的空格  */
function trim(s) {
  var count = s.length;
  var st    = 0;       // start
  var end   = count-1; // end
 
  if (s == "") return s;
  while (st < count) {
    if (s.charAt(st) == " ")
      st ++;
    else
      break;
  }
  while (end > st) {
    if (s.charAt(end) == " ")
      end --;
    else
      break;
  }
  return s.substring(st,end + 1);
}
8javascript中history的作用
History 長度 = 0 [使用 history.length]
回前一頁 [使用 history.go(-1)]
重新整理 [使用 history.go(0)]
跳下一頁 [使用 history.go(+1)]

参考文档:http://neural.cs.nthu.edu.tw/jang/books/javascript/example/histGo01.htm

9html中的id和name的区别

name的一些用法:

用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示,比如inputselecttextarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。

用途2: HTML元素Input type='radio'分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。

用途3: 建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用Name,如:<a name="PageBottom"></a>,我们就获得了一个页面锚点。

用途4: 作为对象的Identity,如AppletObjectEmbed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。

用途5: IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)

用途6: 某些特定元素的属性,如attributemetaparam。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">Meta<META NAME = "Author" CONTENT = "Dave Raggett">

要是页面中有n(n>1)个HTML元素的ID都相同了怎么办?在DHTML对象中怎么引用他们呢?如果我们使用ASPX页面,这样的情况是不容易发生的,因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一,这是页面会被抛出异常而不能被正常的render。要是不是动态页面,我们硬要让ID重复那IE怎么搞呢?这个时候我们还是可以继续使用document.getElementById获取对象,只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组,ID重复的元素按Render的顺序依次存在于数组中。

参考文档:http://www.cnblogs.com/birdshome/archive/2005/01/31/html_id_name.html

/**

* 2013.05.14 

*/

1Java和JavaScript的区别


a.基于对象和面向对象

Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。

b.解释和编译

两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。

JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。

c.强变量和弱变量

两种语言所采取的变量是不一样的。Java采用强类型变量检查,即所有变量在编译之前必须作声明。如:

Integer x; 

String y; 

x=1234; 

x=4321;

其中X=1234说明是一个整数,Y=4321说明是一个字符串。JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型,如:

x=1234; 

y="4321";

前者说明x为其数值型变量,而后者说明y为字符型变量。

d.代码格式不一样

Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写HTML文档就像编辑文本文件一样方便。

e.嵌入方式不一样

在HTML文档中,两种编程语言的标识不同,JavaScript使用<Script>...</Script>来标识,而Java使用<applet>...</applet>来标识。

f.静态联编和动态联编

Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查,如不经编译则就无法实现对象引用的检查。

2 innerhtml和innertext的区别


innerHTML 设置或获取位于对象起始和结束标签内的 HTML 
outerHTML 设置或获取对象及其内容的 HTML 形式 
innerText 设置或获取位于对象起始和结束标签内的文本 
outerText 设置(包括标签)或获取(不包括标签)对象的文本 


<div id = "test">
    <span style="color:red">test1</span>
    <span style="color:blue">test2</span>
</div>
object.innerHTML
也就是从对象的起始位置到终止位置的全部内容,包括Html标签

显示的结果是:<span style="color:red">test1</span><span style="color:blue">test2</span>

object.innerText

从起始位置到终止位置的内容, 但它去除Html标签
显示的结果是:test1 test2



object.outerHTML
除了包含innerHTML的全部内容外, 还包含对象标签本身。
显示的结果是:<DIV id=test><SPAN style="COLOR: red">test1</SPAN> <SPAN style="COLOR: blue">test2</SPAN> </DIV>

object.outerText

这个显示的结果与innerText没有什么区别
显示的结果是:test1 test2

另外说明一点的是这个四个属性只有innerHTML是符合W3C的标准的,其他三个只适用于IE浏览器
还有就是要在非IE的浏览器中输出与innerText一样的结果,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

参考文档:http://blog.csdn.net/lynnlin1122/article/details/2905442

3获取键盘的值


常见值


if(event.keyCode==32){realkey=’\’ 空格\’’} 
    if(event.keyCode==13){realkey=’\’ 回车\’’} 
    if(event.keyCode==27){realkey=’\’ Esc\’’} 
    if(event.keyCode==16){realkey=’\’ Shift\’’} 
    if(event.keyCode==17){realkey=’\’ Ctrl\’’} 
    if(event.keyCode==18){realkey=’\’ Alt\’’} 


用输入键控制程序的脚本:


function find(key_event){

    //如果是按下了回车键
    if (key_event.keyCode == 13){
        //响应事件 :document.getElementById('cb_query').click();
        return false;
    }
}

参考文档:http://hi.baidu.com/baijianqianshi/item/11671dde06739aeb55347fef

4JavaScript屏蔽鼠标右键

<script language="javascript">
function document.oncontextmenu() { 
   return false; 
} 
</script>
function nocontextmenu(){ 
  if(document.all) {
    event.cancelBubble=true;
    event.returnvalue=false; 
    return false; 
}}
<body onmousedown="rclick()" oncontextmenu= "nocontextmenu()">
<script language="javascript">
function rclick(){
if(document.all) {
  if (event.button == 2){
    event.returnvalue=false;
  }
}}
</script>

oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键

<table border oncontextmenu=return(false)><td>no</table> 可用于table

<body onselectstart="return false"> 取消选取、防止复制 
oncopy="return false;" oncut="return false;" 防止复制

参考文档:http://www.ijavascript.cn/yanzheng/javascript-mouse-shield-125.html


总结一下,本文介绍了一些javascript的使用小技巧。



你可能感兴趣的:(JAVASCRIPT相关)