Javascript Lessons (textbook, self-study guide)
JavaScript is one of the most popular programming languages in the world. While it may be losing some of its dominance over time, many developers still prioritize learning it.
You will need JavaScript to later study jQuery, which is itself a JavaScript framework. So before diving into jQuery, it's important to understand the basics of JavaScript.
JavaScript code is embedded directly into an HTML page using the <script></script> tags:
<html> <head> <title></title> </head> <body> <script type="text/javascript"> </script> </body> </html>
Save this code in a file named index.html and open it in your browser. Now we’ll edit the JavaScript code directly in index.html.
Let’s start with displaying simple messages using JavaScript:
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
alert('JavaScript Tutorial from drupalbook.org');
</script>
</body>
</html>
The alert() function displays a pop-up message. This is handy when you want to quickly display the value of a JavaScript variable or show an error message.
You can also display text directly on the page using document.write():
...
<script type="text/javascript">
document.write('JavaScript Tutorial from drupalbook.org');
</script>
...
Save the file and refresh the browser page to see the changes applied.
We can also move JavaScript code into a separate file:
<html> <head> <title></title> </head> <body> <script type="text/javascript" src='script.js'> </script> </body> </html>
This way, the JavaScript code will be loaded from the script.js file. Put the function alert('JavaScript Tutorial from drupalbook.org') inside that file to test if it was successfully connected.
Separating the JavaScript into its own file is more convenient and helps keep your HTML clean and organized.
This article serves as an introduction to JavaScript. In upcoming articles, we will explore the full capabilities of the JavaScript language.