HTML and CSS Reference
In-Depth Information
Unlike the <img> element, <script> is not a void element and therefore you always have to specify both start
and end tags.
The following steps show how to modify example10-1 to use external JavaScript files instead of inline scripts:
1. Create a new file in your text editor.
2. Save this file in your javascript-examples folder as example10-2.js .
3. Move the code from your <script> element into the new JavaScript file. Don't include the <script>
element itself.
4. Save the example10-2.js file.
5. Now add a src attribute to the <script> element and set its value to example
10-2.js .
<script src="example10-2.js"></script>
6. Save this file as example10-2.html .
Load the HTML file in your browser; you should see that the Hello World! text is still displayed onscreen. Try
changing this text in the JavaScript file to make sure that everything is working properly.
To ensure that your web pages load fast, it's best to always put your <script> elements at the end of your HTML
file, just before the </body> tag.
Now that you know how to get your JavaScript code to run in your web pages, you are going to learn the basics of
JavaScript programming.
JavaScript Basics
This section covers the basics of the JavaScript programming language. I explain how to create programs using vari-
ables, functions, event listeners, control structures, and loops. These are key programing concepts that will give you
the knowledge you need to start using JavaScript with HTML5. As I mentioned before, this is not a comprehensive
examination of JavaScript, but it will give you the skills you need to complete the rest of the exercises in this topic
and build small JavaScript programs of your own.
A Simple Program
You've already encountered the standard Hello World! program, so let's skip ahead to something a little more inter-
active. The following program asks users for their names and then displays the input on the screen:
1. Create a new file in your text editor called example10-3.js .
Search WWH ::




Custom Search