1 / 20

Taking JavaScript Seriously

Taking JavaScript Seriously. Is not the worst idea. A Brief History of JavaScript. Invented at Netscape in 1995 Has nothing to do with Java Standardized by ECMAScript Current version is 3 Version 5 is available, but not widely adopted. JavaScript Types. Types are:

adia
Download Presentation

Taking JavaScript Seriously

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Taking JavaScript Seriously Is not the worst idea

  2. A Brief History of JavaScript • Invented at Netscape in 1995 • Has nothing to do with Java • Standardized by ECMAScript • Current version is 3 • Version 5 is available, but not widely adopted

  3. JavaScript Types • Types are: • Number, String, Boolean Object, Function, Array • Types get automatically converted when needed • Examples: • '' == '0' // false • 0 =='' // true • 0 == '0‘ // true • false =='false' // false • false =='0' // true • false == undefined // false • false ==null // false • null ==undefined // true • ' \t\r\n ' == 0 // true

  4. JavaScript Types • typeofworks in a bizarre way • typeof([0, 1, 2]) === 'object' • To avoid problems: • Use === and !== • Explicitly convert using parseInt() and toString()

  5. JavaScript Variables • Have function scope • If you don’t declare them, they are implicitly global (This is awful) • Global environment has a name (window in the browser, global in nodejs) • To avoid problems, always declare all variables at the top of the function.

  6. JavaScript Objects • Everything is an object • Objects are collections of key/value pairs • Create using object literal notation varobj = { att1: 1, 'att2': 556.8, 'someatt': { thing: 'sing', 'otherthing': true } };

  7. Creating Objects variterator = function(arr){ return { myArr: arr, index: 0, next: function() { this.index += 1; return this.myArr[index - 1]; }, hasNext: function() { return this.index < this.arr.length; } }; } varit = iterator(['apples', 'bananas']) it.next() // 'apples' it.hasNext() // true it.next() // 'bananas' it.hasNext() // false

  8. JavaScript Inheritance • The stuff of madness • Prototyping • Objects inherit from other objects • object.prototype points to the ‘parent’ object

  9. Handling Inheritance • Every object has a prototype of object • Adding something to object.prototypewill add it to all objects in all scripts on the page • When enumerating objects, always use for (varkey in object){ if (object.hasOwnProperty(key)) { //Do some stuff } }

  10. JavaScript Functions • Are also objects • Can be defined anywhere • Look like this: Used internally in the function function name (arg1, arg2, arg3) { //Do some stuff }

  11. JavaScript Functions • Can access the variables of their environment • For example function outer(a, b) { vari, j; varinner = function() { //Can access a, b, i, j, inner } } Closure of inner

  12. Information Hiding with JS variterator = function(arr){ var index = 0; return { next: function() { index += 1; return arr[index - 1]; }, hasNext: function() { return index < arr.length; } }; } varit = iterator(['apples', 'bananas']) it.next() // 'apples' it.hasNext() // true it.next() // 'bananas' it.hasNext() // false

  13. Immediate Execution • Functions can be executed right after definition • Use this to create a module that won’t affect the global namespace (function() { varv1, v2; //Put your code here })()

  14. Events in JavaScript • Not built into the language • Use anonymous functions: node.addEventListener('click', function(event) { //handle the event here }

  15. Misc Tidbits • If you want to do defaults: • Always put semi-colons on the ends of lines • Put "use strict" at the top of your module function • The . notation and [] notation are interchangeable • Never ever ever use eval function (arg1, arg2) { arg1 = arg1 || 5; arg2 = arg2 || {}; }

  16. JS File Template (function() { "use strict"; document.addEventListener('DOMContentLoaded', function() { //Initialization stuff here }); // Other code here })()

  17. References • Crockford, Douglas. JavaScript: The Good Parts. O’Reilly Media Inc, Cambridge, MA. 2008. • Stefanov, Stoyan, JavaScript Patterns. O’Reilly Media Inc, Cambridge, MA. 2010.

  18. Resources • jslint • Mozilla Developer Network • W3CSchools

  19. Exercise • Change the file javascript_exercise.js so that the object returned by create_calorie_counter has no public data (see slide on information hiding) • The exercise and these slides are available athttp://web.cs.dal.ca/~yule#teaching/csci3130 • Note the hash!

  20. Pitch Preferences • Once you’ve spoken to all three TAs, fill out the form at • http://goo.gl/92CuHq

More Related