Java script

Introduction
• Why Study JavaScript?
• JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
• JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
• ECMA-262 is the official name. ECMAScript 5 (JavaScript 1.8.5 - July 2010) is the latest
standard.

Power of Java Script
• JavaScript Can Change HTML Content
• JavaScript Can Change HTML Attributes
• JavaScript Can Change HTML Styles (CSS)
• JavaScript Can Validate Data

Where Exit: JavaScript
• JavaScript can be placed in the <body> and the <head> sections of an HTML page.
The <script> Tag
• Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
• In HTML, JavaScript code must be inserted between <script> and </script> tags.
• Older examples may use a type attribute: <script type="text/javascript“
• The type attribute is not required.
• JavaScript is the default scripting language in HTML.
• You can place any number of scripts in an HTML document.

JavaScript Functions and Events
• A JavaScript function is a block of JavaScript code, that can be executed when "asked" for.
• For example, a function can be executed when an event occurs, like when the user clicks a button.
• JavaScript in <head> JavaScript in <body>

External JavaScript
• External JavaScript
It is a good idea to place scripts at the bottom of the <body> element.
JavaScript files have the file extension .js.
Cached JavaScript files can speed up page loads.

JavaScript serves two purposes
• Client side scripting language.
• Making web pages more dynamic, interactive
• JavaScript is a browser-based scripting language developed by Netscape and implemented in all
major browsers.
• All major web browsers contain JavaScript interpreters, which process the commands written
in JavaScript.

JavaScript Output
• JavaScript Display Possibilities
• JavaScript can "display" data in different ways:
• Writing into an alert box, using window.alert().
• Writing into the HTML output using document.write().
• Writing into an HTML element, using innerHTML.
• Writing into the browser console, using console.log()
• <script>
window.alert(5 + 6);
</script>
• <script>
document.write(5 + 6);
</script>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
<!DOCTYPE html>
<html>
<body>
<h1>My First Web
Page</h1>
<p>My first
paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

JavaScript Syntax
• JavaScript is a programming language.
• JavaScript statements are separated by semicolon.
• In HTML, JavaScript programs can be executed by the web browse
• JavaScript is Case Sensitive
• JavaScript uses the Unicode character set.
• Unicode covers (almost) all the characters, punctuations, and symbols in the world.
• JavaScript Statements
• JavaScript statements are composed of: Values, Operators, Expressions, Keywords, and
Comments.
• JavaScript Values
• JavaScript syntax defines two types of values: Fixed values and variable values.
• Fixed values are called literals. Variable values are called variables.
• Number->5.2
• String-> “ hi”
• Expression-> 5+6

Java Script variable
• JavaScript Variables
• variables are used to store data values.
• uses the var keyword to define variables.
• An equal sign is used to assign values to variables.
var x;
x = 6;
var x = 5;
var y = 6;
(5 + 6) * 10
• The general rules for constructing names for variables (unique identifiers) are:
• Names can contain letters, digits, underscores, and dollar signs.
• Names must begin with a letter
• Names can also begin with $ and _ (but we will not use it in this tutorial)
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used as names

• JavaScript Keywords
var x = 5 + 6;
var y = x * 10;
• JavaScript Comments
• Code after double slashes // or between /* and */ is treated as a comment
• JavaScript White Space
• JavaScript ignores multiple spaces. You can add white space to your script to make it more
readable
var person = "Hege";
var person="Hege";
a = 5; b = 6; c = a + b; // multiple statement
• If a JavaScript statement does not fit on one line, the best place to break it, is after an operator:
document.getElementById("demo").innerHTML =
"Hello Dolly.";

Java Script function
• JavaScript
• grouped together in code blocks, inside curly brackets {...}.functions:
• define statements to be executed together
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
}
• Syntex
function myFunction(p1, p2) {
return p1 * p2; // the function returns the product of p1 and p2
}
• Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
• The code to be executed, by the function, is placed inside curly brackets: {}

Java script example
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<Script>
<button type="button“ onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">
Click Me!</button>
</script>
</body>
</html>

• Function Invocation
• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)
• Function Return
var x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
• The () Operator Invokes the Function
• Using the example above, toCelsius refers to the function object, and toCelcius() refers to the
function result.
• Accessing a function without () will return the function definition:

• function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(32);
//result will be value

JavaScript Keywords
• javaScript statements often start with a keyword to identify the JavaScript action to be performed.
Keyword Description
break Terminates a switch or a loop
continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls (if available) the debugging function
do ... while Executes a block of statements, and repeats the block, while a condition is true
for Marks a block of statements to be executed, as long as a condition is true
function Declares a function
if ... else Marks a block of statements to be executed, depending on a condition
return Exits a function
switch Marks a block of statements to be executed, depending on different cases
try ... catch Implements error handling to a block of statements
var Declares a variable

JavaScript Data Types
• Java Script variables can hold numbers like 100, and text values like "John Doe".
• Strings are written inside double or single quotes. Numbers are written without quotes.
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
var carName; //declare
carName = "Volvo"; //assign
var carName = "Volvo"; //both
• Re-Declaring JavaScript Variables
• If you re-declare a JavaScript variable, it will not lose its value.
var carName = "Volvo";
var carName;
// e create a variable called carName and assign
the value "Volvo" to it.
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML =
carName;
</script>

JavaScript Arithmetic
• you can do arithmetic with JavaScript variables, using operators like = and +
var x = 5 + 2 + 3;
var x = "John" + " " + "Doe";
var x = "5" + 2 + 3;
• If one operand is a string, JavaScript will treat all operands as strings.
• JavaScript Has Dynamic Types
var x; // Now x is undefined
var x = 5; // Now x is a Number
var x = "John"; // Now x is a String
• JavaScript has only one type of numbers.
• Numbers can be written with, or without decimals:
• JavaScript Booleans
var x = true;
var y = false;

JavaScript Arrays ,Object
• Arrays
• JavaScript arrays are written with square brackets.
• Array items are separated by commas.
var cars = ["Saab", "Volvo", "BMW"];
• Objects
• JavaScript objects are written with curly braces.
• Object properties are written as name:value pairs, separated by commas.
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Taking Input In java Script
• Taking Input in alert Box
var num = window.prompt("Enter the number:","");
var n = parseInt(num);
• By HTML tag
<input type="text" id="nn"=> give me input</input>
var n = document.getElementById("nn").value;
document.getElementById("res").innerHTML = result; //optional

JavaScript Objects
• Objects
• JavaScript objects are written with curly braces.
• Real Life Objects, Properties, and Methods
• Object properties are written as name:value pairs, separated by commas.

• Objects are variables too. But objects can contain many values.
• The values are written as name:value pairs (name and value separated by a colon).
• The name:values pairs (in JavaScript objects) are called properties
• ou define (and create) a JavaScript object with an object literal:
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};

• Accessing Object Properties
• objectName.propertyName
• objectName[propertyName]
person.lastName;
person["lastName"];
• Accessing Object Methods
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function(c) {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

JavaScript Scope
• variables declared within a JavaScript function, become LOCAL to the function
• A variable declared outside a function, becomes GLOBAL.
• If you assign a value to a variable that has not been declared, it will automatically become
a GLOBAL variable.
• Lifetime:
• The lifetime of a JavaScript variable starts when it is declared.
• Local variables are deleted when the function is completed.
• Global variables are deleted when you close the page.

JavaScript Events
• HTML events are "things" that happen to HTML elements.
• When JavaScript is used in HTML pages, JavaScript can "react" on these events.
• HTML event can be something the browser does, or something a user does.
• Here are some examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked
• JavaScript lets you execute code when events are detected.
• HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.
<some-HTML-element some-event="some JavaScript">
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
<button onclick="this.innerHTML=Date()">The time is?</button>
// an onclick attribute (with code), is added to a button element

• Common HTML Events
• Event handlers can be used to handle, and verify, user input, user actions, and browser actions
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML
element
onmouseout The user moves the mouse away from an
HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

JavaScript Arrays
• JavaScript arrays are used to store multiple values in a single variable.
• Create an array, and assign val
var cars = ["Saab", "Volvo", "BMW"];
var cars = [
"Saab",
"Volvo",
"BMW"
];
var cars = new Array("Saab", "Volvo", "BMW");
• Array Properties and Methods
• The real strength of JavaScript arrays are the built-in array properties and methods
var x = cars.length; // The length property returns the number of elements in cars
var y = cars.sort(); // The sort() method sort cars in alphabetical order

• Adding Array Elements
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits
• Looping Array Elements
var index;
for (index = 0; index < fruits.length; index++) {
text += fruits[index];
}

The Difference Between Arrays and Objects?
• In JavaScript, arrays use numbered indexes.
• In JavaScript, objects use named indexes.
• Arrays are a special kind of objects, with numbered indexes.
• JavaScript Array Methods
• valueOf() method is the default behavior for an array. It returns an array as a string
• JavaScript arrays, valueOf() and toString() are equal
• pop() method removes the last element from an array
• push() method adds a new element to an array (at the end)
• shift() method removes the first element of an array, and "shifts" all other elements one place
down.
• unshift() method adds a new element to an array (at the beginning), and "unshifts" older
elements:
• elements can be deleted by using the JavaScript operator delete
• sort() method sorts an array alphabetically
• reverse() method reverses the elements in an array.

document.getElementById("demo").innerHTML = fruits.valueOf();
fruits.pop(); // Removes the last element ("Mango") from fruits
fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits
fruits.shift(); // Removes the first element "Banana" from fruits
fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits
delete fruits[0]; // Changes the first element in fruits to undefined
fruits.sort();
fruits.reverse(); // Reverses the order of the elements

JavaScript If...Else Statements
• In JavaScript we have the following conditional statements:
• Use if to specify a block of code to be executed, if a specified condition is true
• Use else to specify a block of code to be executed, if the same condition is false
• Use else if to specify a new condition to test, if the first condition is false
• Use switch to specify many alternative blocks of code to be executed
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

JavaScript Switch Statement
• The switch statement is used to perform different action based on different conditions.
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
default code block
}
switch (new Date().getDay()) {
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}

JavaScript For Loop
• JavaScript supports different kinds of loops:
• for - loops through a block of code a number of times
• for/in - loops through the properties of an object
• while - loops through a block of code while a specified condition is true
• do/while - also loops through a block of code while a specified condition is true
for (statement 1; statement 2; statement
3) {
code block to be executed
}
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
The For/In Loop
The JavaScript for/in statement loops through the
properties of an object:
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
}

• The While Loop
while (condition) {
}
while (i < 10) {
text += "The number is " + i;
i++;
}
The Do/While Loop
do {
}
while (condition);
do {
text += "The number is " + i;
i++;
}
while (i < 10);

JavaScript Break and Continue
• he break statement "jumps out" of a loop.
• The continue statement "jumps over" one iteration in the loop.

HTML DOM (Document Object Model)
• With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
• When a web page is loaded, the browser creates a Document Object Model of the page.
• The DOM is a W3C (World Wide Web Consortium) standard.
• The DOM defines a standard for accessing documents:
• The HTML DOM model is constructed as a tree of Objects:

• With the object model, JavaScript gets all the power it needs to create dynamic HTML:
• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page
• In Short HTML DOM is
• The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

• The W3C DOM standard is separated into 3 different parts:
• Core DOM - standard model for all document types
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents
• HTML DOM is a standard object model and programming interface for HTML.
• It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
"The W3C Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update the
content, structure, and style of a document."

HTML DOM Methods
• HTML DOM methods are actions you can perform (on HTML Elements)
• HTML DOM properties are values (of HTML Elements) that you can set or change
• The HTML DOM can be accessed with JavaScript (and with other programming languages).
• In the DOM, all HTML elements are defined as objects.
• The programming interface is the properties and methods of each object.
• A property is a value that you can get or set (like changing the content of an HTML element).
• A method is an action you can do (like add or deleting an HTML element).

• he example above, getElementById is a method, while innerHTML is a property.
• get the content of an element is by using the innerHTML property.
• The innerHTML property can be used to get or change any HTML element, including <html> and
<body>.
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

• Finding HTML Elements
• Changing HTML Elements
Method Description
document.getElementById() Find an element by element id
document.getElementsByTagName() Find elements by tag name
document.getElementsByClassName() Find elements by class name
Method Description
element.innerHTML= Change the inner HTML of an element
element.attribute= Change the attribute of an HTML element
element.setAttribute(attribute,value) Change the attribute of an HTML element
element.style.property= Change the style of an HTML element

Form Validation Using Java Script
• Form validation is done to check the accuracy of the user’s entered information before they could
submit the form.
• What validation checks in the form?
• Check for Empty Field: Has the user left required field empty. If it’s there, returns alert
message.
• Check for Numbers: User entered number in the text field where number is required, say in
a Contact field.
• Check for Alphabets: Has the user entered characters in alphabets, say in name field.
• Check for Numbers and Letters: If a text input is all alphanumeric characters (numbers and
letters), say in a message field
• Check for Characters: Has the user entered correct number of characters. (Useful when
restricting the length of a username and/or password)
• Select for Drop Down List Item: If a selection has been made from HTML select input (the
drop down selector)
• Email Validation: has the user entered valid email address.

Regular Expression
• A regular expression is an object that describes a pattern of characters.
• Regular expressions are used to perform pattern-matching and "search-and-replace" functions on
text.
• A regular expression is a sequence of characters that forms a search pattern.
• When you search for data in a text, you can use this search pattern to describe what you are
searching for.
• A regular expression can be a single character, or a more complicated pattern.
• Regular expressions can be used to perform all types of text search and text replace operations.

Data Validation
• Data validation is the process of ensuring that computer input is clean, correct, and useful.
• Typical validation tasks are:
• has the user filled in all required fields?
• has the user entered a valid date?
• has the user entered text in a numeric field?
• Most often, the purpose of data validation is to ensure correct input to a computer application.
• Validation can be defined by many different methods, and deployed in many different ways.
• Server side validation is performed by a web server, after input has been sent to the server.
• Client side validation is performed by a web browser, before input is sent to a web server.
• Basic Validation - First of all, the form must be checked to make sure data was entered into each
form field that required it. This would need just loop through each field in the form and check for
data.
• Data Format Validation - Secondly, the data that is entered must be checked for correct form and
value. This would need to put more logic to test correctness of data.

Syntax
/pattern/modifiers;
Example:
var patt = /w3schools/i
• /w3schools/i is a regular expression.
• w3schools is a pattern (to be used in a search).
• i is a modifier (modifies the search to be case-insensitive).
Using String Methods
In JavaScript, regular expressions are often used with the two string methods: search() and replace().
• The search() method uses an expression to search for a match, and returns the position of the
match.
• The replace() method returns a modified string where the pattern is replaced.

Brackets are used to find a range of characters:
Expression Description
[abc] Find any character between the brackets
[^abc] Find any character NOT between the brackets
[0-9] Find any digit between the brackets
[^0-9] Find any digit NOT between the brackets
(x|y) Find any of the alternatives specified

Quantifiers
Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
n{X} Matches any string that contains a sequence of X n's
n{X,Y} Matches any string that contains a sequence of X to Y n's
n{X,} Matches any string that contains a sequence of at least X n's
n$ Matches any string with n at the end of it
^n Matches any string with n at the beginning of it
?=n Matches any string that is followed by a specific string n
?!n Matches any string that is not followed by a specific string n

Regular Expression Object Methods
Method Description
compile() Deprecated in version 1.5. Compiles a regular expression
exec() Tests for a match in a string. Returns the first match
test() Tests for a match in a string. Returns true or false
toString() Returns the string value of the regular expression

JavaScript Errors - Throw and Try to Catch
• The try statement lets you test a block of code for errors.
• The catch statement lets you handle the error.
• The throw statement lets you create custom errors.
• The finally statement lets you execute code, after try and catch, regardless of the result.
Errors Will Happen DUE TO
• When executing JavaScript code, different errors can occur.
• Errors can be coding errors made by the programmer, errors due to wrong input, and other
unforeseeable things:

JavaScript try and catch
• The try statement allows you to define a block of code to be tested for errors while it is being
executed.
• The catch statement allows you to define a block of code to be executed, if an error occurs in the
try block.
• The JavaScript statements try and catch come in pairs:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
• JavaScript Throws Errors
• When an error occurs, JavaScript will normally stop, and generate an error message.
• The technical term for this is: JavaScript will throw an error.

The finally Statement
• The finally statement lets you execute code, after try and catch, regardless of the result:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}

• The throw Statement
• The throw statement allows you to create a custom error.
• The technical term for this is: throw an exception.
• The exception can be a JavaScript String, a Number, a Boolean or an Object:
throw "Too big"; // throw a text
throw 500; // throw a number

IMPUT VALIDATION EXAMPLE
• <body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">
Test Input</button>
<p id="message"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
x = Number(x);
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
if(x > 10) throw "too high";
if(x < 5) throw "too low";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
</body>

JavaScript Forms Validation
• HTML form validation can be done by a JavaScript.
• If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the
form from being submitted:
• JavaScript Example
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
// var x = document.myForm.fname.value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
• HTML Form Example
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Example …
<script >
function validate()
{
if( document.myForm.EMail.value == "" )
{ alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{ alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
return( true );
}
</script>
<form action="/cgi-bin/test.cgi" name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>

Java script

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Java script (20)

More from Jay Patel (17)

Recently uploaded (20)

Java script