├── .gitignore
├── BeautyBot
├── app.js
├── config
│ └── default.json
└── package.json
├── BeautyTab.zip
├── BeautyTab
├── _locales
│ └── en
│ │ └── messages.json
├── icons
│ ├── icon128.png
│ ├── icon16.png
│ ├── icon19.png
│ └── icon48.png
├── manifest.json
└── src
│ ├── bg
│ ├── background.html
│ └── background.js
│ ├── browser_action
│ └── browser_action.html
│ ├── options
│ └── index.html
│ └── override
│ ├── main.js
│ └── override.html
├── CountdownTimer
└── index.html
├── CurrencyExchange
├── index.html
└── main.js
├── MosquitoFight
├── images
│ └── mosquito.png
├── index.html
└── main.css
├── OpenData
├── index.html
└── loading.gif
├── PTTCrawler
├── app.js
├── package.json
└── results.json
├── QA
└── mosquito.html
├── README.md
├── ReactTodo
└── index.html
├── SimepleJS
└── index.html
├── SimplejQuery
├── 1.jpg
├── 2.jpg
├── 3.jpg
├── index.html
└── jquery.bxslider
│ ├── LICENSE.md
│ ├── README.md
│ ├── images
│ ├── bx_loader.gif
│ └── controls.png
│ ├── jquery.bxslider.css
│ ├── jquery.bxslider.js
│ ├── jquery.bxslider.min.css
│ ├── jquery.bxslider.min.js
│ └── vendor
│ ├── jquery.easing.1.3.js
│ └── jquery.fitvids.js
├── SlideShow
├── 1.jpg
├── 2.jpg
├── 3.jpg
└── index.html
├── SocketChat
├── app.js
├── index.html
└── package.json
├── WifiMap
├── index.html
└── itw_tw.json
└── lectures
├── README.md
├── Unit01
└── examples
│ └── PokemonFight
│ ├── index.html
│ ├── main.css
│ └── main.js
├── Unit02
└── examples
│ └── SimpleJS
│ └── index.html
├── Unit03
└── examples
│ ├── example.json
│ ├── index.html
│ └── main.js
├── Unit06
└── examples
│ ├── CurrencyExchange
│ ├── index.html
│ └── main.js
│ └── MosquitoFight
│ ├── css
│ └── main.css
│ ├── images
│ └── mosquito.png
│ └── index.html
├── Unit07
└── examples
│ └── TodoJS
│ └── index.html
├── Unit08
├── README.md
└── examples
│ └── CountdownTimer
│ └── index.html
├── Unit09
├── README.md
└── examples
│ └── MosquitoFight
│ ├── css
│ └── main.css
│ ├── images
│ └── mosquito.png
│ └── index.html
├── Unit10
└── examples
│ └── SlideShow
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ └── index.html
├── Unit11
├── README.md
└── examples
│ └── OpenData
│ ├── index.html
│ └── loading.gif
├── Unit12
└── SimpleJQuery
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ ├── index.html
│ └── jquery.bxslider
│ ├── LICENSE.md
│ ├── README.md
│ ├── images
│ ├── bx_loader.gif
│ └── controls.png
│ ├── jquery.bxslider.css
│ ├── jquery.bxslider.js
│ ├── jquery.bxslider.min.css
│ ├── jquery.bxslider.min.js
│ └── vendor
│ ├── jquery.easing.1.3.js
│ └── jquery.fitvids.js
├── Unit13
└── examples
│ └── TodoJS
│ └── index.html
├── Unit14
├── README.md
└── examples
│ └── BeautyTab
│ ├── _locales
│ └── en
│ │ └── messages.json
│ ├── icons
│ ├── icon128.png
│ ├── icon16.png
│ ├── icon19.png
│ └── icon48.png
│ ├── manifest.json
│ └── src
│ ├── bg
│ ├── background.html
│ └── background.js
│ ├── options
│ └── index.html
│ └── override
│ ├── main.js
│ └── override.html
├── Unit15
└── README.md
├── Unit16
├── README.md
├── examples
│ └── node-irich
│ │ ├── 127.0.0.1
│ │ ├── app.js
│ │ ├── bin
│ │ └── www
│ │ ├── config
│ │ └── config.json
│ │ ├── models
│ │ ├── account.js
│ │ └── index.js
│ │ ├── package.json
│ │ ├── public
│ │ └── stylesheets
│ │ │ └── style.css
│ │ ├── routes
│ │ ├── accounts.js
│ │ └── index.js
│ │ └── views
│ │ ├── account.ejs
│ │ ├── create_account.ejs
│ │ ├── error.ejs
│ │ ├── index.ejs
│ │ └── update_account.ejs
└── node-irich
│ ├── 127.0.0.1
│ ├── app.js
│ ├── bin
│ └── www
│ ├── config
│ └── config.json
│ ├── models
│ ├── account.js
│ └── index.js
│ ├── package.json
│ ├── public
│ └── stylesheets
│ │ └── style.css
│ ├── routes
│ ├── accounts.js
│ └── index.js
│ └── views
│ ├── account.ejs
│ ├── create_account.ejs
│ ├── error.ejs
│ ├── index.ejs
│ └── update_account.ejs
├── Unit17
├── README.md
└── examples
│ └── socket-chat
│ ├── app.js
│ ├── index.html
│ ├── package-lock.json
│ └── package.json
├── Unit18
├── README.md
└── examples
│ └── BeautyBot
│ ├── app.js
│ ├── config
│ └── default.json
│ └── package.json
├── Unit20
└── README.md
├── Unit21
└── examples
│ ├── index.html
│ └── itw_tw.json
├── Unit22
└── examples
│ ├── app.js
│ ├── package.json
│ └── result.json
├── Unit23
├── ajax-node-irich
│ ├── .gitignore
│ ├── 127.0.0.1
│ ├── Profile
│ ├── app.js
│ ├── bin
│ │ └── www
│ ├── config
│ │ └── config.json
│ ├── migrations
│ │ └── 20170418152012-create-task.js
│ ├── models
│ │ ├── account.js
│ │ └── index.js
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── stylesheets
│ │ │ └── style.css
│ ├── routes
│ │ ├── accounts.js
│ │ ├── apiRoutes.js
│ │ └── index.js
│ └── views
│ │ ├── account.ejs
│ │ ├── create_account.ejs
│ │ ├── error.ejs
│ │ ├── index.ejs
│ │ └── update_account.ejs
└── examples
│ └── ajax-node-irich
│ ├── .gitignore
│ ├── 127.0.0.1
│ ├── Profile
│ ├── app.js
│ ├── bin
│ └── www
│ ├── config
│ └── config.json
│ ├── migrations
│ └── 20170418152012-create-task.js
│ ├── models
│ ├── account.js
│ └── index.js
│ ├── package.json
│ ├── public
│ └── stylesheets
│ │ └── style.css
│ ├── routes
│ ├── accounts.js
│ ├── apiRoutes.js
│ └── index.js
│ └── views
│ ├── account.ejs
│ ├── create_account.ejs
│ ├── error.ejs
│ ├── index.ejs
│ └── update_account.ejs
├── Unit24
└── examples
│ └── BeautyPlus
│ ├── .gitignore
│ ├── LICENSE.md
│ ├── README.md
│ ├── bootstrap.min.css
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── renderer.js
└── Unit25
└── examples
├── .bowerrc
├── .gitignore
└── ReactTodo
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 | electron-quick-start-darwin-x64
--------------------------------------------------------------------------------
/BeautyBot/app.js:
--------------------------------------------------------------------------------
1 | var config = require('config');
2 | var express = require('express');
3 | var request = require('request');
4 | var bodyParser = require('body-parser');
5 |
6 | var app = express();
7 |
8 | app.use(bodyParser.json());
9 |
10 | const PAGE_ACCESS_TOKEN = config.get('devConfig.pageAccessToken');
11 | const VERIFY_TOKEN = config.get('devConfig.verifyToken');
12 |
13 | app.get('/webhook', function(req, res) {
14 | if (req.query['hub.mode'] === 'subscribe' &&
15 | req.query['hub.verify_token'] === VERIFY_TOKEN) {
16 | console.log("Validating webhook");
17 | res.status(200).send(req.query['hub.challenge']);
18 | } else {
19 | console.error("Failed validation. Make sure the validation tokens match.");
20 | res.sendStatus(403);
21 | }
22 | });
23 |
24 | app.post('/webhook', function (req, res) {
25 | var data = req.body;
26 |
27 | // Make sure this is a page subscription
28 | if (data.object === 'page') {
29 |
30 | // Iterate over each entry - there may be multiple if batched
31 | data.entry.forEach(function(entry) {
32 | var pageID = entry.id;
33 | var timeOfEvent = entry.time;
34 |
35 | // Iterate over each messaging event
36 | entry.messaging.forEach(function(event) {
37 | if (event.message) {
38 | receivedMessage(event);
39 | } else {
40 | console.log("Webhook received unknown event: ", event);
41 | }
42 | });
43 | });
44 |
45 | // Assume all went well.
46 | //
47 | // You must send back a 200, within 20 seconds, to let us know
48 | // you've successfully received the callback. Otherwise, the request
49 | // will time out and we will keep trying to resend.
50 | res.sendStatus(200);
51 | }
52 | });
53 |
54 | function receivedMessage(event) {
55 | var senderID = event.sender.id;
56 | var recipientID = event.recipient.id;
57 | var timeOfMessage = event.timestamp;
58 | var message = event.message;
59 |
60 | console.log("Received message for user %d and page %d at %d with message:",
61 | senderID, recipientID, timeOfMessage);
62 | console.log(JSON.stringify(message));
63 |
64 | var messageId = message.mid;
65 |
66 | var messageText = message.text;
67 | var messageAttachments = message.attachments;
68 |
69 | if (messageText) {
70 |
71 | // If we receive a text message, check to see if it matches a keyword
72 | // and send back the example. Otherwise, just echo the text we received.
73 | switch (messageText) {
74 | case 'generic':
75 | sendGenericMessage(senderID);
76 | break;
77 |
78 | case '給我美圖':
79 | sendImageMessage(senderID);
80 | sendTextMessage(senderID, '美圖來了！請稍後！');
81 | break;
82 |
83 | default:
84 | sendTextMessage(senderID, messageText);
85 | }
86 | } else if (messageAttachments) {
87 | sendTextMessage(senderID, "Message with attachment received");
88 | }
89 | }
90 |
91 | function sendImageMessage(recipientId) {
92 | request({
93 | 'method': 'GET',
94 | 'uri': 'http://gank.io/api/data/%E7%A6%8F%E5%88%A9/100/1'
95 | }, function(error, response, body) {
96 | var data = JSON.parse(body);
97 | var index = Math.floor(Math.random() * data.results.length);
98 | var url = data.results[index].url;
99 | console.log('data', data);
100 | console.log('index', index);
101 | var messageData = {
102 | recipient: {
103 | id: recipientId
104 | },
105 | message: {
106 | attachment: {
107 | type: 'image',
108 | payload: {
109 | url: url
110 | }
111 | }
112 | }
113 | };
114 |
115 | callSendAPI(messageData);
116 |
117 | });
118 | }
119 |
120 | function sendTextMessage(recipientId, messageText) {
121 | var messageData = {
122 | recipient: {
123 | id: recipientId
124 | },
125 | message: {
126 | text: messageText
127 | }
128 | };
129 |
130 | callSendAPI(messageData);
131 | }
132 |
133 | function callSendAPI(messageData) {
134 | request({
135 | uri: 'https://graph.facebook.com/v2.6/me/messages',
136 | qs: { access_token: PAGE_ACCESS_TOKEN },
137 | method: 'POST',
138 | json: messageData
139 |
140 | }, function (error, response, body) {
141 | if (!error && response.statusCode == 200) {
142 | var recipientId = body.recipient_id;
143 | var messageId = body.message_id;
144 |
145 | console.log("Successfully sent generic message with id %s to recipient %s",
146 | messageId, recipientId);
147 | } else {
148 | console.error("Unable to send message.");
149 | console.error(response);
150 | console.error(error);
151 | }
152 | });
153 | }
154 |
155 | function sendGenericMessage(recipientId) {
156 | var messageData = {
157 | recipient: {
158 | id: recipientId
159 | },
160 | message: {
161 | attachment: {
162 | type: "template",
163 | payload: {
164 | template_type: "generic",
165 | elements: [{
166 | title: "rift",
167 | subtitle: "Next-generation virtual reality",
168 | item_url: "https://www.oculus.com/en-us/rift/",
169 | image_url: "http://messengerdemo.parseapp.com/img/rift.png",
170 | buttons: [{
171 | type: "web_url",
172 | url: "https://www.oculus.com/en-us/rift/",
173 | title: "Open Web URL"
174 | }, {
175 | type: "postback",
176 | title: "Call Postback",
177 | payload: "Payload for first bubble",
178 | }],
179 | }, {
180 | title: "touch",
181 | subtitle: "Your Hands, Now in VR",
182 | item_url: "https://www.oculus.com/en-us/touch/",
183 | image_url: "http://messengerdemo.parseapp.com/img/touch.png",
184 | buttons: [{
185 | type: "web_url",
186 | url: "https://www.oculus.com/en-us/touch/",
187 | title: "Open Web URL"
188 | }, {
189 | type: "postback",
190 | title: "Call Postback",
191 | payload: "Payload for second bubble",
192 | }]
193 | }]
194 | }
195 | }
196 | }
197 | };
198 |
199 | callSendAPI(messageData);
200 | }
201 |
202 | app.listen(4000, function() {
203 | console.log('listening 4000!!');
204 | });
--------------------------------------------------------------------------------
/BeautyBot/config/default.json:
--------------------------------------------------------------------------------
1 | {
2 | "devConfig": {
3 | "pageAccessToken": "",
4 | "verifyToken": ""
5 | }
6 | }
--------------------------------------------------------------------------------
/BeautyBot/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "beauty-bot",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "app.js",
6 | "scripts": {
7 | "start": "node app.js"
8 | },
9 | "author": "kdchang",
10 | "license": "MIT",
11 | "dependencies": {
12 | "body-parser": "^1.17.1",
13 | "config": "^1.25.1",
14 | "express": "^4.15.2",
15 | "request": "^2.81.0"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/BeautyTab.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kdchang/javascript101-lite/d6358c0c51e85953345ef5318421dace2331026a/BeautyTab.zip
--------------------------------------------------------------------------------
/BeautyTab/_locales/en/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "l10nTabName": {
3 | "message":"Localization"
4 | ,"description":"name of the localization tab"
5 | }
6 | ,"l10nHeader": {
7 | "message":"It does localization too! (this whole tab is, actually)"
8 | ,"description":"Header text for the localization section"
9 | }
10 | ,"l10nIntro": {
11 | "message":"'L10n' refers to 'Localization' - 'L' an 'n' are obvious, and 10 comes from the number of letters between those two. It is the process/whatever of displaying something in the language of choice. It uses 'I18n', 'Internationalization', which refers to the tools / framework supporting L10n. I.e., something is internationalized if it has I18n support, and can be localized. Something is localized for you if it is in your language / dialect."
12 | ,"description":"introduce the basic idea."
13 | }
14 | ,"l10nProd": {
15 | "message":"You are planning to allow localization, right? You have no idea who will be using your extension! You have no idea who will be translating it! At least support the basics, it's not hard, and having the framework in place will let you transition much more easily later on."
16 | ,"description":"drive the point home. It's good for you."
17 | }
18 | ,"l10nFirstParagraph": {
19 | "message":"When the options page loads, elements decorated with data-l10n will automatically be localized!"
20 | ,"description":"inform that elements will be localized on load"
21 | }
22 | ,"l10nSecondParagraph": {
23 | "message":"If you need more complex localization, you can also define data-l10n-args. This should contain $containerType$ filled with $dataType$, which will be passed into Chrome's i18n API as $functionArgs$. In fact, this paragraph does just that, and wraps the args in mono-space font. Easy!"
24 | ,"description":"introduce the data-l10n-args attribute. End on a lame note."
25 | ,"placeholders": {
26 | "containerType": {
27 | "content":"$1"
28 | ,"example":"'array', 'list', or something similar"
29 | ,"description":"type of the args container"
30 | }
31 | ,"dataType": {
32 | "content":"$2"
33 | ,"example":"string"
34 | ,"description":"type of data in each array index"
35 | }
36 | ,"functionArgs": {
37 | "content":"$3"
38 | ,"example":"arguments"
39 | ,"description":"whatever you call what you pass into a function/method. args, params, etc."
40 | }
41 | }
42 | }
43 | ,"l10nThirdParagraph": {
44 | "message":"Message contents are passed right into innerHTML without processing - include any tags (or even scripts) that you feel like. If you have an input field, the placeholder will be set instead, and buttons will have the value attribute set."
45 | ,"description":"inform that we handle placeholders, buttons, and direct HTML input"
46 | }
47 | ,"l10nButtonsBefore": {
48 | "message":"Different types of buttons are handled as well. <button> elements have their html set:"
49 | }
50 | ,"l10nButton": {
51 | "message":"in a button"
52 | }
53 | ,"l10nButtonsBetween": {
54 | "message":"while <input type='submit'> and <input type='button'> get their 'value' set (note: no HTML):"
55 | }
56 | ,"l10nSubmit": {
57 | "message":"a submit value"
58 | }
59 | ,"l10nButtonsAfter": {
60 | "message":"Awesome, no?"
61 | }
62 | ,"l10nExtras": {
63 | "message":"You can even set data-l10n on things like the <title> tag, which lets you have translatable page titles, or fieldset <legend> tags, or anywhere else - the default Boil.localize() behavior will check every tag in the document, not just the body."
64 | ,"description":"inform about places which may not be obvious, like , etc"
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/BeautyTab/icons/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kdchang/javascript101-lite/d6358c0c51e85953345ef5318421dace2331026a/BeautyTab/icons/icon128.png
--------------------------------------------------------------------------------
/BeautyTab/icons/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kdchang/javascript101-lite/d6358c0c51e85953345ef5318421dace2331026a/BeautyTab/icons/icon16.png
--------------------------------------------------------------------------------
/BeautyTab/icons/icon19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kdchang/javascript101-lite/d6358c0c51e85953345ef5318421dace2331026a/BeautyTab/icons/icon19.png
--------------------------------------------------------------------------------
/BeautyTab/icons/icon48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kdchang/javascript101-lite/d6358c0c51e85953345ef5318421dace2331026a/BeautyTab/icons/icon48.png
--------------------------------------------------------------------------------
/BeautyTab/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "BeautyTab",
3 | "version": "0.0.1",
4 | "manifest_version": 2,
5 | "description": "This extension was created with the awesome extensionizr.com",
6 | "homepage_url": "http://extensionizr.com",
7 | "icons": {
8 | "16": "icons/icon16.png",
9 | "48": "icons/icon48.png",
10 | "128": "icons/icon128.png"
11 | },
12 | "default_locale": "en",
13 | "background": {
14 | "page": "src/bg/background.html",
15 | "persistent": false
16 | },
17 | "options_page": "src/options/index.html",
18 | "browser_action": {
19 | "default_icon": "icons/icon19.png",
20 | "default_title": "browser action demo",
21 | "default_popup": "src/browser_action/browser_action.html"
22 | },
23 | "chrome_url_overrides": {
24 | "newtab": "src/override/override.html"
25 | }
26 | }
--------------------------------------------------------------------------------
/BeautyTab/src/bg/background.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 | <head>
4 | <script type="text/javascript" src="background.js"></script>
5 | </head>
6 | </html>
--------------------------------------------------------------------------------
/BeautyTab/src/bg/background.js:
--------------------------------------------------------------------------------
1 | // if you checked "fancy-settings" in extensionizr.com, uncomment this lines
2 |
3 | // var settings = new Store("settings", {
4 | // "sample_setting": "This is how you use Store.js to remember values"
5 | // });
6 |
7 |
8 | //example of using a message handler from the inject scripts
9 | chrome.extension.onMessage.addListener(
10 | function(request, sender, sendResponse) {
11 | chrome.pageAction.show(sender.tab.id);
12 | sendResponse();
13 | });
--------------------------------------------------------------------------------
/BeautyTab/src/browser_action/browser_action.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <style type="text/css">
3 | #mainPopup {
4 | padding: 10px;
5 | height: 200px;
6 | width: 400px;
7 | font-family: Helvetica, Ubuntu, Arial, sans-serif;
8 | }
9 | h1 {
10 | font-size: 2em;
11 | }
12 | </style>
13 |
14 | <div id="mainPopup">
15 | <h1>Hello extensionizr!</h1>
16 | <p>To shut this popup down, edit the manifest file and remove the "default popup" key. To edit it, just edit ext/browser_action/browser_action.html. The CSS is there, too.</p>
17 | </div>
--------------------------------------------------------------------------------
/BeautyTab/src/options/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 | <head>
4 | <title>
5 |
6 |
7 |
8 |
9 |