JS variables, strings, conditional statements, event Learning notes

Variable

Or you can learn the relative syntax of variables through an instance:

The code is as follows

Copy Code

<!--variables.html--> [HTML] [Head] [Script language= "JavaScript"] <!--hide Me Load up some variables, defining variables var hen_num = 3; var eggs_per_week_each = 5; var weeks_per_month = 4; Do some calculations; calculation var Eggs_per_month_each = Eggs_per_week_each * weeks_per_month; var eggs_per_month_all = Eggs_per_month_each * HEN_NUM; Here's how to use JavaScript to write out HTML This article describes how to write variables and Web pages with JavaScript. Document.writeln ("<b> my house hen eggs per month"); Document.writeln (Eggs_per_month_all); Document.writeln ("A. </b>[p]"); End Hiding--> [/script] [/head] [/html] <script type= "Text/javascript" > var a=100; var b=true; function Test () { alert (a); alert (b); B=false; alert (b); var a=200; alert (A/2); alert (++MATH.PI); alert (math.pi++); } Test (); </script>

Learning points

① when you first use a variable, you should declare it "Var". Although using Var as a variable is strictly not necessary, it is a good habit.
② variable names are case sensitive
③ can be used Document.writeln () to write text and HTML in Web pages
Document.writeln () is a method of document object, see W3school Chinese web HTML Dom Tutorial

Why the first alert is undefined, and the second is true. This problem can also be extended to--alert (b) How to find the external B, and alert (a) will not look outside?!

We all know that a local variable has precedence over a global variable, or that an inner-scope variable has a higher precedence than the outer edge. When the JS engine cannot find this variable in the current scope, it is looking for the perimeter scope. Before that, however, there is a serious question of whether this variable exists in the current scope. An interpreted language such as JavaScript is basically divided into two stages, the compile period (the following is the salutation of most languages, called precompilation) and the runtime. In the precompilation phase, it uses a function to divide the scope, and then layers for its var declared variable (hereinafter called VAR variable) and function definition to open up memory space, and then the VAR variable for special treatment, all assigned the initial value of undefined

Variable string

Do not underestimate the character string in JavaScript, it is very flexible to use:

The code is as follows

Copy Code

<!--string.html--> [HTML] [Head] [Script language= "JavaScript"] <!--hide Me var nice_monkey = "The monkey is looking at you, and reading the poem." var bad_monkey = "The monkey frowns at you." Define variables and assign values to variables so that they are equal to these strings, so when you want to write these strings, you can write: Document.writeln (nice_monkey+ ""); var monkey = prompt ("Monkey's name?", "silly monkey"); Here we call the user feedback prompt, and when it is invoked, start a dialog box to request the user to enter information. Use When the user finishes, knock OK to return information. The return information in the uplink is placed in its variable. var demanding= "Want"; var tech= "a computer!"; var Techy_monkey = monkey + demanding + tech; Document.writeln (techy_monkey+ ""); Document.writeln (Techy_monkey.fontcolor (' Red '); The Techy_monkey of the string is shown in red on the screen End Hiding--> [/script] [/head] [/html]

Learning points

The code is as follows	Copy Code
* var secs_per_min = 60; * var bad_monkey = "The Monkey scowls at and burps."; * var Techy_monkey = monkey + demanding + tech; * var monkey = prompt ("What's" Monkey ' name? "," the Monkey "); * Document.writeln ("[B]the monkey dances[/b]"); * Document.writeln (Bad_monkey + "[BR]"); * String Object: Document.writeln (Techy_monkey.fontcolor (' Red ');

Prompt () is a method that belongs to the Window object, see the HTML DOM tutorial w3school Chinese web for details
Conditional statement

If statement

if (condition) {
Execute code when conditions are set
}

If...else statement

if (condition) {
Execute this code when the condition is set
}
else{
Execute this code when the condition is not true
}

If...else If...else Statement

if (condition 1) {
Condition 10% Execute code immediately
}
else if (condition 2) {
Condition 20% Execute code immediately
}
else{
Execute code when both condition 1 and Condition 2 are not true
}

Instance:

The code is as follows

Copy Code

<!--if_ Then.html--> [HTML] [head] [title]if then Exercise[/title] [Script language = "JavaScript"] &N Bsp var color = prompt ("What color do you prefer, red or blue?", "");   var adjective;   if (color = = "Red") {     adjective = "lurid.";  }else if (color = = "Blue") {     adjective = "cool.";  }else {     adjective = "confused."  }   var sentence = "You like" + Color + "? The monkey thinks you ' re ' +adjective + "[P]";  //Stop hiding me--> [/script] [/head]    [body] [Script language = ' Ja Vascript "]   <!--begin hiding me   Document.writeln (sentence.fontcolor color);  //End H IDing--> [/script] [/body] [/html]

Link Events
The user clicks on a link, or moves the mouse over it, and JavaScript sends a link event.
A link event is called the onclick, which is sent when the user clicks on it.
Another is called onmouseover, when the user moves the mouse over the top to send.

The code is as follows	Copy Code
[HTML] [Head] [/head] [Body] <a onclick= "alert (' Ooo, do it again! ');" href= "#" >click on me!</a> <a onmouseover= "alert (' Hee hee! ');" href= "#" >mouse over me!</a> [/body] [/html]

Learning points
OnClick, OnMouseOver

Expand
Events: Events are actions that can be detected by JavaScript such as mouse clicks, page or image loading, mouse hovering over a hotspot on the page, selection of input boxes in the form, confirmation form, keyboard keys

Common events
OnClick
OnLoad and OnUnload
Onfocus, OnBlur and Onchangeonsubmit.
OnMouseOver and onmouseout
For more information, see the HTML DOM Event object

Picture Exchange
A major application of javascripts is its ability to automatically switch pictures when you move the mouse.

The code is as follows	Copy Code
[HTML] [Head] [Title] Picture Exchange [/title] [/head] [Body] <!--It's like a standard tag, but it's given a name: The_image, The name is arbitrarily taken--> <a onmouseover= "document.the_image.src= ' image/thau.gif ';" href= "#" > Change</a> <!--document.the_image.src= ' button_d.gif '; "Find the picture called ' The_image ' and turn its src into button_d.gif." --> [/body] [/html]

Here's a slightly more complicated example.

This example to complete a function: There are two pictures on the page (a), when the mouse moved to the following picture is, the picture changes, every move, will change, when the mouse clicks, the picture above has become the same as the following picture. This is a good effect:

The code is as follows

Copy Code

<!--image_swapping_2--> [HTML] [Head] [Script language= "JavaScript"] <!--hide Me var temp = ""; var image1 = ' image/thau.gif '; var image2 = ' image/sky.gif '; var image3 = ' Image/monkey.gif ' var user_name = prompt ("What ' Your Name", ""); if (user_name = = "") { user_name = "homeless person"; } End Hide--> [/script] [/head] [Body] [P][/p] <B> Hello, <script language=javascript> <!--hide Me document.write (user_name); End Hide--> </SCRIPT> </B> [P] will move to the image below until you find the picture you like and click on it. [/P] [P]<a onmouseover= "TEMP=IMAGE1; Image1=image2; Image2=image3; Image3=temp; Document.the_image.src=image1; "ONCLICK=DOCUMENT.BRAND_IMAGE.SRC=IMAGE1; href= "#" > </A> [/body] [/html]

Learning points
Document.imageObject.src

DOCUMENT.IMAGEOBJECT.SRC (write-only imageobject.src): HTML DOM Image Object