Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
65 views

Javascript (Ecmascript) : Client-Side Dynamic Documents

Just about all scripting is now done using JavaScript (ECMAScript) JavaScript is a very simple scripting language. Syntax is similar to a C / Java. Interpreted language. OOP, but parts of the support for objects are cumbersome.

Uploaded by

jitendraz
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
65 views

Javascript (Ecmascript) : Client-Side Dynamic Documents

Just about all scripting is now done using JavaScript (ECMAScript) JavaScript is a very simple scripting language. Syntax is similar to a C / Java. Interpreted language. OOP, but parts of the support for objects are cumbersome.

Uploaded by

jitendraz
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

JavaScript

(ECMAScript)
Client-side dynamic documents

Netprog: JavaScript 1
Smart Browsers
• Most browsers support a <script> tag
that is used to include executable
content in an HTML document.

• There have been a number of scripting


languages supported by browsers, but
just about all scripting is now done
using JavaScript (ECMAScript).
Netprog: JavaScript 2
JavaScript Capabilities
• Add content to a web page dynamically.
• Alter a web page in response to user
actions.
• React to user events.
• Interact with frames.
• Manipulate HTTP cookies
• Special Effects
• Limited network programming
Netprog: JavaScript 3
JavaScript is not Java
• JavaScript is a very simple scripting
language.
• Syntax is similar to a C/Java.
• Interpreted language.
• OOP, but parts of the support for objects are
cumbersome.

Netprog: JavaScript 4
Language Elements
• Variables
• Literals
• Operators
• Control Structures
• Objects

Netprog: JavaScript 5
JavaScript Variables
• Untyped!
• Can be declared with var keyword:
var foo;

• Can be created automatically by


assigning a value:
foo=1; blah="Hi Dave";

Netprog: JavaScript 6
Variables (cont.)
• Using var to declare a variable results
in a local variable (inside a function).

• If you don't use var – the variable is a


global variable.

Netprog: JavaScript 7
Literals
• The typical bunch:
– Numbers 17 123.45
– Strings "Hello Dave"
– Boolean: true false
– Arrays: [1,"Hi Dave",17.234]

Arrays can hold anything!

Netprog: JavaScript 8
Operators
• Arithmetic, comparison, assignment,
bitwise, boolean (pretty much just like
C).

+ - * / % ++ -- == != > <
&& || ! & | << >>

Netprog: JavaScript 9
Control Structures
• Again – pretty much just like C:
if if-else ?: switch

for while do-while

• And a few not in C


for (var in object)

with (object)

Netprog: JavaScript 10
Objects
• Objects have attributes and methods.
• Many pre-defined objects and object
types.
• Using objects follows the syntax of C++/
Java:
objectname.attributename
objectname.methodname()

Netprog: JavaScript 11
Array Objects
• Arrays are supported as objects.

• Attribute length

• Methods include:
concat join pop push reverse sort

Netprog: JavaScript 12
Array example code
var a = [8,7,6,5];

for (i=0;i<a.length;i++)
a[i] += 2;

b = a.reverse();

Netprog: JavaScript 13
Many other pre-defined object types

• String: manipulation methods


• Math: trig, log, random numbers
• Date: date conversions
• RegExp: regular expressions
• Number: limits, conversion to string

Netprog: JavaScript 14
Predefined Objects
• JavaScript also includes some objects
that are automatically created for you
(always available).
– document
– navigator
– screen
– window

Netprog: JavaScript 15
The document object
• Many attributes of the current
document are available via the
document object:
Title Referrer
URL Images
Forms Links
Colors Cookies

Netprog: JavaScript 16
document methods
• document.write() like a print
statement – the output goes into the
HTML document.

document.write("My title is" +


document.title);

string concatenation!

Netprog: JavaScript 17
JavaScript Example
<head>
<title>JavaScript is Javalicious</title>
</head>
<body>
<h3>I am a web page and here is my
name:</h3>
<script>
document.write(document.title);
</script>
<hr/>

Netprog: JavaScript 18
JavaScript and
HTML Comments
<script>
n t
<!-- e
m
document.write("Hi Dave"); om
c
L
document.bgColor="BLUE"; T M
H
-->
</script>

Netprog: JavaScript 19
JavaScript Functions
• The keyword function used to define
a function (subroutine):

function add(x,y) {
return(x+y);
}

Netprog: JavaScript 20
JavaScript Events
• JavaScript supports an event handling
system.
– You can tell the browser to execute
javascript commands when some event
occurs.
– Sometimes the resulting value of the
command determines the browser action.

Netprog: JavaScript 21
Simple Event Example
Depending on your browser setting, this may not change the window size...

<body onUnload="restore()">
<h5>Hello - I am a very small page!</h5>
<script>
savewidth = window.innerWidth;
saveheight = window.innerHeight;
function restore() {
window.innerWidth=savewidth;
window.innerHeight=saveheight;
}
// Change the window size to be small
window.innerWidth=300; window.innerHeight=50;
document.bgColor='cyan';
</script>
Netprog: JavaScript 22
Buttons
• You can associate buttons with JavaScript
events (buttons in HTML forms)

<form>
<input type='button'
value="Don't Press Me"
onClick="alert('now you are in trouble!')“ >
</form>

Netprog: JavaScript 23
Some Events (a small sample)
onUnload
Window events
onLoad
onClick
onMouseUp Button events
onMouseDown
onDblClick
onMouseOver Link events

Netprog: JavaScript 24
Document Object Model
• Naming hierarchy used to access
individual elements of a HTML
document.
• There are some variations in the DOM
supported by browsers (DAM!!!)*
• Easy to use if you provide id attributes
for all entities:
– Forms, fields, images, etc.
Things are getting better all the time – there are
standard DOMs defined by The W3C
Netprog: JavaScript 25
DOM example
<form id=myform ACTION=…
Please Enter Your Age:
<input type='text' id='age'
name='age'><br/>
And your weight:
<input type='text'id='weight'
name='weight'><br/>
</form>
From javascript you can get at the age input field as:
document.getElementById("age").value

Netprog: JavaScript 26
Form Field Validation
• You can have JavaScript code that
makes sure the user enters valid
information.
• When the submit button is pressed the
script checks the values of all
necessary fields:
– You can prevent the request from
happening.

Netprog: JavaScript 27
Checking Fields
function checkform() {
if
(document.getElementById("age").value
== "") {
alert("You need to specify an age");
return(false);
} else {
return(true);
}

Needs to return true or false!


Netprog: JavaScript 28
Nee
bro ded
ws
er f to pre
The Form rom ve
sub nt th
mit e
ting
<form !
method='get'action='foo.cgi'
onSubmit="return(checkform())">

Age: <input type='text'


id='age' name='age'>
<input type='submit'>
</form>

Netprog: JavaScript 29
Complete Form
Example

• Check the CGI example named


"JavaScript" for a complete example:
– Student grade database with form field
validation in the form.

Netprog: JavaScript 30
Important Note about Form
Validation!!!
• It's a good idea to make sure the user fills out
the form before submitting.

• Users can bypass your form – they can


create requests manually (or their own
forms).

• Your CGI programs cannot rely (soley) on


Client-Side JavaScript to validate form fields!

Netprog: JavaScript 31
Lots of JavaScript
• There are many javascript examples
available via the course home page:

"Stupid JavaScript Tricks“

Got one of your own? Send it to Dave!

Netprog: JavaScript 32

You might also like