1. Javascript Prof. Wenwen Li School of Geographical Sciences and Urban Planning 5644 Coor Hall wenwen@asu.edu

2. Outline 1. Overview 2. Function/Application 3. Javascript & HTML & CSS 4. Programming Methods 5. Programming Syntax 6. Javascript Libraries 7. DOM & Javascript

3. Overview What is Javascript? dynamic programming language client-side scripts Interactive supported prototype-based scripting language multi-paradigm language object-oriented supported

4. Overview History Beginning was originally developed by Brendan Eich at Netscape Communications Corporation in 10 th, May 1995. The named Javascript was adopted in December Standardization ECMAScript in 1997 ECMAScript 2 in 1998 ECMAScript 3 in 1999 ECMAScript 4 in 2007 ECMAScript 5 (ECMAScript 3.1) in 2009 Latest version: ECMAScript 5.1 in 2011 VBScript & JScript

5. Overview Differences between Javascript and Java Completely different The term “Javascript”: marketing deal Java: full programming language Complied language Stand-alone/web Much harder programming language

6. Function/Application Web pages development Desktop/mobile platform Web environment Client-side processing

7. Function/Application Client-side processing & web environment Web pages development Desktop/mobile platform Browser based

8. Function/Application Differences between Javascript and JSP, ASP, PHP JSP ( JavaServer Pages ): a Java based tool to develop web pages by server- side processing ASP (Active Server Pages): a Microsoft scripting language of server-side processing for dynamic web pages development PHP (PHP: Hypertext Preprocessor): a free scripting language of server-side processing for web pages development but also used as a general-purpose programming language.

9. Function/Application Differences between Javascript and JSP, ASP, PHP Javascipt: client-side scripting JSP, ASP, PHP: server-side scripting Javascipt: without compiling JSP, ASP, PHP: require compile Javascipt: easy JSP, ASP, PHP: hard Javascipt: low-level security JSP, ASP, PHP: enable security setting

10. Function/Application Javascript & HTML & CSS HTML tags create objects; JavaScript manipulates those objects. JavaScript enables accessing HTML objects, browser- specific objects and platform-specific objects. * http://www.dummies.com/how-to/content/javascript-and-html.htmlhttp://www.dummies.com/how-to/content/javascript-and-html.html *

11. Function/Application Javascript & HTML & CSS CSS (Cascading Style Sheets): supports to dsign the appearance of web pages Javascript, HTML and CSS generally are combined for web based development: HTML to define the content of web pages CSS to specify the layout of web pages JavaScript to program the behavior of web pages *

12. Programming Method Structure Tag: covers JavaScript codes Tag External Javascript

13. Programming Method Environment Free integrated development environment (IDE) Eclipse NetBeans … Free lightweight editors SciTe Komodo Edit Notepad++ Browsers Firefox Chrome Internet Explorer

14. Programming Syntax Data type Boolean Float & Double No integer NAN & Infinity string null & undefined

15. Programming Syntax Program/statement Are separated by semicolons Consists of values, operators, expressions, keywords and comments Values: Fixed values (literals) and variable values (variables) Literals: number, string, expression Variables: Keyword: var Assign values: equal sign Operators assignment operator: = arithmetic operators : + - * /

16. Programming Syntax Program/statement Keywords: Comments double slashes // between /* and */

17. Programming Syntax Program/statement White space: enables multiple spaces Case sensitive Line length: less than 80 characters (recommendation) Code blocks: {...} Identifiers: Letters, digits, underscores, and dollar signs. Must begin with a letter, or $ and _. Case sensitive (y and Y are different variables) Avoid reserved words (e.g. keywords)

18. Programming Syntax Operators Arithmetic operators: Assignment operators:

19. Programming Syntax Operators String operators & strings and numbers: Difference? x1 = 1 + 2; x2 = “1" + 2; x3 = “JavaScript" + 1; Comparison and logical operators:

20. Programming Syntax Function Function syntax: Keyword: function Name of function + parentheses () Function names follows the same rules as variables Parameter names separated by commas: (parameter1, parameter2,...) Codes of function are included inside curly brackets: {} Function invocation Function return Return statement Return value

21. Programming Syntax Object Example: Object: Boeing 787 Properties: airplane.name: Boeing 787 airplane.range: 9,439 miles airplane.topSpeed: 593 mph airplane.wingspan: 197' airplane.cruiseSpeed: 567 mph Method: airplane.landing airplane.takeoff airplane.fly

22. Javascript Libraries JavaScript Frameworks (Libraries) Reduce the burden of advanced JavaScript programming. jQuery: http://www.w3schools.com/js/js_lib_jquery.asphttp://www.w3schools.com/js/js_lib_jquery.asp Prototype: http://www.w3schools.com/js/js_lib_prototype.asphttp://www.w3schools.com/js/js_lib_prototype.asp MooTools Content Delivery Networks (CDN): a network of servers containing shared code libraries.

23. DOM & Javascript HTML DOM (Document Object Model) a standard to access and modify HTML elements. Defines HTML elements as objects Defines properties of HTML elements Defines methods of HTML elements Defines events of HTML elements Method Property

24. DOM & Javascript Basic methods Access HTML elements:.getElementById.getElementsByTagName().getElementsByClassName() Modify the content of HTML elements: element.innerHTML= element.attribute= element.setAttribute(attribute,value) element.style.property= Modify HTML elements:.createElement().removeChild().appendChild().replaceChild().write()

25. DOM & Javascript Basic methods Access HTML objects:.anchors.baseURI.body.cookie.documentElement.documentURI …

26. Conclusion Overview Function/application Javascript & HTML & CSS Programming methods Programming syntax Javascript Libraries DOM & Javascript