Comprehensive collection of JavaScript methods and techniques_Basic knowledge

This blog introduces JavaScript, I saw it on Clang. The author's introduction is quite comprehensive, so I repost it for interested friends to take a look at. Haha~~~

Sometimes you are proficient in one language, but you will find that you are actually dealing with other languages ​​​​all day long. Maybe you think these are insignificant and will not affect your development progress, but it is precisely these things that you Things that you don’t pay attention to will waste a lot of your time. I always thought that I had mastered JavaScript a few years ago. Until now, I feel more and more that JavaScript is far more complex and powerful than I thought. I began to worship it. Like worshiping all OOP languages ​​~
Taking advantage of the holiday, I will sort out the methods and techniques related to JavaScript, so that everyone who is worried about JavaScript will understand that this is what JavaScript is all about! And I hope that JavaScript can also become your friend, making you suddenly enlightened and better applied in projects ~

Suitable reading range: people who know nothing about JavaScript ~ only one step away from mastery
Basics: HTML


That’s it for JavaScript 1: Basics

1 Creating script blocks

1:




2 Hidden script code

1:



Relevant code will not be executed in browsers that do not support JavaScript

3 When the browser does not support it, 2: Hello to the non-JavaScript browser.
3:




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 Sort Array

1:




14 Split string

1:




15 Pop up warning message

1:




16 Pop up confirmation box

1:


17 Define function
1:



18 Calling JS function

1:

Link text

2: Link text




19 Execute the function after the page is loaded

1:

2: Body of the page
3:



20 Conditional judgment

1:




21 Specified number of loops

1:




22 Set future execution

1:




23 Schedule execution function
1:



24 Cancel scheduled execution

1:




25 Execute function when the page is unloaded

1:

2: Body of the page
3:


That’s it for JavaScript 2: Browser output
26 Access the document object

1:




27 Dynamically output HTML

1:



28 Output newline

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



29 Output Date

1:




30 Time zone of the specified date

1:



31 Set date output format

1:


32 Read URL parameters
1:


33 Open a new document object
1:

<script> <BR>2: JavaScript code goes here <BR>3: </script>34 Page jump<script> <BR>2: <!-- <BR>3: document.write(“Hello”); <BR>4: // --> <BR>5: </script><script></script>1: <script> <BR>2: <!-- <BR>3: var myVariable = “Hello there”; <BR>4: var therePlace = myVariable.search(“there”); <BR>5: document.write(therePlace); <BR>6: // --> <BR>7: </script> <script> <BR>2: <!-- <BR>3: var myVariable = “Hello there”; <BR>4: document.write(myVariable.big() + “<br>”); <BR>5: document.write(myVariable.blink() + “<br>”); <BR>6: document.write(myVariable.bold() + “<br>”); <BR>7: document.write(myVariable.fixed() + “<br>”); <BR>8: document.write(myVariable.fontcolor(“red”) + “<br>”); <BR>9: document.write(myVariable.fontsize(“18pt”) + “<br>”); <BR>10: document.write(myVariable.italics() + “<br>”); <BR>11: document.write(myVariable.small() + “<br>”); <BR>12: document.write(myVariable.strike() + “<br>”); <BR>13: document.write(myVariable.sub() + “<br>”); <BR>14: document.write(myVariable.sup() + “<br>”); <BR>15: document.write(myVariable.toLowerCase() + “<br>”); <BR>16: document.write(myVariable.toUpperCase() + “<br>”); <BR>17: <BR>18: var firstString = “My String”; <BR>19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”); <BR>20: // --> <BR>21: </script><script> <BR>2: <!-- <BR>3: var myArray = new Array(5); <BR>4: myArray[0] = “First Entry”; <BR>5: myArray[1] = “Second Entry”; <BR>6: myArray[2] = “Third Entry”; <BR>7: myArray[3] = “Fourth Entry”; <BR>8: myArray[4] = “Fifth Entry”; <BR>9: var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”); <BR>10: // --> <BR>11: </script><script> <BR>2: <!-- <BR>3: var myArray = new Array(5); <BR>4: myArray[0] = “z”; <BR>5: myArray[1] = “c”; <BR>6: myArray[2] = “d”; <BR>7: myArray[3] = “a”; <BR>8: myArray[4] = “q”; <BR>9: document.write(myArray.sort()); <BR>10: // --> <BR>11: </script><script> <BR>2: <!-- <BR>3: var myVariable = “a,b,c,d”; <BR>4: var stringArray = myVariable.split(“,”); <BR>5: document.write(stringArray[0]); <BR>6: document.write(stringArray[1]); <BR>7: document.write(stringArray[2]); <BR>8: document.write(stringArray[3]); <BR>9: // --> <BR>10: </script>35 Add web page loading progress window <script> <BR>2: <!-- <BR>3: window.alert(“Hello”); <BR>4: // --> <BR>5: </script><script> <BR>2: <!-- <BR>3: var result = window.confirm(“Click OK to continue”); <BR>4: // --> <BR>5: </script>1: <script> <BR>2: <!-- <BR>3: function multiple(number1,number2) { <BR>4: var result = number1 * number2; <BR>5: return result; <BR>6: } <BR>7: // --> <BR>8: </script> <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>2: <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> <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>3: <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> <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>6 : <script> <BR>2: var myURL = document.URL; <BR>3: window.alert(myURL); <BR>4: </script>The Main Page<script> <BR>2: document.write(“<p>Here's some information about this document:”); <BR>3: document.write(“<ul>”); <BR>4: document.write(“<li>Referring Document: “ + document.referrer + “”); <BR>5: document.write(“<li>Domain: “ + document.domain + “”); <BR>6: document.write(“<li>URL: “ + document.URL + “”); <BR>7: document.write(“”); <BR>8: </script> <script> <BR>2: var thisDate = new Date(); <BR>3: document.write(thisDate.toString()); <BR>4: </script>7: <script> <BR>2: var myOffset = -2; <BR>3: var currentDate = new Date(); <BR>4: var userOffset = currentDate.getTimezoneOffset()/60; <BR>5: var timeZoneDifference = userOffset - myOffset; <BR>6: currentDate.setHours(currentDate.getHours() + timeZoneDifference); <BR>7: document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString()); <BR>8: </script> <script> <BR>2: var thisDate = new Date(); <BR>3: var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes(); <BR>4: var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate(); <BR>5: document.write(thisTimeString + “ on “ + thisDateString); <BR>6: </script>8: <script> <BR>2: var urlParts = document.URL.split(“?”); <BR>3: var parameterParts = urlParts[1].split(“&”); <BR>4: for (i = 0; i < parameterParts.length; i++) { <BR>5: var pairParts = parameterParts[i].split(“=”); <BR>6: var pairName = pairParts[0]; <BR>7: var pairValue = pairParts[1]; <BR>8: document.write(pairName + “ ：“ +pairValue ); <BR>9: } <BR>10: </script> <script> <BR>2: function newDocument() { <BR>3: document.open(); <BR>4: document.write(“<p>This is a New Document.”); <BR>5: document.close(); <BR>6: } <BR>7: </script>9: <script> <BR>2: window.location = “http://www.liu21st.com/”; <BR>3: </script>This is the main page<script> <BR>4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200'); <BR>5: </script>
10: 
11:  



JavaScript就这么回事3：图像 



36 读取图像属性

1: 
2: Width
3: 


37 动态加载图像

1: <script> <BR>2: myImage = new Image; <BR>3: myImage.src = “Tellers1.jpg”; <BR>4: </script> 


38 简单的图像替换

1: <script> <BR>2: rollImage = new Image; <BR>3: rollImage.src = “rollImage1.jpg”; <BR>4: defaultImage = new Image; <BR>5: defaultImage.src = “image1.jpg”; <BR>6: </script>
7: 8: onMouseOut=”document.myImage.src = defaultImage.src;”>
9:  


39 随机显示图像

1: <script> <BR>2: var imageList = new Array; <BR>3: imageList[0] = “image1.jpg”; <BR>4: imageList[1] = “image2.jpg”; <BR>5: imageList[2] = “image3.jpg”; <BR>6: imageList[3] = “image4.jpg”; <BR>7: var imageChoice = Math.floor(Math.random() * imageList.length); <BR>8: document.write(‘<img src="/static/imghwm/default1.png" data-src="http://img.sxsky.net/it//”image1.jpg" class="lazy" src=”' + imageList[imageChoice] + ‘“ alt="Comprehensive collection of JavaScript methods and techniques_Basic knowledge" >'); <BR>9: </script> 


40 函数实现的图像替换

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


41 创建幻灯片

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


42 随机广告图片

1: <script> <BR>2: var imageList = new Array; <BR>3: imageList[0] = “image1.jpg”; <BR>4: imageList[1] = “image2.jpg”; <BR>5: imageList[2] = “image3.jpg”; <BR>6: imageList[3] = “image4.jpg”; <BR>7: var urlList = new Array; <BR>8: urlList[0] = “http://some.host/”; <BR>9: urlList[1] = “http://another.host/”; <BR>10: urlList[2] = “http://somewhere.else/”; <BR>11: urlList[3] = “http://right.here/”; <BR>12: var imageChoice = Math.floor(Math.random() * imageList.length); <BR>13: document.write(‘<a href=”' + urlList[imageChoice] + ‘“><img src="/static/imghwm/default1.png" data-src="http://img.sxsky.net/it//”login.gif" class="lazy" src=”' + imageList[imageChoice] + ‘“ alt="Comprehensive collection of JavaScript methods and techniques_Basic knowledge" >'); <BR>14: </script> 

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: <script> <BR>8: document.myForm.mySelect.length++; <BR>9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”; <BR>10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”; <BR>11: </script> 


49 验证表单字段

1: <script> <BR>2: function checkField(field) { <BR>3: if (field.value == “”) { <BR>4: window.alert(“You must enter a value in the field”); <BR>5: field.focus(); <BR>6: } <BR>7: } <BR>8: </script>
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: <script> <BR>2: <!-- <BR>3: function encrypt(item) { <BR>4: var newItem = ''; <BR>5: for (i=0; i < item.length; i++) { <BR>6: newItem += item.charCodeAt(i) + '.'; <BR>7: } <BR>8: return newItem; <BR>9: } <BR>10: function encryptForm(myForm) { <BR>11: for (i=0; i < myForm.elements.length; i++) { <BR>12: myForm.elements[i].value = encrypt(myForm.elements[i].value); <BR>13: } <BR>14: } <BR>15: <BR>16: //--> <BR>17: </script>
18: 

19: Enter Some Text: 
20: 

 




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


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

1: <script> <BR>2: window.status = “A new status message”; <BR>3: </script> 


55 弹出确认提示框

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


56 提示输入

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


57 打开一个新窗口

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


58 设置新窗口的大小

1: <script> <BR>2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300'); <BR>3: </script> 


59 设置新窗口的位置

1: <script> <BR>2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100'); <BR>3: </script> 


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

1: <script> <BR>2: window.open(“http: <br><br><BR>61 是否可以缩放新窗口的大小 <br><br>1: <script language=”JavaScript”> <BR>2: window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );</script> 


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

1: Open New Document 


63 设置页面的滚动位置

1: <script> <BR>2: if (document.all) { //如果是IE浏览器则使用scrollTop属性 <BR>3: document.body.scrollTop = 200; <BR>4: } else { //如果是NetScape浏览器则使用pageYOffset属性 <BR>5: window.pageYOffset = 200; <BR>6: }</script> 


64 在IE中打开全屏窗口

1: Open a full-screen window 


65 新窗口和父窗口的操作

1: <script> <BR>2: //定义新窗口 <BR>3: var newWindow = window.open(“128a.html”,”newWindow”); <BR>4: newWindow.close(); //在父窗口中关闭打开的新窗口 <BR>5: </script>
6: 在新窗口中关闭父窗口
7: window.opener.close() 


66 往新窗口中写内容

1: <script> <BR>2: var newWindow = window.open(“”,”newWindow”); <BR>3: newWindow.document.open(); <BR>4: newWindow.document.write(“This is a new window”); <BR>5: newWIndow.document.close(); <BR>6: </script> 


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: <script> <BR>2: var persistentVariable = “This is a persistent value”; <BR>3: </script>
4: 
5: 
6: 
7:  


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

1: 
2: 
3: 
4: 
5: