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>
๋๊ธ