Web Design Programming Chapter 3
Web Design Programming Chapter 3
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
In the following example all <p> elements will be center-aligned, with a red text color:
Example
p {
color: red;
text-align: center;
}
You can select all <p> elements on a page like this (in this case, all <p> elements will be
center-aligned, with a red text color):
Example
p {
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1":
Example
#para1 {
text-align: center;
color: red;
}
To select elements with a specific class, write a period (.) character, followed by the name
of the class.
In the example below, all HTML elements with class="center" will be red and center-aligned:
Example
.center {
text-align: center;
color: red;
}
WEB DESIGN PROGRAMMING: CHAPTER 3
(CSS AND JavaScript) ----JITENDRA SINGH
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
text-align: center;
color: red;
Each page must include a reference to the external style sheet file inside the
<link> element. The <link> element goes inside the <head> section:
Example
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not
contain any html tags. The style sheet file must be saved with a .css extension.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
Example
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
WEB DESIGN PROGRAMMING: CHAPTER 3
(CSS AND JavaScript) ----JITENDRA SINGH
Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a
<h1> element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Generally speaking we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number one has the highest
priority:
So, an inline style (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or in an
external style sheet, or a browser default value.
WEB DESIGN PROGRAMMING: CHAPTER 3
(CSS AND JavaScript) ----JITENDRA SINGH
<!DOCTYPE html>
<html>
Example
<script>
<body>
document.getElementById("demo").innerHTML
= "My First JavaScript";
<h2>What Can JavaScript Do?</h2> </script>
<p id="demo">JavaScript can hide HTML
elements.</p>
JavaScript in <head> or
<body>
<button type="button" You can place any number of scripts in an
onclick="document.getElementById('demo').s HTML document.
tyle.display='none'">Click Me!</button> Scripts can be placed in the <body>, or in the
<head> section of an HTML page, or in both.
</body> JavaScript in <head>
</html> In this example, a JavaScript function is
JavaScript Can Show placed in the <head> section of an HTML
page.
HTML Elements The function is invoked (called) when a button
is clicked:
Showing hidden HTML elements can also be
done by changing the display style:
<!DOCTYPE html>
Example
<!DOCTYPE html>
<html> <html>
<body>
<head>
<h2>What Can JavaScript Do?</h2>
<script>
function myFunction() {
<p>JavaScript can show hidden HTML
elements.</p>
document.getElementById("demo").innerH
<p id="demo" style="display:none">Hello TML = "Paragraph changed.";
JavaScript!</p> }
</script>
<button type="button" </head>
onclick="document.getElementById('demo').s <body>
tyle.display='block'">Click Me!</button> <h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
</body> <button type="button" onclick="myFunctio
</html> n()">Try it</button>
</body>
3.8 Where to use </html>
JavaScript?
JavaScript in <body>
The <script> Tag In this example, a JavaScript function is
In HTML, JavaScript code must be inserted placed in the <body> section of an HTML
between <script> and </script> tags. page.
The function is invoked (called) when a button
is clicked:
WEB DESIGN PROGRAMMING: CHAPTER 3
(CSS AND JavaScript) ----JITENDRA SINGH
Names must begin with a letter Then we "output" the value inside an HTML
Names can also begin with $ and _ paragraph with id="demo":
Names are case sensitive (y and Y are
different variables) Example
Reserved words (like JavaScript <p id="demo"></p>
keywords) cannot be used as names
<script>
JavaScript Data Types var carName = "Volvo";
document.getElementById("demo").innerHTML
= carName;
JavaScript variables can hold numbers like </script>
100 and text values like "John Doe".
In programming, text values are called text
strings.
One Statement, Many
JavaScript can handle many types of data, but
for now, just think of numbers and strings.
Variables
Strings are written inside double or single
You can declare many variables in one
quotes. Numbers are written without quotes.
statement.
If you put a number in quotes, it will be
Start the statement with var and separate the
treated as a text string.
variables by comma:
var person = "John Doe", carName = "Volvo",
Example price = 200;
var pi = 3.14;
var person = "John Doe";
A declaration can span multiple lines:
var answer = 'Yes I am!';
var person = "John Doe",
carName = "Volvo",
Declaring (Creating) price = 200;
-- Decrement
Adding Strings and
JavaScript Assignment Numbers
Operators Adding two numbers, will return the sum, but
Assignment operators assign values to adding a number and a string will return a
JavaScript variables. string:
Example
Operator Exampl Same As x = 5 + 5;
e y = "5" + 5;
z = "Hello" + 5;
= x=y x=y
The result of x, y, and z will be:
10
+= x += y x=x+y 55
Hello5
Note: If you add a number and a string, the
-= x -= y x=x–y result will be a string!
JavaScript Comparison
*= x *= y x=x*y
Operators
/= x /= y x=x/y
Operato Description
r
%= x %= y x=x%y
== equal to
The addition assignment operator (+=) adds
a value to a variable.
=== equal value and equal type
JavaScript String
Operators != not equal
WEB DESIGN PROGRAMMING: CHAPTER 3
(CSS AND JavaScript) ----JITENDRA SINGH
Example
JavaScript Type
Operators Make a "Good day" greeting if the hour is less
than 18:00:
if (hour < 18) {
greeting = "Good day";
Operator Description }
Example
Access the Elements of
an Array
var cars = ["Saab", "Volvo", "BMW"];
You refer to an array element by referring to
What is an Array? the index number.
This statement accesses the value of the first
An array is a special variable, which can hold element in cars:
more than one value at a time. var name = cars[0];
If you have a list of items (a list of car names,
for example), storing the cars in single This statement modifies the first element in
variables could look like this: cars:
var car1 = "Saab"; cars[0] = "Opel";
var car2 = "Volvo";
var car3 = "BMW"; Example
var cars = ["Saab", "Volvo", "BMW"];
However, what if you want to loop through document.getElementById("demo").innerHTML
the cars and find a specific one? And what if = cars[0];
you had not 3 cars, but 300?
The solution is an array! Access the Full Array
An array can hold many values under a single
name, and you can access the values by With JavaScript, the full array can be accessed
referring to an index number. by referring to the array name:
Example
var cars = ["Saab", "Volvo", "BMW"];
Creating an Array document.getElementById("demo").innerHTML
= cars;
Using an array literal is the easiest way to
create a JavaScript Array.
Syntax:
var array_name = [item1, item2, ...]; 3.14 JavaScript Loops
Example Loops are handy, if you want to run the same
var cars = ["Saab", "Volvo", "BMW"]; code over and over again, each time with a
different value.
Often this is the case when working with
Using the JavaScript arrays:
Example
var person = {fname:"John", lname:"Doe",
You can write: age:25};
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>"; var text = "";
} var x;
for (x in person) {
Different Kinds of text += person[x];
}
Loops
The While Loop
JavaScript supports different kinds of loops:
The while loop loops through a block of code
for - loops through a block of code a as long as a specified condition is true.
number of times
for/in - loops through the properties of Syntax
an object while (condition) {
while - loops through a block of code code block to be executed
while a specified condition is true }
do/while - also loops through a block
of code while a specified condition is Example
true
In the following example, the code in the loop
will run, over and over again, as long as a
The For Loop variable (i) is less than 10:
Example
The for loop is often the tool you will use while (i < 10) {
when you want to create a loop. text += "The number is " + i;
The for loop has the following syntax: i++;
for (statement 1; statement 2; statement 3) { }
code block to be executed
}
The Do/While Loop
Statement 1 is executed before the loop (the
code block) starts. The do/while loop is a variant of the while
Statement 2 defines the condition for running loop. This loop will execute the code block
the loop (the code block). once, before checking if the condition is true,
Statement 3 is executed each time after the then it will repeat the loop as long as the
loop (the code block) has been executed. condition is true.
Example Syntax
for (i = 0; i < 5; i++) { do {
text += "The number is " + i + "<br>"; code block to be executed
} }
while (condition);
The For/In Loop
WEB DESIGN PROGRAMMING: CHAPTER 3
(CSS AND JavaScript) ----JITENDRA SINGH
Example
lastName Doe
The example below uses a do/while loop. The
loop will always be executed at least once,
even if the condition is false, because the code age 50
block is executed before the condition is
tested:
eyeColor blue
Example
do {
text += "The number is " + i;
i++;
} Object Methods
while (i < 10);
3.15 JavaScript Objects Methods are actions that can be performed on
objects.
Methods are stored in properties as function
definitions.
JavaScript variables are containers for data
values.
This code assigns a simple value (Fiat) to Property Property Value
a variable named car:
var car = "Fiat";
Objects are variables too. But objects can firstNam John
contain many values. e
This code assigns many values (Fiat, 500,
white) to a variable named car:
var car = {type:"Fiat", model:"500", lastName Doe
color:"white"};
The values are written as name:value pairs
(name and value separated by a colon). age 50
Note: JavaScript objects are containers
for named values
eyeColor blue
Object Properties
fullName function() {return this.firstName
The name:values pairs (in JavaScript objects) + " " + this.lastName;}
are called properties.
var person = {firstName:"John",
lastName:"Doe", age:50, eyeColor:"blue"}; JavaScript objects are containers for named
values called properties or methods.
Example Example
var person = {firstName:"John", <!DOCTYPE html>
lastName:"Doe", age:50, eyeColor:"blue"}; <html>
<body>
Accessing Object <p>Creating and using an object method.</p>
Properties <p>An object method is a function definition,
stored as a property value.</p>
You can access object properties in two ways:
objectName.propertyName <p id="demo"></p>
or <script>
objectName["propertyName"] var person = {
firstName: "John",
Example1 lastName : "Doe",
id : 5566,
<!DOCTYPE html> fullName : function() {
<html> return this.firstName + " " + this.lastName;
<body> }
};
<p>
There are two different ways to access an object document.getElementById("demo").innerHTML
property: = person.fullName();
</p> </script>
<p>You can use person.property or </body>
person["property"].</p> </html>
<p id="demo"></p> 3.16 JavaScript Cookies
Cookies are small items of data, each consisting
<script> of a name and a value, stored on behalf of a
var person = { website by visitors’ web browsers. In JavaScript,
firstName: "John", cookies can be accessed through
lastName : "Doe", the document.cookie object, but the interface
id : 5566 provided by this object is very primitive.
}; Cookies.js is a JavaScript object that allows
document.getElementById("demo").innerHTML cookies to be created, retrieved, and deleted
= through a simple and intuitive interface.
person.firstName + " " + person.lastName;
</script> Download Cookies.js
Download one of the files below and either
incorporate it into your code or serve it as a separate
</body>
file.
</html>
File Size Description
7 domain : '.example.com'
});