CH 3.
Advanced Javascript
1. scripting languages used to develop dynamic websites
2. javaScript is an interpreted scripting language
3. An interpreted language is a type of programming language that executes its instructions directly and freely
without compiling machine language
4. JavaScript was initially created to "make webpages alive
5. Declare a function in JavaScript using function keyword.
6. Features of JavaScript
light weight
it does not support all features of object oriented programming languages.
No need of special software to run
JavaScript is object oriented scripting language
it supports event based programming facility.
input validation
handle date and time very effectively
platform independent
free(Open source)
7. two types of scripting
Client-side Scripting
Server-side Scripting
8. Client-side script resides on client computer (browser) and that can run on the client.
9. Server-side Scripting : In this type, the script resides on web server.
10. clientside scripting is used at the frontend which users can see from the browser.
11. Server-side scripting is more secure than client-side scripting.
12. client-side scripting does not need any server interaction
13. client-side scripting language involves
HTML5,
JavaScript
14. Server side scripting languages.
PHP,
[Link],
Ruby,
ColdFusion,
Python,
C#
15. Server-side scripting is useful in customizing the web pages and implements the dynamic changes in the
websites
16. Client side scripting use for validation purpose and effectively minimize the load to the server.
17. client side scripts requires web browser as an interface
18. Special software (web server software) is required to execute server-side script e.g Wamp server
19. popular framework / libraries.
Angular JS
Vue JS
React
20. javaScript has a built–in multiway decision statement known as Switch.
21. The default statement in switch case is not mandatory.
22. Iteration refers to the execution of statement or a group of statements of code for a fixed number of times or
till the condition is satisfied
23. For loop executes statements as long as condition becomes true, control comes out from the loop when
condition becomes false.
24. Initialization is assigning initial value to the variable, which executes only once
25. While loop executes statements as long as the condition is true
26. Break statement is used to jump out of loop.
27. Break is used to make an early exit from a loop
28. When keyword break is encountered inside the loop, control automatically passes to the next statement after
the loop
29. Sometimes in looping it may be necessary to skip statement block and take the control at the beginning for next
iteration. This is done by using ‘continue’ statement
30. JavaScript is an object based scripting language
31. Almost everything is an object in JavaScript
32. An object can group data together with functions needed to manipulate it
33. Properties and methods of object's are accessed with . (dot) operator.
34. JavaScript supports 2 types of objects
built-in objects
user defined objects
35. Built in objects such as Math, String, Array, Date etc
36. The ‘new’ keyword is used to create new object in JavaScript
37. DOM stands for Document Object Model
38. When HTML document is loaded into a web browser, it becomes a document object.
39. DOM defines logical structure of document
40. The way in which HTML document content is accessed and modified is called as Document Object Mode
41. XML stands for Extensible Markup Language
42. The standardization of DOM was founded by W3C (World Wide Web Consortium)
43. The W3C Document Object Model (DOM) is a platform and languageneutral interface
44. predefined methods and properties for DOM object are
head - Returns the element of the document
title - Sets or returns title of the document.
URL - Returns full URL of the HTML document
body, img -Returns <body>, <img> elements respectively
write() - Writes HTML expressions or JavaScript code to a document
writeln() -Same as write(), but adds a newline character after each statement
getElementById() -There are many ways of accessing form elements, of which the easiest is by
getElementById() method.
45. At the very top of the object hierarchy is the window object.
46. Window object is parent object of all other objects
47. properties for window object.
Name - Sets or returns the name of a window
location -Returns the Location object for the window.
Document- Returns the Document object for the window
Status- Sets or returns the text in the status bar of a window.
closed - Returns a Boolean value indicating whether a window has been closed or not
48. methods for window object.
alert() Displays the alert box containing message with ok button.
confirm() Displays the confirm dialog box containing message with ok and cancel button
prompt() Displays a dialog box to get input from the user.
open() Opens the new window
close() Closes the current window.
blur() Removes focus from the current window.
focus() Sets focus to the current window..
print() Prints the content of current window
setTimeout() Calls a function or evaluates an expression after a specified number of millisecond
49. Events are actions done by the user or an application that occurs on the webpage.
50. Input and other object Events:
Onblur It occurs when user leaves field or losses focus of an element.
Onfocus It occurs when an element gets focus
Onchange It occurs when user changes content of an element or selects dropdown value. E.g. for
textbox, password, select box, textarea etc
Onselect It occurs when user selects some text of an element.
onsubmit It occurs when user clicks submit button.
Onreset It occurs when user clicks reset button.
onload It occurs when page/image has been loaded
onunload It occurs when document/page has been unloaded or closes
51. String is used to store zero or more characters of text within single or double quotes.
52. String object is used to store and manipulate text
53. String length Returns the number of characters in a string .
54. Method of string object
charAt() Returns the character at the specified position (in Number)
indexOf() Returns the index of the first occurence of specified character in given string, or -1 if it
never occurs, so with that index you can determine if the string contains the specified character
lastIndexOf() Returns the index of the last occurence of specified character in given string.
substr() Returns the characters you specified:
substring() Returns the characters you specified
trim() The trim() method removes whitespace from both sides of a string
toLowerCase() Converts a string to lower case
toUpperCase() Converts a string to upper case
55. Number Object properties are
MIN_VALUE Returns the largest minimum value.
MAX_VALUE Returns the largest maximum value
NaN It represents ‘Not a Number’ value.
56. Number object methods are
isInteger() It determines whether the given value is a Integer
parseFloat() It converts the given string into a floating point number
parseInt() It converts the given string into a integer number.
isFixed() It returns the string that represents a number with exact digits after a decimal point
Exercise
Q.1 Fill in the blanks.
1. Server side script resides on server computer
2. Break statement is used to jump out of loop.
3. DOM defines logical structure of document
4. Closed property of window object returns Boolean value indicating whether window is closed or not
5. Onblur event occurs when an element looses its focus.
Q.2. State whether given statement is true or false
1. JavaScript is case sensitive language True
2. [Link]() function is used to return the nearest integer less than or equal to given number.
False
3. MAX_VALUE property of number object returns smallest possible value
False
4. getDay() method of Date object returns month in number False
5. onKeydown event occurs when user moves mouse pointer. Flase.
Q.3. Multiple choice questions. Select one correct answer.
1. JavaScript is ---------------------- language.
a) Compiled b) Interpreted c) Both a and b d) None of the above
2. Select correct method name of String object---------------------.
a) charAt() b) characterAt() c) valueAt() d) lengthAt()
3. ---------------- method displays message box with Ok and Cancel button.
a) Confirm() b) Alert() c) both a and b d) None of these
4. We can declare all types of variables using keyword ------------.
a) var b) dim c) variable d) declare
5. Trace ouput of following JavaScript code.
var str="Information Technology";
[Link] (str. lastIndexOf("o");
a) 18 b) 19 c) 20 d) 21
Q.4. Multiple choice questions. Select two correct answer
1. 1. Valid two methods of Date object are ---------------- and -------------.
a) setTime() b) getValidTime() c) getTime() d) setValidTime()
2. Properties of document object are ---------------- and ----------------.
a) URL b) title c) name d)status
3. ---------- and ----------- are event / event handler used with text object in JavaScript.
a) onBlur b) onMove c) onFocus d) onAction
Q.5 Multiple choice questions. Select three correct answers.
1. Select three correct methods of window object----------------
a) write() b) alert() c) writeln() d) close() e) open() f) charAt()
2. JavaScript features are ----------- ------------ , ---------------and ------ -----------.
a) supports event based facilities b) is platform dependent language
c) case insensitive scripting language d) provide inbuilt objects
e) can handle date and time effectively f) requires special software to run
3. Inbuilt objects in JavaScript are -----------------, ---------------- and --------------.
a) Time b) Date c) Inheritance
d) Array e) Number f) function
Q.6 Explain the following.
1. What are similarities and differences between client side scripting and server side scripting
Ans:
Server-side scripting is used at the backend, where the source code is not visible or hidden at the client
side (browser). On the other hand, clientside scripting is used at the frontend which users can see from
the browser. So Server-side scripting is more secure than client-side scripting.
When a server-side script is processed it communicates to the server. As against, client-side scripting
does not need any server interaction
The client-side scripting language involves languages such as HTML5, JavaScript etc. In contrast,
programming languages such as PHP, [Link], Ruby, ColdFusion, Python, C# etc. are server side scripting
languages
Server-side scripting is useful in customizing the web pages and implements the dynamic changes in the
websites. Conversely, the clientside scripts are generally used for validation purpose and effectively
minimize the load to the server.
Special software (web server software) is required to execute server-side script, whereas client side
scripts requires web browser as an interface.
[Link] explain features of JavaScript.
light weight
it does not support all features of object oriented programming languages.
No need of special software to run
JavaScript is object oriented scripting language
it supports event based programming facility.
input validation
handle date and time very effectively
platform independent
free(Open source)
[Link] switch….........case conditional statement in JavaScript with example.
Ans:
JavaScript has a built–in multiway decision statement known as Switch. The switch statement test the value of
given expression against a list of case values and when match is found, a block of statement associated with that
case is executed.
Eg:
<!DOCTYPE html>
<head><title>Javascript Program
</title></head>
<body>
<h1> use of switch case </h1>
<script type="text/javascript">
var day=6;
switch(day)
{
case 1: alert("Monday"); break;
case 2: alert("Tuesday"); break;
case 3: alert("Wednesday"); break;
case 4:alert("Thursday"); break;
case 5: alert("Friday"); break;
case 6: alert("Saturday"); break;
case 7: alert("Sunday"); break;
default: alert("Invalid day");
}
</script></body></html>
Write event driven JavaScript program for the following
1. Display Addition, multiplication, division and remainder of two numbers, which were accepted from user
Ans: (Event driven)
<!DOCTYPE html>
<head>
<title>Q8 B sesction </title>
<script>
function addn()
{
var a,b;
a=parseInt([Link]);
b=parseInt([Link]);
[Link](a+b);
}
function mult()
{
var a,b;
a=parseInt([Link]);
b=parseInt([Link]);
[Link](a*b);
}
function div()
{
var a,b;
a=parseInt([Link]);
b=parseInt([Link]);
[Link](a/b);
}
function rem()
{
var a,b;
a=parseInt([Link]);
b=parseInt([Link]);
[Link](a%b);
}
</script>
</head>
<body>
<form name="f1">
enter 1st number <input type="text" name="t1">
enter 2nd number <input type="text" name="t2">
<input type="button" value="+" > <input type="button" value="*" > <input type="button" value="/" > <input type="button" value="%" > </form>
</body>
</html>
Ans(Not event driven)
<!DOCTYPE html>
<head>
<title>second method</title>
<script>
var a=parseInt(prompt("enter 1st number"));
var b=parseInt(prompt("enter 2st number"));
[Link]("addition:"+ a+b);
[Link]("multiplication:"+ a*b);
[Link]("diviion:"+ a/b);
[Link]("rem is :"+ a%b);
</script>
</head>
<body>
</body>
</html>
2. Display number sequence from 100 to 150 in following format. (100 101 102.............150)
Ans:( Event driven)
<!Doctype html>
<head>
<script>
function f1()
{
var a=100;
while(a<=150)
{[Link](a);
a++;
}
}
</script>
</head>
<body>
<form>
<input type="button" value="print numbers" > </form>
</body>
</html>
Ans: (not Event driven)
<!Doctype html>
<head>
<script>
var a=100;
while(a<=150)
{[Link](a);
a++;
}
</script>
</head>
<body>
</body>
</html>
3. Find and display factorial of given number
Ans: (Event driven)
<!Doctype html>
<head>
<script>
function f1()
{fact=1;
var a=parseInt(prompt("enter number"));
while(a>=1)
{
fact=fact*a;
a=a-1;
}
[Link](fact);
}
</script>
</head>
<body>
<form>
<input type="button" value="print numbers" ></form>
</body>
</html>
Ans: (Not Event driven)
<!Doctype html>
<head>
<script>
fact=1;
var a=parseInt(prompt("enter number"));
while(a>=1)
{
fact=fact*a;
a=a-1;
}
[Link](fact);
</script>
</head>
<body>
</body>
</html>
4. Accept any string from user and count and display number of vowels occurs in it
<!Doctype html>
<head>
<title></title>
<script>
function f1()
{var i,ch,c,a;
c=0;
a=prompt("enter string to count wowel");
for(i=0;i<=[Link];i++)
{
ch=[Link](i);
if(ch=="A" || ch=="a" || ch=="E" || ch=="e" || ch=="i" || ch=="I" || ch=="o" || ch=="O" || ch=="U"
||ch=="u" )
{c=c+1;}
}
[Link](c);
}
</script>
</head>
<form>
<input type="button" value="iske uuper mouse leke jao" > </form>
<body>
</body>
</html>
Ans: (Not Event driven)
<!Doctype html>
<head>
<title></title>
<script>
var i,ch,c,a;
c=0;
a=prompt("enter string to count wowel");
for(i=0;i<=[Link];i++)
{
ch=[Link](i);
if(ch=="A" || ch=="a" || ch=="E" || ch=="e" || ch=="i" || ch=="I" || ch=="o" || ch=="O" || ch=="U"
||ch=="u" )
{c=c+1;}
}
[Link](c);
</script>
</head>
<body>
</body>
</html>
