1. Adding JavaScript in an HTML page

To insert JavaScript into an existing HTML document, it is necessary to introduce the label <script> </script>. This tag requires the "type" attribute, or the attribute "language" (the latter is depreciated in XHTML) that will specify to the browser the language used to interpret the included code.
Inside the label <script> ... </script> we write our JS code.

To write and execute JavaScript programs we need a simple text editor (such as Windows Notepad or emacs Unix) and a browser (Mozilla Firefox, Internet Explorer).
- The "language" attribute (which is not used in XHTML, but only in standard HTML Web pages) - will have the following syntax:
                language = "JavaScript"
- the browser specifies which language is used.
- The "type" attribute - replacement of "language" - will have the following syntax:
                type = "text/javascript"
- this tells the browser that the script is written in plaintext format with JavaScript code.
We can also place the JS instructions in a separate JavaScript file, external, that will have the ".js" extension. To edit this file is needed only a simple text editor, like Notepad. The advantage of an external file is that we can use the same code in multiple HTML pages in case of a # necessary change in the JavaScript code, we just need to modify the data in a single file (the one with the extension. "js"), the disadvantage of this method is that in an ".js" external file we can't use HTML tags, but JavaScript instructions.
If the JavaScript code is in an external file, the label <script> from HTML page should contain the "src" attribute, whose value determines the location of the external ".js" file.
In the external file, the one with ".jx" extension, we should not write the "<script>" tag.
Here is a sample JavaScript script written within a web page (XHTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Cod JavaScript</title>
    <script type="text/javascript">
        document.write("The text will be displayed");
<title>Cod JavaScript</title>

<script type="text/javascript">
  document.write("The text will be displayed");
- The document.write instruction is used to print something on the page.
- The displayed result of this script (XHTML and HTML) will be:
The text will be displayed

&bull If you want to load the script from an external file (eg, "code.js "), our code in the HTML document will look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Cod JavaScript</title>
    <script src="cod.js" type="text/javascript">     </script>
- The "code.js" contains:

2. Hiding code in old browsers

Some browsers do not recognize the scripts and displays them on the web page as text. To avoid this we can use the HTML tag for comments <!-- ... --> delimiting with this the JavaScript instructions, thus it avoids the appearance of script in web page:
This is done as you can see in the following example:
<script type="text/javascript"><!--
        Codul scriptului

3. Syntax conventions

In any language, the code has conventions and rules of syntax.
Now it's presented the JavaScript syntax rules:

  1. Case-sensitive - It makes distinction between large and small letters, such words as "examples, Examples" will be treated differently.
  2. Semicolon (;) - All line statements must end with a semicolon character (;) (Example" var1 = 3; var2 = 8;).
  3. Blank spaces - JavaScript ignores blank spaces, tabs and blank lines that appear in the instructions, they are useful for making code more structured and easy to read. Admit only the spaces that appear in strings. (Example: var1 = 2; is the same as var1 = 2;).
  4. Quotes - The single quotes ('') and double quotes (" ") are used to delimit strings. (Example: 'I learn JavaScript' or "I learn JavaScript").
  5. Special Characters - When we write scripts, sometimes we need to use a special character in values or in data output, or a key press such as the TAB key, or a new line. In that case we must use the backslash character "\" in front of one of the Escape codes:
    • \b - backspace
      \f - new page
      \n - new line
      \r - indicate a carriage return
      \t - indicate a pressing TAB key
      \\ - a backslash character
      \' - indicate an apostrophe (single quotes)
      \" - double quotes

    • - For example, if you want to display a text using document.write(), and that text should include quotes and backslash character "\", like ("JavaScript" Course \ www.MarPlo.net), to not confuse the script in code interpretation, becouse the quotes and backslash are part of the syntax, we add \ in front of these characters within the string. The command for display the string will be: document.write ("\" JavaScript \" Course \\ www.MarPlo.net");
  6. Comments - The comments within the code are necessary when we want to specify the role and functions of certain variables or instructions, for easy understanding of the script later.
    To add a comment on a single line, inside the code, use double slash //. All characters to the right of the double slash represent a comment.
            Example:   // Comment on a single line
    If you want to write comments on multiple lines, use /* at the beginning of the comment, and */ at its end
    /* comment on ...
    multiple lineas
    ... */
  7. The name of the variables and functions - The name given to variables and functions must follow the following rules:
    • - The first character must be a letter, an underscore (_) or $ sign.
      - The first character can not be a number.
      - the name should not contain blank space.
      - Do not use reserved words that are part of the JavaScript language (such as "array", "status", "alert"), because the interpreter program will not make the difference between these names and JavaScript commands with the same name.

Daily Test with Code Example

Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
JavaScript Syntax

Last accessed pages

  1. innerHTML and outerHTML to Get and Replace HTML content (13089)
  2. Zuma Deluxe (37882)
  3. CSS3 Flexbox Container (40)
  4. Qwop (40212)
  5. Bike Mania2 (984)

Popular pages this month

  1. Qwop (7387)
  2. Drag Racer V3 (5115)
  3. Bubbles3 (2030)
  4. List with All the Games (1718)
  5. Flash Games - Free online Games (1605)