JavaScript Tech Talk - Bojan Beran . com

handslustyInternet and Web Development

Dec 14, 2013 (3 years and 10 months ago)

102 views

JAVASCRIPT:

YOU’RE DOING IT WRONG!!!

A quick look at some common mistakes

Douglas Crockford


JavaScript Language Developer

Creator of JSON

Author of JavaScript and JavaScript: The Good Parts

Creator of JSLint

What is JavaScript


Implementation of ECMAScript scripting
language specification using Java naming
conventions and C type syntax.


Other implementations: Jscript (IE), ActionScript (Flash)


Easiest Language to Program


Hardest Language to Program (correctly)

Var Var Var


JavaScript only has 2 scopes: Global and Function.


Variables can be defined implicitly, but that can lead to
problems.


Example:


var i = 0;

function dostuff() {


for (i=0;i<=5;i++) {



//do stuff


}

}

alert(i);

Var Var Var


JavaScript only has 2 scopes: Global and Function.


Variables can be defined implicitly, but that can lead to
problems.


Example:


var i = 0;
// global variable

function dostuff() {


for (i=0;i<=5;i++) {
//implied local...but not



//do stuff


}

}

alert(i);
// 5

Var Var Var


JavaScript only has 2 scopes: Global and Function.


Variables can be defined implicitly, but that can lead to
problems.


Fixed Example:


var i = 0;
// global variable

function dostuff() {


for (var i=0;i<=5;i++) {
//local variable



//do stuff


}

}

alert(i);
// 0

== !== ===


Every type is an object and different operations
can cause type coercion.


The == and != operators do type coercion before
comparing.


Common misuse:
if ( x == 0)


Say x = false then x == 0 will return
true !!!!!


The === and !== compare both value and type


Correct usage
if ( x === 0 )


Most notably, it should be used for 0, ‘’, undefined,
null, false and true

Type Coercion Example

alert((![]+[])[+[]]+(![]+[])[+!+[]]+([][[]]+[])[+!+[]+!+[]+!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]]);

Type Coercion Example

alert((![]+[])[+[]]+(![]+[])[+!+[]]+([][[]]+[])[+!+[]+!+[]+!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]]);

Type Coercion Example

(![]+[])[+[]]

[]
// empty object

![]
// Boolean coercion = !true = false

![] + []
// String coercion = “false” + “” = “false”

(![] + [])[]
// strings are arrays of characters

[]

// empty object

+[]
// Number coercion = 0

(![]+[])[+[]] = (“false”)[0] = “f”

alert(
(![]+[])[+[]]
+(![]+[])[+!+[]]+([][[]]+[])[+!+[]+!+[]+!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]]);

Type Coercion Example

(![]+[])[+[]] = (“false”)[0] = “f”

(![]+[])[+!+[]] = (“false”)[1] = “a”

([][[]]+[])[+!+[]+!+[]+!+[]+!+[]+!+[]] = (“undefined”)[5] = “i”

(![]+[])[!+[]+!+[]] = (“false”)[2] = “l”

alert(
(![]+[])[+[]]
+
(![]+[])[+!+[]]
+
([][[]]+[])[+!+[]+!+[]+!+[]+!+[]+!+[]]
+
(![]+[])[!+[]+!+[]]
);

Never Assume


Implicit works…but not always how you
want it to work:


Example parseInt()


parseInt(“8”) = 8

//base 10


parseInt(“08”) = 0

//base 8


parseInt(String, Base):


parseInt(“08”, 10) = 8

//specified base 10

Eval is


…well, it’s evil
-
ish.


The function eval(input) takes the string
input then parses and executes it as
native JavaScript.


Using it with hardcoded strings is fine (e.x.
compression)


Using it with any type of variable,
especially user input, is very very evil.


Most notably, it is a security hole when it
comes to AJAX, JSON and Cross
-
Site
Scripting

Problem With AJAX: JSON


Most JSON(P) implementations end up
using eval() to convert returned string into
object.


var myObject = eval('(' + myJSONtext + ')');


Instead use a JSON Parser


Jquery, Prototype, ExtJS etc.


JSON
-
Sans
-
Eval
(
http://code.google.com/p/json
-
sans
-
eval/
)

AJAX, SEO and Event Handlers


JavaScript pseudo
-
protocol


Awful!


<a href="javascript:myFunction(‘link1.html)">Blah</a>


Pointless link


Bad!


<a href="#" onclick=“myFunction(‘link1.html’); return false;">Blah</a>


Using the DOM


Better.


<a href=“link1.html” onclick=“myFunction(this.getAttribute(‘href’)); return
false;”>Blah</a>


No inline JavaScript


Best!


<a href=“link1.html” class=“link”>Blah</a>


<script>


$(“.link”).click(function () { myFunction(this.getAttribute(‘href’)); });

</script>

Event Delegation


What is wrong with this:

<table id=“myTable”>


<tr><td id=“myCol0” onclick=“myFunction(0);”>blah</td></tr>


<tr><td id=“myCol1” onclick=“myFunction(1);”>blah</td></tr>


<tr><td id=“myCol2” onclick=“myFunction(2);”>blah</td></tr>





<tr><td id=“myCol100” onclick=“myFunction(100);”>blah</td></tr>

</table>


<script>


function myFunction(n) {



element = document.getElementById(“myCol” + n);



// DO SOMETHING WITH THE CELL


}

</script>

Event Delegation


What is wrong with this:

<table id=“myTable”>


<tr><td id=“myCol0”
onclick=“myFunction(0);”
>blah</td></tr>


<tr><td id=“myCol1”
onclick=“myFunction(1);”
>blah</td></tr>


<tr><td id=“myCol2”
onclick=“myFunction(2);”
>blah</td></tr>





<tr><td id=“myCol100”
onclick=“myFunction(100);”
>blah</td></tr>

</table>


<script>


function myFunction(n) {



element = document.getElementById(“myCol” + n);



// DO SOMETHING WITH THE CELL


}

</script>


Large number of event handlers = performance issues


DOM Updates require reattaching of event handlers

Event Delegation cont.


We can fix things by using event delegation:


<table id=“myTable”
onclick=“myFunction(e);”
>blah</td></tr>


<tr><td id=“myCol1”>blah</td></tr>


<tr><td id=“myCol2”>blah</td></tr>





<tr><td id=“myCol100”>blah</td></tr>

</table>


<script>


function getEventTarget(e) {



e = e || window.event;



return e.target || e.srcElement;


}


function myFunction(e) {



var element = getEventTarget(e);



if(element.tagName.toLowerCase() === 'td') {




// DO SOMETHING WITH THE CELL



}


}

<script>


Code Styling

Code Styling


The Semicolon


Required Blocks


Namespaces


Code on Bottom


External Scripts


Everything on DOM Ready



JavaScript Tools


JSLint
(
http://www.jslint.com
)


ECMAScript
(
http://www.ecmascript.org
)


JavaScript Compressor
(
http://javascriptcompressor.com
)


JSON
(
http://www.json.org
)


JQuery
(
http://jquery.com
)


FireBug
(
http://getfirebug.com
)

Attributions


All artwork scraped from the internet web
comic The Oatmeal




http://www.theoatmeal.com



The RCSB PDB


the place paying me
while I give this presentation!




http://www.rcsb.org