Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
http://nextflow.in.th/mean-stack-training-workshop/
Node JS กันสบายๆ
โค้ชพล
www.nextflow.in.th
http://nextflow.in.th/mean-stack-training-workshop/
วันนี้
• จุดประสงค์ของเทคโนโลยี Node JS
• การใช้งาน Node JS ในรูปแบบต่า...
http://nextflow.in.th/mean-stack-training-workshop/
จุดประสงค์ของ
Node JS
http://nextflow.in.th/mean-stack-training-workshop/
http://nextflow.in.th/mean-stack-training-workshop/
2 ขีดจำกัดของ
Javascript
http://nextflow.in.th/mean-stack-training-workshop/
1. ขอบเขตของ
Javascript
http://nextflow.in.th/mean-stack-training-workshop/
HTML Javascript
http://nextflow.in.th/mean-stack-training-workshop/
getElementById(“menu”)
<div id=“menu”>
http://nextflow.in.th/mean-stack-training-workshop/
JQuery
Angular JS
http://nextflow.in.th/mean-stack-training-workshop/
Client Server
http://nextflow.in.th/mean-stack-training-workshop/
Javascript
ทำงานได้บนเว็บเบราเซอร์
เท่านั้น!
http://nextflow.in.th/mean-stack-training-workshop/
2. การนำ Javascript ไปใช้งาน
http://nextflow.in.th/mean-stack-training-workshop/
// a.js
var name = “Pon”;
// b.js
var name = “Peter”;
console.log(name);
http://nextflow.in.th/mean-stack-training-workshop/
Javascript
ก็เป็นแค่ Script!
http://nextflow.in.th/mean-stack-training-workshop/
2 ขีดจำกัดของ Javascript
• ทำงานได้แค่บน Web Browser
• เป็นภาษาพื้นๆ ไม...
http://nextflow.in.th/mean-stack-training-workshop/
http://nextflow.in.th/mean-stack-training-workshop/
1. Javascript
ที่ทำงานนอก
Web browser
http://nextflow.in.th/mean-stack-training-workshop/
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Node CLI & Chrome Browser
http://nextflow.in.th/mean-stack-training-workshop/
2. Javascript as a module
http://nextflow.in.th/mean-stack-training-workshop/
ModuleApp
Module
Module
http://nextflow.in.th/mean-stack-training-workshop/
Node Module
http://nextflow.in.th/mean-stack-training-workshop/
Node Module
• วิธีการเรียกใช้ Module
• วิธีการสร้าง Module
• วิธีติดตั้...
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Node CLI
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
node <javascript file>
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Invoke a javascript file in node CLI
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
var module = require(…);
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
// manU.js
= require(‘./manU’);
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Require JS file as module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
// team/liverpool.js
= require(‘./team/liverpool...
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Require JS file in sub folder
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
// team/index.js
= require(‘./team’);
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Require folder as module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการเรียกใช้ Module
// ‘os’ module
= require(‘os’);
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Require core module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีการสร้าง Module
http://nextflow.in.th/mean-stack-training-workshop/
.property
.function()
App Require(…)
http://nextflow.in.th/mean-stack-training-workshop/
exports
http://nextflow.in.th/mean-stack-training-workshop/
exports
exports.name = “Pon”;
http://nextflow.in.th/mean-stack-training-workshop/
exports
exports.name = “Pon”;
exports.yeah = function(){
…
}
http://nextflow.in.th/mean-stack-training-workshop/
module
exports.p
exports.f()App Require(…)
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
Exports in Javascript module (x2)
http://nextflow.in.th/mean-stack-training-workshop/
folderindex.jsApp Require(‘/folder’)
http://nextflow.in.th/mean-stack-training-workshop/
Let’s do it!
index.js in a folder
http://nextflow.in.th/mean-stack-training-workshop/
moduleApp Require(…)
http://nextflow.in.th/mean-stack-training-workshop/
moduleApp
Require(…)
{Object}
http://nextflow.in.th/mean-stack-training-workshop/
สร้าง Node Module
แบบที่ไม่ใช่ Object
http://nextflow.in.th/mean-stack-training-workshop/
require(…);
http://nextflow.in.th/mean-stack-training-workshop/
require(…)(‘server’);
http://nextflow.in.th/mean-stack-training-workshop/
require(…)(‘server);
var a = WalkingDead(‘Rick’);
http://nextflow.in.th/mean-stack-training-workshop/
module.exports = …
http://nextflow.in.th/mean-stack-training-workshop/
module.exports =
function(){ }
http://nextflow.in.th/mean-stack-training-workshop/
module.exports = []
http://nextflow.in.th/mean-stack-training-workshop/
module.exports = {…}
http://nextflow.in.th/mean-stack-training-workshop/
3. วิธีติดตั้ง และเผยแพร่
Module
http://nextflow.in.th/mean-stack-training-workshop/
วิธีติดตั้ง และเผยแพร่ Module
• คำสั่งสร้าง npm init
• คำสั่งติดตั้ง np...
http://nextflow.in.th/mean-stack-training-workshop/
คำสั่งสร้าง npm init
http://nextflow.in.th/mean-stack-training-workshop/
package.json
http://nextflow.in.th/mean-stack-training-workshop/
package.json
• name, version, description
• ชื่อ, เวอร์ชั่น module, และ...
http://nextflow.in.th/mean-stack-training-workshop/
dependencies
http://nextflow.in.th/mean-stack-training-workshop/
คำสั่งติดตั้ง npm install
http://nextflow.in.th/mean-stack-training-workshop/
คำสั่งเผยแพร่ npm publish
http://nextflow.in.th/mean-stack-training-workshop/
Node JS กันสบายๆ
โค้ชพล
www.nextflow.in.th
Upcoming SlideShare
Loading in …5
×

เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น

19,532 views

Published on

ในการอบรม MEAN Stack Workshop ของโค้ชพล จะมีการใช้ Node JS เป็นแกนหลัก เนื้อหาส่วนหนึ่งขอแชร์ไว้ให้คุณที่สนใจ ลองศึกษาดูได้ครับ สนใจจัดอบรมแบบเข้าใจถึงแก่น ใช้งานได้จริง ติดต่อ 083-071-3373
http://www.nextflow.in.th/mean-stack-training-workshop/

Published in: Technology

เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น

  1. 1. http://nextflow.in.th/mean-stack-training-workshop/ Node JS กันสบายๆ โค้ชพล www.nextflow.in.th
  2. 2. http://nextflow.in.th/mean-stack-training-workshop/ วันนี้ • จุดประสงค์ของเทคโนโลยี Node JS • การใช้งาน Node JS ในรูปแบบต่างๆ • การติดตั้ง และเผยแพร่ Node Module
  3. 3. http://nextflow.in.th/mean-stack-training-workshop/ จุดประสงค์ของ Node JS
  4. 4. http://nextflow.in.th/mean-stack-training-workshop/
  5. 5. http://nextflow.in.th/mean-stack-training-workshop/ 2 ขีดจำกัดของ Javascript
  6. 6. http://nextflow.in.th/mean-stack-training-workshop/ 1. ขอบเขตของ Javascript
  7. 7. http://nextflow.in.th/mean-stack-training-workshop/ HTML Javascript
  8. 8. http://nextflow.in.th/mean-stack-training-workshop/ getElementById(“menu”) <div id=“menu”>
  9. 9. http://nextflow.in.th/mean-stack-training-workshop/ JQuery Angular JS
  10. 10. http://nextflow.in.th/mean-stack-training-workshop/ Client Server
  11. 11. http://nextflow.in.th/mean-stack-training-workshop/ Javascript ทำงานได้บนเว็บเบราเซอร์ เท่านั้น!
  12. 12. http://nextflow.in.th/mean-stack-training-workshop/ 2. การนำ Javascript ไปใช้งาน
  13. 13. http://nextflow.in.th/mean-stack-training-workshop/ // a.js var name = “Pon”; // b.js var name = “Peter”; console.log(name);
  14. 14. http://nextflow.in.th/mean-stack-training-workshop/ Javascript ก็เป็นแค่ Script!
  15. 15. http://nextflow.in.th/mean-stack-training-workshop/ 2 ขีดจำกัดของ Javascript • ทำงานได้แค่บน Web Browser • เป็นภาษาพื้นๆ ไม่มีโครงสร้างเพื่อใช้งานแบบจริงจัง
  16. 16. http://nextflow.in.th/mean-stack-training-workshop/
  17. 17. http://nextflow.in.th/mean-stack-training-workshop/ 1. Javascript ที่ทำงานนอก Web browser
  18. 18. http://nextflow.in.th/mean-stack-training-workshop/
  19. 19. http://nextflow.in.th/mean-stack-training-workshop/ Let’s do it! Node CLI & Chrome Browser
  20. 20. http://nextflow.in.th/mean-stack-training-workshop/ 2. Javascript as a module
  21. 21. http://nextflow.in.th/mean-stack-training-workshop/ ModuleApp Module Module
  22. 22. http://nextflow.in.th/mean-stack-training-workshop/ Node Module
  23. 23. http://nextflow.in.th/mean-stack-training-workshop/ Node Module • วิธีการเรียกใช้ Module • วิธีการสร้าง Module • วิธีติดตั้ง และเผยแพร่ Module
  24. 24. http://nextflow.in.th/mean-stack-training-workshop/ วิธีการเรียกใช้ Node CLI
  25. 25. http://nextflow.in.th/mean-stack-training-workshop/ วิธีการเรียกใช้ Module node <javascript file>
  26. 26. http://nextflow.in.th/mean-stack-training-workshop/ Let’s do it! Invoke a javascript file in node CLI
  27. 27. http://nextflow.in.th/mean-stack-training-workshop/ วิธีการเรียกใช้ Module
  28. 28. http://nextflow.in.th/mean-stack-training-workshop/ วิธีการเรียกใช้ Module var module = require(…);
  29. 29. http://nextflow.in.th/mean-stack-training-workshop/ วิธีการเรียกใช้ Module // manU.js = require(‘./manU’);
  30. 30. http://nextflow.in.th/mean-stack-training-workshop/ Let’s do it! Require JS file as module
  31. 31. http://nextflow.in.th/mean-stack-training-workshop/ วิธีการเรียกใช้ Module // team/liverpool.js = require(‘./team/liverpool’);
  32. 32. http://nextflow.in.th/mean-stack-training-workshop/ Let’s do it! Require JS file in sub folder
  33. 33. http://nextflow.in.th/mean-stack-training-workshop/ วิธีการเรียกใช้ Module // team/index.js = require(‘./team’);
  34. 34. http://nextflow.in.th/mean-stack-training-workshop/ Let’s do it! Require folder as module
  35. 35. http://nextflow.in.th/mean-stack-training-workshop/ วิธีการเรียกใช้ Module // ‘os’ module = require(‘os’);
  36. 36. http://nextflow.in.th/mean-stack-training-workshop/ Let’s do it! Require core module
  37. 37. http://nextflow.in.th/mean-stack-training-workshop/ วิธีการสร้าง Module
  38. 38. http://nextflow.in.th/mean-stack-training-workshop/ .property .function() App Require(…)
  39. 39. http://nextflow.in.th/mean-stack-training-workshop/ exports
  40. 40. http://nextflow.in.th/mean-stack-training-workshop/ exports exports.name = “Pon”;
  41. 41. http://nextflow.in.th/mean-stack-training-workshop/ exports exports.name = “Pon”; exports.yeah = function(){ … }
  42. 42. http://nextflow.in.th/mean-stack-training-workshop/ module exports.p exports.f()App Require(…)
  43. 43. http://nextflow.in.th/mean-stack-training-workshop/ Let’s do it! Exports in Javascript module (x2)
  44. 44. http://nextflow.in.th/mean-stack-training-workshop/ folderindex.jsApp Require(‘/folder’)
  45. 45. http://nextflow.in.th/mean-stack-training-workshop/ Let’s do it! index.js in a folder
  46. 46. http://nextflow.in.th/mean-stack-training-workshop/ moduleApp Require(…)
  47. 47. http://nextflow.in.th/mean-stack-training-workshop/ moduleApp Require(…) {Object}
  48. 48. http://nextflow.in.th/mean-stack-training-workshop/ สร้าง Node Module แบบที่ไม่ใช่ Object
  49. 49. http://nextflow.in.th/mean-stack-training-workshop/ require(…);
  50. 50. http://nextflow.in.th/mean-stack-training-workshop/ require(…)(‘server’);
  51. 51. http://nextflow.in.th/mean-stack-training-workshop/ require(…)(‘server); var a = WalkingDead(‘Rick’);
  52. 52. http://nextflow.in.th/mean-stack-training-workshop/ module.exports = …
  53. 53. http://nextflow.in.th/mean-stack-training-workshop/ module.exports = function(){ }
  54. 54. http://nextflow.in.th/mean-stack-training-workshop/ module.exports = []
  55. 55. http://nextflow.in.th/mean-stack-training-workshop/ module.exports = {…}
  56. 56. http://nextflow.in.th/mean-stack-training-workshop/ 3. วิธีติดตั้ง และเผยแพร่ Module
  57. 57. http://nextflow.in.th/mean-stack-training-workshop/ วิธีติดตั้ง และเผยแพร่ Module • คำสั่งสร้าง npm init • คำสั่งติดตั้ง npm install • คำสั่งเผยแพร่ npm publish
  58. 58. http://nextflow.in.th/mean-stack-training-workshop/ คำสั่งสร้าง npm init
  59. 59. http://nextflow.in.th/mean-stack-training-workshop/ package.json
  60. 60. http://nextflow.in.th/mean-stack-training-workshop/ package.json • name, version, description • ชื่อ, เวอร์ชั่น module, และรายละเอียด • main • ไฟล์เริ่มต้นเมื่อเกิดการเรียก module • author • รายละเอียดผู้สร้าง • dependencies • รายชื่อ Module ที่ถูกเรียกใช้
  61. 61. http://nextflow.in.th/mean-stack-training-workshop/ dependencies
  62. 62. http://nextflow.in.th/mean-stack-training-workshop/ คำสั่งติดตั้ง npm install
  63. 63. http://nextflow.in.th/mean-stack-training-workshop/ คำสั่งเผยแพร่ npm publish
  64. 64. http://nextflow.in.th/mean-stack-training-workshop/ Node JS กันสบายๆ โค้ชพล www.nextflow.in.th

×