JavaScript Introduction

Introduction

JavaScript is programming language created by Brendan Eich for a company called Netscape. It quickly became very popular as it allowed web developers to manipulate the browser and its contents in ways that were not possible with ordinary HTML or Cascading Style Sheets. By using JavaScript in your web pages, you can gain more control of how the page looks and behaves: document elements can be inspected, form elements validated before the contents are sent, browser details checked, cookies set, dates and times can be added to the page, even simple games can be added to a web page – all with a scripting language.

 

The learning curve for scripting is a lot steeper than HTML and Style Sheets. But you can learn the basics, and use scripts on your own pages, without it causing you too much trouble. The scripting language covered in these pages is meant to get you started on the subject, and is not intended as an in-depth study.

 

Basic Knowledge

For this Javascript course, we’re going to assume that you know some HTML. You by no means need to be a web design guru, but you should have some basic knowledge of how a web page is created. You should know about things like the HEAD and BODY section of an HTML page, how to create new paragraphs, insert images and hyperlinks.

 

Softwares

The software we will use is just a basic text editor. This will be Notepad on a Windows computer for us, but you can use any operating system. For Mac users, the equivalent to Notepad is TextEdit. Another good free editor for the Mac is TextWrangler. You can get a copy here:

Text Wrangler

For Linux users, you will have a wide range of choices. There’s a Wikipedia article here about text editors available to you: http://en.wikipedia.org/wiki/Category:Linux_text_editors

Notepad++

For Windows users, one of the best free editors for basic programming is Notepad++. You can download a copy here: http://notepad-plus-plus.org/

 

First Script

We’re going to be using Notepad on a Windows machine. Add the simple HTML you see below:

javascript-for-beginners
javascript-for-beginners

So we have the HEAD and BODY tags of an HTML page, along with a TITLE area at the top. Save your text file with the name first_script.html

We now need to add some JavaScript tags. In between the two BODY tags, then, add the following

javascript-for-beginners
javascript-for-beginners

The lines you’re adding are these:

javascript-for-beginners
javascript-for-beginners

Programming scripts are added between two <SCRIPT> tags, an opening one, and a closing one. An attribute to the SCRIPT tag is LANGUAGE. This tells the browser which scripting language is being used. For us, this is Javascript. This goes after an equal sign ( = ). Notice that we’ve surrounded the word Javascript with double quote marks. But you don’t have to. In fact, you can miss out the LANGUAGE attribute altogether and just have this:

javascript-for-beginners
javascript-for-beginners

Any Javascript you want to add needs to go between the two SCRIPT tags. Careful of the forward slash for the end SCRIPT tag – miss this out and your code won’t work. Like all HTML tags, though, the two SCRIPT tags can be lowercase, if you prefer:

javascript-for-beginners
javascript-for-beginners

However, although the SCRIPT tags are not case sensitive Javascript very definitely is. Our code consists of a single line, a simple alert box. All it does is to display a dialogue box with the words “Hello World”. Try it out. Save your work. Now use Windows Explorer or Finder on a Mac to navigate to where you saved the HTML file. Double click to run your script in a browser. You should see the following in Firefox

javascript-for-beginners
javascript-for-beginners

Confirm and Prompt

Confirm are normally used with an IF Statements to detect which of the two buttons was clicked. confirm(“OK or Cancel?”)

javascript-for-beginners
javascript-for-beginners

A prompt box is used when you want some input from the user. The code for a Prompt box is this: prompt(“Favourite Colour?”, “Red”)

javascript-for-beginners
javascript-for-beginners