1. CSCI 3100 Tutorial 3 JavaScript & Node.js Presented by SU Yuxin Department of Computer Science and Engineering The Chinese University of Hong Kong 1

2. Outline Introduction to JavaScript JavaScript Basic Advanced Features of JavaScript Introduction to Node.js A Secret… 2

3. Do you know JavaScript? JavaJavaScript 3

4. What is JavaScript Script Language Shell C# Dynamic Type Python Java Objected- oriented C++ C 4 Unique Feature:

5. Where to use JavaScript The whole picture: browser CSS HTML HTML5 JavaScriptServer Side modify/create/delete data transmit 5 PHP Rails on Ruby JavaScript ???

6. JavaScript Basic Output Variable & Arithmetic Object & Array Function IF & Loop statement 6

7. JavaScript Basic Output No printf()! Use console.log() / alert() instead. 7

8. JavaScript Basic Variable & Arithmetic 8 String can be in single or double quotes Number can be integer or floating point If there is no initial value, the value is undefined String concatenation Integer Arithmetic

9. JavaScript Basic Object 9 You can use any property without declaration. You can also treat function as a property of the object, and assign it like this.

10. JavaScript Basic Array 10 Create an array Initialization Access an array Use it as a dictionary Multi-type Build-in functions and properties

11. JavaScript Basic Function 11 Declaration Argument & Return value

12. JavaScript Basic IF & Loop statement 12 IF statement FOR Loop WHILE Loop Note: Anything defined will be treat as true. Undefined will be treat as false.

13. ADVANCED FEATURES 13

14. Regular Expression First-class citizen in JavaScript Create: var pattern = /g$/; var pattern = new RegExp(“g$"); Use: "Software Engineering".search(pattern); text.replace(/javascript/gi, "JavaScript"); "1 plus 2 equals 3".match(/\d+/g); "123,456,789".split(","); 14 Any expression ended with letter ‘g’

15. Prototype function Range(from, to) { this.from = from; this.to = to; } Range.prototype = { includes: function(x) { return this.from true: 2 is in the range r.foreach(console.log); // Prints 1 2 3 console.log(r); // Prints (1...3) 15 It looks like the definition of class!

16. Callback Function function main(callback) { alert("I am main function"); alert("Invoke callback function.."); callback(); } function b(){ alert("I am callback function: b"); } function c(){ alert("I am callback function: c"); } function test() { main(b); main(c); } Function is passed as a parameter User-defined behavior at the end of a function or “event”. 16

17. Advanced Array Methods Other similar functions: – map() – filter() – every() – some() 17 //Increase Each element by 1 data.forEach(function(v, i, a) { a[i] = v + 1; }); var data = [1,2,3,4,5]; //compute the sum of the array elements var sum = 0; data.forEach(function(value) { sum += value; }); console.log("The sum is " + sum.toString());

18. Asynchronous // Synchronously read a file. Pass an encoding to get text instead of bytes. var text = fs.readFileSync("config.json", "utf8"); // Asynchronously read a binary file. Pass a function to get the data fs.readFile("image.png", function(err, buffer) { if (err) throw err; // If anything went wrong process(buffer); // File contents are in buffer }); 18

19. INTRODUCTION TO NODE.JS 19

20. Where to run my code? 20

21. Where to run my code?(con’d) Chrome: Node: $ node test.js 21

22. IDE: Jetbrains WebStorm 22 http://www.jetbrains.com/webstorm/ You can register a student account with your cuhk.edu.hk email

23. What the Node.js is designed for? 23

24. Installation and HTTP setup Install Node.js from http://nodejs.org/download/http://nodejs.org/download/ Use it to create a HTTP server: – 1. In cmd of Windows, type: npm install http-server –g If you have a HTTP proxy, type this first: npm config set proxy http://proxy.company.com:porthttp://proxy.company.com:port – 2. Start HTTP server: http-server /path The path is the folder you want to share in web Your folder must have some files before it works, i.e. index.html (put ‘it works’ in it) – 3. Open http://localhost:8080/ in your browser 24

25. Modules 25 https://www.npmjs.com/

26. Event-based Design var events = require("events"); var emitter = new events.EventEmitter(); var username = "colin"; var password = "password"; // an event listener emitter.on("userAdded", function(username, password) { console.log("Added user " + username); }); // add the user // then emit an event emitter.emit("userAdded", username, password); 26

27. More details will coming at further tutorial 27

28. Finally, the secret is… If you think JavaScript is powerful… But, – Too difficult to learn? – Too complex to write? – Too ugly to read? 28 Reference: Google it!