Java script

What is JavaScript?
 JavaScript is a client-side object-oriented scripting

language that is used to add interactivity to static
HTML pages.
 JavaScript is mainly used for validating user input in
web forms, reacting to user events, detecting
browsers, etc…

How to embed JavaScript in HTML?
 Scripts are embedded inside the HTML file using the

script tag <script>.

Scripts
Internal
The JavaScript code is embedded
inside the HTML file as follows:
<script type=”text/javascript”>
// JavaScript code goes here
</script>

External
The JavaScript code is written in an
external file with extension “.js” and
referenced in the HTML file as
follows:
<script type=”text/javascript”
src=”scriptFile.js”/>

Where to embed JavaScript in HTML?
 Script tag can be added either inside <head> section or the

<body> section of the HTML page.

Scripts
In Body

In Head
Scripts added to the <head> section
are to be executed when called.

Scripts added to the <body> section
are to be executed when the page
loads.

 Scripts are better to be included at the end of the HTML page in

order to prevent slow loading of pages.

JavaScript Syntax
 JavaScript statements ends with ;
 JavaScript is case sensitive
 JavaScript comments are like C++ and Java comments

// for single line comments and /* */ for multi-line
comments

JavaScript Output
 Writing to The HTML Document Output:
 To write HTML element using JavaScript we user
document.write("HTML Element");
 Example – To write a paragraph using JavaScript:
document.write("<p>JavaScript Paragraph</p>");
</script>

JavaScript Output (Cont.)
 NOTE:

If you execute document.write after the document has
finished loading, the entire HTML page will be overwritten.
 Example:
<p>My Paragraph.</p>
<button onclick="myFunction()">Try it</button>
function myFunction() {
document.write("<p>Oops! The document
disappeared!</p>");
}
</script>

JavaScript Variables
 Variable names must begin with a letter or $ or _.
 JavaScript is a weakly-typed language, meaning that variables are

declared without specifying data-types.
 You can declare variables with the var keyword.
 Examples:
var x = 1;
var y = 1.2;
var str = "Hello World";
var check = "true";
var cars=new Array("Saab", "Volvo", "BMW");
 Note:
If you assign a value to variable that has not yet been
declared, the variable will automatically be declared as
a GLOBALvariable.

JavaScript Objects
 To Create Object and add properties to it:
1.
var person = {
firstname : "John",
lastname : “Adam",
age
: 50
};
2.
Var person = new Object();
person.firstname="John";
person.lastname=“Adam";
person.age=50;


To Access Object properties:
1.
2.

name=person.lastname;
name=person["lastname"];

JavaScript Functions
 Syntax:

function functionname(argument1, argument2, …)
{
// some code to be executed
return value;
}
 To call:
var returnVar =
functionname(argument1, argument2, …);

JavaScript Operators
 JavaScript arithmetic operators (like C++ and Java):





+
/
*
++
-%
JavaScript assignment operators (like C++ and Java):
=
+=
-=
/=
JavaScript logical operators (like C++ and Java):
&& ||
!
JavaScript string concatenation operator:
+
JavaScript comparison operators :
!= ==
>
<
<=
>=
=== !==

JavaScript Conditions
 If...else if...else Statement:
 Syntax:
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
}

JavaScript Conditions (Cont.)
 Switch Statement:
 Syntax:
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
 For Loop:
 Syntax:
for (statement 1; statement 2; statement 3)
{
// code block to be executed
}
 For .. In Loop:
 Syntax:
for (variable in object)
{
// code to be executed
}
 Example:
var person={fname:"John", lname:“Adam", age:25};
for (x in person)
{
var personElement = person[x];
}

JavaScript Loops (cont.)
 While Loop:
 Syntax:
while (condition)
{
}
 Do .. While Loop:
 Syntax:
do
{
}
while (condition);

JavaScript Break and Continue
 Break Statement:
 It breaks the loop and continues executing the code after
the loop (if any).
 Syntax:
break;
 Continue Statement:
 It breaks one iteration (in the loop), if a specified
condition occurs, and continues with the next iteration
in the loop.
 Syntax:
continue;

JavaScript Strings
 String Length:
 You can get the length of a string using length property.
 Example:
var txt="Hello World";
document.write(txt.length);  11
 Finding a String in a String:
 You can find a string in another string using either indexOf()
or lastIndexOf() method.
 The method returns -1 if the specified text is not found.
 Example:
var str="Hello world";
var n = str.indexOf("l");  2
var m = str.lastIndexOf("l");  9

JavaScript Strings (Cont.)
 Matching Content:
 You can search for a matching content in a string using match()
method.
 This method returns the matching content if present, else it returns
null.
 Example:
var str="Hello World";
document.write(str.match("world"));  null
document.write(str.match("World"));  World
 Replacing Content:
 You can replace a specified value with another value in a string
using replace() method.
 Example:
var str=“Hello World"
var n=str.replace(“World",“FCI");  Hello FCI

 Upper Case and Lower Case:
 You can convert a string to upper/lower case with the
methods toUpperCase() / toLowerCase().
 Example:
var txt="Hello World";
var txt1=txt.toUpperCase();  HELLO WORLD
var txt2=txt.toLowerCase();  hello world
 Convert a String to an Array:
 You can convert a string to an array with split() method.
 Example:
var str="a,b,c,d,e,f“;
var arr=str.split(",");  array {“a”, “b”, “c”, “d”, “e”, “f”}

 Take part from a String:
 You can take part from a string using substring() method.
 Example:
var substr=str.substring(2, 5);  llo
 Get Character from a String:
 You can get a char from a string using charAt() method.
 Example:
var c=str.charAt(1);  e

 Concatenate two Strings:
 You can concatenate two strings using concat()
method.
 Example:
var txt1="Hello";
var txt2="World";
var txt = txt1.concat(txt2);  HelloWorld

JavaScript Date
 Initiating a date:
1.
new Date(); // current date and time
2.
new Date(dateString);
3.
new, Date(year month, day, hours, minutes, seconds);


Example:
var n = new Date(79,5,24,11,33,o);
document.write(n);
Result:
Sun Jun 24 1979 11:33:00 GMT+0200 (Egypt Standard Time)



Example:
var n = new Date("June 24, 1979 11:33:00");
document.write(n);
Result:
Sun Jun 24 1979 11:33:00 GMT+0200 (Egypt Standard Time)

JavaScript Date (Cont.)
 Set Date:
1. setFullYear(year, month, day):
Example:
var myDate=new Date();
myDate.setFullYear(2010,0,14);
1. setDate(dateobject):
Example:
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
 Compare Two Dates:
 To compare dates use >, <, ==, <=, >=

JavaScript Date (Cont.)
 getDate() Method:
 Used to get the day from a date.
 getMonth() Method :
 Used to get the month from a date.
 Note: Month starts from zero so add 1 to the retrun
result.
 getFullYear() Method :
 Used to get the year from a date.

JavaScript Math
 The Math object includes several mathematical constants

and methods.
 Math.PI:
 Constant 3.14








Math.round(number).
Math.floor(number).
Math.ceil(number).
Math.max(number1, number2).
Math.min(number1, number2).
Math.random():
 Return a random number between 0 and 1.

JavaScript HTML DOM
 The HTML DOM (Document Object Model) is a standard

for how to interact with (get, change, add, or delete) HTML
elements.
 Finding HTML Elements:
1.

2.
3.

By Id:

document.getElementById(“id");
By Tag Name:

document.getElementsByTagName(“tag");
By HTML Object Collections:

The following HTML object collections are accessible:
•
•
•
•

document.anchors
document.forms
document.images
document.links

JavaScript HTML DOM (Cont.)
 Example - Return the value of each element in

the form :

<html>
<body>
<form id="frm">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="Submit" onClick="printValues()">
</form>
<script type="text/javascript">
function printValues() {
var form = document.forms["frm"];
for (var i=0 ; i < form.length ; i++) {
document.write(form.elements[i].value);
document.write("<br>");
}
}
</script>
</body>
</html>

 To access the value of the first name in the previous

example:
 var firstName = document.forms[“frm"]["fname"].value;

 Changing HTML:
 Changing the HTML Output Stream:


document.write()

 Changing HTML Content:


document.getElementById(id).innerHTML=new HTML

 Changing the Value of an Attribute:


document.getElementById(id).attribute=new value

 Events:
 Examples of HTML events:







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

 Assign Events:


Using Attributes:




Example:
<button id= "myBtn" onclick="displayDate()">Try it</button>

Using HTML DOM:


Example:
document.getElementById("myBtn").onclick=function(){displayDate() };

 Mostly used Events:








Onclick
Onload
Onchange
Onmouseover
Onmouseout
Onmousedown
Onmouseup

JavaScript BOM
 BOM stands for Browser Object Model.
 Window:
 Window Size:




For 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
or
 document.body.clientHeight
 document.body.clientWidth

JavaScript Browser BOM (Cont.)
 Some Window Methods:
 window.open()
 window.close()
 window.resizeTo()
 Window Frames:
 window.frames

 Screen:
 Syntax: window.screen or screen
 To get the available screen width and height (Without
taskbars or scrolling bars):



screen.availWidth
screen.availHeight

 Popup Alert:
 Alert Box:



Syntax: window.alert(“Message");
A popup with ok button.

 Confirm Box:



Syntax: window.confirm(“Message");
A popup with ok and cancel buttons, returns true if the user clicked on
ok and false if the user clicked on cancel.

 Prompt Box:



Syntax: window.prompt(“Message","Default value for input");
A popup with a text box for user input, ok and cancel buttons, returns
the user input if he user clicked ok and null if the user clicked on cancel.

 NOTE:

To display line breaks inside a popup box, use n.

 Location:
 Syntax: window.location or location
 location.href: returns the URL of the current page.
 location.pathname: returns the path and filename of the
current page.
 location.hostname: returns the domain name of the web host.
 location.port: returns the port of the web host (80 or 443).
 location.protocol: returns the web protocol used (http:// or
https://).
 location.assign(URL): loads a new page.

 History:
 history.back(): same as clicking back in the browser.
 history.forward(): same as clicking forward in the
browser.

TASK
 Create a page like the following, and
then validate for empty fields.
 On Submit:
1.
If Username is empty: Alert
“Username must be filled out.”.
2.
If Password is empty: Alert
“Password must be filled out.”.
3.
Else: Alert “Done.”.

What needed to be known?
•To define a variable:
var variable_name =
variable_value;
•To define a function:
function
function_name(parameters…)
{
// Code goes here
return value;
}
•To get form:
document.forms[“form id“];
•To get value of element in form:
document.forms[“form id“][“name
attribute of the element”].value;
•To Alert a message:
Alert(“Message”);

TASK (Cont.)
<html>
<head>
<script type="text/javascript">
function validateForm(){
var username = document.forms["myForm"]["username"].value;
var password = document.forms["myForm"]["password"].value
if (username == null || username == "") {
alert("Username must be filled out.");
return false;
} else if (password == null || password == "") {
alert("Password must be filled out.");
return false;
} else {
alert("Done.");
return true;
}
}
</script>
</head>

TASK (Cont.)
<body>
<form name="myForm" onsubmit="return
validateForm()">
Username: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Java script

Related slideshows

More Related Content

Java script