WEB UI BASIC JavaScript 기초입니다! JavaScript의 소개 및 역할, 변수, operator로 가볍게 구성했습니다.

1. Javascript

2. 1탄
WEB UI BASIC
본 자료는 NHN NEXT 윤지수 교수님의 자료를 바탕으로 제작했습니다.
NHN

3. NEXT

4. 우재우

5. 아기다리

6. 고기다리던

7.
Javascript를

8. 배워봅시다!

9.
오늘은

10. 기본만

11. 쉽게

12. 해보죠

14. 일단

15. Javascript는

16.
Java와

17. 관계가

18. 없어요ㅠ

19.
(근데

20. 자바지기는

21. JS(재성)입니다ㅋㅋㅋ)

22.
쉽게

23. 공부하려면

24. 쉽고,

25.
어렵게

26. 공부하려면

27. 끝도

28. 없어요ㅋ

29. JS는

30. 컴파일

31. 언어가

32. 아닙니다!

33.
파이썬

34. 같은

35.
인터프리터

36. 언어입니다~

37.
그래서

38. 짜봐(Java)스크립트죠ㅋ

39. DOM(document

40. object

41. model)이라는게

42. 있어요
HTML이

43. tree

44. 구조로

45. 만들어진다고

46. 전에

47. 말씀

48. 드린거

49. 기억나나요?

50.
element

51. 하나하나가

52. tree의

53. node가

54. 되고,

55.
그

56. node를

57. 쉽게

58. 찾을

59. 수

60. 있는

61. API가

62. DOM입니다!!!
출처:

63. http://www.w3schools.com/js/js_htmldom.asp

64. 그래서

65. JS가

66. 하는

67. 일은!!!
HTML의

68. 구조를

69. 조작합니다.(DOM

70. 변경)

71.
CSS를

72. 동적으로

73. 변경합니다.

74.
사용자가

75. 키보드/마우스

76. 이벤트를

77. 발생하면

78. 처리해줍니다.

79.
클라이언트

80. 측

81. 데이터를

82. 변경/검증

83. 할

84. 수

85. 있습니다.

86.
서버에

87. 요청을

88. 보내고

89. 받아서

90. 처리할

91. 수

92. 있습니다.

93.
아,

94. 심지어

95. 서버도

96. 만들

97. 수

98. 있어요!!!

99. (Node.js)

100. Javascript

101. 맛보기
개발자

102. 도구에서

103. console

104. 탭에

105. 바로

106. 코드를

107. 쓸

108. 수

109. 있어요!

110.
alert(“hello”);를

111. 써봅시다!
줄바꿈은

112. shift

113. +

114. enter

115. Javascript를

116. 적용하는

117. 법

118. 1
html

119. script라는

120. 태그에

121. JS코드를

122. 바로

123. 씁니다!

124.
script

125.
alert(“Hello,

126. world!”);

127.
/script
-

128. internal

129. 방식
[참고]

130. HTML4에서는

131. script

132. type=‘text/javascript’

133.
라고

134. 써주는데

135. HTML5부터는

136. script만

137. 써도

138. 됩니다.

139. Javascript를

140. 적용하는

141. 법

142. 2
js파일을

143. 따로

144. 작성한

145. 뒤

146. css

147. external처럼

148. 불러옵니다.

149.
[test.js]

150.
alert(“Hello,

151. world!”);

152.
script

153. src=‘test.js’/script
-

154. external

155. 방식

156. script의

157. 위치는

158. 어디가

159. 좋을까?
!DOCTYPE

160. html

161.
html

162.
head

163.
여기?

164.
/head

165.
body

166.
여기?

167.
코드들...

168.
여기?

169.
/body

170.
/html
제가

171. 좋아하는

172. www.html5doctor.com에서

173.
실제로

174. 어디있는지

175. 살펴봅시다!

176. 왜

177. 하필

178. 거기죠??
우리가

179. 보는

180. 웹페이지는

181. 싱글뜨레드로

182. 돌아갑니다!

183.
쉽게

184. 말해서

185. 뭐

186. 하나

187. 하면

188. 딴짓

189. 못하는

190. 스타일

191.
그래서

192. 브라우져가

193. JS를

194. 읽는

195. 동안은

196. 다른

197. 일

198. 못

199. 합니다ㅠ

200.
JS가

201. 뒤에

202. 있으면

203. HTML,

204. CSS

205. 다

206. 그리고

207. 나서

208. 다운받고

209. 읽겠죠?

210.
사용자

211. 입장에서

212. 생각해보면

213. 흰화면에서

214. 기다리는

215. 것보다는

216.
뭐라도

217. 먼저

218. 살짝

219. 보이는게

220. 반응속도가

221. 빨라

222. 보이겠죠?

223.
위치를

224. 꼭,

225. 반드시,

226. 머스트

227. 지키지는

228. 않아도

229. 됩니다만

230.
한

231. 번쯤은

232. 구글에서

233. 이

234. 이슈에

235. 대해

236. 검색해

237. 보시길...

238. JS

239. Data

240. type
Number

241.
String

242.
Boolean

243.
Array

244.
Object
var

245. var는

246. 척하면

247. 척척척!
var

248. num

249. =

250. 3;

251.
var

252. str

253. =

254. “hello”;

255.
var

256. bool

257. =

258. true;

259.
var

260. arr

261. =

262. [1,

263. 2,

264. “3”];

265.
var

266. obj

267. =

268. {“Hello”:

269. “Hi”,

270. “Bye”:”See

271. you

272. soon”};

273. 심지어

274. var를

275. 안

276. 써도

277. 된다?!
test

278. =

279. 3;

280. 이라고

281. 쓰시고,

282. 그냥

283. test;를

284. 입력해봅시다!

285.
type에

286. 엄격한

287. 언어들(예를

288. 들면

289. C)을

290. 쓰다가

291.
JS를

292. 보면

293. 이게

294. 뭔가

295. 싶습니다

296. ㅋㅋㅋ

297. printf();

298. =

299. console.log();

300. 넌

301. type이

302. 뭐니?
변수의

303. 타입이

304. 궁금할

305. 땐

306. typeof!

307. Dynamic

308. typing
var

309. a;

310.
console.log('typeof

311. a

312. is

313. now,'+

314. typeof(a));

315.
a

316. =

317. null;

318.
console.log('typeof

319. a

320. is

321. now,'+

322. typeof(a));

323.
a

324. =

325. 1;

326.
console.log('typeof

327. a

328. is

329. now,'+

330. typeof(a));

331.
a

332. =

333. string;

334.
console.log('typeof

335. a

336. is

337. now,'+

338. typeof(a));

339.
a

340. =

341. false;

342.
console.log('typeof

343. a

344. is

345. now,'+

346. typeof(a));

347.
a

348. =

349. [];

350.
console.log('typeof

351. a

352. is

353. now,'+

354. typeof(a));

355.
a

356. =

357. {};

358.
console.log('typeof

359. a

360. is

361. now,'+

362. typeof(a));

363. 이거

364. 허용해도

365. 되는

366. 건가요?
다음

367. 값들이

368. 어떻게

369. 나오는지

370. 예상해봅시다.

371.
var

372. result;

373.
result

374. =

375. 30

376. +

377. 30;

378.
result

379. =

380. “result

381. is”

382. +

383. 30;

384.
result

385. =

386. “30”

387. -

388. 3;

389.
result

390. =

391. “30”

392. *

393. 3;

394.
result

395. =

396. -“30”;

397.
result

398. =

399. “What

400. is

401. this?”

402. -

403. 30;

404. 진짜

405. 어처구니가

406. 없죠?

407. ㅋㅋㅋ

408. 난

409. NaN이야...
NaN은

410. Not

411. a

412. Number

413. 입니다.

414.
대개

415. 말도

416. 안

417. 되는

418. 숫자

419. 연산의

420. 결과값으로

421. 쓰입니다.

422.
예를

423. 들면

424.
“hello”

425. -

426. 30

427.
1

428. /

429. “smith”

430.
NaN

431. ==

432. NaN

433.
1

434. /

435. 0

437. —-

439. 얘는

440. 뭐가

441. 나올까요???

443. 내가

444. 없는게

445. 없는게

446. 아니야
undefined

447. vs

448. null

449. undefined

450. vs

451. null
var

452. a;

453.
a;
개발자도구

454. 콘솔창에서

455. 아래

456. 코드를

457. 입력해

458. 봅시다!
var

459. b

460. =

461. null;

462.
b;

463. undefined는

464. 변수를

465. 선언만

466. 했지

467.
자료형이

468. 결정되지

469. 않은

470. 상태!
null은

471. 선언된

472. 변수에

473.
null이라는

474. 빈값이

475. 들어간

476. 경우!
undefined

477. vs

478. null

479. 여기서

480. 잠깐

481. 쉬는

482. 시간

483. ㅋ

484. a

485. =

486. a

487. +

488. 3;

495. —-

503. a

504. +=

505. 3;

506.
a

507. =

508. a

509. -

510. 3;

517. —-

525. a

526. -=

527. 3;

528.
a

529. =

530. a

531. *

532. 3;

539. —-

547. a

548. *=

549. 3;

550.
a

551. =

552. a

553. /

554. 3;

561. —-

569. a

570. /=

571. 3;

572.
a

573. =

574. a

575. %

576. 3;

583. —-

591. a

592. %=

593. 3;
Operators

594. #1:

595. Assignment

596. operators

597. var

598. a

599. =

600. 3;

601.
a++;

602.
a—;

603.
var

604. b

605. =

606. false;

607.
b++;
Operators

608. #2:

609. Arithmetic

610. operators

611. 15

613. 9

615. 9

616.
15

617. |

618. 9

620. 15

621.
9

623. 2

625. 36
Operators

626. #3:

627. Bitwise

628. operators
//

629. 1111

631. 1001

632. =

633. 1001

634.
//

635. 1111

636. |

637. 1001

638. =

639. 1111

640.
//

641. 1001

644. —-

647. 100100

648. true

650. true;

651.
“hello”

652. ||

653. false;
Operators

654. #4:

655. Logical

656. operators

657. “30”

658. ==

659. 30;

660.
true

661. ==

662. “1”;

663.
100

664. =

665. 99;

666.
100

667. =

668. 99;

669.
여기까지는

670. 다른

671. 언어랑

672. 다를게

673. 없군!
Operators

674. #5:

675. Comparison

676. operators

677. 그런데!

678.
JS에는

679. ==

680. 말고도

681.
===이

682. 있다!!!

683. “30”

684. ===

685. 30;

686.
true

687. ===

688. “1”;

689.
null

690. ==

691. undefined;

692.
null

693. ===

694. undefined;
Operators

695. #5:

696. Comparison

697. operators

698. ===은

699. 정확한

700. 타입

701. 비교까지

702. 가능!

703.
결론적으로

704. JS

705. 타입

706. 비교에서는

707.
===이

708. 안전하겠죠?

709. :)

710. var height = “182cm”;
var nHeight = parseInt(height);
var handSome = (nHeight 180) ? true : false;
console.log(handSome); // ?
Operators

711. #6:

712. Conditional

713. operators

714. var

715. a

716. =

717. 10;

718.
if

719. (a

720. ==

721. 9)

722. {

723.
a++;

724.
}

725. else

726. if

727. (a

728. ==

729. 10)

730. {

731.
a—;

732.
}

733. else

734. {

735.
a

736. =

737. “Error”;

738.
}

739.
console.log(a);
if문
우리가

740. 알던

741. 그

742. if가

743. 맞습니다!

744. var

745. result

746. =

747. 0;

748.
for

749. (var

750. i

751. =

752. 1;

753. i

754. =

755. 10;

756. i++)

757. {

758.
result

759. +=

760. i;

761.
}

762.
console.log(result);
for문

763. while,

764. do

765. while,

766. break,

767. continue,

768. switch

769. 등

770.
원래

771. 알던

772. 것들

773. 거의

774. 똑같이

775. 작동해요~

776.
자세한

777. 것은

778. 각자

779. 검색해서

780. 공부하는

781. 걸로...

782. 다음

783. 배열에서

784. 짝수의

785. 개수가

786. 몇

787. 개인지

788. 출력하세요!

789.
for를

790. 이용하며,

791. 문자열이

792. 나오면

793. loop를

794. 탈출합니다.

795.
(참고:

796. Array에는

797. length

798. property가

799. 있어요

800. ==

801. arr.length)
미션!!!
var

802. arr

803. =

804. [1,

805. 2,

806. 3,

807. 4,

808. 23,

809. 43,

810. 57,

811. 100,

812. “333”,

813. 10];

814. 우리는

815. JS맛만

816. 봤다!!!

817.
겸손해야

818. 합니다

819. ㅠ

820.
아직

821. 갈

822. 길이

823. 구만구천구십구리

824. 이번

825. 주는

826. 딱히

827. 대단한

828. 숙제가

829. 없어요!!!

830.
신나죠?!?!

831.
GOOD

832. 프로젝트

833. 계속

834. 발전시킵시다ㅎ

835.
다음

836. 주도

837. JS

838. 계속!!!