์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

WEB2 - JavaScript

https://opentutorials.org(์ƒํ™œ์ฝ”๋”ฉ ์‚ฌ์ดํŠธ)๋ฅผ ๋งŒ๋“ค์–ด๊ฐ€๋ฉด์„œ JavaScript์— ๋Œ€ํ•œ ์ง€์‹๊ณผ ๊ฒฝํ—˜์„ ๋™์‹œ์— ์ฑ„์›Œ๋“œ๋ฆฌ๊ธฐ ์œ„ํ•œ ๋ชฉ์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ์ˆ˜์—…์ž…๋‹ˆ๋‹ค.

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • JavaScript์— ๋Œ€ํ•œ ์ง€์‹๊ณผ ๊ฒฝํ—˜

  • Run JavaScript

  • DataType

  • Operator

  • Statement

  • Web Browser

  • CSS

 

 

1. ์ƒํ™œ์ฝ”๋”ฉ์˜ Web2  -JavaScript ์ˆ˜์—…์†Œ๊ฐœ

์ด ์ˆ˜์—…์€ https://opentutorials.org ๋ฅผ ๋งŒ๋“ค์–ด๊ฐ€๋ฉด์„œ JavaScript์— ๋Œ€ํ•œ ์ง€์‹๊ณผ ๊ฒฝํ—˜์„ ๋™์‹œ์— ์ฑ„์›Œ๋“œ๋ฆฌ๊ธฐ ์œ„ํ•œ ๋ชฉ์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ์ˆ˜์—…์ž…๋‹ˆ๋‹ค. Web2์‹œ๋ฆฌ์ฆˆ ์ค‘ ํ•˜๋‚˜๋กœ ์ƒํ™œ์ฝ”๋”ฉ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ•์˜ ์ž…๋‹ˆ๋‹ค .
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
์‚ฌ๋žŒ๋“ค์€ ์›น์ด ๋™์ ์œผ๋กœ ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ์›ํ–ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ํƒœ์–ด๋‚œ ๊ฒŒ ๋ฐ”๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž…๋‹ˆ๋‹ค.
 
 
html์ด ์ •๋ณด๋ผ๊ณ  ํ•˜๋Š” ๋ฉˆ์ถฐ์žˆ๋Š” ์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ฒƒ์ด๋ผ๋ฉด 
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ •๋ณด๋ผ๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋งˆ์น˜ ์˜ํ™”์ฒ˜๋Ÿผ ์›€์ง์ด๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.
์ด๊ฒƒ์€ ๋งˆ๋ฒ•์ด์—์š”.
์—ฌ๋Ÿฌ๋ถ„์€ ์ด์ œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž์œ ์ž์žฌ๋กœ ํœ˜๋‘๋ฅด๋Š”
๋งˆ๋ฒ•์‚ฌ๊ฐ€ ๋  ๊ฒ๋‹ˆ๋‹ค. 
 
 
์ค€๋น„๋๋‚˜์š”? 
์ถœ๋ฐœํ•ฉ์‹œ๋‹ค. 
 
 

2. ์ˆ˜์—…๋Œ€์ƒ

์ด ์ˆ˜์—…์€ ์›น ํŽ˜์ด์ง€๋ฅผ ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„๋“ค์„ ์œ„ํ•ด์„œ ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. ๊ฒŒ์ž„์ด๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ฒ˜๋Ÿผ ์›นํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์ˆ˜์—… ์•ˆ์— ๋“ค์–ด์žˆ์Šต๋‹ˆ๋‹ค. html๋งŒ์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ์•„๋ž˜์˜ ์›นํŽ˜์ด์ง€์— https://web-n.github.io/web1_html_internet/ ์•„๋ž˜์™€ ๊ฐ™์ด javascript๋ฅผ ์ด์šฉํ•ด์„œ ์ฃผ๊ฐ„/์•ผ๊ฐ„ ๋ชจ๋“œ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋ฉด์„œ ๊ฐ์ข… ๋ฌธ๋ฒ•์„ ์ตํ˜€๊ฐ‘๋‹ˆ๋‹ค. https://web-n.github.io/web2_javascript/
 


3. ์ˆ˜์—…์˜ ์ฐธ์—ฌ์กฐ๊ฑด

HTML์ด ๋ฌด์—‡์ธ์ง€ ์ „ํ˜€ ๋ชจ๋ฅด์‹ ๋‹ค๋ฉด ์ด ์ˆ˜์—…์„ ๋ณด์‹œ๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค. ์ด ์ˆ˜์—…์€ HTML์„ ์•Œ๊ณ  ๊ณ„์‹  ๋ถ„๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. HTML์„ ๋ชจ๋ฅด์‹ ๋‹ค๋ฉด ์•„๋ž˜ WEB1 ์ˆ˜์—…์„ ๋จผ์ € ๋ณด์‹œ๊ณ  ๋‹ค์‹œ ์ด ์ˆ˜์—…์— ์ฐธ์—ฌํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. WEB1 - HTML & Internet ์ˆ˜์—… ๋ฐ”๋กœ๊ฐ€๊ธฐ

4. ์ปค๋ฎค๋‹ˆํ‹ฐ & ์ง„๋„ํ‘œ

์ธํ”„๋Ÿฐ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์งˆ๋ฌธํ•˜๊ณ  ๋‹ต๋ณ€์„ ๋ฐ›๊ฑฐ๋‚˜, ๋‚จ๊ฒจ๋ณด์„ธ์š”. https://www.inflearn.com/community/questions
๋˜ํ•œ ์•„๋ž˜ ์•ผํ•™์‚ฌ์ดํŠธ๋ฅผ ํ†ตํ•ด์„œ ํ•™์Šต์˜ ์ง„ํ–‰์ƒํ™ฉ์„ ์ฒดํฌํ•˜๊ณ  ๋‹ค๋ฅธ ํ•™์šฐ๋“ค์„ ๋งŒ๋‚  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. https://yah.ac/web2javascript

5. ์ˆ˜์—…์˜ ๋‚ด์šฉ

 - Run JavaScript
  • Event handler
  • script tag
  • console
 - DataType
  • String
  • Number
  • Variable
  • Boolean
  • Array
  • Function
  • Object
 - Operator
  • Arithmetic operation
  • Assignment operators
  • Comparison operator
 - Statement
  • Conditional statement
  • Loop statement
  • Loop & Array
  • Function
  • Loop & Object
  • Property & Method
  • Refactoring
  • Include File
  • Library &Framework
 - Web Browser
  • Select element (12)
  • Attribute (12)
 - CSS
  • Style attribute (9)
  • Style tag (10)
  • selector (11)

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์›น ํŽ˜์ด์ง€๋ฅผ ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„

  • JavaScript๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
Egoing Lee์ž…๋‹ˆ๋‹ค.

298,816

๋ช…

์ˆ˜๊ฐ•์ƒ

7,661

๊ฐœ

์ˆ˜๊ฐ•ํ‰

1

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

44

๊ฐœ

๊ฐ•์˜

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

37๊ฐœ โˆ™ (4์‹œ๊ฐ„ 24๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

343๊ฐœ

4.9

343๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • ๋ฐ•์žฌํ•™ Jesse

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์ด๋ถ„์€ ๊ณผํ•™๊ธฐ์ˆ ์ •๋ณดํ†ต์‹ ๋ถ€์—์„œ ์ƒ์„ ์ค˜์•ผํ•œ๋‹ค

    • KH K

      โˆ™

      ์ˆ˜๊ฐ•ํ‰ 2

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ๋‹ค์‹œ ์—ฌ๊ธฐ ์™”์„ ๋•Œ, ์›ƒ์œผ๋ฉฐ ์˜› ์ถ”์–ต์„ ํšŒ์ƒ ํ•  ์ˆ˜ ์žˆ๊ธธ ๋ฐ”๋ผ๋ฉฐ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

      • in10069

        โˆ™

        ์ˆ˜๊ฐ•ํ‰ 1

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        62% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        • ์ธค๋ฐ๋ ˆํฌ

          โˆ™

          ์ˆ˜๊ฐ•ํ‰ 13

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          8% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          • hyunjuchun

            โˆ™

            ์ˆ˜๊ฐ•ํ‰ 1

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

            100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

            Egoing Lee๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

            ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ๋น„์Šทํ•œ ๊ฐ•์˜

            ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ๋ฌด๋ฃŒ