A quick guide to Css and java script

Cascading Style Sheet
 Web style sheets are a form of separation of
presentation and content for web design .
 Style sheet can decide the presentation of web pages.
 Style sheet takes care of all the layout, fonts, colors
and overall look of the site.
2

Cascading Style Sheet (contd..)
 Principal means of Styling a document using Cascading
style sheets are:
3
Inline style Sheet
External style Sheet
Embedded style Sheet

Benefits of a Cascading Style Sheet
 Pages download faster.
 Page contains less code, and the pages are shorter and
neat.
 The look of the site is kept consistent throughout all the
pages that work off the same stylesheet.
 Updating the design and general site maintenance are
made much easier.
4

Parts of a Cascading Style Sheet
 CSS syntax is made up of three parts:
5
Selector
Property
Value
HTML tag that you wish to change
The attribute that you wish to change
Each property can take a value
Selector HTML tag that you wish to change

Inline Style Sheet
 Inline style sheets are applied by coding style properties and values
inside the tags to which they apply.
 An inline style sheet can appear inside any tag to directly set its
style. All that is required is to enclose the applicable style properties
and values inside a quoted style attribute.
 Syntax
 <tag style=“property:value [;property:value]…”>
6

Inline Style Sheet(contd.)
<html>
<body>
<pre>
<h1> Inline Style Sheet</h1>
<p style="font-size: 12pt; color:
red">
This is line one
This is line two
This is line three
</p>
</body>
</html>
7

Embedded Style sheet
 Embedded style sheets are used when a unique style is required for a
document.
 Embedded style are defined in the <head> tag section by using the
<style> tag
 When a large number of style settings are used on a Web page, there
is convenience in packaging the settings together in one place as an
embedded style sheet, rather than having them scattered as inline
style sheets throughout the document.
8

Syntax of Style sheet
selector {property: value}
Example
p {color: green}
If the value consist of more than one word the value has to
be embedded within quotes.
p {font-family: “sans-serif”}
If more than one property needs to be defined then the
properties need to be separated by semi colon.
p {font-family: “sans-serif” ; color: green}
9

Example of an Embedded Style sheet
<html>
<head>
<style type="text/css">
p {font-family:"sans-serif"; color: green}
hr {color: red}
body {color:blue; background-color:pink}
</style>
</head>
<body>
<p>This is paragraph one</p>
<hr>
<p> This is paragraph two</p>
<hr>
This line is not within paragraph tag
</body>
</html>
10

External Style Sheet
 Internal style sheets are used when a unique style is required for a
document.
 Internal style are defined in the <head> tag section by using the
<style> tag
 The different selectors, their properties and values should be
defined within the external style sheet.
 The external style sheet should be saved within a file, with an
extension of .css
11

External Style sheet
12
Background is defined
Paragraph font color is
defined
Horizontal color is defined
Mystyle.css
Requires the background,
Paragraph and horizontal
Rule setting defined
In Mystyle.css
FirstPage.html
SecondPage.html
Requires the background,
Paragraph and horizontal
Rule setting defined
In Mystyle.css
Both the html files uses
<link rel="stylesheet" type="text/css"
href=“Mystyle.css" />

Example of External style sheet
body {background-color: yellow}
h1 {font-size: 36pt}
p {margin-left: 50px; background: pink;
color:blue}
hr {color: red}
Mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css"
href="Mystyle.css" />
</head>
<body>
<h1> This header is 36 pt </h1>
<p> This paragraph has a left margin of 50
pixels<br>
The font color is blue<br>
The background color is pink
</p>
<hr>
</body>
</html>
MyPage.html
13
MyPage.html is using styles
defined in Mystyle.css

Multiple Style sheet
h3 { color: red;
text-align: left;
font-size: 8pt }
Mystyle.css
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“Mystyle.css”>
<style type=“text/css”>
</style>
</head>
<body>
<h3> This is a header </h3>
---more text----
</body>
</html>
MyPage.html
14
Mypage.html Links to
Mystyle.css
The font size of <h3> is redefined here
What will be the
Font size
Of <h3>
8pt or 20 pt??

Multiple Style sheet Continued
15
• If some properties have been set for the same selector in different style sheets,
the values will be inherited from the more specific style sheet .
h3 { color: red;
text-align: left;
font-size: 8pt }
Mystyle.css
<html>
<head>
<link rel=“stylesheet” type=“text/css”
<style type=“text/css”>
</style>
</head>
<body>
<h3> This is a header </h3>
---more text----
</body>
</html>
MyPage.html
Color: Red
Text-align-left
Font-size- 20pt
TheHTMLwill inheritthe
Fontcolorandalingment
FromMystyle.css Font Size will be Inherited
From the Internal Style sheet

Some common selectors and attributes
Selector property
H1,H2,H3….. font-size,Font-family,font-style , font-weight
Color, margin
P font-size,Font-family,font-style , font-weight
Color, Background-color,text-align, margin
HR color
body Background-color, font-size,Font-family,font-style , font-
weight, margin
16

Class Selector
 With the class selector you can
define different styles for the
same type of HTML element.
<html>
<head>
<link rel=“stylesheet”
type=“text/css”
</head>
<body>
<p class=“one”>This paragraph is
Right aligned </p>
<p class=“two”>This paragraph is
Left aligned</p>
</body>
</html>
MyPage.html
17
p.one {text-align: right; color: white;
background-color: black}
p.two {text-align: left; color: black;
background-color: Red}
Mystyle.css

Using <span> in CSS
 SPAN is a inline tag.
 It is used to format
small chunks of data
within another element.
 Combining <span> tag
with CSS allows us to
create custom tags.
18
What is the
Utility of
<span> in
HTML

Using <span> in CSS (contd.)
p { color: white ; background-color:
black}
.example1 {color:blue ; background-
color: yellow ;font-family: "sans-
serif"}
.example2 {color:red ; background-
color: white ;font-family: times}
Mystyle.css
<html>
<head>
<link rel="stylesheet"
type="text/css" href="Mystyle.css" />
</head>
<body>
<p >
This is the first line of the paragraph<br>
This is the second line of the
paragraph<br>
<span class="example1">This is the third
line of the paragraph<br> </span>
<span class="example2">This is the fourth
line of the paragraph<br> </span>
This is the fifth line of the paragraph
</p>
</body>
</html>
MyPage.html
19

JAVASCRIPT
 JavaScript is used in millions of Web pages to
improve the design, validate forms, and much
more. JavaScript was developed by Netscape and
is the most popular scripting language on the
internet.
 What can a JavaScript Do?
 JavaScript gives HTML designers a programming
tool - HTML authors are normally not
programmers, but JavaScript is a scripting
language with a very simple syntax! Almost
anyone can put small "snippets" of code into their
HTML pages
 JavaScript can put dynamic text into an HTML
page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can
write a variable text into an HTML page

JAVASCRIPT
 JavaScript can react to events - A JavaScript can
be set to execute when something happens, like
when a page has finished loading or when a user
clicks on an HTML element
 JavaScript can read and write HTML elements - A
JavaScript can read and change the content of an
HTML element
 JavaScript can be used to validate data - A
JavaScript can be used to validate form data
before it is submitted to a server, this will save
the server from extra processing

Objectives
 Introduction to JavaScript
 Introduction to JavaScript programming language
 Using Script tag
 Inserting Java Script into tags
 Linking Java Script from separate files
 JavaScript expression and Operators
 Defining and naming variables
 Data Types
 Expression
 Operators – Arithmetic, String, Logical, Assignment, typeof
22

Objectives (Contd.)
 Functions and Flow Control
 Flow Control
 If…else
 For loops
 while loops
 Break and continue statements
 Using JavaScript functions
 Built in functions
 User defined functions
 Returning values from functions
 Events, Event Handlers
23

Introduction to Java Scripts
 What is JavaScript???
 JavaScript is a scripting Language created by Netscape
24
What is a
Scripting
Language???
What is a
Scripting
Language???
•Scripting Language is a lightweight
programming language.
• Scripting Languages are not
needed to be compiled.
•The language is interpreted at
runtime.

Introduction to JavaScript
(Contd.)
 A JavaScript is usually directly embedded in an HTML page.
 External JavaScripts can be created which can be used by
HTML pages.
 JavaScript adds interactivity to HTML pages.
 JavaScript's are integrated into the browsing environment.
25

Introduction to JavaScript (Contd.)
Is
JavaScript
same as
Java???
Is
JavaScript
same as
Java???
 Java is a programming
language which requires
compilation and
interpretation.
 Java is used to make large
scale applications.
 JavaScript is a scripting
language which just requires
interpretation. The script is
some set of commands which
the browser interprets.
 JavaScript is used to add
interactivity in HTML Pages.
26

Types of JavaScript
 Client-Side JavaScript (CSJS) -- an extended version of JavaScript
that enables the enhancement and manipulation of web pages and
client browsers.
 Server-Side JavaScript (SSJS) -- an extended version of JavaScript
that enables back-end access to databases, file systems, and
servers.
 Core JavaScript -- the base JavaScript language.
27

Uses of JavaScript (Client
Side)
 Form Validation
 Math Functions
 Special effects with document and background
 Status bar manipulation
 Messages
 Mouse Cursor Effects
 Links
28

Syntax rules of JavaScript
 Statements may or may not contain a semicolon at the
end.
 Multiple statements on one line must be separated by a
semicolon.
 JavaScript is case sensitive.
29

Using <script> tag
 The HTML <script> tag is used to enter JavaScript into a HTML.
 The <script> tag can be embedded within
 <head> tag.
 <body> tag.
 JavaScript in the head section will be executed when called.
 JavaScript in the body section will be executed while the
HTML page is loaded.
 Unlimited number of JavaScript’s can be placed both in head
and body section in a HTML document.
30

Using <script> tag
Eg:
<html>
<head><title>Example</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
31
Is a standard command for writing output
to a page

How to Handle Older Browsers
 Browsers that do not support JavaScript will display the script as it
is. Use the HTML comment tag to prevent this.
Eg.

</script>
32
The two forward slashes at the end of comment line
(//) are a JavaScript comment symbol. This
prevents the JavaScript compiler from compiling
the line.

Using an External JavaScript
 A JavaScript can be written in an external file, which
can be used by different HTML pages.
 The external script cannot contain the <script> tag.
 The external file needs to end with the .js extension.
33

Using External JavaScript (contd.)
34
document.write("This line
has been writen in the
External JavaScript!!!")
External.js
<html>
<head><title>Example</title>
</head>
<body>
<script src="External.js">
</script>>
<p >
This line has been written in the
html page!!!
</p>
</body>
</html>
JavaScript.html

Variables
 A variable is a "container" for information you want
to store. A variable is a symbolic name that
represents some data in the memory.
 A variable's value can change during the script. You
can refer to a variable by name to see its value or
to change its value.
 Rules for Variable names:
 Variable names are case sensitive
 They must begin with a letter or the underscore
character

Variables
 The variable name is on the left side of the expression and the
value you want to assign to the variable is on the right.
 Variable Declaration
 Variables can be declared using the var statement
var <variable name>=some value
 Variables can also be created without using var statement
<variable name>=some value
 Eg
var firstname=“Samuel”
OR
firstname=“Samuel”

Variables
 Lifetime of Variables
 When you declare a variable within a
function, the variable can only be accessed
within that function. When you exit the
function, the variable is destroyed. These
variables are called local variables. You can
have local variables with the same name in
different functions, because each is
recognized only by the function in which it is
declared.
 If you declare a variable outside a function,
all the functions on your page can access it.
The lifetime of these variables starts when
they are declared, and ends when the page is
closed.

Data Type in JavaScript
 JavaScript is a loosely typed language.
 Data Type of Variable
need not be specified
during declaration.
 Data types are
automatically
converted during script
execution.
38
Loosely
Typed??
Loosely
Typed??

Data Type in JavaScript
(contd.)
 JavaScript recognizes the following type of values:
39
ValuesValues
string
numbers
null
boolean
9, 3.56
true or false
Samuel, ”Samuel J Palmisano”
A Special keyword which refers to
nothing

Data Type in JavaScript (contd.)
40

JavaScript Operators: are used to
operate on values.
41
Arithmetic Assignment Conditional
String
Comparison
Logical
OperatorsOperators
typeof

JavaScript Operator (contd.)
42
Arithmetic

43
Assignment

44
Logical

45
String

46
Conditional

47
typeof

Flow Control
 Conditional Statements
 if statement - use this statement if you want to execute some code only
if a specified condition is true.
 if...else statement - use this statement if you want to execute some
code if the condition is true and another code if the condition is false.
 if...else if....else statement - use this statement if you want to select
one of many blocks of code to be executed.
 switch statement - use this statement if you want to select one of many
blocks of code to be executed.
48

break and continue
Statements
 There are two special statements that can be used
inside loops:
 break.
 continue.
 Break
 The break command will break the loop and
continue executing the code that follows after the
loop (if any).
 Continue
 The continue command will break the current loop
and continue with the next value.
50

Example of break statement
51
<html>
<body>
var i=0
for (i=0;i<=5;i++)
{if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
Result
The number is 0
The number is 1
The number is 2

Example of continue
statement
52
<html>
<body>
var i=0
for (i=0;i<=5;i++)
{ if (i==3){continue}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
Result
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5

For….in Statement
 Loops through the elements of an array Syntax
For(variable in array)
{
Code to be execute
}
The code in the body of the for…in loop is executed once for each element
54

Example
 <html>
<body>
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>
55

Functions
 A function is a reusable piece of code that will be
executed when called for.
 A function can be called from anywhere from within the
page or even from other pages if the function is stored
in an external JavaScript (.js) file.
 Functions can be embedded in the <head></head> and
within the<body> </body> tag.
56

Predefined functions in JavaScript
 DialogBoxes
 alert( message)
Displays an alert box with a
message defined by the string
message.
Eg.
alert(“An Error Occurred!”)
57

(contd.)
 confirm(message)
 When called, it will display the message
and two boxes. One box is "OK" and the
other is "Cancel". If OK is selected, a
value of true is returned, otherwise a
value of false is returned.
Eg.
confirm(“Do you wish to Continue?”)
58

(contd.)
 prompt(message)
 Displays a box with the
message passed to the function
displayed.
 The user can then enter text in
the prompt field, and choose
OK or Cancel.
 If the user chooses Cancel, a
NULL value is returned. If the
user chooses OK, the string
value entered in the field is
returned.
Eg:
prompt(“enter your Name”)
59

Predefined functions in
JavaScript (contd.)
 Conversion Functions
 eval(string)
Converts a string to an integer or a float value.
Eg
x=“20”
y=eval(x)+10
y contains the value 30
60

JavaScript (contd.)
 isNaN(value)
If the value passed is not a number then a boolean value of true
is returned else the boolean value of false is returned.
Eg
x=“Samuel”
y=isNaN(x)
The value stored in y is true
61

JavaScript (contd.)
 parseInt(string)
Converts a string to an integer returning the first integer
encountered which is contained in the string.
Eg
x=77AB67
y=parseInt(x)
y stores the value 77
62

JavaScript (contd.)
 parseFloat(string)
Converts a string to an float value .
Eg
x=77.5AB67
y=parseFloat(x)
y stores the value 77.5
63

User Defined Functions (contd.)
65

User Defined Functions (contd.)
66

Events
 Events are actions that can be detected by JavaScript
 Every element on a web page has certain events which trigger
javaScript
 Example of events:
 A mouse click
 A web page or an image loading
 Mousing over a spot on the web page
 Selecting an input field in an HTML form
 Submitting an HTML form
 A key stroke
Events are normally used in combination with functions and the function will not be
executed before the event occurs
67

Common Event Handlers (contd.)
72

Common Event Handlers
(contd.)
 onLoad and onUnload
 The onload and onUnload events are triggered when the
user enters or leaves the page.
 The onload event is also triggered when the image is
loaded.
73
The showstatus() function will be called when a user enters a page
<body onload=“showStatus()”>

(contd.)
 onFocus, onBlur and onChange
 The onFocus, onBlur and onChange events are often used
in combination with validation of form fields.
74
The checkEmail() function will be called whenever the user changes the
content of the field:
<input type="text" size="30" id="email"
onchange="checkEmail()">;

(contd.)
 onSubmit
 The onSubmit event is used to validate ALL form fields
before submitting it.
75
The checkForm() function will be called when the user clicks the submit
button in the form.
<form method="post" action="xxx.htm" onsubmit="return checkForm()">

(contd.)
 onMouseOver and onMouseOut
 onMouseOver and onMouseOut are often used to create
"animated" buttons.
76
An alert box appears when an onMouseOver event is
detected:
<a href="http://www.spi.com" onmouseover="alert('An
onMouseOver event’)”> <img src=“logo.gif" width="100"
height="30"> </a>

Handling Errors
The try...catch Statement
The try...catch statement allows you to test a block of code for
errors. The try block contains the code to be run, and the catch
block contains the code to be executed if an error occurs.
Syntax
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
77

 The example is supposed to
alert "Welcome guest!"
when the button is clicked.
However, there's a typo in
the message() function.
alert() is misspelled as
adddlert(). A JavaScript
error occurs. The catch
block catches the error and
executes a custom code to
handle it. The code displays
a custom error message
informing the user what
happened:
 <html>
<head>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.nn";
txt+="Error description: " + err.description +
"nn";
txt+="Click OK to continue.nn";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message"
onclick="message()" />
</body>
</html> 78

The Throw Statement
 The throw statement allows you to create an
exception. If you use this statement together with
the try...catch statement, you can control program
flow and generate accurate error messages.
 Syntax
 throw(exception)
 The exception can be a string, integer, Boolean or
an object.
79

The example determines the value of a variable called x. If the value of x is higher
than 10, lower than 0, or not a number, we are going to throw an error. The error is
then caught by the catch argument and the proper error message is displayed:
<html>
<body>
var x=prompt("Enter a number between 0
and 10:","");
try
{
if(x>10)
    {
    throw "Err1";
    }
else if(x<0)
    {
    throw "Err2";
    }
else if(isNaN(x))
    {
    throw "Err3";
    }
}
catch(er)
{
if(er=="Err1")
    {
    alert("Error! The value is too high");
    }
if(er=="Err2")
    {
    alert("Error! The value is too low");
    }
if(er=="Err3")
    {
    alert("Error! The value is not a
number");
    }
}
</script>
</body>
</html>
80

Defining Arrays
 An Array object is used to store a set of values in a single variable
name.
 An Array object is created with the new keyword.
 An array can be created as:
 var MyArray=new Array()
 An array can also be created by specifying the array size.
 var MyArray=new Array(3)
81

Arrays (contd.)
 Data can be entered into an array as:
var MyArray=new Array()
MyArray[0]=“Paul”
MyArray[1]=“Sam”
MyArray[2]=“Niel”
 Data can also be entered into an array as:
var MyArray=new Array(“Paul”,”Sam”, “Niel”)
82

Arrays (contd.)
 Accessing Arrays
 You can refer to a particular element in an array by
referring to the name of the array and the index number.
 The index number starts at 0 .
var MyArray=new Array()
Myarray [0]
83

A quick guide to Css and java script

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to A quick guide to Css and java script (20)

Recently uploaded (20)

A quick guide to Css and java script

Editor's Notes