ํ์ต๋ด์ฉ
JavaScript (!= Java) JavaScript : NodeJS, Vue, react, anguler
Client ์ชฝ ์ธ์ด. front end
๋ชฉ์ : ์น ๋ธ๋ผ์ฐ์ ์ Tag๋ฅผ ์ ๊ทผํ๊ธฐ ์ํ ์คํฌ๋ฆฝํธ.
๋ณด์กฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ด๋ค.
์ปดํ์ผ์ ํ์ง ์๋๋ค. -> ๊ฐ๋ณ๋ค -> ์๋๊ฐ ๋น ๋ฅด๋ค
Java Script ๊ฐ๋ตํ, ๊ฒฝ๋ํ -> JQuery
์) ํ์๊ฐ์
-> ๋น์นธ์ ์กฐ์ฌ. ID ๊ธ์์๋ฅผ ์กฐ์ฌ. PW์ ์ซ์, ๋์๋ฌธ์ ํฌํจ ์กฐ์ฌ
CSS์ ๋ํด์ ์ ์ด, ๊ตฌํ
Timer๋ฅผ ์ค์ ํด์ ํน์ํจ๊ณผ ๊ฐ์ ์ฒ๋ฆฌ ๊ฐ๋ฅ
์์ฑ(Attribute) -> ํน์ฑ(Property)
id -> 1๊ฐ ์ ๊ทผ
class -> ๋ค์ ์ ๊ทผ. CSS์ ๋ง์ด ์ฌ์ฉ
name -> ๋ค์ ์ ๊ทผ. CheckBox, link์ ์ฌ์ฉ
- ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ ํ์
HTML ๋ฌธ์์
<script type="text/javascript">
//์ฌ๊ธฐ๋ JavaScript ์์ญ
</script>๋ก ๊ฐ์ธ๋ฉด ์๋ฐ์คํธ๋ฆฝํธ์ ์์ญ์ด ๋๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ถ๋ฌ์ค๋ ๋ฐฉ๋ฒ
1. External ๋ฐฉ์์ผ๋ก js ๋ถ๋ฌ์ค๊ธฐ
<head> ๋ถ๋ถ์ ํ์ผ ๊ฒฝ๋ก(src)๋ฅผ ๋ฃ์ด ์์ฑ. -> HTML๊ณผ JS๋ฅผ ๋ถ๋ฆฌ
<script type="text/javascript" src="myScript.js"></script>
2. Internal ๋ฐฉ์์ผ๋ก js ๋ถ๋ฌ์ค๊ธฐ
<head> ๋๋ <body> ์์ญ์์ ์คํฌ๋ฆฝํธ ๋ถ๋ฌ์ค๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//js ์์ญ
</script>
</head>
<body>
</body>
</html>
3. Inline ๋ฐฉ์์ผ๋ก js ๋ถ๋ฌ์ค๊ธฐ
์ด๋ฒคํธ๋ฅผ ์ด๋ฒคํธ ๋์์ ํ๊ทธ ์์ฑ์ผ๋ก ์ง์ ํ๋ค. HTML์์ญ๊ณผ JavaScript์ ์์ญ์ด ํผ์ฌ๋์ด ์๊ธฐ ๋๋ฌธ์
๋ฐ๋์งํ ๋ฐฉ๋ฒ์ ์๋๋ค.
<input type="button" onclick="alert('Hello world');" value="button" />
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ณ์ ์ ์ธ ๋ฐฉ๋ฒ
์๋ฐ์คํฌ๋ฆฝํธ๋ ์๋ฐ์ ๋ค๋ฅด๊ฒ ์๋ฃ์ ํ์ ๋ง๋ค ๋ค๋ฅธ ์๋ฃํ์ ์ฌ์ฉํ์ง ์๋๋ค.
ํ ๋ณ์๋ก ์ ์, ์ค์, ๋ฌธ์, boolean๊ฐ ๋ฑ ๊ตฌ์ ๋ฐ์ง ์๊ณ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค.
ex)
var num = 123;
var pi = 3.141592;
var name = "ํ๊ธธ๋";
var answer = true;
- var ํ๋๋ก ๋ชจ๋ ์๋ฃํ์ ์ฌ์ฉ ํ ์ ์๋ค.
1. var
๋ณ์ ์ ์ธ์ ์ ์ฐํ์ฌ ํธ๋ฆฌํ ์ ์์ผ๋, ์ค๋ณต ์ ์ธ์ ๊ตฌ์ ๋ฐ์ง ์์ ๋ฌธ์ฅ์ด ๊ธธ์ด์ง๋ฉด ์ค๋ฅ๋ฅผ ํ์ธํ๊ธฐ ํ๋ค์ด ์ฌ์ฉํ๊ธฐ ๋ฐ๋์งํ์ง ์๋ค.
var human = "ํ๊ธธ๋";
console.log(human);
var human = "์ฑ์ถํฅ"; // ์ฌ์ ์ธ ํ์๋ ๊ฐ์ด ์ ์ฅ๋๋ค.
console.log(human);
2. let
์ค๋ณต ์ ์ธ ๋ถ๊ฐ๋ฅ, ๋ณ์ ์ฌํ ๋น ๊ฐ๋ฅ,
let human = "ํ๊ธธ๋";
console.log(human);
let human = "์ฑ์ถํฅ";
console.log(human);
// var์ ๋ค๋ฅด๊ฒ ์ค๋ณต์ ์ธ์ ๋ํด ์๋ฌ๊ฐ ๋ฌ๋ค.
// Uncaught SyntaxError: Identifier 'human' has already been declared
3. const
์ค๋ณต ์ ์ธ ๋ถ๊ฐ๋ฅ, ๋ณ์ ์ฌํ ๋น ๋ถ๊ฐ๋ฅ,
const human = "ํ๊ธธ๋";
console.log(human);
human = "์ฑ์ถํฅ";
console.log(human);
//const๋ ๋ณ์ ์ฌํ ๋น๋ ๋ถ๊ฐ๋ฅํ๋ค.
//Uncaught TypeError: Assignment to constant variable.
- getElementById
HTML์์ญ์์ ํด๋น ID๊ฐ์ ๊ฐ์ง ํ๊ทธ๋ฅผ ๋ถ๋ฌ์จ๋ค.
์๋๋ ์์
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo">p tag id demo</p> <!-- ์ผ๋ฐ ํ๊ทธ(output) -->
<input type="text" id="text" value="Hello" size="20"><br> <!-- form ํ๊ทธ(input, output) -->
<input type="button" value="input button" onclick="btnclick()"><br> <!-- ํด๋ฆญ ํ๋ฉด btnclick() ์คํ -->
<script type="text/javascript">
function btnclick(){
alert("btnclick() ํธ์ถ"); // "btnclick() ํธ์ถ"์ด๋ผ๋ ๊ฒฝ๊ณ ์ฐฝ์ด ๋ฌ๋ค.
document.getElementById("demo").innerHTML = "๋ฒํผ์ด ํด๋ฆญ๋จ"; // p ํ๊ทธ์ ๋ฌธ๊ตฌ("p tag id demo")๊ฐ "๋ฒํผ์ด ํด๋ฆญ๋จ"์ผ๋ก ๋ณ๊ฒฝ๋๋ค.
let t = document.getElementById("text").value; // text์ value๊ฐ("Hello")๋ฅผ ๊ฐ์ ธ์จ๋ค.
alert("text : " +t); // "text : Hello"๋ผ๋ ๊ฒฝ๊ณ ์ฐฝ์ด ๋ฌ๋ค.
document.getElementById("text").value = "World"; //text์ value๊ฐ๋ฅผ "World"๋ก ๋ณ๊ฒฝํ๋ค.
}
</script>
</body>
</html>
ํ๋ฉด ์ถ๋ ฅ
- Date()
๋ ์ง๋ฅผ ๋ํ๋ด๋ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ค.
let d = new Date(); //(๋ฉ์ถฐ์๋) ํ์ฌ ์๊ฐ์ด ๋ค์ด์์๋ค.
d = new Date(2021, 6 - 1, 23, 6, 20, 10, 0);
d = new Date("October 12, 2021 12:32:35");
document.getElementById("date").innerHTML = d; // ์ ์ฒด ๋ ์ง + ์๊ฐ Tue Mar 02 2021 13:04:31 GMT+0900 (๋ํ๋ฏผ๊ตญ ํ์ค์)
/*
document.getElementById("date").innerHTML = d.getDay(); // ์์ผ 2 (ํ์์ผ - ์ซ์๋ก ํ๊ธฐ๋๋ค.)
document.getElementById("date").innerHTML = d.getFullYear(); // ์ฐ๋ 2021
document.getElementById("date").innerHTML = d.getMonth() + 1; // ์(+1๋ฅผ ํด์ค) 3
document.getElementById("date").innerHTML = d.getDate(); // ์ผ 2
document.getElementById("date").innerHTML = d.getHours(); // ์ 13
document.getElementById("date").innerHTML = d.getMinutes(); // ๋ถ 4
document.getElementById("date").innerHTML = d.getSeconds(); // ์ด 31
*/
var timer = setInterval(function(){
console.log("Hello!!");
}, 1000)
setInterval()๋ก ์๊ฐ์ด ํ๋ฅด๊ฒ ๋ง๋ค ์ ์๋ค.
function displayDate() {
document.getElementById('demo').innerHTML = Date();
document.getElementById('text').value = Date();
}
setInterval("displayDate()", 1000); //์๊ฐ์ด ๊ณ์ ํ๋ฅธ๋ค. 1000ms(1์ด) ๊ฐ๊ฒฉ์ผ๋ก displayDate()๋ฅผ ํธ์ถ.
- ์ซ์ ๋ ๊ฐ์ ๋ฃ์ผ๋ฉด ์ฐ์ฐํด์ฃผ๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>๋ณ์์ ์ฐ์ฐ</h2>
<p>a,b์ ๋ํด์ ๋ณ์ a์ b์ ๊ณ์ฐ ๊ฒฐ๊ณผ๋ฅผ ํ์ํฉ๋๋ค.</p>
<!-- ์ฐ์ฐ๊ธฐํธ๋ง๋ค ๋ฒํผ์ ๋ง๋ค๊ณ ํด๋ฆญ ์ func(1~5)ํจ์๋ฅผ ํธ์ถํ๋ค. -->
<button type="button" id = "plus" onclick="func(1)">๋ง์
</button>
<button type="button" id = "minus" onclick="func(2)">๋บ์
</button>
<button type="button" id = "multi" onclick="func(3)">๊ณฑ์
</button>
<button type="button" id = "div" onclick="func(4)">๋๋์
</button>
<button type="button" id = "rest" onclick="func(5)">๋๋จธ์ง</button>
<br>
<br>
<!-- ๊ฐ์ ์
์ถ๋ ฅํ text ๋ฐ์ค ์์ฑ -->
<input type="text" id="aText">
<input type="text" id="operText" size="10">
<input type="text" id="bText">
= <input type="text" id="result">
<script type="text/javascript">
let a, b;
function getValue() { //aText์ bText์ ์
๋ ฅ๋ ์ a, b๋ฅผ ์ ์ํํ์ฌ ๊ฐ์ ธ์จ๋ค.
a = parseInt(document.getElementById("aText").value);
b = parseInt(document.getElementById("bText").value);
}
function func(num) {
getValue(); //์ ์ํ๋ a,b๋ฅผ ๊ฐ์ ธ์จ๋ค.
let answer = document.getElementById('result').value; //'๊ฒฐ๊ณผ๊ฐ์ ๋ํ๋ด๋ result'์ value๊ฐ = answer
if(num == 1) { //๋ง์
์ ๊ฒฝ์ฐ
answer = a + b;
document.getElementById('operText').value = '+';
} else if(num == 2){ //๋บ์
์ ๊ฒฝ์ฐ
answer = a - b;
document.getElementById('operText').value = '-';
} else if(num == 3){ //๊ณฑ์
์ ๊ฒฝ์ฐ
answer = a * b;
document.getElementById('operText').value = 'X';
} else if(num == 4){ //๋๋์
์ ๊ฒฝ์ฐ
if(b == 0) { //๋๋๋ ๊ฐ์ด 0์ผ ๊ฒฝ์ฐ
alert('๊ณ์ฐํ ์ ์์ต๋๋ค.');
return;
}
answer = a / b;
document.getElementById('operText').value = '/';
} else if(num == 5){ //๋๋จธ์ง๊ฐ์ ๊ฒฝ์ฐ
answer = a % b;
document.getElementById('operText').value = '%';
}
document.getElementById('result').value = answer;
}
</script>
</body>
</html>
์ถ๋ ฅ ํ๋ฉด
- ๋ฐ์ค๋ฅผ ์ฒดํฌํ์ฌ ์๊ธ ์ถ๊ฐ ์ ์ฐํ๊ธฐ
( ๊ณ์ ์ค๋ฅ๊ฐ ๋ ์ ์๊ฒ ๋ ์ฌ์ค : ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ Internal ๋ฐฉ์์ผ๋ก ๋ถ๋ฌ์ฌ ๋ head์ ๋ถ๋ฌ์ค๋์ง body์ ๋ถ๋ฌ์ค๋์ง ์ฐจ์ด๊ฐ ์์๋ค.
HTML์์ ํ๊ทธ์ ์ ์ธ์ด ๋ ํ์ JS์์ ๊ทธ ๊ฐ์ ๊ฐ์ ธ์ ๋ณ์๋ฅผ ์ ์ธํด์ผ ํ๋ฏ๋ก, ์๋์ ๊ฐ์ ์์์์ body, ๊ทธ์ค์์ ํ๊ทธ์ ์๋์ JS์ ์์ญ์ด ์์ผ error๊ฐ ๋์ง ์์๋ค. ์ ์ธ์ ์์๊ฐ ์ค์ํ๋จ ๋ป์ด๋ค.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>์ฒด์ก๊ด ์ด์ฉ ์๊ธ</h1>
<p>๊ธฐ๋ณธ ์ฌ์ฉ๋ฃ (2๋ฉด, 4์๊ฐ) 40,800์</p>
<form name="frm"> <!-- form์ผ๋ก ๋ฌถ์ด ๊ฐ๊ฐ์ ํ๊ทธ๋ฅผ ์์๋๋ก ๊ฐ์ ธ์ฌ ์ ์๋ค. (์ฌ๊ธฐ์ ์ด 4๊ฐ) -->
<input type="checkbox" id="ch1" value="20000" onclick="sum(0)"> ์ผ๊ฐ์กฐ๋ช
(20,000์) <br>
<input type="checkbox" id="ch2" value="4000" onclick="sum(1)"> ๋ฐฐ๊ตฌ ๋คํธ x 2๋ฉด(4,000์) <br>
<input type="checkbox" id="ch3" value="5000" onclick="sum(2)"> ๋ฐฐ๊ตฌ x 10๊ฐ(5,000์) <br>
<br>
ํฉ๊ณ๊ธ์ก <input id="t1" type="text" value="40800">์
</form>
<script type="text/javascript">
let arr = new Array(3); // ๋ฐฐ์ด์ ์ด์ฉํ์ฌ ๊ฐ ๊ฐ์ ธ์ค๊ธฐ
arr[0] = parseInt(document.getElementById("ch1").value);
arr[1] = parseInt(document.getElementById("ch2").value);
arr[2] = parseInt(document.getElementById("ch3").value);
let total = parseInt(document.getElementById("t1").value);
function sum(num) {
if(document.frm.elements[num].checked == true) {
alert(num + "๋ฒ์งธ ์ฒดํฌ๋ฐ์ค ํด๋ฆญ")
total = total + arr[num];
} else {
total = total - arr[num];
}
document.frm.elements[3].value = total;
}
</script>
</body>
</html>
์ถ๋ ฅ ํ๋ฉด
'๐ป ๊ฐ๋ฐ > ๐ TIL (Today I Learned)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 21.03.04 TIL(D+36 JavaScript) (0) | 2021.03.04 |
|---|---|
| 21.03.03 TIL(D+35 JavaScript) (0) | 2021.03.03 |
| 21.02.22 TIL(D+29 JDBC ํ์ฉ AccountBook ๋ง๋ค๊ธฐ) (0) | 2021.02.22 |
| 21.02.19 TIL(D+28 JDBC์ ํตํ DML ๊ตฌํ) (0) | 2021.02.19 |
| 21.02.18 TIL (D+27 ORACLE PL/SQL) (0) | 2021.02.18 |
