Beruflich Dokumente
Kultur Dokumente
4. Define cascading.
Cascading refers to a certain set of rules that browsers use, in cascading order, to determine how to use the style information.
Such a set of rules is useful in the event of conflicting style information because the rules would give the browser a way to
determine which style is given precedence.
5. What are the style precedence rules when using multiple approaches?
Inline styles override both linked style sheets and style information stored in the document head with <STYLE> tag.
Styles defined in the document head override linked style sheets.
Linked style sheets override browser defaults.
9. Define scriptlets.
Scriptlets enable you to create small, reusable web applications that can be used in any web page. Scriptlets are created using
HTML, scripting and Dynamic HTML. To include them in an HTML document use the <OBJECT> tag.
17. ADVANTAGES
i. It is an interpreted language, which requires no compilation steps.
ii. Embedded within HTML.
iii. Minimal Syntax – easy to learn
iv. Quick Development
v. Designed for simple, small programs
vi. High performance
vii. Procedural Capabilities – support facilities such as condition checking, looping and
viii. branching.
ix. Designed for programming user events – like VB Java Script is also based on Events.
x. Easy Debugging and Testing
xi. Platform Independence/ Architecture Neutral
xii. SYNTAX OF JAVASCRIPT PROGRAM
xiii. <HTML>
xiv. <HEAD>
xv. <SCRIPT language = “JavaScript”>
xvi. … body of the script program
xvii. </SCRIPT>
xviii. </HEAD>
xix. <BODY>
xx. <SCRIPT language = “JavaScript”>
xxi. body of the program.
xxii. </SCRIPT>
xxiii. </BODY>
xxiv. </HTML>
18. WHAT IS DENSE ARRAYS?
· A dense array is an array that has been created with each of its elements being assigned a specific
value.
· Dense arrays are used exactly in the same manner as other arrays.
· Dense arrays are declared and initialized at the same time.
Array Methods
Join() – returns all elements of the array joined together as a single string.
Reverse() – reverses the order of the elements in the array.
i. SYNTAX
ii. alert(“message”);
iii. alert(“Click here to continue”)
iv. prompt(“Enter your name”, name)
v. Alert is only used to display some information
vi. Prompt is used to display information along with some input value
vii. Confirm dialog box, causes program execution to halt until user action takes place.
viii. The user action can be either OK or CANCEL.
ix. OK – returns true
x. CANCEL – returns false
xi.
· DHTML is a new and emerging technology that has evolved to meet the increasing demand for
eye-catching and mind-catching web sites.
· DHTML combines HTML with Cascading Style Sheets (CSS) and Scripting Languages. HTML
specifies a web page‟s elements like table, frame, paragraph, bulleted list, etc. CSS can be used to
determine an element‟s size, color, position and a number of other features.
· Scripting Languages (JavaScript and VBScript) can be used to manipulate the web page‟s
elements so that styles assigned to them can change in response to a user‟s input.
32. What are the style precedence rules when using multiple approaches?
Inline styles override both linked style sheets and style information stored in the document head
with <STYLE> tag.
36. List out the differences between Java script & VB script.
37. What is the advantage of client side programming?
38. List out the various client side programming languages.
39. What is java script?
40. What are the uses of Java script?
41. What is the use of prompt and confirm commands.
42. What are the various browsers to be supported .
43. Write a java script program to print first 100 numbers .
44. Write a java script program to print Armstrong numbers between 1 to 500.
45. Draw the DOM model.
PART-B
1.Explain string object used in JavaScript.
Java Script String Object:
The String object let's you work with a series of characters and wraps Javascript's string primitive data type with a
number of helper methods.
Because Javascript automatically converts between string primitives and String objects, you can call any of the
helper methods of the String object on a string primitive.
Syntax:
Creating a String object:
The string parameter is series of characters that has been properly encoded.
String Properties:
Here is a list of each property and their description.
Property Description
constructor Returns a reference to the String function that created the object.
prototype The prototype property allows you to add properties and methods to an object.
String Methods
Here is a list of each method and its description.
Method Description
charCodeAt() Returns a number indicating the Unicode value of the character at the given index.
concat() Combines the text of two strings and returns a new string.
Returns the index within the calling String object of the first occurrence of the specified
indexOf()
value, or -1 if not found.
Returns the index within the calling String object of the last occurrence of the specified
lastIndexOf()
value, or -1 if not found.
Returns a number indicating whether a reference string comes before or after or is the same
localeCompare()
as the given string in sort order.
Used to find a match between a regular expression and a string, and to replace the matched
replace()
substring with a new substring.
search() Executes the search for a match between a regular expression and a specified string.
split() Splits a String object into an array of strings by separating the string into substrings.
Returns the characters in a string beginning at the specified location through the specified
substr()
number of characters.
substring() Returns the characters in a string between two indexes into the string.
The characters within a string are converted to lower case while respecting the current
toLocaleLowerCase()
locale.
The characters within a string are converted to upper case while respecting the current
toLocaleUpperCase()
locale.
document.writeln( "<p>'" +
String.fromCharCode( 87, 79, 82, 68 ) +
"' contains character codes 87, 79, 82 and 68</p>" )
</head><body></body>
</html>
Output:
There are several DOMs in existence. The following sections explain each of these DOMs in detail and describe
how you can use them to access and modify document content.
The Legacy DOM: This is the model which was introduced in early versions of JavaScript language. It is
well supported by all browsers, but allows access only to certain key portions of documents, such as forms,
form elements, and images.
Document Properties in Legacy DOM:
Here is the list of document properties which can be accessed using Legacy DOM:
An array of Anchor objects, one for each anchor that appears in the document
anchors[ ]
Example: document.anchors[0], document.anchors[1] and so on
An array of Applet objects, one for each applet that appears in the document
applets[ ]
Example: document.applets[0], document.applets[1] and so on
A string-valued property with special behavior that allows the cookies associated with this
Cookie document to be queried and set.
Example: document.cookie
A string that specifies the Internet domain the document is from. Used for security purpose.
Domain
Example: document.domain
An array of objects that represent data embedded in the document with the <embed> tag. A
synonym for plugins[ ]. Some plugins and ActiveX controls can be controlled with JavaScript
embeds[ ]
code.
Example: document.embeds[0], document.embeds[1] and so on
Deprecated - A string that specifies the default text color for the document
fgColor
Example: document.fgColor
An array of Form objects, one for each HTML form that appears in the document.
forms[ ]
Example: document.forms[0], document.forms[1] and so on
An array of Image objects, one for each image that is embedded in the document with the
images[ ] HTML <img> tag.
Example: document.images[0], document.images[1] and so on
A read-only string that specifies the date of the most recent change to the document
lastModified
Example: document.lastModified
links[ ]
links[ ]
Example: document.links[0], document.links[1] and so on
A read-only string that contains the URL of the document, if any, from which the current
referrer document was linked.
Example: document.referrer
Closes a document stream opened with the open( ) method and returns nothing.
close( )
Example: document.close( )
Deletes existing document content and opens a stream to which new document
open( ) contents may be written. Returns nothing.
Example: document.open( )
Inserts the specified string or strings into the document currently being parsed
write( value, ...) or appends to document opened with open( ). Returns nothing.
Example: document.write( value, ...)
The W3C DOM: This document object model allows access and modification of all document content and
is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the
modern browsers.
Document Properties in W3C DOM:
This model supports all the properties available in Legacy DOM. Additionally, here is the list of document
properties which can be accessed using W3C DOM:
A reference to the Element object that represents the <body> tag of this document.
Body
Example: document.body
Its Read-only property and represents the window in which the document is displayed.
defaultView
Example: document.defaultView
Its Read-only property and represents the DOMImplementation object that represents the
implementation implementation that created this document.
Example: document.implementation
The IE4 DOM: This document object model was introduced in Version 4 of Microsoft's Internet Explorer
browser. IE 5 and later versions include support for most basic W3C DOM features.
Document Properties in IE 4 DOM:
The following non-standard (and non-portable) properties are defined by Internet Explorer 4 and later versions.
A read-only property that refers to the input element that is currently active (i.e., has the input
activeElement focus).
Example: document.activeElement
An array of all Element objects within the document. This array may be indexed numerically
all[ ] to access elements in source order, or it may be indexed by element id or name.
Example: document.all[ ]
An array that contains the HTML elements that are direct children of the document. Note that
this is different than the all[ ] array that contains all elements in the document, regardless of
children[ ]
their position in the containment hierarchy.
Example: document.children[ ]
expando This property, if set to false, prevents client-side objects from being expanded.
Example: document.expando
Specifies the loading status of a document. It has one of the following four string values:
readyState
Example: document.readyState
The document has loaded sufficiently for the user to interact with it.
interactive
Example: document.interactive
DOM compatibility
If you want to write a script that uses the W3C DOM when it is available, and otherwise uses the IE 4 DOM if it is
available, you can use a capability-testing approach that first checks for the existence of a method or property to
determine whether the browser has the capability you desire. For example:
if (document.getElementById) {
else if (document.all) {
else {
Function Definition:
Before we use a function we need to define that function. The most common way to define a function in JavaScript
is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty),
and a statement block surrounded by curly braces. The basic syntax is shown here:
<script type="text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->
</script>
Example:
A simple function that takes no parameters called sayHello is defined here:
<script type="text/javascript">
<!--
function sayHello()
{
alert("Hello there");
}
//-->
</script>
Calling a Function:
To invoke a function somewhere later in the script, you would simple need to write the name of that function as
follows:
<script type="text/javascript">
<!--
sayHello();
//-->
</script>
Function Parameters:
Till now we have seen function without a parameters. But there is a facility to pass different parameters while
calling a function. These passed parameters can be captured inside the function and any manipulation can be done
over those parameters.
A function can take multiple parameters separated by comma.
Example:
Let us do a bit modification in our sayHello function. This time it will take two parameters:
<script type="text/javascript">
<!--
function sayHello(name, age)
{
alert( name + " is " + age + " years old.");
}
//-->
</script>
Note: We are using + operator to concatenate string and number all together. JavaScript does not mind in adding
numbers into strings.
Now we can call this function as follows:
<script type="text/javascript">
<!--
sayHello('Zara', 7 );
//-->
</script>
The history property has the return value as history object, which is an array of history items having details of the
URL‟s visited from within that window. Also, note that the History object is a JavaScript object and not an HTML
DOM object An example to understand the length property of history object:
<html>
<body>
<script type="text/javascript">
var ex = history.length;
document.write("The number of pages visited
before this page is" +ex+ " pages!!!.")
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function funback()
{
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Press the Button to go
to Previous Page!!!" onclick="funback()" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function funfor()
{
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Press the Button to go
to Next Page!!!" onclick="funfor()" />
</body>
</html>
Regular expressions in JavaScript are used through the RegExp object, which is a native JavaScript object, as are
String, Array, and so on. There are two ways of creating a new RegExp object. The easier is with a regular
expression literal, such as the following:
var myRegExp = /\b‟|‟\b/;
The forward slashes (/) mark the start and end of the regular expression. This is a special syntax that tells JavaScript
that the code is a regular expression, much as quote marks define a string‟s start and end.
Alternatively, you could use the RegExp object‟s constructor function RegExp() and type the following:
Repetition Characters
Eg:
Text String: ‘Now is is the time’
Case1: string „Now‟ was found
RegExp = /Now/
Replace() Method
<html>
<head>
< <title>Regular Expression</title>
</head>
<body>
<script language = "JavaScript" type = "text/JavaScript">
var myString = "JavaScript, VBScript and Perl";
var myRegExp = /\b(VB)?(Java)?Script\b/gi;
myString = myString.replace(myRegExp, "xxxx");
alert(myString);
</script>
</body>
</html>
O/P:
Match() Method
<html>
<head>
<title>Match method</title>
</head>
<body>
</script>
</body>
</html>
O/P:
First dialog box: 1999
second dialog box: 2000
third dialog box: 2001
Search() Method
<html >
<head>
<title>Search Method</title>
</head>
<body>
<script language="JavaScript" type = "text/JavaScript">
var myString = "Beginning JavaScript, Beginning Java 2, Professional JavaScript";
var myRegExp = /\b Professional\b /i ;
alert (myString.search(myRegExp));
</script>
</body>
</html>
O/P:
First dialog box: 40
Split() Method
<html>
<head>
<title>split Method</title>
</head>
<body>
<script language = "JavaScript" type = "text/JavaScript">
var myListString = "apple, 0.99, banana, 0.50, peach, 0.25, orange, 0.75";
var theRegExp = /[^a-z]+/i;
var myFruitArray = myListString.split (theRegExp);
document.write (myFruitArray.join ("<br>"));
</script>
</body>
</html>
O/P:
apple
banana
peach
orange
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?
An array can hold many values under a single name, and you can access the values by referring to an index number.
Create an Array
1: Regular:
2: Condensed:
3: Literal:
var myCars=["Saab","Volvo","BMW"];
(b)Discuss about Javascript debugging.
6. i) Write a simple program in javascript to print multiple line of text in a web page with a program
with single statement
Ans. <html>
<head>
<title>Printing a Line with Multiple Statements</title>
(ii) Write a java script program for alert dialog box displaying multiple lines.
Ans. <html>
<head><title>Printing Multiple Lines in a Dialog Box</title>
</head>
<body>
<p>Click Refresh (or Reload) to run this script again.</p>
</body>
</html>
Output:
Then ok is clicked on
Click Refresh (or Reload) to run this script again.
.(ii) Write a java script program for alert dialog box displaying multiple lines.
Ans.
<html>
<head>
<title>Class Average Program</title>
// Initialization Phase
total = 0; // clear total
gradeCounter = 1; // prepare to loop
// Processing Phase
while ( gradeCounter <= 10 ) { // loop 10 times
// add 1 to gradeCounter
gradeCounter = gradeCounter + 1;
}
// Termination Phase
average = total / 10; // calculate the average
</head>
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
</html>
Output:
The entered the 10 number in prompt window
7. i) Write a program in java script to calculate a class average using sentinel controlled repetition
<html>
<head>
<title>Switching between XHTML List Formats</title>
switch ( choice ) {
case "1":
startTag = "<ul>";
endTag = "</ul>";
listType = "<h1>Bullet List</h1>";
break;
case "2":
startTag = "<ol>";
endTag = "</ol>";
listType = "<h1>Ordered List: Numbered</h1>";
break;
case "3":
startTag = "<ol type = \"A\">";
endTag = "</ol>";
listType = "<h1>Ordered List: Lettered</h1>";
break;
default:
validInput = false;
}
if ( validInput == true ) {
document.writeln( listType + startTag );
document.writeln( endTag );
}
else
document.writeln( "Invalid choice: " + choice );
// -->
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
</html>
Output:
1. List item 1
2. List item 2
3. List item 3
Click Refresh (or Reload) to run the script again
. (ii) Write a program in java script to switch between XHTML list formats using switch case
statement.
8. (i) Write a program in java script to convert number bases
Ans. <!DOCTYPE html>
<html>
<body>
var x = document.getElementById("demo");
x.innerHTML=n
}
</script>
</body>
</html>
Output:
15
1111
17
f
9. .(ii) Write a program in java script to find maximum of 3 numbers using standard mat function.
<html>
<head>
<title>Finding the Maximum of Three Values</title>
10. (i) Write a program in java script to calculate factorial using recursive function.
<html >
<head>
<title>Recursive Factorial Function</title>
11.
12. <script type = "text/javascript">
13. <!--
14. document.writeln( "<h1>Factorials of 1 to 10</h1>" );
15. document.writeln(
16. "<table border = '1' width = '100%'>" );
17.
18. for ( var i = 0; i <= 10; i++ )
19. document.writeln( "<tr><td>" + i + "!</td><td>" +
20. factorial( i ) + "</td></tr>" );
21.
22. document.writeln( "</table>" );
23.
24. // Recursive definition of function factorial
25. function factorial( number )
26. {
27. if ( number <= 1 ) // base case
28. return 1;
29. else
30. return number * factorial( number - 1 );
31. }
32. // -->
33. </script>
34. </head><body></body>
35. </html>
36. Output:
37. Factorials of 1 to 10
0! 1
1! 1
2! 2
3! 6
4! 24
5! 120
6! 720
7! 5040
8! 40320
9! 362880
10! 3628800
(ii)Write program in java script to sort an array.
<html>
<head>
<title>Sorting an Array with Array Method sort</title>
Sorting an Array