Js variables, strings, conditional statements, and event Learning notes

Source: Internet
Author: User

This article will share with you an article on js variables, strings, conditional statements, and event Learning notes. For more information, see reference.

Variable

You can also use an instance to learn the related syntax of variables:

The Code is as follows: Copy code

<! --Variables.html -->

[Html]
[Head]
[Script language = "JavaScript"]
<! -- Hide me
// Load up some variables to define 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 section describes how to use JavaScript to write variables and webpages.
Document. writeln ("<B> my hen has eggs every month ");
Document. writeln (eggs_per_month_all );
Document. writeln ("count. </B> [p]");
 
// End hiding -->
[/Script]
[/Head]
[/Html]

<Script type = "text/javascript">
Var a = 100;
Var B = true;
Function test (){
Alert ();
Alert (B );
B = false;
Alert (B );
Var a = 200;
Alert (a/2 );
Alert (++ Math. PI );
Alert (Math. PI ++ );
}
Test ();
</Script>


Learning point

① When a variable is used for the first time, the statement should be "var. Although it is not necessary to use var as a variable declaration, it is a good habit.
② Variable names are case sensitive
③ You can use document. writeln () to write text and HTML in the webpage.
Document. writeln () is a Document Object method. For more information, see w3school Chinese Web html dom tutorial.

Why is the first alert undefined and the second alert true. This problem can also be extended to the question: how can we find external B when alert (B), but alert (a) won't look outside ?!

We all understand that the priority of a local variable is higher than that of a global variable, or that the priority of a variable in the inner scope is higher than that in the periphery. When the JS engine cannot find this variable in the current scope, it will find the peripheral scope. However, before that, there was a serious problem: whether the variable exists in the current scope. An interpreted language like javascript is basically divided into two phases: the compilation phase (which follows the naming conventions of most languages, namely pre-compilation) and the runtime phase. In the pre-compilation phase, it uses a function to divide the scope, and layer by layer opens up the memory space for the variables declared by var (hereinafter referred to as var variables) and function definitions, then perform special processing on the var variable, and assign the initial values to undefined.


Variable string

Do not underestimate the character string in JavaScript. It is quite flexible to use:

The Code is as follows: Copy code

<! --String.html -->

[Html] [head]
[Script language = "JavaScript"]
<! -- Hide me
Var nice_monkey = "is the monkey facing you ?, And read poetry .";
Var bad_monkey = "the monkey frowned at you .";
// Define the variable and assign a value to the variable so that it is equal to these strings. When you want to write these strings, you can write:
 
Document. writeln (nice_monkey + "");
Var monkey = prompt ("monkey name? "," Silly monkey ");
// This is called the user feedback prompt method. When it is called, a dialog box is started to request user input information. Use
// After the user completes, press OK to return information. Put the returned information in the upstream information into its variable.
 
Var demanding = "yes ";
Var tech = "one computer! ";
Var techy_monkey = monkey + demanding + tech;
 
Document. writeln (techy_monkey + "");
Document. writeln (techy_monkey.fontcolor ('red ');
// Indicates that the string techy_monkey is displayed in red on the screen.
// End hiding -->
[/Script]
[/Head] [/Html]


 

Learning point

The Code is as follows: Copy code

* Var secs_per_min = 60;
* Var bad_monkey = "The monkey scowls at you and burps .";
* Var techy_monkey = monkey + demanding + tech;

* Var monkey = prompt ("What's the monkey's 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 Window object method. For more information, see w3school's html dom tutorial.
Condition Statement

If statement

If (condition ){
Run the code when the condition is set.
}

If... Else statement

If (condition ){
Run this code when the condition is set.
}
Else {
Run this code when the condition is invalid.
}

If... Else if... Else statement

If (condition 1 ){
Run the code when condition 1 is set.
}
Else if (condition 2 ){
Run the code when condition 2 is set.
}
Else {
Run the code when neither condition 1 nor condition 2 is successful.
}

Instance:

The Code is as follows: Copy code

<! --If_then.html -->
[Html]
[Head]
[Title] If Then Exercise [/title]
[Script language = "JavaScript"]
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 = "JavaScript"]
<! -- Begin hiding me
Document. writeln (sentence. fontcolor (color ));
// End hiding -->
[/Script]
[/Body]
[/Html]

Link event
When you click a link or move the mouse over it, JavaScript sends a link event.
A link event is called onClick. It is sent only when you click it.
The other is onMouseOver, which is sent when you move the mouse over it.

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 point
OnClick, onMouseOver

Expansion
Event: an event is a behavior that can be detected by JavaScript, for example, by clicking the mouse, loading a page or image, hovering the mouse over a hotspot on the page, selecting an input box in the form, and confirming the form; keyboard buttons)

Common events
OnClick
Onload and onUnload
OnFocus, onBlur and onChangeonSubmit
OnMouseOver and onMouseOut
For more details, see html dom Event object

Image exchange
One of the main applications of JavaScripts is that it enables automatic image switching when you move the mouse.

The Code is as follows: Copy code

[Html]
[Head]
[Title] image Exchange [/title]
[/Head]

[Body]

<! -- This is like a standard label, but it is given the name the_image,
The name is arbitrary -->

<A onmouseover = "document. the_image.src = 'image/thau.gif ';" href = "#">
Change </A>
<! --Document.the_image.src+'button_d.gif ';
"Find the image named 'The _ image' and change its src to button_d.gif." -->
[/Body]
[/Html]

A more complex instance.

This instance needs to complete this function: There are two images on the page (one click). When you move the mouse over the image below, the image changes and changes every time you move it back, when you click the mouse, the image above becomes the same as the image below. This is a good result:

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's your name ","");
If (user_name = ""){
User_name = "Stray man ";
}
// End hide -->
[/Script]

[/Head]
[Body]
[P] [/p]
<H3> Browser Configuration </H3>

<B> hello,
<SCRIPT language = JavaScript>
<! -- Hide me
Document. write (user_name );
// End hide -->
</SCRIPT>
</B>

[P] Move it to the image below until you find the image you like and click 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 point
Document. imageObject. src

Document. imageObject. src (only imageObject. src is required): html dom Image object

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.