There are two ways of dealing with this problem: a) to translate the code before the program is run and save it in this state, or b), to translate the code every time the program is run. Programming languages are often classified according to these two procedures. The former class is called compiled, the latter interpreted languages.
Compiled languages use a compiler to create machine code from programming language code. A compiler is nothing but another program--written in some programming language--that takes the code written in one language, checks it for correctness, and translates it into machine code, ready for the computer to run. Programming languages like C, C++, Fortran, or Pascal are compiled languages.
Interpreted languages do the translation process when the program is run. They also have a program like a compiler, but it does not produce machine code. It checks the code for correctness and "interprets" for the processor, who runs it. Hence, this program is called an interpreter. Languages like JavaScript, Perl, or Python are interpreted languages.
There are different advantages to both classes. Compiled languages produce much faster programs since they are compiled only once. However, they only run on computer platforms for which they have been compiled. The programs are not portable. Scripting languages produce slower programs since the code must be compiled every time the program is run. Therefore, they are typically used for smaller tasks. Scripting languages are more portable, however. Popular scripting languages typically have ports for all major computer platform. Programs written in Perl or Python, for example, can be run on Windows, Macs, or Unix without any or only a few changes to the code.
We have talked about HTML entities in terms of objects: a tag may comprise content or other tags; it may also have attributes that determine its color or size. We have also seen that the structural organization of objects in HTML is hierarchical: <html> contains <head> and <body>; <body> may contain <div> , <h1> , <p> , etc. This hierarchy governs inheritance and thus the value of child attributes.
Objects in programming languages work similarly. They are abstract data types that may also contain other data structures, even objects, and have attributes. However, programming objects also do certain things and can be asked to perform actions. Object-oriented languages refer to such actions as methods. JavaScript is organized around a hierarchy of objects that represent the browser. The highest one (corresponding to <html> in HTML) is the Window object, which contains the document object, which contains the forms, images, etc. For now, it is important to realize is that in order to program the behavior of the browser, we need to understand how it is organized and follow the object hierarchy in order to get the desired results.
JavaScript programs are embedded in HTML files (literally or through an import instruction). Just like HTML and CSS, they are simple plain text files. JavaScript enabled browsers, like Netscape or IE, include a JavaScript interpreter. Hence, JavaScripts run within your browser. They are loaded with your HTML page and then executed by the built-in interpreter.
The JavaScript syntax is similar to other programming languages. If you had experience with languages like C, Java, or Python, for example, many things will be familiar. The syntax is unlike Perl's, but it is not any more difficult.
This being said, there are a few circumstances in the programming environment that may make JavaScript difficult to understand at times.
There are compatibility issues, and not all browsers support all features, or implement them consistently.
JavaScript has been adopted as a standard by the European Computer Manufacturers Association (ECMA). Standards-compliant JavaScript is also known as EcmaScript.
Scripts can be embedded in HTML pages within the <script> ... </script> tag. This tag may appear within the <head> and the <body> tags. There also may be any number of <script> tags within the HTML page. Scripts will be executed in the order in which they appear in the page.
The script tag should include the language attribute that tells the browser which scripting language is used. In our case it is "JavaScript".
<script language="JavaScript"> [ code ] </script>
You can also specify a specific version if you include or exclude certain features of the language, like "JavaScript1.0" or "JavaScript1.1".
JavaScript has a different syntax than HTML, and within the <script> tag, JavaScript syntax is used. You should hide this syntax from browser that do not include a JavaScript interpreter, just as with CCS style sheets.
<script language="JavaScript"> <!-- hide script from old browser [ code ] // --> </script>
Note the "//" before the closing braces "-->" of the comment. This is a JavaScript convention for one-line comments. If it were not included, the JavaScript interpreter would read the "-->" and register an error.
External scripts are loaded and executed just as embedded scripts. If an external file is used, the <script> tag must include a source attribute and the URL or path where the file is located.
<script language="JavaScript" src="../scripts/myScript.js />
By convention, JavaScripts are given a ".js" extension.
JavaScript code enclosed in the <script> tag is executed once when the HTML page is loaded into the browser. These are static scripts that the user cannot interact with. Since HTML4, the HTML standard includes event handler extensions that make it possible to activate scripts when certain events occur, like clicking a button, moving the mouse pointer over a link or image, submitting a form, etc. The names of event handlers are descriptive of the event by which they are triggered: onClick, onMouseOver, onMouseOut, onSubmit, etc.
Event handlers can execute scripts even after the page has been loaded. The following example would set the background color of the web page to purple when a button is clicked.
<input type="button" name="button1" value="Click me" onClick="document.bgColor='FF00FF'" />
Take a look which event handlers input supports. (Note: event handlers are common attributes).
Since HTML is case-insensitive, event handlers event handlers can be spelled in any combination of upper and lower case letters. In case-sensitive XHTML, event handlers are spelled entirely in lower case letters. JavaScript is case-sensitive, too.
Another way to activate a JavaScript is by replacing a URL with a pseudo-protocol specifier, javascript: , followed by the Javascript code. The browser then loads the code instead of the URL and executes the script. A javascript: URL can be used anywhere where a regular URL is used, as in an <a> or <form> tag.
The following example triggers an alert when the "link" is clicked:
<a href="javascript:alert('You clicked on a link to nowhere.')" >A link.</a>
The next example is an image rollover triggered by a <form> action:
<form action="javascript:;" name="formX">
<table><tr>
<td
onMouseOver="document.images['imgageRollover4'].src='../images/bars/red_1px.jpg'"
onMouseOut="document.images['imgageRollover4'].src='../images/bars/blue_2px.jpg'">
<img name="imgageRollover4" src='../images/bars/blue_2px.jpg' height="50" width="50" border='0'>
</td>
</tr></table>
</form>
If the JavaScript code contains more than one statement, they must be separated by a semicolon. Semicolons always mark the end of a JavaScript statement. Note: Netscape browsers also like to see one after the pseudo-protocol specifier as well, like action="javascript:;".