Javascript

JavaScript Embed

In this lesson you are going to learn:


If your alert box is not popping up, then check that you've typed the JavaScript command exactly as it is in the sample code.

Make sure your <script>...</script> tags are there, that the text between the brackets is surrounded by quotes (' '), and that there is a semicolon ( ; ) at the end of the statement. Then try again.

Try out: JavaScript in a separate file

Create a new document in your text editor and save it as "helloworld.js". Important: the file extension has to be .js (this is the appropriate JavaScript file extension).

In the new document, paste in the JavaScript command from the previous example (no need to type the <script> ... </script> tags here):

	
	  alert('Hello World!');
	

Now, go back to the HTML page, delete the previous JavaScript code, and add the <script> ... </script> tags in the <head> section of the page with a reference to the helloworld.js JavaScript file, like so:

	  <!DOCTYPE html>
	  <html>
	  <head>
	  <title>My first JavaScript page</title>
	  <script type="text/javascript" src="helloworld.js"></script>
	  </head>
	  <body>
        
	  </body>
	  </html>
	

Save all your documents and run the HTML page in the browser. You should view the same alert box popping up as in the previous example.

If the code doesn't work, in your HTML document check that the filepath to the JavaScript file is correct, the filename spelling is accurate, and double-check that you've added a closing </script> tag. In helloworld.js make sure your JavaScript command is typed exactly the same as in the sample code above, then try again.

Summary

You've actually learned a lot in this lesson. You know how and where to include JavaScript in your web page, how to comment your JavaScript code and why this is a good idea, and finally you've just seen your web page come alive with your first JavaScript script.

Admittedly, an alert box saying "Hello World!" looks a bit dumb, but even alerts can be useful to quickly and easily test that JavaScript is enabled in your browser and your code is working.

 

Please login to get access to the quiz
JavaScript Syntax (Prev Lesson)
(Next Lesson) Javascript Events
Back to Javascript

No Comments

Post a Reply