Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Javascript - NCSA Wiki
Document related concepts
Transcript
Javascript Prof. Wenwen Li School of Geographical Sciences and Urban Planning 5644 Coor Hall [email protected] Outline 1. Overview 2. Function/Application 3. Javascript & HTML & CSS 4. Programming Methods 5. Programming Syntax 6. Javascript Libraries 7. DOM & Javascript Overview What is Javascript? • • • • • • dynamic programming language client-side scripts Interactive supported prototype-based scripting language multi-paradigm language object-oriented supported Overview History Beginning • was originally developed by Brendan Eich at Netscape Communications Corporation in 10th, 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 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 Function/Application • Web pages development • Desktop/mobile platform • Web environment • Client-side processing Function/Application Client-side processing & web environment • Web pages development • Desktop/mobile platform • Browser based Function/Application Differences between Javascript and JSP, ASP, PHP • JSP (JavaServer Pages): a Java based tool to develop web pages by serverside 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. 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 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.html 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 Programming Method Structure • <script> Tag: covers JavaScript codes • <head> Tag • <body> Tag • External Javascript Programming Method Environment Free integrated development environment (IDE) • Eclipse • NetBeans • … Free lightweight editors • SciTe • Komodo Edit • Notepad++ Browsers • Firefox • Chrome • Internet Explorer Programming Syntax Data type • • • • • • Boolean Float & Double No integer NAN & Infinity string null & undefined 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 : + - * / Programming Syntax Program/statement Keywords: Comments double slashes // between /* and */ 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) Programming Syntax Operators Arithmetic operators: Assignment operators: Programming Syntax Operators String operators & strings and numbers: Difference? • x1 = 1 + 2; • x2 = “1" + 2; • x3 = “JavaScript" + 1; Comparison and logical operators: 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 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 Javascript Libraries JavaScript Frameworks (Libraries) Reduce the burden of advanced JavaScript programming. • • • • jQuery: http://www.w3schools.com/js/js_lib_jquery.asp Prototype: http://www.w3schools.com/js/js_lib_prototype.asp MooTools Content Delivery Networks (CDN): a network of servers containing shared code libraries. 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 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() DOM & Javascript Basic methods Access HTML objects: • .anchors • .baseURI • .body • .cookie • .documentElement • .documentURI • … Conclusion • Overview • Function/application • Javascript & HTML & CSS • Programming methods • Programming syntax • Javascript Libraries • DOM & Javascript
