XP Introducing Javascript The Basics Tutorial 10 New

XP Introducing Javascript “The Basics” Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1

Introduction to Java. Script XP • Server-side Programs pose problems – User must be continuously connected to web server in order to run the script – Only a programmer can create or alter a script – Web server’s system admin can place limitation on access to the script, which could make it not run for certain users – Sys admin has to be worried about users continually accessing the server and overloading it Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 2

Why Javascript Was Created XP • Client-side Programs were developed to run programs and scripts on the client side of a Web browser – Computing is distributed over Web, so no server overload – Can be tested locally before being loaded to server – More responsive to user because users don’t have to wait for data to return from server Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 3

Aren’t Javascript and Java the. XP Same Thing? • Java. Script is a subset of Java, created to overcome obstacles inherit in learning Java • Differences between Java and Java. Script: – Java is a compiled language – program code must be compiled by a translator before it can be run by computer – Java. Script is an interpreted language – program code is compiled into an. exe app and executed by browser each time it is run Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 4

XP Java. Script By Any Other Name… • Jscript is a version of Java. Script supported by Internet Explorer • The European Computer Manufacturers Association (ECMA) develops scripting standards – The standard is called ECMAScript but browsers still generally call is Java. Script Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 5

XP Inserting Java. Script into a Web Page File A Java. Script program can either be placed directly in a Web page file or saved in an external text file using the script element – HTML-Embedded example: <script type=“text/javascript”> script commands </script> – External file example: <script src=“url” type=“text/javascript”></script> Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 6

XP Inserting Java. Script into a Web Page File – Misc. • Comments are useful for hiding scripts from older browsers – // used for single-line comments – /* … */ used for multi-line comments • Specify alternative content using the nonscript element for browsers that don’t support scripts (or have their script support disabled) – Example: <noscript> <p>This page requires Java. Script to run. </p> </noscript> Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 7

XP Misc. Terminology • An object-oriented programming language writes the output by manipulating tasks • An action you perform on an object is called a method Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 8

XP Writing Output to the Web Page • To write text to a Web page, use the following Java. Script commands: document. write(“text”); or document. writeln(“text”); Where text is the content to be written to the page. The doucment. write() and document. writeln() methods are identical, except that the document. writeln() method preserves any line breaks in the text string. Example: document. write(“<h 3>News Flash!</h 3>”); Would write News Flash! Formatted with heading 3 at whatever point in HTML document that script appears Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 9

XP Working with Variables and Data • A variable is a named item in a program that stores information • Variable names have restrictions – First character must be either a letter or an underscore – Remaining characters can be letters, numbers or underscores – Names cannot contain spaces – Cannot use “reserved words, ” words Java. Script has reserved for other purposes. For instance: document or var Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 10

XP Working with Variables and Data • Java. Script variable types: – – Numeric variables (any number) String variables (any group of text characters) Boolean variables (only true and false values) Null variables (has no value at all) • Declaring variables: variable name; variable name = value; Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 11

Working with Expressions and. XP Operators • Expressions are Java. Script commands that assign values and variables • Operators are elements that perform actions within expressions – Arithmetic operators: perform simple mathematical calculations – Assignment operators: used to assign values in expressions Comparison operators: used to compare the value of one item to another – Logical operators: used to connect two or more boolean operators Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 12

XP Creating Java. Script Functions • A function is a series of commands that perform an action or calculates a value • General syntax: function_name(parameters, if any) { Java. Script commands } • Parameters are values used by the function • NOTE: Even if a function does not require any parameters, the parentheses following the name of the function still must be included Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 13

XP Creating Java. Script Functions • Example of creating and then using a function: • Create the function: function Show. Date(date) { document. write(“Today is “ + date + “ ”); } • Calling the function: var Today = “ 6/25/2010”; Show. Date(Today); Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 14

XP Creating Java. Script Functions • Example of a function that returns a value: • Create the function: function Area(width, length) { var Size = width * length; return Size; } • Calling the function: var x=8; var y=7; var z=Area(x, y); Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 15

Placing a function • XP Where you create a function is important 1. It must be created before it can be called 2. Standard is to place function definitions in the <head> of the HTML or in an external file 1. Advantage of putting in an external file is that the function can be called from multiple HTML documents like external CSS Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 16

Working with Conditional Statements XP • Conditional statements are commands that run only when specific conditions are met • Conditional statements require a Boolean expression Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 17

XP Types of conditional statements • • • If if (test condition) { commands to perform if condition is true } If…else if (test condition) { commands to perform if condition is true } else {command to perform if condition is false } Switch switch (expression) { case condition 1: commands if condition 1 true break; case condition 2: commands if condition 2 true break; case condition x: commands if condition x true break; default: commands if all other conditions are not true (optional) } Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 18

Using Arrays XP • An array is an ordered collection of values referenced by a single variable name variable = new Array (size); • To create an array variable: var ar. Days = new Array(7); • To populate an element in array: ar. Days[0] = “Sunday”; • To create and populate array: ar. Days = new Array(“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”); Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 19

XP Working with Program Loops • A program loop is a set of instructions that is executed repeatedly – Use program loops to configure a group of commands to be executed a set number of times – The loop uses a counter to track the number of times the command block has been run – Types: • for • while Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 20

XP Working with Program Loops Using a For loop to create a populated one-dimensional table Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 21

XP Working with Program Loops Using a nested For loop to create a populated, twodimensional table Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 22

XP Working with Program Loops Using a While loop to create a populated, onedimensional table Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 23

XP Working with Program Loops Using a nested While loop to create a populated, twodimensional table Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 24

XP Debugging Your Java. Script Programs • Three types of errors: – Load-time errors (occurs when the script is loading) – Run-time errors (occurs when the being executed) – Logical errors (free from syntax and structural mistakes, but result in incorrect results) Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 25

Common Mistakes XP • You need to debug your program to fix the mistakes • Common mistakes include: – – – Tutorial 10 Misspelling a variable name Mismatched parentheses or braces Mismatched quotes Missing quotes Using ( instead of [ Using = in place of == New Perspectives on HTML, XHTML, and DHTML, Comprehensive 26

XP Debugging Tools and Techniques • To avoid making mistakes and quickly located those you do make: – Write modular code – Use web editor that includes javascript debugger Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 27

XP Tips for Writing Good Java. Script Code • Use good layout to make your code more readable. Indent command blocks to make them easier to read and to set them off from other code • Use descriptive variable names to indicate the purpose of your variables • Be careful how you use uppercase and lowercase letters in your code, because Java. Script commands and names are casesensitive Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 28

XP Tips for Writing Good Java. Script Code • Add comments to your code to document the purpose of each script • Initialize all variables at the top of your script and insert comments describing the purpose and nature of your variables • Create customized functions that can be reused in different scripts. Place your customized functions in external files to make them available to your entire Web site Tutorial 10 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 29