# 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
```shell
$ 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
```javascript
// 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
```javascript
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
```javascript
add(5, 10); // return 15, but not print
console.log(multiply(5, 10)); // print 50
```
Pass Parameter
```javascript
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
```javascript
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
```javascript
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
```javascript
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
```javascript
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
```javascript
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
```javascript
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
```javascript
(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 `{}`
```json
{
"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**
```shell
$ node -v
v5.8.0
$ node myScript.js
```
### Node Package Manager
https://www.npmjs.com
**Usage**
```shell
$ npm -v
3.8.1
$ npm install -g browserify
```
### JS Module
JavaScript module in two formats
**AMD**
```javascript
// export module
define(['jquery'] , function ($) {
return function () {};
});
```
```javascript
// import module
require(['jquery'], function($) {
$('body').html('<h1>Hello world!</h1>');
});
```
Implement: [Require.js](http://requirejs.org)
**CommonJS**
```javascript
// export module
module.exports = $;
```
```javascript
// import module
var $ = require('jquery');
```
Implement: [Node.js](https://nodejs.org/en/)
Example of CommonJS
`getRandomInt.js`
```javascript
function getRandomInt() {
return Math.floor(Math.random() * 100);
}
module.exports = getRandomInt;
```
`operation.js`
```javascript
function add(a, b) { return a + b; }
var multiply = function(a, b) { return a * b; }
module.exports = {
add: add,
multiply: multiply
};
```
`myScript.js`
```javascript
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/)
```javascript
// 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
```shell
$ npm install react react-dom babelify babel-preset-react moment
```
Bundle Main File
```shell
$ 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
```javascript
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
```javascript
var TimeNow = React.createClass(timeNow);
ReactDOM.render(<TimeNow />, document.getElementById('time'));
```