๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ’ป Deep Wide Programming/Javascript & Vanila JS

[์ƒํ™œ์ฝ”๋”ฉ] WEB2- Javascript 1๊ฐ•, 2๊ฐ•, 3๊ฐ•, 4๊ฐ•, 5๊ฐ•, 6๊ฐ•(script, event, console, Datatype_string ๋ฌธ์ž์—ด๊ณผ ์ˆซ์ž)

728x90
๋ฐ˜์‘ํ˜•

Hello Javascript

html์€ ์ •์ ์ด๋‹ค. ์‚ฌ๋žŒ๋“ค์€ ์›นํŽ˜์ด์ง€๋„ ๊ฒŒ์ž„์ฒ˜๋Ÿผ ๋™์ ์œผ๋กœ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ผ๊ฒŒ ๋˜์—ˆ๋‹ค. ์›น์€ html๋กœ ๋งŒ๋“ค๊ณ , Javascrpit๋ฅผ ์–น์–ด์„œ html์˜ ์ •๋ณด์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋Šฅ์„ ๋ชจ๋‘ ๊ฐ–์ถ˜, ์ „๋ฌดํ›„๋ฌดํ•œ ์œ ์ผ๋ฌด์ดํ•œ ์‹œ์Šคํ…œ์œผ๋กœ ์„ฑ์žฅํ–ˆ๋‹ค!

html์ด ์ •๋ณด๋ผ๋Š” ๋ฉˆ์ถฐ์žˆ๋Š” ์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ฒƒ์ด๋ผ๋ฉด, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋งˆ์น˜ ์˜ํ™”์ฒ˜๋Ÿผ ์›€์ง์ด๊ฒŒ ํ•œ๋‹ค!

 

๋Œ“๊ธ€์— ๋ˆ„๊ฐ€ ๊ทธ๋Ÿฐ ๋ง์„ ๋‚จ๊ฒผ๋‹ค.

dog=html
beautiful=css
์ฆ‰, Beautiful dog = html + css
๊ฑฐ๊ธฐ๋‹ค "bark'๋ผ๋Š” Javascript.
์ฆ‰, A beautiful dog barks = html+css+js

[์ƒํ™œ์ฝ”๋”ฉ] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŽธ์€, ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ •์—์„œ, ํ•„์š”ํ•œ ๋ฌธ๋ฒ•์„ ์ฑ™๊ฒจ๊ฐ€๋Š” ์—ฌ์ •์ด๋‹ค. 

์ฆ‰, ์‹ค์Šต์ด ๊ธฐ๋ณธ + ๋ฌธ๋ฒ• ์ฑ™๊ฒจ๊ฐ€๊ธฐ


Javascrpit ๋ง›๋ณด๊ธฐ

์›น๋ธŒ๋ผ์šฐ์ €๋Š” ํ•œ๋ฒˆ ํ™”๋ฉด์— ์ถœ๋ ฅ์ด ๋˜๋ฉด, ์ž๊ธฐ ์ž์‹ ์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ์ด ์—†๋‹ค.

๊ทธ๋Ÿฌ๋‚˜, ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š”๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋‹ค.

 

ex. ์œ„ ์ด๋ฏธ์ง€์—์„œ, <body> ํƒœ๊ทธ๋Š” ํ•œ ๋ฒˆ ์ถœ๋ ฅ๋˜๋ฉด html์—์„œ ๋ฐ”๋€Œ์ง€ ์•Š๋Š”๋‹ค. 

<input type= "button" value="night" onclick"

์ด๋ผ๊ณ  ์ ํžŒ ๋ถ€๋ถ„์˜ ์˜๋ฏธ๋Š”, 'night'์ด๋ผ๋Š” ์ด๋ฆ„์˜ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด, ํ•ด๋‹น ์ฝ”๋“œ ์•„๋ž˜์— ์ ํžŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰์‹œํ‚จ๋‹ค~ ๋ผ๋Š” ๋œป์ด๋‹ค. 

์™ผํŽธ ํ™”๋ฉด์—์„œ night ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด์ž ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณ€ํ™”๊ฐ€ ์ƒ๊ธด๋‹ค.

 

๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด์ž, ์ •์ ์ธ bodyํƒœ๊ทธ ์˜†์— ์ƒˆ๋กœ์šด ์Šคํƒ€์ผ ํƒœ๊ทธ๊ฐ€ ์ƒ๊ธด๋‹ค! 


HTML๊ณผ JS์˜ ๋งŒ๋‚จ: script ํƒœ๊ทธ

๊ธฐ๋ณธ์ ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” html ์œ„์—์„œ ์›€์ง์ด๋Š” ์–ธ์–ด๋‹ค. ์–ด๋–ป๊ฒŒ ์™„์ „ํžˆ ๋‹ค๋ฅธ ๋ฌธ๋ฒ•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์–ธ์–ด๋ฅผ ๋‚‘๊ฒจ ๋„ฃ์„ ๊ฒƒ์ธ๊ฐ€? ๋ฅผ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž.

 

๋จผ์ € ๊ธฐ๋ณธ html ์ฝ”๋“œ ์„ธํŒ…์„ ํ•˜๊ณ , 

html์˜ ์ฝ”๋“œ๋กœ ์ง€๊ธˆ๋ถ€ํ„ฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค~๋ผ๊ณ  ์•Œ๋ ค์ค˜์•ผ ํ•œ๋‹ค. 

<body> ํƒœ๊ทธ์˜ <script> ์•ˆ์— ์žˆ๋Š” ํƒœ๊ทธ๋ฅผ ์›น๋ธŒ๋ผ์šฐ์ €๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ธ์ง€ํ•œ๋‹ค. 

 

<script>

        document. write('hello world');

    </script>

 

์ด๊ฒŒ ๊ทธ๋ƒฅ htmlํƒœ๊ทธ์™€ ๋‹ฌ๋ฆฌ ์–ผ๋งˆ๋‚˜ ๋†€๋ž๋ƒ๋ฉด.. ์ •์ ์ธ html์€, <h1> 1+1 </h1>์ด๋ผ๊ณ  ์ž…๋ ฅํ•˜๋ฉด "1+1"์ด๋ผ๊ณ  ์ ํžŒ ๊ทธ๋Œ€๋กœ ๋ณด์—ฌ์ง€์ง€๋งŒ, 

<script>
 document.write(1+1);
    </script>

       

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ์— ๋˜‘๊ฐ™์€ ๋‚ด์šฉ์„ ์ ์ž, ๋†€๋ž๊ฒŒ๋„ "2"๋ผ๊ณ  ๊ณ„์‚ฐ๋˜์–ด ํ™”๋ฉด์— ์ถœ๋ ฅ๋œ๋‹ค! woW


HTML๊ณผ JS์˜ ๋งŒ๋‚จ: ์ด๋ฒคํŠธ

<input type"button" value="hi" onclick="alert('bye')">

 

<input type = "text" onchange="alert('changed')">

์ด๋ ‡๊ฒŒ ํ…์ŠคํŠธ ์ฐฝ์ด ์ƒ๊ฒผ๋‹ค!

ํ…์ŠคํŠธ์ฐฝ์— ์ž…๋ ฅํ•˜๊ณ , ์ฐฝ ๋ฐ–์œผ๋กœ ๋งˆ์šฐ์Šค๋ฅผ ์ด๋™ํ•ด ๋นผ๋ฉด ์ง€์ •๋œ alert์ฐฝ์ด ๋œฌ๋‹ค!

์ด๋ ‡๊ฒŒ ์›น๋ธŒ๋ผ์šฐ์ € ์œ„์—์„œ ์ผ์–ด๋‚˜๋Š” ์ผ๋“ค์„ '์ด๋ฒคํŠธ'๋ผ๊ณ  ํ•œ๋‹ค. ๊ธฐ๋…ํ• ๋งŒํ•œ ์ด๋ฒคํŠธ๋ฅผ ๊ธฐ์–ตํ•ด ๋†จ๋‹ค!

๋“ฑ๋“ฑ 10-20๊ฐœ ์ •๋„ ์ด๋ฒคํŠธ๋ฅผ ์ด๋ฏธ ์ •๋ฆฌํ•ด๋†จ๋‹ค!

 

https://www.w3schools.com/tags/ev_onkeydown.asp

 

HTML onkeydown Event Attribute

HTML onkeydown Event Attribute โฎ HTML Event Attributes Example Execute a JavaScript when a user is pressing a key:

Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The onkeydown a

www.w3schools.com

 

onclick 

onchange

์ด๋Ÿฐ ์•„์ด๋“ค์ด ๋ฐ”๋กœ ์ด๋ฒคํŠธ ์ฝ”๋“œ!


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ์ƒˆ๋กœ์šด ๋ฐฉ๋ฒ•, Console

๋ณต์žกํ•œ ์ผ์ด ์•„๋‹ˆ๋ผ๋ฉด, ๊ผญ html ํŒŒ์ผ์„ ๋งŒ๋“ค์ง€ ์•Š๊ณ ๋„ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ console์—์„œ ๋ฐ”๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋ ‡๊ฒŒ ์›น์ƒ์˜ ์ € ๊ธ€์„ ๋ณต์‚ฌํ•ด์„œ console์— ๋ถ™์—ฌ๋„ฃ๊ธฐ ํ•ด์„œ, ๊ธ€์ž ์ˆ˜๋ฅผ ์„ธ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์ด๊ฒƒ๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋˜๋‹ค๋ฅธ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜๋‹ค. 

 


๊ฐœ๋ฐœ์ž๋„๊ตฌ>element> esc> console์ด ๋ฐ‘์— ๋œธ


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ์ดํ„ฐ ํƒ€์ž…_๋ฌธ์ž์—ด๊ณผ ์ˆซ์ž

์ปดํ“จํ„ฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์•„์ฃผ ์ค‘์š”ํ•˜๋‹ค. ๊ทธ๋ž˜์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ž˜ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด, ์ž˜ ๋ถ„๋ฅ˜ํ•˜๊ธฐ ์œ„ํ•ด ์ƒ๋‹นํžˆ ๋งŽ์€ ๋…ธ๋ ฅ์„ ํ•ด์™”๋‹ค.  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ๋Š” ํ˜•ํƒœ์˜ ์–ธ์–ด์—๋Š” ์–ด๋–ค ํ˜•ํƒœ์˜ ๋ฐ์ดํ„ฐ๋“ค์ด ์žˆ๋Š”๊ฐ€๋ฅผ ์‚ดํŽด๋ณด๊ณ , ๊ทธ ์ค‘์—์„œ ๊ฐ€์žฅ ๋Œ€ํ‘œ์ ์ธ/ ์ต์ˆ™ํ•  ๋งŒํ•œ ๋ฐ์ดํ„ฐ์ธ ๋ฌธ์ž์™€ ์ˆซ์ž์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค. 

 

๋ฐ์ดํ„ฐ ํƒ€์ž…

1) ์ˆซ์ž

์—ฐ์‚ฐ์ด ๊ต‰์žฅํžˆ ์ค‘์š”ํ•˜๋‹ค!

ex. 1+1 (+๋ผ๋Š” ๊ฒƒ์€, ์ดํ•ญ์—ฐ์‚ฐ์ž_์‚ฐ์ˆ ์—ฐ์‚ฐ์ž)

+, -, *, / => ์‚ฐ์ˆ ์—ฐ์‚ฐ์ž

 

2) ๋ฌธ์ž์—ด = string

""
''

๋ฌธ์ž๋Š” ๋ฌด์กฐ๊ฑด ๋”ฐ์˜ดํ‘œ ์•ˆ์— ๋„ฃ๋Š”๋‹ค!

"hello world".length

์ด๊ฑฐ๋Š” ๊ธ€์ž ์ˆ˜๋ฅผ ์„ธ์–ด์ฃผ๋Š” ๊ณต์‹์ด๋‹ค. 

๋Ÿฐ ์‹์˜

์ด๋Ÿฐ ์‹์˜ Property๋“ค์ด ๊ต‰์žฅํžˆ ๋งŽ์€๋ฐ, "Javascrpit string"์ด๋ผ๊ณ  ๊ฒ€์ƒ‰ํ•ด๋ณด์ž.

https://www.w3schools.com/js/js_string_methods.asp

 

JavaScript String Methods

JavaScript String Methods String methods help you to work with strings. String Methods and Properties Primitive values, like "John Doe", cannot have properties or methods (because they are not objects). But with JavaScript, methods and properties are also

www.w3schools.com

ํ—› w3school์— ํŠœํ† ๋ฆฌ์–ผ ๊ธฐ๋Šฅ๊นŒ์ง€ ์žˆ๋‹ค! ์‹ ๊ธฐํ•˜๊ตฐ..

 

์œ„์—์„œ๋ถ€ํ„ฐ ์ญ‰ ๋ด์•ผ๊ฒ ๋‹ค. ์ด๊ณ ์ž‰์Œค๊ณผ ๋ฐฐ์šด ๋‚ด์šฉ๋“ค์ด ์ญ‰ ๋‚˜์˜จ๋‹ค.

https://www.w3schools.com/js/js_syntax.asp

 

JavaScript Syntax

JavaScript Syntax JavaScript syntax is the set of rules, how JavaScript programs are constructed: var x, y, z;       // How to declare variables x = 5; y = 6;      // How to assign values z = x + y;         // How to compute values Java

www.w3schools.com

 

๋ฌธ์ž์™€ ์ˆซ์ž๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐํƒ€์ž…์ด๋ผ๋Š” ๊ฒƒ์„ ๋ฐฐ์› ๋‹ค. "๋ฌธ์ž์—ด"์„ ์“ฐ๋Š” ๊ฒƒ๊ณผ '์ˆซ์ž'๋ฅผ ์“ฐ๋Š” ๊ฒƒ์˜ ์ฐจ์ด๋ฅผ ์ดํ•ดํ•˜๊ณ , ์ž˜ ๊ตฌ๋ถ„ํ•ด์„œ ์จ์•ผํ•œ๋‹ค! ๊ทธ๋Ÿฌ๋ฉด ๋งˆ๋ฌด๋ฆฌ๋Š”.. ์ด๊ณ ์ž‰์Œค์˜ ๋ช…์–ธ ํˆฌ์ฒ™..

"์ดํ•ดํ•˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ์ต์ˆ™ํ•ด์ง€๋Š” ๊ฒ๋‹ˆ๋‹ค"

728x90
๋ฐ˜์‘ํ˜•