CSE 341 Lecture 29 a JavaScript, the bad parts slides created by Marty Stepp see also: JavaScript: The Good Parts, by.

Slides:



Advertisements
Similar presentations
Arrays A list is an ordered collection of scalars. An array is a variable that holds a list. Arrays have a minimum size of 0 and a very large maximum size.
Advertisements

JavaScript & jQuery JavaScript and jQuery introduction.
Basic -2 Classes and Objects. Classes and Objects A class is a complex data TYPE An object is an instance of a class. Example: Class: Person Objects:
Intro to JavaScript. JavaScript History Client (generally browser-side) language invented at Netscape under the name LiveScript around 1995 Netscape wanted.
Today Programming Style and Your Brain And Then There Was JavaScript Function the Ultimate The Metamorphosis of Ajax ES5: The New Parts.
I just met you, and 'this' is crazy, but here's my NaN, so call(me) maybe? JavaScript is so weird.
JSON, ADsafe, and Misty Douglas Crockford Yahoo!.
Introduction to the C# Programming Language for the VB Programmer.
12-Jun-15 JavaScript Language Fundamentals I. 2 About JavaScript JavaScript is not Java, or even related to Java The original name for JavaScript was.
Kevin Reuter & Brian Guthrie.  Multi-paradigm  Prototype based objects  Dynamic, weak typing.
Introduction to Computers and Programming Lecture 5 Boolean type; if statement Professor: Evan Korth New York University.
Slides prepared by Rose Williams, Binghamton University Chapter 3 Flow of Control Loops in Java.
25-Jun-15 JavaScript Language Fundamentals II. 2 Exception handling, I Exception handling in JavaScript is almost the same as in Java throw expression.
CSE 143 Lecture 7 Sets and Maps reading: ; 13.2 slides created by Marty Stepp
Programming Concepts MIT - AITI. Variables l A variable is a name associated with a piece of data l Variables allow you to store and manipulate data in.
CSE 190M Extra Session #5 JavaScript scope and closures slides created by Marty Stepp
Taking JavaScript Seriously IS NOT THE WORST IDEA.
CSE 341 Lecture 24 JavaScript arrays and objects slides created by Marty Stepp
JavaScript: Control Structures September 27, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel,
Reusable parts of Code Doncho Minkov Telerik Software Academy academy.telerik.com Technical Trainer
CP476 Internet Computing JavaScript Client-Side Programming 1 1. What is JavaScript –Another script language for both client-side and sever-side programming.
1 JavaScript. 2 What’s wrong with JavaScript? A very powerful language, yet –Often hated –Browser inconsistencies –Misunderstood –Developers find it painful.
SE-2840 Dr. Mark L. Hornick 1 Modifying webpage behavior using client-side scripting Javascript.
CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Advanced topic - variable.
Control Structures. Important Semantic Difference In all of these loops we are going to discuss, the braces are ALWAYS REQUIRED. Even if your loop/block.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
Keeping it Neat: Functions and JavaScript Source Files Chapter 7.
JavaScript Syntax and Semantics. Slide 2 Lecture Overview Core JavaScript Syntax (I will not review every nuance of the language)
Session Three Review & Conditional Control Flow. Java File Hierarchy Projects Packages Classes Methods.
ALBERT WAVERING BOBBY SENG. Week 4: JavaScript  Quiz  Announcements/questions.
1 Building Java Programs Chapter 7: Arrays These lecture notes are copyright (C) Marty Stepp and Stuart Reges, They may not be rehosted, sold, or.
4.4 JavaScript (JS) Deitel Ch. 7, 8, 9, JavaScript & Java: Similarities JS (JavaScript) is case-sensitive Operators –arithmetic: unary +, unary.
Applications Development
Conditional Statements.  Checking if input is a number  Radio buttons  Check boxes 2.
Fall 2002CS 150: Intro. to Computing1 Streams and File I/O (That is, Input/Output) OR How you read data from files and write data to files.
JS1-1 Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu
CSE 341 Lecture 25 More about JavaScript functions slides created by Marty Stepp
JavaScript Assignment Statements Expressions Global Functions CST 200 JavaScript.
CS305j Introduction to Computing Classes II 1 Topic 24 Classes Part II "Object-oriented programming as it emerged in Simula 67 allows software structure.
Lesson 2: Reading a program. Remember: from yesterday We learned about… Precise language is needed to program Actors and Classes Methods – step by step.
JavaScript scope and closures
Rich Internet Applications 2. Core JavaScript. The importance of JavaScript Many choices open to the developer for server-side Can choose server technology.
CGS 3066: Web Programming and Design Spring 2016 Programming in JavaScript.
Programming in AS3. AS3 vs MXML MXML is content/structure AS3 ties in with the MXML to create the a functioning program.
Dr. Abdullah Almutairi Spring PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is a widely-used,
Today’s Agenda ML Development Workflow –Emacs –Using use –The REPL More ML –Shadowing Variables –Debugging Tips –Boolean Operations –Comparison Operations.
OVERVIEW OF CLIENT-SIDE SCRIPTING
Checking If User Input Is Numeric.  Quiz  Detecting numeric input  Finish Prior Lecture  Y'all work on one of the problems listed 2.
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
Session Three Review & Conditional Control Flow. Java File Hierarchy Projects Packages Classes Methods.
CGS 3066: Web Programming and Design Spring 2017
Scope, Objects, Strings, Numbers
JavaScript Fundamentals
JavaScript Syntax and Semantics
CSE 341: Programming Languages Section 1
Subroutines Idea: useful code can be saved and re-used, with different data values Example: Our function to find the largest element of an array might.
CSE 341: Programming Langs
PHP.
T. Jumana Abu Shmais – AOU - Riyadh
Coding Concepts (Basics)
Tutorial 4 JavaScript as OOP Li Xu
Building Java Programs
CSE 341 Lecture 27 JavaScript scope and closures
JavaScript CS 4640 Programming Languages for Web Applications
CSE 142 Lecture Notes Defining New Types of Objects, cont'd.
CSE 341 Lecture 22 Macros; extending Scheme's syntax
slides created by Ethan Apter and Marty Stepp
CGS 3066: Web Programming and Design Spring 2016
JavaScript CS 4640 Programming Languages for Web Applications
Presentation transcript:

CSE 341 Lecture 29 a JavaScript, the bad parts slides created by Marty Stepp see also: JavaScript: The Good Parts, by Douglas Crockford

2 Bad parts related to variables global variables and implied globals x = 7; // oops, now i have a global x lack of block scope if (x < 10) { var y = x + 3; print(y); } // oops, y still exists here the global object and confusing uses of this this.x++; // now it's 8. wait, what?

3 Bad parts: numbers parseInt is broken for some numbers:  parseInt("032") assumes it's octal, returns 26 (3*8+2)  parseInt("08") returns 0; 8 isn't a valid octal digit  solution: can pass a base – parseInt("032", 10) returns 32 real number round-off //  many languages have this issue, but: –many novice programmers use JS, and this confuses them –for such a high-level lang., it is surprising to be stuck with it

4 Bad part: NaN NaN is a common numeric result with odd properties: 3 * "x", 1 + null, undefined - undefined,...  hard to test for NaN : 3 * "x" === NaN is false (nothing is equal to NaN) NaN === NaN is false !  must use isNaN or isFinite function instead: isNaN(3 * "x") === true NaN and undefined are mutable; can be changed! undefined = 42; // uh oh NaN = 1.0; // Lulz

5 Bad parts: falsy values testing for the wrong falsy value can have bad results: function transferMoney(account) { // passes with 0, "", undefined, false,... if (account.name == null) {... } == is strange and produces odd results for falsy values: "" == false // true 0 == false // true "0" == false // true "" == '0' // false "" == 0 // true null == undefined // true " \t \n " == 0 // true

6 Bad part: semicolon insertion JS has a complex algorithm that allows you to omit semicolons and it will automatically insert them  nice for bad programmers who forget to use them  but often has weird and confusing results: // return an object // the code turns into... return return; { name: "Joe", name: "Joe", age: 15 age: 15 }

7 Bad part: with the with statement runs code in context of an object: var o = {name: "Bob", money: 2.50}; with (o) { // now I don't have to say o.name if (name.length > 2) { money++; } }  confusing when there's also a var named name or money

8 Bad part: eval the eval function compiles/executes a string as code: var s = "1 + 2 * 3"; eval(s) // 7 var f = "function(s) { " + "print(s.toUppercase()); }"; eval("f('hi');"); // HI  seems nice, but it's slow, buggy, and bad for security –why is Scheme's eval better than this one?

9 Bad part: typeof typeof operator is broken for several types:  for undefined :returns "undefined" (this is fine)  for null :returns "object", not "null"  for arrays:returns "object", not "array"  for RegExp s:returns "object" or "function" void is a JS operator that turns anything to undefined  void("hello") returns "undefined" –useless, confusing to Java programmers

10 Bad part: Primitive wrappers numbers, booleans, strings are actually primitives in JS  but if they are used in an object-like way, they are silently temporarily converted into wrapper objects (~ like Java) – (3).toString() ← creates temp object  you can explicitly construct wrappers, but don't ever do it: var b = new Boolean(false); var n = new Number(42); var s = new String("hello"); typeof(b) // "object" if (b) { print("hi"); } // does print! n === 42 // false

11 For-each loop on objects for (name in object) { statements; } "for-each" loops over each property's name in the object  it also loops over the object's methods! > for (prop in teacher) { print(prop + "=" + teacher[prop]); } fullName=Marty Stepp age=31 height=6.1 class=CSE 341 greet=function greet(you) { print("Hello " + you + ", I'm " + this.fullName); }

12 Bad part: Never-empty objects var wordCount(text) { var counts = {}; // object 'map' of counters var words = text.split(/\s+/); for (var i = 0; i < words.length; i++) { if (counts[words[i]]) { counts[words[i]]++; } else { counts[words[i]] = 1; } return counts; }  What if the text contains this, or constructor, or...?

13 Moral of the story Language design is hard and not to be taken lightly!  every language has a few misguided or abusable features  it's hard to change a language once it has been released  sometimes adding features over time bloats a language  add things coders need; don't add things coders don't need  having more than 10 days to design a language is good  having more than one person design a language is good  mostly-copying another language can be very confusing