Introduction to JavaScript Programming

World Wide Web Original purpose was locating and displaying information Small academic and scientific community Commercial applications Static HTML Need for more interactive and appealing

JavaScript Joint venture – Sun & Netscape Netscape Communications LiveScript Sun Microsystems Simplify its Java language Open language – anyone can use Embedded in the HTML document

JavaScript vs. Java Java is full-fledged, object-oriented language Can be used to create applets Applets – small programs designed to execute within another application Must use some type compiler, such as Sun’s JDK

JavaScript Statements/variables are case sensitive Interpreted language – code runs only on a JS interpreter built into browser Version of JS depends on browser version IE supports additional features – Microsoft calls its version Jscript Older browsers may not handle newer JS codes

JavaScript and HTML Tags HTML (hypertext markup language) Microsoft FrontPage Macromedia Dreamweaver Microsoft Word Netscape Composer Text editor, such as Notepad Tag – instruction surrounded by ‘ ’ symbols The instructions are call attributes and have values assigned to them

JavaScript and HTML Tags TagAttributes TagAttributes

SCRIPT Tags Four attributes LANGUAGE – identifies version of JavaScript SRC – text string for URL/filename of JS source file TYPE – specify the scripting language DEFER – beyond the scope

SCRIPT Tags <!– Hide from old browsers Place your JS code in this area //--> TagAttributes

HTML Comments Embedded JS code needs to be hidden from incompatible browsers <!-- beginning comment block --> ending comment block

JavaScript Comments Line Comments // This is a line comment Block Comments /* Beginning line Still a comment Ending line */

JavaScript Benefits Web Standard Alternative – Microsoft VBScript Follows Visual Basic syntax VBScript not supported in Netscape Navigator Provide instant feedback without CGI (Common Gateway Interface) scripts

JavaScript Cookies Cookies – data sent and stored in files on user’s computer Navigator – cookies.txt IE – Cookies folder Track user’s preferences JavaScript code limits access to user’s hard drive – browser controls cookie location

JavaScript Basics Common types of variables Numeric - numbers Strings - letters Boolean – true/false or yes/no

JavaScript Basics Variables – Naming Conventions Name must begin with letter or underscore Rest of name – letters, numbers, or underscores Avoid reserved words (appendix A) No spaces or punctuation Variables are case sensitive Defined by keyword var

JavaScript Basics Literal – actual number or char text, rather than a calculated result or value input from a keyboard var browserType = “Netscape” var width = 3 var Test = “\”Hey there!\” she said.” Special characters (table I-2): String literal:

JavaScript Basics write() – method used to write text to the Web page alert() – method used to display messages in a dialog box Discussed in more detail in Project 1

JavaScript Basics Expression – formula to assign values to variables average = totalValue/Count var Count = 0

JavaScript Basics Arithmetic operators – Table I-3 Increment/decrement – Table I-4 Arithmetic expressions – Table I-5 Mathematical order – Table I-6 Concatenation

Conditionals Allow comparisons of values See Table I-7 If and While statements

Conditionals var todaysDate = new Date() var numHours = todaysDate.getHours() if(numHours >= 12) { document.write(“Good Afternoon”) } else { document.write(“Good Morning”) } the rest of your code…

Conditionals while (condition) { the JavaScript code to be executed while the condition is True } the JavaScript code to be executed when the loop is finished

Functions Way to write several lines of script and use them repeatedly as needed function Greetings() { alert(“Hello, this is a friendly message.”) } messageStr = “This is a customized message.” function Greetings(messageStr) { alert(messageStr) } All-purpose message:

Objects, Properties, and Methods Object – real-world entity (book, car) JS is object oriented (OO) Object-Oriented Programming (OOP) Object is described by its properties Properties are attributes that help differentiate one object from another Separate object and property with a period Ex. car.color = “red”

Objects, Properties, and Methods Method – function or action you want the object to perform (behavior) Ex. car.drive() Some methods require an argument Argument is a value passed to the method

Objects, Properties, and Methods JS uses many objects, but not a complete OOP language JS provides many built-in objects Ex. Date, Arrays, windows, and forms JS allows you to define and create your own When defining objects, assign unique and meaningful names (not form1)

Events Action that occurs, such as a user clicking a link or button, or user entering data in a form textbox JS reacts to events by Event Handlers Table I-8 JavaScript Quick Reference (page J A.5) Events are “triggered” Ex. onMouseOver

Events:Forms Many event handlers work with forms Ex. onFocus, onBlur, onChange, onSubmit, and onReset

Frames Frame is a feature that allows a browser window to be split into smaller units.

Arrays Collection of data items identified by a singular name Defined by using built-in Array object var currMonth = new Array(13) currMonth[1] = “January” currMonth[2] = “February” … currMonth[12] = “December” Length

Arrays Thirteen (13) elements defined because JS first array element is [0] Older browsers use [0] to hold the length Good practice to leave element [0] empty and start with element [1] Creating arrays discussed in Project 3