06-javascript
advertisement
JavaScript
CMPT 281
Outline
•
•
•
•
Introduction to JavaScript
Resources
What is JavaScript?
JavaScript in web pages
Announcements
Assignment 3
• Layout with tables
JavaScript Resources
Resources
Why JavaScript?
HTML + CSS + JavaScript
Separation of Concerns
Separation of Concerns
What is Javascript?
What is Javascript?
• A scripting programming language
– Cannot be run without a browser
– Embedded in most web browsers
• A way to create web pages that respond
dynamically to user action
• A tool for server-side development
Types of computer languages
•
•
•
•
High-Level vs. Low Level
Compiled vs. Interpreted
Structured vs. Object Oriented
Scripting vs. Programming
JavaScript
•
•
•
•
High-Level vs. Low Level
Compiled vs. Interpreted
Structured vs. Object Oriented
Scripting vs. Programming
History
• Need for ‘client side’ interaction
– Code executes on the local machine
– No need for network connection once script runs
• Developed by Netscape in 1995
– (Not related to the Java Language)
• Actually ECMAScript (ECMA-262)
– en.wikipedia.org/wiki/ECMAScript
– Several variants (JScript, Action Script…)
What can JavaScript do?
• It is a full programming language
– API (application programming interface) is specific
to working with browsers
• Restrictions:
– Security-based limitations
• No networking
• No access to local file system
– Limited UI toolkit and graphics
• (This is changing with HTML5)
What can JavaScript do?
• Benefits:
– Close integration with the browser
•
•
•
•
Access the webpage and all elements within
Adjust or create HTML
Open and resize browser windows
Run animations, play sounds
Example: writing to the page
Example: loading a random image
Where do scripts go?
• In the HMTL page
• Like styles, can be external, internal, or inline
– Use these for different situations
Where do scripts go?
• For scripts that respond to user events, and
for functions:
– Either external or internal
– In <head>…</head>
• For scripts that write document content:
– In <body>…</body>
Body example
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("This message written by JavaScript");
</script>
</body>
</html>
Internal example
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html
External example
<html>
<head>
<script type="text/javascript" src="xyz.js"></script>
</head>
<body>
</body>
</html>
How does JS access the page?
• DOM: Document Object Model
– A framework to describe a web page (document)
in a tree-like structure
DOM
DOM
Using the DOM to get at the page
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Using the DOM to get at the page
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
JavaScript Basics
JavaScript Basics
•
•
•
•
•
Statements
Variables
Events
Functions
Dialogs
Statements
<script type="text/javascript">
var a = 10;
var b = 11;
var c;
c = a + b;
alert(‘The answer is’ + c);
</script>
JavaScript Variables
• Variables are used to store data.
• Rules for variable names:
– Variable names are case sensitive
– They must begin with a letter or the underscore
character
• strname – STRNAME (not same)
JavaScript Variables
• Variables: containers for data
– All variables have
•
•
•
•
Name
Type – JavaScript is loosely typed
Value or “null”
To declare a variable
– var variableName
• Beware of reserved words:
– E.g., ‘if’, ‘Document’, ‘Math’, etc.
JavaScript Operators
• Arithmetic Operators
Operator
+
Description
Example
Addition
x=2
Result
4
y=2
x+y
-
Subtraction
x=5
3
y=2
x-y
*
Multiplication
x=5
20
y=4
x*y
/
Division
15/5
5/2
%
++
Modulus (division
remainder)
Increment
3
2,5
5%2
1
10%8
2
10%2
0
x=5
x=6
x++
--
Decrement
x=5
x--
x=4
JavaScript Operators
• Assignment
Operators
Operator
Example
Is The Same As
=
x=y
x=y
+=
x+=y
x=x+y
-=
x-=y
x=x-y
*=
x*=y
x=x*y
/=
x/=y
x=x/y
%=
x%=y
x=x%y
JavaScript Operators
• Comparison
Operators
Operator
Description
Example
==
is equal to
5==8 returns false
===
is equal to (checks for
both value and
type)
x=5
y="5"
x==y returns true
x===y returns
false
!=
is not equal
5!=8 returns true
>
is greater than
5>8 returns false
<
is less than
5<8 returns true
>=
is greater than or equal
to
5>=8 returns false
<=
is less than or equal to
5<=8 returns true
JavaScript Operators
• Logical Operators
Operator
Description
Example
&&
and
x=6
y=3
(x < 10 && y > 1)
returns true
||
or
x=6
y=3
(x==5 || y==5)
returns false
!
not
x=6
y=3
!(x==y) returns
true
User and Browser Events
Functions
<script type=“text/javascript”>
function dontClick()
{
alert("I told you not to click!");
}
</script>
...
<input type="button" value="Don't Click Me!"
onClick="dontClick()"/>
Dialogs
• alert("Hello!");
• confirm("Delete files?");
• var name=prompt("Your name?", "Tim Berners-Lee");
Coding Tips
•
•
•
•
•
Check your statements are on one line
Check your " and ' quotes match
Take care with capitalisation
Lay it out neatly - use tabs
Use the Chrome developer tools
– Or Firebug for Firefox
A Word About Comments
• JavaScript Comments
– These comments must be within a script
– // begins a single line comment
• These can start anywhere on the line, but the remainder of
the line becomes a comment
– /* All of your comments here… */
• Everything between the start and end comment markers are
comments
• Can be on a single line or span many…
• HTML Comments
– <!-- All of your comments here… -->
Ending Statements With a Semicolon?
• With traditional programming languages, like
C++ and Java, each code statement has to end
with a semicolon (;).
• Many programmers continue this habit when
writing JavaScript, but in general, semicolons
are optional!
• Semicolons are required if you want to put
more than one statement on a single line.
Example
JavaScript Libraries
Prototype
www.prototypejs.org/
script.aculo.us
Yahoo! User Interface Library
Dojo
jQuery
script.aculo.us/
developer.yahoo.com/yui/
dojotoolkit.org/
jquery.com/
MooTools
mootools.net/
Reminders for this week
• Do the JavaScript tutorials on w3schools:
– 'JS Basic‘: www.w3schools.com/js/
• Assignment
• Reading:
– Pattern group I: Designing Effective Page Layouts
• Pages 631-657