Javascript 101
Javascript 101
0 1
slides-clermontjs-js101
My slides for ClermontJS #1On 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
--- ## invar 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