1 / 27

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

Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu xqzhu@cse.fau.edu. 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

boris
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to JavaScript(JavaScript 1)Xingquan (Hill) Zhuxqzhu@cse.fau.edu JS

  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

  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

  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

  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

  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

  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

  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; JS

  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

  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

  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/tracer JS

  12. JS

  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

  14. Number • parseInt(variable); • parseFloat(variable); Example JS

  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

  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

  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

  18. 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. • e.g., Math.cos(x) Example Math functions supported by JS http://www.javascripter.net/faq/mathfunc.htm JS

  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

  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

  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

  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

  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

  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 ExampleMoreComplex Example JS

  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

  26. JS

  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 JS

More Related