Java Script

WHAT IS SCRIPT?
 Each script represents a text document containing
a list of instructions that need to be executed by a
certain program.
 Scripting languages differ from programming
languages because they are interpreted on the fly
and don't need to be compiled.
 It is an automated process.

TYPES OF SCRIPT
 Client side scripting :which runs on user browser.
ex:JavaScript, Flash
 Server side scripting. which runs on server
ex:PHP, ASP

DEMO
 Client side script
 Server side script

IMPORTANCE OF JAVASCRIPT
 Executed on the client side.
 Relatively easy language.
 Relatively fast to the end user.

ABOUT DOM
 The HTML DOM (Document Object Model)
 With the HTML DOM, JavaScript can
access and change all the elements of an
HTML document.

SYNTAX OF SCRIPT
<script type="text/javascript">
JavaScript code
</script>

ATTRIBUTES OF SCRIPT
Attribute Value Description
src URL Specifies the URL of
an external script file

TYPES OF SCRIPTS
Internal
 External

INTERNAL SCRIPT
<!DOCTYPE html>
<html>
<head>
<script type=“text/Javascript”>
JavascriptCode
</script>
</head>
<body>
</body>
</html>

EXTERNAL SCRIPT REFERENCE
 create a new file with the extension jsmyscript.js
<!DOCTYPE html>
<html>
<head>
<Script type="text/javaScript" src="myscript.js"> </Script>
</head>
<body>
</body>
</html>

JS SYNTAX
1.Variables
2. Statements
3. operators
4. Strings
5. Expressions
6. Comments

VARIABLES
 JavaScript variables are containers for storing data values.
 Ex:
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
<p id="demo"></p>

STATEMENTS
 The statements are executed, one by one.
 Semicolons separate JavaScript statements.
 Ex:
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
<p id="demo"></p>

OPERATORS
Var x = 5;
Var y = 2;
Var z = x + y;
document.getElementById("demo").innerHTML = z;
<p id="demo"></p>
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment

STRINGS
 A string can be any text inside quotes. You can use single or
double quotes:
 Ex:
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';
document.getElementById("demo").innerHTML =carName1;
<p id="demo"></p>

FINDING HTML ELEMENTS
 Finding HTML elements by id
 Finding HTML elements by class name

FINDING HTML ELEMENTS BY ID
Var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
myElement.innerHTML;
<p id="intro">Hello World!</p>
<p id="demo"></p>

FINDING HTML ELEMENTS BY CLASS NAME
function myFunction() {
var x =
document.getElementsByClassName("example");
x[0].innerHTML = "Hello World!";
}
<p class="example"> </p>
<button onclick="myFunction()">Click</button>

JAVA SCRIPT OUTPUT
JavaScript Display Possibilities
1. window.alert().
2.document.write().
3.console.log().

EXAMPLE
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript”>
window.alert(5 + 6);
</script>
</head>
<body>
</body>
</html>

FUNCTIONS
function myFunction(a, b) {
return a * b;
}
myFunction(4, 3);
<p id="demo"></p>

LOOPING
 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 LOOP
cars = ["BMW", "Volvo", "Saab", "Ford"];
text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
Result
BMW
Volvo
Saab
Ford

FOR IN LOOP
 The JavaScrit for/in statement loops through the properties of
an object
 EX:
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
<p id="demo"></p>
Result
John Doe 25

WHILE LOOP
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
<p id="demo"></p>
Result
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8

DO WHILE LOOP
var text = ""
var i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10)
}
<p id="demo"></p>
Result
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7

OBJECT
var car = {type:"Fiat", model:500, color:"white"};
document.getElementById("demo").innerHTML = car.type;
<p id="demo"></p>
Reslut
Fiat

ARRAYS
var cars = ["Saab", "Volvo", "BMW"];
cars[0];
<p id="demo"></p>
Result
Saab

CONDITIONS
var greeting;
var time = 10;
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
<p id="demo"></p>
Result
Good day

EVENTS
 Input Events
 Mouse Events
 Click Events
 Load Events

INPUT EVENT
 onblur - When a user leaves an input field
 onchange - When a user changes the content of an input field
 onchange - When a user selects a dropdown value
 onfocus - When an input field gets focus
 onselect - When input text is selected
 onsubmit - When a user clicks the submit button
 onreset - When a user clicks the reset button
 onkeydown - When a user is pressing/holding down a key
 onkeypress - When a user is pressing/holding down a key
 onkeyup - When the user releases a key
 onkeyup - When the user releases a key
 onkeydown vs onkeyup - Both

EXAMPLE
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
Enter your name: <input type="text" id="fname"
onblur="myFunction()">

MOUSE EVENTS
 onmouseover/onmouseout - When the mouse passes
over an element
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">Mouse over this
text</h1>
</body>
</html>

CLICK EVENTS
 onclick - When button is clicked
 ondblclick - When a text is double-clicked

EXAMPLE
document.getElementById("demo").innerHTML = "Hello
World";
}
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

LOAD EVENTS
 onload - When the page has been loaded
alert("Page is loaded");
}
<body onload="myFunction()">
<h1>Hello World!</h1>

JAVASCRIPT BUILT-IN FUNCTIONS
 Global Methods
 Number Methods
 String Methods
 Array Methods
 Date Methods:

GLOBAL METHODS
 JavaScript global functions can be used on all JavaScript data
types.
 These are the most relevant methods, when working with
numbers:Method Description
parseFloat()
Parses its argument and returns a
floating point number
parseInt()
Parses its argument and returns an
integer

NUMBER METHODS
 JavaScript number methods are methods that can be used on
numbers
Method Description
toString() Returns a number as a string
toExponential()
Returns a string, with a number
rounded and written using
exponential notation.
toFixed()
rounded and written with a
specified number of decimals.
toPrecision()
written with a specified length

EXAMPLE
 toString() returns a number as a string.
var x = 123;
x.toString(); // returns 123 from variable x.
 toExponential() returns a string, with a number rounded and written using exponential notation.
var x = 9.656;
x.toExponential(2); // returns 9.66e+0
 toFixed() returns a string, with the number written with a specified number of decimals:
var x = 9.656;
x.toFixed(0); // returns 10
x.toFixed(2); // returns 9.66
 toPrecision() returns a string, with a number written with a specified length
var x = 9.656;
x.toPrecision(); // returns 9.656
x.toPrecision(2); // returns 9.7

STRING METHODS
Method Description
indexOf()
The indexOf() method returns the index of
(the position of) the first occurrence of a
specified text in a string
search()
The search() method searches a string for a
specified value and returns the position of
the match:
slice()
slice() extracts a part of a string and returns
the extracted part in a new string.
substring()
extracts a part of a string and returns the
extracted part in a new string.
substr()
extracts a part of a string and returns the
extracted part in a new string.
replace()
The replace() method replaces a specified
value with another value in a string:
toUpperCase() A string is converted to upper
toLowerCase() A string is converted to lower case

STRING METHODS
concat() joins two or more strings
charAt() he charAt() method returns the
character at a specified index
(position) in a string

EXAMPLE
 The indexOf() method returns the index of (the position of) the first occurrence of a
specified text in a string.
Example
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
Result
7
indexOf() and search(), are equal.
 slice() extracts a part of a string and returns the extracted part in a new string.
The method takes 2 parameters: the starting index (position), and the ending index
(position).
If a parameter is negative, the position is counted from the end of the string.
Example
var str = "Apple, Banana, Kiwi";
var res = str.slice(6,12);
Result
Banana

EXAMPLE
 substring() is similar to slice().
the difference is that substring() cannot accept negative indexes.
 substr() is similar to slice().
the difference is that the second parameter specifies the length of the extracted part.
Example
var str = "Apple, Banana, Kiwi";
var res = str.substr(7,6);
Result
Banana
 replace() method replaces a specified value with another value in a string:
Example
str = "Please visit Microsoft!";
var n = str.replace("Microsoft","W3Schools");
Result
Please visit W3Schools!

EXAMPLE
 A string is converted to upper case with toUpperCase():
Example
var text1 = "Hello World!"; // String
var text2 = text1.toUpperCase(); // text2 is text1 converted to upper
Result
HELLO WORLD!
 A string is converted to lower case with toLowerCase():
Example
var text1 = "Hello World!"; // String
var text2 = text1.toLowerCase(); // text2 is text1 converted to lower
Result
hello world!
 concat() joins two or more strings:
Example
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
 charAt() method returns the character at a specified index (position) in a string:
Example
var str = "HELLO WORLD";
str.charAt(0);

ARRAY METHODS
Methods Description
pop()
Removes the last element from an
array and returns that element.
push()
Adds one or more elements to the
end of an array and returns the new
length of the array.

EXAMPLE
 The pop() method removes the last element from an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
fruits.pop()
}
<p id="demo"></p>
Result
Banana,Orange,Apple

EXAMPLE
 The push() method adds a new element to an array (at the
end):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
}
<p id="demo"></p>
Result
Banana,Orange,Apple,Mango,Kiwi

DATE METHODS
Method Description
getDate() Get the day as a number (1-31)
getDay()
Get the weekday as a number (0-
6)
getFullYear() Get the four digit year (yyyy)
getHours() Get the hour (0-23)
getMilliseconds() Get the milliseconds (0-999)
getMinutes() Get the minutes (0-59)
getMonth() Get the month (0-11)
getSeconds() Get the seconds (0-59)
getTime()
Get the time (milliseconds since
January 1, 1970)

EXAMPLE
 var d = new Date();
document.getElementById("demo").innerHTML = d.
getDate();

ACCESS TO ATTRIBUTES
 The DOM supplies the following 3 methods to
tackle HTML attributes:
 -getAttribute()
-setAttribute()
-removeAttribute()

GET ATTRIBUTE()
 GetAttribute() retrieves the corresponding value of an
attribute. If the attribute does not exist, an empty string is
returned.
 For example:
<img id="myimage" src="test.gif">
var
getvalue=document.getElementById("myimage").getAttribute("sr
c")
//returns "test.gif"

SET ATTRIBUTE()
 As the name implies, setAttribute() dynamically modifies the
value of an element's attribute. The method takes two
parameters- the name of the attribute to set, and its new
value.
 For Example:
<img id="myimage" src="test.gif">
document.getElementById("myimage").setAttribute("src","anothe
r.gif")

REMOVE ATTRIBUTE()
 A whole new concept, removeAttribute() allows you to remove
entire HTML attributes from an element! This is particularly
handy when an attribute contains mutiple values which you
wish to all erase
 For Example:
<div id="adiv" style="width:200px;height:30px;background-
color:yellow">Some Div</div>
//adiv now contains no style at all
document.getElementById("adiv").removeAttribute("style")

THE BROWSER OBJECT MODEL (BOM)
 The window object is supported by all browsers. It represent the
browser's window.
Some Methods:
 window.location.href - returns the href (URL) of the current page
 window.location.hostname - returns the domain name of the web host
 window.location.pathname - returns the path and filename of the current
page
 window.location.protocol - returns the web protocol used (http:// or
https://)
 window.location.assign - loads a new document
Ex:
document.getElementById("demo").innerHTML = window.location.href;
<p id="demo"></p>

WINDOW HISTORY
 The window.history object can be written without the window prefix.
Some methods:
 history.back() - same as clicking back in the browser
 history.forward() - same as clicking forward in the browser
Ex:
function goBack() {
window.history.back()
}
<input type="button" value="Back" onclick="goBack()">

NAVIGATOR
 The Browser Names
 The properties appName and appCodeName return the name of the
browser:
document.getElementById("demo").innerHTML = "Name is " +
navigator.appName + "<br>Code name is " + navigator.appCodeName;
}
<p id="demo"></p>
Result:
Name is Netscape
Code name is Mozilla

THE BROWSER ENGINE
 The property product returns the engine name of the browser
Ex:
function myFunction()
{
document.getElementById("demo").innerHTML ="Browser engine is " +
navigator.product;
}
<p id="demo"></p>
Result:
Browser engine is Gecko

 The property userAgent also returns version information about the
browser.
 Ex:
document.getElementById("demo").innerHTML =navigator.userAgent;
}
<p id="demo"></p>
Result:
Mozilla/5.0 (Windows NT 6.1; rv:34.0) Gecko/20100101 Firefox/34.0

Java Script

More Related Content

What's hot (17)

Viewers also liked (10)

Similar to Java Script (20)

Java Script