Scribd
Upload
2 views

web_technology

The document provides an overview of web technologies, specifically focusing on CSS and JavaScript. It explains the types of CSS (Inline, Internal, External) and demonstrates their usage, along with JavaScript's functionality, including how to add JavaScript to HTML, different data types, operators, loops, and event handling. Additionally, it includes examples of functions for various tasks such as calculating the sum of two numbers, checking odd/even numbers, and calculating simple interest.

Uploaded by

pashupatidaas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

web_technology

The document provides an overview of web technologies, specifically focusing on CSS and JavaScript. It explains the types of CSS (Inline, Internal, External) and demonstrates their usage, along with JavaScript's functionality, including how to add JavaScript to HTML, different data types, operators, loops, and event handling. Additionally, it includes examples of functions for various tasks such as calculating the sum of two numbers, checking odd/even numbers, and calculating simple interest.

Uploaded by

pashupatidaas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

CHAPTER-3

WEB TECHNOLOGY II

1.Define CSS. Explain its types i.e. Inline, Internal and External CSS with example.

CSS stands for Cascading Style Sheets which consists of various styles that defines how to display HTML
elements. It is used to make the design of the Website dynamic and attractive. Styles are normally stored
in Style Sheets. Since, every tags cannot design the Web site in very fascinating way we use CSS to
solve that problem.

Advantages of using CSS


1. Web pages will load faster.
2. It helps to maintain design consistency across all the pages of the Web site.
3. CSS allows for customizing elements such as font, font size, font color and many other
4. CSS can help to make Web pages available for different media (desktop PC, mobile phones).
i.e. device responsive
5. It makes web page compatible with almost all the browsers.

Without using CSS


<HTML>
<HEAD><TITLE>inline CSS</TITLE></HEAD>
<BODY bgcolor = “red”>

</BODY>
</HTML>

Above HTML file will generate empty webpage with just red color background. Same thing
can be done by using several types of CSS i.e inline, internal and external CSS.

Inline CSS
This types of CSS are written inside the HTML tag.

<HTML>
<HEAD><TITLE>Inline CSS</TITLE></HEAD>
<BODY style = “background-color: red;”>
</BODY>
</HTML>
In above HTML file we have added style inside BODY tag. Similarly, we can add any number
of CSS inside HTML tag.

Internal CSS
This types of CSS are written inside <STYLE> tag, which is placed in -between HEAD tag of
an HTML document.

<HTML>
<HEAD><TITLE>Internal CSS</TITLE>
<STYLE>
body{
background-color: red;
}
</STYLE>
</HEAD>
<BODY>

</BODY>
</HTML>

In above HTML file we have added STYLE tag inside HEAD. CSS is written directly selecting
body tag.

Note: We can select id as well as class of any HTML tag. # is used to access id of the tag
whereas, . is used to access class of the tag.

External CSS
In this type we have to prepare HTML file and CSS file separately. These two file are linked by
following statement.

<link rel=“stylesheet” href=“name.css”>


Consider the following HTML document.

<HTML>
<HEAD><TITLE>External CSS</TITLE>
<link rel=“stylesheet” href=“sukuna.css”>
</HEAD>
<BODY>

</BODY>
</HTML>
Since we have linked “mero.css” in HTML file we have to create a separate CSS file named
“sukuna.css”. We can directly right CSS without STYLE tag in CSS document.

body{
background-color: red;
}
2. Demonstrate the external CSS implemented in the Web page.

CSS stands for Cascading Style sheets. CSS can control the layout of the multiple webpage all at once.
There are three types of CSS, Inline CSS, Internal CSS and External CSS.

External CSS contains separate CSS file which contains only style property with the help of tag attributes.
The separate CSS file should be linked with the HTML document using <link> tag.

For example:
HTML file (index.html)
<html>
<head>
<title>external CSS</title>
<link rel="stylesheet" href="external.CSS">
</head>
<body>
<p>Sukuna</p>
</body>
</html>
CSS file (external.CSS)
p{ color: Blue;
font-size: 30px;

2. What is javascript. Inline,Internal(Embededding),external javascript.

JavaScript is a client-side scripting language used for web development along with other front-end
development tool such as HTML and CSS. JavaScript helps to give dynamic behavior to our web pages such
as adding animation, drop down menus, client-side validation etc. More over JS can be used for mobile apps
development and game development. JavaScript is known as scripting language because it does not need to
be compiled before execution, it executes in run-time environment through web browser.

Adding javascript to HTML document


a.Inline JavaScript code
This is the method of adding JS code directly inside the HTML tag. We don’t have to create separate JS file
or even we don’t have to place JS code with in script tag. Simple events like onclick, mouseover, keypress
can easily be added through this method. But, its very much inconvenient to add large JS code inline.
JavaScript code can be added in HTML document inline as follows:

<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = “alert(‘Your message’)”>Click here</BUTTON>
</BODY>
</HTML>
Here, we have added alert message through onclick event. When user press the Click me button then alert
message will be shown in the web browser.

b.Internal (Embedding) JavaScript code

This is the method of adding JS code within the HTML document. JS code is added internally with in the
script tag inside body of the HTML document. JavaScript code can be embedded within HTML document
as follows:

<HTML>
<HEAD><TITLE>js</TITLE></HEAD>
<BODY>
<BUTTON onclick = “sukuna( )”>Click here</BUTTON>
<SCRIPT>
function sukuna( )
{
alert(“Your message”);
}
</SCRIPT>
</BODY>
</HTML>
Here, we have created a JS function named sukuna( ), this function is called when user press the Click me
button. Once button is pressed alert message is displayed which is defined inside function within Script tag.

C. External JavaScript file

This is the most popular methods of adding JS in our web pages. To add external JavaScript we have to
create separate JS file which is linked with our HTML document as:

<SCRIPT src = “hello.js”></Script>


Where, name.js is the JavaScript file that we create to write all our JS code. It should be in same location
with our HTML document. It is most convenient way of adding JS in our web page as JS code don’t get
messed with other HTML and CSS code. JavaScript code can be externally added with HTML document as
follows:

Create a HTML document with any name

<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<SCRIPT src = “hello.js”></Script>
<BODY>
<BUTTON onclick = “sukuna( )”>Click here</BUTTON>

</BODY>
</HTML>
Also create a JS file with .js extension and add following code

function sukuna( )
{
alert(“Your message”);
}
Here, we have created separate HTML and JS file in same location. Since, we have linked our JS file with
our HTML document, every code which is written in JS file will be implemented on HTML document.

3. Write a function to add any two numbers in JavaScript.

<html>
<head>
<title>Sum</title>
</head>
<body>
<script>
var x=5;
var y=10;
function sum()
{
var sum=x+y;
document.write("The sum of "+x+" and "+y+" is "+ sum);
}
sum(); //calling JavaScript function
</script>
</body>
</html>
Output: The sum of 5 and 10 is 15

4. Write down the data types in java script with examples.

Java script provides different data types to hold different types of values. There are two types of data
types in JavaScript. a) Primitive data type
b) Non-primitive data type

a) Primitive Data Type


Primitive data types can hold on value at a time. There are five types of primitive in JavaScript. They
are as follows:
Data type Description
String Represents a sequence of characters e.g. "hello"
Number Represents numeric values e.g. 100
Boolean Represents Boolean value either false or true
Undefined Represents an undefined value
Null Represents null i.e, no value at all
b) Non-Primitive Data Type
Non-primitive data types can hold collections of values and more complex entities. The nonprimitive
data types are as follows:
Data type Description
Object Represents an instance through which we can access members
Array Represents a group of similar values
RegExp Represents a regular expression
5.Explain the major feature and importance of JavaScript.

The major features of JavaScript are as follows:


a. JavaScript is an object-based scripting language.
b. It gives the users more control over the browser.
c. It is light weighted.
d. JavaScript is case sensitive.
e. It offers validation of user's input.
f. It offers event handling.
g. It is supportable in several operating systems including, windows, macOS, etc.

The importance of JavaScript are as follows:


a. JavaScript are less complex and can be targeted for specific applications.
b. Search engine, ecommerce, social media and phone apps would not be possible without JavaScript.
c. JavaScript is only scripting language which is universally supported.
d. It has opened many choices to the developer for server-side.
e. An important part of JavaScript is the ability to create new function within scripts using function
keyword.

6.Explain different JavaScript operators with example.


Operator is a symbol that signifies the operations. Operator is used in between two operands.
For eg, 5 + 2
Where, 5 and 2 are operands and '+' is the operator.

The different types of JavaScript operators are as follows:


a)Arithmetic Operators:
Arithmetic operators take numerical values as their operands and return a single numerical value.
Arithmetic operators can perform mathematical operations. Some Arithmetic
Operators are +, -, *,/,%,++,--,etc.
b) Comparison (Relational) Operators :
Comparison Operators are used to compare two operands. Its result is Boolean, either true or false.
Some comparison operators are equal(==), not equal(!=), greater than(>), less than(<), greater than
equal(>=), less than equal(<=), etc.
c) Logical Operators
Logical Operators are used for logical operators. It takes Boolean operands and gives Boolean result.
The && and || operators takes two operands and ! operator takes a single operand. && Logical
AND
|| Logical OR
! Logical NOT

d) Conditional Operators (Ternary Operator) :


It is alternative to if-else conditions in JavaScript. Unlike other operators, it usually takes three
expressions,
Condition ? first expression : second expression ;

It has two operators, the "?" (Question mark) and ":" (Colon), which separates the condition from the
result. If the condition is true, it will run and gives the first expression as result and it the condition
is false, it runs and gives the second expression as result.
e) Assignment Operators
Assignment operator is a symbol used to assign a value or a result of an expression to an identifier.
Some assignment operators are (=,+=,-=,%=,&=).

7. Describe different types of loop used in JavaScript with example.

The JavaScript loops are used to iterate or repeat the execution of code using for, while, do-while loop.
There are three types of loops in JavaScript.
a) for loop :for loop is used when the number of repetition are known. It consists of three expressions.
Initialization, condition and increment/decrement are the three expressions of for loop.
For eg. JavaScript program to display the first 5 natural numbers using for loop.

<script>
var i;
for(i=1;i<=5;i++)
{
document.write(i );
}
</script>
Output: 1 2 3 4 5

b) while loop: while loop is used when the number of repetition in unknown. It consists only one
expression i.e. condition. Once condition becomes false, the loop will be terminated.

For eg. JavaScript program to display the first 5 natural numbers using while loop.
<script>
var i=1;
while(i<=5)
{
document.write(i);
i++;
}
</script>
Output:
12345
c) do-while loop do-while is similar to the while loop. The only difference is, it checks the condition
at the end of the loop. This means that the loop will always be executed at least once.

For eg. JavaScript program to display the first 5 natural numbers using do-while loop.
<script>
var i=1;
do
{
document.write(i);
i++;
}while(i<=5);
</script>
Output:

12345

8. What is variable? Explain different variable used in JavaScript.

A variable is an identifier whose value may change during the execution of the program. It is simply a
name of storage location. There are two types of variables in JavaScript:
a. Local variable
A JavaScript local variable is declared inside the block of function. It is accessible within the function
or block only. For example:
<script>
function sum()
{
var x=5; //local variable
var y=10; //local variable
var sum=x+y;
document.write("The sum of "+x+" and "+y+" is "+ sum);
}
sum(); //calling JavaScript function

</script>
b. Global variable
A JavaScript variable is accessible from any function. A variable i.e, declared outside function or
declared with a window object is known as a global variable.
For example: <script>
var x=5; //global variable
var y=10; //global variable
function sum()
{
var sum=x+y;
document.write("The sum of "+x+" and "+y+" is "+ sum);
}
sum(); //calling JavaScript function
</script>

9. How are event handled in JavaScript?

JavaScript's interaction with HTML is handled through events that occurs when the user or the browser
manipulates a page. When the page loads, it is called an event. When the user clicks button, that clicks
to an event. Other examples include events like pressing any key, closing window, resizing a window.

Developers can use these events to execute JavaScript coded responses, which cause buttons to close
windows, message to be displayed to users, data to be validated, and virtually any other types of
response imaginable. Some events are onclick, onsubmit, onmouseover and onmouseout, onfocus and
onblur,etc.

For example:

<html>
<head>
<script>
function sayHello()
{
alert("Hello world");
}
</script
</head>
<body>
<p> click the button below to see the result</p>
<button onclick="sayHello()">click</button>
</body>
</html>

10. Write a function to print first five natural numbers in JavaScript.


<html>
<head>
<title>Natural numbers</title>
</head>
<body>
<script>
function print()
{
var i;
for(i=1;i<=5;i++)
{
document.write(i);
}
}
print(); //calling JavaScript function
</script>
</body> </html>
Output:
12345

11. Write a function to find area of a circle in JavaScript.


<html>
<head>
<title>Area of cirlce</title>
</head>
<body>
<script>
function AOC()
{
var pi=3.14;
var r=parseInt(prompt("enter a radius"));
var area=pi*r*r;
alert("Area of circle is "+area);
}
AOC(); //calling JavaScript function
</script>
</body>
</html>

12. Write a function to check whether the given number is odd or even using JavaScript.

<html>
<head>
<title>check odd or even</title>
</head>
<body>
<script>
function check()
{
var n=parseInt(prompt("Enter a number"));
if(n%2==0)

alert("Even number");
else

alert("Odd number");
}
check(); //calling Java Script function

</script>
</body>
</html>
Output
Enter a number 4
Even number

14. Write a JavaScript program to calculate the simple interest using principle, time and rate.
<html>
<head>
<title>simple interest</title>
</head>
<body>
<script>
function si ()
{
var p=parseInt(prompt("enter principle"));
var t=parseInt(prompt("enter time"));
var r=parseInt(prompt("enter rate"));
var si=(p*t*r)/100;
alert("The simple interest is "+si);
}
si(); //calling JavaScript function
</script>
</body>
</html>

15. Comparison between client-side scripting and server-side scripting.

The comparisons between client-side scripting and server-side scripting are given below:

Client-side scripting
• It is a scripting that run on a client end – web browser.
• It deals with the user interface and lighter functionality.
• Response from a client-side script is faster.
• It cannot connect to the databases on the web server.
• Examples of client-side scripting languages: JavaScript, VB Script, etc
Server side scripting
• It is normally used to handle browser requests.
• The server executes the script and returns to the browser.
• Response form a server-side script is slower because the scripts are processed remotely.
• Server-side scripting is used to connect to the database that is on web server.
• Example of server-side scripting languages: PHP, JSP, Asp.Net, ASP etc.

You might also like