Advanced JavaScript Tutorial (Lesson 1)_Basic Knowledge

Welcome to continue learning Javascript advanced tutorials. Before this we have studied the Javascript introductory tutorial. In this stage of study we will continue to study issues that we have not yet had time to talk about in the last tutorial. I'll also show you the many amazing features of Javascript that enable you to create truly multimedia applications.
Here’s what we’ll cover:
Assigning values ​​to variables
If-then statements
For and while loops
Writing your own functions
Opening and controlling windows
Read Write HTML forms
Apply arrays
Control image conversion
If these topics sound unfamiliar to you, 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 syntax and some of the most commonly used objects. Now we will deepen your JavaScript knowledge and make you a true JavaScript master. Here is the path you must take to become a true master.
Lesson 1:
Introduce and clarify the clues, and introduce a few tips, focusing on a new if-else statement and the true meaning of variables.
Lesson 2:
Magical string processing, saving information about readers who have visited your website, and introducing a new type of array.
Lesson 3:
Even the timeline of the web page allows different events to occur at different times, and introduces how to make your JavaScript scripts run on various browsers.
Lesson 4:
Preloading images, image maps and JavaScript. Generate your own objects and use loops to quickly find what you're looking for.
Lesson 5:
Tools for developing and testing JavaScript, and tips for making your JavaScript code run quickly.
After studying this tutorial, you will have a more complete understanding of JavaScript. Once you master this knowledge, you will be able to create various Internet applications.

The most commonly used statement in JavaScript is if-else. Here is an example of rewarding a monkey:
if (monkey_behavior == "good")
{
var toy == "videogames";
} else {
var toy == "rocks";
}
Translated in plain English, the above code means: "If the monkey behaves well, allow him to play video games, otherwise kill him." The above example shows the standard for if-else statements. format, but for those who like to be opportunistic, there is a shortcut:
var toy = (monkey_behavior=="good") ? "videogames" : "rocks";
This expression is the same as the above statement The effect is exactly the same. This conditional statement has 3 parts: the test condition, the value returned if the test is true, and the answer value if the test is false. In the above example, the test condition is (monkey_behavior=="good"). If the test condition is true, the string videogames is returned; if the test condition is false, the value to the right of the semicolon is returned: rock.
This shortcut is very convenient when used in 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 see the code execution process. Depending on whether the characters you enter are the required password, you will receive a "welcome" message or a beep.
If there is no such conditional statement, the code must be written like this::
var password = "open sesame";
var answer = prompt("what's the password? ","");
if (answer == password)
{
alert("welcome");
} else {
alert("buzz off");
}
Obviously the code is much longer, but it is also easier to understand what it means. The choice of conditional statement depends on each individual's preference.

Here is an example of applying variables:
var happiness = "a banana split";
alert("The monkeys think happiness is " happiness);
This line of code declares a variable called happiness variable, and then call this variable in an alert dialog box. If you look at other people's JavaScript, you may notice that they use var when declaring variables, and this usage can cause problems. First of all, it may cause some versions of MSIE to crash or run abnormally. This situation is most likely to occur with MSIE on Mac machines. Secondly, if you write very complex JavaScripts, you have to write your own functions, so you have to understand what the variables mean.
As mentioned in the last JavaScript tutorial: Lesson 4, a function is a JavaScript program code that performs a specific function after being called. The best functions are modular, and you can control the input variables and the output results. And once it's compiled, you don't have to worry about it going wrong, and it won't conflict with other functions. To write functions with these stable properties, you must make sure not to easily change variables passed as arguments to other functions. The following example shows what happens if you don't pay attention to these details. Suppose we write a program to convert Fahrenheit to Celsius. Click on Fahrenheit/Celsius to see what I mean. If you convert 50 degrees Fahrenheit, a message will appear:
“50 degrees Fahrenheit is 10 degrees Celsius (50 degrees Fahrenheit is equivalent to 10 degrees Celsius).”
Here is the code:
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. A function called convertTemp() calls another function called fahrenToCelsius() and returns the result. If you don't understand this program very well, you need to re-learn Lesson 4 of the JavaScript Basic Tutorial.
The confusing thing about this example is that there is a variable called temp in both functions. In the convertTemp() function, its role is to store the Fahrenheit value (provided by the user). In the fahrenToCelsius() function, it is used to calculate the converted Celsius temperature value Celsius. This not only confuses us but also confuses the Javascript program. If you try to run this code with variables the following will happen: If you wish to convert 50 degrees Fahrenheit, the following message will be displayed: "10 degrees Fahrenheit is 10 degrees Celsius." ). Why does the program interpret that when you enter 50 degrees Fahrenheit as 10 degrees? Let's study the execution process of this program. When we call the function convertTemp() and enter "50" in the prompt bar, we get temp = 50; then "temp" is passed to the function farnToCelsius(). In farnToCelsius(), the parameter faren is set to 50, and "temp" is set to (50 - 32) x 5/9, which results in 10. Before returning the result, 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". You can avoid these problems if you are careful and don't give the variables in the two functions the same name. But this isn't the best solution either. As you keep adding more functions, it becomes difficult to ensure that you don't rename variables in functions. And if you reuse many variable names such as loop, index, count and the_name, using different names is really a headache.
The best solution is to let JavaScript understand that the variable temp used in the fahrenToCelsius() function and the variable temp used in the convertTemp() function are two different things. If each function has a variable temp that applies only within that function, you don't have to worry about variables with the same name in different functions getting mixed up. And var is used for this purpose.
To avoid confusion among various variables with the same name in JavaScript, you can add var in front of the variable when declaring it. The variable declared with var in a function is called a local variable, which only exists inside the function. Normally you should try to use local variables.
Here is the correct JavaScript code after using 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 function fahrenToCelsius(), in Inside the function fahrenToCelsius(), the parameter faren is now set to 50, and then temp is set with the following code:
var temp = (faren - 32) * 5 / 9;
Since this temp variable is previously used var declaration, so the variable is different from the variable called temp in other functions. When fahrenToCelsius() is executed, the temp in this function disappears. So before fahrenToCelsius() returns the value, farn = 50
(inside fahrenToCelsius) temp = 10
(inside convertTemp) temp = 50
fahrenToCelsius() then returns its variable temp value 10. Once we come out of the fahrenToCelsius() function, the function's role in the temp variable ends. When fahrenToCelsius() returns, it sets the value of the variable to 10:
(inside convertTemp) temp = 50
(inside convertTemp) celsius = 10
Now the information displayed will be what we want The "50 degrees Fahrenheit is 10 degrees Celsius".