JavaScript Lecture 1 (JS Intro)

JavaScript Lecture 1 (JS Intro) • What is a script • How does a script work? • Capturing and editing (hacking) useful scripts • Common scripts • Rollover scripts • Event scripts • Status bar scripts

Server-Side and Client-Side Programming This figure shows the issues like those previously mentioned that led to the development of programs, or scripts, that could be run from the Web browser (the client).

What is a script • A program embedded in an HTML document • Script can be found multiple places in a document • There are multiple scripting languages • VBScript (Microsoft proprietary) interpreted only in IE unless a plugin is installed • JavaScript – far more common and universally interpreted in all browsers • Scripts make HTML into DHTML (dynamic HTML)

How does a script work? • A browser is a very complex, multi-function program • Using HTML syntax, the browser locates script statements inside the document • It hands the statements (in an order we’ll discuss later) to a script interpreter that causes the browser to do what the statements (commands) tell it to do.

Communications facilities JavaScript Interpreter What is JavaScript It is NOT Java or a dialect. It is a completely different, interpreted language intended to control the browser, typically to add dynamics and animation to HTML. One of many programming languages executed (possibly simultaneously) in the browser! Browser VBScript Interpreter (compiler) Control / HTML Java Virtual Machine (JVM) applet HTML Interpreter (display formatting) script script Control / HTML HTML page

Applets and Java Interpreters This figure shows a web browser that has a Java interpreter runs the program locally on the user’s computer, freeing up the Web server for other purposes.

Identifying JavaScript in an HTML page • In the <HEAD> of the document in the <SCRIPT> </SCRIPT> container (MEH 13.1) • Anyplace in the document in a script container (MEH 13.1) • In-line code in various tags throughout the document (MEH 14.11) • Usually associated with tags that support events such as <IMG> and form elements • The code describes what to do for a given event • Line(s) of script in quotes following the event name as an attribute of the tag

Variables • A variable is a place in the computers memory where information (values) are stored. • In programming languages, the storage places have names. • You access the value in the storage place by its name.

Javascript Variables • Javascript variable names must begin with a letter and can’t contain unusual characters such as ‘&’ or ‘#’ • Javascript variables are polymorphic – HUH? – that is, they can contain any type of information • Numbers (MEH 13.6); Strings (MEH 13.18); Object references (such as images!) (MEH 14.8) • Variables in most other languages are more ‘strictly typed’

Variable Naming Conventions • In your projects and labs you will be determining variable names for: • JavaScript code you will write • Access database field and table names • Use the naming convention: • Begin with a small letter • Use NO spaces – compress multi-word names and capitalize the beginning of the new word • Examples: myNewArray invoiceAge This is the most common programming convention and does not require variable names to be encoded

Javascript Variables (2) • Use ‘=‘ to place a value into a variable (assignment) • When assigning a literal string value to a variable: • Enclose text in quotation marks • When assigning a numeric value to a variable: • Do not enclose value in quotation marks • You can declare multiple variables in the statement using a single var keyword followed by a series of variable names and assigned values separated by commas

Data Types • Data types that can be assigned only a single value are called primitive types • JavaScript supports six primitive data types

Data Types (Cont.) • The null value • data type/value that can be assigned to a variable • Indicates the variable does not contain a usable value • A variable with a value of “null” has a value assigned to it (Null is really “no value”) • You assign the “null” value to a variable when you want to ensure that the variable does not contain any data • Use: If x == null or x = null

Operators • JavaScript operators combine data • JavaScript has all the familiar operators (+, -, /, *, %) and:

Logical Operators • Logical operatorsare used for comparing two Boolean operands for equality

Comparison and Conditional Operators(Cont.)

Comparison vs. Assignment • Equality (!!!NOTE!!!) JavaScript like ‘C’, ‘C++’ and ‘Java’ – to name only a few – uses double equals to check for equality: == A single equal sign is the assignment operator

Working With Strings • A text string contains zero or more characters surrounded by double or single quotation marks • Literal strings can be also be assigned a zero-length string value: called an empty string • Strings can be combined (concatenated) using the + operator • Advanced string operators can search a string for text and replace segments of text just like VB

Escape Characters and Sequences (for formatting string text) • the combination of the escape character with other characters is called an escape sequence

JavaScript Commands • A ‘command’ in any computer language is a reserved word – such as “write” • that tells the computer to do something • Change variable values (MEH 13.6) • Manipulate I/O (MEH 13.6) • Manipulate the O/S (MEH 13.18)

JavaScript statements and code sequences • A statement is a syntactically correct command • A line is series of syntactically correct statements separated by semicolons <;> and ending in a line-feed/carriage return • A code sequence (or program) is a series of lines which are executed left to right, top to bottom (MEH 13.1) • Code inside <script></script> containers in the <HEAD> of a document is NOT executed when first encountered. It is “stored and remembered” and executed only when called outside the <HEAD>

Selection (choosing alternatives) (JSv4 8.2, 8.3) if (statement in brackets is true) {Do stuff in curly braces} else if (statement in brackets is true) {Do stuff in curly braces} else if . . . else {Do stuff in curly braces} Note that the first ‘if’ has no ‘else’ and the last ‘else’ has no ‘if’! Use of else is strictly optional.

Selection – roll your own (JSV4 8.3class) • A simple program specification calling for conditionals and Boolean logic. A ‘job interview expert system’: • We’re going to input a salary figure • If less than 40K/yr the write “Yo! I sweated bullets learning JavaScript. You think it was easy!” • If exactly equal 40K/yr write “Congratulations; you’re now last on my list” • If greater than 40K and less than or equal to 80K then write “Let me think about it.” • If greater than 80K/yr then write “Who do I have to kill?”

Logical (Boolean) Operators • To do the complex comparison • If > 40K and <= 80K then write “Let me think about it.” • Logical operators are required: • AND (i.e. if A is true AND B is true) • && • OR (i.e. if A is true OR B is true) • ||

Logical (Boolean) Operators (2) • The last logical operator is NOT  ! • i.e. if salary plus bennies is not > 80K then I don’t care. • If !((salary + bennies) > 80000) then . . . • Notice the ! comes first and applies to the entire expression in parentheses – read it as: “if NOT salary plus bennies greater than . . . “ • Now, back to the example(JSV48.3classRaw)

Creating a JavaScript Source FilecopyCenter.html & copies.js • You can also save JavaScript code in an external file called a JavaScriptsource file • You can then write a statement in the document that executes (or “calls”) the code saved in the source file • When a browser encounters a line calling a JavaScript source file • It looks in the JavaScript source file and executes it(actually – the browser loads the code when first parsing the page)

JavaScript Source Files (Cont.) • Is usually designated by the file extension .js and contains only JavaScript statements • It does not contain a <script> element • To access JavaScript code that is saved in an external file, you use the src attribute of the <script> element • <script src=“copies.js”></script>

JavaScript Source Files (Cont.) • The browser ignores any other JavaScript code located within the <script> element • There are several reasons to use a .js source file instead of adding the code directly to a document: • The document will be neater • The JavaScript code can be shared among multiple Web pages • JavaScript source files hide JavaScript code from incompatible browsers

Preparation for the Javascript Labs • The JavaScript labs will consist of: • Finding effects on a page that you want to duplicate • Locating the code that performs the effect • Cutting the code from the original page and embedding it in your page • Getting it to work in the new environment • The time honored name for that process is HACKING

Six JS Lectures, Six Labs • The first lab will have a demonstration/lecture component on debugging based on Chapter 8 of your text. You must display mastery of the debugger for the 2nd exam. The lab itself will execute simple modifications to existing code – date and time and last changed routines that are largely self contained. You are strongly advised to use debugging techniques in the labs. • JSV4 3.2; MEH 14.8; MEH 14.9

JavaScript Lab 2 • The second lab will execute more complex functions – rollovers and event codes that will require changing images, using more or fewer of them, re-dimensioning arrays, etc.

JavaScript Labs 3 & 4 • The third JavaScript lab will be concerned with reading and writing cookies and coding of DHTML menus. • The fourth lab will use advanced JavaScript to animate a web page. The lab will require all the JavaScript knowledge you have acquired in all lectures. • The results of both the cookie and advanced DHTML labs can be incorporated directly into your projects.

JavaScript Labs 5 & 6 • JavaScript lab 5 uses Access wizards to write ASP that allows database interrogation from a web page • JavaScript lab 6 is a brief introduction to AJAX – a contemporary web interaction technique

My First JavaScript Script • JSV4 2.14 • My First Hack • Add a button for “Clinton” “I feel your pain . . .” • Add a button for “Bush, Sr.” “Read my lips . . .” • Add a button for Obama: “I believe we can <fill in the blank> together.” • Add a button for Billary: “I’ve found my voice.” • Add a button for McCain: “Bomb, bomb, bomb – bomb, bomb Iran”

A More Complex Example • Gosselin MovingExtimator.html from Chapter 8 • Change the cost per mile to 1.50 (a typical program maintenance example) • Add the ability to calculate the cost of moving flutes. A flute is 1/25th as expensive as a piano. (Discuss first, code second!)

JavaScript Lecture 1 (JS Intro)