COMS 469: Interactive Media II

Size: px

Start display at page:

Download "COMS 469: Interactive Media II"

Irma Murphy
5 years ago
Views:

1 COMS 469: Interactive Media II

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

3 gunkelweb.com/coms469

4 Introduction to JavaScript Chapter One Introduction to JavaScript and the Web

5 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

6 Introduction to JavaScript Executable Binary Code Human readable/writeable code

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

JavaScript, VBScript JavaScript client side scripting Server Side Scripting Script code is interpreted on

8 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

9 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

JavaScript in order to capitalize on the popularity of Java Netscape s

10 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.

11 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++

or versions of JavaScript are substantial similar, there are

12 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.

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

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

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

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

17 Introduction to JavaScript Why JavaScript? Lucrative

http://notepad-plus-plus.org/ http://www.barebones.

18 Introduction to JavaScript JavaScript Tools Text Editor NotePad NotePad++ or TextWrangler Browser M$-IE Firefox Safari USB Jump Drive

19 Introduction to JavaScript JavaScript & Browsers Enable/Disable JavaScript

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

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

22 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

23 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

24 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( )

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

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

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

28 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

29 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.

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

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

32 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

33 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.

34 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.

35 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.

36 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.

37 Exercise #2

38 Review Exercise

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

40 Preview Javascript Ch. 2: Data Types and Variables (pp ) Ch. 3: Decisions, Loops, & Functions (pp )

COMS 469: Interactive Media II

COMS 469: Interactive Media II Agenda Review Data Types & Variables Decisions, Loops, and Functions Review gunkelweb.com/coms469 Review Basic Terminology Computer Languages Interpreted vs. Compiled Client