Javascript fundamentals
Download
1 / 84

JavaScript Fundamentals - PowerPoint PPT Presentation


  • 98 Views
  • 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha

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


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

  • 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 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

  • 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

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

    • Using SCRIPT tag:

      <script language="JavaScript">

      <!--

      JavaScript statements;

      //-->

      </script>

    • Using an external File

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

      </script>

    • Using JavaScript Expressions within HTML Tag Attribute Values

    • Using JavaScript in event handlers


Program Using Msg box and write method

Output:

Example:

<HTML>

<HEAD>

<SCRIPT LANGUAGE = "Javascript">

confirm ("Are you Sure?");

alert("OK");

document.write(" Thank You !");

</SCRIPT>

</HEAD>

</HTML>


Variables

  • 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

  • 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

Output:

<HTML>

<HEAD>

<SCRIPT LANGUAGE = "Javascript">

var A = "12" + 7.5;

document.write(A);

</SCRIPT>

</HEAD>

</HTML>


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

  • 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 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

  • 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 are typically used to combine multiple comparisons into a conditional expression.

  • It includes:


Logical Operators - Example

Output:

Code:

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

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));

</SCRIPT>

</HEAD>

</HTML>


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.

    Example:

    x = ‘yellow’;

    y = ‘green’;

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

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


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.

      eg.

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

    • Typeof operator

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

      eg.

      var x = 5;

      document.write(typeof(x));


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

  • 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

  • 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

  • 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:

    objectname.methodname(parameters)


Regular Expression - Example

Output:

Example:

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

re = /Time/

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

window.alert(str);

</SCRIPT>

</HEAD>

</HTML>


Arrays

  • 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

  • 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


Loop

  • 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


Function

  • 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


Objectives

  • Work on Core Language Objects

  • Use object Attributes and Methods


Objects

  • 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

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

    objectName.propertyName

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

    objectName.method ()


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

Browser Objects

Script Objects

HTML Elements


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 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 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

  • 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])

    where,

    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

  • 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

  • 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,

    stringName.propertyNameorstringName.methodName


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

  • 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

  • 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 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


Objectives

  • Common events in JavaScript

  • Browser Objects – Attributes and Methods


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

  • 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

  • Common events supported by JavaScript includes:

  • onClick

  • onChange

  • onFocus

  • onBlur

  • onMouseOver

  • onMouseOut

  • onLoad

  • onSubmit

  • onMouseDown

  • onMouseUp


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)">

<BR><BR><BR>

Result:

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

<BR>

</FORM>

</BODY>

</HTML>

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function compute(form)

{

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

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

else

alert("Please come back again.")

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>


onClick - Output


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.

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--- 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 -->

</SCRIPT>

</HEAD>

<BODY bgColor = white>

<FORM>

Please enter a number:

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

</FORM>

</BODY>

</HTML>


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

  • 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>

<form>

<input type=text size=60 >

</form>

<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>

</body>

</html>


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

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

Output:

<html>

<head>

<script language="JavaScript">

window.onresize= notify;

function notify()

{

alert("Window resized!");

}

</script>

</head>

<body> Please resize the window.

</body> </html>


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"

    NAME="docode"

    onClick="DoOnClick();">

  • Event Handler are categorized as:

    • Event handlers for HTML tags

      <TAG eventHandler="JavaScript Code">

    • Event Handlers as Properties

      object.eventhandler = function;


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


DOM

  • 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

  • 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

  • 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

  • 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

  • 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


Objectives

  • Work on form object and form elements

  • Handle form object events

  • Form validation


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 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');"

      onChange="writeIt('change');">


Textfield object(2)


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)


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)


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(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)


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:

<HTML>

<HEAD>

<TITLE> Form Events </TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--


Form Validation(2)

function validateFirstName()

{

var str= form1.fname.value;

if(str.length==0)

{

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

return false;

}

return true

}

function validateLastName()

{

var str= form1.lname.value;

if(str.length==0)

{

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

return false;

}

return true;

}


Form Validation(3)

function validateEmail()

{

var str= form1.email.value;

if(str.length==0)

{

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: "+form1.email.value+"<BR>")

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

disp.document.write("<PRE>")


Form Validation(4)

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

disp.close()

}

//-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<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

onBlur="validateLastName()"></p>

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

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

</TEXTAREA></p>

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

onClick="processForm()">

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

</FORM>

</BODY>

</HTML>


Form Validation(5)


Q & A


ad
  • Login