JavaScript Scripts Optimize Dynamic Web Pages

Java Script
Web pages
• A Web page
– A file with an .htm or .html extension
– Contains HTML, but might also contain other
code
– Stored on a server
• Static Web pages
– Contain HTML tags only
– Simply display information
– Content does not change when requested by the
user
Web pages
• Dynamic Web pages
– Content changes depending on the user’s
request and preferences
– Cannot be created using HTML alone
• Dynamic Web pages can be created using
– Client-side code
– Server-side code
Web Programming
• Client-side code
– Declared by elements and executed in the browser
– Provide immediate feedback to the user
– Reduce the load on a server
– Reduce network traffic
• Server-side code
– Executed on the server side
– The code remains hidden from the clients
– Browser- and client-independent
Client-side programming
• Focuses on the stuff that is “run” on client
machine, usually by the browser.
– HTML interpreted and displayed.
– JavaScript interpreted and executed.
Server Client
HTML Hello
HTML files
Web browser
and programs
Browsers
• Browsers include HTML interpreting
component
• Browsers aim to display any version of
HTML code, even if it has errors.
• Different browsers with different settings
will display a page differently.
• Incorrect HTML may be displayed weirdly
or not at all in some browsers.
Cascading Style Sheets (CSS)
HTML Page
Web browser Displayed page
CSS stylesheet
Scripting
• Scripting languages are simple interpreted
programming languages.
• Scripts are used on:
– client side - program is run by the browser
– server side - results are sent to the browser.
• We focus on client-side scripts to add interactivity
to Web pages.
– script is embedded in the Web page.
• Most popular scripting language is JavaScript
Introduction
• JavaScript is the most popular scripting
language on the internet, and works in all
major browsers, such as Internet Explorer,
Firefox, Chrome, Opera, and Safari.
• Before learning JavaScript, one should have
a basic understanding of HTML.
What is java script
• JavaScript was designed to add interactivity to
HTML pages
• JavaScript is a scripting language
• JavaScript is usually embedded directly into
HTML pages
• JavaScript is an interpreted language (means
that scripts execute without preliminary
compilation)
• Everyone can use JavaScript without
purchasing a license
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 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 saves the server from extra
processing
• JavaScript can be used to detect the visitor's
browser - A JavaScript can be used to detect the
visitor's browser, and - depending on the browser - load
another page specifically designed for that browser
• JavaScript can be used to create cookies - A
JavaScript can be used to store and retrieve information
on the visitor's computer
structure
<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
• To insert a JavaScript into an HTML page, we use the
<script> tag. Inside the <script> tag we use the type
attribute to define the scripting language.
• So, the <script type="text/javascript"> and </script>
tells where the JavaScript starts and ends:
• The script tag takes two important
attributes:
• language: This attribute specifies what
scripting language you are using.
• type: This attribute is what is now
recommended to indicate the scripting
language in use and its value should be set
to "text/javascript".
• Browsers that do not support JavaScript, will display
JavaScript as page content.
• To prevent them from doing this, and as a part of the
JavaScript standard, the HTML comment tag should be
used to "hide" the JavaScript.
• Just add an HTML comment tag  (end of comment) after
the last JavaScript statement, like this:
• <script type="text/javascript">

</script>
The two forward slashes at the end of comment line (//)
is the JavaScript comment symbol. This prevents
JavaScript from executing the --> tag.
Where to Put the JavaScript
• JavaScripts in a page will be executed immediately while the
page loads into the browser. This is not always what we want.
Sometimes we want to execute a script when a page loads, or at
a later event, such as when a user clicks a button
• Scripts in <head>
• Scripts to be executed when they are called, or when an event is
triggered, are placed in functions.
• It is a good practice to put all your functions in the head section,
this way they are all in one place and do not interfere with page
content.
• Scripts in <body>
• Scripts placed in the body section are often used to display page
content while the page loads.
• Scripts in <head> and <body>
• You can place an unlimited number of scripts in your
document, and you can have scripts in both the body
and the head section at the same time.
• Using an External JavaScript
• JavaScript can also be placed in external files.
• External JavaScript files often contains code to be used
on several different web pages.
• External JavaScript files have the file extension .js.
• Note: External script cannot contain the
<script></script> tags!
• To use an external script, point to the .js file in the "src"
attribute of the <script> tag:
• Note: Remember to place the script exactly where you
normally would write the script!
• JavaScript is a sequence of statements to be
executed by the browser.
• JavaScript is Case Sensitive
• Unlike HTML, JavaScript is case sensitive -
therefore watch your capitalization closely when
you write JavaScript statements, create or call
variables, objects and functions.
• JavaScript Statements
• A JavaScript statement is a command to a
browser. The purpose of the command is to tell
the browser what to do.
• This JavaScript statement tells the browser to
write “IWP Course" to the web page:
JavaScript DataTypes
• Numbers eg. 123, 120.50 etc.

• Strings of text e.g. "This text string" etc.
• Boolean e.g. true or false.
• Global Variables: A global variable has global scope which means it
is defined everywhere in your JavaScript code.
• Local Variables: A local variable will be visible only within a
function where it is defined. Function parameters are always local to
.
that function
What is an operator?
• Arithmetic Operators
• Comparision Operators
• Logical (or Relational) Operators
• Assignment Operators
• Conditional (or ternary) Operators
Arithmetic Operators
Comparision Operators
Logical (or Relational) Operators
Assignment Operators
Conditional (or ternary)
Operators
Popup box
• Alert box
– alert("I am an alert box!");
• Confirm box
– confirm("Press a button!");
• Prompt box
– prompt("Please enter your name");
if statement:
The if statement is the fundamental control
statement that allows JavaScript to make
decisions and execute statements
conditionally.
Syntax:
if (expression){
Statement(s) to be executed if expression is
true
}
if...else statement:
The if...else statement is the next form of
control statement that allows JavaScript to
execute statements in more controlled way.
Syntax: if (expression){
true
}
else{
false }
if...else if... statement:
The if...else if... statement is the one level advance form of
control statement that allows JavaScript to make correct
decision out of several conditions.
Syntax: if (expression 1){
Statement(s) to be executed if expression 1 is true
}else if (expression 2){
}else if (expression 3){
}else{
Statement(s) to be executed if no expression is true
}
switch statement:
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}
The while Loop
Syntax: while (expression){
true
}
The do...while Loop:
• do{
• Statement(s) to be executed;
• } while (expression);
The for Loop
for (initialization; test condition; iteration
statement){
Statement(s) to be executed if test condition is
true
}
Break and continue
• The break statement, which was briefly introduced with
the switch statement, is used to exit a loop early, breaking
out of the enclosing curly braces.
• The continue statement tells the interpreter to immediately
start the next iteration of the loop and skip remaining code
block.
• When a continue statement is encountered, program flow
will move to the loop check expression immediately and if
condition remain true then it start next iteration otherwise
control comes out of the loop.
Example
<body>
Inside Para <br>
<html>
<script type="text/javascript">
<head>

</script></body></html>

JavaScript Scripts Optimize Dynamic Web Pages

Uploaded by

Document Information

Original Description:

Original Title

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

JavaScript Scripts Optimize Dynamic Web Pages

Uploaded by

Copyright:

Available Formats

Java Script

Web browser Displayed page

• Numbers eg. 123, 120.50 etc.

You might also like