Getting started with JavaScript

Getting started with JavaScript
At the beginning, the idea is often stuck, or the Implementation idea is not concise enough. The learning process is a process of accumulation. When you think more about it, you will naturally have more experience. The experience of large projects also says that you should have at least a thorough understanding of the knowledge, it can be expanded quickly. Now it's time to get to the object-oriented system. After a few days of rest, I will go back and think about what I learned, and I will remember what I forgot and learn new things, or you can understand the problems you have never understood before. Today's introduction to writing my JavaScript: before writing a JavaScript program, what should I do? 1) Write structure + style, HTML + CSS 2) Find the principle to implement it 3) start to write JavaScript and then start to write programs. It is very important to test while writing, in this way, errors can be detected in a timely manner. For example, if we want to take a certain element out of our sight and write this JavaScript effect step: 1, first implement the layout; 2, find the implementation principle: 1, display: none; display as none, the element does not exist on the page. 2. visibility: hidden; hide the element. The element still exists, it occupies the Document Stream 3, width \ height is 0 4, transparency is changed 5, left/top 6 is changed through positioning, a white div is used to cover 7, negative margin values and so on 3, understanding JavaScript Syntax: how to obtain elements in JavaScript: 1) Based on the ID name: # div1 {} var oDiv = document. getElementById ("div1"); 2) According to the label name (which can be understood by the id and class in CSS) li {} var aLi = document. getElementsByTagName ("li"); # ul1 li {} Var oUl = document. getElementById ('ul1'); var aLi = oUl. getElementsByTagName ('lil'); ul li {} var oUl = document. getElementsByTagName ('ul ') [0]; // even if there is only one element on the page, aUl also obtains a set of var aLi = oUl. getElementsByTagName ('lil'); events: mouse events, Keyboard Events, system events, Form Events, custom events onclick onmouseover onmouseout onmousedown onmouseup onmousemove... After onload is loaded, execute ...... window. onload = event Img. onload Body. onload iframe. how to add event: element in onload. event function: it can be understood as a command. The function name abc () {// No code in the function will be actively executed ......} How to execute a function 1. Direct call: abc (); 2. Event call: element. event = abc; (oDiv. onclick = abc; do not add parentheses here, because the function name is executed without waiting for the call.) 3. function () {} anonymous function element. event = function () {} test: alert (1); // The alert ('OK') Warning box with a confirmation button '); // enclose all your own words with quotation marks. All single quotation marks and double quotation marks can be alert ("OK"); alert (oText. value); // do not use quotation marks -------------------------------------------------- function call with a name: direct call: fn1 (); event call: obj. onclick = fn1; anonymous function call: direct call: (function self-execution) (function () {alert (345 );})()~ Function () {alert (567 );}();! Function () {alert (789) ;}(); + function () {alert (980) ;}(); event call: obj. onclick = function () {alert (123) ;}; window. onload = function () {}; // after all the code in the window is loaded, perform the attribute operation: attribute = attribute name + attribute value read operation (get): element. attribute name write operation (Change-first clear the original, and then add new content): element. property name = new value copy code 1 var oDiv = document. getElementById ('div1 '); 2 alert (oDiv. innerHTML); // read 3 4 oDiv. onclick = function () {5 oDiv. innerHTML = 123; // write (empty first, then add) 6}; 7 // If an event is bound to an element Some events will also be cleared in the copy code attribute operation []: var oDiv = document ['getelementbyid'] ('div1 '); oBtn ['onclick'] = function () {some considerations in JavaScript operations: 1) JavaScript does not allow the occurrence of-, remove-, and change the first letter of the next word to uppercase. 2) some things should not be used for judgment // they cannot be used as judgment conditions: 1. Relative Path img src a href = "1.html" 2. color value: red; # f00 rgb (255, 0, 0) 3. compatibility issues may occur in innerHTML browsers of earlier versions/* oDiv. style. width = '200px '; oDiv. style. height = '200px '; oDiv. style. background = 'red'; */oDiv.style.css Tex T = 'width: 240px; height: 220px; background: yellow; '; copy the Code 1 var oDiv = document. getElementById ('div1 '); 2 3 oDiv. style. height = '200px '; 4 oDiv. style. background = 'red'; 5 // based on the original style, add or modify 6 7 oDiv.style.css Text = 'height: 220px; background: yellow ;'; 8 // remove the original style width and add the line style 9 10 alert (oDiv.style.css Text); // 'width: 200px '11 oDiv.style.css Text + = 'height: 220px; background: yellow; '; 12 // use CssText adds a new style to the original style. There are three differences between the two methods for getting elements in the Code copy code: document. getElementById ('id'); // static method; find an element; the front side can only be document. getElementsByTagName ('lil'); // dynamic method; find a group of elements; the front can be a document or an element, similar to an array, but not an array, and a set of elements, although it is not an array, it has the attribute of an array: oUl. length; oUl [0] array access method; if the ByTagName method is used, the [] dynamic method must be added. If the element does not exist, the element can be obtained, though not found, no error is reported, but it can only be obtained but cannot be operated. After the program dynamically adds elements, you can find and operate the elements. Copy code 1 var aBtn = document. getElementsByTagName ("input"); // you can obtain element 2 alert (aBtn. length); // 03 document. body. innerHTML = '<input type = "button" value = "button"/> <input type = "button" value = "button"/> <input type = "button" value = "button"/> '4 alert (aBtn. length); // 35 aBtn [0]. onclick = function () {// event can be added to 6 alert (0); 7} copy the code getElementsByTagName. This method can operate on a bunch of elements without IDs, however, you can only write aBtn [0] aBtn [1] aBtn [2] one by one, so the for loop is introduced: // 1) repeat some code; 2) each When the execution is performed, a number is changing. The execution sequence is shown as follows: 1) var I = 0; 2) I <3; key 3) execute all the code in the brackets. 4) I ++ first 1, then 234 until it does not meet the condition and jumps out of the loop var I = 0; for (; I <3;) {alert (I); I ++ ;} // another method: for (var I = 0; I <3; I ++) {alert (I); //, 2} alert (I ); // 3/* The Code will continue to be executed only after the for loop is fully executed. * // * When nested for loops are used, different variables must be used for each layer of loops. */For Loop application: repeats a task. Each execution changes with a number. this Keyword: this indicates the object that calls the current method (function. Window. alert (); window. fn1 (); just call fn1 (); this refers to the window Summary: function fn1 () {this} 1) fn1 (); this => window 2) oDiv. onclick = fn1; this => oDiv 3) oDiv. onclick = function () {this fn1 ();} this => oDiv; fn1 () in this => window 4) <div onclick = "this fn1 (); "> </div> this refers to div. In fn1 (), this => window // seldom writes the custom attribute and index value aBtn [0]. abc = 123; JavaScript can add any custom attribute for any HTML element, and can perform read/write operations. Standard attribute: className width height style custom attribute: This attribute is defined as needed when you write code. It is not a standard attribute.