Richland College Multimedia Learning Center

JavaScript, jQuery, and React
Home e-Handouts and Assignments Syllabus Resources Student Sites Other Classes RLC Multimedia
What Javascript Is Used For   About the JavaScript Language   About Logic and Debugging   Where to Put JavaScript Code   The <script> Tag
<noscript> Tag   Creating an HTML Document with JavaScript In It   Source/Include Files   Comments   Hiding from Old Browsers   Handy Hints
Updated 9/9/2020 at 9:00pm

JavaScript Introduction

References

What Javascript Is Used For

Javascript:

Javascript:

Here are some samples of what Javascript can allow you to do with your Web pages. You will build some of these pages as you do the assignments over the next few weeks:

Some alternatives to Javascript are:

But JavaScript has some limitations. JavaScript:

About the JavaScript Language

JavaScript is a scripting language, which means that the JavaScript code is run by an interpreter that is built into the Web browser. An interpreter:

The JavaScript that you will be learning in this course is client-side code. Client-side means that the code runs in the Web browser, on the user's computer.

A server-side version of JavaScript is available, but it is proprietary and vendor-specific, and is slightly different from the client-side code that you will learn. Server-side means that the code runs on the Web server and can access files and databases, and perform other server-side tasks.

JavaScript, just like any other programming language, has its own syntax. "Syntax" means that you must type in your JavaScript instructions just right, according to the rules that the browser's JavaScript processor understands. We will see many more of JavaScript's syntax rules as we go through this semester, but for now here are some of the most important syntax rules:

About Logic and Debugging

All programming languages, including JavaScript, have their own syntax, which specifies the rules of the language. You must follow the syntax of the language as you write the code, or the JavaScript interpreter will not understand what you want it to do.

You must also understand and use programming logic, which means that you must give the proper instructions to run the intended code in the order (sequence) and under the right conditions to accomplish the task that you want the program to do.

Any error in syntax or logic is called a bug.   Debugging is the process (and art) of figuring out why the errors are occurring.

One of the handiest ways to debug what is happening in your JavaScript code is a combination of a feature in your browser and a built-in JavaScript method that you can call.

The browser feature that helps in your debugging is called the Developer's Toolkit (or some similar name, depending on which browser you are using). You open the Developer's Toolkit in most browsers by pressing the F12 key at the top of your keyboard.

The built-in method that is very handy for debugging is console.log(). The sample code in the section "Creating an HTML Document with JavaScript In It" in this e-Handout has an example of console.log() in it. Open this sample page by clicking on this link. Press F12. Make sure the "Console" tab in the Developer's Toolkit is selected. Look in the console section for some text that says "We made it to the end of the page!". (You will need to click the OK button in the popup window before this text shows up in the console.)

About Placing JavaScript in the <head> or <body> Sections of HTML Documents

A Web browser renders (displays) the HTML tags and content in the order in which it appears in the HTML document file. Any JavaScript code that is in the document also runs in the order in which it is encountered.

You can place your JavaScript code anywhere in your HTML document. Most people put their JavaScript code in the <head> section of the document. But there are times when you must put the JavaScript code in the <body> section, especially if you are using JavaScript to change the text in the document.

The choice (except when you are changing the text and must put the JavaScript code in the <body>) is pretty much yours. But other JavaScript programmers will look for your code in the <head> section, so that's normally the best place to put it.

About the <script> Tag

JavaScript programs run within an HTML document. You need to use a <script>...</script> tag pair to enclose your JavaScript code in the HTML document (unless the code is an event-handler attribute inside an HTML tag -- more on that later in the course).

The <script> tag tells the browser that a scripting engine will be needed to interpret the following code. You tell the browser to specifically use a JavaScript scripting engine with the type attribute of the <script> tag, unless your page is an HTML5 page. HTML5 <script> tags do NOT require the type attribute.

Your JavaScript <script> tag will look something like this in an HTML5 page: 

  <script>
    /* JavaScript statements go here. */
  </script>

And your JavaScript <script> tag will look something like this in an XHTML or HTML 4 page: 

  <script type="text/javascript">
    /* JavaScript statements go here. */
  </script>

Most Web browsers will default to the JavaScript scripting engine when you omit the type attribute.

The <noscript> Tag

It is possible that the user of your page is using a browser that does not support the <script> tag. It is also possible for the user to turn off Javascript processing in their browser even if the browser supports scripting.

You have a choice regarding what to do about either of these situations:

  1. Ignore it and frustrate the user; or
  2. Ask the user to upgrade their browser or to turn on Javascript processing.

In the hopes that you will choose the more reasonable and helpful of these two options, here is some code that you can put in your page to ask the user to turn on their browser's Javascript processing:

Simply put, you will use the <NOSCRIPT> element in your page. The noscript element's content is rendered (displayed) by the browser wherever it falls in the source code, but only if the user has turned off Javascript processing or if the browser does not support scripting.

Now, here is a code sample: 

<!DOCTYPE html>
<html>
<head>
  <title>Noscript Sample</title>
  <meta charset="UTF-8" />
  <style type="text/css">
    body { font-family:Arial, Helvetica, sans-serif; }
    .warning { color:red; }
  </style>
</head>

<body>
<script>
  /* <![CDATA[ */
  var today = new Date();
  var theTime = today.toString();
  document.write("The date and time is " + theTime + ".<br>");
  /* ]]> */
</script>
<noscript>
<div class="warning">
<p>
This document requires that you have JavaScript running in your browser.
</p>
<p>
If your browser supports JavaScript, you need to 
turn on scripting.  Or you need to upgrade your browser
to a version that includes
JavaScript.
</p>
<p>
Please follow these instructions to turn on scripting in your browser:
</p>
<p>
  <u>Microsoft Internet Explorer</u>
</p>
<ol>
	<li>In the main menu, click "Tools".</li>
	<li>Click "Internet Options...".</li>
	<li>On the Security tab, click "Custom Level...".</li>
	<li>In the Scripting section, click to enable "Active scripting".</li>
	<li>Click "OK".</li>
	<li>You will probably have to refresh the page.</li>
</ol>
<p>
  <u>Firefox</u>
</p>
<ol>
	<li>In the main menu, click "Tools".</li>
	<li>Click "Options...".</li>
	<li>In the Content tab, check the checkbox next to "Enable JavaScript".</li>
	<li>Click "OK"</li>
	<li>Click on the "Reload current page" button in the toolbar.</li>
</ol>
<p>
  <u>Google Chrome</u>
</p>
<ol>
	<li>Click the three vertical dots icon at the upper right of the screen.</li>
	<li>Click "Settings".</li>
	<li>In the "Privacy" section, click the "Site Settings" arrow.</li>
	<li>In the "Content" section, click the "JavaScript" arrow.</li>
	<li>Toggle/click "Allowed (recommended)" to OFF (it will say "Blocked").</li>
	<li>Reload the page.</li>
</ol>
</div>
</noscript>

</body>
</html>

You can see what the above code looks like in a browser.

How To Create an HTML Document with JavaScript Code In It

Use a text editor or an HTML editor. You can use Notepad, HomeSite, or DreamWeaver, for instance.

Type in the following code. Actually, it would be best to copy the HTML document template from the top of the "Resources" page in this class site, and add to it the JavaScript parts. 

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript Syntax</title>
  <script>
    /* <![CDATA[ */
    // say hello world!
    alert("Hello world from the <head> section!");
    // Javascript can go here, but no raw HTML!
    /* ]]> */
  </script>
  </head>
  
  <body>
  
  <h1>This is a JavaScript Sample.</h1>
  
  <script>
    /* <![CDATA[ */
    // Put an <h3></h3> tag into the page:
    document.write("<h3>Basic JavaScript Syntax</h3>");
    // Here is a great debugging method:
    console.log("We made it to the end of the page!");
    // Javascript can go here, but no raw HTML!
    /* ]]> */
  </script>
  
</body>
</html>

Save the document as file myFirstJavascript.html.

Open the file myFirstJavascript.html in your browser. It should look like this.

Please note these points about the above code:

How to Create a JavaScript Source/Include File

JavaScript is often coded directly into your HTML document. But you can also save JavaScript code in its own separate file and include it in your HTML document. If you choose to use JavaScript source files in this way, you should note these points:

Open your text or HTML editor and type in this code: 

<html>
<head>
	<title>Multiple JavaScript Calls</title>
</head>

<body>

<script src="javascriptsource.js"></script>

<script>
  document.write("This line was created with embedded JavaScript code.");
</script>

</body>
</html>

Save the document as file multipleJavascriptCalls.html

Start a new document in your text or HTML editor, and type this code: 

document.write("This line was printed from the JavaScript source file.<br />");

Save the document as file javascriptsource.js

Now open file multipleJavascriptCalls.html in your browser. It should look like this.

How to Add Comments to a JavaScript Program

Part of good programming etiquette is to put comments in your code that explain what your code is doing, or what you were thinking when you wrote the code, or whatever will help the next person who looks at your code (including yourself three weeks from now!) to understand it. Comments are non-displaying and non-executable lines of code.

JavaScript supports two kinds of comments: line comments and block comments.

Here is a sample of JavaScript comments: 

  <script>
    //Let's first do an alert message:
    alert("Hello, there!");
    /* Now let's do another alert message,
       but this time let's make it longer:
    */
    alert("This is a longer alert message.");
  </script>

How to Hide JavaScript from Older Browsers

If the user's browser does not handle or understand JavaScript code, it will simply display the code in the page instead of running it. You don't want that to happen. So you can hide your JavaScript code from browsers that don't understand JavaScript.

You hide your JavaScript code from older browsers by putting standard HTML comments inside the <script>...</script> tags and around the JavaScript code itself. Browsers that do understand JavaScript will simply ignore the HTML comment markers and will run the JavaScript code normally.

But please note this important additional information: The closing HTML comment just before the canceling </script> tag must be preceded by a JavaScript line comment marker, meaning that you must put "//" before the closing HTML comment tag.

An example follows: 

  <html>
  <head>
    <title>Hiding JavaScript from older browsers</title>
  </head>
  <body>
  <script>
    <!-- This line starts a standard HTML comment
    alert("Hey!  This code is working!");
    // JavaScript comment ending in closing HTML comment marker -->
  </script>
  </body>
  </html>