JavaScript Jonathan Vinson CSC 415 History Developed in 1995 by Brendan Eich (Netscape) Created in 10 days Originally called Mocha, then LiveScript Trademarked by Sun and became JavaScript Officially called ECMAScript since it was standardized by EMCA in 1996 Now on ECMAScript 5 Names Must begin with a letter, $, or _ Can contain letters, digits, underscores, and dollar signs Case sensitive Reserved words cannot be used as names Scope Static scoped Variables declared within a JavaScript function are local to that function Variables declared outside of a function have global scope Assigning a value to a variable that hasn't yet been declared will automatically make that variable global Data Types Dynamic Data Types Number String Boolean Array Object Undefined Empty Operators +, -, *, /, %, ++, -- ==, ===, !=, !==, >, <, >=, <= &&, ||, ! &, |, ~, ^, <<, >> typeof, delete, unary + Strings can use arithmetic operators to interact with other strings and numbers Unary + operator converts a string to an integer Statements =, +=, -=, *=, /=, %= While Do … while For For … in If … else Control: continue, break Subprograms Functions are used in JavaScript function myFunction(p1, p2) { return p1 * p2; } Exception Handling Try, Catch, Throw, and Finally try { if(x == "") throw "Empty"; if(isNaN(x)) throw "Not a number"; if(x > 10) throw "Too high"; if(x < 5) throw "Too low"; } catch(err) { message.innerHTML = "Error: " + err + "."; } finally { document.getElementById("demo").value = ""; } Event Handling Handles HTML events <button onclick="displayDate()">The time is?</button> Libraries of JavaScript Prototype MooTools jQuery YUI Ext JS Dojo UIZE Many More! jQuery Most popular JavaScript framework on the internet today Uses CSS selectors to access and manipulate HTML elements (DOM Objects) Provides companion UI framework and many other plug-ins Used by Google, Microsoft, IBM, and Netflix jQuery jQuery $ (‘body’) .css (‘background’, ‘#ccc’); JavaScript Function changeBachground(color) { Document.body.style.background = color; } Prototype Provides a simple API to perform common web tasks API is short for Application Programming Interface, and is a library for manipulating the HTML DOM Prototype enhances JavaScript by providing classes and inheritance Mootools Also a framework that offers an API to make common JavaScript programming easier Includes some lightweight effects and animation functions Content Delivery Networks Speed is always important with web pages Many web sites use the same JavaScript framework CDNs solve this by providing a network of servers containing shared code libraries Google provides a free CDN for many JavaScript libraries including: jQuery, Prototype, Mootools, Dojo, and Yahoo! YUI Other Useful Features AJAX (Asynhronous JavaScript and XML) A way to exchange data with a server, and update parts of a web page without reloading the whole page https://www.youtube.com/watch?v=m1o7TxX9 aBg JSON (JavaScript Object Notation) A lightweight data interchange format that is language independent, and easy to understand. Readability Familiar Syntax Simple Easy to read Libraries such as jQuery can make reading JavaScript much more condensed Writability Allows for expressive coding Familiar Syntax Easy to pick up Development is relatively fast Frameworks allow for quick building of JavaScript files Reliability Widely supported Standardized Run with client resources Many great libraries Cost Training is cheap Free IDEs Very portable Easily maintainable Most libraries are also free