Javascript教程，javascript入门,javascript学习笔记(经典实例)

目 录 1.基本控件的使用 2.让TextArea自动换行 3.让TextArea支持Table键 4.复制数据到剪贴板 5.得到当前选中的文本 6.客户端脚本的基本对象 7.保护自己编写的HTML和脚本的方法 8.IE地址栏前换成自己的图标 9.可以在收藏夹中显示出你的图标 10.关闭输入法 11.直接查看源代码 12.在Javascript中自定义一个对象（属性，方法） 13.取得控件的绝对位置 14.光标是停在文本框文字的最后 15.判断上一页的来源 16.最小化、最大化、关闭窗口 17.检查一段字符串是否全由数字组成 18.获得一个窗口的大小 19.怎么判断是否是字符 20.检测某个网站的链接速度 21.各种样式的光标 22.让TEXTAREA自适应文字的行数 23.日期减去天数等于第二个日期 24.选择了哪一个Radio 25.获得本页url的request.servervariables("")集合 26.ENTER键可以让光标移到下一个输入框 28.引用其他网页 29.常用的正则表达式 30.弹出来必须关闭才能继续运行的提示对话框 31.取得查询字符串，然后就生成成对的数组 32.另类的onload函数 33.取得IE的版本 34.提交表单到不同地方 35.判断是否是整数 36.链接css文件和js文件 37.引用框架的内容 38.打开没有最大化按钮的窗口 39.在页面上显示一个有边框的Frame 40.判断日期1是不是大于日期2 41.常用的Javascript内建类的方法 42.如何在另一个窗体对原来窗体进行操作 43.层的隐藏与显示 44.禁止右键 45.得到当前显示器的分辨率 46.定时运行特定代码 47.得到本页网址 48.保存当前页面的内容 49.用模式窗体，打开一个参数获取窗体 50.Web打印文档

1.基本控件的使用 　 控件名.value 控件名.value 控件名[i].checked    .value  for each ob in控件名    if ob.checked then       window.alert ob.value next 控件名.checked    .value Select 1 Select 3 Select 2Select 1 Select 2 Select 3 Select 4Select 1 Select 2 Select 3 Select 4      单行         多行         多选 添加选项 ExpList.add(new Option("New Option","3")); 删除选项 ExpList.remove(ExpList.selectedIndex); 设置当前选项位置 ExpList.selectedIndex=ExpList.length-1; 循环整个选项 并判断是否被选择 for(i=0;i<ExpList.options.length;i++) {   if(ExpList.options[i].selected){      //ExpList.options[i].text;      //ExpList.options[i].value;   } } 单个选项的值 ExpList.options[i].text; ExpList.options[i].value; <span ></div> 重新设计包含的html SomePlace1.innerHTML="任意html字符串" 让该空间的内容消失 SomePlace1.style.display="none"; 让该空间的内容显示 SomePlace1.style.display="block"; 鼠标滑过出现提示 title="Help" <input type="hidden" name="MyValueName" value="123"> 控件名.value 跟随事件Event（声明方式特殊） <div id=hello1 style=position:absolute>太过分了！吃饭不叫我</div> <SCRIPT for=document EVENT=onmousemove> document_onmousemove(); function document_onmousemove() {   hello1.style.left=event.x+10;   hello1.style.top=event.y+10; } </SCRIPT>

<返回>

2.让TextArea自动换行

  使用TextArea的Wrap属性

Wrap may be set to one of the following values: OFF - Default, lines are not wrapped. PHYSICAL - Wrap lines and place new line characters where the line wraps. VIRTUAL - Wrap lines on the screen, but receive them as one line.

ASP中手动换行用： replace(rs("A"),"</br>", VBCRLF)
str=request.querystring("text1")
str=Replace(str, Chr(32), " ")
'把空格换成 标志
str=Replace(str, vbCrLf, "<br>")
'把回车换行符换成<br>标志
调出时再转过来就好了

<返回>

3.让TextArea支持Table键
<SCRIPT LANGUAGE="JavaScript">
<!--
function testTab()
{
   var sel = document.selection.createRange();
   var mytext= sel.text;
   var i,j,k;
   if (event.shiftKey && event.keyCode == 9)
   {
      arr=mytext.split(String.fromCharCode(13,10))
      mytext=""

      for(k=0;k<arr.length;k++)
      {
         for (j=1; j<=4;j++)
         {
            if(arr[k].substr(0,1)=="\u0020")
            {
               arr[k]=arr[k].slice(1)
            }
         }
         mytext += arr[k] + ((k==(arr.length-1))? "" : String.fromCharCode(13,10));
      }
      with(sel){
         sel.text = mytext;
         collapse(true)
         moveEnd("character",0)
         moveStart("character",(mytext.length ) * -1)
         select()
      }

      window.event.cancelBubble = true;
      event.returnValue = false;
      return;
   }
   if (event.keyCode == 9)
   {
      arr=mytext.split(String.fromCharCode(13,10))
      mytext=""
      for(j=0;j<arr.length;j++)
      {
         mytext += "\u0020\u0020\u0020\u0020" + arr[j] + ((j==(arr.length-1))? "" : String.fromCharCode(13,10));
      }
      with(sel){
         sel.text = mytext;
         collapse(true)
         moveEnd("character",0)
         moveStart("character",(mytext.length -4) * -1)
         select()
      }

      window.event.cancelBubble = true;
      event.returnValue = false;
      return;
   }
}
//-->
</SCRIPT>

<返回>

4.复制数据到剪贴板

 JM_cc(txt)

 window.clipboardData.setData("Text", txt);
 global.focus();
 document.execCommand('Paste');
 window.clipboardData.setData("Text", old);

<返回>

5.得到当前选中的文本

var sel = document.selection.createRange();
var mytext= sel.text;  //当前选中的文本


var e = event.srcElement;  //设置文本为选中
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();

<返回>

6.客户端脚本的基本对象
　

navigator screen window history location frames[]; Frame document anchors[]; links[]; Link applets[] embeds[] forms[]; Form Button Checkbox elements[]; Element Hidden Password Radio Reset Select options[]; Option Submit Text Textarea images[]; Image more >>>

浏览器对象 屏幕对象 窗口对象 　历史对象 　地址对象 　框架对象 　文档对象 　　连接对象 　　Java小程序对象 　　插件对象 　　表单对象 　　　按钮对象 　　　复选框对象 　　　表单元素对象 　　　隐藏对象 　　　密码输入区对象 　　　单选域对象 　　　重置按钮对象 　　　选择区（下拉菜单、列表）对象 　　　　选择项对象 　　　提交按钮对象 　　　文本框对象 　　　多行文本输入区对象 　　图片对象

<返回>

7.保护自己编写的HTML和脚本的方法
  (1). oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
    <table border oncontextmenu=return(false)><td>no</table> 可用于Table
  (2). <body onselectstart="return false"> 取消选取、防止复制
  (3). onpaste="return false" 不准粘贴
  (4). oncopy="return false;" oncut="return false;" 防止复制
  (5). 防止被人frame
      <SCRIPT LANGUAGE=JAVASCRIPT><!--
         if (top.location != self.location)top.location=self.location;
       // -->
      </SCRIPT>
  (6). 永远都会带着框架
     <script language="JavaScript"><!--
        if (window == top)top.location.href="frames.htm"; //frames.htm为框架网页
     // --></script>
  (7).网页将不能被另存为
     <noscript><iframe src=*.html></iframe></noscript>

<返回>

8.IE地址栏前换成自己的图标
 <link rel="Shortcut Icon" href="favicon.ico">

<返回>

9.可以在收藏夹中显示出你的图标

 <link rel="Bookmark" href="favicon.ico">

<返回>

10.关闭输入法

 <input style="ime-mode:disabled">

<返回>

11.直接查看源代码
 
 <input type=button value=查看网页源代码 onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'">

<返回>

12.在Javascript中定义一个对象（属性，方法）

function pasta(grain, width, hasEgg) {
    this.grain = grain;
    this.width = width;
    this.hasEgg = hasEgg;
    this.toString = pastaToString;
}

function pastaToString() {
    return "Grain: " + this.grain + "\n" + "Width: " + this.width + "\n" + "Egg?: " + Boolean(this.hasEgg);
}

var P1=new pasta(3,3,false);

<返回>

13. 取得控件的绝对位置

//Javascript
<script language="Javascript">
function getIE(e){
   var t=e.offsetTop;
   var l=e.offsetLeft;
   while(e=e.offsetParent){
      t+=e.offsetTop;
      l+=e.offsetLeft;
   }
   alert("top="+t+"\nleft="+l);
}
</script>

<返回>

14. 光标是停在文本框文字的最后

<script language="javascript">
function cc()
{
   var e = event.srcElement;
   var r =e.createTextRange();
   r.moveStart('character',e.value.length);
   r.collapse(true);
   r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">

<返回>

15. 判断上一页的来源

asp:
  request.servervariables("HTTP_REFERER")

javascript:
  document.referrer

<返回>

16. 最小化、最大化、关闭窗口

<object id=hh1 class>41.常用的Javascript内建类的方法
　

对象	方法或属性	意义	例子
Array	length	表示数组大小，也可以通过该属性动态调整数组大小。设置可以不调整它直接扩大数组。	var theMonths = new Array(12); theMonths[0] = "Jan"; theMonths[1] = "Feb"; theMonths[2] = "Mar"; theMonths[20] = "12";
	concat	把两个数组合并	a = new Array(1,2,3); b = new Array(4,5,6); a = a. concat(b)
	join	把数组变为字符串	a = new Array(0,1,2,3,4);    b = a.join("-");
Date	Date.parse(dateVal)	将日期转为数字，用于比较两个日期的大小。dateVal格式为month+day+year	iFrom=Date.parse(“10-1-2004”);
	setFullYear (year,month-1,day)	用于判断3个字符串合起来是不是日期或者判断该天是不是存在。这里month从0开始，故和实际值差1	myDate.setFullYear(year,month-1,day); if (isNaN(myDate.getFullYear())){       return false; } else{   if( (myDate.getFullYear()!=year)||       (myDate.getDate()!=day)||       (myDate.getMonth()!=(month-1) )       return false;  }
	Date()	获得当前时间	d = new Date();
Global （全局类，引用方法可以不要带Global.）	isNaN	当从字符到日期转换失败，或者从字符到数字转换失败，都返回NaN。用isNaN可以判断返回值是不是NaN
	parseInt	将字符串转换为整数，转换失败返回NaN或者尽量转换。所以用它来判断是不是数字，还要加上判断转化后长度是不是一样	parseInt("abc")     // 返回 NaN。 parseInt("12abc")   // 返回 12。 parseInt("12")   // 返回 12
	parseFloat	转为实数
String	主要函数和Java或者C＃一样
	replace	替代某个字符。如果仅替代一个和C＃一样，如果要替代全部某字符，就得用到了匹配串	re=/#/g;   str=str.replace(re,"<br>");   把#用<br>代替
	split	将某个字符串按指定间隔符分割	var s = "The rain in Spain"; ss = s.split(" ");  //ss是一个数组

<返回>

42.如何在另一个窗体对原来窗体进行操作

  在打开的新窗体，用window.opener来访问原来窗体的对象。例如  alert(window.opener.hiddens.value);
  可以对层进行重写Html代码，例如 window.opener.divStatus.innerHTML="Proctored";
 
<返回>

43.层的隐藏与显示

   只要设置层的style的display属性即可。 比如<div style="display:none" >
<script>
function printweb()
{
   this.focus();
   window.print();
}
</script>