The document discusses the basics of JavaScript including how it works in browsers, its core syntax, and basic function usage. It provides examples of writing an avg() function that calculates averages and a dummy() function that reverses the order of elements in an array.

1. JavaScript

2.
시작하며

3. 목표
Javascript가

4. 브라우저에서

5. 어떻게

6. 사용되는지

7. 안다.

8.
Javascript의

9. 기본

10. 문법을

11. 안다.

12.
함수의

13. 기본

14. 사용법을

15. 안다.

16. 1.

17. 다음처럼

18. 동작하는

21. avg

22. 함수를

23. 작성합니다.

24.
avg(10,20,30,40,100)

29. //40

30.
avg(10,20);

44. //15

45.
avg(10,20,”30”,40)

47. //“error

48. 입니다”

49.
!
!
2.

50. 다음처럼

51. 동작하는

53. dummy

54. 함수를

55. 작성합니다.

56.
var arr = [99,22];
var result = dummy(arr);
console.log(result); //[22,99]
console.log(arr); //[22,99]
!
#quiz는

57. 비밀글로

58. 제출합니다.

59. 전,
원래

60. 웹브라우저에서

61. 동작되기

62. 위해

63. 만들어졌습니다.

64. (Form

65. 체크)

66.
전

67. 아직

68. 10대입니다.

69. 곧

70. 20살이

71. 되긴하지만..

72.
여러분은

73. 저를

74. 아주

75. 쉽게

76. 배울

77. 수

78. 있어요.

79. 하지만

80. 끝을

81. 보려면

82. 몇

83. 년이

84. 걸릴겁니다.

85.
전

86. JAVA와는

87. 전혀

88. 관련이

89. 없습니다.

90. 물론

91. 자바지기님이랑도

92. 전

93. 남남이에요

94.
전

95. html과

96. css와

97. 아주

98. 친합니다.

99. 제가

100. 하는

101. 일

102. 중

103. 대부분이

104. html과css를

105. 동적으로

106. 변경시켜주는

107. 것이고요.

108.
전

109. 컴파일하지

110. 않아도

111. 됩니다.

112. 인터프리터

113. 언어죠.

114. 파이썬과

115. 비슷한

116. 방식입니다.

117.
제

118. 스펙은

119. ECMAScript

120. 라는

121. 것에

122. 정의되어

123. 있습니다.

125. 자바스크립트가

126. 하는

127. 일
HTML,

128. CSS로

129. 표현되는

130. UI(User-interface)영역에서

131. Data와

132. DOM을

133. 변
경/조작

134. 할

135. 수

136. 있음.

138.
!
사용자가

139. 마우스와

140. 키보드로

141. 뭔가를

142. 수행할

143. 때

144. 상황에

145. 따라

146. 다양하게

147. 반응한다.

149. (Event)

150.
HTML의

151. 구조를

152. 변경한다

153. (DOM

154. 을

155. 활용)

156.
CSS를

157. 동적으로

158. 변경한다

160.
클라이언트

161. 데이터를

162. 변경/검증

163. 할

164. 수

165. 있다

166. (Javascript

167. Array,

168. string

169. ..등)

170.
....

172. DOM

173. ?

175.
document

176. object

177. model
HTML페이지는

178. 다양한

179. 타입의

180. 노드(p,ul,body..)로

181. 표현된다.

183.
노드를

184. 쉽게

185. 찾을

186. 수

187. 있게

188. 제공하는

189. API가

190. DOM이다.

192.
결국

193. Javascript는

194. DOM

195. API

196. 통해

197. HTML(노드)를

198. 쉽게

199. 제거,추가,교체,수정할

200. 수

201. 있음.

202.
출처

203. :

204. http://www.webstepbook.com/supplements/slides/lecture16-dom_tree.shtml

205. DOM

206. tree
다다음주에

207. 더

208. 자세히..

209. 자바스크립트를

210. 공부하는

211. 방법
BOOK

212.
Javascript

213. 완벽가이드

215.
Javascript

216. for

217. Web

218. Developers

220.
Javascript

221. .The

222. good

223. parts

224.
!
!
online

226.
developer.mozilla.org

228.
code

229. academy

230.
기타

231. 온라인

232. javascript

233. guide

235. J S

236. i n

237.
B r o w s e r

238. Javascript

239. 코드는

240. HTML페이지

241. 안에서

242. 정의한다
HTML

243.
!

245. HEAD

250. script

253. alert(1);

258. /script

261. /HEAD

262.
!

264. BODY

267. ...

270. /BODY

271.
!
/HTML
HTML

272.
!

274. HEAD

279. script

280. src=”alert.js”/script

283. /HEAD

284.
!

286. BODY

289. ...

292. /BODY

293.
!
/HTML
script태그로

294. 바로

295. 적용하거나 external

296. 파일을

297. include

298. 할

299. 수

300. 있다

301. 정말

302. 그런지

303. google

304. 코드

305. 살펴보기

306.
script

307. 태그가

308. 어디에

309. 있나요?

310. body태그가

311. 닫히기

312. 전에

313. script를

314. 적용한

315. 이유는

316. ?
HTML

317.
!

319. HEAD

325. /HEAD

326.
!

328. BODY

331. …⋯

335. script

338. alert(1);

343. /script

346. /BODY

347.
!
/HTML

348. V a u l e s

349. 이후

350. 모든

351. 실습내용은

352. 크롬개발자도구-콘솔탭에서

353. 할

354. 수

355. 있음

356.
!
다음

357. 줄로

358. 이어서

359. 쓰려면

360. shift

361. +

362. enter를

363. 하면됨

364. Javascript

365. is

366. dynamically

367. typed

368. language

369.
member

370. =

371. 20;

383. /*

384. member라는

385. 변수에

386. 20을

387. 할당했어요

388. */

390. 20

391.
!
typeof

392. member;

399. //

400. typeof는

401. 변수의

402. 타입을

403. 확인할

404. 수

405. 있는

406. operator

408. “number”

409.
!
member

410. =

411. “next

412. ui”

414. /*

415. member라는

416. 변수에

417. 이번에는

418. 문자열을

419. 할당했네요*/

421. “next

422. ui”

423.
!
typeof

424. member;

426. “string”
Javascript

427. type

428.
:

429. String,

430. Number,

431. Boolean,

432. Array,

433. Object,

434. null,

435. undefined

436. Javascript

437. 형변환
result

438. =

439. 30

440. +

441. 30;

443. 60

444.
!
result

445. =

446. ‘i

447. have’

448. +

449. 30;

451. ?

452.
!
result

453. =

454. ’30’

455. -

456. 2;

458. ?

459.
!
result

460. =

461. ‘i

462. have’

463. -

464. 30;

466. ?

467.
!
result

468. =

469. +‘11’;

470.
typeof

471. result;

472.
Javascript

473. 는

474. 가끔

475. 자기

476. 맘대로

477. type을

478. 변환하려고

479. 합니다

480. undefined

481.
선언되었지만

482. 할당하지

483. 않은

484. 상태
console.log($_b);

486. ?

487.
!
var

488. $_b;

489.
console.log($_b)
?

490.
var

491. $_b

492. =

493. “dummy

494. string”;

495. ?

496.
!

497. 변수명에는

498. _

499. ,

500. $

501. ,

502. 알파벳,숫자가

503. 올

504. 수

505. 있다.

507.
숫자는

508. 처음에

509. 올

510. 수

511. 없다

512.
지역변수는

513. var를

514. 붙여야

515. 한다.
var

516. $_a

517. =

518. 20;

519.
$_a;

521. 20

522.
!

523. L i t e r a l s

524.
다 양 한

525. ‘ 값 ’ 의

526. 표 현

527. String

528.
var str = “love”;
var str = ‘love’;
var str = “오늘 기분 째지는데요? n 하지만 ’내일’은 또 어떨런지..?”;
boolean
var isBraveMan = true;
!
!
Integer
var num = 0;
var num = 010;
var num = 0x10;
parseInt(“333”);
333
var num = 10e2 //10*10^2
1000
//escaping

529. characters

530. Array
var beef = [];
var aFruit = [‘strawberry’ , ‘grapes’ , ‘banana’ , ‘peaches’];
console.log(fruit[2]);
!
!
Object

531.
var recoverInfo = { ‘jisu’ : ‘recover1-2’ , jihae : ‘recover3-1’ }
recoverInfo.jisu;
recoverInfo[‘jahae’];
!

532. Array
var beef = [];
var aFruit = [‘strawberry’ , ‘grapes’ , ‘banana’ , ‘peaches’];
console.log(fruit[2]);
!
!
Object

533.
var recoverInfo = { ‘jisu’ : ‘recover1-2’ , jihae : ‘recover3-1’ }
recoverInfo.jisu;
recoverInfo[‘jahae’];
!
그런데,

534.
Array는

535. 언제쓰고,

536. Object는

537. 언제쓰나요?

538. End
;-D