UNIT IV
UNIT-IV
CSS AND JAVASCRIPT
4.1 Introduction to Cascading Style Sheets
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended
to simplify the process of making web pages presentable. CSS allows you to apply styles to
web pages. More importantly, CSS enables you to do this independently of the HTML that
makes up each web page. It describes how a webpage should look: it prescribes colours,
fonts, spacing, and much more. In short, you can make your website look however you
want. CSS lets developers and designers define how it behaves, including how elements are
positioned in the browser.
While HTML uses tags, CSS uses rulesets. CSS is easy to learn and understand, but it
provides powerful control over the presentation of an HTML document.
Why CSS?
CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML
pages.
Easy Maintenance: To make a global change simply change the style, and all elements in
all the webpages will be updated automatically.
Search Engines: CSS is considered a clean coding technique, which means search engines
won’t have to struggle to “read” its content.
Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
Offline Browsing: CSS can store web applications locally with the help of an offline
cache. Using this we can view offline websites.
CSS Syntax
CSS syntax is used to add CSS to an HTML document. A CSS syntax consists of a selector
and a declaration block.
selector {
property1: value;
property2: value;
}
UNIT IV
The basic syntax of CSS includes 3 main parts:
selector - specifies the HTML element that we want to apply the styles
property1 / property2- specifies the attribute of HTML elements that we want to change
(color, background, and so on)
value - specifies the new value you want to assign to the property (color of the text to
the red, background to gray, and so on)
Example CSS Syntax
Let us see an example of CSS
p{
color: red;
font-size: 20px;
background-color: yellow;
}
Here,
p - selector that selects all the <p> elements from the document
color: red; - changes the text color of <p> contents to red
font-size: 20px; - changes the font size of <p> contents to 20px
background-color: yellow; - sets the background of the <p> element to yellow
CSS declaration always ends with a semicolon, and declaration blocks are surrounded by
curly braces.
After CSS: In this example, we added some CSS styling inside the HTML code only to show
how CSS makes a dull HTML page look beautiful.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
UNIT IV
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
With CSS
4.2 Embedded Styles, Inline Styles , Imported External Styles
Cascading Style Sheet (CSS) is used to set the style in web pages that
contain HTML elements. It sets the background color, font-size, font-family, color, … etc.
properties of elements on a web page.
There are three types of CSS which are given below:
UNIT IV
Inline CSS
Internal or Embedded CSS
External CSS
Embedded Styles
Internal or Embedded CSS: This can be used when a single HTML document must be
styled uniquely. The CSS rule set should be within the HTML file in the head section i.e.
the CSS is embedded within the <style> tag inside the head section of the HTML file.
Example: This example shows the application of [Link]
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: purple;
}
</style>
</head>
<body>
<h2>Internal CSS Example</h2>
<p>Using internal CSS, I only need to write one rule set to change the color of every
paragraph elemnet.</p>
</body>
</html>
Output:
UNIT IV
Inline Styles
Inline CSS: Inline CSS contains the CSS property in the body section attached to the element
is known as inline CSS. This kind of style is specified within an HTML tag using the style
attribute.
Example: This example shows the application of [Link]
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:blue; font-size:50px;
font-style:italic; text-align:center;">
With inline CSS, I'd have to add a style attribute to every single paragraph in my HTML.
</p>
</body>
</html>
Output:
Imported External Styles
External CSS: External CSS contains separate CSS files that contain only style properties
with the help of tag attributes (For example class, id, heading, … etc). CSS property is
written in a separate file with a .css extension and should be linked to the HTML document
using a link tag. It means that, for each element, style
UNIT IV
Example: The file given below contains CSS property. This file saves with .css extension.
For Ex: [Link]
div {
background-color: pink;
color: red;
border: 3px solid #00A4BD;
padding: 5px;
}
Below is the HTML file that is making use of the created external style sheet.
link tag is used to link the external style sheet with the html webpage.
href attribute is used to specify the location of the external style sheet file.
[Link]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div>
<h1>External CSS Example</h1>
<p>In the external stylesheet, the div is styled to have a background color, text color, border,
and padding.</p>
</div>
</body>
</html>
Output:
UNIT IV
4.3 Introduction of JavaScript
What is JavaScript?
JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages. JavaScript is not a compiled language, but it is a
translated [Link] is an interpreted, full-fledged programming language that enables
dynamic interactivity on websites when applied to an HTML document. It was introduced in
the year 1995 for adding programs to the webpages in the Netscape Navigator browser. Since
then, it has been adopted by all other graphical web browsers. With JavaScript, users can
build modern web applications to interact directly without reloading the page every time. The
traditional website uses js to provide several forms of interactivity and simplicity.
Advantages of JavaScript
Less server interaction − You can validate user input before sending the page off to
the server. This saves server traffic, which means less load on your server.
Immediate feedback to the visitors − They don't have to wait for a page reload to
see if they have forgotten to enter something.
Increased interactivity − You can create interfaces that react when the user hovers
over them with a mouse or activates them via the keyboard.
Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.
Limitations of JavaScript
Client-side JavaScript does not allow the reading or writing of files. This has been
kept for security reason.
JavaScript cannot be used for networking applications because there is no such
support available.
JavaScript doesn't have any multi-threading or multiprocessor capabilities.
JavaScript Example
<script "text/javascript">
UNIT IV
[Link]("Hello World");
</script>
The script tag specifies that we are using JavaScript.
The text/javascript is the content type that provides information to the browser about the
data.
The [Link]() function is used to display dynamic content through JavaScript.
4.4 Adding script to documents with example. Variables.
JavasScript code is inserted between <script> and </script> tags when used in an
HTML document. Scripts can be placed inside the body or the head section of an HTML
page or inside both the head and body. We can also place JavaScript outside the HTML file
which can be linked by specifying its source in the script tag.
Places to put JavaScript Code:
1. Add JavaScript Code inside Head Section
2. Add JavaScript Code inside Body Section
3. External JavaScript(in .js file)
1. Add JavaScript Code inside Head Section
JavaScript code is placed inside the head section of an HTML page and the function is
invoked when a button is clicked.
Example:
<!DOCTYPE html >
<html>
<head>
<title> JavaScript</title>
<script>
UNIT IV
[Link]("Welcome to College ");
</script>
</head>
<body>
<p>In this example we saw how to add JavaScript in the head section </p>
</body>
</html>
Output:
2. Add JavaScript Code inside Body Section
JavaScript Code is placed inside the body section of an HTML page and the function is
invoked when a button is clicked.
Example:
<!DOCTYPE html >
<html>
<head>
<title> JavaScript</title>
</head>
<body>
<script>
[Link]("Welcome to College");
</script>
<p> In this example we saw how to add JavaScript in the body section </p>
</body>
</html>
UNIT IV
Output:
3. External JavaScript
JavaScript can also be used in external files. The file extension of the JavaScript file will be
.js. To use an external script put the name of the script file in the src attribute of a script tag.
External scripts cannot contain script tags.
Example:
Javascript
[Link]
function msg(){
alert("Hello Friends");
}
Html
[Link]
<html>
<head>
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
<p>Welcome to College</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
UNIT IV
Output:
JavaScript Variable
A JavaScript variable is simply a name of storage location. Variables can be thought of as
named containers. You can place data into these containers and then refer to the data simply
by naming the container.
Before you use a variable in a JavaScript program, you must declare it. Variables are declared
with the var keyword as follows.
Syntax:
<script type = "text/javascript">
<!--
var a;
var b;
//-->
</script>
Storing a value in a variable is called variable initialization. You can do variable
initialization at the time of variable creation or at a later point in time when you need that
variable.
<script>
var x = 10;
var y = 20;
var z=x+y;
[Link](z);
</script>
UNIT IV
Output
30
JavaScript is untyped language. This means that a JavaScript variable can hold a value of
any data type. Unlike many other languages, you don't have to tell JavaScript during variable
declaration what type of value the variable will hold. The value type of a variable can change
during the execution of a program and JavaScript takes care of it automatically.
Variable Scope:
There are two types of variables in JavaScript : local variable and global variable. The
scope of a variable is the region of your program in which it is defined.
a) JavaScript local variable
A JavaScript local variable is declared inside block or function. It is accessible within the
function or block only.
Example:
<script>
function abc(){
var x=10;//local variable
}
</script>
b) JavaScript global variable
A variable i.e. declared outside the function or declared with window object is known as
global variable. A JavaScript global variable is accessible from any function.
Example:
<script>
var c=200;//gloabal variable
function a(){
[Link](c);
UNIT IV
}
function b(){
[Link](c);
}
a();//calling JavaScript function
b();
</script>
There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore ( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.
4. You should not use any of the JavaScript reserved keywords as a variable name.. For
example, break or boolean variable names are not valid.
4.5 Input and Output Statements of Java Script
1. write() Method
The write() method in HTML is used to write some content or JavaScript code in a
Document. This method is mostly used for testing purposes. It is used to delete all the content
from the HTML document and inserts the new content. It is also used to give additional text
to an output that is opened by the [Link]() method. This method is quite similar
to writeln() method which appends a new line.
Syntax:
[Link]( exp1, exp2, exp3, ... )
Parameters: This method contains many parameters which are optional. All the expression
arguments (exp1, exp2, … ) can be listed and displayed in the order of occurrence.
UNIT IV
Example : This simple example shows the use of [Link]() method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM write() Method</title>
</head>
<body>
<h1>JavaScript Output Statement </h1>
<script>
[Link] ("Hello and Welcome to JavaScipt Class")
</script>
</body>
</html>
Output:
2. Alert() Method
The HTML Window alert() method is used to display an alert box. It displays a
specified message along with an OK button and is generally used to make sure that the
information comes through the user. It returns a string that represents the text to display in
the alert box.
Syntax:
alert(message)
To call a JavaScript function in an alert box, you can use the alert() function, a built-in
function in JavaScript that displays an alert dialog with a specified message.
UNIT IV
Example: alert("Hello, World!");
The alert() function takes a string as an argument, which is the message displayed in the alert
box. The function will block the execution of the code until the user clicks the OK button.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The alert() Method</h2>
<p>Click the button to display an alert box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("Hello! I am an alert box!");
}
</script>
</body>
</html>
Output
UNIT IV
3. Prompt() Method
The prompt() method in JavaScript is used to display a prompt box that prompts the user for
the input.
The box is displayed using the prompt() method, which takes two arguments: The first
argument is the message which displays in the text box, and the second argument is the
default string, which displays in the textbox.
The prompt box consists of two buttons, OK and Cancel. It returns null or the string entered
by the user. When the user clicks "OK," the box returns the input value. Otherwise, it returns
null on clicking "Cancel".
Syntax:
prompt(message, default)
The parameter values of this function are defined as follows.
message: It is an optional parameter. It is the text displays to the user. We can omit this value
if we don't require to show anything in the prompt.
default: It is also an optional parameter. It is a string that contains the default value displayed
in the textbox.
Example:
<html>
<head>
<script type = "text/javascript">
function fun() {
prompt ("This is a prompt box", "Hello world");
}
</script>
</head>
<body>
UNIT IV
<p> Click the following button to see the effect </p>
<form>
<input type = "button" value = "Click me" onclick = "fun();" />
</form>
</body>
</html>
Output