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

Part 1: First Steps

What is javascript

JavaScript is a newfound language for scripting, developed by Netscape. With JavaScript, you can easily create interactive Web pages. In this guide you will see what can be done with JavaScript, and even more so - see how it is done.

JavaScript is not Java!

Many people believe that JavaScript is the same thing as Java, just because these languages ​​have similar names. At the very lesson it is not. I think that now it will become unnecessary to illustrate to you all the differences between these languages ​​- so just remember that JavaScript is not Java.
For more information on the subject, please refer to the introduction published on the Netscape website. Smile happy

Running javascript

What needs to be done to run scripts written in JavaScript? You will need a talented browser to work with JavaScript - for example, Netscape Navigator (starting from version 2.0) or Microsoft Internet Explorer (MSIE - starting from 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 become familiar with the basics of another language - HTML. In this case, you may find that many good means of dialogue can be created using only HTML commands. To learn more about HTML, 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> At a glance, the sample suggests a regular HTML file. The only innovation here is the system:
<script language="JavaScript"> document.write("А это JavaScript!") </script> This is true JavaScript code. To observe how this script works, write down this sample as a regular HTML file and also load it into a browser that has support for the JavaScript language.
And this is the result of the execution of this file (if you use a browser that has JavaScript support, then you will have 3 lines):

This is a regular HTML document.

Again the HTML act.

I have to admit that this script is not so useful in any way - the same could also be more simply written in pure HTML. I just wanted to show you the tag tag <script>. Everything between <script> tags also </ script> is interpreted as JavaScript code. Here you see a pattern of how to use the document.write () instruction, one of the most important commands used in JavaScript programming. The document.write () command is used, at what time you need to write something in the current act (in this case, this is our HTML document). So our small JavaScript program in the HTML document writes the phrase "And this is JavaScript!" .

Non-javascript browsers

And what will our page look like if the browser does not accept JavaScript? Browsers that do not have javascript support also do not know the <script> tag. They ignore it and also print all codes following it as plain text. In other words, the reader will see how the JavaScript code shown in our program will be written in plain text in the middle of the HTML document. Of course, this did not enter into our intentions. On this adventure there is a specialized tool to hide the source code of the script from the old versions of browsers - we will use for this comment tag from HTML - <! - -> . As a result, the new 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 print: Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. And without a 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’t completely hide the JavaScript source code. What we are doing here, owns the goal to prevent the printout of the script code on older browsers - but no less a reader can see this code through the menu item 'View document source'. There is no similar way to hide something from being viewed in your source code (and see how this or that trick is done).

Developments

Events and event handlers are a very important part of programming in JavaScript. Events, first of all, are initiated by any actions of the user. If he clicks on a button, the "Click" event occurs . If the mouse pointer crosses any hypertext link, the MouseOver event results . There are several different types of events.
We can make our JavaScript program respond to some of them. Additionally, this can be done using special event decoration programs. So, as a result of clicking on the button, a pop-up window can be created. This means that creating a window should be a response to the click event. The event handler program, which we must use in this case, is called onClick . Additionally, it tells the computer what to do if this event occurs. The code below represents an unsophisticated sample of the onClick event program : <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

This sample has several new features - consider them on schedule. You can observe here that we create a form with a button (how to act is an HTML problem, so we will not consider it here). The first new feature is onClick = "alert ('Yo')" in the <input> tag. As we have said, this property determines what happens at what time the button is pressed. Thus, if the Click event owns the premises, the computer is forced to make an alert ('Yo') call. This is also a sample JavaScript code (Note that in this case we don’t even use the <script> tag).
The alert () function allows you to create drop-down windows. When calling it, you must specify a string in brackets. In our case, this is 'Yo' . Additionally, as once it will be the text that appears in the drop-down box. Thus, at what time the reader at what time clicks on the button, our script creates a window containing the text 'Yo' .
One more feature of this sample can cause some confusion: in the document.write () command we used double quotes ("), only in alert () systems - only single quotes. Why? In most cases you can use both types of quotes. Nevertheless, we wrote the final sample onClick = "alert ('Yo')" - that is, we also used double quotes and single quotes. If we wrote onClick = "alert (" Yo ")" , the computer could not understand our script, since it is unclear to which of the system’s elements the relation between There are no onClick events for which only - therefore you are also forced in this case to interleave both types of quotes. Does not own the meaning in which order you used quotation marks - first double, only single, or vice versa. also onClick = 'alert ("Yo")' .

You can use many different types of event decoration functions in the script. Information about some of them we get in this description, but not about all. Therefore, please contact the relevant reference book if you want to know which event handlers still exist.

So, if you use the Netscape Navigator browser, then the drop-down box contains the text that was passed to the JavaScript alert function. This restriction is imposed for security reasons. You can also create the same pop-up window using the prompt () method. Nevertheless, 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 certain password. And if the text fits in the pop-up window, then the reader is given to realize that this window was created by a web browser, but not by your operating system. Additionally, since this restriction is imposed for security reasons, you can’t take as well just to delete the message that appears.

Functions

In most of our JavaScript programs, we will use functions. Therefore, now I need to tell about this important element of the language.
In most cases, functions are only a means to link together several commands. Let's write a sample script that prints some text three times in a row. For the source, consider the 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 necessary result, a certain amount of its code was repeated three times. Is it really effective? No, we can solve the same problem even better. How about such a 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 consisting 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 brackets - {} - belong to the function myFunction () . This means that both the document.write () commands are now linked together can also be executed when the specified function is called. Additionally, indeed, our sample has three calls to this function - You can see that we wrote the string myFunction () three times after the definition of the function itself. That is how once also made three calls. In turn, this means that the contents of this function (the commands specified in braces) were executed three times.
Since this is quite a simple-minded example of using a function, you could have a problem, just why the actual functions themselves are so important in JavaScript. After reading this description, you will undoubtedly understand their benefits. It is the ability to transfer variables when calling a function gives our scripts true flexibility - what we are, we'll see later.

Functions can be similarly used in conjunction with event finishes. 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, pressing the button calls the function calculation () . As you can see, this function performs some calculations, using the variables x , y and result . We can define a variable using the var keyword. Variables can be used to store various values ​​- 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 to also place the result of the x + y arithmetic operation (i.e. 5 + 12) there. After that, the number 17 will be placed in the result variable. In this case, the alert (result) command does the same thing as alert (17) . In other words, we acquire a drop-down box in which the number 17 is written.