Javascript fundamentals
This presentation is the property of its rightful owner.
Sponsored Links
1 / 84

JavaScript Fundamentals PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

JavaScript Fundamentals. Agenda. The Foundation of JavaScript Syntax The Core language Objects in JavaScript The Browser Objects in JavaScript Handling Form and Form Element Events. What is JavaScript.

Download Presentation

JavaScript Fundamentals

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Javascript fundamentals

JavaScript Fundamentals



  • The Foundation of JavaScript Syntax

  • The Core language Objects in JavaScript

  • The Browser Objects in JavaScript

  • Handling Form and Form Element Events

What is javascript

What is JavaScript

  • It is a scripting language that can be used to create client-side scripts and server-side scripts.

  • JavaScript makes it easier to create dynamic and interactive Web pages.

  • JavaScript is a scripting language developed by Sun Microsystems and Netscape.

  • JavaScript developed from Netscapes’s Livescript.

  • Client applications run in a browser such as Netscape Navigator or Internet Explorer.

Javascript effects and rules

JavaScript effects and rules

  • JavaScript can enhance the dynamics and interactivity of the site by using its effects.

    • Provide User Interaction

    • Dynamically Change Content

    • Validate data

  • Similar to any other language, JavaScript also follows some basic grammar rules like:

    • Using Caps

    • Using Pairs

    • Using Spaces

    • Using Comments

Javascript tools and run time environment

JavaScript Tools and Run- Time Environment

  • The JavaScript code-generating tools and IDE helps in creating useful JavaScript code. A few of these include:

    • Dialog Box

    • Pop – up Menu Builder

    • Remotes

  • Run Time Environment

    • Client Side Scripting

    • Java Script on Web Server

Embedding javascript in web page

Embedding JavaScript in Web Page

  • The JavaScript can be inserted into an HTML document in the following ways :

    • Using SCRIPT tag:

      <script language="JavaScript">


      JavaScript statements;



    • Using an external File

      <script language="JavaScript" src="filename.js">


    • Using JavaScript Expressions within HTML Tag Attribute Values

    • Using JavaScript in event handlers

Program using msg box and write method

Program Using Msg box and write method





<SCRIPT LANGUAGE = "Javascript">

confirm ("Are you Sure?");


document.write(" Thank You !");






  • A variable is a container that refers to a memory location.

  • It is used to hold values that may change while the script is executing.

  • Variables follow some naming conventions.

  • A variable is declared using the keyword ‘var’.

    eg. var A = 10;

  • Variables have a scope that is determined by where they are declared in the script.

    • Global Variable

    • Local Variable

  • Literals are fixed values that can be used in the script.

Data types

Data Types

  • JavaScript has a relatively small set of data types.

    • Numbers

    • Logical or Boolean

    • Strings

    • Null

  • JavaScript is case-sensitive.

  • In JavaScript, two variables of different types can be combined.

    example:A = “ This apple costs Rs.” + 5

    will result in a string with the value "This apple costs Rs. 5".

Data type example

Data Type - Example




<SCRIPT LANGUAGE = "Javascript">

var A = "12" + 7.5;





Literal types

Literal - Types

  • Integer – These can be expressed in decimal, hexadecimal and binary number system.

  • Floating- point - These number can have a decimal point or an “e” or “”E” followed by an integer.

  • String - A string literal is zero or more characters enclosed in single or double quotation marks.

  • Boolean - This can take only two values: True or False.

  • null - The null type has only one value: null. Null implies no data.



  • Operators take one or more variables or values (operands) and return a new value.

  • JavaScript uses both binary and unary operators.

  • Operators are classified depending on the relation they perform like:

    • Arithmetic Operator

    • Comparison Operator

    • Logical Operator

    • String Operator

    • Evaluation Operator

    • Operator Precedence

Arithmetic operator

Arithmetic Operator

  • Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.

  • Arithmetic Operators include:

    • Addition (+)

    • Subtraction (-)

    • Division (/)

    • Modulus (%)

    • Unary increment (++)

    • Unary decrement (- -)

    • Unary negation (-)

Comparison operator

Comparison Operator

  • A comparison operator compares its operands and returns a logical value based on whether the comparison is true or not.

  • Comparison Operators include:

    • Equal to (==)

    • Not Equal to (!+)

    • Greater than (>)

    • Greater than or equal to (>=)

    • Less than (<)

    • Less than or equal to (<=)

Logical operators

Logical Operators

  • Logical operators are typically used to combine multiple comparisons into a conditional expression.

  • It includes:

Logical operators example

Logical Operators - Example






var x = 10;

var y = 5;

alert ("The value of x is "

+ x + "The value of y is " + y);

alert("x AND y = " + (x && y));

alert("x OR y = " + (x || y));

alert("NOT x = " + (!x));




String operator

String Operator

  • The string operator takes two string operators as operands and creates a new string, which is same, as the two original strings run together.


    x = ‘yellow’;

    y = ‘green’;

    z = x + y + ‘white’; which means z is “yellowgreenwhite”

    w = y + 9, which means w is “green9”

Evaluation operator

Evaluation Operator

  • These operators generally includes:

    • Conditional operator

      (condition) ? trueVal : falseVal

      Assigns a specified value to a variable if a condition is true, otherwise assigns an alternate value if condition is false.


      status = (age >= 18) ? "adult" : "minor"

    • Typeof operator

      The typeof operator returns a string indicating the type of the operand.


      var x = 5;


Operator precedence

Operator Precedence

  • When there are several operators to be evaluated in an expression, the precedence of the operator determines the sequence in which the operators are evaluated.

  • The following table lists the precedence of operators, from lowest to highest:



  • Expressions are used to manipulate and evaluate variables in different contexts.

  • An expression is any valid set of literals, variables, and operators which evaluates to a single value.

  • Expression types available in JavaScript includes:

    • Arithmetic: evaluates to a number

    • Logical: evaluates to a boolean value

    • String: evaluates to a string

  • Expressions combine variables and literals together via operators.

Regular expression

Regular Expression

  • A regular expression is defined pattern that can be used to match the character combinations of a string.

  • Regular expressions can be used to search for character patters in a string input by the user.

  • Regular expression can include:

    • Simple patterns

    • Combination of simple and special characters

  • Regular expressions can be created in one of two ways:

    • Using an object initializer

    • Calling the constructor function of the RegExp object

Using regular expression

Using Regular Expression

  • The methods that can be used with Regular Expression includes:

    • Exec, Test, Match, Search, Replace, Split

  • The syntax to use a method:

    objectname.method = function_name

  • The syntax for calling the method in the context of the object is:


Regular expression example

Regular Expression - Example






re = /Time/

str = re.test ("Time and Tide wait for none");







  • Arrays are used to store a series of variables with the same name.

  • A number (an index) is used to differentiate each value.

  • Arrays start with index zero in JavaScript.

  • Creating arrays: Syntax

    arrayObjectName = new Array([element0, element1, ..., elementN])

  • Adding elements: We can add elements to an array when we create it. Eg. emp[0] = "Ryan Dias"

  • The elements of an array can be accessed by using Name or Index number of element.

Arrays 1


  • Methods of the array object can be used to manipulate the array.

  • The methods of Array object include:

    • join

    • pop

    • push

    • reverse

    • shift

    • sort

  • JavaScript support mutli-dimensional array.

Conditional statements

Conditional Statements

  • A conditional statement is used to test a condition. The result determines the statement or block of statements to be executed.

  • The various conditional statements include:

    • If….. Else

    • Switch

Javascript fundamentals


  • Structures that control repetition in a program are known as loops.

  • The various types of loops include:

    • For

    • Do …. While

    • While

    • Break & continue

    • For….in

    • with



  • JavaScript has several pre-defined functions that we can use within the script.

  • Some of pre-defined JavaScript functions includes:

    • eval function

    • isNaN funtion

  • Creating User Defined Functions

    function funcName(argument1,argument2,etc)

    { statements; }

  • Calling a Function

  • Return Statement

The core language objects in javascript

The Core language Objects in JavaScript



  • Work on Core Language Objects

  • Use object Attributes and Methods



  • The properties (variables) that define the object and the methods (functions) that work on the data are included in the object

  • For example, a car is an object. The properties of the car are its make, model, and color. They have some common methods like, go (), brake(), reverse().

Properties and methods

Properties and Methods

  • To access the properties of the object, we must specify the object name and the property:


  • To access the methods of an object, we must specify the object name and the required method:

    objectName.method ()

Using objects

Using objects

  • When creating a Web page we can insert:

    • Browser objects

    • Built in script language objects (vary depending on the scripting language used)

    • HTML elements

  • We can also create our own objects for use in the programs.

Object hierarchy

Object Hierarchy

Browser Objects

Script Objects

HTML Elements

The this statement

The this statement

  • The this statement is more of an internal property.

  • Its value indicates the current object. It can have standard properties such as name, length and value applied accordingly.

The for in statement

The for . . . in statement

  • The for . . in statement is used to cycle through each property of an object or each element of an array.

  • The syntax is:

    for (variable in object)

    { statements; } 

The with statement

The with statement

  • The with statement is used to execute a set of statements that have a specified object as the reference.

  • The property is assigned to the object specified in the with statement.

  •  The syntax is:

    with (object) { statements; }

New operator

New Operator

  • The new operator is used to create a new instance of an object type

  • The object type may be user-define or built-in

  • objectName = new objectType (param1 [,param2] ...[,paramN])


    objectName is the name of the new object instance.

    ObjectType is a function that defined the type of the object. For example, Array.

    Param[1, 2, . . ] are the property values of the object.

Eval function

Eval function

  • The eval function is used to evaluate a string of code without reference to any specific object.

  • The string can be a JavaScript expression, statement, or a group of statements

  • The expression can include variables and properties of an object.

    var x = 5;

    var z = 10;

    document.write(eval(“x + z + 5”));

String object

String object

  • The string object is used to manipulate and work with strings of text.

  • We can extract substrings and convert text to upper- or lowercase characters in a program.

  • The general syntax is,


Creating string object

Creating String object

  • There are 3 different methods of creating strings.

    • Using the var statement and optionally assigning it to a value.

    • Using an assignment operator (=) with a variable name.

    • Using the string () constructor.

Math object

Math Object

  • The Math object has properties and methods that represent advanced mathematical calculations.

    function doCalc(x) {

    var a;

     a = Math.PI * x * x;

     alert ("The area of a circle with a radius of " + x + “ is " + a);


Date object

Date object

  • The Date built-in object contains both date and time information.

  • The Date object does not have any properties.

  • It has a large number of methods for setting, getting, and manipulating dates.

Date object1

Date object

  • The Date object stores dates as the number of milliseconds since January 1, 1970, 00:00:00.

    DateObject = new Date(parameters)

The browser objects in javascript

The Browser Objects in JavaScript



  • Common events in JavaScript

  • Browser Objects – Attributes and Methods

Event object concept

Event Object - Concept

  • Events are a result of an action done by the user

  • An event may be user-generated or generated by the system

  • Each event has an associated event object. The event object provides information on:

    • the type of event

    • the location of the cursor at the time of the event

  • The event object is used as a part of an event handler

Event life cycle

Event – Life Cycle

  • The life cycle of an event generally consist of following steps:

    • The user action or condition associated with the event occurs

    • The event object is instantly updated to reflect the conditions of the event

    • The event fires

    • The associated event handler is called

    • The event handler carries out its actions and returns

Javascript event

JavaScript Event

  • Common events supported by JavaScript includes:

  • onClick

  • onChange

  • onFocus

  • onBlur

  • onMouseOver

  • onMouseOut

  • onLoad

  • onSubmit

  • onMouseDown

  • onMouseUp

Onclick example

onClick - Example

  • The onClick event is generated whenever the user clicks the mouse button on certain form elements or on a hypertext link.

Enter an expression:

<INPUT TYPE="text" NAME="expr" SIZE=15 ><BR><BR>

<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">



<INPUT TYPE="text" NAME="result" SIZE=15 >








function compute(form)


if (confirm("Are you sure?"))

form.result.value = eval(form.expr.value)


alert("Please come back again.")






Onclick output

onClick - Output

Onchange example

onChange - Example

  • The onChange event occurs whenever a form element changes. This can happen whenever the contents of a text control changes, or when a selection in a selection list changes.




<!--- hide script from old browsers

function checkNum(num)


if (num == "")


alert("Please enter a number");

return false;


if (isNaN (num))


alert("Please enter a numeric value");

return false;


else alert ("Thank you");


// end hiding from old browsers -->



<BODY bgColor = white>


Please enter a number:

<INPUT type = text size = 5 onChange="checkNum(this.value)">




Onchange output

onChange - Output

Onfocus onblur onmouseover onmouseout


  • onFocus

    • The onFocus event is sent whenever a form element becomes the current form element. Only when an element has the focus can it accept input from the user.

  • onBlur

    • Blur is the opposite of focus. When the user leaves a form element, the onBlur event is activated.

  • onMouseOver

    • The onMouseOver event is generated whenever the mouse cursor is moved over an element.

  • onMouseOut

    • The onMouseOut event is generated whenever the mouse cursor moves off of an element.

Onmouseout example

onMouseOut -Example

  • Example:

    <html> <head>

    <script language = "javascript">

    var num =0

    function showLink(num)

    { if (num==1)


    document.forms[0].elements[0].value= "You have selected Aptech";


    if (num==2)

    { document.forms[0].elements[0].value = "You have selected Asset";


    if (num==3)


    document.forms[0].elements[0].value = "You have selected Arena";

    } } </script>

</head> <body>


<input type=text size=60 >


<a href="#" onMouseOver="showLink(1)"document.bgcolor= “ green">Aptech</a><br>

<a href="#" onMouseOver="showLink(2)">Asset</a><br>

<a href="#" onMouseOver="showLink(3)">Arena</a><br>



Onmouseout output

onMouseOut -Output

  • On moving the mouse over Aptech, the following output is displayed.

Onload onsubmit onmousedown onmouseup


  • OnLoad

    • The onLoad event is sent to the document body object when the document has finished loading.

  • onSubmit

    • The onSubmit event is generated whenever the user submits a form (using the "Submit" button). The event occurs before the form is actually submitted.

  • onMouseDown

    • The event is activated when a MouseDown event occurs. That is, when the user depresses a mouse button.

  • onMouseUp

    • The event is activated when a MouseUp event occurs. That is, when the user releases a mouse button.

Onresize example

onResize - Example

  • onResize

    • This event is activated when a resize event occurs. That is, when a user or script resizes a window or frame.




<script language="JavaScript">

window.onresize= notify;

function notify()


alert("Window resized!");




<body> Please resize the window.

</body> </html>

Handling the events

Handling the Events

  • This segment of JavaScript code that will be executed in response to the event is called an event handler.

    <INPUT TYPE="button"



  • Event Handler are categorized as:

    • Event handlers for HTML tags

      <TAG eventHandler="JavaScript Code">

    • Event Handlers as Properties

      object.eventhandler = function;

Browser objects

Browser Objects

  • A browser is an application that is used to display the contents of an HTML document

  • Browsers also expose some objects that can be accessed and used in script

IE Browser Objects

Netscape Browser Objects

Javascript fundamentals


  • One important feature of JavaScript is that it is Object based language.

  • Helps the user to develop program, which are modular and reusable.

  • An object can be defined as a single entity, consisting of Properties and Methods.

  • A property is a value that belongs to an object.

    Eg: Document.bgcolor

Window object

Window Object

  • It represents the browser’s window and can be used to retrieve information about the state of the window

  • Properties:

  • document

  • event

  • history

  • location

  • name

  • navigator

  • screen

  • Methods:

  • alert

  • blur

  • close

  • focus

  • navigate

  • open

Document object

Document Object

  • It represents the HTML document in a given browser window and is used to retrieve information about the document

  • Properties:

  • alinkColor

  • bgColor

  • Body

  • fgColor

  • linkColor

  • location

  • Title

  • URL

  • vlinkColor

  • Methods:

  • clear

  • close

  • open

  • write

  • writeln

History object

History Object

  • This object provides a list of the URL's most recently visited by the client

  • Example, history's "back()" method cause the window to again display the immediately previous document: history.back();

  • Methods:

  • back

  • forward

  • go

Location object

Location Object

  • This object maintains information about the current URL. It provides a method that causes the window's current URL to be reloaded.

  • Properties:

  • hash

  • host

  • hostname

  • href

  • Methods:

  • assign

  • reload

  • replace

Handling form and form element events

Handling Form and Form Element Events



  • Work on form object and form elements

  • Handle form object events

  • Form validation

Form object

Form Object

  • Form object consist of three attributes:

    • Accept

    • Action

    • Method

  • For Example:

    <Form ACTION="Simple.htm“ Accept=“TEXT/HTML” Method=“POST”>

Textfield object 1

Textfield Object (1)

  • Textfield understands onBlur, onFocus, and onChange events

    • The onFocus event occurs when user clicks inside a text field.

    • onBlur happens when user moves out of a text field by clicking outside of it, or hitting "tab."

    • onChange happens when user changes what's in the text field and then moves outside the text field

      For Example:

      <input type="text" name="first_text" onFocus="writeIt('focus');" onBlur="writeIt('blur');"


Textfield object 2

Textfield object(2)

Command button object 1

Command Button object(1)

  • Command button understands onClick event

  • The onClick event occurs when user clicks on a command button

    <INPUT TYPE="button" value="Copy" onClick="writeIt(myfm.first_text.value);">

Command button object 2

Command Button object(2)

Checkbox object 1

Checkbox Object (1)

  • A Checkbox is an HTML form object that behaves as a toggle switch

  • Checkbox can have either checked or unchecked

  • Like button checkbox also understands onClick event

Checkbox object 2

Checkbox Object(2)

Option button radio button object 1

Option Button/Radio Button object(1)

  • Radio buttons are almost exactly like checkboxes with respect to JavaScript

  • Radio buttons are different. Once a radio button is on, it stays on until another one is selected. Then the first one goes off.

  • Option or radio button also understands onClick event.

Option button radio button object 11

Option Button/Radio Button object(1)

Combobox select object 1

ComboBox/Select object(1)

  • A ComboBox object on an HTML form appears as drop-down list or a scrollable list of selectable items

  • To conserve form space, the scrollable list of selectable items is used

  • ComboBox supports onBlur, onFocus, and onChange events

Combobox select object 2

ComboBox/Select object(2)

Form validation 1

Form Validation(1)

  • Validate each and every important field by ensuring that none of the fields are empty.

  • Also the fields should not contain any invalid information.

  • Consider an example:



<TITLE> Form Events </TITLE>



Form validation 2

Form Validation(2)

function validateFirstName()


var str= form1.fname.value;



alert(" The first name cannot be empty");

return false;


return true


function validateLastName()


var str= form1.lname.value;



alert(" The last name cannot be empty");

return false;


return true;


Form validation 3

Form Validation(3)

function validateEmail()


var str=;



alert(" The Email field cannot be empty");

return false;



function processForm()


disp=open("", "result")

disp.document.write("<TITLE> Result Page </TITLE>"+"<PRE>")

disp.document.write("<H2 ALIGN='CENTER'>"+

"Thanks for signing in"+"</H2>"+"<HR>"+"<BR><BR>")

disp.document.write("First name \t\t: "+form1.fname.value+"<BR>")

disp.document.write("Last name \t\t: "+form1.lname.value+"<BR>")

disp.document.write("Email \t\t\t: ""<BR>")

disp.document.write("Your Comments \t\t: "+form1.comment.value+"<BR>")


Form validation 4

Form Validation(4)

if(disp.confirm("Is this information correct"))







<H2 ALIGN="CENTER"> Handling Form Events</H2><HR>

<FORM name="form1"><P> First Name : <INPUT TYPE="text"

NAME="fname" size=10 onBlur="validateFirstName()">

Last Name : <INPUT TYPE="text" NAME="lname" size=15


<P> Email : <INPUT TYPE="text" NAME="email" size=10 onBlur="validateEmail()">

Comments : <TEXTAREA NAME="comment" rows=4 cols=30 > Enter your comments


<P ALIGN="CENTER"><INPUT TYPE="button" value="Submit this form"


<INPUT TYPE="reset"></P>




Form validation 5

Form Validation(5)

Javascript fundamentals

Q & A

  • Login