579 views
# 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')); ```