# NTUOSC JavaScript

20160311 [<i class="fa fa-github"></i> Elantris](https://github.com/Elantris)
Note: https://hackmd.io/s/N1ERJm5Ux

###### tags: `2016` `ntuosc` `javascript`

## Setup

**Browser**

* Apple Safari
* Google Chrome
* Mozilla Firefox

**Editor**

* Notepad++
* Github Atom
* Sublime Text
* Vim
* Emacs

**Node.js**

https://nodejs.org

Create a folder and install node modules

$ npm install -g browserify
$ mkdir myProject
$ cd myProject
$ npm install react react-dom babelify babel-preset-react moment

Packages

* `react`
* `react-dom`
* `babelify`
* `babel-preset-react`
* `moment`

## Basic

### Variable

* Undefined
* Boolean
* Number
* String
* Array
* Object
* Function

// Undefined
var bool = true; // Boolean
var num = 5; // Number
var str = 'this is a "string"'; // String
var ary = [1, 3, 'str', ['another', 'array'], 312]; // Array
var obj = { // Object
    a: 'Apple',
    b: 'Banana',
    c: 1000,
    d: ['an', 'array'],
    o: { r: 'recursive' }
};

### Function

Define Function

function add(a, b) { // parameter
    var sum; // local variable
    sum = a + b; /* do something ... */
    return sum; // return or not
}

var multiply = function(a, b) { // parameter
    var p; // local variable
    p = a * b; /* do something ... */
    return p; // return or not
}

Call Function

add(5, 10); // return 15, but not print
console.log(multiply(5, 10)); // print 50

Pass Parameter

var result = add(multiply(4, 6), add(5, 10)); // 24 + 15

console.log(result); // 39

### Object

Everything in JavaScript is **Object**.

* Object
- Boolean
- Number
- String
- Function
- (Array)

All Types of variables extend `Object`

Use `typeof` to check the type of object

console.log(typeof true); // 'boolean'
console.log(typeof 345); // 'number'
console.log(typeof 'feizhai'); // 'string'
console.log(typeof setTimeout); // 'function'
console.log(typeof [1, 'a', 3, 'c']); // 'object'
console.log(typeof { a: 'apple' }); // 'object'

Define an object

var feizhai = {
    name: 'Victor',
    age: 19,
    height: 170,
    weight: 'very fat',
    languages: ['C/C++', 'Python', 'PHP', 'HTML/CSS', 'JavaScript'],
    coding: function(t) {
        console.log('The ' + this.weight + ' ' + this.name + ' starts coding!');
        console.log('He is using "%s" to finish the project.', this.languages[t]);
    },
    sleep: function() {
        console.log('The ' + this.weight + ' ' + this.name + ' is sleeping!');
        console.log('Oh, no! He will not wake up until the end of the class.');
    },
    gotoSchool: function() {
        this.coding(2);
        this.sleep();
    }
};

Get values of objects

feizhai.name // 'Victor'
feizhai.height // 170
feizhai['weight'] // 'very fat'
feizhai.language[2] // 'Python'

feizhai.gotoSchool();
// The very fat Victor starts coding!
// He is using "PHP" to finish the project.
// The very fat Victor is sleeping!
// Oh, no! He will not wake up until the end of the class.

Iterate an object

var ary = ['alpha', 'bravo', 'charlie'];
for (var i in ary) console.log(i + ': ' + ary[i]);

var obj = {
    'a': 'alpha',
    'b': 'bravo',
    'c': 'charlie'
};
for (var i in obj) console.log(i + ': ' + obj[i]);

output

0: alpha
1: bravo
2: charlie
a: alpha
b: bravo
c: charlie

Pass a Function object as parameters

function getRandomInt() {
    return Math.floor(Math.random() * 100);
}

function getRandomChar() {
    var c = 'qwertyuiopasdfghjklzxcvbnm';
    return c[getRandomInt(0, c.length)];
}

function display(words, rand) {
    console.log(words + ' ' + rand());
}

display('Today\'s lucky number is', getRandomInt);
display('I want a random alphabet:', getRandomChar);

Anonymous Function

function display(words, rand) {
    console.log(words + ' ' + rand());
}

display('Let\'s have a function without name:', function() {
    var output = 'Hi, I am an anonymous function!';
    return output;
});

Define an anonymous function and call immediately

(function() {
    console.log('I am an anonymous function, too.');
    console.log('I will do something immediately.');
})();

### JSON

JavaScript Object Notation

* Boolean `true` or `false`
* Number `123`
* String `""`
* Array `[]`
* Object `{}`

{
    "name": "Victor",
    "age": 19,
    "single": true,
    "language": ["C/C++", "Python", "PHP", "HTML/CSS", "JavaScript"],
    "race": "Feizhai",
    "course": {
        "Open System Software": {
            "credit": 3,
            "time": ["TUE 2", "TUE 3", "TUE 4"]
        },
        "Algorithm": {
            "credit": 3,
            "time": ["TUE 7", "TUE 8", "TUE 9"]
        },
        "Introduction to Information Management": {
            "credit": 3,
            "time": ["WED 2", "WED 3", "WED 4"]
        },
        "Theory of Computing": {
            "credit": 3,
            "time": ["WED 7", "WED 8", "WED 9"]
        },
        "Operations Research": {
            "credit": 3,
            "time": ["THR 2", "THR 3", "THR 4"]
        }
    }
}

## Node

https://nodejs.org

**Usage**

$ node -v
v5.8.0
$ node myScript.js

### Node Package Manager

https://www.npmjs.com

**Usage**

$ npm -v
3.8.1
$ npm install -g browserify

### JS Module

JavaScript module in two formats

**AMD**

// export module
define(['jquery'] , function ($) {
    return function () {};
});

// import module
require(['jquery'], function($) {
    $('body').html('<h1>Hello world!</h1>');
});

Implement: [Require.js](http://requirejs.org)

**CommonJS**

// export module
module.exports = $;

// import module
var $ = require('jquery');

Implement: [Node.js](https://nodejs.org/en/)

Example of CommonJS

`getRandomInt.js`

function getRandomInt() {
    return Math.floor(Math.random() * 100);
}

module.exports = getRandomInt;

`operation.js`

function add(a, b) { return a + b; }

var multiply = function(a, b) { return a * b; }

module.exports = {
    add: add,
    multiply: multiply
};

`myScript.js`

var getRandomInt = require('./getRandomInt.js');
var operation = require('./operation.js');

var a = getRandomInt();
var b = getRandomInt();

var sum = operation.add(a, b);
var product = operation.multiply(a, b);

console.log(a + ' ' + b);
console.log('a + b = ' + sum);
console.log('a * b = ' + product);

## React

[Official Site](http://facebook.github.io/react/)

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

File Type: JSX ([JSX in Depth](http://facebook.github.io/react/docs/jsx-in-depth.html))

JavaScript with XML

**Use npm**

Install Packages

$ npm install react react-dom babelify babel-preset-react moment

Bundle Main File

$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

### Component

[Docs](http://facebook.github.io/react/docs/component-specs.html)

**Component Specifications**

* getInitialState: `function`
* getDefaultProps: `function`
* propTypes: `object`
* mixins: `array`
* statics: `object`
* render: `function`

**Lifecycle Methods**

* Mount
- componentWillMount
- componentDidMount
* Update
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
* Unmount
- componentWillUnmount

Example

var React = require('react');
var ReactDOM = require('react-dom');
var moment = require('moment');

var timeNow = {
    getInitialState: function() {
        return {
            today: moment(),
            index: 0,
            format: ['', 'MMMM Do YYYY, h:mm:ss a', 'dddd', "MMM Do YY", 'YYYY [escaped] YYYY'],
            show: ''
        };
    },
    componentDidMount: function() {
        this.setState({ len: this.state.format.length, show: this.state.today.format() });
    },
    handleHover: function() {
        var index = (this.state.index + 1) % this.state.len;
        var show = this.state.today.format(this.state.format[index]);
        this.setState({ index: index, show: show });
    },
    render: function() {
        return (<div onMouseOver={this.handleHover}>Today is {this.state.show}</div>);
    }
};

var TimeNow = React.createClass(timeNow);

ReactDOM.render(<TimeNow />, document.getElementById('time'));

### Class

var TimeNow = React.createClass(timeNow);

ReactDOM.render(<TimeNow />, document.getElementById('time'));