Introduction to Java Script Java Script 1 Xingquan
- Slides: 27
Introduction to Java. Script (Java. Script 1) Xingquan (Hill) Zhu xqzhu@cse. fau. edu JS 1
JS q Introduction q General Syntactic Characteristics q JS write to the XHTML document v Write vs Writeln v Typical JS dialogs q Primitives, Operations, & Expressions v Primitives: Number, String, Boolean, Undefined, Null v Numeric operators v String catenation v Coercions q Control Statements v Selection statements v Loop statements JS 2
Introduction q Java. Script scripting language v Enhance functionality and appearance v Client-side scripting • Make pages more dynamic and interactive Foundation for complex server-side scripting v Program development v Program control v Java. Script Examples JS 3
Things you should know about JS q Java. Script can be used to replace some of what is q q typically done with applets (except graphics) Java. Script 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 Java. Script Event-Driven Computation v v User interactions with HTML documents in Java. Script use the event-driven model of computation User interactions with form elements can be used to trigger execution of scripts JS 4
Things you should know about JS q Java. Script is NOT an object-oriented programming language v Does not support class-based inheritance • Cannot support polymorphism v Has prototype-based inheritance, which is much different q Java. Script Objects v Java. Script objects are collections of properties, which are like the members of classes in Java and C++ • Date. get. Time() v v Java. Script has primitives for simple types All Java. Script objects are accessed through references JS 5
General Syntactic Characteristics q For this book, all Java. Script scripts will be embedded in HTML documents v Either directly, as in <script type = “text/java. Script"> -- Java. Script script – </script> v Or indirectly, as a file specified in the src attribute of <script>, as in <script type = "text/java. Script" src = "my. Script. js"> </script> Example JS 6
General Syntactic Characteristics q Identifier form: begin with a letter or underscore, followed by any number of letters, underscores, and digits q Case sensitive v variable 1 and Variable 1 are different q 25 reserved words, plus future reserved words q - Comments: both // and /* … */ JS 7
General Syntactic Characteristics q Scripts are usually hidden from browsers that do not include Java. Script interpreters by putting them in special comments <!— -- Java. Script script – //--> q Semicolons can be a problem v They are “somewhat” optional v Problem: When the end of the line CAN be the end of a statement – Java. Script puts a semicolon there Return X; JS 8
JS q Introduction q General Syntactic Characteristics q JS write to the XHTML document v Write vs Writeln v Typical JS dialogs q Primitives, Operations, & Expressions v Primitives: Number, String, Boolean, Undefined, Null v Numeric operators v String catenation v Coercions q Control Statements v Selection statements v Loop statements JS 9
Simple Program: Printing a line of text in a web page <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>A First Program in Java. Script</title> <script type = "text/javascript"> <!-document. writeln("<h 1>Welcome to Java. Script Programming!</h 1>" ); // --> </script> </head><body></body> </html> Example JS 10
Write vs Writeln q Document. writeln(“This is the end!”) q Document. write(“This is the end!rn”); Example 2 Example 3 Want to know what was written to the browser? Mozilla Script Tracer http: //www. netamo. com/tracer JS 11
JS 12
Typical JS dialogs q “Window” object v Java. Script model for the browser window v Three methods: Prompt, confirm, alert • Cause the browser to wait for a user response Example alert, confirm, prompt JS 13
Number q parse. Int(variable); q parse. Float(variable); Example JS 14
JS q Introduction q General Syntactic Characteristics q JS write to the XHTML document v Write vs Writeln v Typical JS dialogs q Primitives, Operations, & Expressions v Primitives: Number, String, Boolean, Undefined, Null v Numeric operators v String catenation v Coercions q Control Statements v Selection statements v Loop statements JS 15
Primitives, Operations, & Expressions q Five primitive types Example v Number, String, Boolean, Undefined, or Null q Java. Script is dynamically typed – any variable can be used for anything (primitive value or reference to any object) v The interpreter determines the type of a particular occurrence of a variable • complication q Variables can be either implicitly or explicitly declared var sum = 0, today = "Monday", flag = false; JS 16
Primitives, Operations, & Expressions q Number, String, and Boolean have wrapper objects (Number, String, and Boolean) v v v 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 q 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 v v v Var num_v=Number(str_v); Var str_v=String(num_v); Var str_v=num_v. to. String(); str_v=num_v. to. String(2); JS 17
Primitives, Operations, & Expressions q Numeric operators - ++, --, +, -, *, /, % v All operations are in double precision A++ - A=A+1; A++ vs ++A; Example q The Math Object v 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 18
Primitives, Operations, & Expressions q The Number Object v Some useful properties: Example • MAX_VALUE, MIN_VALUE, Na. N, POSITIVE_INFINITY, NEGATIVE_INFINITY, PI – e. g. , Number. MAX_VALUE • An arithmetic operation that creates overflow returns Na. N • Na. N is not == to any number, not even itself • Test for it with is. Na. N(x) • Number object has several methods – to. String to. Fixed to. Exponential to. Precision value. Of JS 19
Primitives, Operations, & Expressions q String catenation operator: + Example q Coercions v 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 Na. N v Explicit conversions • Use the String and Number constructors • Use to. String method of numbers • Use parse. Int and parse. Float on strings q String properties & methods v length e. g. , var len = str 1. length; (a property) v char. At(position) e. g. , str. char. At(3) v index. Of(string) e. g. , str. index. Of('B') v substring(from, to) e. g. , str. substring(1, 3) v to. Lower. Case() e. g. , str. to. Lower. Case() JS 20
Primitives, Operations, & Expressions q The typeof operator Example v Returns "number", "string", or "boolean" for primitives; returns "object" for objects and null q The Data Object v Create one with the Date constructor (no params) v Local time methods of Date: • • • to. Locale. String – returns a string of the date get. Date – returns the day of the month get. Month – returns the month of the year (0 – 11) get. Day – returns the day of the week (0 – 6) get. Full. Year – returns the year get. Time – returns the number of milliseconds since January 1, 1970 • get. Hours – returns the hour (0 – 23) • get. Minutes – returns the minutes (0 – 59) • get. Milliseconds – returns the millisecond (0 – 999) Example JS 21
JS q Introduction q General Syntactic Characteristics q JS write to the XHTML document v Write vs Writeln v Typical JS dialogs q Primitives, Operations, & Expressions v Primitives: Number, String, Boolean, Undefined, Null v Numeric operators v String catenation v Coercions q Control Statements v Selection statements v Loop statements JS 22
Control Statements q Compound statements are delimited by braces, but compound statements are not blocks v NO local variables q Control expressions – three kinds v 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 v 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) v Compound Expressions • && || ! Example JS 23
Selection Statements q The usual if-then-else (clauses can be either single statements or q q 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 24
Loop Statements q for (init; control; increment) { } statement or cmpnd q while (control_expression) { Example Continue Example statement or cmpnd } q do { statement or compound }while (control_expression) Example JS 25
JS 26
JS q Introduction q General Syntactic Characteristics q JS write to the XHTML document v Write vs Writeln v Typical JS dialogs q Primitives, Operations, & Expressions v Primitives: Number, String, Boolean, Undefined, Null v Numeric operators v String catenation v Coercions q Control Statements v Selection statements v Loop statements JS 27