COMS 469: Interactive Media II

COMS 469: Interactive Media II

Agenda Class Roster Course Web Site & Syllabus JavaScript Introduction (ch. 1)

gunkelweb.com/coms469

Introduction to JavaScript Chapter One Introduction to JavaScript and the Web

Introduction to JavaScript Definitions/Terminology JavaScript is a kind of computer language Computer Language Series of instructions (also called code) that tell a computer what to do These instructions are processed by the computer. This is called executing or running the code. Instructions/code for making instant coffee

Introduction to JavaScript Executable Binary Code Human readable/writeable code

Introduction to JavaScript Two Methods of making the conversion program Hello; Compiler 0011001 1100110 1001010 Executable Binary Code begin Write('Hello world'); end. 0011001 Source Code Interpreter 1100110 1001010

Introduction to JavaScript Scripting Languages Interpreted language for web applications Two kinds Client Side Scripting Script is embedded in an HTML document and interpreted by the user s browser i.e. JavaScript, VBScript JavaScript client side scripting Server Side Scripting Script code is interpreted on the server and the results are delivered to the user s web browser i.e. PHP, ASP, Perl PHP server side scripting

Introduction to JavaScript JavaScript is a client side scripting language Browsers have a built-in JavaScript Interpreter This Interpreter takes the JavaScript code embedded in an HTML document and turns it into executable machine code

Introduction to JavaScript JavaScript History JavaScript was introduced in 1995 by Netscape; originally it was called LiveScript Changed name to JavaScript in order to capitalize on the popularity of Java Netscape s JavaScript is based on the ECMA-262 Edition 3 standard scripting language.

Introduction to JavaScript JavaScript History Despite the similarity in name, JavaScript is NOT a scripting version of Java Java Sun Microsystems / Oracle Full-featured programming language like C++

Introduction to JavaScript JavaScript History Different versions JavaScript JScript Although these different brands or versions of JavaScript are substantial similar, there are enough differences to cause some cross-browser incompatibility issues.

Introduction to JavaScript Why JavaScript? Compatibility Easy to learn and use Powerful/Practical Lucrative

Introduction to JavaScript Why JavaScript? Compatibility Firefox Safari M$-IE Server JavaScript VBScript Perl PHP

Introduction to JavaScript Why JavaScript? Easy to Learn and Use Interpreted Embedded in HTML Runs locally Good transition language

Introduction to JavaScript Why JavaScript? Powerful/Practical Interact with Users Work with Forms Image Manipulation User Customization DHTML AJAX Web 2.0 Aps

Introduction to JavaScript Why JavaScript? Lucrative

Introduction to JavaScript JavaScript Tools Text Editor NotePad NotePad++ or TextWrangler http://notepad-plus-plus.org/ http://www.barebones.com/products/textwrangler/ Browser M$-IE Firefox Safari USB Jump Drive

Introduction to JavaScript JavaScript & Browsers Enable/Disable JavaScript

Writing JavaScript Terminology JavaScript is an Object-Oriented language Object-Oriented Terminology Object Properties Methods

Writing JavaScript Terminology Object = Web Browser Elements Window Document Forms Images

Writing JavaScript Terminology Properties Items belonging to a web browser object Further define an object; changing a property can alter the object Examples Documents have titles Forms have checkboxes Windows have a location

Writing JavaScript Terminology Methods = Object behaviors Specifies what an object does or how it functions Examples Buttons click( ) Windows open( ) Documents write( ) the ( ) occurs with all JavaScript methods; often times additional information (called an argument) is placed inside the parenthesis

Writing JavaScript Terminology Objects, Properties and Methods are put together to create instructions Dot-Syntax Object.property document.bgcolor window.status Object.method( ) document.write( )

JavaScript Object Table Complete list of all JavaScript objects & their associated properties and methods

Writing JavaScript Case Sensitivity HTML is not case sensitive <html> = <HTML> = <Html> JavaScript is case sensitive bgcolor bgcolor BgColor BGCOLOR

Writing JavaScript JavaScript code is placed within an HTML document. It can go either in the <head> or the <body>.

Writing JavaScript <script> Differentiate JavaScript code from HTML by using the <script> container tag. This tag has one required attribute, which specifies the type of scripting language. <script> tells the browser to interpret the following lines of code as script and not as HTML

Writing JavaScript JavaScript code Change the bgcolor property of the document object by setting its value to an hexadecimal number. The equals sign assigns the hex number value to the bgcolor property. The value is in quotation marks. The end of a line of code is indicated with a semi-colon.

Writing JavaScript Closing script tag. Tells the browser to stop interpreting JavaScript code and return to displaying HTML

Writing JavaScript Exercise #1 Results: JavaScript code changes the background color of the page

Writing JavaScript Parsing Browser reads the HTML code from top to bottom It first sets the bgcolor to white and then interprets the JavaScript code which sets it to red

Parsing Example

When the page first opens, the bgcolor is set by the HTML code to white. The first script tag employs an alert( ) function which halts the parsing of the page at this point. The alert( ) function takes a text string as its parameter. A text string is a bit of text that is contained by quotation marks. Before the alert( ) function, we include a comment. JavaScript comments are preceded by double slashes.

After the user clicks the alert box s OK button, the parsing continues and encounters a second script tag. This second script tag changes the bgcolor to red and uses a second alert( ) function which again halts the parsing of the page.

After the user clicks the alert box s OK button, the parsing continues to the end of the page and displays the last line of HTML code on the red background.

Exercise #2

Review Exercise

Review Exercise Hint: There is more than one way to get this result

Preview Javascript Ch. 2: Data Types and Variables (pp. 17-50) Ch. 3: Decisions, Loops, & Functions (pp. 51-86)