This page has been robot translated, sorry for typos if any. Original content here.

Part 1: First steps

What is JavaScript?

JavaScript is a newly minted scripting tool developed by Netscape. with JavaScript you can easily create interactive Web pages. In this tutorial, you'll see what you can do with JavaScript, and even more - see how it's done.

JavaScript is not Java at all!

Many people believe that JavaScript is the same as Java, just because these languages ​​have similar names. In the class itself, this is not so. I believe that now it will be unnecessary to illustrate to you all the differences between these languages ​​- so remember only that JavaScript is not Java.
For more information on the topic, please refer to the introduction published on the Netscape website Smile happy

Starting JavaScript

What should I do to run scripts written in JavaScript? You will need a browser that is talented to work with JavaScript - for example Netscape Navigator (since version 2.0) or Microsoft Internet Explorer (MSIE - since version 3.0). Since both of these browsers have become widespread, many people have been able to work with scripts written in JavaScript. Undoubtedly, this is a significant argument in favor of choosing the JavaScript language as a means of improving your Web pages.
Of course, before reading this guide, you should get acquainted with the basics of another language - HTML. In this case, perhaps you will find that many good tools for dialogue can be created using only HTML commands. To get more information about the HTML language, it's best to initiate a search for the keyword 'html' on the Yahoo search server.

Placing JavaScript on an HTML page

The JavaScript script code is placed directly on the HTML page. To see how this is done, let's look at the following unsophisticated example:
<html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> From the main view, the sample prompts a normal HTML file. The only innovation here is the system:
<script language="JavaScript"> document.write("А это JavaScript!") </script> This is true JavaScript code. To see how this script works, write this sample as a normal HTML file and load it into a browser that supports JavaScript.
And this is the result of executing this file (if you use a browser with JavaScript support, then you will have 3 lines):

This is a normal HTML document.

Again the act of HTML.

I have to admit that this script is not so useful - the same thing could also be written more simply in a "pure" HTML language. I just wanted to show you a tag tag <script>. Everything that stands between the <script> tags </ script> is also interpreted as JavaScript code. Here you are similarly watching the pattern of using the document.write () instruction - one of the most important commands used in programming in JavaScript. The command document.write () is used, at what time it is necessary to write something in the current act (in this case, this is our HTML document). So our little JavaScript program in an HTML document reads "This is JavaScript!" .

Browsers without JavaScript support

And what will our page look like if the browser does not perceive JavaScript in any way? Browsers that do not have JavaScript support do not know the <script> tag either. They ignore it and also print all the codes following it as plain text. In other words, the reader will see how the JavaScript code given in our program will be written in clear text directly in the middle of the HTML document. Of course, this did not enter into our plans. On this adventure there is a specialized tool to hide the source code of the script from older versions of browsers - we will use a comment tag from HTML - <! - -> for this . As a result, the newly made variation of our source code will look like: <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> In this case, the browser without JavaScript support will begin to print: Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. And without an HTML comment tag, a browser without JavaScript support would print: Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Please note that you can not completely hide the JavaScript source code. What we are doing here has the goal of preventing the printout of the script code on old browsers - but in any case the reader will be able to see this code through the menu item 'View document source'. There is not a similar way to hide anything from viewing in your source code (and see how this or that trick is done).

Developments

Events also event handlers are a very important part of JavaScript programming. Events, firstly, are initiated by one or another of the user's actions. If it clicks on a button, the "Click" event occurs . If the mouse pointer crosses any hypertext link, the MouseOver event occurs . There are several different types of events.
We can force our JavaScript program to respond to some of them. Additionally, this can be done with the help of special programs for finishing events. So, as a result of clicking on the button, a pop-up window can be created. This means that the creation of the window must be a reaction to the Click event. The event handler, which we must use in this case, is called onClick . Additionally, it tells the computer what to do if the event occurs. The following code represents a simple sample of the onClick event completion program : <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

This sample has several new features - consider them in order. You can observe here that we are creating a form with a button (how this works - the problem of the HTML language, so we will not consider it here). The first new feature is onClick = "alert ('Yo')" in the <input> tag. As we have already said, this property determines what happens when the button is pressed. Thus, if the Click event is owned, the computer is forced to perform an alert ('Yo') call. This is also a sample code in JavaScript (Note that in this case we do not even use the <script> tag).
The alert () function allows you to create drop-down boxes. When you call it, you must specify a string in parentheses. In our case, this is 'Yo' . Additionally, this is how the text will appear one day, which will appear in the drop-down box. Thus, at what time the reader at what time the button is clicked, our script creates a window containing the text 'Yo' .
Some confusion may be caused by another peculiarity of this sample: in the document.write () command we used double quotes ("), only alert () systems are only single.) Why? In most cases you can use both types of quotation marks. we wrote onClick = "alert ('Yo')" - that is, we also used double quotes, also single quotes.We would write onClick = "alert (" Yo ")" , the computer could not understand our script, since it becomes unclear to which of the elements of the system the relation of the function onClick events only to which you do not, so you also have to interleave both types of quotes in this case.It does not know the meaning of the order in which you used the quotes - first double, only then single, or vice versa.That is, you can just write also onClick = 'alert ("Yo")' .

You can use many different types of event finishes in the script. Information about some of them we get in this description, but not all. Therefore, please refer to the appropriate directory if you want to know which event handlers still exist.

So, if you are using the Netscape Navigator browser, then the drop-down box contains the text that was passed to the JavaScript alert function. Such a restriction is superimposed for security reasons. You can also create the same drop-down box using the prompt () method. Yet in this case the window will begin to reproduce the text entered by the reader. Therefore, a script written by an attacker can take the form of a system message and also ask the reader to enter a password. And if the text fits in the drop-down box, then the reader is given to realize that this window was created by a web browser, but not by your operating system. In addition, since this restriction is imposed for security reasons, you can not simply take the message that appeared.

Functions

In most of our JavaScript programs we will use functions. Therefore, now I need to talk about this important element of the language.
In most cases, functions are just a means of linking several commands together. Let's, to the sample, write a script that prints a certain text three times in a row. For the source, let's take a simple approach: <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> And such a script will write the following text Доброе дело пожаловать на мою страницу! Это JavaScript! Доброе дело пожаловать на мою страницу! Это JavaScript! three times. If you look at the source code of the script, you can see that to get the desired result, a certain proportion of its code has been repeated three times. Is it effective? No, we can solve the same problem even better. How about this script for solving the same problem ?: <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> In this script, we defined a function that consists of the following lines: function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } All script commands that are inside curly braces - {} - belong to the function myFunction () . This means that both the document.write () commands are now linked together and can also be executed when the specified function is called. Additionally, in fact, our sample has three calls to this function - You can see that we wrote the myFunction () line three times at a time after the definition of the function itself. That is, once they also made three calls. In turn, this means that the contents of this function (the commands indicated in curly brackets) were executed three times.
Since this is a fairly simple example of using the function, you could have a problem, just why exactly these functions are so important in JavaScript. After reading this description, you will undoubtedly understand their usefulness. It is the ability to pass variables when calling a function that gives our scripts real flexibility - what it is, we'll see later.

Functions can similarly be used in conjunction with event finishing procedures. Consider the following example: <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> Here you can test this example:

Here, when the button is pressed, the calculation () function is called. As you can see, this function performs some calculations, using the variables x , y, also result . We can define a variable using the var keyword. Variables can be used to store different quantities - numbers, lines of text, etc. So the script line var result = x + y; tells the browser that it is necessary to create the result variable and also put the result of the arithmetic operation x + y (ie 5 + 12) there. After that, the quantity 17 will be placed in the variable result . In this case, the alert (result) command does the same as alert (17) . In other words, we get a drop-down box, in which the quantity 17 is written.