JavaScript Beginner Tutorial (Lesson 2)_Basic Knowledge

In the last lecture, we learned where JavaScript appears and what it looks like. Now we start learning this language. In this lesson we will learn how JavaScript stores information, how to make decisions based on information, and how to alternate images according to user interaction requirements
Are you ready? Start learning the basics of computer programming now. Lecture 1, variables.
If you have studied algebra, you must have seen variables. It doesn’t matter if you haven’t learned it before. Variables are a simple way for JavaScript to store information. For example, when you write: "x=2," "x" is a variable that stores the value 2. If you then say "y=x 3,", "y" will have the value "5"
Here is a JavaScript example using variables.
In this example, we browse the source code step by step. You will see:

There is nothing new here, it is the end of a JavaScript piece.
This is all the JavaScript in the header file in this example. When JavaScript executes these codes, the above variables will be defined. But at this point these variables haven't done anything yet, which is what is done in the body of the example.

Now that we have the variable defined, let’s do something with it.

When you've finished that work, it's time to start practicing if clauses.

The application of "if" clause can make the program respond differently according to the value input by the user. For example, you could write a program so that it reacts differently to you than to other people. Here is its basic format:
if (some condition is true)
{
do something;
do something;
               do something;
If the condition is true, execute the statement in the curly brackets.
Remember: whitespace is the only thing that keeps your program readable. Of course you could write the entire if statement in one line, but it would be difficult to read.
Here is an example of an if clause.


Once the user clicks on a link or moves the mouse over it, JavaScript sends a link event. A link event called onClick is sent when the user clicks on it. The other is called onMouseOver, which is sent when the user moves the mouse over it.

You can use these events to affect what the user sees.

The first interesting thing is that there is no <script> tag. This is because anything that appears within onClick and onMouseOver quotes is understood by JavaScript. In fact, the quotes before the end of the sentence allow you to write JavaScript as a single line. You can put the entire JavaScript program within an onClick quote, but it will look ugly. <br/><br/> Please look at the first line: <br/><br/> <a href="#" onClick="alert('Ooo, do it again!');">Click on me!< /a> <br/><br/> This is like a formal targeting tag, but it has the magic onClick="" which says "When someone clicks on the link, run the JavaScript in the quotes" Note after the alert There is a semicolon. <br/><br/> Please also note that there is nothing in the quotation marks of href="", which indicates that although the link is there, it cannot go there when you click it. <br/><br/> The next line is: <br/><br/> <a href="#" onMouseOver="alert('Hee hee!');">Mouse over me! <br/><br/> This is just like the first line, except onMouseOver is used instead of onClick. <br/><br/> Now that we have finished learning link events, please enter the wonderful picture alternation! <br/><br/>One of the main applications of JavaScripts is its function of automatically switching images when you move the mouse. <br/><br/> Here is a quick and basic image exchange example. <br/><br/>  <img src="/static/imghwm/default1.png" data-src="button_r.gif" class="lazy" name="the_image" alt="JavaScript Beginner Tutorial (Lesson 2)_Basic Knowledge" > <br/> <a href="#" onMouseOver="document.the_image.src='button_d.gif';" >change <br/><br/> Let’s analyze this example step by step, <br/><br/> The first line is: <br/><br/> <img src="/static/imghwm/default1.png" data-src="button_r.gif" class="lazy" name ="the_image" alt="JavaScript Beginner Tutorial (Lesson 2)_Basic Knowledge" > <br/><br/> This is like a standard <img src="/static/imghwm/default1.png" data-src="newhome.gif" class="lazy" src= alt="JavaScript Beginner Tutorial (Lesson 2)_Basic Knowledge" > tag, except that it is given a name: the_image, and the name is arbitrary: my_image, a_box.... ..but no spaces are allowed inside. <br/><br/> The next line is: <br/><br/> <a href="#" onMouseOver="document.the_image.;">change <br/> <br/> This is where the picture exchange happens. Just like you saw onMouseOver before. <br/> The main JavaScript that appears in onMouseOver quotes is: <br/><br/> document.the_image.; <br/><br/> This sentence says: "Find the name 'the_image' image and change its src to button_d.gif." Note that the entire statement uses double quotes, while 'button_d.gif' uses single quotes. Although the two are interchangeable, be careful not to get confused if one set of quotation marks exists within another. You can write " 'something' " or ' "something" ' , but you can't write: " 'something" ' or " "something" ". Got it? <br/><br/>Just as I didn’t tell you many details of how document.writeln() works, I didn’t tell you how image exchange works in this example. You will learn more about "Goal-Oriented Programming" and "File Object Modules" in the next lecture. <br/><br/> Please note! The image to be exchanged must be the same size as the original image! Otherwise, it deforms. <br/><br/> Below are two pieces of code. (Note: Take a look if you are interested, there is no explanation here, you can skip) <br/><br/> <script language="JavaScript"> <br/> <!-- hide me <br/><br/> var temp = ""; <br/> var image1 = 'netteach.gif'; <br/> var image2 = 'phtshop1.gif'; <br/> var image3 = 'newhome.gif' <br/><br/> var user_name = prompt ("What's your name", ""); <br/> if (user_name == "") <br/> { <br/> user_name = "stranger"; <br/> } <br/> document.write(user_name); <br/> // end hide --> <br/> </script>



Now let’s review what we learned today.

Variable
Variable value can be a number or a string. There are some restrictions and rules to remember when naming variables.

Statement
Statement ends with semi-circular brackets.

String
A string is a sequence of actions in quotation marks. The quotation marks can be single quotation marks or double quotation marks. There are many wonderful things you can do with strings. You can use "+" to concatenate two strings.

document.writeln()
Document.writeln() can be used to write text and HTML in web pages.

prompt
You can use prompt to get user input feedback.

if--else
You can use the if--else clause to make your JavaScript behave differently according to different user responses.

Link events
OnClick and onMouseOver in an href can run JavaScript based on user response.

Image transformation
After the image is named, JavaScript can be used to change the displayed image.

If you feel that you have mastered everything we have said above, then congratulations!
There are still many things to learn. Next time, we'll get to the heart of JavaScript: the Document Object Model. We'll also learn how to open and manipulate windows and frames, and start building our own new browser.