>> Introduction to JavaScript

Web-Based Systems - Misbhauddin 2

Pop-up Boxes in JS

ALERT alert("Welcome to the Class");

CONFIRM

confirm("Are you sure you want to take IS-311?");

PROMPTprompt("What is XML?", ":(");

Returns a value also

Web-Based Systems - Misbhauddin 3

Functions in JavaScript

function name(){

}

SYNTAXkeyword

• Mainly used for event-handling in Web Development• Can also be called from other functions (Reuse)

function test(){ alert(“Tested”);}

TRY NOW

Tip: Make it work by calling the function

Web-Based Systems - Misbhauddin 4

Functions in JavaScript

function name(parameters){ return b;}

function test(x){ alert(x);}

TRY NOW

• You can use as many parameters as you like• Can also return values (numbers, strings, boolean)

• Use return statement

Web-Based Systems - Misbhauddin 5

Objects - Introduction

Object

Properties

Methods

JavaScript is Object-Oriented

var abc = “Hello World”;abc.length;

Example

property

document.write(“Hello World”);

method

They have a value

'things that do something

Web-Based Systems - Misbhauddin 6

Objects - Definition

Objects• Objects allow us to represent in code real world things and entities • Such as a person or bank account

var object-name ={ ………. }

SYNTAXkeyword

Create an object called “student”

TRY NOW

Web-Based Systems - Misbhauddin 7

Properties in Objects

Properties• Each piece of information we include in an object is known as a property. • Each property has a name, followed by : and then the value of that property

var object-name ={ property-name: value,}

SYNTAXkeyword

Add two attributes with your name and major

TRY NOW

Note: Separate each property using a comma (,) and not a semicolon as in Java

Web-Based Systems - Misbhauddin 8

Using Properties from Objects

• Use the “.” dot notation• Remember the length property you used with strings

ObjectName.PropertyName;

SYNTAX

Display the properties from the student object using document.write() function

TRY NOW

Web-Based Systems - Misbhauddin 9

Using Properties from Objects

• Use the brackets notation []• Remember the length property you used with strings

ObjectName["PropertyName"]

SYNTAX

Repeat using brackets now.Display the properties from the student object using document.write() function

TRY NOW

Note: We need " " around the property's name.

Web-Based Systems - Misbhauddin 10

Objects using Constructor

• Uses the “new” keyword• Remember the length property you used with strings

var ObjectName = new Object();

SYNTAX Adding Properties using constructor method

ObjectName.PropertyName=value;

keyword

Web-Based Systems - Misbhauddin 11

Try NowCreate an object called BMW, which should have 3 properties: a cost of “too much", speed of 220 and country of "Germany"

var BMW=new Object();BMW.cost="too much";BMW.speed=220;BMW.country="Germany";

var BMW={ cost:"too much“, speed:220, country:"Germany“}

Using Constructor Method Using Object Literal Notation

Web-Based Systems - Misbhauddin 12

Methods in Objects

Methods• A method is just like a function associated with an object• Each property has a name, followed by : and then the value of that property

objectName.functionName = function (parameter){ ……………………..};

SYNTAX

Create a method to change the major and set it to the attribute value

TRY NOW

Web-Based Systems - Misbhauddin

Methods in Objects – “this” keyword

Methods• We can make a method work for many objects using “this” keyword• Refer to whichever object called that method

student.changeMajor=function(x){ student.major=x;}

var changeMajor=function(x){ this.major=x;}

Using the object-name Using “this” keyword

student.changeMajor=changeMajor;

Note: should associate with object

Next on JavaScript• Arrays • Object Models– Using the Document Object Model (DOM)– Using the Browser Object Model (BOM)

• Forms– Validation