Scribd
Upload
17 views

Javascript 161204063332

Uploaded by

Mweene Mweemba
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Javascript 161204063332

Uploaded by

Mweene Mweemba
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 161

JAVA SCRIPT

INTRODUCTION OF JAVA SCRIPT


 A scripting language is a lightweight programming
language.

 JavaScript is programming code that can be


inserted into HTML pages.

 JavaScript inserted into HTML pages, can be


executed by all modern web browsers.

 JavaScript is easy to learn.


HISTORY
 JavaScript was invented by Brendan Eich. It
appeared in Netscape (a no longer existing
browser) in 1995, and has been adopted by ECMA
(a standard association) since 1997.
SCRIPT TAG
 Scripts in HTML must be inserted between <script> and
</script> tags.
 Scripts can be put in the <body> and in the <head>
section of an HTML page.
The <script> Tag
 To insert a JavaScript into an HTML page, use the
<script> tag.
 The <script> and </script> tells where the JavaScript
starts and ends.
 The lines between the <script> and </script> contain the
JavaScript:
DEMO
 <script>
alert("My First JavaScript");
</script>
EVENT
 we want to execute code when an event occurs,
like when the user clicks a button.
FUNCTIONS
 if we put JavaScript code inside a function, we can
call that function when an event occurs.
JAVASCRIPT IN <HEAD> OR <BODY>
 You can place an unlimited number of scripts in an
HTML document.

 Scripts can be in the <body> or in the <head>


section of HTML, and/or in both.

 It is a common practice to put functions in the


<head> section, or at the bottom of the page. This
way they are all in one place and do not interfere
with page content.
EXTERNAL JAVASCRIPTS
 Scripts can also be placed in external files. External
files often contain code to be used by several
different web pages.

 External JavaScript files have the file extension .js.

 To use an external script, point to the .js file in the


"src" attribute of the <script> tag:
MANIPULATING HTML ELEMENTS
 To access an HTML element from JavaScript, you
can use the document.getElementById(id) method.

 Use the "id" attribute to identify the HTML element:


EXAMPLE
 <body>

<h1>My First Web Page</h1>


<p id="demo">My First Paragraph</p>

 <script>
document.getElementById("demo")
 .innerHTML="My First JavaScript";

</script>
WRITING TO THE DOCUMENT OUTPUT
 <h1>My First Web Page</h1>

<script>
document.write("<p>My First JavaScript
 </p>");
</script>
JAVASCRIPT STATEMENTS
 JavaScript statements are "commands" to the
browser. The purpose of the statements is to tell the
browser what to do.

 This JavaScript statement tells the browser to write


"Hello Dolly" inside an HTML element with
id="demo":

 document.getElementById("demo").innerHTML="H
ello Word";
SEMICOLON ;
 Semicolon separates JavaScript statements.

 Normally you add a semicolon at the end of each


executable statement.

 Using semicolons also makes it possible to write


many statements on one line.
JAVASCRIPT CODE
 JavaScript code (or just JavaScript) is a sequence
of JavaScript statements.

 Each statement is executed by the browser in the


sequence they are written.

 This example will manipulate two HTML elements:


JAVASCRIPT CODE BLOCKS
 JavaScript statements can be grouped together in
blocks.
 Blocks start with a left curly bracket, and end with a
right curly bracket.
 The purpose of a block is to make the sequence of
statements execute together.
 A good example of statements grouped together in
blocks, are JavaScript functions.
 This example will run a function that will manipulate
two HTML elements
JAVASCRIPT IS CASE SENSITIVE
 JavaScript is case sensitive.

 Watch your capitalization closely when you write


JavaScript statements:

 A function getElementById is not the same as


getElementbyID.

 A variable named myVariable is not the same as


MyVariable.
WHITE SPACE
 JavaScript ignores extra spaces. You can add white
space to your script to make it more readabl

 var name="Hege";
var name = "Hege“;
BREAK UP A CODE LINE
 document.write("Hello \
World!");
JAVASCRIPT COMMENTS
 // Write to a heading:
document.getElementById("myH1").innerHTML="W
elcome to my Homepage";

 /*
The code below will write
to a heading and to a paragraph,
and will represent the start of
my homepage:
*/
COMMENT CONT…
 var x=5; // declare x and assign 5 to it
var y=x+2; // declare y and assign x+2 to it
JAVASCRIPT VARIABLES
 Variable names must begin with a letter

 Variable names can also begin with $ and _ (but we


will not use it)

 Variable names are case sensitive (y and Y are


different variables)
JAVASCRIPT DATA TYPES
 JavaScript variables can also hold other types of data,
like text values (name="John Doe").
 In JavaScript a text like "John Doe" is called a string.

 There are many types of JavaScript variables, but for


now, just think of numbers and strings.
 When you assign a text value to a variable, put double or
single quotes around the value.
 When you assign a numeric value to a variable, do not
put quotes around the value. If you put quotes around a
numeric value, it will be treated as text.
DATA TYPE EXAMPLES
 var pi=3.14;
var name="John Doe";
var answer='Yes I am!';
DECLARING JAVASCRIPT VARIABLES
 You declare JavaScript variables with the var
keyword

 var carname;

 carname = “Volvo”;

 var carname = “volvo”;


JAVASCRIPT IS LOOSELY TYPED
 JavaScript is weakly typed. This means that the
same variable can be used as different types:

 Example
 var x // Now x is undefined
var x = 5; // Now x is a Number
var x = "John"; // Now x is a String
JAVASCRIPT ARRAYS
 var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
JAVASCRIPT OBJECTS
 var person={ firstname:"John",
 lastname:“Dolly", id:5566 };

 You can address the object properties in two ways:

 name=person.lastname;
name=person["lastname"];
DECLARING VARIABLE TYPES
 When you declare a new variable, you can declare
its type using the "new" keyword:

 var carname = new String;


var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object; a
JAVA SCRIPT OBJECT
 "Everything" in JavaScript is an Object: a String, a
Number, an Array, a Date....

 In JavaScript, an object is data, with properties and


methods.
PROPERTIES AND METHODS
 Properties are values associated with an object.

 Methods are actions that can be performed on


objects.
A REAL LIFE OBJECT. A CAR:
FUNCTION IN JAVA SCRIPT
 General Syntax

 function function_name([list of parameters])


{
some code to be executed
}
NO PARAMETER NO RETURN VALUE
 <script>
function myFunction()
{
alert("Hello World!");
}
</script>
NO PARAMETER WITH RETURN VALUE
<script>
function pi()
{
return 3.14
}
</script>
WITH PARAMETER NO RETURN
 <script>
function myFunction(val1,val2)
{
alert(“sum of two value is “ + (val1+val2));
}
</script>
WITH PARAMETER WITH RETURN
 <script>
function myFunction(val1,val2)
{
return (val1+val2);
}
</script>
LOCAL JAVASCRIPT VARIABLES
 A variable declared (using var) within a JavaScript
function becomes LOCAL and can only be
accessed from within that function. (the variable
has local scope).
 You can have local variables with the same name in
different functions, because local variables are only
recognized by the function in which they are
declared.
 Local variables are deleted as soon as the function
is completed.
GLOBAL JAVASCRIPT VARIABLES
 Variables declared outside a function, become
GLOBAL, and all scripts and functions on the web
page can access it.
THE LIFETIME OF JAVASCRIPT VARIABLES
 The lifetime JavaScript variables starts when they
are declared.
 Local variables are deleted when the function is
completed.
 Global variables are deleted when you close the
page.
ASSIGNING VALUES TO UNDECLARED
JAVASCRIPT VARIABLES
 If you assign a value to variable that has not yet
been declared, the variable will automatically be
declared as a GLOBAL variable.
JAVASCRIPT OPERATORS
 = is used to assign values.
 The assignment operator = is used to assign values
to JavaScript variables.

 + is used to add values.


 The arithmetic operator + is used to add values
together.
ARITHMETIC OPERATOR

 Operator example x y
+ Addition x=y+2 7 5
- Subtraction x=y-2 3 5
* Multiplication x=y*2 10 5
/ Division x=y/2 2.5 5
% Modulus x=y%2 1 5
 ++ Increment x=++y 6 6
x=y++ 5 6
-- Decrement x=--y 4 4
x=y-- 5 4
THE + OPERATOR USED ON STRINGS
 txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
ADDING STRINGS AND NUMBERS
 x=5+5;
y="5"+5;
z="Hello"+5;

 output
 10
55
Hello5
COMPRESSION OPERATOR
 == is equal to
 === is exactly equal to (value and type)
 != is not equal
 !== is not equal (neither value nor type)
> is greater than
< is less than
 >= is greater than or equal to
 <= is less than or equal to
LOGICAL OPERATORS
 && and (x < 10 && y > 1)
 || or (x==5 || y==5)
 ! not !(x==y)

 Consider x = 6 and y = 3
CONDITIONAL OPERATOR
 JavaScript also contains a conditional operator that
assigns a value to a variable based on some
condition.
 Syntax

 Variable name=(condition)?value1:value2

 Example
voteable=(age<18)?"Too young":"Old enough";
CONDITIONAL STATEMENTS
 Very often when you write code, you want to
perform different actions for different decisions. You
can use conditional statements in your code to do
this.
CONDITIONAL STATEMENTS CONT..
 In JavaScript we have the following conditional
statements:
 if statement - use this statement to execute some code
only if a specified condition is true
 if...else statement - use this statement to execute some
code if the condition is true and another code if the
condition is false
 if...else if....else statement - use this statement to select
one of many blocks of code to be executed
 switch statement - use this statement to select one of
many blocks of code to be executed
IF STATEMENT
 if (condition)
{
code to be executed if condition is true
}
IF…ELSE
 if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
IF … ELSE IF … ELSE
 if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor
condition2 is true
}
THE JAVASCRIPT SWITCH STATEMENT
 switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1
and 2
}
JAVASCRIPT LOOPS
 Loops are handy, if you want to run the same code
over and over again, each time with a different
value.
PROBLEM
 document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
document.write(cars[6] + "<br>");
document.write(cars[7] + "<br>");
document.write(cars[8] + "<br>");
document.write(cars[9] + "<br>");
document.write(cars[10] + "<br>");
SOLUTION
 for (var i=0;i<=10;i++)
{
document.write(cars[i] + "<br>");
}
THE FOR LOOP
 for (variable initialization ; Condition Checking ;
increment or decrement )
{
the code block to be executed
}
THE WHILE LOOP
 while (condition)
{
code block to be executed
}
THE DO WHILE LOOP
 do
{
code block to be executed
}
while (condition);
JAVASCRIPT BREAK AND CONTINUE
 The Break Statement

 You have already seen the break statement used in an


earlier chapter of this tutorial. It was used to "jump out" of
a switch() statement.

 The break statement can also be used to jump out of a


loop.

 The break statement breaks the loop and continues


executing the code after the loop (if any):
EXAMPLE
 for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
}
THE CONTINUE STATEMENT
 The continue statement breaks one iteration (in
the loop), if a specified condition occurs, and
continues with the next iteration in the loop.
EXAMPLE
 for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}
JAVA SCRIPT LABELS
 break labelname;

continue labelname;
JAVA SCRIPT LABELS EXAMPLE
 cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
JAVA SCRIPT ERROR HANDLING
 The try statement lets you to test a block of code
for errors.

 The catch statement lets you handle the error.

 The throw statement lets you create custom errors.


ERRORS WILL HAPPEN!
 When the JavaScript engine is executing
JavaScript code, different errors can occur:
 It can be syntax errors, typically coding errors or
typos made by the programmer.
 It can be misspelled or missing features in the
language (maybe due to browser differences).
 It can be errors due to wrong input, from a user, or
from an Internet server.
 And, of course, it can be many other unforeseeable
things.
JAVASCRIPT THROWS ERRORS
 When an error occurs, when something goes
wrong, the JavaScript engine will normally stop,
and generate an error message.

 The technical term for this is: JavaScript will throw


an error.
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.
SYNTAX
 try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
EXAMPLE
 <script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>

<input type="button" value="View message" onclick="message()">
THE THROW STATEMENT
 The throw statement allows you to create a custom
error.
 The correct technical term is to create or throw an
exception.
 If you use the throw statement together with try and
catch, you can control program flow and generate
custom error messages.
EXAMPLE
 script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "to high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";}
}
}
</script>
<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="mess"></p>
JAVASCRIPT FORM VALIDATION
 JavaScript can be used to validate data in HTML forms
before sending off the content to a server.
 Form data that typically are checked by a JavaScript
could be:

 has the user left required fields empty?


 has the user entered a valid e-mail address?

 has the user entered a valid date?

 has the user entered text in a numeric field?


NULL FIELDS
 function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
E-MAIL VALIDATION
 function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 ||
dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
THE HTML DOM (DOCUMENT OBJECT
MODEL)
 When a web page is loaded, the browser creates a
Document Object Model of the page.
DOM MODEL

Window

Document

Elements Forms

Elements Forms
WITH THE DOM
 With a programmable 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 react to all the events in the page
FINDING HTML ELEMENTS
 Often, with JavaScript, you want to manipulate
HTML elements.

 To do so, you have to find the elements first. There


are a couple of ways to do this:

 Finding HTML elements by id


 Finding HTML elements by tag name

 Finding HTML elements by class name


FINDING HTML ELEMENTS BY ID
 var x=document.getElementById("intro");
FINDING HTML ELEMENTS BY TAG NAME
 var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
CHANGING THE HTML OUTPUT STREAM
 <body>

<script>
document.write(Date());
</script>

</body>
CHANGING HTML CONTENT
 The easiest way to modify the content of an HTML
element is by using the innerHTML property.
 To change the content of an HTML element, use
this syntax:

 document.getElementById(id).innerHTML=
 new HTML
EXAMPLE
 <p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New
text!";
</script>
CHANGING AN HTML ATTRIBUTE
 To change the attribute of an HTML element, use
this syntax:

 document.getElementById(id).attribute=new value
EXAMPLE
 <img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape
.jpg";
</script>
EVENTS
 A JavaScript can be executed when an event
occurs, like when a user clicks on an HTML
element.
 To execute code when a user clicks on an element,
add JavaScript code to an HTML event attribute:

 Example :

 onclick=JavaScript
 When a user clicks the mouse
 When a web page has loaded

 When an image has been loaded

 When the mouse moves over an element

 When an input field is changed

 When an HTML form is submitted

 When a user strokes a key


ONCLICK

 <button onclick="displayDate()">Try it</button>


THE ONLOAD AND ONUNLOAD EVENTS
 he onload and onunload events are triggered when
the user enters or leaves the page.

 The onload event can be used to check the visitor's


browser type and browser version, and load the
proper version of the web page based on the
information.
EXAMPLE
 <body onload=“viewdate()">

 <script>
 Function viewdate()
 {
 alert(date());
 }
 </script>
ON MOUSE OVER
 The onmouseover and onmouseout events can be
used to trigger a function when the user mouses
over, or out of, an HTML element.
EXAMPLE

 <div onmouseover="mOver(this)" onmouseout="mOut(this)"


style="background-
color:#D94A38;width:120px;height:20px;padding:40px;">Mouse
Over Me</div>

 <script>
 function mOver(obj)
 {
 obj.innerHTML="Thank You"
 }

 function mOut(obj)
 {
 obj.innerHTML="Mouse Over Me"
 }
 </script>
THE ONMOUSEDOWN, ONMOUSEUP AND
ONCLICK EVENTS

 The onmousedown, onmouseup, and onclick


events are all parts of a mouse-click. First when a
mouse-button is clicked, the onmousedown event is
triggered, then, when the mouse-button is released,
the onmouseup event is triggered, finally, when the
mouse-click is completed, the onclick event is
triggered.
EXAMPLE
 <div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-
color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

 <script>
 function mDown(obj)
 {
 obj.style.backgroundColor="#1ec5e5";
 obj.innerHTML="Release Me"
 }

 function mUp(obj)
 {
 obj.style.backgroundColor="#D94A38";
 obj.innerHTML="Thank You"
 }
 </script>
CREATING NEW HTML ELEMENTS
 To add a new element to the HTML DOM, you must
create the element (element node) first, and then
append it to an existing element.
EXAMPLE
 <div id="d1">
 <p id="p1">This is a paragraph.</p>
 <p id="p2">This is another paragraph.</p>
 </div>

 <script>
 var para=document.createElement("p");
 var node=document.createTextNode("This is new.");
 para.appendChild(node);

 var element=document.getElementById("d1");
 element.appendChild(para);
 </script>
REMOVING EXISTING HTML ELEMENTS
 To remove an HTML element, you must know the
parent of the element:
EXAMPLE
 <div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div><script>
var parent=document.getElementById("d1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
THE JAVA SCRIPT OBJECT
 JavaScript has several built-in objects, like String,
Date, Array, and more.
 An object is just a special kind of data, with
properties and methods
CREATING JAVASCRIPT OBJECTS
 With JavaScript you can define and create your
own objects.
 There are 2 different ways to create a new object:

 1. Define and create a direct instance of an object.

 2. Use a function to define an object, then create


new object instances.
CREATING A DIRECT INSTANCE
 person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
USING AN OBJECT CONSTRUCTOR

 function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

 var myFather=new person("John","Doe",50,"blue");


var myMother=new person("Sally","Rally",48,"green");
ADDING METHODS TO JAVASCRIPT OBJECTS
 function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;

 function changeName(name)
{
this.lastname=name;
}
}
JAVASCRIPT CLASSES
 JavaScript is an object oriented language, but
JavaScript does not use classes.
 In JavaScript you don’t define classes and create
objects from these classes (as in most other object
oriented languages).
 JavaScript is prototype based, not class based.
JAVASCRIPT FOR...IN LOOP
 The JavaScript for...in statement loops through the
properties of an object.

 Syntax
 for (variable in object)
{
code to be executed
}
EXAMPLE
 var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
txt=txt + person[x];
}
JAVASCRIPT NUMBERS
 var pi=3.14; // Written with decimals
var x=34; // Written without decimals

 All JavaScript Numbers are 64-bit


 JavaScript is not a typed language. Unlike many
other programming languages, it does not define
different types of numbers, like integers, short, long,
floating-point etc.
JAVASCRIPT STRINGS
 A string simply stores a series of characters like
"John Doe".
 A string can be any text inside quotes. You can use
simple or double quotes:

 var carname="Volvo XC60";


var carname='Volvo XC60';
 You can access each character in a string with its
position (index):
 Example

 var character=carname[7];
STRING METHODS
 charAt() charCodeAt()
 concat() fromCharCode()
 indexOf() lastIndexOf()
 match() replace()
 search() slice()
 split() substr()
 substring() toLowerCase()
 toUpperCase() valueOf()
DATE OBJECT
 Date()
 Returns current date and time

 getFullYear()
Use getFullYear() to get the year.
 getTime()
getTime() returns the number of milliseconds since
01.01.1970.
SET A DATE
 var myDate=new Date();
myDate.setFullYear(2010,0,14);

 And also

 var myDate=new Date();


myDate.setDate(myDate.getDate()+5);
COMPARE TWO DATES
 var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
alert("Today is before 14th January 2100");
}
else
{
alert("Today is after 14th January 2100");
}
ARRAY
 An array is a special variable, which can hold more than
one value at a time.
 If you have a list of items (a list of car names, for
example), storing the cars in single variables could look
like this:
 var car1="Saab";
var car2="Volvo";
var car3="BMW";
 However, what if you want to loop through the cars and
find a specific one? And what if you had not 3 cars, but
300?
 The solution is an array!
YOU CAN HAVE DIFFERENT OBJECTS IN ONE
ARRAY
 myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;
CREATING ARRAY
 1: Regular:
 var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

 2: Condensed:
 var myCars=new Array("Saab","Volvo","BMW");

 3: Literal:
 var myCars=["Saab","Volvo","BMW"];
ARRAY METHODS AND PROPERTIES
 Property
length
 Methods
 indexOf() concat()
 Join() pop()
 push() reverse()
 shift() slice()
 sort() splice()
 toString() unshift()
BOOLEAN
 There is only Two states

 True
 False
MATH FUNCTIONS
 abs() ceil()
 exp() floor()
 max() min()
 pow() random()
 round() sqrt()
REGULAR EXPRESSION
 A regular expression is an object that describes a pattern
of characters.
 When you search in a text, you can use a pattern to
describe what you are searching for.
 A simple pattern can be one single character.

 A more complicated pattern can consist of more


characters, and can be used for parsing, format
checking, substitution and more.
 Regular expressions are used to perform powerful
pattern-matching and "search-and-replace" functions on
text.
SYNTAX

 var patt=new RegExp(pattern,modifiers);

or more simply:

var patt=/pattern/modifiers;

 pattern specifies the pattern of an expression


 modifiers specify if a search should be global, case-
sensitive, etc.
MODIFIERS

 Modifiers are used to perform case-insensitive and


global searches.

 The i modifier is used to perform case-insensitive


matching.

 The g modifier is used to perform a global match


(find all matches rather than stopping after the first
match).
EXAMPLE

 <script>
 var str = "Visit W3Schools";

 var patt1 = /w3schools/i;

 document.write(str.match(patt1));

 </script>
EXAMPLE 2
 <script>

 var str="Is this all there is?";


 var patt1=/is/g;

 document.write(str.match(patt1));

 </script>
EXAMPLE
 <script>

 var str="Is this all there is?";


 var patt1=/is/gi;

 document.write(str.match(patt1));

 </script>
TEST()

 The test() method searches a string for a specified


value, and returns true or false, depending on the
result.
EXAMPLE

 <script>
 var patt1=new RegExp("e");

 document.write(patt1.test("The best things in life


are free"));
 </script>

 </body>
EXEC()

 The exec() method searches a string for a specified


value, and returns the text of the found value. If no
match is found, it returns null.
EXAMPLE

 <script>
 var patt1=new RegExp("e");

 document.write(patt1.exec("The best things in life


are free"));
 </script>
JAVA SCRIPT OBJECTS
 Window Object
 Screen Object

 History Object

 Navigator Object

 Popupalert Object

 Timing Object

 Cookie Object
WINDOW OBJECT
 The window object is supported by all browsers. It
represent the browsers window.
 All global JavaScript objects, functions, and variables
automatically become members of the window object.
 Global variables are properties of the window object.

 Global functions are methods of the window object.

 Even the document object (of the HTML DOM) is a


property of the window object:
WINDOW SIZE
 Three different properties can be used to determine the size of
the browser window (the browser viewport, NOT including
toolbars and scrollbars).

 For Internet Explorer, Chrome, Firefox, Opera, and Safari:

 window.innerHeight - the inner height of the browser window


 window.innerWidth - the inner width of the browser window

 For Internet Explorer 8, 7, 6, 5:


 document.documentElement.clientHeight
 document.documentElement.clientWidth
OTHER WINDOW METHODS
 window.open() - open a new window

 window.close() - close the current window

 window.moveTo() -move the current window

 window.resizeTo() -resize the current window


WINDOW SCREEN OBJECT
 The window.screen object can be written without
the window prefix.

 document.write("Available Width: " +


screen.availWidth);

document.write("Available Height: " +


screen.availHeight);
EXAMPLE
 <h3>Your Screen:</h3>

 <script>
 document.write("Total width/height: ");
 document.write(screen.width + "*" + screen.height);
 document.write("<br>");
 document.write("Available width/height: ");
 document.write(screen.availWidth + "*" + screen.availHeight);
 document.write("<br>");
 document.write("Color depth: ");
 document.write(screen.colorDepth);
 document.write("<br>");
 document.write("Color resolution: ");
 document.write(screen.pixelDepth);
 </script>
LOCATION OBJECT
 The window.location object can be used to get the
current page address (URL) and to redirect the
browser to a new page.
 location.hostname returns the domain name of the
web host

 location.path returns the path and filename of the


current page

 location.port returns the port of the web host (80 or


443)

 location protocol returns the web protocol used


(http:// or https://)
EXAMPLE

 document.write(location.href);
 document.write(location.pathname);

 function newDoc()
{
window.location.assign("http://www.
w3schools.com");
}
HISTORY OBJECT
 To protect the privacy of the users, there are
limitations to how JavaScript can access this obje

 history.back() - same as clicking back in the


browser

 history.forward() - same as clicking forward in the


browser
EXAMPLE
 <script>
function goBack()
{
window.history.back()
}
</script>

<input type="button" value="Back"


onclick="goBack()">
EXAMPLE
 <script>
function goForward()
{
window.history.forward()
}
</script>

<input type="button" value="Forward"


onclick="goForward()">
NAVIGATOR OBJECT
 <script>

navigator.appCodeName
navigator.appName
navigator.appVersion
navigator.cookieEnabled
navigator.platform
navigator.userAgent
navigator.systemLanguage
WARNING !!!
 The information from the navigator object can often
be misleading, and should not be used to detect
browser versions because:

 The navigator data can be changed by the browser


owner
 Some browsers misidentify themselves to bypass
site tests
 Browsers cannot report new operating systems,
released later than the browser
POPUP BOXES
 JavaScript has three kind of popup boxes: Alert
box, Confirm box, and Prompt box.
ALERT BOX
 An alert box is often used if you want to make sure
information comes through to the user.
 When an alert box pops up, the user will have to
click "OK" to proceed.

 Syntax
 window.alert("sometext");
EXAMPLE
 <head>
<script>
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()"


value="Show alert box">

</body>
CONFIRM BOX
 A confirm box is often used if you want the user to
verify or accept something.
 When a confirm box pops up, the user will have to
click either "OK" or "Cancel" to proceed.
 If the user clicks "OK", the box returns true. If the
user clicks "Cancel", the box returns false

 Syntax
 window.confirm("sometext");
EXAMPLE
 var r=confirm("Press a button");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
PROMPT BOX
 A prompt box is often used if you want the user to
input a value before entering a page.
 When a prompt box pops up, the user will have to
click either "OK" or "Cancel" to proceed after
entering an input value.
 If the user clicks "OK" the box returns the input
value. If the user clicks "Cancel" the box returns
null.
 Syntax

 window.prompt("sometext","defaultvalue");
EXAMPLE
 var name=prompt("Please enter your name","Harry
Potter");

 if (name!=null && name!="")


{
x="Hello " + name + "! How are you today?";
}
LINE BREAKS
 To display line breaks inside a popup box, use a
back-slash followed by the character n.

 Example
 alert("Hello\n How are you?");
JAVASCRIPT TIMING EVENTS
 With JavaScript, it is possible to execute some
code at specified time-intervals. This is called
timing events.
 It's very easy to time events in JavaScript. The two
key methods that are used are:

 setInterval() - executes a function, over and over


again, at specified time intervals
 setTimeout() - executes a function, once, after
waiting a specified number of milliseconds
SETINTERVAL()

 The setInterval() Method


 The setInterval() method will wait a specified
number of milliseconds, and then execute a
specified function, and it will continue to execute
the function, once at every given time-interval.

 Syntax
 window.setInterval("javascript
function",milliseconds);
EXAMPLE
 1) setInterval(function(){alert("Hello")},3000);

 2)
 var myVar= setInterval(function() {myTimer()},

 1000);

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo")
. innerHTML=t;
}
HOW TO STOP THE EXECUTION?
 The clearInterval() method is used to stop further
executions of the function specified in the
setInterval() method.

 Syntax
 window.clearInterval(intervalVariable)
SETTIMEOUT()

 indow.setTimeout("javascript
function",milliseconds);

 Example

 setTimeout(function(){alert("Hello")},3000);
HOW TO STOP THE EXECUTION?
 The clearTimeout() method is used to stop the
execution of the function specified in the
setTimeout() method.

 Syntax
 window.clearTimeout(timeoutVariable)
COOKIES
 A cookie is a variable that is stored on the visitor's
computer. Each time the same computer requests a
page with a browser, it will send the cookie too.
With JavaScript, you can both create and retrieve
cookie values.

You might also like