introduction to javascript (javascript 1) xingquan (hill) zhu [email protected]
DESCRIPTION
Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu [email protected]. 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/7.jpg)
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 /* … */
![Page 8: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/8.jpg)
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;
![Page 9: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/12.jpg)
JS 1-12
![Page 13: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/14.jpg)
JS 1-14
Number
parseInt(variable); parseFloat(variable);
Example
![Page 15: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/16.jpg)
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;
![Page 17: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/17.jpg)
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);
![Page 18: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/20.jpg)
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()
![Page 21: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/24.jpg)
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
![Page 25: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/25.jpg)
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)
![Page 26: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/26.jpg)
JS 1-26
![Page 27: Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau](https://reader036.vdocuments.mx/reader036/viewer/2022062301/56815b11550346895dc8bb6e/html5/thumbnails/27.jpg)
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