📖 Introduction to JavaScript

JavaScript is a scripting language that can be used to add interactivity and animation to Web pages. JavaScript code may be contained in a Web page enclosed in <script></script> tags or in an external file. It is a scripting language - it does not have to be compiled. A good beginners resource for JavaScript can be found at the W3 Schools.

JavaScript can run on the server (server-side) or on the user's computer (client-side). We will be primarily using client-side JavaScript programming including jQuery. jQuery is a JavaScript library that can make using JavaScript a little easier and more consistent.

Common uses of JavaScript

  • Rollover buttons and images
  • Form validation
  • Calculations and feedback
  • Customize pages by controlling the content that is displayed, opening new windows, display alert boxes, etc.
  • Set and read cookies
  • Generate clocks, calendars and timestamps

JavaScript Limitations

  • Read or write files on the client machine
  • Write files on server machines
  • Close a window that it has not opened
  • Read information from an opened Web page that came from another server

Creating JavaScript Web Pages

JavaScript pages can be coded using any simple text editor. Notepad works fine. (Don't use Word or other word processing software as the formatting code can really mess things up!) If you have a WYSIWYG HTML editor such as Dreamweaver, then you can use the code view to write your JavaScript scripts.

There are a number of JavaScript editors available for download on the Internet as shareware. The book lists several of these in the Introduction on pages 10-11. Notepad++ is a good choice for the PC, but feel free to use the editor of your choice. I recently began using VS Code and find it is a robust, professional grade IDE. I highly recommend you try it.

JavaScript-Friendly HTML

JavaScript is designed to work with HTML and CSS on a web page. JavaScript-friendly HTML should be well-structured and standards compliant. Sloppy code and deprecated elements and attributes can result in unanticipated (and undesirable) results. To make your html pages JavaScript-friendly:

  • Your Web page document should consist only of HTML with the content and structure of the page
  • CSS code which controls the appearance and presentation of the page should be kept in a separate .css file.
  • JavaScript code which controls the behavior of the page should generally be kept in a separate .js file.

If you are not familiar with HTML or CSS, you can find some good tutorials at http://www.w3schools.com. I strongly recommend that you go through those as they will save you a lot of time and effort down the road. We will also be working with some of the new HTML5 features. If you are not familiar with HTML5 and CSS3, then you may want to brush up on the new code and features below.

Adding JavaScript code to a Web page

  • JavaScript code may be contained in a Web page enclosed in <script></script> tags or in an external file.
  • The <script></script> tags can be placed in the head or body section of a page. Generally, it is best to place as much code in the head section as possible. All your functions, for example, should be in the head section. The body section should only contain code that must be executed as the page is being loaded.
  • The format of the <script> element is:
<script>
	/* Javascript code goes here */
</script>
  • A single Web page may contain multiple scripts and script tags as well as a link to an external script file.
  • External JavaScript files are preferred because the code can be reused by multiple pages and because the Web pages are simpler and easier to read.
  • External script files do not use the <script></script> tags or any other html code -- only JavaScript code.
  • The format of the <script> element for an external Javascript file is:
<script src="filename.js"></script>
	/* Where filename.js is the name of your script file. */

Every JavaScript statement should end with a semi-colon(;).

alert("text");

  • A built in function that displays a special alert box with the specified text. The user must click the OK button to proceed.

prompt("What is your name?");

  • A built in function that displays a interactive text box with the specified text. The user is prompted to provide input and must click the OK button to proceed.

document.write("text");

  • A built in method of the Web document that will write the text in quotes to the Web page at the location where the script is located.

Writing Your First Script

Add the following code to your page. Since it's an alert box, it doesn't matter much where you put the code. I would add it to the bottom of the page after the footer but before the closing body tag. Since the browser loads the page code sequentially, this will allow the entire page to load before we trigger the alert.

<script>
	alert("Welcome!");
</script>

That's all there is to it. Add this code to your page to provide your visitors with a Welcome! alert. Save your page and test it in your browser.

You can also use a prompt() statement to collect information from your visitors. To ask for information from your visitors, you'll need to use a prompt box and you'll need to collect their response in a variable to use it. The prompt function is a built-in JavaScript function that creates a popup a box with a custom text message and a place for a user response. The code for this is shown below.

<script>
var guest = prompt("Welcome! This is a JavaScript Demo. See details at the end of the article. Please enter your name.");
document.write("<h2>Welcome to JavaScript, " + guest + "!</h2>");
</script>

The popup box that met you when you first opened this article asked you for your name. If you entered your name it will be shown in the welcome message below. Refresh the page to see the demo again.