Unit 10 - WDD - Lesson 06 - JS

Website Design &
Development
LESSON [6] –JAVASCRIPTS
JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScript
HTML is the markup language that we use to structure and give meaning to our web content, for
example defining paragraphs, headings, and data tables, or embedding images and videos in the
page.
CSS is a language of style rules that we use to apply styling to our HTML content, for example
setting background colors and fonts, and laying out our content in multiple columns.
JavaScript is a programming language that enables you to create dynamically updating content,
control multimedia, animate images, and pretty much everything else. Ok, not everything, but it
is amazing what you can achieve with a few lines of JavaScript code.

Tags
The <script> Tag
In HTML, JavaScript code must be inserted between <script> and </script> tags.

Inner HTML
In HTML, JavaScript code must be inserted between <script> and </script> tags.

JavaScript Functions and Events
◦ A JavaScript function is a block of JavaScript code, that can be executed when
"called" for.
◦ For example, a function can be called when an event occurs, like when the user
clicks a button.
JavaScript in <head> or <body>

◦ You can place any number of scripts in an HTML document.
◦ Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in
both.

JavaScript in <head>

JavaScript in <body>

External JavaScript Advantages
◦ Placing scripts in external files has some advantages:
◦ It separates HTML and code
◦ It makes HTML and JavaScript easier to read and maintain
◦ Cached JavaScript files can speed up page loads

JavaScript Display Possibilities
JavaScript can "display" data in different ways:
◦ Writing into an HTML element, using innerHTML.
◦ Writing into the HTML output using document.write().
◦ Writing into an alert box, using window.alert().
◦ Writing into the browser console, using console.log().

Using innerHTML
◦ To access an HTML element, JavaScript can use
the document.getElementById(id) method.
◦ The id attribute defines the HTML element. The innerHTML property defines the
HTML content:

Using document.write()
◦ For testing purposes, it is convenient to use document.write():

Using window.alert()
◦ You can use an alert box to display data:

JavaScript Variables
◦ In a programming language, variables are used to store data values.
◦ JavaScript uses the var keyword to declare variables.
◦ An equal sign is used to assign values to variables.

JavaScript Identifiers
◦ Identifiers are names.
◦ In JavaScript, identifiers are used to name variables (and keywords, and functions,
and labels).
◦ The rules for legal names are much the same in most programming languages.
◦ In JavaScript, the first character must be a letter, or an underscore (_), or a dollar
sign ($).

JavaScript Functions
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
Why Functions?
◦ You can reuse code: Define the code once, and use it many times.
◦ You can use the same code many times with different arguments, to produce different results.

JavaScript Events
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these events.

JavaScript Math Object
The JavaScript Math object allows you to perform mathematical tasks on
numbers.
◦ Math.round() -Math.round(x) returns the value of x rounded to its nearest integer:

◦ Math.pow() -Math.pow(x, y) returns the value of x to the
power of y:

Math.sqrt() - Math.sqrt(x) returns the square root of x:

Math.abs() - Math.abs(x) returns the absolute (positive)
value of x:

Math.ceil() - Math.ceil(x) returns the value of x
rounded up to its nearest integer:

Math.min() and Math.max() - Math.min() and
Math.max() can be used to find the lowest or highest
value in a list of arguments:

JavaScript Arrays
What is an Array?
◦ An array is a special variable, which can hold more than one value at a time.

Access the Elements of an Array

Arrays are Objects
Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.
But, JavaScript arrays are best described as arrays.
Arrays use numbers to access its "elements". In this example, person[0] returns John:

The length Property

Looping Array Elements

Adding Array Elements

Sorting an Array

Reversing an Array

Numeric Sort
By default, the sort() function sorts values as strings.
This works well for strings ("Apple" comes before "Banana").
However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than
"1".
Because of this, the sort() method will produce incorrect result when sorting numbers.
You can fix this by providing a compare function:

The Compare Function
The purpose of the compare function is to define an alternative sort order.
The compare function should return a negative, zero, or positive value, depending
on the arguments:
function(a, b){return a-b}
When the sort() function compares two values, it sends the values to the compare
function, and sorts the values according to the returned (negative, zero, positive)
value.
Example:
◦ When comparing 40 and 100, the sort() method calls the compare function(40,100).
◦ The function calculates 40-100, and returns -60 (a negative value).
◦ The sort function will sort 40 as a value lower than 100.

Numeric Sort

JavaScript If...Else Statements
Conditional Statements
◦ Very often when you write code, you want to perform different actions for different decisions.
◦ You can use conditional statements in your code to do this.
◦ In JavaScript we have the following conditional statements:
◦ Use if to specify a block of code to be executed, if a specified condition is true
◦ Use else to specify a block of code to be executed, if the same condition is false
◦ Use else if to specify a new condition to test, if the first condition is false
◦ Use switch to specify many alternative blocks of code to be executed

The if Statement

The else Statement

The else if Statement

JavaScript Switch Statement
◦ This is how it works:
◦ The switch expression is evaluated once.
◦ The value of the expression is compared with the values of each case.
◦ If there is a match, the associated block of code is executed.

JavaScript Loops
Loops are handy, if you want to run the same code over and over
again, each time with a different value.
Often this is the case when working with arrays:

JavaScript Forms
JavaScript is often used to validate numeric input:

JavaScript Objects
In JavaScript, objects are king. If you understand objects, you understand
JavaScript.
In JavaScript, almost "everything" is an object.
◦ Numbers can be objects (if defined with the new keyword)
◦ Strings can be objects (if defined with the new keyword)
◦ Dates are always objects
◦ Maths are always objects
◦ Arrays are always objects
◦ Functions are always objects
◦ Objects are always objects

The this Keyword
In JavaScript, the thing called this, is the object that "owns" the JavaScript code.
The this keyword in an object constructor does not have a value. It is only a
substitute for the new object.
The value of this will become the new object when the constructor is used to
create an object.

JavaScript Properties
Properties are the values associated with a JavaScript object.

A JavaScript object is a collection of unordered properties.
Properties can usually be changed, added, and deleted, but some are read only.

JavaScript Methods
JavaScript methods are the actions that can be performed on objects.
A JavaScript method is a property containing a function definition.
Accessing Object Methods

Using Built-In Methods
This example uses the toUpperCase() method of the String object, to convert a text to
uppercase:

Date() Method
Returns today's date and time

JavaScript String split() Method
The split() method is used to divided a string into an array of substrings, and
returns the new array.
Tip: If an empty string ("") is used as the separator, the string is split between
each character.
Note: The split() method does not change the original string.

JavaScript Array shift() Method
The shift() method removes the first item of an array, and returns that item.
Note: This method changes the length of an array!
Tip: To remove the last item of an array, use the pop() method.

JavaScript Timing Events
The window object allows execution of code at specified time intervals.

These time intervals are called timing events.
The two key methods to use with JavaScript are:
◦ setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of milliseconds.
◦ setInterval(function, milliseconds)
Same as setTimeout(), but repeats the execution of the function continuously.

The setTimeout() Method
The first parameter is a function to be executed.
The second parameter indicates the number of milliseconds before execution.

How to Stop the Execution?
The clearTimeout() method stops the execution of the function specified in
setTimeout().
The window.clearTimeout() method can be written without the window prefix.
The clearTimeout() method uses the variable returned from setTimeout():

The setInterval() Method
The setInterval() method repeats a given function at every given time-interval.
The window.setInterval() method can be written without the window prefix.
The first parameter is the function to be executed.
The second parameter indicates the length of the time-interval between each execution.

How to Stop the Execution?
The clearInterval() method stops the executions of the function specified in the
setInterval() method.
The window.clearInterval() method can be written without the window prefix.
The clearInterval() method uses the variable returned from setInterval():

JavaScript Cookies
What are Cookies?
Cookies are data, stored in small text files, on your computer.
When a web server has sent a web page to a browser, the connection is shut
down, and the server forgets everything about the user.
Cookies were invented to solve the problem "how to remember information
about the user":
When a user visits a web page, his name can be stored in a cookie.
Next time the user visits the page, the cookie "remembers" his name.

Cookies are a plain text data record of 5 variable-length fields
−
Expires − The date the cookie will expire. If this is blank, the cookie will expire when the visitor
quits the browser.
Domain − The domain name of your site.
Path − The path to the directory or web page that set the cookie. This may be blank if you want
to retrieve the cookie from any directory or page.
Secure − If this field contains the word "secure", then the cookie may only be retrieved with a
secure server. If this field is blank, no such restriction exists.
Name=Value − Cookies are set and retrieved in the form of key-value pairs

Countdown

Change Several Property Values
The following example adds a transition effect for both the width and height
property, with a duration of 2 seconds for the width and 4 seconds for the height:

Specify the Speed Curve of the Transition
The transition-timing-function property can have the following
values:
•ease - specifies a transition effect with a slow start, then fast,
then end slowly (this is default)
•linear - specifies a transition effect with the same speed from
start to end
•ease-in - specifies a transition effect with a slow start
•ease-out - specifies a transition effect with a slow end
•ease-in-out - specifies a transition effect with a slow start and
end

Transition + Transformation

Array slides

Any Question ?
The End..!!

Unit 10 - WDD - Lesson 06 - JS

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 10 - WDD - Lesson 06 - JS

Uploaded by

Copyright:

Available Formats

Website Design &

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScript in <head> or <body>

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

Properties are the values associated with a JavaScript object.

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

The window object allows execution of code at specified time intervals.

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT

JavaScripts WEBSITE DESIGN & DEVELOPMENT