JS entry code collection_basic knowledge

I saw a js tutorial on Shanba, which I think is good. Suitable reading range: people who know nothing about JavaScript and are only one step away from mastering it

Basic knowledge: HTML
That’s it for JavaScript 1: Basic knowledge

1 Create script block

1:
2 Hide script code
1:
Relevant code will not be executed in browsers that do not support JavaScript
3 Displayed when the browser does not support it
1:

4 Link External script file
1:

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

6 Output to browser
1: document.write(“Hello”);

7 Define variables
1: var myVariable = “some value”;

8 String addition
1: var myString = “String1” “String2”;
9 String search
1:

10 String replacement

1: thisVar.replace ("Monday","Friday");

11 Format string

1:

12 Create array
1:    

13 数组排序  
1:   
2:   
11:    



14 分割字符串  

1:   
2:   
10:    



15 弹出警告信息  

1:   
2:   
5:    



16 弹出确认框  

1:   
2:   
5:    



17 定义函数  

1:   
2:   
8:    



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 Timing execution function

1: <script> <br>2: &lt ;!-- <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 Cancel scheduled execution

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>2: Body of the page <br>3: </body> <br><br>That’s it for JavaScript 2: Browser output <br><br><br>26 Visit document Object <br><br>1: <script language=”JavaScript”> <br>2: var myURL = document.URL; <br>3: window.alert(myURL); <br>4: < /script> <br><br><br><br>27 Dynamically output HTML <br><br>1: <script language=”JavaScript”> ;Here's some information about this document:</p>”); <br>3: document.write(“<ul>”); <br>4: document.write(“<li>Referring Document: " document.referrer "</li>"); <br>5: document.write("<li>Domain: " document.domain "</li>"); <br>6: document.write (“<li>URL: “ document.URL “</li>”); <br>7: document.write(“</ul>”); <br>8: </script>


28 Output newline

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



29 Output date

1:



30 Specify the time zone of the date

1:


31 Set date output format

1:


32 Read URL parameters

1:

Do you still think HTML is stateless?

33 Open a new document object

1:



34 Page Jump

1:



35 Add web page loading progress window

1: < ;html>
2:
3:
6:
7:
8 :
9:

This is the main page

10:
11: < /html> img src="/"image1.jpg"" name="myImage">
2: Width
3:


37 Dynamically loading images

1:


38 Simple image replacement

1: onMouseOut="document.myImage.src = defaultImage.src;">
9:


39 Randomly display images

1:


40 函数实现的图像替换  

1:   
2: var source = 0;  
3: var replacement = 1;  
4: function createRollOver(originalImage,replacementImage) {   
5: var imageArray = new Array;  
6: imageArray[source] = new Image;  
7: imageArray[source].src = originalImage;  
8: imageArray[replacement] = new Image;  
9: imageArray[replacement].src = replacementImage;  
10: return imageArray;  
11: }  
12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);  
13:   
14: 15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>  
16:   
17:    


41 创建幻灯片  

1:   
2: var imageList = new Array;  
3: imageList[0] = new Image;  
4: imageList[0].src = “image1.jpg”;  
5: imageList[1] = new Image;  
6: imageList[1].src = “image2.jpg”;  
7: imageList[2] = new Image;  
8: imageList[2].src = “image3.jpg”;  
9: imageList[3] = new Image;  
10: imageList[3].src = “image4.jpg”;  
11: function slideShow(imageNumber) {   
12: document.slideShow.src = imageList[imageNumber].src;  
13: imageNumber  = 1;  
14: if (imageNumber < imageList.length) {   
15: window.setTimeout(“slideShow(“   imageNumber   “)”,3000);  
16: }  
17: }  
18:   
19:   
20:   
21:    


42 随机广告图片  

1:   
2: var imageList = new Array;  
3: imageList[0] = “image1.jpg”;  
4: imageList[1] = “image2.jpg”;  
5: imageList[2] = “image3.jpg”;  
6: imageList[3] = “image4.jpg”;  
7: var urlList = new Array;  
8: urlList[0] = “http://www.php.cn/”;  
9: urlList[1] = “http://www.php.cn/”;  
10: urlList[2] = “http://www.php.cn/”;  
11: urlList[3] = “http://www.php.cn/”;  
12: var imageChoice = Math.floor(Math.random() * imageList.length);  
13: document.write(‘');  
14:    

JavaScript就这么回事4：表单   


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

1:   
2:   
3:   
4: First Choice  
5: Second Choice  
6:   
7:

8:
9:


44 in the access form The content of the text box

1:

2:
3:
4: Check Text Field 45 Dynamically copy text box content

1:
2: Enter some Text: < br>
3: Copy Text:
4:

5: Copy Text Field


46 Detect changes in text box

1:

2: Enter some Text: 3:

47 Access the selected Select

1:

2: < select name=”mySelect”>
3: 1
4: 2
5: 3
6:
7:

8: Check Selection List


48 Dynamically add Select items

1:

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

7:


49 Validation form fields

1: >9:

10: Text Field: 11:

12:

50 Verify Select item

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 Dynamically change the action of the form

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


52 使用图像按钮  

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


53 表单数据的加密  

1:   
2:   
17:   
18:   
19: Enter Some Text:   
20:    




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


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

1:   
2: window.status = “A new status message”;  
3:    


55 弹出确认提示框  

1:   
2: var userChoice = window.confirm(“Click OK or Cancel”);  
3: if (userChoice) {   
4: document.write(“You chose OK”);  
5: } else {   
6: document.write(“You chose Cancel”);  
7: }  
8:    


56 提示输入  

1:   
2: var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);  
3: document.write(“Your Name is “   userName);  
4:    


57 打开一个新窗口  

1: //打开一个名称为myNewWindow的浏览器新窗口  
2:   
3: window.open(“http://www.php.cn/”,”myNewWindow”);  
4:    


58 设置新窗口的大小  

1:   
2: window.open("http://www.php.cn/","myNewWindow",'height=300,width=300');
3:


59 Set the position of the new window

1:


60 Whether to display the toolbar and scroll bar

1:


62 Load a new document into the current window

1: Open New Document


63 Set the scroll position of the page

1:


64 Open a full-screen window in IE

1 : Open a full-screen window< /a>


65 New window and parent window operations

1:


67 Load the page to Frame page

1:
2:
3:
4:
5: Load the page in frame2 in frame1
6 : parent.frame2.document.location = “135b.html”;


68 Sharing scripts between frame pages
If there is a script in the html file in frame1

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

Then the method can be called like this in frame2

1:
2: This is frame 2.
3:


69 Data Sharing
You can define data items on the frame page so that the data can be shared by pages in multiple frames

1:
4:
5:
6:
7:

In this way, the variable persistentVariable can be used in both frame1 and frame2
70 Framework code base
According to some of the above ideas, we can use a hidden frame page as the code base of the entire frameset

1:
2:
3:
4:
5: