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

๐Ÿš€ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ JavaScript

1๏ธโƒฃ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์ž…๋ฌธ

by Meteora_ 2021. 3. 2.
728x90

javascrip ๋Š” ์ž๋ฐ”์™€ ๊ฐ™์ง€ ์•Š๋‹ค.

javascript : Nodejs, Vue, react, angler
Client ์ชฝ ์–ธ์–ด, front end ์ชฝ ์–ธ์–ด


๋ชฉ์  : ์›น ๋ธŒ๋ผ์šฐ์ €์˜ tag๋ฅผ ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•œ ์Šคํฌ๋ฆฝํŠธ์ด๋‹ค.

๋ณด์กฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด.
์ปดํŒŒ์ผ์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค. ํ•ด์„๋งŒํ•œ๋‹ค. -> ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋ณ๋‹ค, ์†๋„๊ฐ€ ๋น ๋ฅด๋‹ค
Java Script ๊ฐ„๋žตํ™”, ๊ฒฝ๋Ÿ‰ํ™” -> JQuery

์˜ˆ) ํšŒ์›๊ฐ€์ž… -> ๋นˆ์นธ์ด ์žˆ๋Š”์ง€ ์กฐ์‚ฌ, ID์˜ ๊ธ€์ž์ˆ˜๋ฅผ ์กฐ์‚ฌ, ํŒจ์Šค์›Œ๋“œ์— ์ˆซ์ž๋‚˜ ๋Œ€์†Œ๋ฌธ์ž ํฌํ•จ ์กฐ์‚ฌ
CSS์— ๋Œ€ํ•ด์„œ ์ œ์–ด, ๊ฐ’์„ ๊ตฌํ˜„, Timer๋ฅผ ์„ค์ •ํ•ด์„œ ํŠน์ˆ˜ํšจ๊ณผ๊ฐ™์€ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅ

function
class

element(์š”์†Œ)
์†์„ฑ(Attribute) -> ํŠน์„ฑ(Property)
id  -> 1๊ฐœ
class -> ๋‹ค์ˆ˜  CSS
name -> ๋‹ค์ˆ˜  CSS, Checkbox link

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<!-- javascript != java
	
		javascript : Nodejs, Vue, react, angler
		Client ์ชฝ ์–ธ์–ด, front end ์ชฝ
		๋ชฉ์  : ์›น ๋ธŒ๋ผ์šฐ์ €์˜ tag๋ฅผ ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•œ ์Šคํฌ๋ฆฝํŠธ
			๋ณด์กฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด.
			์ปดํŒŒ์ผ์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค. ํ•ด์„๋งŒํ•œ๋‹ค. -> ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋ณ๋‹ค, ์†๋„๊ฐ€ ๋น ๋ฅด๋‹ค
		Java Script ๊ฐ„๋žตํ™”, ๊ฒฝ๋Ÿ‰ํ™” -> JQuery
		
		์˜ˆ) ํšŒ์›๊ฐ€์ž… -> ๋นˆ์นธ์ด ์žˆ๋Š”์ง€ ์กฐ์‚ฌ, ID์˜ ๊ธ€์ž์ˆ˜๋ฅผ ์กฐ์‚ฌ, ํŒจ์Šค์›Œ๋“œ์— ์ˆซ์ž๋‚˜ ๋Œ€์†Œ๋ฌธ์ž ํฌํ•จ ์กฐ์‚ฌ
			CSS์— ๋Œ€ํ•ด์„œ ์ œ์–ด, ๊ฐ’์„ ๊ตฌํ˜„, Timer๋ฅผ ์„ค์ •ํ•ด์„œ ํŠน์ˆ˜ํšจ๊ณผ๊ฐ™์€ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅ
			
		function
		class
		
		element(์š”์†Œ)
		์†์„ฑ(Attribute) -> ํŠน์„ฑ(Property)
		id 		-> 1๊ฐœ	
		class	-> ๋‹ค์ˆ˜  CSS
		name	-> ๋‹ค์ˆ˜  CSS, Checkbox link
	 -->
	 
	<p id="demo">p tag id demo</p>
	 
	<script type="text/javascript">
	/*์—ฌ๊ธฐ๋Š” ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์˜์—ญ ํ•œ์ค„, ๋ฒ”์œ„ ์ฃผ์„๋ฌธ ๊ฐ€๋Šฅ*/
	
	console.log('Java Script๊ฐ€ ์‹คํ–‰๋˜์—ˆ์Œ');
	
	//alert('Java Script๊ฐ€ ์‹คํ–‰๋˜์—ˆ์Œ');
	
	var v = document.getElementById("demo").innerHTML;   // Getter,  p ์•ˆ์—์žˆ๋Š” html ์ฝ”๋“œ๋ฅผ ๊ฐ–๊ณ ์˜จ๋‹ค.
	alert(v);
	
	document.getElementById("demo").innerHTML = 'id demo tag p'; // Setter
	
	var obj = document.getElementById("demo"); // pํƒœ๊ทธ ๋ผ๋Š” ์˜ค๋ธŒ์ ํŠธ (resource)๋ฅผ ๊ฐ–๊ณ ์˜จ๊ฒƒ
	alert(obj.innerHTML);
	
	
	</script>
	 
	 
	 
	 
	
</body>
</html>

๋Œ“๊ธ€