Post on 07-Feb-2016
description
JS 1-1
Introduction to JavaScript(JavaScript 1)
Xingquan (Hill) Zhuxqzhu@cse.fau.edu
JS 1-2
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-3
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-4
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-5
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-6
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-7
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-8
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 thereReturnX;
JS 1-9
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-10
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-11
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?MozillaScript Tracer http://www.netamo.com/tracer
JS 1-12
JS 1-13
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-14
Number
parseInt(variable); parseFloat(variable);
Example
JS 1-15
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-16
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-17
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-18
Primitives, Operations, & Expressions
Numeric operators - ++, --, +, -, *, /, % All operations are in double precisionA++ - A=A+1;
A++ vs ++A; Example The Math Object
Provides floor, round, max, min, trig functions, etc.
• e.g., Math.cos(x) ExampleMath functions supported by JS
http://www.javascripter.net/faq/mathfunc.htm
JS 1-19
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-20
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-21
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-22
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-23
Control Statements Compound statements are delimited by
braces, but compound statements are not blocks NO local variables
Control expressions – three kinds Primitive values 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-24
Selection Statements
The usual if-then-else (clauses can be either single statements or compound statements)
Switchswitch (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-25
Loop Statements for (init; control; increment) {
statement or cmpnd ExampleContinue
} while (control_expression)
Example { statement or cmpnd }
do { Example statement or compound }while (control_expression)
JS 1-26
JS 1-27
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