Javascript 101



Javascript 101

0 1


slides-clermontjs-js101

My slides for ClermontJS #1

On Github themouette / slides-clermontjs-js101

Javascript 101

By Julien Muetton / @themouette

NaN === NaN; // false
3/"a"; // NaN
(-Number.MAX_VALUE) * 2 === Number.NEGATIVE_INFINITY;
Number.isNaN(Number.NaN);
--- ## String ``` javascript "Patch my boat with chewing gum." "This is the first line\nAnd this is the second" "A newline character is written like \"\\n\"." ``` Concatenate using `+`
"The cat" + " ate my" + " source code"
[String Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) --- ## Function
function add(a, b) {
    return a + b;
}
add(1, 2);

Functions are objects too.

var add = function (a, b) {
    return a + b;
}
add(1, 2);
[Function Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function) --- ## Array JSON way:
var a  = [1, 2], b;

a.push(3);
b = a.concat([4, 5]);
b.join(', ');
[Array Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and [Array extra (since "1.6")](https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6#Array_extras) --- ## Object JSON way: ``` javascript var cat = {colour: "grey", name: "Spot", size: 46}; ``` Constructor way: ``` javascript var zombie = new Object(); ``` [Object Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) --- ## Accessing properties ``` javascript var cat = {colour: "grey", name: "Spot", size: 46}; cat.colour; //grey cat['name']; //Spot ``` **`toString()`** method
var cat = {colour: "grey", name: "Spot", size: 46};
cat.toString();
--- ## Setting properties
var cat = {colour: "grey", name: "Spot", size: 46};

cat.size = 47;
console.log(cat.size);

delete cat.size;
console.log(cat.size);
console.log(cat);

Open your browser console to see examples in action.

--- ## RegExp
/^a\w+$/.test('abricot');
"peach".match(/(\w+)a(\w+)$/);
(/^a\w+$/i).test('Abricot');
[RegExp reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) --- ## Date [Date reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) --- ## Bonus: `typeof` and `instanceof` [instanceof reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof) [typeof reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof) --- ## Bonus: equality
null == undefined
null === undefined
0 == false
0 === false
5 == "5"
5 === "5"
var a = {};
a == "[object Object]"
var a = {};
a === "[object Object]"

type conversion

identity

Must read article about Javascript [equality](http://rayfd.me/2007/03/18/really-understanding-javascripts-equality-and-identity/)

--- ## API References

[Documentation for all global objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)

--- --- JSON ==== --- ## Example ``` json { "foo": "bar", "baz": [ 1, true, null ], "number": 1.23e4 } ```

[JSON Standard](http://www.json.org/) and [JSONlint](http://jsonlint.com/)

--- --- Control Flow ============ [All available statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) --- ## if, else ``` javascript if (typeof a === "undefined") { // a is undefined } else if (a instanceof Number) { // a is a Number } else { throw new Error('Hey, you missed the contract !') } ``` --- ## Switch ``` javascript switch(action) { case 'draw': drawit(); break; case 'eat': eatit(); break; default: donothing(); } ```

Used for multiple branches based on a number or string

--- ## in
var obj = {
    foo: null
};

"foo" in obj;

Used to check existance of a variable

--- ## try, catch, finally, throw ``` javascript try { foo.bar(); } catch (e) { if (e instanceof EvalError) { alert(e.name + ": " + e.message); } else if (e instanceof RangeError) { alert(e.name + ": " + e.message); } } finally { foo.baz(); } ``` [try...catch reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) --- # Error types All the following errors should be available: `Error`, `EvalError`, `RangeError`, `ReferenceError`, `SyntaxError`, `TypeError`, `URIError`

[All errors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Description)

--- ## while, do {} while

var pancakes = [];
function is_empty(stack) {
    return !stack.length;
}

while (!is_empty(pancakes)) {
    eat_one(pancakes);
}
do {
   i += 1;
   document.write(i);
} while (i 
[do...while](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while) and [while reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while) --- ## for ``` javascript for (var i = 0; i [for...in reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) and [Why use hasOwnProperty](http://phrogz.net/death-to-hasownproperty) Note: Problems occurs when Globals (Object, Array) are extended for instance. --- ## with Do not use with.