1. JS1-1 Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau.edu

2. JS1-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

3. JS1-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

4. JS1-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

5. JS1-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

6. JS1-6 General Syntactic Characteristics  For this book, all JavaScript scripts will be embedded in HTML documents  Either directly, as in -- JavaScript script –  Or indirectly, as a file specified in the src attribute of, as in <script type = "text/javaScript" src = "myScript.js"> Example

7. JS1-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 /* … */

8. JS1-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 there Return X;

9. JS1-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

10. JS1-10 Simple Program: Printing a line of text in a web page A First Program in JavaScript <!-- document.writeln(" Welcome to JavaScript Programming! " ); // --> Example

11. JS1-11 Write vs Writeln  Document.writeln(“This is the end!”)  Document.write(“This is the end!\r\n”); Example2Example 3 Want to know what was written to the browser? Mozilla Script Tracer http://www.netamo.com/tracerhttp://www.netamo.com/tracer

12. JS1-12

13. JS1-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

14. JS1-14 Number  parseInt(variable);  parseFloat(variable); Example

15. JS1-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

16. JS1-16 Primitives, Operations, & Expressions  Five primitive typesExampleExample  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;

17. JS1-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);

18. JS1-18 Primitives, Operations, & Expressions  Numeric operators - ++, --, +, -, *, /, %  All operations are in double precision A++ -  A=A+1; A++ vs ++A; Example Example  The Math Object  Provides floor, round, max, min, trig functions, etc. e.g., Math.cos(x) Example Example Math functions supported by JS http://www.javascripter.net/faq/ mathfunc.htm

19. JS1-19 Primitives, Operations, & Expressions  The Number ObjectExampleExample  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 –toStringtoFixedtoExponentialtoPrecision valueOf

20. JS1-20 Primitives, Operations, & Expressions  String catenation operator: + -ExampleExample  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()

21. JS1-21 Primitives, Operations, & Expressions  The typeof operatorExampleExample  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

22. JS1-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

23. JS1-23 Control Statements  Compound statements are delimited by braces, but compound statements are not blocks  NO local variables  Control expressions – three kinds  Primitive valuesExampleExample 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 ExpressionsExampleExample ==, !=,, = 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 Example

24. JS1-24 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 ExampleMoreExampleMore Complex ExampleComplex Example

25. JS1-25 Loop Statements  for (init; control; increment) { statement or cmpnd ExampleContinue ExampleContinue }  while (control_expression) Example Example { statement or cmpnd }  do {ExampleExample statement or compound }while (control_expression)

26. JS1-26

27. JS1-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