* css제어 - 문제 1~2
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<input type = "checkbox" name = "seat" value = "1">1번
<input type = "checkbox" name = "seat" value = "2" >2번
<input type = "checkbox" name = "seat" value = "3" >3번
<input type = "checkbox" name = "seat" value = "4" >4번
<input type = "checkbox" name = "seat" value = "5" >5번
<input type = "checkbox" name = "seat" value = "6" >6번
<input type = "checkbox" name = "seat" value = "7" >7번
<input type = "checkbox" name = "seat" value = "8" >8번
<input type = "checkbox" name = "seat" value = "9" >9번
<button type = "button" id = "btn">클릭</button>
<div id="div"></div>
<script>
//버튼을 클릭시, 좌석이 적어도 한개 이상 체크되어 있지 않다면 경고창을 띄우세요.
var checkbox = document.getElementsByName("seat");
var button = document.getElementById("btn");
button.onclick = function(){
var count = 0;
for(var i = 0; i < checkbox.length; i++) {
if(checkbox[i].checked == false) {
count++;
}
}
if(count == checkbox.length) {
alert("한 개 이상 체크해주세요");
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<h3>JS 카운트 만들기 - this, innerHTML, value 속성을 사용하면 됩니다.</h3>
<input type = "number" value="0" id="number" readonly>
<!-- this는 이벤트 안에서만 자기 자신을 반환한다.
여기서 자기 자신은 태그(버튼부터 버튼까지)를 의미한다.
이벤트가 아닌 곳에서는 최상위 객체를 반환 -->
<button onclick="calc(this)" id = "plus">증가</button>
<button onclick="calc(this)" id = "minus">감소</button>
<script>
var plus = document.getElementById("plus").value;
var minus = document.getElementById("minus").value;
var number = document.getElementById("number");
function calc(a){
if(a.innerHTML == "증가"){
number.value++;
} else {
if(number.value == "0"){
alert("0 이하일 때는 내려갈 수 없습니다.")
} else {
number.value--;
}
}
}
</script>
</body>
</html>
1. 노드 css 변경하기
- 노드의 css속성을 바꿀 때는 style속성을 이용합니다
- css의 속성은 카멜표기법을 따릅니다.
- 노드의 style에 전달되는 값은 문자열로 작성합니다
* 규칙
노드.style.css속성 = 값
* css 제어 - 문제 3, 답안
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<article>
<img src = "img/1.jpg" width="200" style="border: 3px solid black;" id = "img">
<select id = "weather">
<option value="1.jpg" id = "spring">봄</option>
<option value="2.jpg" id = "summer">여름</option>
<option value="3.jpg" id = "autumn">가을</option>
<option value="4.jpg" id = "winter">겨울</option>
</select>
<button class = "btn">이미지 바꾸기</button>
<input type = "color" class = "input">
<button class = "btn2">색상 변경하기</button>
</article>
<script>
var img = document.getElementById("img");
var weather = document.getElementById("weather");
//getElementById, querySelector, querySelectorAll은 각자의 값을 가져오고 나머지는 배열로 받아옴
var btn = document.querySelector(".btn");
var input = document.querySelector(".input");
btn.onclick = function(){
img.src = "img/"+ weather.value;
}
var btn2 = document.querySelector(".btn2");
console.log(btn2);
btn2.onclick = function(){
img.style.borderColor = input.value;
}
//input.value 값 확인하는 기능
//input.onchange = function(){
//console.log(input.value);
// }
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<article>
<img src = "img/1.jpg" width="200" class = "img" style="border: 3px solid black;">
<select class = "sel">
<option value="1.jpg">봄</option>
<option value="2.jpg">여름</option>
<option value="3.jpg">가을</option>
<option value="4.jpg">겨울</option>
</select>
<button class = "btn">이미지 바꾸기</button>
<input type = "color" class = "input">
<button class = "btn2">색상 변경하기</button>
</article>
<script>
//버튼을 클릭하면 select태그의 value를 img의 src에 넣는다.
//셋 다 클래스니까 ".~" 이런 식으로 표기
var img = document.querySelector(".img");
var sel = document.querySelector(".sel");
var btn = document.querySelector(".btn");
btn.onclick = function(){
img.src = "img/" + sel.value;
}
//input의 value를 얻어서 img의 style에 적용
var input = document.querySelector(".input");
var btn2 = document.querySelector(".btn2");
btn2.onclick = function(){
img.style.border = "3px solid" + input.value;
}
</script>
</body>
</html>
* css 제어 - 문제 4, 답안
<!DOCTYPE html>
<html lang="en">
<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>
input:focus {
outline: none;
}
</style>
</head>
<body>
<h3>onfocus - input에 focus가 들어갈 때(마우스가 포커싱을 줄 때) 그 때 동작합니다, onblur(input에 focus가 떠났을 때 동작)</h3>
<!-- <input type = "text" class ="xx">
<script>
var xx = document.querySelector(".xx");
xx.onfocus = function() {
console.log("포커스 진입");
}
xx.onblur = function(){
console.log("포커스 아웃");
}
</script> -->
아이디 <input type="text" class="id" placeholder="4개 이상">
<div class = "text"></div>
<script>
var id = document.querySelector(".id");
var text = document.querySelector(".text");
id.onblur = function () {
if (id.value.length < 4) {
text.innerHTML = "아이디 4글자 이상이거든요?";
id.style.borderColor = "red";
} else {
text.innerHTML = "";
id.style.borderColor = "green";
}
}
</script>
비밀번호 <input type="text" class="pw">
<div class = "text2"></div>
<script>
var pw = document.querySelector(".pw");
var text2 = document.querySelector(".text2");
pw.onblur = function () {
if (pw.value.length < 9) {
text2.innerHTML = "비밀번호 9글자 이상이거든요?"
pw.style.borderColor = "red";
} else {
text2.innerHTML = "";
pw.style.borderColor = "green";
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<input type = "text" id = "id" placeholder="4글자 이상">
<span class = "idmsg"></span>
<br>
<input type = "password" pw = "pw" placeholder="9글자 이상">
<div class = "pwmsg"></div>
<script>
var id = document.getElementById("id");
var pw = document.getElementById("pw");
var idmsg = document.querySelector(".idmsg");
var pwmsg = document.querySelector(".pwmsg");
id.onchange = function(){
//console.log(id.value.length);
if(id.value.length < 4 ){
id.style.border = "1px solid red";
idmsg.innerHTML = "아이디는 4글자 이상입니다";
} else {
id.style.border = "1px solid green";
idmsg.innerHTML = "";
}
}
pw.onblur = function(){
if(pw.value.length < 4 ){
pw.style.border = "1px solid red";
pwmsg.innerHTML = "비밀번호는 4글자 이상입니다";
} else {
pw.style.border = "1px solid green";
pwmsg.innerHTML = "";
}
}
</script>
</body>
</html>
2. 노드 생성, 추가
요소를 생성하는 방법입니다.
* 노드 생성 - 예제 1
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<!-- innerHTML-->
<div class="inner1">
</div>
<button class="btn">태그생성</button>
<script>
var inner1 = document.querySelector(".inner1");
var btn = document.querySelector(".btn");
btn.onclick = function () {
//문자열의 형태로 태그를 자식으로 넣는다.
inner1.innerHTML = "<div><a href = '#'>태그 생성</a></div>";
}
</script>
<hr>
<div class="inner2">
<!--
<input type = "checkbox" name = "add" value = "1"> 1
<input type = "checkbox" name = "add" value = "2"> 2
<input type = "checkbox" name = "add" value = "3"> 3
<input type = "checkbox" name = "add" value = "4"> 4
<input type = "checkbox" name = "add" value = "5"> 5
-->
</div>
<button class="btn2">태그 생성</button>
<script>
var inner2 = document.querySelector(".inner2");
var btn2 = document.querySelector(".btn2");
btn2.onclick = function(){
var str = "";
for(var i = 1; i <= 5; i++){
str += '<input type="checkbox" name="add" value="'+i+'">' + i;
}
inner2.innerHTML = str;
}
</script>
</body>
</html>
* 노드 생성 - 예제 2
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<input type = "text" class = "todo" placeholder="할일을 작성해 보세요">
<button class ="btn">추가</button>
<ul class ="list">
<!--
<li>내용...</li>
<li>내용...</li>
<li>내용...</li>
<li>내용...</li>
-->
</ul>
<script>
var todo = document.querySelector(".todo"); //input 태그
var list = document.querySelector(".list"); //list 태그
var btn = document.querySelector(".btn");
btn.onclick = function() {
var li = document.createElement("li"); //li 태그 생성
var a = document.createElement("a"); //a 태그 생성
a.href = "#";
a.innerHTML = todo.value;
li.appendChild(a); //li의 자식으로 a를 넣는다.
list.appendChild(li); //list의 자식으로 li를 넣는다.
}
</script>
<hr>
<div id = "addList">
</div>
<button id = "add">추가</button>
<script>
window.onload = function(){
var addList = document.getElementById("addList");
var ul = document.createElement("ul"); //ul 생성
for(var i = 0; i <= 10; i++) {
var li = document.createElement("li");
li.innerHTML = "리스트" + i;
ul.appendChild(li);
}
addList.appendChild(ul);
}
//
var add = document.getElementById("add");
add.onclick = function(){
var li = document.createElement("li");
li.innerHTML = "추가된 리스트";
//새롭게 addList > li 태그를 얻음
document.querySelector("#addList > ul").appendChild(li);
}
</script>
</body>
</html>
* 노드 생성 - 문제 1
<!DOCTYPE html>
<html lang="en">
<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>
table {border-spacing: 0; border-collapse: collapse;}
thead th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<button type="button" id="addLists">5개추가하기</button>
<button type="button" id="addList">1개추가하기</button>
<table>
<thead>
<tr>
<th>교시</th>
<th>훈련과목</th>
<th>담당자</th>
<th>훈련내용</th>
</tr>
</thead>
<tbody class="todoList">
<tr>
<td><input type="text" size="3"></td>
<td><input type="text"></td>
<td><input type="text" size="5"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<script>
var addList = document.getElementById("addList");
addList.onclick = function(){
createTag();
}
var addLists = document.getElementById("addLists");
addLists.onclick = function(){
for(var i = 0; i < 5; i++){
createTag();
}
}
function createTag(){
var tr = document.createElement("tr");
tr.innerHTML = '<td><input type="text" size="3"></td>' +
'<td><input type="text"></td>' +
'<td><input type="text" size="5"></td>' +
'<td><input type="text"></td>'
//곱하기 4
// var td = document.createElement("td");
// td.innerHTML = '<input type="text" size="3">'
document.querySelector(".todoList").appendChild(tr);
}
</script>
</body>
</html>
3. codeshare(공동으로 코드 공유 가능)
Codeshare - Share code in real-time with developers in your browser
Codeshare - Share code in real-time with developers in your browser
Sorry but your browser is not compatible with Codeshare. Download the latest Chrome, Firefox, Edge, or Safari.
codeshare.io
