HTML and CSS Reference
In-Depth Information
<meta charset="utf-8">
<title>Inline Scripts</title>
window.onload = function() {
document.write('Hello World!');
5. Save the file.
Now view this file in your web browser. You should see that Hello World! is displayed on the page. Let's dis-
sect this code a little.
JavaScript code will be executed only when you tell the browser to execute it. In this case, you want the code to run
as soon as the page has loaded, so you need to tell that to the browser. The first line of your code does this.
JavaScript uses objects to keep track of things like the browser window, document, and HTML elements. When a
page finishes loading, the window object triggers an event called onload . To execute code when the page loads,
you need to attach this code to the onload event. In the code in the preceding Step 4, you do this by assigning a
new function to the window.onload event using the = (equals sign) operator. All the code that you place within
this function will now be executed when the onload event triggers:
window.onload = function() {
document.write('Hello World!');
To ensure that things are working correctly, you included a line of code that will write the text Hello World!
onto the screen. To do this, you grabbed the document object and used its built-in write function. The text that
you want to be displayed is placed within the parentheses of the write function. You learn more about JavaScript
functions later in this chapter.
That's it for inline scripts—pretty straightforward. As you can see, if you had a lot of HTML and JavaScript code in
one page, it could be a bit of a pain to maintain, not to mention the fact that if you want to use this code on more than
one page you would have to copy and paste it into each page. Then if you wanted to make a change, you would have
to make the update in numerous different files. Things can get messy very quickly. This is why it is often better to
put your JavaScript code into an external file.
Linking External JavaScript Files
Dedicated JavaScript files should use the .js file extension. Make sure that your text editor has syntax highlighting
for JavaScript, because this can help to catch any errors (or bugs ) in your code.
As with external stylesheets, you need to link JavaScript files to your HTML files. You do this using the <script>
You can use the src attribute on the <script> element to specify an absolute or relative path to your JavaScript
file, in the same way that you do for images.
Search WWH ::

Custom Search