1. CMPS 211 JavaScript Topic 1 JavaScript Syntax

2. 2Outline Goals and Objectives Goals and Objectives Chapter Headlines Chapter Headlines Introduction Introduction JavaScript and Java JavaScript and Java Embedding JavaScript in XHTML Embedding JavaScript in XHTML Development Environment Development Environment Variables Variables Statements Statements Expressions and Operators Expressions and Operators Control Structures Control Structures Code Execution Code Execution Input and Output Input and Output Summary Summary

3. 3 Goals and Objectives Goals Goals Understand the basics of JavaScript, its syntax, the development environment, order of code execution, debugging and testing, its inclusion in XHTML and Web pages, and the reasons of including JavaScript in Web pages Objectives Objectives Why use JavaScript? Why use JavaScript? JavaScript and Syntax JavaScript and Syntax Variables Variables Statements Statements Operators Operators Control Structures Control Structures Input/Output Input/Output Practice: Integer Division, Dollars and Cents Practice: Integer Division, Dollars and Cents

4. 4 Topic Headlines 1 Introduction 1 Introduction What is JavaScript and is it useful? What is JavaScript and is it useful? 2 JavaScript and Java 2 JavaScript and Java Does learning JavaScript now help learning Java later? Does learning JavaScript now help learning Java later? 3 Embedding JavaScript in XHTML 3 Embedding JavaScript in XHTML Are JavaScript and XHTML cousins? Are JavaScript and XHTML cousins? 4 Development Environment 4 Development Environment You only need a debugging console to develop JavaScript You only need a debugging console to develop JavaScript 5 Variables 5 Variables Use variables as you need them without declarations Use variables as you need them without declarations

5. 5 Topic Headlines 6 Statements 6 Statements Comment statements help code reuse and maintenance Comment statements help code reuse and maintenance 7 Expressions and Operators 7 Expressions and Operators JavaScript operators are waiting to help you JavaScript operators are waiting to help you 8 Control Structures 8 Control Structures Control structures can provide more help Control structures can provide more help 9 Code Execution 9 Code Execution Follow the rule of top to bottom, left to right Follow the rule of top to bottom, left to right 10 Input and Output 10 Input and Output Four functions are available for client-side data and result handling Four functions are available for client-side data and result handling

6. 6Introduction XHTML offers limited dynamics XHTML offers limited dynamics JavaScript is used in web pages for: JavaScript is used in web pages for: Dynamics : mouse clicks, pop up windows, and animations Dynamics : mouse clicks, pop up windows, and animations Client-side execution : validating input, processing requests Client-side execution : validating input, processing requests It avoids Client/Server communication and traffic It avoids Client/Server communication and traffic JavaScript is executed on client-side JavaScript is executed on client-side JavaScript is simple, powerful, and interpretive language and requires only a web browser JavaScript is simple, powerful, and interpretive language and requires only a web browser There have been a number of revisions, the latest version being 1.5 There have been a number of revisions, the latest version being 1.5 Two types of JavaScript exists: Two types of JavaScript exists: Client-side  code is sent to the client’s browser for execution Client-side  code is sent to the client’s browser for execution Server-side  code stays on the server for execution Server-side  code stays on the server for execution

7. 7 JavaScript and Java JavaScript and Java are similar in some ways and different in other ways JavaScript and Java are similar in some ways and different in other ways JavaScript supports most Java expressions and basic control structure JavaScript supports most Java expressions and basic control structure JavaJavaScript Class-based object model Prototype-based model Special declarations No special declarations Explicit variable types Implicit variable types Compared to Java, JavaScript is a very free form language Compared to Java, JavaScript is a very free form language JavaScript offers tools to much wider, and non- sophisticated audience JavaScript offers tools to much wider, and non- sophisticated audience

8. 8 Embedding JavaScript in XHTML tag is used to embed JavaScript code in XHTML code of a web page tag is used to embed JavaScript code in XHTML code of a web page The tag can be used anywhere inside the code but it is usually embedded right before of after the tag closes The tag can be used anywhere inside the code but it is usually embedded right before of after the tag closes Any number of tags can be embedded, but usually one tag is enough Any number of tags can be embedded, but usually one tag is enough Nesting tags is prohibited and generates errors Nesting tags is prohibited and generates errors HTML editors do not follow the tag guidelines and embed the tag any where and any number of times HTML editors do not follow the tag guidelines and embed the tag any where and any number of times

9. 9 Development Environment JavaScript source code is written in an editor and run and tested in a browser, like XHTML JavaScript source code is written in an editor and run and tested in a browser, like XHTML AceHTML editor has a JavaScript template and also allows writing code manually AceHTML editor has a JavaScript template and also allows writing code manually Dreamweaver generates code automatically as the author adds JavaScript functionality Dreamweaver generates code automatically as the author adds JavaScript functionality Error in JavaScript code prevent the page from being rendered and thus debuggers are needed to find where the errors are Error in JavaScript code prevent the page from being rendered and thus debuggers are needed to find where the errors are JavaScript interpreters serve the purpose by showing where the error is JavaScript interpreters serve the purpose by showing where the error is Errors are reported one at a time and are usually easy to fix Errors are reported one at a time and are usually easy to fix

10. 10 Development Environment Example 19.1: Hello World! JavaScript Write your first JavaScript Program

11. 11Variables A variable is a symbolic name that stores a value and has the some characteristics A variable is a symbolic name that stores a value and has the some characteristics Identifiers The name of the variable is its identifier It must begin with a letter, underscore, or $ sign It cannot begin with a number or other characters JavaScript is case-sensitive Examples: test, Test, jam234, _best, $abc, a_1$4 Identifiers The name of the variable is its identifier It must begin with a letter, underscore, or $ sign It cannot begin with a number or other characters JavaScript is case-sensitive Examples: test, Test, jam234, _best, $abc, a_1$4 Types Data types are implicit and are converted automatically The first use of a variable declares its types Types can be numbers (integer or real), logical (boolean), or string Examples: 3, 40, -10.5, true, false, “zeid”, “9abc” Types Data types are implicit and are converted automatically The first use of a variable declares its types Types can be numbers (integer or real), logical (boolean), or string Examples: 3, 40, -10.5, true, false, “zeid”, “9abc”

12. 12Variables Scope The code block within which the variable is available Global variable is available everywhere Local variable is available only inside a code block Global variables are easy to manage but a bad habit Scope The code block within which the variable is available Global variable is available everywhere Local variable is available only inside a code block Global variables are easy to manage but a bad habit Constants Read only variables defined by a const keyword Cannot change values or be re declared Examples: const x=35 Constants Read only variables defined by a const keyword Cannot change values or be re declared Examples: const x=35 Literals Fixed values (hard-coded values) in JavaScript Nesting literals needs extra care Examples: 3.5, false, “Hello” Literals Fixed values (hard-coded values) in JavaScript Nesting literals needs extra care Examples: 3.5, false, “Hello” Data Type Conversion JavaScript converts data types automatically, but creates confusion Examples: answer=true, answer=35 Data Type Conversion JavaScript converts data types automatically, but creates confusion Examples: answer=true, answer=35 Escaping and Special Characters Backslash is the escaping character and is used to define special ones Escaping and Special Characters Backslash is the escaping character and is used to define special ones

13. 13Variables Example 19.2: JavaScript variables Write JavaScript Program to use some variables

14. 14Variables Example 19.3: JavaScript variable concepts Use constants, literals, data type conversion, and escaping and special characters

15. 15Statements A statement uses an assignment operator, an equal sign A statement uses an assignment operator, an equal sign The operator has two operands on each of its side and the value of the right operand is assigned to the left one The operator has two operands on each of its side and the value of the right operand is assigned to the left one Example : x = y Example : x = y Values of right operand must always be known, if not, and error is generated Values of right operand must always be known, if not, and error is generated Statement must be only one line long and cannot be broken Statement must be only one line long and cannot be broken Semicolon ( ; ) is used to separate statements Semicolon ( ; ) is used to separate statements JavaScript also provides comment statements JavaScript also provides comment statements Inline Comment statement  //one line comment Inline Comment statement  //one line comment Block Comment statement  /* comment starts here comment ends here */ Block Comment statement  /* comment starts here comment ends here */

16. 16 Expressions and Operators Expressions are a valid set of any variables that evaluates to a single value Arithmetic Expressions evaluate to numbers Logical Expressions evaluate to booleans (true or false) String Expressions evaluate to strings JavaScript has a rich set of operators Assignment Operators  =, +=, -=, *=, /= Comparison Operators  ==, !=, >, >=, <, <= Arithmetic Operators  +, -, *, /, %, ++, -- Logical Operators  &&, ||, !

17. 17 Control Structures Control structures control the code execution according to a certain criteria Control structures control the code execution according to a certain criteria Conditional Statements - Executes if the specified condition statement is met - if and switch statements are the two types if statements: structure 1: if (condition) {…………} structure 2: if (condition) {…………} else {…………} switch statement: switch (expression){ case condition1: statements; break; case condition2: statements; break; default: statements;} Conditional Statements - Executes if the specified condition statement is met - if and switch statements are the two types if statements: structure 1: if (condition) {…………} structure 2: if (condition) {…………} else {…………} switch statement: switch (expression){ case condition1: statements; break; case condition2: statements; break; default: statements;}

18. 18 Control Structures Loop Statements - Executes repeatedly till a specific condition is met - for, while, and do while statements are used - break exits the loop all together - continue skips the current iteration for statement: for (ini value; end value; incr){ statements } while statement: while (condition) { statements } do while statement: do { statements }while (condition) Loop Statements - Executes repeatedly till a specific condition is met - for, while, and do while statements are used - break exits the loop all together - continue skips the current iteration for statement: for (ini value; end value; incr){ statements } while statement: while (condition) { statements } do while statement: do { statements }while (condition)

19. 19 Code Execution JavaScript code shell looks like: JavaScript code shell looks like: function definition code function definition code function definition code statements function calls statements function calls function definition code function definition code function definition code statements function calls statements function calls JavaScript interpreter executes code top to bottom, left to right JavaScript interpreter executes code top to bottom, left to right Function definitions are executed only when called Function definitions are executed only when called

20. 20 Input and Output Client-side JavaScript has limited input/output utilities due to security reasons Client-side JavaScript has limited input/output utilities due to security reasons The input functions available are: prompt (message, default)  takes an input and returns it to the JavaScript program confirm (question)  asks the user to confirm an input value and return a boolean value The input functions available are: prompt (message, default)  takes an input and returns it to the JavaScript program confirm (question)  asks the user to confirm an input value and return a boolean value The output functions available are: document.write (string) alert (string) Both these functions are used to output results in a web page The output functions available are: document.write (string) alert (string) Both these functions are used to output results in a web page

21. 21 Input and Output Example 19.8: Use input functions Use prompt() and confirm() functions

22. 22Summary JavaScript is a powerful language and makes a web page dynamic JavaScript is a powerful language and makes a web page dynamic JavaScript and Java are fundamentally different in most ways JavaScript and Java are fundamentally different in most ways JavaScript code is embedded in XHTML code JavaScript code is embedded in XHTML code JavaScript code is written and tested like XHTML code JavaScript code is written and tested like XHTML code JavaScript begins with variables JavaScript begins with variables JavaScript uses statements to build code block JavaScript uses statements to build code block JavaScript has a rich set of operators JavaScript has a rich set of operators JavaScript has control structures to control code execution JavaScript has control structures to control code execution Code execution follows top to bottom, left to right rule Code execution follows top to bottom, left to right rule Input and output is handled using basic functions Input and output is handled using basic functions