Chp19_final - Mastering the Internet XHTML and JavaScript Chapter 19 JavaScript Syntax Goals and Objectives Chapter Headlines Introduction

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Mastering the Internet, XHTML, and JavaScript Chapter 19 JavaScript Syntax Goals and Objectives Chapter Headlines Introduction JavaScript and Java Embedding JavaScript in XHTML Development Environment Variables Statements Expressions and Operators Control Structures Code Execution Input and Output Summary Outline Chapter 19 - JavaScript Syntax 2 Goals Goals and Objectives 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 Why use JavaScript? JavaScript and Syntax Variables Statements Operators Control Structures Input/Output Practice: Integer Division, Dollars and Cents Chapter 19 - JavaScript Syntax 3 19.1 Introduction What is JavaScript and is it useful? 19.2 JavaScript and Java Does learning JavaScript now help learning Java later? 19.3 Embedding JavaScript in XHTML Are JavaScript and XHTML cousins? 19.4 Development Environment You only need a debugging console to develop JavaScript 19.5 Variables Use variables as you need them without declarations Chapter 19 - JavaScript Syntax Chapter Headlines 4 Chapter Headlines 19.6 Statements Comment statements help code reuse and maintenance 19.7 Expressions and Operators JavaScript operators are waiting to help you 19.8 Control Structures Control structures can provide more help 19.9 Code Execution Follow the rule of top to bottom, left to right 19.10 Input and Output Four functions are available for client-side data and result handling Chapter 19 - JavaScript Syntax 5 XHTML offers limited dynamics JavaScript is used in web pages for: Introduction Dynamics : mouse clicks, pop up windows, and animations Client-side execution : validating input, processing requests It avoids Client/Server communication and traffic JavaScript is executed on client-side 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 Two types of JavaScript exists: Client-side code is sent to the client's browser for execution Server-side code stays on the server for execution Chapter 19 - JavaScript Syntax 6 JavaScript and Java JavaScript and Java are similar in some ways and different in other ways JavaScript supports most Java expressions and basic control structure Java JavaScript 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 JavaScript offers tools to much wider, and nonsophisticated audience Chapter 19 - JavaScript Syntax 7 Embedding JavaScript in XHTML <script> tag is used to embed JavaScript code in XHTML code of a web page The <script> tag can be used anywhere inside the code but it is usually embedded right before of after the <head> tag closes Any number of <script> tags can be embedded, but usually one tag is enough Nesting <script> tags is prohibited and generates errors HTML editors do not follow the <script> tag guidelines and embed the tag any where and any number of times Chapter 19 - JavaScript Syntax 8 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 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 JavaScript interpreters serve the purpose by showing where the error is Errors are reported one at a time and are usually easy to fix Chapter 19 - JavaScript Syntax 9 Development Environment Example 19.1: Hello World! JavaScript Write your first JavaScript Program Development Environment Chapter 19 - JavaScript Syntax 10 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 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" Chapter 19 - JavaScript Syntax 11 Variables 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 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 Escaping and Special Characters Backslash is the escaping character and is used to define special ones Chapter 19 - JavaScript Syntax 12 Variables Example 19.2: JavaScript variables Write JavaScript Program to use some variables Variables Chapter 19 - JavaScript Syntax 13 Example 19.3: JavaScript variable concepts Use constants, literals, data type conversion, and escaping and special characters Variables Chapter 19 - JavaScript Syntax 14 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 Example : x = y 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 Semicolon (;) is used to separate statements JavaScript also provides comment statements Statements Inline Comment statement //one line comment Block Comment statement /* comment starts here comment ends here */ Chapter 19 - JavaScript Syntax 15 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 Assignment Operators =, +=, -=, Comparison Operators ==, !=, >, Arithmetic Operators +, -, *, /, Logical Operators &&, ||, ! *=, /= >=, <, <= %, ++, -- JavaScript has a rich set of operators Chapter 19 - JavaScript Syntax 16 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) {............} switch statement: else {............} switch (expression){ case condition1: statements; break; case condition2: statements; break; default: statements;} Control Structures Chapter 19 - JavaScript Syntax 17 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) Chapter 19 - JavaScript Syntax 18 Code Execution JavaScript code shell looks like: <script language="javascript"> function definition code function definition code function definition code statements function calls statements function calls </script> JavaScript interpreter executes code top to bottom, left to right Function definitions are executed only when called Chapter 19 - JavaScript Syntax 19 Input and Output 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 output functions available are: document.write (string) alert (string) Both these functions are used to output results in a web page Chapter 19 - JavaScript Syntax 20 Example 19.8: Use input functions Use prompt() and confirm() functions Input and Output Chapter 19 - JavaScript Syntax 21 JavaScript is a powerful language and makes a web page dynamic JavaScript and Java are fundamentally different in most ways JavaScript code is embedded in XHTML code JavaScript code is written and tested like XHTML code JavaScript begins with variables JavaScript uses statements to build code block JavaScript has a rich set of operators JavaScript has control structures to control code execution Code execution follows top to bottom, left to right rule Input and output is handled using basic functions Chapter 19 - JavaScript Syntax 22 Summary ...
View Full Document

This note was uploaded on 07/01/2011 for the course COMP 103 taught by Professor Mulhimaldoori during the Spring '11 term at American Dubai.

Ask a homework question - tutors are online