Web Design Programming Chapter 3

WEB DESIGN PROGRAMMING: CHAPTER 3
(CSS AND JavaScript) ----JITENDRA SINGH
3.1 INTRODUCTION TO CSS

 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files
3.2 CSS SYNTAX

A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
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;
}
3.3 CSS SELECTORS
The element Selector

The element selector selects elements based on the element name.
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;
}
Note: An id name cannot start with a number!
The class Selector

The class selector selects elements with a specific class attribute.
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;
}
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;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
text-align: center;
color: red;
3.4 WAYS TO INSERT CSS

There are three ways of inserting a style sheet:
 External style sheet

 Internal style sheet
 Inline style
External Style Sheet

With an external style sheet, you can change the look of an entire website by
changing just one file!
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.
Here is how the "mystyle.css" looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.
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>
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>
3.5 CASCADING ORDER

What style will be used when there is more than one style specified for an HTML
element?
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:
1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)
3. Browser default
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.
3.6 INTRODUCTION
<h2>What Can JavaScript Do?</h2>
TO JAVASCRIPT
JavaScript is one of the 3 languages all web <p>JavaScript can change HTML
developers must learn: attributes.</p>
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages <p>In this case JavaScript changes the src
3. JavaScript to program the behavior of (source) attribute of an image.</p>
web pages
<button
onclick="document.getElementById('myImag
3.7 What can e').src='pic_bulbon.gif'">Turn on the
JAVASCRIPT Do? light</button>
JavaScript Can Change <img id="myImage" src="pic_bulboff.gif"

style="width:100px">
HTML Content
One of many JavaScript HTML methods <button
is getElementById(). onclick="document.getElementById('myImag
This example uses the method to "find" an e').src='pic_bulboff.gif'">Turn off the
HTML element (with id="demo") and changes light</button>
the element content (innerHTML) to "Hello
JavaScript": </body>
<!DOCTYPE html> </html>
<html>
<body>
JavaScript Can Change
HTML Styles (CSS)
Changing the style of an HTML element, is a
<p id="demo">JavaScript can change HTML variant of changing an HTML attribute:
content.</p> <!DOCTYPE html>
<html>
<button type="button" <body>
onclick='document.getElementById("demo").i
nnerHTML = "Hello JavaScript!"'>Click <h2>What Can JavaScript Do?</h2>
Me!</button>
<p id="demo">JavaScript can change the style
</body> of an HTML element.</p>
</html>
Note: JavaScript accepts both double and <button type="button"
single quotes: onclick="document.getElementById('demo').s
tyle.fontSize='35px'">Click Me!</button>
JavaScript Can Change </body>
</html>
HTML Attributes JavaScript Can Hide
This example changes an HTML image by
changing the src (source) attribute of an
<img> tag:
HTML Elements
<!DOCTYPE html> Hiding HTML elements can be done by
<html> changing the display style:
<body> <!DOCTYPE html>
<html>
<body>
Example
<script>
document.getElementById("demo").innerHTML
= "My First JavaScript";
</script>
<p id="demo">JavaScript can hide HTML
elements.</p>
JavaScript in <head> or
<button type="button"
onclick="document.getElementById('demo').s <body>
tyle.display='none'">Click Me!</button>
You can place any number of scripts in an
HTML document.
</body>
</html> Scripts can be placed in the <body>, or in the
<head> section of an HTML page, or in both.
JavaScript Can Show
HTML Elements JavaScript in <head>
Showing hidden HTML elements can also be
done by changing the display style: In this example, a JavaScript function is
<!DOCTYPE html> placed in the <head> section of an HTML
<html> page.
<body>
The function is invoked (called) when a button
<h2>What Can JavaScript Do?</h2> is clicked:
<p>JavaScript can show hidden HTML Example

elements.</p> <!DOCTYPE html>
<html>
<p id="demo" style="display:none">Hello
JavaScript!</p> <head>
<script>
<button type="button" function myFunction() {
onclick="document.getElementById('demo').s document.getElementById("demo").inner
tyle.display='block'">Click Me!</button> HTML = "Paragraph changed.";
}
</body> </script>
</html> </head>
3.8 Where to use <body>

JavaScript?
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
The <script> Tag <button type="button" onclick="myFunctio
n()">Try it</button>
In HTML, JavaScript code must be inserted
between <script> and </script> tags. </body>
</html>
JavaScript in <body> Example

<!DOCTYPE html>
<html>
In this example, a JavaScript function is <body>
placed in the <body> section of an HTML
page. <script src="myScript.js"></script>
The function is invoked (called) when a button </body>

is clicked: </html>
Note: External scripts cannot contain <script>
Example tags.
<!DOCTYPE html>
<html>
<body>
External JavaScript
<h1>A Web Page</h1>
Advantages
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()" Placing scripts in external files has some
>Try it</button> advantages:
<script>  It separates HTML and code

function myFunction() {  It makes HTML and JavaScript easier
document.getElementById("demo").innerHT to read and maintain
ML = "Paragraph changed.";  Cached JavaScript files can speed up
} page loads
</script>
To add several script files to one page - use
</body> several script tags:
</html>
Example
External JavaScript <script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Scripts can also be placed in external files:
External file: myScript.js 3.9 JavaScript variables

function myFunction() {
document.getElementById("demo").innerHT
ML = "Paragraph changed."; JavaScript variables are containers for storing
} data values.
External scripts are practical when the same In this example, x, y, and z, are variables:
code is used in many different web pages.
Example
JavaScript files have the file extension .js.
var x = 5;
To use an external script, put the name of the var y = 6;
script file in the src (source) attribute of a var z = x + y;
<script> tag:
From the example above, you can expect:
 x stores the value 5

 y stores the value 6

 z stores the value 11 Declaring (Creating)
JavaScript Identifiers JavaScript Variables
Creating a variable in JavaScript is called
All JavaScript variables must "declaring" a variable.
be identified with unique names.
You declare a JavaScript variable with
These unique names are called identifiers. the var keyword:
var carName;
Identifiers can be short names (like x and y) or
more descriptive names (age, sum, After the declaration, the variable has no
totalVolume). value. (Technically it has the value
of undefined)
The general rules for constructing names for
variables (unique identifiers) are: To assign a value to the variable, use the equal
sign:
 Names can contain letters, digits, carName = "Volvo";
underscores, and dollar signs.
 Names must begin with a letter You can also assign a value to the variable
 Names can also begin with $ and _ when you declare it:
 Names are case sensitive (y and Y are var carName = "Volvo";
different variables)
 Reserved words (like JavaScript In the example below, we create a variable
keywords) cannot be used as names called carName and assign the value "Volvo"
to it.
JavaScript Data Types
Then we "output" the value inside an HTML
JavaScript variables can hold numbers like paragraph with id="demo":
100 and text values like "John Doe".
Example
In programming, text values are called text <p id="demo"></p>
strings.
<script>
JavaScript can handle many types of data, but var carName = "Volvo";
for now, just think of numbers and strings. document.getElementById("demo").innerHTML
= carName;
</script>
Strings are written inside double or single
quotes. Numbers are written without quotes.
One Statement, Many
If you put a number in quotes, it will be
treated as a text string. Variables
Example You can declare many variables in one
var pi = 3.14; statement.
var person = "John Doe";
var answer = 'Yes I am!'; Start the statement with var and separate the
variables by comma:
var person = "John Doe", carName = "Volvo",
price = 200;
A declaration can span multiple lines:

var person = "John Doe",
carName = "Volvo", = x=y x=y
price = 200;
+= x += y x=x+y
3.10 JavaScript
Operators -= x -= y x=x–y
JavaScript Arithmetic *= x *= y x=x*y

Operators
/= x /= y x=x/y
Arithmetic operators are used to perform
arithmetic on numbers:
%= x %= y x=x%y
Operator Description
The addition assignment operator (+=) adds
a value to a variable.
+ Addition
JavaScript String
- Subtraction
Operators
* Multiplication The + operator can also be used to add
(concatenate) strings.
/ Division Example
txt1 = "John";
txt2 = "Doe";
% Modulus txt3 = txt1 + " " + txt2;
The result of txt3 will be:

++ Increment John Doe
Adding Strings and

-- Decrement
Numbers
JavaScript Assignment Adding two numbers, will return the sum, but
adding a number and a string will return a
Operators string:
Assignment operators assign values to Example

JavaScript variables. x = 5 + 5;
y = "5" + 5;
Operator Example Same As
z = "Hello" + 5;
Operator Description
The result of x, y, and z will be:
10
55 && logical and
Hello5
Note: If you add a number and a string, the
|| logical or
result will be a string!
JavaScript Comparison ! logical not
Operators
JavaScript Type
Operator Description Operators
== equal to Operator Description
=== equal value and equal type Typeof Returns the type of a variable
!= not equal Instanceof Returns true if an object is an

instance of an object type
!= = not equal value or not equal type

3.11 JavaScript
> greater than
Conditional
Statements
< less than In JavaScript we have the following
conditional statements:
>= greater than or equal to  Use if to specify a block of code to be

executed, if a specified condition is
true
<= less than or equal to  Use else to specify a block of code to
be executed, if the same condition is
false
? ternary operator  Use else if to specify a new condition
to test, if the first condition is false
 Use switch to specify many alternative
JavaScript Logical blocks of code to be executed
Operators The if Statement

Use the if statement to specify a block of

JavaScript code to be executed if a condition The else if Statement
is true.
Use the else if statement to specify a new
Syntax condition if the first condition is false.
if (condition) {
block of code to be executed if the condition is Syntax
true if (condition1) {
} block of code to be executed if condition1 is
true
Note that if is in lowercase letters. Uppercase } else if (condition2) {
letters (If or IF) will generate a JavaScript block of code to be executed if the condition1
error. is false and condition2 is true
} else {
Example block of code to be executed if the condition1
is false and condition2 is false
}
Make a "Good day" greeting if the hour is less
than 18:00:
if (hour < 18) {
Example
greeting = "Good day";
} If time is less than 10:00, create a "Good
morning" greeting, if not, but time is less than
The result of greeting will be: 20:00, create a "Good day" greeting, otherwise
Good day a "Good evening":
if (time < 10) {
greeting = "Good morning";
The else Statement } else if (time < 20) {
Use the else statement to specify a block of } else {
code to be executed if the condition is false. greeting = "Good evening";
if (condition) { }
block of code to be executed if the condition is
true The result of greeting will be:
} else { Good morning
block of code to be executed if the condition is
false
} 3.12 Javascript Functions
Example A JavaScript function is a block of code
designed to perform a particular task.
If the hour is less than 18, create a "Good day"
greeting, otherwise "Good evening": A JavaScript function is executed when
if (hour < 18) { "something" invokes it (calls it).
} else {
greeting = "Good evening";
}
Example
The result of greeting will be:
Good day function myFunction(p1, p2) {
return p1 * p2; // The function returns
the product of p1 and p2 An array is a special variable, which can hold

} more than one value at a time.
JavaScript Function If you have a list of items (a list of car names,

for example), storing the cars in single
Syntax variables could look like this:
var car1 = "Saab";
var car2 = "Volvo";
A JavaScript function is defined with
var car3 = "BMW";
the function keyword, followed by a name,
followed by parentheses ().
However, what if you want to loop through
the cars and find a specific one? And what if
Function names can contain letters, digits,
you had not 3 cars, but 300?
underscores, and dollar signs (same rules as
variables).
The solution is an array!
The parentheses may include parameter names
An array can hold many values under a single
separated by commas:
name, and you can access the values by
(parameter1, parameter2, ...)
referring to an index number.
The code to be executed, by the function, is
placed inside curly brackets: {}
function name(parameter1, parameter2,
parameter3) { Creating an Array
code to be executed
} Using an array literal is the easiest way to
create a JavaScript Array.
Function parameters are listed inside the
parentheses () in the function definition. Syntax:
var array_name = [item1, item2, ...];
Function arguments are the values received
by the function when it is invoked. Example
var cars = ["Saab", "Volvo", "BMW"];
Inside the function, the arguments (the
parameters) behave as local variables.
A Function is much the same as a Procedure

Using the JavaScript
or a Subroutine, in other programming
languages.
Keyword new
The following example also creates an Array,
3.13 Javascript Arrays and assigns values to it:
JavaScript arrays are used to store multiple Example

values in a single variable. var cars
= new Array("Saab", "Volvo", "BMW");
Example
Access the Elements of
an Array
What is an Array?
You refer to an array element by referring to

the index number.
You can write:
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
This statement accesses the value of the first }
element in cars:
var name = cars[0];
Different Kinds of
This statement modifies the first element in
cars: Loops
cars[0] = "Opel";
JavaScript supports different kinds of loops:
Example
var cars = ["Saab", "Volvo", "BMW"];  for - loops through a block of code a
document.getElementById("demo").innerHTML number of times
= cars[0];  for/in - loops through the properties of
an object
Access the Full Array  while - loops through a block of code
while a specified condition is true
 do/while - also loops through a block
With JavaScript, the full array can be accessed of code while a specified condition is
by referring to the array name: true
Example
document.getElementById("demo").innerHTML
= cars; The For Loop
The for loop is often the tool you will use
when you want to create a loop.
3.14 JavaScript Loops
The for loop has the following syntax:
Loops are handy, if you want to run the same for (statement 1; statement 2; statement 3) {
code over and over again, each time with a code block to be executed
different value. }
Often this is the case when working with Statement 1 is executed before the loop (the
arrays: code block) starts.
Instead of writing: Statement 2 defines the condition for running

text += cars[0] + "<br>"; the loop (the code block).
text += cars[1] + "<br>";
text += cars[2] + "<br>"; Statement 3 is executed each time after the
text += cars[3] + "<br>"; loop (the code block) has been executed.
text += cars[4] + "<br>";
text += cars[5] + "<br>"; Example
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
The For/In Loop

The JavaScript for/in statement loops through

the properties of an object:
Example
Example The example below uses a do/while loop. The
loop will always be executed at least once,
var person = {fname:"John", lname:"Doe",
age:25};
even if the condition is false, because the code
block is executed before the condition is
var text = ""; tested:
var x;
for (x in person) { Example
text += person[x]; do {
} text += "The number is " + i;
i++;
The While Loop }
while (i < 10);
The while loop loops through a block of code

3.15 JavaScript Objects
as long as a specified condition is true.
Syntax JavaScript variables are containers for data

while (condition) { values.
code block to be executed
} This code assigns a simple value (Fiat) to
a variable named car:
Example var car = "Fiat";
In the following example, the code in the loop Objects are variables too. But objects can
will run, over and over again, as long as a contain many values.
variable (i) is less than 10:
This code assigns many values (Fiat, 500,
Example white) to a variable named car:
while (i < 10) { var car = {type:"Fiat", model:"500",
text += "The number is " + i; color:"white"};
i++;
} The values are written as name:value pairs
(name and value separated by a colon).
The Do/While Loop Note: JavaScript

for named values
objects are containers
The do/while loop is a variant of the while

loop. This loop will execute the code block Object Properties
once, before checking if the condition is true,
then it will repeat the loop as long as the The name:values pairs (in JavaScript objects)
condition is true. are called properties.
var person = {firstName:"John",
Syntax lastName:"Doe", age:50, eyeColor:"blue"};
do {
code block to be executed
}
while (condition); Property Property Value
You define (and create) a JavaScript object

with an object literal:
firstName John
Example
var person = {firstName:"John",
lastName Doe lastName:"Doe", age:50, eyeColor:"blue"};
age 50 Accessing Object

Properties
eyeColor blue
You can access object properties in two ways:
objectName.propertyName
or
Object Methods objectName["propertyName"]
Methods are actions that can be performed on Example1

objects.
<!DOCTYPE html>
Methods are stored in properties as function
definitions. <html>
<body>
Property Property Value
firstName John <p>
There are two different ways to access an object

lastName Doe property:
</p>
age 50
<p>You can use person.property or
person["property"].</p>
eyeColor blue
fullName function() {return this.firstName <p id="demo"></p>

+ " " + this.lastName;}
JavaScript objects are containers for named <script>

values called properties or methods.
var person = {
firstName: "John",
Object Definition
lastName : "Doe",
id : 5566 3.16 JavaScript Cookies

Cookies are small items of data, each consisting
}; of a name and a value, stored on behalf of a
website by visitors’ web browsers. In JavaScript,
document.getElementById("demo").innerHTML cookies can be accessed through
= the document.cookie object, but the interface
provided by this object is very primitive.
person.firstName + " " + person.lastName; Cookies.js is a JavaScript object that allows
cookies to be created, retrieved, and deleted
</script> through a simple and intuitive interface.
Download Cookies.js
Download one of the files below and either
</body> incorporate it into your code or serve it as a separate
file.
</html> File Size Description
Cookies.js 661 bytes Minified version
Accessing Object Cookies.src.js 3,957 Full version, with
bytes comments
Methods The code creates a global object, Cookies, which has
functions to create, retrieve, and delete cookies.
You access an object method with the Creating cookies

following syntax: Cookies can be created using the set function,
objectName.methodName() which takes the cookie name and value as
parameters:
Example 1 // create a cookie
<!DOCTYPE html> 2 Cookies.set('theme', 'green');
<html> A cookie set in this way will be deleted when
<body> the visitor closes their web browser, will only be
accessible within the current directory on the
<p>Creating and using an object method.</p> current domain name, and will be sent over both
encrypted and unencrypted connections. These
<p>An object method is a function definition, features can be controlled through an optional
stored as a property value.</p> third parameter, which is an object with four
possible properties.
<p id="demo"></p> The expiry property allows the cookie can be
given an expiry date. Cookies with an expiry
<script> date will persist between browsing sessions, and
var person = { only be deleted when the expiry date is reached
firstName: "John", or the visitor instructs the browser to do so. The
lastName : "Doe", value of the property can be either a date on
id : 5566, which the cookie will expire or a number of
fullName : function() { seconds after which the cookie should expire:
return this.firstName + " " + this.lastName; 1 // create a cookie that expires after one
} 2 hour
}; 3 Cookies.set('theme', 'green', {expiry :
4 3600});
document.getElementById("demo").innerHTML 5
= person.fullName(); // create a cookie that expires on 1st
</script> January 2030
</body> Cookies.set('name', 'Stephen Morley',
</html> {expiry : new Date(2030, 0, 1)});
Every cookie is accessible only within a 1 // retrieve the values of any theme
particular path, which defaults to the current 2 cookies
directory — for example, a cookie set on a page var themes = Cookies.get('theme', true);
at http://example.com/news/ would by default be
accessible from Deleting cookies
http://example.com/news/archives/ but not from A cookie can be deleted using
the home page of the site. The path property the clear function, which takes the cookie name
allows an alternative path to be specified: as a parameter:
1 // create a cookie that is accessible 1 // delete the theme cookie
2 anywhere on the site 2 Cookies.clear('theme');
3 Cookies.set('theme', 'green', {path : '/'}); If the cookie was set for a path or domain other
4 than the current path and domain, these must be
5 // create a cookie that is accessible only passed to the clearfunction through its optional
within the news directory second parameter:
Cookies.set('country', 'uk', {path : 1 // delete the site-wide theme cookie
'/news/'}); 2 Cookies.clear(
Every cookie is accessible only on a particular 3 'theme',
domain, which defaults to the current domain 4 {
and its subdomains — for example, a cookie set 5 path : '/',
on news.example.com would by default be 6 domain : '.example.com'
accessible from archives.news.example.com but 7 });
not from the main domain example.com.
The domain property allows an alternative
domain to be specified:
1 // create a cookie that is accessible on all
2 subdomains of example.com
Cookies.set('theme', 'green', {domain :
'.example.com'});
Finally, the secure property can be set to true to
instruct the browser to send the cookie only over
encrypted connections:
1 // create a cookie that is sent only over
2 encrypted connections
Cookies.set('theme', 'green', {secure :
true});
Retrieving cookies
The value of a cookie can be retrieved using
the get function, which takes the cookie name as
a parameter:
1 // retrieve the value of the theme cookie
2 var theme = Cookies.get('theme');
If there is no cookie with the specified name, the
value undefined is returned. There may be more
than one cookie with the same name if they were
set for different paths or subdomains. In this
case the get function returns the most specific
cookie (the one set for the longest path).
Passing true as a second parameter to
the get function will cause it to return an array
containing the values of all cookies with the
specified name, in order of specificity:

Web Design Programming Chapter 3

Uploaded by

Web Design Programming Chapter 3

Uploaded by

WEB DESIGN PROGRAMMING: CHAPTER 3

(CSS AND JavaScript) ----JITENDRA SINGH

3.1 INTRODUCTION TO CSS

3.2 CSS SYNTAX

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

3.3 CSS SELECTORS

The element Selector

Note: An id name cannot start with a number!

The class Selector

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

3.4 WAYS TO INSERT CSS

 External style sheet

External Style Sheet

Here is how the "mystyle.css" looks:

Internal Style Sheet

3.5 CASCADING ORDER

1. Inline style (inside an HTML element)

JavaScript Can Change <img id="myImage" src="pic_bulboff.gif"

<p>JavaScript can show hidden HTML Example

3.8 Where to use <body>

JavaScript in <body> Example

The function is invoked (called) when a button </body>

<script>  It separates HTML and code

External file: myScript.js 3.9 JavaScript variables

 x stores the value 5

 y stores the value 6

A declaration can span multiple lines:

JavaScript Arithmetic *= x *= y x=x*y

The result of txt3 will be:

Adding Strings and

Assignment operators assign values to Example

JavaScript Comparison ! logical not

!= not equal Instanceof Returns true if an object is an

!= = not equal value or not equal type

>= greater than or equal to  Use if to specify a block of code to be

Operators The if Statement

Use the if statement to specify a block of

the product of p1 and p2 An array is a special variable, which can hold

JavaScript Function If you have a list of items (a list of car names,

A Function is much the same as a Procedure

JavaScript arrays are used to store multiple Example

You refer to an array element by referring to

Instead of writing: Statement 2 defines the condition for running

The For/In Loop

The JavaScript for/in statement loops through

The while loop loops through a block of code

Syntax JavaScript variables are containers for data

The Do/While Loop Note: JavaScript

The do/while loop is a variant of the while

You define (and create) a JavaScript object

age 50 Accessing Object

Methods are actions that can be performed on Example1

firstName John <p>

There are two different ways to access an object

fullName function() {return this.firstName <p id="demo"></p>

JavaScript objects are containers for named <script>

id : 5566 3.16 JavaScript Cookies

You access an object method with the Creating cookies

You might also like

JavaScript Arithmetic = x = y x=x*y