IT 112Introduction to JavaScript

*

JavaScript*HistoryFirst web scripting language called LiveScriptDeveloped in 10 days in May 1995 byBrendan Eich, then working atNetscapeand now ofMozillaJavaScript was not always known as JavaScript: the original name was Mocha, a name chosen byMarc Andreessen, founder of Netscape.

JavaScript*HistoryIn parallel with this, Sun was developing JavaNetscape and Sun got together and realized that many of the specifications for Java could apply to LiveScriptResult is JavaScript

*Client script vs Server scriptA client-side scripting languageClient-side refers to the fact that it is executed in the client (software) that the viewer is using. In the case of JavaScript, the client is the browser.Interpreted on-the-fly by the client Each line is processed as it loads in the browser

A server-side language is one that runs on the Web server. Examples: PHP, PythonTo maintain data shared among applications or clientsTo maintain information during client accessesTo access a databaseTo access server filesTo call server C librariesTo customize Java applets

What is JavaScript?Browsers have limited functionality Text, images, tables, framesJavaScript allows for interactivityBrowser/page manipulationReacting to user actionsA type of programming languageEasy to learnIt allows you to make interactive Web pagesIt can be fun!

When the web was conceived, browsers were limited to text and image - later tables and frames. The extent to which they provided interactivity with the user was very limited. JavaScript was developed by Netscape as a simple programming language (often referred to as a scripting language). It is easy to learn and small sections of JavaScript can be added to a web page rather than needing to develop complicated programs. It was specially designed for web page interaction and manipulating the web browser and page elements. It is often used to respond to user actions such as mouse clicks.Although developed by Netscape, and other variants exist, such as Jscript from Microsoft, a standard has been developed by the European Computer Manufacturers Association. It is known as ECMAScript, using the standard ECMA262, which can be found fully documented at the address on the slide.

JavaScript Allows InteractivityImprove appearance Especially graphicsVisual feedbackSite navigationPerform calculationsValidation of inputOther technologies

javascript.internet.com

Examples should be shown which demonstrate different uses of JavaScript. For example, try the calculator example at the address shown.JavaScript can provide interactivity and/or enhance pages in several ways. It is particularly good at manipulating browser elements and images to improve page presentation and navigation.As a programming language it can handle quite complex calculations and control the behaviour of embedded content including images.A useful function is input validation - checking form responses BEFORE the form is sent for processing to a server. In this way it can be quicker and more user friendly, providing immediate feedback to the user.JavaScript can be combined with other technologies such as Java applets or plug-ins, but this is beyond the scope of this presentation.

How Does It Work?Embedded within HTML pageView sourceExecutes on clientFast, no connection needed once loadedSimple programming statements combined with HTML tagsInterpreted (not compiled) No special tools required

JavaScript is embedded/included within HTML. You can often see JavaScript in the source of a web page or it is provided for information on the page as with the calculator example.JavaScript is mainly used as a client-side language - it downloads with the web page. Once the page has downloaded and is on the users' machine, it is actually the web browser which then interprets the JavaScript instructions. JavaScript pages run quickly, you are not relying on an internet connection to a web server. Short pieces of JavaScript can be combined with HTML without the need to develop a fully blown program.There are two types of computer language, compiled and interpreted. To write or edit a compiled language requires a special piece of software called a compiler. JavaScript belongs to the other category, called interpreted. In the case of JavaScript, this interpretation is done by the browser software at run-time. Because JavaScript is interpreted, this means that no special tools are required to write or edit JavaScript, just a normal text editor. JavaScript web pages can be platform independent i.e. they will run on different browsers and computers (as long as the browser is JavaScript enabled). If you see a JavaScript web page that you like, you may be able to take that JavaScript and use it for your own purposes. (Remember to acknowledge the original author!)

Java vs JavaScriptIn reality, Java and JavaScript are unrelated

*

JavaScript*JavaScript Versus JavaJavaScript is interpreted while Java is compiledBut server-side JavaScript is compiledJavaScript is object-based while Java is object-orientedObject-based languages can utilize pre-defined objects, but you are limited in terms of creating your own objects

JavaScript*JavaScript Versus JavaJavaScript has loose data typing, while Java has strong data typingLoose data typing means that a variable can hold any kind of dataJavaScript code is embedded in an HTML document while Java applets are stand-alone applications that can be accessed from HTML

JavaScript*JavaScript Versus JavaJavaScript has dynamic binding, while Java has static bindingNames bound at runtimeJavaScript can access browser objects and functionality, while Java cannot

What is Java?Totally differentA full programming languageMuch harder!A compiled languageIndependent of the webSometimes used together

Java is often confused with JavaScript. JavaScript was originally called LiveScript, but due to the popularity of Java at the time, it was renamed JavaScript . Java is different from JavaScript in a number of significant areas:Java is a full programming language which can do just about anything - JavaScript isn't and can only do relatively simple things.Java is much harder to learn and takes much longer to master.Java is compiled. The language is not 'embedded' or written in the page - it is self-contained as a separate file.Java can be used/written totally independently from the web - JavaScript works with web browsers only.They are sometimes used together - JavaScript can be used to 'control' or configure Java 'applets'.This talk does not cover Java in any more detail. A separate Netskills Training Module investigates the use of Java applets.

JavaScriptExtends functionality of Web pagesWritten in the HTML DocumentControls page elementsReacts to user actionsInstructions - code downloaded as textPlatform independentObject Oriented

*

Object OrientedObjects have Qualities or attributesThings they can do In JavaScript these arePropertiesMethods

*

Object Examples

Object

Attribute

Things it can do

Computer

Brand name

Model Name

Processor Type

Processor Speed

Disk Drive

Boot up

Run an application

Perform math calculations

Shut down

Disk Drive

Brand name

Model name

Storage capacity

Transfer rate

Access time

Store information

Retrieve information

Delete information

*

JavaScript Object Example To Reference Properties and methods document.titledocument.bgColor document.writeln(My Heading)

Object

Attribute

Things it can do

document

bgColor

linkColor

vlinkColor

title

clear()

close()

writeln()

write()

*

Fundamental ConceptsObjects: The nouns of the languageInstances: incarnations of objectsProperties: attributes or state of objectsMethods: The verbs of the language that define the behaviors of objectsEvents and Events Handlers

JavaScript VariablesVariables: containers for dataAll variables have NameType JavaScript is loosely typedValue or nullTo declare a variablevar variablenameBeware of reserved words (book page 558)

The Document Object ModelInternal road map of objects on a web pageHierarchical model of web browser objectsOld DOMs for Netscape, MicrosoftNew browsers use the standard DOM by W3C

Embedding JavaScript in HTMLAs statements and functions via tag javascript statements...if not external

Attributes Ttype, SRC

Within HTML tags as event handlersLaterProvide the doorway between HTML and Scripts

*

A Word About CommentsJavaScript CommentsThese comments must be within a script// begins a single line commentThese can start anywhere on the line, but the remainder of the line becomes a comment/* All of your comments here */Everything between the start and end comment markers are commentsCan be on a single line or span many

HTML Comments

*

JavaScript in HTML, Template

My page with javascript

the page requires a browser with javascript ...

*

JavaScript Statements

My Page

document.write('This is my first JavaScript Page');

Note the symbol for line continuation

JavaScript can be contained either in the header section of an HTML page or in the body. This JavaScript statement is shown as a pure JavaScript statement within SCRIPT tags.Notice that there is no HTML in the body of this page at all. (Demonstrate what this JavaScript looks like in a web browser).This statement writes a line of text on a web page. The command document.write is a standard function in JavaScript to write text to the page. The following is a more technical explanation for background information only:document.write is derived from the JavaScript object model (not covered in detail here). It works on the principle that all document and browser elements have an object name (document, window, image etc) and can each has various properties that can be manipulated. The object hierarchy means that individual elements can be uniquely identified i.e. document.myform.mytext would refer to the text entry named mytext within the form called myform within the current page (document).

The arrow symbol '' is used in these slides and in the workbook to indicate where a JavaScript statement should be typed on one line without a break. A line break in the wrong place will stop JavaScript from working.e.g.

document.write('This is my first JavaScript Page');

should actually be typed:

document.write('This is my first JavaScript Page');

JavaScript Statements

My Page

JavaScript Statements

My Page

My Page

My Page

JavaScript writteninside HTMLAn Event

Compare this example with the previous one. This time the JavaScript is written inside the HTML tags and there are no tags.In this case if the browser is JavaScript-enabled it will process the commands when it needs to. If the browser doesn't understand JavaScript it will ignore the extra code (it should see it as an HTML attribute that it cannot process and therefore ignores, although very old browsers my throw an error)This example demonstrates an HTML hyperlink, but notice the JavaScript enclosed within the

Example Statements

window.prompt('Enter your name:','');

Another eventNote quotes: " and '

This example shows two separate statements. The first is some pure JavaScript so must be contained within tags. It displays a pop up box with the message "Enter your name" and a space to type in text. This occurs immediately when the page loads.The second statement is within an HTML form. The tag includes some JavaScript within it. The tag creates a form element (a button) and associates with it some JavaScript. The JavaScript responds to the mouse click event (onClick) on the button by producing a pop up alert box with the text 'Hello' in. This only occurs when the user triggers the event by clicking on the button.JavaScript makes use of both single and double quotes. They are used in this example to have a text string 'Hello' contained within another string which defines the code to be carried out in response to the onClick event. It is important that the quotes should match - if they don't, your JavaScript will not work!

*Hello, World!Typically, in any programming language, the first example you learn displays Hello, World!We are going to take a look at a Hello World example and then examine all of its parts.

*Hello World in JavaScript

Hello World Example

*Hello World Screenshot

*The tagThe code for the script is contained in the tag

...

*Single Line Comment Example

*Multiple Line Comment Example

HTML Forms and JavaScriptJavaScript is very good at processing user input in the web browserHTML elements receive inputForms and form elements have unique namesEach unique element can be identifiedUses JavaScript Document Object Model (DOM)

JavaScript is very useful for processing and manipulating user input and form elements.A common way of obtaining input is via the HTML elements which can provide text entry boxes, selection boxes, menus and buttons. Form elements can be named and hence uniquely identified within the JavaScript object model.

Naming Form Elements in HTML

Name: Phone: Email:

This example shows a simple form. Notice the name attribute is used at all points - to name the form, and to name each element within the form.How JavaScript uses the name attribute is described next.

Forms and JavaScriptdocument.formname.elementname.valueThus:

document.addressform.yourname.valuedocument.addressform.phone.valuedocument.addressform.email.value

To refer to the value that a user has typed in a text box, you use the following naming system:document.formname.elementname.value This is a naming convention derived from the JavaScript object model:document refers to the page displayed in the browser.formname is supplied by the page author as the name attribute of the tag - in the example it is addressform and refers to the whole form.elementname is supplied by the page author using the name attribute of the tag.value is a predefined term which refers to the text typed in by the user.

Using Form DataPersonalising an alert box

Enter your name:

This simple code creates a form called alertform.The JavaScript is activated when 'Go' button is pressed (an onClick event - see separate Netskills Training Module for more details on Functions and Events in JavaScript). The current value of the element yourname would be displayed in a an alert box.

TipsCheck your statements are on one lineCheck your " and ' quotes matchTake care with capitalizationLay it out neatly - use tabsRemember in the workbook denotes a continuing lineBe patient

Presentation slides adapted from scom.hud.ac.uk/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/introjs.ppt

Some tips for debugging and clarity to make it easier for you (the trainer) as well as for the audience. Follow the conventions we have used for capitalisation which will make it easier to read / find mistakes.References:An alternative site with ready made scripts for download:http://builder.com.com/ Follow links to Web Development and then JavaScript to see a number of good examples.

*Find the Bug!

JavaScript Lab Exercise 1Create a web page that containsA title of My first JavaScript PageA Javascript to ask the user for their name A personalized welcome message to the user.

Create another page that combines image swap and function exampleHave the function called from the button switch the images

*

When the web was conceived, browsers were limited to text and image - later tables and frames. The extent to which they provided interactivity with the user was very limited. JavaScript was developed by Netscape as a simple programming language (often referred to as a scripting language). It is easy to learn and small sections of JavaScript can be added to a web page rather than needing to develop complicated programs. It was specially designed for web page interaction and manipulating the web browser and page elements. It is often used to respond to user actions such as mouse clicks.Although developed by Netscape, and other variants exist, such as Jscript from Microsoft, a standard has been developed by the European Computer Manufacturers Association. It is known as ECMAScript, using the standard ECMA262, which can be found fully documented at the address on the slide.Examples should be shown which demonstrate different uses of JavaScript. For example, try the calculator example at the address shown.JavaScript can provide interactivity and/or enhance pages in several ways. It is particularly good at manipulating browser elements and images to improve page presentation and navigation.As a programming language it can handle quite complex calculations and control the behaviour of embedded content including images.A useful function is input validation - checking form responses BEFORE the form is sent for processing to a server. In this way it can be quicker and more user friendly, providing immediate feedback to the user.JavaScript can be combined with other technologies such as Java applets or plug-ins, but this is beyond the scope of this presentation.JavaScript is embedded/included within HTML. You can often see JavaScript in the source of a web page or it is provided for information on the page as with the calculator example.JavaScript is mainly used as a client-side language - it downloads with the web page. Once the page has downloaded and is on the users' machine, it is actually the web browser which then interprets the JavaScript instructions. JavaScript pages run quickly, you are not relying on an internet connection to a web server. Short pieces of JavaScript can be combined with HTML without the need to develop a fully blown program.There are two types of computer language, compiled and interpreted. To write or edit a compiled language requires a special piece of software called a compiler. JavaScript belongs to the other category, called interpreted. In the case of JavaScript, this interpretation is done by the browser software at run-time. Because JavaScript is interpreted, this means that no special tools are required to write or edit JavaScript, just a normal text editor. JavaScript web pages can be platform independent i.e. they will run on different browsers and computers (as long as the browser is JavaScript enabled). If you see a JavaScript web page that you like, you may be able to take that JavaScript and use it for your own purposes. (Remember to acknowledge the original author!)*

Java is often confused with JavaScript. JavaScript was originally called LiveScript, but due to the popularity of Java at the time, it was renamed JavaScript . Java is different from JavaScript in a number of significant areas:Java is a full programming language which can do just about anything - JavaScript isn't and can only do relatively simple things.Java is much harder to learn and takes much longer to master.Java is compiled. The language is not 'embedded' or written in the page - it is self-contained as a separate file.Java can be used/written totally independently from the web - JavaScript works with web browsers only.They are sometimes used together - JavaScript can be used to 'control' or configure Java 'applets'.This talk does not cover Java in any more detail. A separate Netskills Training Module investigates the use of Java applets.

*

*

*

*

*

*

*

JavaScript can be contained either in the header section of an HTML page or in the body. This JavaScript statement is shown as a pure JavaScript statement within SCRIPT tags.Notice that there is no HTML in the body of this page at all. (Demonstrate what this JavaScript looks like in a web browser).This statement writes a line of text on a web page. The command document.write is a standard function in JavaScript to write text to the page. The following is a more technical explanation for background information only:document.write is derived from the JavaScript object model (not covered in detail here). It works on the principle that all document and browser elements have an object name (document, window, image etc) and can each has various properties that can be manipulated. The object hierarchy means that individual elements can be uniquely identified i.e. document.myform.mytext would refer to the text entry named mytext within the form called myform within the current page (document).

The arrow symbol '' is used in these slides and in the workbook to indicate where a JavaScript statement should be typed on one line without a break. A line break in the wrong place will stop JavaScript from working.e.g.

document.write('This is my first JavaScript Page');

should actually be typed:

document.write('This is my first JavaScript Page');This example demonstrates that anything included within the quotes in the document.write statement is printed to the screen, and this includes HTML tags. The tag is delivered to the browser along with the text, and the browser would interpret it as a normal HTML file, displaying the text in the Heading 1 style.

IMPORTANT NOTE:This example shows a JavaScript statement in the of the web page.It is possible to include JavaScript statements in the section of a web page but care must be taken that they do not try to access items that don't exist until the page has loaded (e.g. form elements, links, images). The web browser parses (reads through and executes) any script commands as it displays the page.In most cases it is common sense that dictates where a statement should be placed.If, in the above example, document.write was placed in the of the page, the text "This is my first JavaScript Page" would appear in the of the finished page this would be incorrect although modern browsers will let you get away with it!In some circumstances you may wish to use document.write in the - for example to dynamically generate or tags. Such uses are not considered here. JavaScript functions are typically defined in the section of a web page as they do not normally execute until they have been triggered elsewhere. The use of functions in JavaScript is covered in the Netskills Training Module: "Further JavaScript (Enhancing JavaScript with Functions and Events)"

Compare this example with the previous one. This time the JavaScript is written inside the HTML tags and there are no tags.In this case if the browser is JavaScript-enabled it will process the commands when it needs to. If the browser doesn't understand JavaScript it will ignore the extra code (it should see it as an HTML attribute that it cannot process and therefore ignores, although very old browsers my throw an error)This example demonstrates an HTML hyperlink, but notice the JavaScript enclosed within the