XP Tutorial 10 Section 1 1 Programming with JavaScript

XP Sec 10.1 Introducing JavaScript History Element Basic JavaScript Syntax Write Text to a Web Page 2

XP Introducing JavaScript Server-side programs are placed on the server that hosts a Web site Advantage: Access to databases not on client’s computer Disadvantage: Subject to limitations placed on server by system administrators Client-side programming runs programs on each user’s computer Advantage: Not subject to server limitations Disadvantage: Not able to access online databases 3

XP Introducing JavaScript Server-Side Programming Client-Side Programming 4

XP The Development of JavaScript JavaScript is a subset of Java Differences between Java and JavaScript: Java is a compiled language JavaScript is an interpreted language An interpreted language can be run directly without compiling, therefore JavaScript code can be inserted directly into an HTML or XHTML document Not as powerful as Java, but easier to use 5

XP Comparing Java and JavaScript 6

XP The Development of JavaScript Jscript is a version of JavaScript supported by Internet Explorer The European Computer Manufacturers Association (ECMA) develops scripting standards The standard is called ECMAScript but browsers still generally call it JavaScript 7

XP Working with the Script Element A JavaScript program can either be placed directly in a Web page file or saved in an external text file Insert a client-side script in a Web page when using the script element script commands 8

XP Inserting JavaScript into a Web Page File Each statement—also known as a command—is a single line that indicates an action for the browser to take The semicolon notifies the browser that it has reached the end of the statement 9

XP Writing Output to the Web Page An object is any item—from the browser window itself to a document displayed in the browser to an element displayed within the document. The document displayed in the web page The browser window The browser itself The URL of the current web page A paragraph, a table, an image Etc.... Note from this point on you MUST remember, and adhere to, the rules of case sensitivity. Your programs will not work if you do not. A method is a process by which JavaScript manipulates or acts upon the properties of an object document.write(); 10

XP Writing Output to the Web Page To write text to a Web page, use the following JavaScript commands: document.write(“text”); You can use the document.write method to generate HTML code _pg-573-document-write.htm

XP JavaScript Syntax JavaScript is case sensitive (Personal note: the bane of my existance ) document.write(“Hi there”); will work Document.write(“Hi there”); will not work document.Write(“Hi there”); will not work etc. etc. etc. Ignores most occurrences of extra white space JavaScript Rule: Do not break a statement into several lines If you must break lines use the continuation character: \ document.write(" "); document.write(" " \ "); You cannot use this technique in the middle of a quote or field _pg-576-breaking-lines.htm

XP 13 Go to my Web site and download the files for Tutorial 3 Unzip the files into a work folder on your flash drive Go to pg 563in text book and start the in-chapter exercise. Stop when you get to the end of the section on page 577

XP Tutorial 10 Sections 2 and 3 14 Programming with JavaScript-2

XP Sec 10.2 Variables Data Types JavaScript function 15

XP Declaring a JavaScript Variable A variable is a named item in a program that stores information You can declare variables with any of the following JavaScript commands: var variable; var variable = value; variable = value; Rules for JavaScript variable names: First character must be a letter or an underscore Remaining characters – letters, numbers or underscores (no spaces) Can not use “reserved words” (e.g. function, var, return ) Case Sensitive 16 Creates a variable without assigning any value. Creates a variable and assigns a value.

XP JavaScript Variables and Data A JavaScript variable type is determined by its contents: Numeric variables String variables Boolean variables Boolean variables can only have two values: true or false Null variables If a variable is declared with one type of content and later a different type of content is assigned, the variable’s type changes. (“weakly-typed” language) 17 ( has no value) Note these are different

XP JavaScript Syntax The + symbol has three uses in JavaScript 1. Used in arithmetic operations to perform addition. var num1 = 5, num2 = 10, total; total = num1 + num2; 2. Used as a literal: document.write("The value of num1 + num2 is: ", total) 3. Used to concatenate several text strings into a single text string. var name="John Doe"; document.write("Hello there " + name + " how are you?"); (Note the space after the word there and before the word how) Another way to do this would be to use commas to separate the values document.write("Hello there", name, "how are you?"); _pg-581-concatenate-strings.htm

XP JavaScript Syntax If you need to combine a variable with a literal you need to concatenate. What if you have five image files: file1.jpg, file2.jpg, file3.jpg, file4.jpg, file5.jpg Now, let’s say you want to set the file name up as a variable. var myvar = "file1"; document.write(myvar + ".jpg"); Will generate: file1.jpg Now for a more complex example _pg-581-concatenate-variables-simple.htm 208_pg-581-concatenate-variables-complex.htm

XP JavaScript Syntax Beyond the scope of this text so briefly: Sometimes you may need to use the + sign to take two variables and create a new variable name: var name=image; var num = 01; var newvar = name + num; document.write("The newvar = ", newvar); _pg-581-concatenate-to-create-new-variables.htm

XP A JavaScript Function A function is a collection of commands that performs an action or returns a value Other languages might use the term: subroutine, or procedure A function name identifies a function Parameters are values used by the function { function commands } The function is executed only when called by another JavaScript command _pg-583-first-function.htm reserved word function function name parameters

XP JavaScript Function 22 Parameters – correspond to userName and emServer in the function definition.  call to the showEM() function reserved word function function name parameters 212_pg-583-function-with-parm.htm

XP JavaScript Variable Scope A variable declared within a function has “local” scope and can only be used inside that function. A variable declared not inside any function has “global” scope and can be used by any script in the web page. 23 Variable loop_count has global scope. It can be used anywhere on the document Variable my_toggle has local scope within the flipImages() function.. It can only be used in the flipImages() function 215_pg-589-scope.htm

XP JavaScript Returning values It is very common to invoke a script that needs to perform some kind of calculation and return a value. For instance, what if you wanted a function that would calculate the area of a rectangle. You might pass the function two parameters, a length and a width. The function would then calculate the area and return the answer using the return statement. function areaCalc(length, width) { var area = length * width; return area; } document.write("area of 4x5 rectangle: " + areaCalc(4,5)); _pg-588-returning-values.htm

XP Review for Case Study – Functions and Variables Insert a command to write the HTML code: My favorite comic is: comicbook I read it every month. Where comicbook is the text string returned by the getComic() function. The important point to understand is that comicbook is not a literal text string. It is a variable. This is standard text-book notation: words in italics, usually mean they are variables _case-review-no-function.htm 222_case-review-function-and-variable.htm 223_case-reivew-function-no-variable.htm

XP Review for Case Study – Functions and Variables Taking it one step further, if you want to take a variable and concatenate it to a text string where both double and single quotes are needed, you really need to concentrate on getting the quotes right. Let's say, instead of simply generating text output you wanted to generate an image tag like this: ; Where myComic is output from the getImage() function and is concatenated to.jpg The challenge is two-fold. First the document.write() function requires double-quotes around the whole string and the src attribute requires single quotes around the src, but you CANNOT quote variables; that is, myComic cannot be quoted _case-review-concat-variable-to-literal.htm

XP 27 Go to pg 578 in text book and continue the in-chapter exercise. Stop when you get to the end of the section on page 589

XP Sec 10.3 External JavaScript File JavaScript Comments Basic JavaScript Debugging Techniques 28

XP Accessing an External JavaScript File The code to access an external script file is: url specifies the external file that contains the scripts Place all script elements that reference external files in the document section. 29

XP Accessing an External JavaScript File 30 mpl.htm contains a element in the head section linking it to spam.js This allows mpl.htm to use functions and variables located in spam.js

XP Commenting JavaScript Code JavaScript comment symbols can be like this /* … */ or like this // … 31 Marks the rest of the line as a comment Marks the everything between the opnening and closing symbols as a comment

XP Non-JavaScript Browsers 32 Some older browsers do not support JavaScript Non-JavaScript browsers might display the JavaScript code as text in the browser. HTML and JavaScript comments are used to hide JavaScript from non-JavaScript browsers The element can be used to display alternate content for non-JavaScript browsers: JavaScript-capable browsers ignore this.

XP Debugging JavaScript Errors There are three types of errors: 1. Load-time errors – interpreter can not understand the code 2. Run-time errors – operation failed (e.g. tried to add a numeric value to a text variable.) 3. Logical errors – Load and Run OK but output is wrong (e.g. the emServer variable contains a value of “cadler” instead of “mpl.gov”) (example from in-chapter exercise) 33

XP Debugging JavaScript Programs An alert dialog box is sometimes used as a debugging aid. 34 Internet ExplorerFirefox 225_pg-599-alert-dialog.htm

XP Debugging Your JavaScript Programs If you are running Internet Explorer 8 the debugging tools are included. If you are running IE 7 you will have to download and install the free Microsoft Script Debugger from the MS Web site.  The IE 8 version seems pretty helpful, the IE 7 version, not as helpful In either case, however, you will have to make sure that Script Debugging is enabled on your browser:  Tools Menu: Internet Options: Advanced Tab: Browsing Group  Make sure that “Disable Script Debugging (Internet Explorer)” and “Disable Script Debugging (other) is not checked If you are running Firefox, when you encounter an error, you have to open the Error Console: Tools menu: Error Console Better than nothing, but not as helpful as the IE 8 debugger 35

XP Debugging Your JavaScript Programs Microsoft offers the Microsoft Script Debugger Firefox also provides the Firefox Error Console _pg-601-firefox-error-console.htm

XP The End 37