12th JavaScript (JS) implementation display and hide

JavascriptJavaScript is referred to as JS. JS is a scripting language, it is a lightweight programming language, is the ability to insert HTML page programming code, almost all modern browsers are supported. theoretical teacher not, I copied some key fields in the manual to everyone, and then we write code to learn. JS also and CSS, can be externally referenced, but CSS with the link tag, and JS with the script tag, and CSS, to write in the head tag Oh, reference files are written here. Let's write a look at:

<lang= "en">    <src= ". /js/myjs.js "></script></head> 

This is the reference to the external name "Myjs.js" file, just like CSS, in this file to write JS code. It can be used in addition to the external JS, can also be written in the body tag, of course, directly in the head of the write is also possible, without reference to the outside, so, the teacher said, there are students do not understand, we first write in the body tag, to, on the code:

< Body > < Script >     Alert (1); </ Script > </ Body >

script tags written in the body, you do not need to use SRC to specify the path of the file, but directly write, students understand that, script as Div,div can contain a lot of content, and script contains the content, is the JS code. above this code, alert means a warning box, the page will pop up a prompt box, the content is the teacher input "1", it does not have much meaning, students want to enter anything in the inside can, just make a hint. Here to say Ah, JS and HTML is not the same, its constraints will be stronger, if you write a messy code, the wrong code, it will prompt an error, the code will not run successfully, may also affect the program after the run.  where are the error hints? Let's write a wrong code to look at:

< Script >    if ; </ Script >

if is a judgment statement, we use judgments, loops, functions, and so on, and if we do not follow some basic rules, we will make mistakes. We will run this code, refresh on the page, press F12, you will see, there is an error on the right side, a red circle contains a difference, the error is 1. See the code, there are many operations, we choose "Concole" can see the error, its error in the first few lines, what errors can be seen, but basically are English hints, do not understand the translation, the key to see it error is the first few lines, and then you go to see the code you write, so you can easily find errors.  What can JS do? The simplest to understand, it can page dynamic, what is dynamic? Before we learn the html+css are static mode, we use JS to write a thing, we can find, first JS in the code to delete ah, the wrong we do not. Let's add a div first:

<div id= "Div1" > I am div1</div>

page will appear above the div content, then we use JS to make a change:

<Script>    //JS notes, two slashes in front    //var create variable Div1    //document means the object    //getElementById is simply understood to be assigned to this ID    varDiv1=document.getElementById ("Div1"); //we modify the content of Div1    //InnerHTML is the page text content, here is to modify itdiv1.innerhtml= "I'm not div1 .";</Script>

In this way, we refresh the page, the content of the div will change into JS inside the "I am not div1." Here the teacher's script tag is written in the body, if it is written in the head? The result of div output is "I am div1", it is not JS "I am not Div1", why? is the script in the head, can't this be used? No, because the code is running from the top down, the following Div covers the above JS div1 content. A very simple test, everyone in the head of the script tag added an alert to do a test, the same will pop up a hint.  beginner students, may not understand, then the teacher to speed up the pace, to do a simple display hidden features it! See the effect, so that the students can understand some. But in that case, learn something important: "Event"! The incident is very important, many theoretical teachers do not say, do not understand to see the manual, the teacher first on the code, while doing side explanation:

<onclick= "Yincang ()"> Click me, hide Div1</button > <  onclick= "Xianshi ()"> Click I, show Div1</button >

in the body, the div is added to this section of code, button is just an element, students do not care about it, the other elements can do "events". The event here is the onclick, it means "click the event", that is, we use the mouse to click on it, trigger the event, run the code belongs to it, is the code we wrote in JS behind. The value following the onclick is a function that has a feature that must be followed by a "()" parenthesis. we go to JS, see how to write:

To create a function, you need to use the keyword: functionfunction yincang () {    //var Create the variable, find the variable with ID div1 and then transfer it to me.    //variables can not be arbitrarily taken, it has a standard, the number and the underscore cannot start basic could be    var div1 = document.getElementById ("Div1");    Add CSS styles to Div1, Display=none set to hidden.    div1.style.display= "None";}

Create a function, Yincang (), then we enable the event in the button element to point to the Yincang (), so JS will run the code in the function, the effect will be the ID of div1 element, is hidden. then the display of the operation is very simple, copy the hidden JS code, the function Yincang to Xianshi, because the above botton event is Xianshi. Then the inside of the code on two lines, not the comment, run the code on two lines, the last "none" value changed to "block" on it. then we can see, JS in addition to the ability to modify HTML, but also modify the CSS style.  Teacher's teaching, is aimed at functional, theoretical nonsense too much, said more useless, the teacher can say, the key is the students understand the ability, the focus is still, as long as can make is the first, will say will not do, waste firewood one.  But the teacher will keep a little, like above, if we are the external reference file, referring to the Myjs.js file, then in this file, JS and how to write it? Is it the same, or is it a set of norms? Teachers do not say, I hope that students can take the initiative to learn it, passive to learn, is not learning, progress will be particularly slow, so that the strength of instability, find a job will hit the wall.  

12th JavaScript (JS) implementation display and hide