NEXT WEB UI Advanced 수업자료

1. JS의

2. 특징
WEBUI

3. Advanced

5. |

8. 3주차

9. 목표
this

10. 키워드가

11. 어떻게

12. 동작하는지

13. 안다.

14.
scope를

15. 이해하고

16. 있다

17.
closure

18. 를

19. 알고

20. 있다

21. 1.

24. 비동기

25. 콜백함수의

26. 디버깅을

27. 크롬개발자도구를

28. 통해서

29. 어떻게

30. 할

31. 수

32. 있고,

33.
무엇을

34. 알

35. 수

36. 있나요?

37.
!
2.

38. 크롬개발자

39. 도구에서

40. 각자

41. 숙제한

42. 부분에서

43. 가장

44. 유용한

45. 기능

46. 2가지를

47. 생각나
는

48. 대로

49. 써보세요

52. (최대

53. 4줄로

54. 설명)

55.
!

56. 3.

58. constructor

59. (생성자)내부에서

60. 사용된

62. this

64. 에

65. 대해서

66. 코드기반으로

67. 설
명해보세요.

69. scope

70. What

71. is

72. scope

73. ?
변수의

74. 유효범위

75. function myNum() {!
var i = 0;!
for(var i=0 ; i10 ; i++) { !
}!
console.log(i);!
}
0

76. or

77. 10

78. ?

79. JavaScript는

80. 단지

81. function

82. scope

83.
block

84. scope

85. 없음

86. i = 0;!
function myNum() {!
var i = 0;!
for(var i=0 ; i10 ; i++) { !
}!
}!
!
myNum();!
console.log(i);
0

87. or

88. 10

89. ?

90. i = 0;!
function myNum() {!
i = 0;!
for(i=0 ; i10 ; i++) { !
}!
}!
!
myNum();!
console.log(i);
0

91. or

92. 10

93. ?

94. var

95. !
언제

96. 어디서나,

97. 늘

98. 중첩된

99. 함수
그

100. 안에서의

101. 변수의

102. 유효범위

103. function mySNS() {!
var name = LINE;!
return name; !
}!
!
mySNS();
중첩된

104. 함수의

105. 유효범위

106. function mySNS() {!
var name = LINE;!
return function() {!
return name; !
};!
}
중첩된

107. 함수의

108. 유효범위

109. function mySNS() {!
var name = LINE;!
return function() {!
return function (prefix) {!
return prefix + name;!
} !
};!
}!
!
mySNS()()(my sns is );
중첩된

110. 함수의

111. 유효범위

112. function mySNS() {!
var name = LINE;!
function inner() {!
var x = inner;!
}!
inner();!
console.log(x);!
}!
!
mySNS();
중첩된

113. 함수의

114. 유효범위

115. 문제.

116. 중첩함수

117. 연습하기

118.
!
다음과

119. 같은

120. 결과가

121. 나오도록

122. 해보세요.
‘add’와

123. ‘mul’은

124. 함수

125. 입니다.
execOperation(add)(3)(5);

127. //8
execOperation(mul)(3)(5);

129. //15

130. 즉시실행함수의

131. 유효범위
쉽게

132. private

133. scope

134. 만들기

135. (function() {!
!
})();!
즉시실행함수

136.
immediately

137. invoked

138. function

139. function mySNS() {!
var name = LINE;!
(function() {!
var name2 = KAKAO;!
})();!
console.log(name + + name2);!
}!
!
mySNS();!
즉시실행함수의

140. 유효범위

141. function mySNS() {!
var name = LINE;!
(function() {!
name2 = KAKAO;!
})();!
console.log(name + + name2);!
}!
!
mySNS();!
즉시실행함수의

142. 유효범위

143. (function() {!
!
})();!
#

144. 즉시실행함수

145. 언제쓰는

146. 것이

147. 좋을까?

148. this

149. What

150. is

151. this

152. ?
context를

153. 가리키는

154. 키워드

155. What

156. is

157. context

158. ?
해당

159. 함수가

160. 실행되는

161. 공간

162. this

163. 함수

164. 호출

165. 관점에서

166. 바라본

167. function

168. 의

169. this

170. function

171. 의

172. this
function mySNS() {!
this.name = “LINE”;!
return this.name;!
}

173. function

174. 의

175. this
function mySNS() {!
this.name = “LINE”;!
! debugger;!
return this.name;!
}

176. method

177. 의

178. this

179. var mySNS = {!
name : LINE,!
getName : function() {!
return this.name;!
}!
}

180. method

181. 의

182. this

183. var mySNS = {!
name : LINE,!
getName : function() {!
! ! ! debugger;!
return this.name;!
}!
}

184. method

185. 의

186. this

188. constructor

189. 의

190. this

191. function mySNS() {!
this.name = LINE;!
this.getName = function() {!
return this.name;!
}!
}
mySNS();

193. constructor

194. 의

195. this

196. function mySNS() {!
this.name = LINE;!
this.getName = function() {!
return this.name;!
}!
}
new mySNS();

198. constructor

199. 의

200. this

202. call

204. apply

205. 의

206. this

207. 과제1.
1. call

208. 함수를

209. 공부하고

210. 간단한

211. 예제를

212. 만들어보세요.

213.
2. call

214. 함수에서의

215. this

216. 가

217. 어떤

218. 것을

219. 가리키는지

220. 예제코드에

221. 주
석으로

222. 설명을

223. 추가합니다.

224.
3. apply

225. 와

226. call의

227. 차이점을

228. 주석으로

229. 설명하세요.

232. apply

233. 의

234. this
var myFunction = {!
!
getName : function() {!
return this.name;!
},!
setName : function(newName) {!
this.name = newName;!
}!
}!
쓸모있어

235. 보이는

236. 메소드

238. apply

239. 의

240. this
var myFunction = {!
!
getName : function() {!
return this.name;!
},!
setName : function(newName) {!
this.name = newName;!
}!
}!
쓸모있어

241. 보이는

242. 메소드
데이터
var mySNS = {name : “LINE”};!
var myProduct = {name : “jisu”, phone: “iphone”}

243. var myFunction = {!
!
getName : function() {!
return this.name;!
},!
setName : function(newName) {!
this.name = newName;!
}!
}!

245. apply

246. 의

247. this
myFunction.getName.apply(mySNS);
var mySNS = {name : “LINE”};!
var myProduct = {name : “jisu”, phone: “iphone”}

248. var myFunction = {!
!
getName : function() {!
return this.name;!
},!
setName : function(newName) {!
this.name = newName;!
}!
}!

250. apply

251. 의

252. this
myFunction.getName.apply(mySNS);
var mySNS = {name : “LINE”};!
var myProduct = {name : “jisu”, phone: “iphone”}

253. var myFunction = {!
!
getName : function() {!
debugger;!
return this.name;!
},!
setName : function(newName) {!
this.name = newName;!
}!
}!

255. apply

256. 의

257. this
myFunction.getName.apply(mySNS);
var mySNS = {name : “LINE”};!
var myProduct = {name : “jisu”, phone: “iphone”}

258. var mySNS = {name : LINE};
var myFunction = {!
!
getName : function() {!
debugger;!
return this.name;!
},!
setName : function(newName) {!
this.name = newName;!
}!
}
myFunction.getName.apply(mySNS);
apply

270. vs.

274. 생성자prototype
function myProduct () {!
this.name = LINE;!
}!
!
myProduct.prototype.getName = function() {!
return this.name;!
!
}!
!
!
myProduct.prototype.setName = function(newName) {!
this.name = newName;!
!
}
var oMyproduct = new myProduct();!
oMyproduct.getName();!

275. this
몇

276. 가지

277. 문제로

278. 좀더

279. 알아보기

281. 중첩함수의

282. this

283.
this가

284. 가리키는

285. 것은?
var myFunction = {!
name : jisu,!
!
getName : function() {!
return function() {
return this.name;!
}!
},!
setName : function(newName) {!
this.name = newName;!
}!
}!
myFunction.getName()();

286. setTimeout

287. 콜백의

288. this
비동기상황에서의

289. this

290. 문제.

292.
다음

293. 코드의

294. 결과가

295. ‘iphone’이

296. 나오도록

297. 수정하세요

298.
두

299. 가지

300. 방법을

301. 제시해야

302. 합니다.(두가지로

303. 해결)

304.
!
또한

305. 해결된

306. 이유를

307. 주석으로

308. 코드

309. 주변에

310. 작성하세요

311.
(최대한

312. 상세히

313. 3줄이상)

314. var myFunction = {!
!
getName : function() {!
setTimeout(function() {!
console.log(this.phone);!
},1500);!
},!
setName : function(newName) {!
this.name = newName;!
}!
}!
!
var myProduct = {phone : iphone, com: apple}!
!
myFunction.getName.apply(myProduct);

315. 다음

316. 결과가

317. 나오도록

318. 코드를

319. 완성하세요.

320.
각각

321. 마우스로

322. 누르면

323. 다음의

324. 결과가

325. console창에

326. 각각

327. 출력되야

328. 합니다.

329.
ex)

331. 선식을

332. 누르면

333. ‘선식은

334. 정말

335. 몸에

336. 좋아요’

337. 를

338. 출력합니다.
토마토

339. 은

340. 정말

341. 몸에

342. 좋아요

343. ^^

344.
선식

345. 은

346. 정말

347. 몸에

348. 좋아요

349. ^^

351.
마늘

352. 은

353. 정말

354. 몸에

355. 좋아요

356. ^^

358.
과제2.

359. console

360. 화면
web

361. 화면

362. !
var obj = {!
strTexts : 은 정말 몸에 좋아요 ^^ ,!
registerEvents : function() { !
//여기함수를 완성하세요.!
//strTexts는 this.strTexts로만 접근할 수 있습니다.!
}!
};!
!
obj.registerEvents();
과제2.

363. 이쯤에서

364. 발견한

365. 사실

366.
!
scope는

367. 선언될때

368. 결정되고

369.
this는

370. 실행될때

371. 결정된다

372. Closure

373. function mySNS() {!
var name = LINE;!
return name;!
}!
!
//실행!
mySNS();
console.log(name); //is not defined;
함수호출이

374. 종료되면

376.
함수내

377. 지역변수는

378. 유효하지

379. 않음

380. function mySNS() {!
var name = LINE;!
return function() {
return name;
};!
}!
!
//실행!
var myWrapSNS = mySNS();
myWrapSNS(); // ??
name는

381. 언제까지

382. 유효할까?

383. function mySNS() {!
var name = LINE;!
return function() {
debugger;
return name;
};!
}!
//실행!
var myWrapSNS = mySNS();
myWrapSNS(); // ??
name는

384. 언제까지

385. 유효할까?

386. function mySNS() {!
var name = LINE;!
return function() {
return name;
};!
}!
!
var myWrapSNS = mySNS();!
//이순간에 mySNS는 종료된 걸까?

387. function mySNS() {!
var name = LINE;!
return function() {
return name;
};!
}!
!
var myWrapSNS = mySNS();!
//이순간에 mySNS는 종료된 걸까?
mySNS는 종료되지(닫히지) 못하고 있다.
자신이 가지고 있는 name변수를 누군가 계속 참고하고
있기 때문에.

388. 클로저는

390.
자신의

391. scope

392. 밖에

393. 있는

394. 변수들에

396.
접근

397. 할

398. 수

399. 있는

400. 함수를

401. 의미함.

402.
즉,

403. 함수

404. 외부에

405. 선언된

406. 변수를

407. 참조하는

408. 함수이다.

409. function mySNS() {!
var name = LINE;!
return function() {
return name;
};!
}!

410. 아까

411. 했던

412. 중첩함수

413.
여기서도

414. Closure

415. !
function execOperation(fun) {!
return function(x) {!
return function(y) {!
return fun(x,y);!
}!
}!
}!
!
//실행!
execOperation(function(x,y){return x+y;})(4)(12);

416. name는

417. 언제까지

418. 유효할까?
function mySNS() {!
var name = LINE;!
return { !
getName : function() {
return name;!
},!
setName : function(newName) {!
name = newName;!
}!
}!
}!
!
//실행

419.
var myWrapSNS = mySNS();
myWrapSNS.getName();

420. name는

421. 언제까지

422. 유효할까?
function mySNS() {!
var name = LINE;!
return { !
getName : function() {
return name;!
},!
setName : function(newName) {!
name = newName;!
}!
}!
}!
!
//실행

423.
var myWrapSNS = mySNS();
myWrapSNS.getName();!
myWrapSNS.setName(kakao);
myWrapSNS.getName();

424. name는

425. 언제까지

426. 유효할까?
function mySNS() {!
var name = LINE;!
return { !
getName : function() {
return name;!
},!
setName : function(newName) {!
debugger;!
name = newName;!
}!
}!
}!
!
//실행

427.
var myWrapSNS = mySNS();
myWrapSNS.getName();!
myWrapSNS.setName(kakao);
myWrapSNS.getName();

428. 피드백
this

429. 키워드가

430. 어떻게

431. 동작하는지

432. 안다.

433.
Scope를

434. 이해하고

435. 있다

436.
Closure

437. 를

438. 알고

439. 있다

440. End
;-D