All of the JavaScript (examples) shram.kiev.ua

Special topic

War Ukraine Russia

For the site ... All about JavaScript (examples) ...

Part 1: First Steps

What is JavaScript

JavaScript - newly voices to compile scripts, developed by Netscape. using JavaScript you can easily create interactive Web-page. In this guide, you will see what can be done with the help of the JavaScript, and even more - see how it's done.

JavaScript - is not Java!

Many people believe that JavaScript - it's the same thing as well as the Java, but only because these languages have similar names. In fact, the occupation is not. I think that now would be superfluous to illustrate you all the differences between the two languages - so remember only just what the JavaScript - it's not Java.
For more information on the affected subject, please refer to the introduction of a posting on the Netscape site Smile happy

Run JavaScript

What you need to do to run scripts written in JavaScript? You will need a browser to work with the talented JavaScript - such as Netscape Navigator (since version 2.0) or Microsoft Internet Explorer (MSIE - since version 3.0). Since both of these browsers are widely spread, many people were able to work with scripts written in JavaScript. Undoubtedly, this is a significant argument in benefit of JavaScript election, as a means of improving your Web-pages.
Of course, before reading this guide you should learn the basics of a language - HTML. In this case, you may find that many good means of dialogue can be created using only the HTML commands only. For more information about the HTML language, it is best to initiate a keyword search for 'html' in the search engine Yahoo.

Placing on JavaScript HTML-page

JavaScript script code razmeschetsya directly on the HTML-page. To see how this is done, let's follow the simple-minded example:
<html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> > document.write ( " <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> <br> <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 of the sample suggests a normal HTML file. The only novelty here - the system:
<script language="JavaScript"> document.write("А это JavaScript!") </script> document.write ( " <script language="JavaScript"> document.write("А это JavaScript!") </script> This JavaScript code is true. To observe how this script works, write this pattern as a normal HTML file and upload it to the browser, which has the support of the JavaScript language.
And this is the result of this file (if you are using a browser that has JavaScript support, then you will be 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 as more than just one would leave a "pure" language HTML. I just wanted to show you just tag tag <script>. All that stands between the tags <script> and </ script>, is interpreted as a code in JavaScript. Here you see a sample of similar instructions using document.write () - one of the most important commands used in the JavaScript programming language. 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 little JavaScript-program in HTML-document, scribbling the words "This JavaScript!" .

Browsers without JavaScript support

And how will our page look like if the browser does not accept JavaScript? Browsers, does not have JavaScript support, "do not know" as the tag <script>. They ignore it and print all the codes as plain text standing behind him. In other words, the reader will see how JavaScript code in our program will be entered in plain text directly in the middle of HTML-document. Of course, it does not come into our plan. This adventure has a specialized tool to hide the source code of the script from older browsers - we will use for this comment tag from HTML - <-! ->. As a result, the newly variation of our source code will look like: <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript">  </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript">  </script><br>Опять акт HTML. </body></html> > <-! hide from old browsers document.write ( " <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript">  </script><br>Опять акт HTML. </body></html> / script> <br> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript">  </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript">  </script><br>Опять акт HTML. </body></html> In this case, the browser without JavaScript support will print: Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. Without the HTML-comment tag browser without JavaScript support be published: Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Please note that you just can not completely hide the JavaScript source code. What we are doing here, it has to prevent the listing of script code in old browsers - but it does at least the reader can see this code by means of the item 'View document source' menu. There is no similar way to hide anything from viewing your source code (and see how he made any other trick).

Developments

Events and event handlers are very important part of the programming in JavaScript. Events, the first way, initiated by the user or other actions. If he clicks on a button, stems event "Click". If the mouse pointer crosses any hypertext link - stems MouseOver event. There are several different types of events.
We can make our JavaScript-program the response to some of them. Additionally, this can be done by special program event finishes. For example, a popup window can be created as a result of clicking on the button. This means that the creation of the window should be a reaction to an event lye - Click. Program - an event handler, which we should use in this case, is called onClick. Additionally, it tells the computer what to do if this event occurs. The following code sample is ingenuous finishing program events the onClick: <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

This model has several new features - look at their routine. You can then observe that we are creating a form with a button (as act - the problem of HTML, so consider this in any way then we will not). The first new feature - onClick = "alert ( 'Yo ')" in the tag <input>. As we have said, this property determines what happens at what time the button is pressed. Thus, if the room has event Click, the computer is forced to make a call alert ( 'Yo'). It also has sample code in JavaScript (Note that in this case we did not even use the <script> tag).
Alert () function allows you to create a drop-down box. When you call it you must set some brackets line. In this case 'Yo'. In addition, it will be like once the text that will appear in the drop-down box. So, what time what time the reader clicks on the button, the script creates a window containing the text 'Yo'.
Some confusion may cause another feature of the sample: the team the document.write (), we use double quotes ( "), only to alert the system () - only single Why In most cases, you can use both types of quotes Yet in.?. Finishing sample we wrote onClick = "alert ( 'Yo' )" - that is, we have used as a double, and single quotation marks If we wrote onClick = "alert (" Yo " )", the computer is not able to understand this. script, as is clear to which element of the system has a ratio of the function finishes onClick event, just that - there is no reason, you are also obliged in this case to alternate both types of quotation marks not owned matter what routine you used quotes -.. first double, only then single or vice versa. That is, you can just write as onClick = 'alert ( "Yo" )'.

You can use the script in many different types of events finishing functions. For information about some of them we get in this description, but not on all. Therefore, please refer to the appropriate directory, if you want to know what event handlers are still there.

So, if you are using Netscape Navigator browser, the popup window contains text that was passed to the function JavaScript alert. Such a restriction is imposed for security reasons. The same can also create using the prompt () method drop-down box. Yet in this case, the box will reproduce the text entered by the reader. And because the script written by an attacker can take the form of a system message and ask the reader to enter a password. And if the text fits in the drop-down window, thus the reader is given to understand that the window was created by web-browser, but not by your operating system. Additionally, since this restriction is imposed for reasons of safety, you just can not take as just delete the message that appears.

functions

Most of our programs in the language we use JavaScript functions. Therefore, even now I need to talk about this important element of language.
In most cases, the functions are only a means to link together multiple commands. Let us, to sample, write a script which outputs a certain text three times in succession. To examine the source unsophisticated approach: <html><script language="JavaScript"></script></html> <html><script language="JavaScript"></script></html> <html><script language="JavaScript"></script></html> / html> And this script will write the following text Доброе дело пожаловать на мою страницу! Это JavaScript! Доброе дело пожаловать на мою страницу! Это JavaScript! three times. If you look at the source code of the script, it can be seen that to obtain the desired result a certain percentage of its code was repeated three times. Is it effective? No, we can solve the same problem even better. How about this script to solve the same problem ?: <html><script language="JavaScript"></script></html> <html><script language="JavaScript"></script></html> <html><script language="JavaScript"></script></html> / html> In this script, we define some function, consisting of the following strings: 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 within the curly braces - {} - belong to the myFunction () function. This means that both teams document.write () now also linked together can be executed when calling this function. In addition, indeed, our sample have three calls this function - You can see that we write myFunction () line three times again after being given a definition of the function itself. That estkak once also made three calls. In turn, this means that the contents of the functions (commands in curly brackets) were performed in triplicate.
Since it is quite unsophisticated use sample function, then you could be a problem, but why exactly these functions are so important in JavaScript. After reading this description you will surely also understand their favor. The possibility of transmission of the variables in a function call gives our scripts genuine flexibility - what it is, we will see later.

Similar functions may be used in conjunction with procedures event finishes. Consider the subsequent example: <html><head><script language="JavaScript"></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> </ head> <body> <form> <input type = "button" value = "Calculate" onClick = "calculation ()"> </ form> </ body> </ <html><head><script language="JavaScript"></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> Here you CAN test the this example:

Here, when clicking on the button calls the calculation () function. As you can see, this function performs some calculations, using the variables x, y and result. The variable we can determine using the keyword var. Variables can be used to store different values - numbers, strings of text and etc. So the line script var result = x + y; It tells the browser that you must create a variable result also put to the result of the arithmetic operation x + y (ie 5 + 12). After that, the number 17 will be placed in the variable result. In this case, alert command (result) does the same thing as well as alert (17). In other words, we get a popup window, in which the number 17 is written.

Liked? Subscribe to RSS news!
You can also support shram.kiev.ua, click:

Do not be amiss to your friends and find out this information, share with them the article!

Comments

Commenting, keep in mind that the content and the tone of your messages can hurt the feelings of real people, show respect and tolerance to his interlocutors, even if you do not share their opinion, your behavior in terms of freedom of speech and anonymity offered by the Internet, is changing not only virtual, but real world. All comments are hidden from the index, spam control.

Free Credit Card with a limit of 15,000 USD.