Free Code Tutorials & Open Source Code
|
|
The Basics Tutorials > JavaScript > The Basics
JavaScript can either be written directly into an HTML page, or written in a separate file and linked to from within the page.
Adding JavaScript to an HTML Page
This example shows how to add a piece of JavaScript within a page using the <script> tag:
<html>
<body>
<script type="text/javascript">
document.write("Hello world wide web!");
</script>
</body>
</html>
The above produces a simple page with the text:
Hello world wide web!
Using an External JavaScript File
Writing JavaScript code in the HTML page itself is often fine for small projects - and unavoidable for certain tasks - but with large blocks of code, it can slow down the loading of the page, and can be hard to understand and maintain. Thankfully, most JavaScript code can be removed from the HTML page entirely:
<html>
<body>
<script type="text/javascript" src="demo.js" />
</body>
</html>
Here, we import code from a separate file, demo.js, which contains the JavaScript alone. Note that the usual extension for JavaScript code files is .js, although in practice any extension could be used.
Where Can Scripts Be Placed?
<script> tags can be placed within the <head> section of a page, if there is one, or anywhere in the <body> section. There can be any number of <script> tags in a document. Code will be executed as soon as it is encountered by the browser when the page is loading.
JavaScript Code
A block of JS code consists of a series of statements. In the example above, we saw the statement document.write("Hello world wide web!");, which adds a piece of text to the (otherwise blank) page. JavaScript is case-sensitive, hence document.Write and document.write are not the same - in fact, the former would produce an error and do nothing, as Write is not defined in the language. Executable statements usually end with a semicolon - unlike most other languages, in JavaScript this is technically optional, but it is good programming practice.
Comments
Comments are lines or blocks of text which are ignored by the browser, and are usually used for making human-readable notes in your code. They can also be used to temporarily disable certain parts of the code. You're probably already used to the <!-- ... --> format for comments in HTML. In JavaScript, there are two types of comments, single-line and multi-line:
//This is a single-line comment. It starts with '//' and continues to the end of the line.
/* This is a multi-line comment.
Starting with '/*', a multi-line comment continues line after line
until the characters */
This text is now outside a comment block, so would produce an error.
//document.write("Hello world wide web!");
/* Although the line above is valid JavaScript, it has been made into a comment using the '//'
syntax so would not be executed. */
Page Responses
Currently there have been no responses to this page...
If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.
|
Copyright ©2009, Wired IDS Ltd. | Licensed under Creative Commons Attribution Share-Alike | Load time: 0.311 seconds