Lect35 javascript

JavaScript
JavaScript – programming language that can
appear in html pages.
It allow us to:
To dynamically create web pages
To control a browser application
Open and create new browser windows
Download and display contents of any URL
To interact with the user
Ability to interact with HTML forms
You can process values provided by checkbox, text, textarea
buttons

1

JavaScript
What is not possible with JavaScript
It is not possible to read and write files (security reasons)
The only networking support it provides is:
It can send the contents of forms to a server and e-mail
addresses
It can cause the browser to load a web page
JavaScript is not Java, however …
JavaScript program constructs are similar to Java’s
constructs (in many cases identical)
JavaScript can interact with java programs

2

JavaScript
JavaScript Interpreter – Process javaScript code
To write JavaScript programs you need
A web browser
A text editor
A JavaScript program can appear
In a file by itself typically named with the extension .js
In html files between a <script> and </script> tags
Client-Side JavaScript – the result of embedding a JavaScript
interpreter in a web browser
Example1 (See Example1.html)
We use document.writeln to create the page contents
Notice the html tags present in the writeln

3

JavaScript
When learning JavaScript we can identify two main areas
Core JavaScript – Set of rules specifying how to write JavaScript
programs
Client-Side JavaScript – How JavaScript is used in web browsers
A JavaScript program can appear
In a file by itself in a file typically with the extension .js
In html files between a <script> and </script> tags
Example1
We use document.writeln to create the page contents
Notice the html tags present in the writeln

4

Embedding JavaScript in HTML
Different ways to embed JavaScript in HTML
By using <script> and </script> tags in the html document
From an external file (specified via URL) using the src
attribute of the script tag
<script src=“demo.js”></script>
script src behaves as if contents of file appears directly
between the tags
As event handler
Example2 (See Example2.html)
JavaScript URLs
javascript:alert(“Welcome”)

5

External File Embedding
Script src behaves as if contents of file appears directly
between the tags
Example3 (See Example3.html and footer.js)
The src specifies an URL as its value
Advantages of external file
Simplifies html files by removing code file
Allows you to share code among html files
Improves efficiency by allowing the web browser to
cache the code

8

Event Handlers Embedding
Dynamic interaction with a user is possible by
responding to events (e.g., when the user clicks on a
button)
Events – Originate from html objects (e.g. buttons)
Event Handler – What will take place when an Event
occurs
Event Handler defined as attribute of html object
In Example 2 the handler is represented by the string (collection
of characters) that follows the onclick
alert(new Date()) represents a statement. Each statement must
be separated by semicolons.
When someone selects the button the code is executed.

9

Execution of JavaScript
Programs
HTML parser – Takes care of processing an html
document
JavaScript interpreter – Takes care of processing
JavaScript code
HTML parser – must stop processing an html file when
JavaScript code is found (JavaScript interpreter will then
be running)
This implies a page with JavaScript code that is computationally
intensive can take a long time to load

10

JavaScript
Let’s go over several basic constructs that allow us to define
JavaScript programs.
Some definitions
string – Any set of characters in double quotes (“ “)
function/method – An entity that completes a particular task for
us. It can takes values necessary to complete the particular task
and it can return values.
Generating Output with the document.writeln method
Allow us to add text to the html file (see Example1) by providing
the required text in “ “
You can specify html code and results of JavaScript constructs

11

JavaScript (Output)
Example 4 (See Example4.html)
Illustrates how we can create a table using document.writeln
Notice how we can use the Date() to specify a particular date
format. Date() is part of JavaScript
The + allow us to concatenate strings
Notice how we have specified the border size. If you use “ “ then
the table will not be generated. You need to use single quotes.
Keep in mind that this example could have been written without
using JavaScript. However you will see how by extending code
similar to the one provided you can dynamically decide what your
final html look like

12

JavaScript (Variables )
variable – A memory location that can store a value. In JavaScript
variables are declared using var
var name;
Variables names must start with a letter and can be followed by
letters and digits
A variable can hold different type of values
Values we can assign to variables
Integer – 0, 10, 40, 6, -7
Floating-point – 3.2, .67, 1.48E-20
String literals – “hello”, “goodbye”
Operators
Typical arithmetic operators (+, -, *, /)
Example 5 (See Example5.html)

13

JavaScript (Dialog Boxes)
We can perform input and output via dialog boxes
Input via prompt, Example 6 (See Example6.html)
Notice we can define several variables at the same
time
Comments
Can be defined using // (Everything until end of the
line is a comment)
Can be defined using /* */ (Everything in between /*
and */ is considered a comment.
/* */ can span several lines (// don’t)

14

JavaScript References

JavaScript The Definitive Guide by David
Flanagan
ISBN: 0-596-00048-0

JavaScript Pocket Reference by David Flanagan
ISBN: 0-596-00411-7

15

Lect35 javascript

More Related Content

What's hot (20)

Similar to Lect35 javascript (20)

Recently uploaded (20)

Lect35 javascript