소스는 절차적으로 확인하기~
간단 계산기형태 만들기
<head>
<script type="text/javascript">
const calc = function() {
let firstN = document.frm.num1.value;
let secondN = document.frm.num2.value;
if(firstN == '' || secondN == ''){
alert('숫자를 입력하세요');
}
else{
let selIndex = document.frm.sel.selectedIndex;
let firstNp = parseInt(firstN);
let secondNp = parseInt(secondN);
let result = 0;
switch(selIndex) {
case 0:
result = firstNp + secondNp;
break;
case 1:
result = firstNp - secondNp;
break;
case 2:
result = firstNp * secondNp;
break;
}
document.frm.result.value = result;
}
};
</script>
</head>
<body>
</body>
<form name="frm">
<input type="text" name="num1">
<select name="sel">
<option>+</option>
<option>-</option>
<option>*</option>
</select>
<input type="text" name="num2">
=
<input type="button" value="값 출력" onclick="calc()">
<input type="text" name="result">
</form>
해당 html에 접근하기1 - getElmentById / getElmentByClassName / getElmentByTagName 사용
<head>
<script type="text/javascript">
const viewTag = function() {
//getElmentById --> 해당 아이디에 접근
let h1 = document.getElementById('h1');
console.log(h1);
//getElmentByClassName --> 해당 클래스에 접근
//getElmentByTagName --> 해당 태그(기능)에 접근
let h2s = document.getElementsByTagName('h2');
console.log(h2s);
console.log(h2s.length);
for(let i = 0; i<h2s.length; i++) {
console.log(h2s[i]);
}
};
</script>
</head>
<body>
<input type="button" value="tag 보기" onclick="viewTag()">
<br><br>
<h2 id="h1">Header 1</h2>
<h2 id="h2">Header 2</h2>
</body>
querySelector / querySelectorAll 로 접근
<head>
<script type="text/javascript">
const viewTag = function(){
//querySelector - id에 많이 씀
//queryAllSelector - tag, class에 많이 씀
let h1 = document.querySelector("#h1");
console.log(h1);
let h2s = document.querySelectorAll('.c1');
console.log(h2s);
console.log(h2s[0]);
};
</script>
</head>
<body>
<input type="button" value="tag 보기" onclick="viewTag()">
<br><br>
<h2 id="h1" class="c1">Header 1</h2>
<h2 id="h2" class="c1">Header 2</h2>
</body>
innerHTML / textContent로 내용 가져오거나 수정(삭제)하기
<head>
<title>Document</title>
<script type="text/javascript">
const viewContent = function(){
const h1 = document.querySelector('#h1');
//기능 안에 있는 내용 출력
console.log(h1.innerHTML);
const h3 = document.querySelector('#h3');
//h3 기능 안에 내용 출력 -> 기능이 하나 더 있으므로 그거까지 출력하는 것
console.log(h3.innerHTML);
//html1 태그 제거시키고 내용만 보여줌
console.log(h3.textContent);
};
const modifyContent = function() {
const h1 = document.querySelector('#h1');
//해당 h1의 안의 내용을 수정해줌
//h1.innerHTML = 'Change Html';
h1.innerHTML = '<i>Change Html</i>';
};
const deleteContent = function() {
const h1 = document.querySelector('#h1');
// 내용 삭제도 가능하다.
h1.innerHTML = '';
};
</script>
</head>
<body>
<input type="button" value="tag 보기" onclick="viewContent()">
<input type="button" value="tag 수정" onclick="modifyContent()">
<input type="button" value="tag 삭제" onclick="deleteContent()">
<br><br>
<h2 id="h1" class="c1">Header 1</h2>
<h2 id="h2">Header 2</h2>
<h2 id="h3" class="c1">
<i>Header 3</i>
</h2>
</body>
tag보기 누르면
tag수정 누르면
tag삭제 누르면
응용하여 표 만들기
<head>
<script type="text/javascript">
const createTable = function() {
let html = '<table border="1"><tr><td>1열</td><td>2열</td><td>3열</td></tr></table>';
const div = document.querySelector('#result');
div.innerHTML = html;
};
const deleteTable = function() {
let html = '<table border="1"><tr><td>1열</td><td>2열</td><td>3열</td></tr></table>';
const div = document.querySelector('#result');
div.innerHTML = '';
};
</script>
</head>
<body>
<input type="button" value="table 추가" onclick="createTable()">
<input type="button" value="table 삭제" onclick="deleteTable()">
<br><hr><br>
<div id="result"></div>
</body>응용문제 - 구구단을 출력하는 함수 만들기
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
table {
width:800px;
border:1px solid black;
border-collapse: collapse;
}
td {
text-align: center;
border:1px solid black;
}
</style>
<script type="text/javascript">
const gugudan = function() {
let stDanp = parseInt(document.frm.num1.value);
let endDanp = parseInt(document.frm.num2.value);
if(endDanp < stDanp) { --> 시작단수가 끝단수보다 크면 경고창 띄우기.
alert('올바른 형식이 아닙니다!')
}
else {
let html = ('<table>');
for(let i = stDanp; i <= endDanp; i++) {
html += ('<tr>');
for(let j = 1; j <= 9; j++) {
html += ('<td>' + i + ' x ' + j + ' = ' +
(i * j) + '</td>')
}
html += ('</tr>');
}
html += ('</table>');
const div = document.querySelector('#i1');
div.innerHTML = html;
}
};
</script>
</head>
<body>
<table>
<tr>
<td>
<form name="frm">
<hr>
시작단수<input type="text" name="num1">
~
끝단수<input type="text" name="num2">
<input type="button" value="구구단 출력" onclick="gugudan()">
<hr><br><br>
<div id="i1"></div>
</form>
</td>
</tr>
</table>
</body>구구단 입력시
구구단 입력 오류시(시작단수가 더 클시)
이벤트
GUI - 이벤트 방식 중심
웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역에서 이루어지는 동작만을 말한다.
책 193~196 용어 정리하기
window.onload / window.onresize(브라우저 창이나 프레임 변경했을 때)
<script type="text/javascript">
//window 이벤트
window.onload = function() {
console.log('load event');
}
window.onresize = function() {
console.log('resize event');
}
</script>
onclick(클릭시) / onmouseover(마우스를 갖다놓을시) / onmouseout(마우스가 벗어날시)
<style type="text/css">
#div {
width:200px;
height: 200px;
border: 1px solid black;
background-color: lightblue;
}
</style>
<script type="text/javascript">
//mouse 이벤트 , div부분 마우스로 클릭 시 클릭 콘솔에 호출
window.onload = function() {
document.getElementById('div').onclick = function() {
console.log('click');
};
document.getElementById('div').onmouseover = function() {
console.log('mouseover');
};
document.getElementById('div').onmouseout = function() {
console.log('mouseouts');
};
};
</script>
</head>
<body>
<div id="div"></div>
</body>이 함수에서
onclick = 상자를 클릭하면 출력
onmouseover = 상자에 마우스를 가져다대면 출력
onmouseout = 상자에 마우스를 때면 출력
.addEventListener
window.onload같은 부분을 .addEventListener로 바꿀 수 있다(기능 동일)
<head>
<style type="text/css">
#div {
width:200px;
height: 200px;
border: 1px solid black;
background-color: lightblue;
}
</style>
<script type="text/javascript">
window.addEventListener('load',function(){ --> window.onload = function() {} 부분
const div = document.getElementById('div');
div.addEventListener('click',function() {
console.log('click');
});
});
</script>
</head>
<body>
<div id="div"></div>
</body>
keypress ( 키 누르는 동안 ~~~,,)
<head>
<script type="text/javascript">
window.onload = function() {
//입력시마다 콘솔창에 keypress 출력(한글은 안된다.)
document.getElementById('data').onkeypress = function() {
console.log('keypress');
}
}
</script>
</head>
<body>
<input type="text" id="data">
이벤트 함수에 매개변수를 넣어서 기능 주기
<head>
<style type="text/css">
#div {
width:200px;
height: 200px;
border: 1px solid black;
background-color: lightblue;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('div').onclick = function(e) {
console.log(e);
console.log(e.x); --> 클릭하면 해당 x축 출력
console.log(e.y); --> 클릭하면 해당 y축 출력
console.log('altkey : ', e.altKey); -->클릭과 alt같이 누르면 true 출력, 아니면 false
console.log('shiftkey : ', e.shiftKey); --> 클릭과 shift같이 누르면 true 출력, 아니면 false
console.log('ctrlkey : ', e.ctrlKey); --> 클릭과 ctrl같이 누르면 true 출력, 아니면 false
}
};
</script>
</head>
<body>
<div id="div"></div>
</body>
code, key
<head>
<script type="text/javascript">
window.onload = function() {
//입력시마다 콘솔창에 keypress 출력(한글은 안된다.)
document.getElementById('data').onkeypress = function(event) {
//입력 키에 대한 정보를 얻을 수 있다.(이것도 한글 안된다)
console.log('code', event.code); //코드(명칭)
console.log('key', event.key); //값
}
}
</script>
</head>
<body>
<input type="text" id="data">
</body>
이벤트에 null
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('btn').onclick= function() {
console.log('click');
//이벤트 제거 (한번 실행된 후 실행 중지됨)
document.getElementById('btn').onclick= null;
};
};
</script>
</head>
<body>
<input type="button" id="btn" value="클릭">
</body>버튼을 누르면 한 번 실행된 후 null로 인하여 이후 클릭하여도 출력이 안된다.
여러개의 버튼 각각 클릭, 적용 시키기
<head>
<script type="text/javascript">
window.onload = function() {
let buttons = document.getElementsByClassName('btn');
//for문 사용
for(let i = 0; i<buttons.length; i++) {
buttons[i].onclick = function() {
console.log('버튼클릭',this); // this - 자기참조
console.log('버튼클릭', this.id); //자신의 아이디 참조
}
}
};
</script>
</head>
<body>
<input type="button" id="btn1" class="btn" value="클릭1">
<input type="button" id="btn2" class="btn" value="클릭2">
<input type="button" id="btn3" class="btn" value="클릭3">
<input type="button" id="btn4" class="btn" value="클릭4">
<input type="button" id="btn5" class="btn" value="클릭5">
</body> 버튼 클릭시
클릭된 버튼에서 버튼클릭과 자기의 정보(.id / .value 등 해당 위치기준)가 출력됨
응용문제 - 클릭시 텍스트칸에 특정 문자 뜨게 하기
<head>
<script type="text/javascript">
window.onload = function() {
let buttons = document.getElementsByClassName('btn');
for(let i = 0; i<buttons.length; i++) {
buttons[i].onclick = function() {
document.frm.data.value = '버튼' + [i+1] + '가 출력되었습니다.';
}
}
};
</script>
</head>
<body>
<form name="frm">
<input type="button" id="btn1" class="btn" value="클릭1">
<input type="button" id="btn2" class="btn" value="클릭2">
<input type="button" id="btn3" class="btn" value="클릭3">
<input type="button" id="btn4" class="btn" value="클릭4">
<input type="button" id="btn5" class="btn" value="클릭5">
<br><hr><br>
<input type="text" name="data">
</form>
</body> 클릭에 따라 텍스트칸에 나오는 문자가 다르다
이벤트의 강제성 ( 버튼을 누르면 숫자 증가하게 하기)
<head>
<script type="text/javascript">
//이벤트의 강제성
window.onload = function() {
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let count1 = document.getElementById('count1');
let count2 = document.getElementById('count2');
btn1.onclick = function() {
count1.innerHTML = parseInt(count1.innerHTML) + 1;
}
btn2.onclick = function() {
count2.innerHTML = parseInt(count2.innerHTML) + 1;
//함수처럼 사용해서 함수를 호출할 수 있다.
btn1.onclick();
}
};
</script>
</head>
<body>
<button id="btn1">클릭</button>
<button id="btn2">클릭</button>
<br><hr><br>
<h1>button1 - <span id="count1">0</span></h1>
<h1>button2 - <span id="count2">0</span></h1>
</body>버튼2 클릭시 btn1도 같이 호출되어 숫자가 같이 올라간다. (이벤트의 강제발생) (버튼1을 클릭하면 혼자 증가)
submit(전송) / onsubmit(submit 제어)
아이디가 입력되지 않으면 경고창 띄우고 전송하지 않기
<head>
<script type="text/javascript">
const checkfrm1 = function() {
if(document.frm.id.value == ''){ -->아이디 입력 칸이 공백이면 경고창 뜨고 false 반환
alert('아이디를 입력하세요');
return false;
}
};
</script>
</head>
<body>
<form action="test.html" name="frm" method="get" onsubmit=" return checkfrm1()"> --> return 적어서 false 반환하여 전송 막기
아이디 : <input type="text" name="id" id="id">
<!-- submit : 전송기능이 기본이다. -->
<input type="submit" value="전송">
<input type="button" value="전송">
</form>
</body>아이디 입력하면 전송되고 하지않으면 창이 뜨고 전송되지 않는다.
기본 기능 없애기(preventDefault)
브라우저 우클릭 제한하기
<script type="text/javascript">
window.addEventListener('contextmenu', function(e) {
e.preventDefault();
alert('우클릭 제한');
});
</script>
이벤트 버블링
특정요소에서 이벤트가 발생했을 때 그 이벤트가 해당 요소 뿐 아니라 부모, 부모의 부모까지 똑같이 적용되는 것
<head>
<style type="text/css">
* { border:1px solid orangered; text-align: center; padding:10px}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('div1').onclick = function() {
console.log('div1 클릭');
};
document.getElementById('div2').onclick = function() {
console.log('div2 클릭');
};
document.getElementById('h1').onclick = function() {
console.log('h1 클릭');
};
document.getElementById('p1').onclick = function() {
console.log('p1 클릭');
};
};
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<h1 id="h1">
<p id="p1">클릭 영역</p>
</h1>
</div>
</div>
</body>가운데 클릭영역은 p1이므로 여기를 클릭하면 위에 요소들도 다 처리된다.(이벤트 버블링)
버블링 현상 막기
document.getElementById('p1').onclick = function(e) {
console.log('p1 클릭');
if(e.stopPropagation) {
e.stopPropagation();
}
};
해당부분의 버블링 현상을 막는다. 위 그림에서 p1만 출력되는 것버블링 캡쳐링 간단표(기능들은 예시)
자바스크립트에서 css 접근하기
요소.style.속성명
style 추가 / 삭제
<head>
<script type="text/javascript">
window.onload = function() {
//style 추가
document.getElementById('btn1').onclick = function() {
let h1 = document.getElementById('h1');
h1.style.border = '1px solid plum';
h1.style.color = 'orange';
};
//style 삭제
document.getElementById('btn2').onclick = function() {
let h1 = document.getElementById('h1');
h1.style.border = '';
h1.style.color = '';
}
};
</script>
</head>
<body>
<input type="button" id="btn1" value="style 추가">
<input type="button" id="btn2" value="style 삭제">
<br><hr><br>
<h1 id="h1">Hello Style</h1>
</body>삭제 누르면 색깔이 삭제된다.
class 이용하여 css 접근하기
class는 2개도 적용 가능하다
<head>
<style type="text/css">
.t1 {
border: 1px solid salmon;
}
.t2 {
color:orange;
}
</style>
<script type="text/javascript">
window.onload = function() {
//class 목록을 보여주는 소스
document.getElementById('btn1').onclick = function() {
const h1s = document.querySelector('#h2');
console.log(h1s.classList);
};
//class에 style t2 기능을 h2아이디에 추가하는 소스
document.getElementById('btn2').onclick = function() {
const h2 = document.querySelector('#h2');
h2.classList.add('t2');
};
//style 제거하는 소스
document.getElementById('btn3').onclick = function() {
const h2 = document.querySelector('#h2');
h2.classList.remove('t2');
};
};
</script>
</head>
<body>
<input type="button" id="btn1" value="class 목록">
<input type="button" id="btn2" value="class 추가">
<input type="button" id="btn3" value="class 제거">
<br><hr><br>
<h1 id="h1" class="t1 t2">Hello Style</h1> --> t1 t2 적용가능
<h1 id="h2" class="t1">Hello Style</h1>
<h1 id="h3" class="t2">Hello Style</h1>
</body>
끄적끄적