Introduction to JavaScript
(JavaScript 1)
Xingquan (Hill) Zhu
xqzhu@cse.fau.edu
JS
1-1
JS
Introduction
General Syntactic Characteristics
JS write to the XHTML document
Write vs Writeln
Typical JS dialogs
Primitives, Operations, & Expressions
Primitives: Number, String, Boolean, Undefined, Null
Numeric operators
String catenation
Coercions
Control Statements
Selection statements
Loop statements
JS
1-2
Introduction
JavaScript scripting language
Enhance functionality and appearance
Client-side scripting
• Make pages more dynamic and interactive
Foundation for complex server-side scripting
Program development
Program control
JavaScript Examples
JS
1-3
Things you should know about JS
JavaScript can be used to replace some of what is
typically done with applets (except graphics)
JavaScript can be used to replace some of what is
done with CGI (but no file operations or
networking)
User interactions through forms are easy
The Document Object Model (DOM) makes it
possible to support dynamic HTML documents with
JavaScript
Event-Driven Computation
User interactions with HTML documents in JavaScript
use the event-driven model of computation
User interactions with form elements can be used to
trigger execution of scripts
JS
1-4
Things you should know about JS
JavaScript is NOT an object-oriented
programming language
Does not support class-based inheritance
• Cannot support polymorphism
Has prototype-based inheritance, which is much
different
JavaScript Objects
JavaScript objects are collections of properties, which
are like the members of classes in Java and C++
• Date.getTime()
JavaScript has primitives for simple types
All JavaScript objects are accessed through references
JS
1-5
General Syntactic Characteristics
For this book, all JavaScript scripts will be embedded
in HTML documents
Either directly, as in
<script type = “text/javaScript">
-- JavaScript script –
</script>
Or indirectly, as a file specified in the src attribute of
<script>, as in
<script type = "text/javaScript"
src = "myScript.js">
</script>
Example
JS
1-6
General Syntactic Characteristics
Identifier form: begin with a letter or underscore,
followed by any number of letters, underscores, and
digits
Case sensitive
variable1 and Variable1 are different
25 reserved words, plus future reserved words
- Comments: both // and /* … */
JS
1-7
General Syntactic Characteristics
Scripts are usually hidden from browsers that do not
include JavaScript interpreters by putting them in
special comments
<!—
-- JavaScript script –
//-->
Semicolons can be a problem
They are “somewhat” optional
Problem: When the end of the line CAN be the end of a
statement – JavaScript puts a semicolon there
Return
X;
JS
1-8
JS
Introduction
General Syntactic Characteristics
JS write to the XHTML document
Write vs Writeln
Typical JS dialogs
Primitives, Operations, & Expressions
Primitives: Number, String, Boolean, Undefined, Null
Numeric operators
String catenation
Coercions
Control Statements
Selection statements
Loop statements
JS
1-9
Simple Program: Printing a line of
text in a web page
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A First Program in JavaScript</title>
<script type = "text/javascript">
<!-document.writeln("<h1>Welcome to JavaScript
Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
Example
JS
1-10
Write vs Writeln
Document.writeln(“This is the end!”)
Document.write(“This is the end!\r\n”);
Example2
Example 3
Want to know what was written to the browser?
Mozilla
Script Tracer http://www.netamo.com/tracer
JS
1-11
JS
1-12
Typical JS dialogs
“Window” object
JavaScript model for the browser window
Three methods: Prompt, confirm, alert
• Cause the browser to wait for a user response
Example alert, confirm, prompt
JS
1-13
Number
parseInt(variable);
parseFloat(variable);
Example
JS
1-14
JS
Introduction
General Syntactic Characteristics
JS write to the XHTML document
Write vs Writeln
Typical JS dialogs
Primitives, Operations, & Expressions
Primitives: Number, String, Boolean, Undefined, Null
Numeric operators
String catenation
Coercions
Control Statements
Selection statements
Loop statements
JS
1-15
Primitives, Operations, & Expressions
Five primitive types
Example
Number, String, Boolean, Undefined, or Null
JavaScript is dynamically typed – any variable can be
used for anything (primitive value or reference to any
object)
The interpreter determines the type of a particular
occurrence of a variable
• complication
Variables can be either implicitly or explicitly declared
var sum = 0,
today = "Monday",
flag = false;
JS
1-16
Primitives, Operations, & Expressions
Number, String, and Boolean have wrapper objects
(Number, String, and Boolean)
All numeric values are stored in double-precision floating
point
String literals are delimited by either ' or “
• Can include escape sequences (e.g., \t)
Boolean values are true and false
The only Null value is null
The only Undefined value is undefined
In the cases of Number and String, primitive values
and objects are coerced back and forth so that
primitive values can be treated essentially as if they
were objects
Var num_v=Number(str_v);
Var str_v=String(num_v);
Var str_v=num_v.toString();
str_v=num_v.toString(2);
JS
1-17
Primitives, Operations, & Expressions
Numeric operators - ++, --, +, -, *, /, %
All operations are in double precision
A++ - A=A+1;
A++ vs ++A;
Example
The Math Object
Provides floor, round, max, min, trig functions, etc.
Example
Math functions supported by JS
• e.g., Math.cos(x)
http://www.javascripter.net/faq/
mathfunc.htm
JS
1-18
Primitives, Operations, & Expressions
The Number Object
Example
Some useful properties:
• MAX_VALUE, MIN_VALUE, NaN,
POSITIVE_INFINITY, NEGATIVE_INFINITY, PI
– e.g., Number.MAX_VALUE
• An arithmetic operation that creates overflow
returns NaN
• NaN is not == to any number, not even itself
• Test for it with isNaN(x)
• Number object has several methods
– toString toFixed toExponential
toPrecision valueOf
JS
1-19
Primitives, Operations, & Expressions
String catenation operator: + Example
Coercions
Catenation coerces numbers to strings
• Numeric operators (other than +) coerce strings to numbers (if
either operand of + is a string, it is assumed to be catenation
• Conversions from strings to numbers that do not work return NaN
Explicit conversions
• Use the String and Number constructors
• Use toString method of numbers
• Use parseInt and parseFloat on strings
String properties & methods
length e.g., var len = str1.length; (a property)
charAt(position) e.g., str.charAt(3)
indexOf(string) e.g., str.indexOf('B')
substring(from, to) e.g., str.substring(1, 3)
toLowerCase() e.g., str.toLowerCase()
JS
1-20
Primitives, Operations, & Expressions
The typeof operator
Example
Returns "number", "string", or "boolean" for primitives;
returns "object" for objects and null
The Data Object
Create one with the Date constructor (no params)
Local time methods of Date:
•
•
•
•
•
•
toLocaleString – returns a string of the date
getDate – returns the day of the month
getMonth – returns the month of the year (0 – 11)
getDay – returns the day of the week (0 – 6)
getFullYear – returns the year
getTime – returns the number of milliseconds since January 1,
1970
• getHours – returns the hour (0 – 23)
• getMinutes – returns the minutes (0 – 59)
• getMilliseconds – returns the millisecond (0 – 999)
Example
JS
1-21
JS
Introduction
General Syntactic Characteristics
JS write to the XHTML document
Write vs Writeln
Typical JS dialogs
Primitives, Operations, & Expressions
Primitives: Number, String, Boolean, Undefined, Null
Numeric operators
String catenation
Coercions
Control Statements
Selection statements
Loop statements
JS
1-22
Control Statements
Compound statements are delimited by braces, but
compound statements are not blocks
NO local variables
Primitive values
Control expressions – three kinds
Example
• If it is a string, it is true unless it is empty or "0"
• If it is a number, it is true unless it is zero
Relational Expressions Example
• ==, !=, <, >, <=, >=
• Operands are coerced if necessary
(ASCII)
– string vs number, it attempts to convert the string to a number
– Boolean vs non-boolean, the Boolean operand is coerced to a
number (1 or 0)
Compound Expressions
• && || !
Example
JS
1-23
Selection Statements
The usual if-then-else (clauses can be either single statements or
compound statements)
Switch
switch (expression) {
case value_1:
// value_1 statements
case value_2:
// value_2 statements
…
[default:
// default statements]
}
The statements can be either statement sequences or compound
statements
The control expression can be a number, a string, or a Boolean
Different cases can have values of different types
Example
More
Complex Example
JS
1-24
Loop Statements
for (init; control; increment)
{
}
statement or cmpnd
while (control_expression)
{
Example Continue
Example
statement or cmpnd
}
do {
statement or compound
}while (control_expression)
Example
JS
1-25
JS
1-26
JS
Introduction
General Syntactic Characteristics
JS write to the XHTML document
Write vs Writeln
Typical JS dialogs
Primitives, Operations, & Expressions
Primitives: Number, String, Boolean, Undefined, Null
Numeric operators
String catenation
Coercions
Control Statements
Selection statements
Loop statements
JS
1-27
0
