JavaScript advanced tutorial (Lesson 1) _ basic knowledge

Source: Internet
Author: User
JavaScript advanced tutorial (Lesson 1) You are welcome to continue with the Javascript advanced tutorial. Before that, we have learned the basic Javascript tutorial. In this phase of study, we will continue to learn the issues that have not been discussed in the last tutorial. I will also show you many of the magical functions of Javascript, so that you can make real applications for multimedia.
The following are what we will cover:
Assign values to variables
If-then statement
For and while Loops
Compile your own functions
Open and control window
Read and Write HTML Forms
Application Array
Control image Conversion
If you are still familiar with these topics, I suggest you read the basic Javascript tutorial on this site first.
In the last JavaScript tutorial, we learned the core content of JavaScript: some important syntaxes and the most commonly used objects. Now we will deepen your JavaScript knowledge and make you a real JavaScript master. The following is the path you must take to become a real master.
Lesson 1:
Introduce and clarify the clues, and introduce several tips, focusing on a new if-else statement and the true meaning of variables.
Lesson 2:
Magical string processing, saving the reader's information that has accessed your website, and introducing a new array.
Lesson 3:
Even the timeline of the web page enables different events to occur at different times, and describes how to enable your JavaScript script to run in various browsers.
Lesson 4:
Preload images, image ing, and JavaScript. Generate your own objects and quickly find the objects you want to find using loops.
Lesson 5:
Develop and test JavaScript tools and tips for making your JavaScript code run quickly.
After learning this tutorial, you will have a complete understanding of JavaScript. With this knowledge, you can create various Internet applications.

The most common statement in JavaScript is if-else. The following is an example of monkey rewards:
If (monkey_behavior = "good ")
{
Var toy = "videogames ";
} Else {
Var toy = "rocks ";
}
The above code means: "If a monkey performs well, he is allowed to play video games; otherwise, he will be flat ." The above example shows the standard format of the if-else statement, but there is also a shortcut for those who like opportunistic:
Var toy = (monkey_behavior = "good ")? "Videogames": "rocks ";
This expression plays the same role as the preceding statement. This condition statement has three parts: the test condition, the value returned when the test is true, and the answer value returned when the test is false. In the preceding example, the test condition is (monkey_behavior = "good "). If the test condition is true, the videogames string is returned. If the test condition is false, the value on the right of the semicolon is returned: rock.
This shortcut is very convenient for function calls. For example, you can use it to do the following:
Var password = "open sesame ";
Var answer = prompt ("what's the password? ","");
Alert (answer = password )? "Welcome! ":" Buzz off ");
Click here to view the code execution process. Based on whether the character you entered is a single password, you will be "welcome" or "to" beep.
If you do not have such a conditional statement, you must write the code as follows ::
Var password = "open sesame ";
Var answer = prompt ("what's the password? ","");
If (answer = password)
{
Alert ("welcome ");
} Else {
Alert ("buzz off ");
}
The code is much longer, but it is easier to understand its meaning. The condition statement that you choose depends on your preferences.

Here is an example of an application variable:
Var happiness = "a banana split ";
Alert ("The monkeys think happiness is" + happiness );
This line of code declares a variable called happiness, and then calls this variable in an alert dialog box. If you have read other people's JavaScript code, you may notice that they use var when declaring variables. This usage may cause problems. First, some versions of MSIE may be paralyzed or run abnormally. In this case, MSIE on the Mac machine is most likely to happen. Second, if you write complex JavaScripts, you must write your own functions, so you must understand the meaning of variables.
As described in the last JavaScript Tutorial: In Lesson 4, a function is the JavaScript program code that executes a specific function after being called. The best functions are modularized. You can control input variables and output results. Once compiled, you don't have to worry about problems and don't conflict with other functions. To make the locally written functions have these stable features, make sure that you do not easily change the variables that are passed as parameters to other functions. the following examples show the consequences if you do not pay attention to these details. Suppose we write a program to convert the Fahrenheit temperature to the Celsius temperature. Click Fahrenheit/Celsius to see what I mean. If you convert to 50 degrees Fahrenheit, a message is displayed:
"50 degrees Fahrenheit is 10 degrees Celsius (50 degrees Fahrenheit equals 10 degrees Celsius )."
The following code is used:
Function fahrenToCelsius (fare)
{
Temp = (faren-32) * 5/9;
Return temp;
}
Function convertTemp ()
{
Temp = prompt ("what temperature fahrenheit? "," 50 ");
Celsius = fahrenToCelsius (temp );
Alert (temp + "degrees Fahrenheit is" + celsius + "degrees Celsius .");
}
This program is very simple. One function called by convertTemp () is fahrenToCelsius () and returns the result. If you are not familiar with this program, you need to re-learn the fourth lesson of the tutorial ript.
This example is confusing because there is a variable named temp in both functions. In the convertTemp () function, it stores the Fahrenheit value of the Fahrenheit temperature (provided by the user ). In the fahrenToCelsius () function, it is used to calculate the converted Celsius temperature value. This will not only confuse us, but also confuse this Javascript program. If you try to run this code with a variable, the following result will occur: If you want to convert to 50 degrees Fahrenheit, the following information will be displayed: "10 degrees Fahrenheit is 10 degrees Celsius. "(10 degrees Fahrenheit is equivalent to 10 degrees Celsius ). Why do you input 50 degrees Fahrenheit while the Program understands that you entered 10 degrees? Let's study the execution process of this program. When we call the function convertTemp () and input "50" in the prompt bar, we get temp = 50; then "temp" is passed to the function farenToCelsius (). In farenToCelsius (), the faren parameter is set to 50, while "temp" is set to (50-32) x 5/9, and the result is 10. Before the result is returned, the parameter values are:
Faren = 50
Temp = 10
Now farenToCelsius () returns 10 to the variable celsius:
Temp = 10
Celsius = 10
Now we get an incorrect statement: "10 degrees Fahrenheit is 10 degrees Celsius ". If you are careful, do not name the variables in the two functions with the same name to avoid these problems. But this is not the best solution. When you add more functions, it is difficult to ensure that you do not duplicate the variables in the function. And if you repeatedly use many variable names such as loop, index, count, and the_name, it is really a headache to use different names.
The best solution is to make JavaScript understand that the variable temp used in the fahrenToCelsius () function is the same as the variable temp used in the convertTemp () function. If every function has a variable temp that is only applied to the function, you don't have to worry about the variable with the same name in different functions. Var is used for this purpose.
To avoid obfuscation of various variables with the same name in JavaScript, you can add var before the variable when declaring the variable. In a function, use var to declare that the variable behind the lamp is called a local variable, which only exists in the function. Generally, you should try to use local variables.
Here is the correct JavaScript code after var declaration:
Function fahrenToCelsius (faren)
{
Var temp = (faren-32) * 5/9;
Return temp;
}
Function convertTemp ()
{
Var temp = prompt ("what temperature Fahrenheit? "," 50 ");
Var celsius = badFahrenToCelsius (temp );
Alert (temp + "degrees Fahrenheit is" + celsius + "degrees Celsius .");
}
Now when we enter 50, (inside the convertTemp function) temp = 50
Temp is passed to the fahrenToCelsius () function. Within the fahrenToCelsius () function, the faren parameter is now set to 50, and then temp is set with the following code:
Var temp = (faren-32) * 5/9;
Since the temp variable is declared with var, the variable is different from the variable named temp in other functions. When fahrenToCelsius () is executed, the temp of the function disappears. So before fahrenToCelsius () returns a value, faren = 50
(In fahrenToCelsius) temp = 10
(In convertTemp) temp = 50
FahrenToCelsius () then returns its variable temp value 10. Once we get out of the fahrenToCelsius () function, the function's moderate temp variable is terminated. When fahrenToCelsius () is returned, it sets the value of the variable to 10:
(In convertTemp) temp = 50
(In convertTemp) celsius = 10
The displayed information is what we want: "50 degrees Fahrenheit is 10 degrees Celsius ".
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.