If the Bible were written for the Internet, it would begin like this: First, there was mail. And the engineers saw that it was good. And they created the WWW with hyperlinks. And the engineers saw that this is also good. And then they created the JavaScript language to revitalize the pages.
This is exactly what happened in reality. JavaScript was invented to bring HTML to life. JavaScript scripts are written directly to HTML text or stored in separate files, just like CSS styles. They are executed immediately after the page is loaded into the browser.
Even the language itself was called LiveScript at first. Then it was renamed to JavaScript because they planned to somehow link it with the Java general-purpose language. But now they have almost nothing in common, and JavaScript is a completely independent programming language with its own clear ECMAScript specification.
Technically, JavaScript is a trademark of Oracle, and this language is an “extension” of ECMAScript, along with Microsoft’s JScript and ActionScript, but this is more of a trademark owner’s annoyance. The main thing is that free ECMAScript does not belong to anyone.
Over time, the scope of JavaScript has expanded significantly. It began to be used not only for scripts on the HTML page but also for serious large web applications and entire programs that run in the browser. There are tools to “package” these programs in a special way and run them separately from the browser.
JavaScript applications run in any environment that has an appropriate interpreter.
How to make JavaScript? Writing an elementary script is no more difficult than a simple HTML page because JavaScript scripts are written in plain text, that is, they can be created literally in the same Notepad, then saved in separate files, or inserted into the body of an HTML document. The simplest things in JavaScript are really easy to do.
How to write JavaScript
For example, let’s make a simple script to be executed by the Windows Script Server. This script can be written directly in Notepad and executed without a browser.
WScript.echo ("Привет, Skillbox!")
We write this text in Notepad, then save the file under the name skillbox.js and run it in Windows Explorer.
A similar script can be written directly in the HTML page code between the <script> and </script> tags. You can already use normal JavaScript methods there, rather than the echo method of a specific WScript object. Let’s look at some of the standard methods for input and output in a browser.
Alert()
The alert() method displays a window with an OK button. A message is displayed in the window, which is indicated in brackets. For example, “Hey Skillbox!”. That is, in this case, the browser does exactly the same thing that the Windows Script Server did before.
These examples can also be written in Notepad, but saved in files with the extension HTML. For example skillbox.htm.
<html>
<script>
alert("Привет, Skillbox")
</script>
</html>
As an argument to alert(), you can specify not only a specific text but also the result of any calculations or processing of other data. For example, alert(x), where x is calculated separately.
Confirm()
The confirm() method displays the same message box but with two buttons – “OK” and “Cancel”. Depending on which button the user clicks, the method returns either true or false. The server receives this return value from the user and performs some action based on the response.
The syntax is the same, only a choice is logically assumed here, so the user is asked a question.
<html>
<script>
confirm("Привет, Skillbox?")
</script>
</html>
Prompt()
The prompt() method displays a dialog box with a message and a text field where the user enters data. There are also two buttons “OK” and “Cancel”. On pressing the first button, the method returns the entered text to the server, and on pressing the second button, it returns the boolean value false.
The syntax here is:
prompt(message,meaning_fields_input_data)
The input field value is optional. There you can enter the text that was originally entered in the field for the convenience of the user.
Code:
<html>
<script>
prompt("Say hello Skillbox", "Hello")
</script>
</html>
The possibilities of modern JavaScript go far beyond the primitive input/output of data through forms. We have given these methods only as the simplest examples. In addition, JavaScript allows you to respond to user actions. For example, on mouse movements or pressing certain keys. JavaScript is often used to provide asynchronous operation ( AJAX technology ) where information on a page is updated without reloading the page. In this mode, data is sent to the server and downloaded from there interactively. Also, JavaScript is capable of manipulating HTML elements on the page (create and hide tags, etc.) and doing much more.
Useful Tools
Developer Console
All popular browsers have a dedicated developer console. It shows the script code on the page and also displays other useful information. In Chrome, Firefox, and IE, the developer console is opened by pressing the hotkey F12, and in Safari – Ctrl+Shift+I or Ctrl+Alt+C. In the screenshot, the scripts are displayed at the top right, along with other elements of the web page.
Code Editors
In the future, for convenient programming, you will need to install a code editor or IDE (Integrated Development Environment), an integrated development environment. An IDE is an editor with extended functionality that is integrated with other useful tools, supports connecting additional modules, and so on.
For starters, we can recommend one of the light editors:
- Sublime Text ;
- Atom ;
- Sci Te ;
- Notepad++ .
In the future, it makes sense to take a closer look at the IDE :
- IntelliJ WebStorm ;
- Visual studio.