COM621: Advanced Interactive Web Development Lecture 5 – JavaScript

Introduction to Java Scripts  What is JavaScript??? JavaScript is a Scripting Language created by Netscape What is a Scripting Language??? Scripting Language is a lightweight programming language. Scripting Languages are not needed to be compiled. The language is interpreted at runtime. FaaDoOEngineers.com

Introduction to JavaScript (Contd.) A JavaScript is usually directly embedded in an HTML page. External JavaScripts can be created which can be used by HTML pages. JavaScript adds interactivity to HTML pages. JavaScript's are integrated into the browsing environment. FaaDoOEngineers.com

Introduction to JavaScript (Contd.)  Java is a programming language which requires compilation and interpretation.  Java is used to make large scale applications.  JavaScript is a scripting language which just requires interpretation. The script is some set of commands which the browser interprets.  JavaScript is used to add interactivity in HTML Pages. Is JavaScript same as Java??? Is JavaScript same as Java??? FaaDoOEngineers.com

Types of JavaScript  Client-Side JavaScript (CSJS) -- an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers.  Server-Side JavaScript (SSJS) -- an extended version of JavaScript that enables back-end access to databases, file systems, and servers.  Core JavaScript -- the base JavaScript language. FaaDoOEngineers.com

Core JavaScript  Core JavaScript encompasses all of the statements, operators, objects, and functions that make up the basic JavaScript language.  The following objects are part of core JavaScript: array date math number string FaaDoOEngineers.com

Client Side Java Scripting  CSJS is composed of core JavaScript and many additional objects, such as the following: document form frame window Navigator History FaaDoOEngineers.com

Uses of JavaScript (Client Side)  Menus for Navigation  Form Validation  Popup Windows  Password Protecting  Math Functions  Special effects with document and background  Status bar manipulation  Messages  Mouse Cursor Effects  Links FaaDoOEngineers.com

Server Side JavaScript  SSJS is composed of core JavaScript and additional objects and functions for accessing databases and file systems, sending e- mail, and so on. FaaDoOEngineers.com

Client Side JavaScript Server Side JavaScript Core JavaScript ________________ is an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers Test Your Understanding FaaDoOEngineers.com

Client Side JavaScript Server Side JavaScript Core JavaScript ________________ is an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers Test Your Understanding FaaDoOEngineers.com

Syntax rules of JavaScript  Statements may or may not contain a semicolon at the end.  Multiple statements on one line must be separated by a semicolon.  JavaScript is case sensitive. FaaDoOEngineers.com

Using tag  The HTML tag is used to enter JavaScript into a HTML.  The tag can be embedded within tag.  JavaScript in the head section will be executed when called.  JavaScript in the body section will be executed while the HTML page is loaded.  Unlimited number of JavaScript’s can be placed both in head and body section in a HTML document. FaaDoOEngineers.com

Using tag Eg: Example document.write("Hello World!") Is a standard command for writing output to a page FaaDoOEngineers.com

How to Handle Older Browsers  Browsers that do not support JavaScript will display the script as it is.  Use the HTML comment tag to prevent this. Eg. <!-- document.write("Hello World!") --> FaaDoOEngineers.com

Using an External JavaScript  A JavaScript can be written in an external file, which can be used by different HTML pages.  The external script cannot contain the tag.  The external file needs to end with the.js extension. FaaDoOEngineers.com

Using External JavaScript (contd.) document.write("This line has been writen in the External JavaScript!!!") External.js Example > This line has been written in the html page!!! JavaScript.html FaaDoOEngineers.com

Test Your Understanding is embedded within is embedded within is embedded within Select the Correct Statement/s FaaDoOEngineers.com

Test Your Understanding is embedded within </script is embedded within is embedded within Select the Correct Statement/s FaaDoOEngineers.com

JavaScript Variables and expression  JavaScript Variables Variable: A variable is a symbolic name that represents some data in the memory. A variable value can change during the execution of the JavaScript. A variable can be referred by its name to see or change its value. Variables are case sensitive. Must begin with a letter or underscore. FaaDoOEngineers.com

Rules of a Variable  Variable Declaration Variables can be declared using the var statement var =some value Variables can also be created without using var statement =some value Eg var firstname=“Samuel” OR firstname=“Samuel” FaaDoOEngineers.com

Data Type in JavaScript  JavaScript is a loosely typed language.  Data Type of Variable need not be specified during declaration.  Data types are automatically converted during script execution. Loosely Typed?? FaaDoOEngineers.com

Data Type in JavaScript (contd.)  JavaScript recognizes the following type of values: Values string numbers null boolean 9, 3.56 true or false “Samuel”, ”Samuel J Palmisano” A Special keyword which refers to nothing FaaDoOEngineers.com

Data Type in JavaScript (contd.) FaaDoOEngineers.com

JavaScript Operators ArithmeticAssignment Conditional String Comparison Logical Operators typeof FaaDoOEngineers.com

JavaScript Operator (contd.) Arithmetic FaaDoOEngineers.com

JavaScript Operator (contd.) Comparison FaaDoOEngineers.com

JavaScript Operator (contd.) Assignment FaaDoOEngineers.com

JavaScript Operator (contd.) Logical FaaDoOEngineers.com

JavaScript Operator (contd.) String FaaDoOEngineers.com Conditional

JavaScript Operator (contd.) typeof FaaDoOEngineers.com

number string null x = 20 x = “Test” typeof(x) evaluates to Test Your Understanding FaaDoOEngineers.com

number string null x = 20 x = “Test” typeof(x) evaluates to Test Your Understanding FaaDoOEngineers.com

Flow Control  Conditional Statements if statement - use this statement if you want to execute some code only if a specified condition is true. if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false. if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed. switch statement - use this statement if you want to select one of many blocks of code to be executed. FaaDoOEngineers.com

while statement FaaDoOEngineers.com

break and continue Statements  There are two special statements that can be used inside loops: break. continue.  Break The break command will break the loop and continue executing the code that follows after the loop (if any).  Continue The continue command will break the current loop and continue with the next value. FaaDoOEngineers.com

Example of break statement var i=0 for (i=0;i<=5;i++) { if (i==3){break} document.write("The number is " + i) document.write(" ") } Result The number is 0 The number is 1 The number is 2 FaaDoOEngineers.com

Example of continue statement var i=0 for (i=0;i<=5;i++) { if (i==3){continue} document.write("The number is " + i) document.write(" ") } Result The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 FaaDoOEngineers.com

For loop FaaDoOEngineers.com

Functions  A function is a reusable piece of code that will be executed when called for.  A function can be called from anywhere from within the page or even from other pages if the function is stored in an external JavaScript (.js) file.  Functions can be embedded in the and within the tag. FaaDoOEngineers.com

Predefined functions in JavaScript  DialogBoxes alert( message) Displays an alert box with a message defined by the string message. Eg. alert(“An Error Occurred!”) FaaDoOEngineers.com

Predefined functions in JavaScript (contd.)  confirm(message) When called, it will display the message and two boxes. One box is "OK" and the other is "Cancel". If OK is selected, a value of true is returned, otherwise a value of false is returned. Eg. confirm(“Do you wish to Continue?”) FaaDoOEngineers.com

 prompt(message) Displays a box with the message passed to the function displayed. The user can then enter text in the prompt field, and choose OK or Cancel. If the user chooses Cancel, a NULL value is returned. If the user chooses OK, the string value entered in the field is returned. Eg: prompt(“enter your Name”) Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

 Conversion Functions eval(string) Converts a string to an integer or a float value. Eg x=“20” y=eval(x)+10 y contains the value 30 Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

isNaN(value) If the value passed is not a number then a boolean value of true is returned else the boolean value of false is returned. Eg x=“Samuel” y=isNaN(x) The value stored in y is true Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

parseInt(string) Converts a string to an integer returning the first integer encountered which is contained in the string. Eg x=77AB67 y=parseInt(x) y stores the value 77 Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

parseFloat(string) Converts a string to an float value. Eg x=77.5AB67 y=parseFloat(x) y stores the value 77.5 Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

User Defined Functions FaaDoOEngineers.com

User Defined Functions (contd.) FaaDoOEngineers.com

User Defined Functions (contd.) FaaDoOEngineers.com

Events FaaDoOEngineers.com

Events (contd.) FaaDoOEngineers.com

Event Handlers FaaDoOEngineers.com

Common Event Handlers FaaDoOEngineers.com

Common Event Handlers (contd.) FaaDoOEngineers.com

 onLoad and onUnload The onload and onUnload events are triggered when the user enters or leaves the page. The onload event is also triggered when the image is loaded. The showstatus() function will be called when a user enters a page Common Event Handlers (contd.) FaaDoOEngineers.com

Common Event Handlers (contd.)  onFocus, onBlur and onChange The onFocus, onBlur and onChange events are often used in combination with validation of form fields. The check () function will be called whenever the user changes the content of the field: ; FaaDoOEngineers.com

Common Event Handlers (contd.)  onSubmit The onSubmit event is used to validate ALL form fields before submitting it. The checkForm() function will be called when the user clicks the submit button in the form. FaaDoOEngineers.com

Common Event Handlers (contd.)  onMouseOver and onMouseOut onMouseOver and onMouseOut are often used to create "animated" buttons. An alert box appears when an onMouseOver event is detected: FaaDoOEngineers.com

Test Your Understanding FaaDoOEngineers.com

Test Your Understanding FaaDoOEngineers.com

Example (contd.) function Addition() { var x1=document.form1.text1.value var y1=document.form1.text2.value var Ans=document.form1.text3.value var temp=x1+y1 } FaaDoOEngineers.com Example

function Addition (x,y) { var x1=parseInt(x) var y1=parseInt(y) var Ans=document.form1.text3.value var temp=x1+y1 } Example (contd.) FaaDoOEngineers.com

Example (contd.) function Addition (x,y) { var x1=parseInt(x) var y1=parseInt(y) var Ans=document.form1.text3.value var temp=x1+y1 } FaaDoOEngineers.com

Example (contd.) f unction Addition (x,y) { var x1=parseInt(x) var y1=parseInt(y) var Ans=document.form1.text3.value var temp=x1+y1 if(Ans==temp){ alert(“Your Result agrees with JavaScript!”) document.form1.text1.value=‘’ document.form1.text2.value=‘’ document.form1.text3.value=‘’ } else{ alert(“No, JavaScript evaluates this operation differently”) document.form1.text3.value=‘’ } FaaDoOEngineers.com

A Complete Program function myfunction(txt) { alert(txt) } When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it. FaaDoOEngineers.com

Output FaaDoOEngineers.com

myfunction (txt) receives “ Good Morning!” FaaDoOEngineers.com

myfunction (txt) receives “ Good Evening !” FaaDoOEngineers.com

JavaScript Objects  JavaScript is not a true Object Oriented language as C++ or Java but rather an Object Based language.  Objects in JavaScript are software entities such as the browser window or an HTML document. FaaDoOEngineers.com

JavaScript Objects (contd.) FaaDoOEngineers.com

JavaScript Objects (contd.) FaaDoOEngineers.com

JavaScript Objects (contd.) FaaDoOEngineers.com

JavaScript Objects (contd.) FaaDoOEngineers.com

JavaScript Objects (contd.) FaaDoOEngineers.com

JavaScript Objects (contd.) FaaDoOEngineers.com

JavaScript Objects (contd.) FaaDoOEngineers.com

JavaScript Objects (contd.) FaaDoOEngineers.com

JavaScript Objects (contd.) FaaDoOEngineers.com

Instances of Computer Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects FaaDoOEngineers.com

JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

 Boolean Object This object is used to convert a non boolean value to a boolean value. The Boolean Object is an Object Wrapper for a Boolean value Boolean object is defined with the new keyword var BooleanObj=new Boolean() JavaScript Core Objects (contd.) FaaDoOEngineers.com

 All the following lines of code create Boolean objects with an initial value of false : var myBoolean=new Boolean() var myBoolean=new Boolean(0) var myBoolean=new Boolean(null) var myBoolean=new Boolean("") var myBoolean=new Boolean(false) var myBoolean=new Boolean(NaN) JavaScript Core Objects (contd.) FaaDoOEngineers.com

 All the following lines of code create Boolean objects with an initial value of true: var myBoolean=new Boolean(true) var myBoolean=new Boolean("true") var myBoolean=new Boolean("false") var myBoolean=new Boolean("Richard") JavaScript Core Objects (contd.) FaaDoOEngineers.com

Test Your Understanding FaaDoOEngineers.com

Test Your Understanding FaaDoOEngineers.com

JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

 Date Object The Date object is used to work with dates and times. An instance of the Date object with the "new" keyword. An instance of Date object can be created as: var myDate=new Date() var myDate=new Date("Month dd, yyyy hh:mm:ss") var myDate=new Date("Month dd, yyyy") var myDate=new Date(yy,mm,dd,hh,mm,ss) var myDate=new Date(yy,mm,dd) var myDate= new Date(milliseconds) JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

Date()

Commonly used methods of the Date Object JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

 Math Object Math object allows to perform common mathematical functions. The Math object includes several Mathematical values and functions. The Math object need not be defined before using it. JavaScript Core Objects (contd.) FaaDoOEngineers.com

 Mathematical values provided by JavaScript Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E JavaScript Core Objects (contd.) FaaDoOEngineers.com

Methods of Math object JavaScript Core Objects (contd.) FaaDoOEngineers.com

Test Your Understanding FaaDoOEngineers.com

Test Your Understanding FaaDoOEngineers.com

JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) FaaDoOEngineers.com

JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

 String object The String object is used to manipulate a stored piece of text. String objects must be created using the new keyword. JavaScript automatically converts the string primitive to a temporary String object A string literal can be embedded within a single or double quotation marks. JavaScript Core Objects (contd.) FaaDoOEngineers.com

 String primitives and String objects give different results when evaluated as JavaScript.  Primitives are treated as source code, but String objects are treated as a character sequence object. s1 = "2 + 2“ // creates a string primitive s2 = new String("2 + 2") // creates a String object eval(s1) // returns the number 4 eval(s2) // returns the string "2 + 2“ eval(s2.valueOf()); // returns the number 4 JavaScript Core Objects (contd.) FaaDoOEngineers.com

Common Methods of String Object JavaScript Core Objects (contd.) FaaDoOEngineers.com

Defining Arrays  An Array object is used to store a set of values in a single variable name.  An Array object is created with the new keyword.  An array can be created as: var MyArray=new Array()  An array can also be created by specifying the array size. var MyArray=new Array(3) FaaDoOEngineers.com

Arrays (contd.)  Data can be entered into an array as: var MyArray=new Array() MyArray[0]=“Paul” MyArray[1]=“Sam” MyArray[2]=“Niel”  Data can also be entered into an array as: var MyArray=new Array(“Paul”,”Sam”, “Niel”) FaaDoOEngineers.com

Arrays (contd.)  Accessing Arrays You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. var MyArray=new Array() Myarray [0] The starting index FaaDoOEngineers.com

Windows Objects  The windows object represents a browser window  There can be several window objects at a time, each representing an open browser window.  Example: window.alert(‘message’) – This method displays a message in an alert box: Trigger an Event

Web Documents  The document object represents a web document or page. Web documents are displayed within browser windows, so the document object is a child of the window object.  Because the window object always represents the current window (the one containing the script), you can use window.document to refer to the current document. You can also simply refer to document, which automatically refers to the current window.

Web Documents Getting Information on the Document  Several properties of the document object include information about the current document in general: PropertyExplanation document.URLspecifies the document’s URL. This is a simple text field that can not be modified document.titletitle of the document page, defined by the HTML tag document.referreris the URL of the page the user was viewing prior to the current page (usually a page with a link to the current page) document.lastModifiedis the date the document was last modified (this date is sent from the server along with the page)

PropertyDescription document.bgColor document.fgColor Background and foreground(text) colors for the document, corresponding to the BGCOLOR and TEXT attributes of the or their CSS equivalent (background-color and color) document.linkColor document.alinkColor document.vlinkColor These are the colors for links within the document. document.cookieEnables you to read or set a cookie for the document. PropertyDescription document.writePrints text as part of the HTML page in a document window document.location.hrefUsed to load a new document

Example Document Last Modified This page was last modified on: <!-- document.write(document.lastModified); --> Writing Markup to ScreenJS document object property