"JavaScript from Beginner to mastery" lesson two

The second lesson on JavaScript charm-02

Variable

Speaking of variables, we have to mention that we have a relatively old TV series called "Bao-Sky". Bao-Sky has a very powerful sword called "Imperial Sword", see Imperial Sword like to see the emperor. In a way, a variable has an imperial sword-like character.

We make the following changes to the code at the end of the first lesson:

function Togreen () {     var Odiv=document.getelementbyid (' Div1 ');    Variable  odiv.style.width= ' 300px ';  odiv.style.height= ' 300px ';  odiv.style.background= ' green ';}

We use var to define variables, tell the computer what I'm going to write next is a variable, Odiv is the name of the variable, we use odiv this variable to document.getElementById (' Div1 ') Value is saved (we can simply understand that a variable is an alias for a thing), then in this function it is like seeing document.getElementById (' Div1 '), just like Imperial Sword, where the div is seen. Such programs do not change functionally, but the code is greatly simplified.

Definition and invocation of a function

Definition and invocation are two important concepts of a function. Let's look at this simple JS code:

function Show ()       {                        //define  alert ("abc");} Show ();            Call

If a function is defined and not called, the page is refreshed anyway and has no effect. Just as the law exists, but if no one breaks the law, it does not exist. If a function is called but not defined, then the function cannot be executed, and the console will have an error that the function has not been defined. Therefore, for the function to execute, the definition and invocation of the function are indispensable.

Web page Skin Change

Many websites have a similar convenient feature for Web page skinning, which can be changed by clicking on the background color or image of the page.

For Hao123 's web page, the background color of all elements of the page has changed after the click-and-change. If we take the last lesson, we may need to modify the background color of the element, the operation is very large, so we have an easier way to do it.

This example adds CSS through an outer-chain style sheet that prepares two sets of different skins (that is, two different CSS files) in an outer-chain style sheet to provide Web page changes.

The code for CSS1 is as follows:

body{  Background:black;} input{  width:200px;  height:100px;  Background:yellow;}

The code for CSS2 is as follows:

body{  background: #ccc;} input{  width:100px;  height:50px;  background:red;}

In the HTML code, we can load different CSS files by changing the href attribute of link, so the change of skin is essentially a CSS file that changes the outer chain. To achieve this, we need to manipulate the link tag in the HTML. In order to select the link tag, we need to give the link tag an ID and select it in the JS function using the getElementById method, so that it can manipulate its href attribute.

The complete code is as follows:

Click on skin 1 and skin 2 to make a skin-changing page.
From this example, we learned the following points:

 
 

  
  
 
   
Any tag can be added ID, for example, this example link can, even body,html can also.
 
   
Any attribute of any tag can be modified by JS.
 
   
HTML in the attribute name and JS to keep consistent, HTML inside how to write, value inside how to write.
 
  
 
 
If judgment
The IF statement is used in JS for judging , its basic format is
if (condition) {  statement 1}else{  Statement 2}
Where else is not necessary. The entire statement represents the meaning that if the condition is true, statement 1 is executed and statement 2 is executed if the condition is not true. To give a simple example of life, if the weather forecast is rainy, we take an umbrella, and if it doesn't rain, we don't have an umbrella. This example is described in the words if statement as follows:
if (rain forecast) {  with umbrella}else{  without umbrella}
So how should the IF statement be used in JavaScript? Let's give a small example of a webpage.
The "more" option in the menu bar above Google, when we click, will expand a menu bar, will be recalled when clicked again. This very common function is done with an if statement. Unlike onmouseout and onmouseover, although every time we do is click action, but depending on the menu bar expansion status, each click produces a different effect. When the menu bar is displayed, the click Action is for the menu bar to be hidden, whereas when the menu bar is hidden, the click Action is for the menu bar to appear. A simple word to describe what we need to do is: when clicked, if the div is displayed, hide it (change its display property to none), or otherwise display it (change its display property to block).
Therefore, we can express with an if statement:
If (div is displayed) {  odiv.style.display= ' none ';} else{  odiv.style.display= ' block ';  }
The complete code is as follows:
The effect is as follows:
A new symbol appears here, = = (double equals). As we have said before, in JS = the assignment (change), and the double equal sign is closer to the equal sign in mathematics, its role is to determine whether the two sides are equal. In this example, odiv.style.display== ' block ' represents whether the value of display is a block or not, and if it is established, it represents the state that DIV1 is displayed, executes an if statement to hide it, or vice versa, which means that div1 is a hidden state. Executes the Else statement to display it.
Add JS to a link
HTML in the A link should be more familiar with, but you know, a link can also add JS? Normally, the value we put in the href attribute of the A tag is the URL, but it can actually be executed inside the JS function.
<a href= "Javascript:alert (' a ');" > Links </a>
Using the above code, clicking the link can also execute the JS function. The JavaScript before the colon can tell the browser that we are not going to execute the URL but the JS code, after the colon is the execution content.
However, generally speaking, we will not really put the JS code in a tag, but let it empty:
<a href= "javascript:;" > Links </a>
There are two purposes for doing so. First of all, it is very bad to put the code inside a tag, which we will understand when we learn the event. Second, this notation has an advantage over using # in the href attribute: There is no response when clicked, and does not jump directly to the top of the page.
Exceptions to the ClassName
In the Web page when we talked about, the attribute name in HTML and JS to keep consistent, HTML inside how to write, value inside how to write-the only exception is classname. Because JS in the class is reserved word, in JS has other role, if we in JS directly using the class attribute in HTML, the program will not be executed, so JS with classname instead of class. When we want to change the class of an element, we use the following notation:
"JavaScript from Beginner to mastery" lesson two