Javascript 1

Javascript
1Computer Network & Web Tech (SET, JU)

Introduction
• 3 Components in design of a Web page
 HTML  content
 CSS  appearance
 Javascript  dynamic behaviour
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html> js1

Introduction
• All major web browsers contain JavaScript interpreters, which process
the commands written in JavaScript
 IE9 prevents scripts from running by default
 Need to change browser settings to enable scripting
 Firefox, Chrome, Opera, Safari (including on the iPhone) and the
Android browser - JS enabled by default
 Google – Settings > Privacy -> Content Settings
• Setting to check error while running program
 Error console for displaying errors

Embedding Javascript
 Use <script> tag, in <head> section of HTML documents usually
 Indicates to the browser that the text that follows is part of a script
 <type> attribute indicates the programming language – default JS
 Either contains scripting statements, or it points to an external script file
through the src attribute
<script type=“text/javascript">
<!- hide this stuff from old browsers
document.writeln(“<h1> Welcome to JS programming </h1>”)
// - -> end hiding
</script>
Js2
Prior to html5

Output
 Writing into an HTML element, using innerHTML
 Writing into the HTML output using document.write()
 Writing into an alert box, using window.alert()
 Writing into the browser console, using console.log()

Changing HTML Content
 Common uses for JavaScript are image manipulation, form validation,
dynamic changes of content
 Within body, have an element to invoke the function, and another with
id “demo” whose content will be modified
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p> js3
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
}
</script>

Changing HTML Attributes
 Example: Change an image by changing src attribute
<button onclick = "document.getElementById('myImage').src
='bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src
='bulboff.gif'">Turn off the light</button>
js5

Changing HTML Styles
 For changing style
• Note: Javascript accepts both single and double quotes
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red"; }
</script>
js4

Hide and Show Elements
 Hiding HTML elements can be done by changing the display style:
 Showing hidden HTML elements can also be done by changing the
display style
document.getElementById("demo").style.display = "none";
js6
document.getElementById("demo").style.display = “block";

Javascript Syntax
 Statements with
 Values (literals and variables)
 Operators
 Expressions
 Keywords
 Comments

Operators
 Arithmetic
a + b, a – b, a % b, a * b, a / b
 Rule of precedence as in algebra
 Multiplication, Division, Remainder  same level L to R
 Addition & Subtraction  same level L to R
 a + b + c + d / 4
 (a + b + c + d)/ 4
 Good practice to use parenthesis to make expressions clear

Operators
 Bitwise : &, |, ~, ^, <<, >>
 Relational : > , <, >=, <=
 Equality: ==, !=
 Logical: &&, ||
 Assignment: =
 Unary post/pre increment or decrement operators ++, --
Precedence
•Multiplicative
•Additive
•Relational
•Equality
•Assignment

Variables
 All variables declared using keyword ‘var’ (keyword  reserved)
 Location in memory where value can be stored for later use
 Has name, type, value
<html>
<head>
<script>
var name; //string entered by user
name=window.prompt(“Enter your name”);
document.writeln(“<h1> Hello,” + name +
“; welcome ! </h1>”) ;
</script>
</head>
<body>
<p > Click to Refresh </p>
</body>
</html>
js7

Windows Prompt
– Taking User Input
 If ‘Cancel’ clicked, value “null” submitted (absence of value)
 Else, name entered is returned by windows.prompt (as string)
and gets assigned to name variable
name = windows.prompt (“Enter your name “);
 Assignment statement  right side evaluated first
 HTML loaded after dialog boxes dismissed

Windows Alert
 Predefined dialog box called ‘alert’ - used for popups
<html>
<head>
<script>
Window.alert(“Welcome to n Javascript n programming”);
</script>
</head>
<body>
<p > Click Refresh to run script again </p>
</body>
</html>
js9

Variables
 Good practice to declare variables using <var>, not necessary
 Value at time of declaration or later
<head>
<script>
var sec_per_min=60;
var min_per_hr=60;
var hr_per_day=8;
var secs_per_day;
secs_per_day= sec_per_min * min_per_hr * hr_per_day;
</script>
</head>
<body>
<script>
document.write(“A student studies”)
document.write(secs_per_day + “ seconds per day </b>”);
</script>
</body> Js8,js10

Variables - Loose typing
 Variables can be assigned to data type without declaring
 Javascript converts data type
 + concatenation with string, addition with integer
“My age is “ + 21  converts data to string
 String is a group of characters

Naming Variables
 Case sensitive -> str, Str, STR different
 Combination of characters – letters, digit, underscore, $
 Does not begin with digit, cannot be a kerword
 Valid - $val, _val, m_val, val7
 Invalid - 7val
Good programming practices
• Use meaningful names – itemPrice
• Comment purpose of variable at time of declaration
// single-line comment
/* Multiple line
Comment */ 18Computer Network & Web Tech (SET, JU)

Branching
 If, if .. else …
 Nested If… else if .. else if ..
 Indentation good programming practice – increases readability
 But note that else with previous if – better to use brackets
If (x > 5)
If (y>5)
document. write (“x> 5 and y>5”)
else
document.write (“x<5”)  wrong

Conditional If
var name;
var now=new date(); //current date and time
var hr = now.getHours(); // current hour 0 - 23
If (hr <12 )
document. write (“Good morning”);
else {
hr=hr-12;
if (hr < 6)
document.write (“Good afternoon”) ;
Else
document.write(“Good evening”); } 20Computer Network & Web Tech (SET, JU)

Looping
 While  repetition on entry
var cnt=0;
while (cnt<5) {
….
cnt ++; }
 For  repetition on entry
for (cnt=1; cnt<=7; ++cnt) cnt++, cnt+=1
for (loop=0; loop < width; loop++) {
a_line = a_line + "x";
}
var password="passport";
var answer;
while (answer != password) {
answer = prompt("What's the word?","");
}
document.write(“<h1>That’s correct</h1>”);

Labelled Break & Continue
<script>
Stop: { //labelled block
for (var row=1; row <=10; ++row) {
for (var col =1; col <=5; ++col) {
if (row==5)
break stop;
document. write (“*”); } //end for
document.writeln(“<br/>”); } //end for
document.writeln(“This line should not print”);
} // end block labelled stop
document.writeln(“End of script”);
</script>

Javascript Functions
• Divide and conquer using functions
• Help in modularity, reusability
• Avoid repeating pieces of code
• Function invoked using name and arguments
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
• Calling function asks called function to perform task and return task
after result is done
var x = myFunction(4, 3); // Function is called, return value

Javascript Built-in Functions
• Functions belong to Javascript objects called methods
• Rich collection for string, date-time, array manipulations, calculations
• Use such built-in functions - less development time, less chance of error
function maximum(x, y, z) {
return Math.max(x, Math.max(y, z); }
<script>
var input1 = windows.prompt(“Enter number 1”)
var value1 = parseFloat(input1);
var maxval = maximum(value1, value2, value3);
</script> 24Computer Network & Web Tech (SET, JU)

Javascript Objects
var person = {
firstName:“Akash",
lastName:“Agarwal",
age:50,
eyeColor:"black"
};
• Properties: name-value pairs
• All instances of person object have same properties, but different values
for these properties
• Property can be accessed as objectName.propertyName or
objectName["propertyName"]
person.lastName;
person["lastName"];

Object Methods
var person = {
firstName:“Akash",
lastName:“Agarwal",
age:50,
eyeColor:"black“
fullName function() {return this.firstName + " " + this.lastName;}
};
• Methods are actions that can be performed on objects
• All methods of person object have same methods, but the methods are
performed at different times
• Methods can be accessed as objectName.methodName()
person.fullName;

String Object
var txt = “testing**"; txt = “’testing’**";
var sln = txt.length;
Series of characters / special characters *, _ , () etc.
• Property - length
• Escape characters used with quotes
var x = "John";
var y = new String("John");
(x==y)  true as value same
(x===y)  false as types different
Also string objects cannot be compared

String Methods
charAt(index)  returns string containing character at index, or empty string if NA
charCodeAt(index)  returns unicode value of character at position or NaN if NA
If s= “ZEBRA” s. charAt(0)  “Z” ; s.charCodeAt(0) 90
If s=“TeStInG”, s1.LowerCase  “testing” ;
s1.UpperCase  “TESTING”
• fromCharCode(value1, value2)  Converts a list of unicode values to
corresponding character string
string.fromCharCode(87, 79, 82, 68)  “WORD”
• s1.concat(s2)  concatenates s1 with s2, returns new string

String Search Methods
ltrl=“abcdefghidef”
ltrl.indexOf(“def”) 3
ltrl.LastindexOf(“def”) 10
ltrl.LastindexOf(“def”,7) 10
ltrl.LastindexOf(“def”,10) 3
ltrl.searchf(“def”) 3
• Search() and indexOf() functions similar, differences are as follows:
• search() method cannot take a second start position argument.
• The search() method can take much more powerful search values (regular
expressions)

String Extraction Methods
slice(start, end)
var str = "Apple, Banana, Kiwi“
str.slice(7,13)  Banana str.slice(-12, -6)  Banana
Omit the second parameter, the method will slice out the rest of the string
substring(start, end)
substring() is similar to slice(), except cannot receive negative inputs
substr(start, length)
substring() is similar to slice(), except 2nd parameter specifies length

Replacing String Content
replace() method replaces a specified value with another value in a string
var str = "Apple, Banana, Kiwi“;
var n =str.replace( “Banana “, “Orange”) ;
 replace() does not change the string it is called on, returns a new string
 replaces only first occurrence until /g option specified
n = str.replace(/an/g, “st");
 Case sensitive method
 To replace case insensitive, use a regular expression with an /i flag
n = str.replace(/AN/i, “st");

Math Object
Math.round(4.5)  5 Math.round(4.4) 4
Math.ceil(4.2)  5 Math.ceil(-4.2)  -4 Math.floor(x)
Math.abs(-2.7)  2.7
Math.pow(8, 2)  64 (x to the power y)
Math.exp(x)  (e to the power x) exp(1.0)  2.718
Math.log(x)  (natural log base e of x) log(2.718) 1.0
max(2.3, 12.7)  12.7
min(-2.3, -12.7)  -12.7
sin(x), cos(x), tan(x), sqrt(x)
CONSTANTS
Math.PI  22/7, Math.SQRT2 1.414, Math.E  2.718, Math.LN20.693

Date Object
getDate() Get the day as a number (1-31)
getUTCDate() Get the day as in Universal Time Zone
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)
setDate(val) Set the day as a number (1-31), can add number
d.setDate(d.getDate() + 50);
setFullYear(y,m,d) m,d optional, if not mentioned default from current date

Working with Date Object
Parsing Dates
Date.parse() returns the number of milliseconds between the date and January 1,
1970 from a valid string
<script>
var msec = Date.parse("March 17, 2015");
document.getElementById("demo").innerHTML = msec;
</script>
Comparing Dates
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);
if (someday > today) { text = "Today is before January 14, 2100.";}
else { text = "Today is after January 14, 2100."; }

Number Object
var x = 9.656;
x.toString() Returns string “9.656” in place of number
x.fixed(2) Returns specified number of decimals i.e. 9.66
x.toPrecision(2) Returns 9.7
x.valueOf Returns numeric value from object or other data type
var b= new boolean(true)
b.toString  “true”
b.valueOf ()  1

Converting Variables to Numbers
number() Returns a number, converted from its argument
parseInt() Parses a string and returns a whole number*
parseFloat() Parses a string and returns a number*
*Spaces are allowed. Only the first number is returned
x = true;
Number(x); // returns 1
parseInt("10.33"); // returns 10
parseFloat("10.33"); // returns 10.33
x = "10 20"
Number(x); // returns NaN

Arrays
 Data structure consisting of related data items
 Group of memory locations that have same name, usually same data type
 Used to allocate memory, instantiate object
var c=new Array(12)  elements not initialized, undefined
Initialization
for var i=0; i < c.length, ++i)
c[i] = i  length of array c
// iterate through elements of array using for .. In
for (var i in theArray)
total +=theArray[i]
Definition & initialization together
var n = new Array (10, 20, 30, 40, 50); 37Computer Network & Web Tech (SET, JU)

Declaring & Allocating Arrays
 Arrays use space in memory
 ‘new’ dynamic memory location operator
 Referred using []
 Number within square bracket indicates size during declaration
 Called subscript or index
 Arr_name[0] –refers to first element arr_name[6]  7th element
 c.length  length of array c
 Arrays used when you want the element names to be numbers
 If a=6, b=5, c[a+b]+=2  Increment c[11] by 2

Pass By Reference
 Pass by value  when arguments passed, copy of arguments value is
made and passed to calling function
(numbers, strings, boolean values)
 Pass by reference  caller gives called function direct access to caller’s
data and also allows to modify it
 Address of memory location where data resides is passed
(objects, arrays passed by reference)

Linear Search in Arrays
 Var a = [10, 9, 1, 3, 5, 7]
function linearSearch(a, key)
{
for (var n=0; n<a.length, ++n)
if ( a[n] == key)
return n;
return -1;
}

Sorting Arrays
 Var a = [10, 9, 1, 3, 5, 7]
function compareInt(val1, val2)
{return parseInt(val1) – parseInt(val(2))
Complete sort function using this…

Split & Join Functions
 Split function to split string into array elements
vary parts = "cpu,disk,memory,monitor,keyboard,mouse";
var parts_array = parts.split(",");
for (loop=0; loop < parts_array.length; loop++)
{
document.writeln("A computer has " + parts_array[loop] + ".<br>");
}
Join method of array to join string, may use different delimiter
document.getElementById(“output”).value = parts_array.join(“n”);

Window Object
 Used for manipulating browser window
window.open(URL, name, options)  creates new window with URL and name
as mentioned, visible features set by options
window.prompt(prompt)  displays user box asking foruser input
windows.close  close current window & delete object from memory
windows.focus  set focus to that window
windows.blur  take away focus
windows.document  property  document object representing the
visible document in the window
windows.closed  property boolean value, true if window closed

Document Object
 Used for manipulating the document visible in browser window
write(string)  write string to HTML doc as HTML code
writeln(string)  write as above, add a line feed
Each such “write” resumes writing where stopped before.
For writeln, next write begins on new line
<script>
document.write(“<h1 style =”color : red ” >”);  modify to display in red
document.write(“Welcome to programming in Javascript “ </h1> “);
</script>

Document Object
 One can write multiple lines using single sentence
writeln(“ Welcome to <br/> programming <br/> in Javascript”)
 Use “+” operator to split statement over multiple line, but rendered as
single line
<script>
document.write(“<h1 style =”color : red ” >”);  modify to display in red
document.write(“Welcome to programming in” +
“Javascript” </h1>”);
</script>

Document Object Model
 When browser loads a page, creates a DOM for page
 Gives access to all elements in page
 Using JS, elements in page can be created, modified, removed
Modelling a Document: DOM Nodes & Trees
Every element in HTML page is modelled by web browser as DOM node
Nodes in a document together make up a tree
– Describes relationship among nodes
− Nodes related among each other using parent-child relationship
− HTML element inside another – container element parent, contained
element child
− Nodes may have multiple children, but only single parent

Demonstration of TREE
<html>
<head>
<title> DOM Tree Demo </title>
</head>
<body>
<h1> HTML Page </h1>
<p> Here is the list: </p>
<ul >
<li>One</li>
<li>Two</li>
</ul>
</body>
</html>
-#document
- html
- head
-title
#text
- body
- h1
#text
-#text
-p
#text
-#text
- ul
-li
#text
-li
#text

 Standard object model and programming interface for HTML
 HTML DOM defines:
 HTML elements as objects
 Properties of all HTML elements
 Methods to access all HTML elements
 Events for all HTML elements
<script>
document.getElementById(“Hello”).innerHTML=“Hello”;
</script>
</html>
Methods
document.getElementByTagName(name)  find elements by tagname
document.getElementByClassName(name)  nonunique, array 49Computer Network & Web Tech (SET, JU)

 The HTML DOM is a standard for how to get, change, add, or delete
HTML elements (nodes) dynamically
 Also used to
 Change attributes , CSS styles in the page
 React to all existing HTML events in the page
 Create new events in the page
Adding & Deleting Elements
document.createElement(name)
document.removeChild(name)
document.appendChild(name)
document.replaceChild(new, old)
Changing attributes & styles
element.innerHTML = new html content
element.attribute= new value;
element.setAttribute(attribute,value)
element.style.proerty= new style

Traversing & Modifying DOM Tree
 Create New Node
<div id="div1">
<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);  add text to p
var element = document.getElementById("div1");
element.appendChild(para);  add as last node of div1
</script>
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);  add before p1 51Computer Network & Web Tech (SET, JU)

Traversing & Modifying DOM Tree
 Remove Existing Node
<script>
var parent = document.getElementById("div1");
parent.removeChild(child);
</script>
 Replace Child
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
parent.replaceChild(para, child);
</script>

Document Object Properties
document.cookie
 Returns document’s cookie
(Piece of data in user’s computer maintaining information about
client during & in between sessions)
 Contains name-value pairs separated by semicolon
if (document.cookie)
{
var myCookie=unescape(document.Cookie);
var cookieTokens =myCookie.split(“;“)
name = cookieTokens[i]
}

Document Object Properties
document.anchors Returns all <a> elements that have a name attribut
document.URI Returns URI of document
document.domain Returns domain name of document server
document.lastModified Returns the date and time the document was updated
document.links Returns all elements that have a href attribute
document.title Returns title of document

Javascript 1

More Related Content

What's hot (18)

Similar to Javascript 1 (20)

More from pavishkumarsingh (19)

Recently uploaded (20)

Javascript 1

Editor's Notes