Scribd
Upload
6K views42 pages

Web Technologies Material For Degree Students

The document discusses HTML, CSS, and DOM. It defines HTML as the scripting language used to create web pages using markup tags. It describes the basic structure of an HTML page and common tags like <head>, <body>, <h1>, and <p>. It also defines tables in HTML and provides an example. The document then explains what DOM is and how browsers use it to access and dynamically update page content, structure and style. It provides examples of how JavaScript can manipulate HTML elements using the DOM. Finally, it defines CSS and the different types of style sheets (inline, internal, external) that can be used to control page styling and presentation separately from HTML structure.

Uploaded by

THE KING
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6K views42 pages

Web Technologies Material For Degree Students

The document discusses HTML, CSS, and DOM. It defines HTML as the scripting language used to create web pages using markup tags. It describes the basic structure of an HTML page and common tags like <head>, <body>, <h1>, and <p>. It also defines tables in HTML and provides an example. The document then explains what DOM is and how browsers use it to access and dynamically update page content, structure and style. It provides examples of how JavaScript can manipulate HTML elements using the DOM. Finally, it defines CSS and the different types of style sheets (inline, internal, external) that can be used to control page styling and presentation separately from HTML structure.

Uploaded by

THE KING
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 42

WEB Technologies

1. What is HTML and Explain the Structure of HTML.


Ans:

HTML is the scripting language which is used to create web pages.

HTML stands for Hyper Text Markup Language

 HTML describes the structure of Web pages using markup


 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 There are different types of HTML tags such as "heading", "paragraph",
"table", and so on
 Browsers do not display the HTML tags, but use them to render the
content of the page

Structure of HTML Page


<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Note: The content will be displayed on the browser which is in <body> tag


only.

 The <!DOCTYPE html> declaration is used to define the document will be


HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

Eg:

<!DOCTYPE html>

<html>

<head>

<title>Demo</title>

</head>

<body>

<h1>Vignan Degree College</h1>

<p> Hello Every one… All Are Welcome</p>

</body>

</html>

2. Define Table? Discuss about tables in HTML with an example

Table Tag

==============

The Table tag is the container tag which is used to create the table on the web page.

The Table contains the different following sub tags are as follows:

1. <TH> Tag
2. <TR> Tag

3. <TD> Tag

1. <Th> Tag

===============

It is the container tag which is used to display the table heading in the table on the web page.

Syntax:

<table>

<th> heading </th>

</table>

2. <Tr> Tag

===============

It is the container tag which is used to display or create the table row on the web page for the
existed or particular table.

Syntax:

<table>

<tr> ....... </tr>

</table>

3. <TD> Tag

===============
It is the container tag which is used to write the contents for the given table.

<TD> stands for Table Data

Syntax:

<Table>

<TD> .......... </td>

</table>

The Table Tag and its the following tags contains the different attributes are as follows:

1. Align

2. border

3. BgColor

4. Cell Spacing

5. Cell Padding

6. Border Color

7. Rowspan

8. colspan

1. Align

==========

This attribute is used to set the table or data of the table in particular alignments like:
Left/Center/Right
2. Border

============

This attribute is used to set the border for the table.

3. BGcolor

==============

This attribute is used to set the background color for the given table

4. Cellspacing

=================

This attribute is used to set the cell spacing in between the cells.

5. Cellpadding

==================

This attribute is used to set the length in between the cell and the cell data.

6. BorderColor

=================

This attribute is used to set or apply the different borders' color.

7. Colspan

==============

This attribute is used to divide the table's column in the particular no. of columns.

8. Rowspan
===============

This attribute is used to divide the table's Row in the particular no. of Rows.

Syntax:

<TABLE [align] [border] [bordercolor] [cellspacing] [cellpadding] [bgcolor]


[rowspan] [colspan].....>

<th>............. </th>

<tr>.............. </tr>

<td>..............</td>

</Table>

Eg:

<html>

<head>

<title> Table Demo </title>

<body>

<table align="center" border=2 bgcolor="#938281" cellspacing=5 cellpadding=3 bordercolor="red">

<tr bgcolor="Orange">

<th> Sno </th>

<th> Name</th>

<th> Course</th>

<th> Fees </th>


<th> Duration</th>

</tr>

<tr bgcolor="pink">

<td> 101 </td>

<td> ABC </td>

<td> BTech </td>

<td> 31000 </td>

<td> 4 Years </td>

</tr>

<tr bgcolor="pink">

<td> 102 </td>

<td> AAA </td>

<td> MBBS </td>

<td> 310000 </td>

<td> 5 Years </td>

</tr>

<tr bgcolor="pink">

<td> 103 </td>

<td> BBB </td>

<td> MTech </td>

<td> 150000 </td>


<td> 2 Years </td>

</tr>

</TABLE>

</BODY>

</HEAD>

</HTML>

3) What is DOM ? Explain in detail.

Ans:

DOM
The DOM is a W3C (World Wide Web Consortium) standard.

It is used to define the standards for accessing the documents.

The W3C DOM is used to allows programs and scripts to access the data and
update the data dynamically to the content, structure and style of the document

There are 3 different parts we have such as follows:

 Core DOM - standard model for all document types


 XML DOM - standard model for XML documents
 HTML DOM - standard model for HTML documents

HTML DOM
The HTML DOM is a standard object model and programming interface for
HTML. It defines:

 The HTML elements as objects


 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements
It is a standard HTML DOM for getting, changing, adding or deleting the
HTML elements or Tags.

Whenever a web page is loaded, the browser creates a Document Object Model


of the page.

Through the help of Document Object Model, Javascript allows to create the dynamic HTML such as
follows:

 JavaScript can change all the HTML elements in the page


 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page

JavaScript - HTML DOM Methods


HTML DOM methods are actions you can perform (on HTML Elements).

HTML DOM properties are values (of HTML Elements) that you can set or
change.
The DOM Programming Interface
The HTML DOM can be accessed with JavaScript (and with other programming
languages).

All HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set

A method is an action you can do.

Eg:1

<!DOCTYPE html>

<html>

<body>

<h2>My First Page</h2>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "Hello World!";

</script>

</body>

</html>

Note:

getElementById is a method, while innerHTML is a property.

JavaScript HTML DOM Document


The HTML DOM document object is the owner of all other objects in your
web page.
The HTML DOM Document Object
The document object is used to represents web page.

If you want to access any element in an HTML page, you always start with
accessing the document object.

Method Description

document.getElementById(id) Find an element by element id

document.getElementsByTagName(name) Find elements by tag name

document.getElementsByClassName(name) Find elements by class name

Eg:

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<p>The DOM is very useful.</p>

<p>This example demonstrates the <b>getElementsByTagName</b> method</p>

<p id="demo"></p>

<script>

var x = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML =

'The first paragraph (index 0) is: ' + x[0].innerHTML;

</script>
</body>

</html>

4) What is Cascading Style Sheets? Explain different types of


Style Sheets in CSS.
Ans:
CASCADING STYLE SHEET (CSS)
=========================================

 Cascading style sheet is a simple mechanism for adding style (eg: fonts, style, colors, spacing) to
web documents
 CSS allows documents authors to specify the presentation of elements on a web page (spacing,
margins, etc) separately from the structure of the document (section headless, body text, links,
etc.
 This separation of structure from presentation simplifies maintaining and modifying a
document’s layout.

There are 3 types of CSS are as follows:

-----------------------------------------------------

1. Inline Style Sheet

2. Internal Style Sheet

3. External Style Sheet

1. Inline Style Sheet

This type of Style sheet is used to apply for the particular tag only.
or

The Inline style is used in the relevant tag only.

That means where we want to change the document style at that place only can be done by using the
<style> tag.

<p style =”color: orange; margin-left: 20px”>

Hello! Sadaq. </p>

2. Internal Style Sheet

a) The internal style sheet must be used in a single document.

b) The internal style sheet is used in the head section only

c) The internal style sheet is used by using the <style> tag only

Syntax:

<head>

<style type =”text/css”>

Hr {color: orange}

P {margin-left: 20px}

</style>

</head>
3. External style sheet:
The external style sheet is used to change the look of entire website by changing one file.

If we link to the style sheet then use the <link> tag.

The <link> tag uses only, inside the head section.

Syntax:
<head>

<link rel =”style sheet” type =”text/css” href =”my style.css”/>

<Head>

The external style sheet can be written in any of the text editor.

The external style sheet does not contain any of the of the html tags.

Eg: hr {color: orange}

P {margin-left: 20px}

Body {back ground-image: URL(“images/back4.gif”)}

5) Explain about Properties in CSS in detail with an example?


There are different types of properties in CSS are as follows:

Properties in Css :
1. Font:
The font has different types of properties such as follows:

Font -size: Absolute/Relative;

Font- family: serif/sans-serif/mono space/times new roman;

Font-style: Normal/Italic/ Oblique;

Font-weight: Normal/bold/ lighter/100/200……….900

Font-variant: Normal/small caps / Inherit

Eg: <html>

<Head>

<style type=”text/css”>

Body {color: red}

H1 {color: #ooffo1}

p.ex {color: rgb {0, 0,255}}

h1 {text-align: center}

p.date {text-align: right}

p.main {text-align: justify}

A {text-decoration: none}

P. uppercase {text-transform: uppercase}

P. lowercase {text-transform: lowercase}

p.captialize {text-tranform: capitalize}

</style>

</head>

</body>

</h1> S.A.SADAQ </h1>


<p> Hello World! This text is red. The default text-color for a page is defined in the body selector</p>

<p class=”ex”> this paragraph with class =”ex”.

This text is blue </p>

<p> <a [email protected]> click here</a> </p>

</body>

</html>

2. Text Properties:
The text has different types of properties such as follows:

Color: Red/Blue/Green

Direction: LTR/RTL

Line-Height: Normal/Number/Length/%

Letter-spacing: Normal/Length

Text-Align: Left/ Right/ Center/ Justify

Text-Decoration: None/Underline/Over line/Line-Through/Blink

Text-Indent: Length/%

Text- Transformation: None/ Capitalize/ Uppercase/Lowercase

Vertical-Align: Baseline/Sub/Super/Top/Middle/Bottom

Eg: <html>

<Head>

<style type ="text/css">

p.normal {font-style: normal}

p.italic {font-style: italic}

p.oblique {font-style: oblique}


h1 {font-size: 40px}

h2 {font-size: 30px}

</style>

</head>

<body>

<p class =”normal”> this is S.A. Sadaq. The scientist

<p class =”italic”> this is S.A. Sadaq. The scientist

<p class =”oblique”> this is S.A. Sadaq. The scientist

<h1> this is S.A.Sadaq </h1>

<h2> this is S.A.Sadaq </h2>

<p> this is S.A.Sadaq </p>

3. Box Model Properties:

The box model is used to specify a box that wraps around html elements, are as follows:

1.Margins: It us used to clears an area around the border.

The margins don’t have the background color and it is completely transparent

2.Borders: A border that lies around the padding on the text and content the border is affected by the
background color of the box

3.Padding: It is used to clears an area around the content

The padding is affected by the background color of the box.

4.Actual contents: The content of the box where the text and images appear.

Eg: Border: 5px solid gray; Margin: o px


<Html>

<Head>

<style type=”text/css”>

div.ex

Width: 220px;

Padding: 10px;

Borders: 5px solid gray;

Margin; 0px;

<Style>

<Body>

<div class=”ex”> the line above is250px wide. </br>

The total width of this element is also 250px. </div>

</body>

</html>

4.Background properties:

CSS background properties are used to define the background effects of an element, as follows;

1. Background-Color:

--> It can be specified by color name like “orange”

--> RGB:- An RGB value, like “rgb(255,0,0)”

--> Hex:- A hex value, like”#ff000”


3. Background- image:
It is used to Set a background-image for the <body> element

4. Background-repeat
The background-repeat property sets if/how a background image will be
repeated.

5. Background-attachment
The background-attachment property sets whether a background image
scrolls with the rest of the page, or is fixed.

6. Background-position

The background-position property sets the starting position of a background


image.

6) What is an Array? Discuss about arrays in JavaScript.


Ans:

Collection of variables of similar type.

An array is a special variable, which can hold more than one value at a time.

If you have a list of items (a list of car names, for example), storing the cars in
single variables such as follows:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

An array can hold many values under a single name, and you can access the
values by referring to an index number.

Creating an Array
By Using an array literal is the easiest way to create a JavaScript Array.
Syntax:

var array_name = [item1, item2, ...];       

Example
var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

By using the new keyword in java script we can create an


array such as follows:
var cars = new Array("Saab", "Volvo", "BMW");

Accessing the Elements of an Array


we access an array element by referring to the index number.

Eg:1

var name = cars[0];

Eg: 2

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Arrays are a special type of objects. The typeof operator in JavaScript returns


"object" for arrays.

Eg:

var fruits, text, fLen, i;


fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

Associative Arrays
Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.  

Eg:

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"

7) Write about differences between XML & HTML


There are many differences between HTML (Hyper Text Markup Language) and XML
(eXtensible Markup Language).

The important differences we have such as follows:

No. HTML XML

1) HTML is used to display data and XML is a software and hardware independent tool
focuses on how data looks. used to transport and store data. It focuses on
what data is.

2) HTML is a markup language itself. XML provides a framework to define markup


languages.

3) HTML is not case sensitive. XML is case sensitive.


4) HTML is a presentation language. XML is neither a presentation language nor a
programming language.

5) HTML has its own predefined tags. You can define tags according to your need.

6) In HTML, it is not necessary to use a XML makes it mandatory to use a closing tag.


closing tag.

7) HTML is static because it is used to XML is dynamic because it is used to transport


display data. data.

8) HTML does not preserve XML preserve whitespaces.


whitespaces.

7) What is XML? Explain the structure of XML of document

Ans:

XML is a software- and hardware-independent tool for storing and


transporting data.

 XML stands for eXtensible Markup Language


 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive
 XML is a W3C Recommendation
Structure of XML or XML Tree Structure

XML documents are created as element trees.

An XML tree begins from root element and branches from the root to child
elements.

Syntax:
<root>
  <child>
    <subchild>.....</subchild>
  </child>
</root>

The terms parent, child, and sibling are used to describe the relationships
between elements.

Eg:

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Sadaq</to>
  <from>Abdul</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

The XML Prolog


This line is called the XML prolog:

<?xml version="1.0" encoding="UTF-8"?>

The XML prolog is optional. If it exists, it must come first in the document.
XML documents can contain international charactersTo avoid errors, you should
specify the encoding used, or save your XML files as UTF-8.

UTF-8 is the default character encoding for XML documents.

UTF-8 is also the default encoding for HTML5, CSS, JavaScript, PHP, and SQL.

XML tags are case sensitive that means upper letters are differ from lower
letters

XML Naming Rules


There are different types of naming rules we have to follow, which are given
below:

 Element names are case-sensitive


 Element names must start with a letter or underscore
 Element names cannot start with the letters xml (or XML, or Xml, etc)
 Element names can contain letters, digits, hyphens, underscores, and
periods
 Element names cannot contain spaces

Any name can be used, no words are reserved (except xml).

8) What is data validation and explain with suitable example

Data Validation
Data validation is the process of ensuring(guarantee) that user input is clean,
correct, and useful.

Typical validation tasks are:

 has the user filled in all required fields


 has the user entered a valid date
 has the user entered text in a numeric field

Most often, the purpose of data validation is to ensure correct user input.
Validation can be defined by many different methods, and deployed in many
different ways.

Server side validation is performed by a web server, after input has been
sent to the server.

Client side validation is performed by a web browser, before input is sent to a


web server.

HTML Constraint Validation


The Constraint Validation is introduced by HTML5

HTML constraint validation is based on the following points as follows:

 Constraint validation HTML Input Attributes


 Constraint validation CSS Pseudo Selectors
 Constraint validation DOM Properties and Methods

Constraint Validation HTML Input Attributes

Attribute Description

disabled Specifies that the input element should be disabled

max Specifies the maximum value of an input element

min Specifies the minimum value of an input element

pattern Specifies the value pattern of an input element


required Specifies that the input field requires an element

type  Specifies the type of an input element

Constraint Validation for CSS Pseudo Selectors

Selector Description

:disabled Selects input elements with the "disabled" attribute


specified

:invalid Selects input elements with invalid values

:optional Selects input elements with no "required" attribute


specified

:required Selects input elements with the "required" attribute


specified

:valid Selects input elements with valid values


Eg:

<!DOCTYPE html>

<html>

<head>

<script>

function validateForm() {

var x = document.forms["myForm"]["fname"].value;

if (x == "") {

alert("Name must be Mandatory");

return false;

</script>

</head>

<body>

<form name="myForm" action="/action_page.php"

onsubmit="return validateForm()" method="post">

Name: <input type="text" name="fname">

<input type="submit" value="Submit">

</form>

</body>

</html>
9) What is a Function? Discuss about functions in Javascript.
Ans:

A Function is a block statements which are used to perform a specific task

There are different types of components in Java Script Functions such as follows:

 Function Declaration
 JavaScript functions are defined with the function keyword.
 A JavaScript function can also be defined using an expression.

Syntax:

function functionName(parameters) {
  your code goes here ………….
}

eg:
<script>

var x = myFunction(4, 3);

document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {

return a * b;

</script>

Note:
Functions can also be defined with a built-in JavaScript function constructor
called Function().

Eg:

<script>

var myFunction = new Function("a", "b", "return a * b");


document.getElementById("demo").innerHTML = myFunction(4, 3);

</script>

Function Parameters
 Function parameters are the names listed in the function definition.

 Function arguments are the real values passed to the function.

Rules
 JavaScript function definitions do not specify data types for parameters.
 JavaScript functions do not perform type checking on the passed
arguments.
 JavaScript functions do not check the number of arguments received.

Eg:
function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    } 
}

Function Invocation
The code inside a function is not executed when the function is defined.

o The code inside a function is executed when the function is invoked.

Eg:

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);   Function Invocation or Calling Function

Function Call
An object can be used a method which is in another object by using call()

Eg:

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Abdul",
    lastName: "Sadaq",
}
var person2 = {
    firstName:"Shaik",
    lastName: "Sultan",
}
person.fullName.call(person1);
Function Apply
 It is just similar to call(), which can be taken arguments separetly but the
apply() can taken arguments as an array
 If you want to use an array instead of an argument list then we have to use
apply()

Function Closures
The variables of JavaScript can be either the local or global.

Eg:

<!DOCTYPE html>

<html>

<body>

<p>Access variables defined outside the function:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo"></p>

<script>

var a = 4;

function myFunction() {

document.getElementById("demo").innerHTML = a * a;

</script>

</body>

</html>
10) What is an event? Explain various events supported by Java
Script

Or

Write about Rollover Buttons with suitable example?


Ans:

 When the page loads, it is called an event.


 When the user clicks a button, that click it is also an event.
 Other examples include events like pressing any key, closing a window,
resizing a window, etc.
 When ever the user or the browser manipulates or edit the page the event is
occurred.
 Events are a part of the Document Object Model (DOM)

There are different types of events we have in HTML5 such as follows:

Attribute Value Description

onclick script Triggers on a mouse click

ondblclick script Triggers on a mouse double-click

ondrag script Triggers when an element is dragged

onload script Triggers when the document loads

onmousedown script Triggers when a mouse button is pressed

onmousemove script Triggers when the mouse pointer moves

onmouseout script Triggers when the mouse pointer moves out of an


element

onmouseover script Triggers when the mouse pointer moves over an element

onmouseup script Triggers when a mouse button is released

onmousewheel script Triggers when the mouse wheel is being rotated

onpause script Triggers when media data is paused

onsubmit script Triggers when a form is submitted

Triggers when the browser has been fetching media


onsuspend script data, but stopped before the entire media file was
fetched

Eg:

<html>

<head>

<script type="text/javascript">

<!--

function validation() {

all validation goes here

.........

return either true or false

//-->

</script>
</head>

<body>

<form method="POST" action="t.cgi" onsubmit="return validate()">

.......

<input type="submit" value="Submit" />

</form>

</body>

</html>

11) Discuss about Confirmation & Messages in detail

Or

Explain about the Pop Up Boxes in Java Script

Ans:

JavaScript Popup Boxes
There are 3 different types of Pop up boxes in javascript
such as follows:

 Alert box
 Confirm box
 Prompt box
Alert Box
It is used to display the altert message in the box model

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax
window.alert("sometext");

Note:

The window.alert() method can be written without the window prefix.

Eg:

alert("I am Sadaq!");

Confirm Box
A confirm box is used when, if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel"
to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.

Syntax
window.confirm("sometext");
Note:

The window.confirm() method can be written without the window prefix.

Example
if (confirm("Press a button!")) {
    txt = "You pressed OK!";
} else {
    txt = "You pressed Cancel!";
}

Prompt Box
 A prompt box is used, when if you want the user to input a value before
entering a page.

 When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.

 If the user clicks "OK" the box returns the input value.

 If the user clicks "Cancel" the box returns null.

Syntax
window.prompt("sometext","defaultText");

Note:

The window.prompt() method can be written without the window prefix.

Eg:

var person = prompt("Please enter your name", "Sadaq");

if (person == null || person == "") {


    txt = "User cancelled the prompt.";
} else {
    txt = "Hello " + person + "! How are you today?";
}

12. What is Exceptional handling. Explain in detail


Ans:

JavaScript Errors - Throw and Try to Catch

 The try statement lets you test a block of code for errors.

 The catch statement lets you handle the error.

 The throw statement lets you create custom errors.

 The finally statement lets you execute code, after try and catch,


regardless of the result.

try and catch


 The try statement allows you to define a block of code to be tested for
errors while it is being executed.
 The catch statement allows you to define a block of code to be executed,
if an error occurs in the try block.
 The JavaScript statements try and catch come in pairs:

Syntax:
try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}
The throw Statement
The throw statement allows you to create a custom error.

The exception can be a JavaScript String, a Number, a Boolean or an Object:

Eg:

throw "Too big";    // throw a text


throw 500;          // throw a number

The finally Statement


The finally statement lets you execute code, after try and catch, regardless of
the result:

Syntax:
try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
} 
finally {
    Block of code to be executed regardless of the try / catch result
}

eg:

<!DOCTYPE html>

<html>

<body>

<p>Please input a number between 5 and 10:</p>


<input id="demo" type="text">

<button type="button" onclick="myFunction()">Test Input</button>

<p id="p01"></p>

<script>

function myFunction() {

var message, x;

message = document.getElementById("p01");

message.innerHTML = "";

x = document.getElementById("demo").value;

try {

if(x == "") throw "is empty";

if(isNaN(x)) throw "is not a number";

x = Number(x);

if(x > 10) throw "is too high";

if(x < 5) throw "is too low";

catch(err) {

message.innerHTML = "Input " + err;

finally {

document.getElementById("demo").value = "";

</script>

</body>
</html>

13. Write about Moving Images. Explain in detail

Ans:

Moving images are done through the help of java script

We can animate the image through java script as per the users’ requirement

Eg:

<!DOCTYPE html>

<html>

<style>

#myContainer {

width: 400px;

height: 400px;

position: relative;

background: yellow;

#myAnimation {

width: 50px;

height: 50px;

position: absolute;

background-color: red;

</style>
<body>

<p>

<button onclick="myMove()">Click Me</button>

</p>

<div id ="myContainer">

<div id ="myAnimation"></div>

</div>

<script>

function myMove() {

var elem = document.getElementById("myAnimation");

var pos = 0;

var id = setInterval(frame, 10);

function frame() {

if (pos == 350) {

clearInterval(id);

} else {

pos++;

elem.style.top = pos + 'px';

elem.style.left = pos + 'px';

}
</script>

</body>

</html>

Note:

To make an animation possible, the animated element must be animated


relative to a "parent container".

The container element should be created with style = "position: relative".

The animation element should be created with style = "position: absolute".

You might also like