recap. what constitutes “bad”? syntax – but may be personal preference? rules that are complex...
TRANSCRIPT
![Page 1: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/1.jpg)
JavaScriptrecap
![Page 2: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/2.jpg)
What constitutes “bad”?Syntax – but may be personal preference?Rules that are complex or hard to rememberInconsistenciesIf a feature can be used in a dangerous
manner – is that bad?If the language is harder to learn because it’s
different from the dominant languages - is that bad?
If a feature is error prone (i.e., easy to do incorrectly) – is that bad?
![Page 3: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/3.jpg)
Think for yourselfhttp://www.youtube.com/watch?v=MFtijdklZ
Do
![Page 4: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/4.jpg)
SyntaxMath.floor(2.99945) vs 2.99945.floor
![Page 5: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/5.jpg)
InconsistenciesArrays can have negative index, BUT causes
problems with some built-in methods+/- with mixed operators
‘6’ + 3 = ‘63’‘6’ – 3 = 3
with statementbehavior depends on whether property is
definedshorthand syntax, but doesn’t match longer
syntax in all cases
![Page 6: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/6.jpg)
DangerousEval()
Not safe (possible injection), slowSometimes misused: eval("person."+ property) vs. person[property]
Useful – but no example cited
![Page 7: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/7.jpg)
== vs ===Common to do some type conversions (e.g., 1.0 == 1 in
Java)0 == ‘’ // true0 == ‘0’ // trueFalse == ‘0’ // truefalse == ‘false’ // falsenull == undefined // truenull == false // false‘\t\r\n ‘ == 0 // true
0 is “falsy” and so is an empty string ‘\t\r\n’
![Page 8: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/8.jpg)
Error prone/confusingBlockless statements (like C++, if only one
statement, don’t need braces… concise, but can result in undesired behavior)
Automatic semicolon insertionScoping issues. JS moves variable
declarations to beginning of function. No block scope. No private scope.
Six different ways to set “this”Use of “new” keyword to instantiate
prototype
![Page 9: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/9.jpg)
Programming in the largeBrowser incompatibilities make difficultGlobal variables (but see strict mode). All top-
level variables are combined into one global object.
No native support for namespace, but can be simulated using namespace object
![Page 10: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/10.jpg)
OtherSearch engine spiders can’t read JavaScript,
may limit search engine results
![Page 11: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/11.jpg)
What constitutes “good”?Error handlingEfficientEasy to learnWritabilityPowerful features
![Page 12: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/12.jpg)
Error handling/SecurityFail silently
not so good in general-purpose language; useful for web, so small errors don’t keep pages from loading
Can’t access local files/directoriesCross Site Scripting (XSS). Possible because
of dynamic nature of JavaScript. Must take care when accepting input from users.
JavaScript now supports exception handlingwindow.onerror. Handy for stack trace (need
Blink rendering engine)
![Page 13: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/13.jpg)
Efficiencyrun on browser, offload work from serverobjects as maps
![Page 14: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/14.jpg)
Writability ternary operators (concise)anonymous functions
Function expressions (no name) vs function statements
Function arguments (arguments object, don’t need to list them all)
default values
![Page 15: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/15.jpg)
Powerful featuresSparse array – items can be undefinedFunctions as first-class objectsModule patternGenerators (allows infinite lists)Closures
Ex: set body font, use ems everywhere else, easy to resize entire page when body font changes
BUT: take up memory (may even cause memory leak, if circular), affect processing speed
Can be used to simulate private variables
![Page 16: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/16.jpg)
Closure examplevar addScore = (function(points)
var score = 0;return function (points)
return score+=points;)()
Idea: if points stored in global var, anything could change. This way, score is protected in a closure.
![Page 17: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/17.jpg)
Relatedvar scoreChanger = (function(points) var score = 0; var operation =
add: function(points) return score += points;,sub: function(points) return score -= points;,mult: function(points) return score *= points;,div: function(points) return score /= points;return operation;)()
Invoke as: scoreChanger.add(1)
![Page 18: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/18.jpg)
Prototypes - prosEasy to implement, due to JavaScript objects
as mapsCan dynamically add functions
![Page 19: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/19.jpg)
Prototypes - consError prone – may modify code you don’t
understandNo real private variablesCan be slow to search entire prototype chainCan extend native prototypes, which can
cause confusionMultiple meanings to prototype. Prototype of
an object is not function.prototype.May be confusing to programmers used to
class-based inheritance (learnability issue)
![Page 20: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/20.jpg)
References Young, Alex, “History of JavaScript: Part 1,” http://dailyjs.com/2010/05/24/history-of-javascript-1/ Accessed Oct. 2014 [2] Chapman, Stephen, “A Brief History of JavaScript,” http://javascript.about.com/od/reference/a/history.htm Accessed Oct. 2014 [3] Cooper, Sean, “Whatever Happened to Netscape?” http://www.engadget.com/2014/05/10/history-of-netscape/ Accessed Oct. 2014 [4] “ECMAScript,” http://en.wikipedia.org/wiki/ECMAScript Accessed Oct. 2014 [5] Gravell, Rob, "Don't Fear Sparse Arrays in JavaScript" http://www.htmlgoodies.com/beyond/javascript/dont-fear-sparse-arrays-in-javascript.html Accessed
Oct. 2014. [6] “JavaScript Features You Should Never Use & Alternatives,” http://www.dreamincode.net/forums/topic/109965-javascript-features-you-should-never-use-
alternatives/ Accessed Oct. 2014 [7] Stannard, Kevan, “10 Interesting JavaScript Features” http://blog.stannard.net.au/2011/01/07/10-interesting-javascript-features/ Accessed Oct. 2014 [8] “Strangest Language Feature” http://stackoverflow.com/questions/1995113/strangest-language-feature Accessed Oct. 2014 [9] “Inheritance and the Prototype Chain,” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/
Inheritance_and_the_prototype_chain Accessed Oct. 2014
![Page 21: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/21.jpg)
References [10] “Best JavaScript Syntactic Sugar,” http://stackoverflow.com/questions/180841/best-javascript-syntactic-sugar
Accessed Oct. 2014 [11] Mickel, “Useful Features of JavaScript That You Have Never Seen Before,” https://pixeltango.com/articles/web-development-articles/useful-features-of-
javascript-that-you-have-never-seen-before/ Accessed Oct. 2014 [12] “Hidden Features of JavaScript?” http://stackoverflow.com/questions/61088/hidden-features-of-javascript Accessed
Oct. 2014 [13] L., Adam, “Boolean Conditionals vs Ternary,” http://jsperf.com/boolean-conditionals-vs-ternary Accessed Oct. 2014 [14] “W3C DOM Compatibility - HTML,” http://www.quirksmode.org/dom/html/
Accessed Oct. 2014 [15] “try...catch,” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/
try...catch Accessed Oct. 2014
![Page 22: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/22.jpg)
ReferencesPluralsight: Javascript the Good Parts Video by
Douglas Crockford http://www.pluralsight.com/courses/javascript-
good-parts Function Expressions and Function Statements http://stackoverflow.com/questions/1013385/
what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip
Mastering the Module Pattern by Todd Motto http://toddmotto.com/mastering-the-module-
patter
![Page 23: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/23.jpg)
References
http://www.oreillynet.com/pub/a/javascript/excerpts/javascript-good-parts/bad-parts.html
http://thoughtsonscripts.blogspot.com/2011/11/javascript-good-part-bad-part.html
http://darkhelmet.github.io/javascript-the-bad-parts/#/globals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
![Page 24: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/24.jpg)
Referenceshttp://www.kenneth-truyers.net/ http://toddmotto.com/ http://blogs.msdn.com/b/ericlippert/archive/
2003/09/17/53028.aspx https://developer.mozilla.org/en-US/docs/Web/JavaScript/ www.w3schools.com/jsref/jsref_prototype_math.asp http://stackoverflow.com/questions/4508313/advantages-of-
using-prototype-vs-defining-methods-straight-in-the-constructor http://stackoverflow.com/questions/3462464/the-benefits-of-
javascript-prototype http://stackoverflow.com/questions/6585478/the-disadvantages-
of-javascript-prototype-inheritance-what-are-they http://stackoverflow.com/questions/500431/what-is-the-scope-of-
variables-in-javascript
![Page 25: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/25.jpg)
References “Bad Parts: Appendix B JavaScript: The Good Parts." Oreilly.net. http://www.oreillynet.com/pub/a/javascript/excerpts/javascriptgoodparts/ badparts. html [2] "Fast Slim Correct: The History and Evolution of JavaScript." Slideshare. http://www.slideshare.net/crashposition/fastslimcorrecttheevolutionofjavascript [3] "How Does JavaScript .prototype Work?" StackOverflow. http://stackoverflow.com/questions/572897/howdoesjavascriptprototypework [4] "JavaScript Closures." W3Schools. http://www.w3schools.com/js/js_function_closures.asp [5] "JavaScript: Its Evolution as a Language." InfoQ. http://www.infoq.com/news/2007/07/javascriptevolution [6] "JavaScript Prototype Property." W3Schools. http://www.w3schools.com/jsref/jsref_prototype_math.asp [7] "JavaScript: The Good Parts." IT EBooks. http://itebooks. info/book/274/ [8] "JS Stacktraces. The Good, the Bad, and the Ugly. Bugsnag." Bugsnag. https://bugsnag.com/blog/jsstacktraces/
![Page 26: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/26.jpg)
References [9] "Learning Advanced JavaScript." eJohn.org http://ejohn.org/apps/learn/#67 [10] "Prototypal Inheritance in JavaScript." JavaScript.Crockford.com. http://javascript.crockford.com/prototypal.html [11] "The Prototype Object of JavaScript." JavaScriptKit. http://www.javascriptkit.com/javatutors/proto.shtml [12] "Understand JavaScript Closures With Ease." JavaScriptIsSexy. http://javascriptissexy.com/understandjavascriptclosureswithease/? WPACFallback=1 &WPACRandom=1413222480674 [13] "Understanding JavaScript Prototypes." JavaScript JavaScript. http://javascriptweblog.wordpress.com/2010/06/07/
understandingjavascriptprototypes/ [14] "What Is a Practical Use for a Closure in JavaScript?" Stack Overflow. http://stackoverflow.com/questions/2728278/whatisapracticaluseforaclosureinjava script
![Page 27: Recap. What constitutes “bad”? Syntax – but may be personal preference? Rules that are complex or hard to remember Inconsistencies If a feature can be](https://reader038.vdocuments.site/reader038/viewer/2022110322/56649d0a5503460f949dd227/html5/thumbnails/27.jpg)
JavaScript examplestudent_examples.html