JS入门代码集合_基础知识

在闪吧看见了一篇js教程，感觉不错 适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人

 基础知识：HTML 
JavaScript就这么回事1：基础知识   

1 创建脚本块  

1:    
2 隐藏脚本代码  
1:    
在不支持JavaScript的浏览器中将不执行相关代码  
3 浏览器不支持的时候显示  
1:    

4 链接外部脚本文件  
1:    

5 注释脚本  
1: // This is a comment  
2: document.write(“Hello”); // This is a comment  
3: /*  
4: All of this  
5: is a comment  
6: */   

6 输出到浏览器  
1: document.write(“Hello”);   

7 定义变量  
1: var myVariable = “some value”;   

8 字符串相加  
1: var myString = “String1” + “String2”;   
9 字符串搜索  
1:    

10 字符串替换  

1: thisVar.replace(“Monday”,”Friday”);   

11 格式化字串  

1:    

12 创建数组  
1:    

13 数组排序  
1:    



14 分割字符串  

1:    



15 弹出警告信息  

1:    



16 弹出确认框  

1:    



17 定义函数  

1:    



18 调用JS函数  

1: Link text  
2: Link text   



19 在页面加载完成后执行函数  

1:   
2: Body of the page  
3:    


20 条件判断  

1: <script>   <br>2: <!-- <br/>3: var userChoice = window.confirm(“Choose OK or Cancel”); <br/>4: var result = (userChoice == true) ? “OK” : “Cancel”; <br/>5: document.write(result); <br/>6: // -->   <br>7: </script>   



21 指定次数循环  

1: <script>   <br>2: <!--   <br>3: var myArray = new Array(3);   <br>4: myArray[0] = “Item 0”;   <br>5: myArray[1] = “Item 1”;   <br>6: myArray[2] = “Item 2”;   <br>7: for (i = 0; i < myArray.length; i++) {    <br>8: document.write(myArray[i] + “<br>”);   <br>9: }   <br>10: // -->   <br>11: </script>   



22 设定将来执行  

1: <script>   <br>2: <!-- <br/>3: function hello() { <br/>4: window.alert(“Hello”); <br/>5: } <br/>6: window.setTimeout(“hello()”,5000); <br/>7: // -->   <br>8: </script>   



23 定时执行函数  

1: <script>   <br>2: <!-- <br/>3: function hello() { <br/>4: window.alert(“Hello”); <br/>5: window.setTimeout(“hello()”,5000); <br/>6: } <br/>7: window.setTimeout(“hello()”,5000); <br/>8: // -->   <br>9: </script>   



24 取消定时执行  

1: <script>   <br>2: <!-- <br/>3: function hello() { <br/>4: window.alert(“Hello”); <br/>5: } <br/>6: var myTimeout = window.setTimeout(“hello()”,5000); <br/>7: window.clearTimeout(myTimeout); <br/>8: // -->   <br>9: </script>   



25 在页面卸载时候执行函数  

1:   
2: Body of the page  
3:    

JavaScript就这么回事2：浏览器输出   


26 访问document对象  

1:    



27 动态输出HTML  

1:    


28 输出换行  

1: document.writeln(“a”);  
2: document.writeln(“b”);   



29 输出日期  

1:    



30 指定日期的时区  

1:    


31 设置日期输出格式  

1:    


32 读取URL参数  

1:    

你还以为HTML是无状态的么？  

33 打开一个新的document对象  

1:    



34 页面跳转  

1:    



35 添加网页加载进度窗口  

1:   
2:   
3:   
6:   
7:   
8:   
9: 

This is the main page

  
10:   
11:    



JavaScript就这么回事3：图像   



36 读取图像属性  

1:   
2: Width  
3:   


37 动态加载图像  

1:    


38 简单的图像替换  

1:   
7: 8: onMouseOut=”document.myImage.src = defaultImage.src;”>  
9:    


39 随机显示图像  

1:    


40 函数实现的图像替换  

1:   
14: 15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>  
16:   
17:    


41 创建幻灯片  

1:   
19:   
20:   
21:    


42 随机广告图片  

1:    

JavaScript就这么回事4：表单   


还是先继续写完JS就这么回事系列吧～  
43 表单构成  

1: 

  
2:   
3:   
4: First Choice  
5: Second Choice  
6:   
7: 
  
8:   
9: 

   


44 访问表单中的文本框内容  

1: 

  
2:   
3: 

  
4: Check Text Field   


45 动态复制文本框内容  

1: 

  
2: Enter some Text: 
  
3: Copy Text:   
4: 

  
5: 6: document.myForm.myText.value;”>Copy Text Field   


46 侦测文本框的变化  

1: 

  
2: Enter some Text:   
3: 

   


47 访问选中的Select  

1: 

  
2:   
3: 1  
4: 2  
5: 3  
6:   
7: 

  
8: Check Selection List   


48 动态增加Select项  

1: 

  
2:   
3: 1  
4: 2  
5:   
6: 

  
7:    


49 验证表单字段  

1:   
9: 

  
10: Text Field:   
11: 
  
12: 

   


50 验证Select项  

1: function checkList(selection) {   
2: if (selection.length == 0) {   
3: window.alert(“You must make a selection from the list.”);  
4: return false;  
5: }  
6: return true;  
7: }   


51 动态改变表单的action  

1: 

  
2: Username: 
  
3: Password: 
  
4:   
5:   
6:   
7: 

   


52 使用图像按钮  

1: 

  
2: Username: 
  
3: Password: 
  
4:   
5: 

  
6:   


53 表单数据的加密  

1:   
18: 

  
19: Enter Some Text:   
20: 

   




JavaScript就这么回事5：窗口和框架   


54 改变浏览器状态栏文字提示  

1:    


55 弹出确认提示框  

1:    


56 提示输入  

1:    


57 打开一个新窗口  

1: //打开一个名称为myNewWindow的浏览器新窗口  
2:    


58 设置新窗口的大小  

1:    


59 设置新窗口的位置  

1:    


60 是否显示工具栏和滚动栏  

1:    


62 加载一个新的文档到当前窗口  

1: Open New Document   


63 设置页面的滚动位置  

1:    


64 在IE中打开全屏窗口  

1: Open a full-screen window   


65 新窗口和父窗口的操作  

1:   
6: 在新窗口中关闭父窗口  
7: window.opener.close()   


66 往新窗口中写内容  

1:    


67 加载页面到框架页面  

1:   
2:   
3:   
4:   
5: 在frame1中加载frame2中的页面  
6: parent.frame2.document.location = “135b.html”;   


68 在框架页面之间共享脚本  
如果在frame1中html文件中有个脚本  

1: function doAlert() {   
2: window.alert(“Frame 1 is loaded”);  
3: }   

那么在frame2中可以如此调用该方法  

1:   
2: This is frame 2.  
3:    


69 数据公用  
可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用  

1:   
4:   
5:   
6:   
7:    

这样在frame1和frame2中都可以使用变量persistentVariable   
70 框架代码库  
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库  

1:   
2:   
3:   
4:   
5: