javascript fundamentals
Download
Skip this Video
Download Presentation
JavaScript Fundamentals

Loading in 2 Seconds...

play fullscreen
1 / 84

JavaScript Fundamentals - PowerPoint PPT Presentation


  • 105 Views
  • Uploaded on

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

PowerPoint Slideshow about 'JavaScript Fundamentals' - morse


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

    • Using an external File

    • 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

Output:

Example:

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

Output:

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

Output:

Code:

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.

Example:

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.

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

objectname.methodname(parameters)

regular expression example
Regular Expression - Example

Output:

Example:

arrays
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
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
slide27
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
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
objectives
Objectives
  • Work on Core Language Objects
  • Use object Attributes and Methods
objects
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
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
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])

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

stringName.propertyNameorstringName.methodName

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)

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






Result:


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.

Please enter a number:

onfocus onblur onmouseover onmouseout
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:

Aptech

Asset

Arena

onmouseout output
onMouseOut -Output
  • On moving the mouse over Aptech, the following output is displayed.
onload onsubmit onmousedown onmouseup
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.

Output:

Please resize the window.

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.

NAME="docode"

onClick="DoOnClick();">

  • Event Handler are categorized as:
    • Event handlers for HTML tags

    • 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

slide61
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
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
objectives2
Objectives
  • 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:

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:

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

command button object 1
Command Button object(1)
  • Command button understands onClick event
  • The onClick event occurs when user clicks on a command button

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

Form Events

Handling Form Events


First Name :

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

Last Name :

onBlur="validateLastName()">

Email :

Comments :

onClick="processForm()">

ad