교육 35일차

56101 단어 JavaScript교육JavaScript

display : none ==> 영역이 없음

visibility : hidden ==> 화면에 보이지 않음, 영역은 있음

test 13

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test13</title>
<style type="text/css">
#box, #box2{
	display: inline-block;
	vertical-align: top;
	width: 200px;
	height: 200px;
	border : 20px solid rgb(0, 0, 0);
	background-color: rgb(0, 0, 0); 
}
</style>
<script type="text/javascript">
var r  = 0;
var g  = 0;
var b  = 0;


function boxColor(btn){
	var box = document.getElementById("box");
		
	switch (btn.value) {
	case "rUp":
		if(r < 255){
			r += 5 ;			
		}
		break;
	case "rDown":
		if( r > 0){
			r -= 5 ;			
		}
		break;
	case "gUp":
		if(g < 255){
			g += 5 ;			
		}
		break;
	case "gDown":
		if( g > 0){
			g -= 5 ;			
		}
		break;
	case "bUp":
		if(b < 255){
			b += 5 ;			
		}
		break;
	case "bDown":
		if( b > 0){
			b -= 5 ;			
		}
		break;
	case "allUp":
		if(r < 255 || g < 255 || b < 255){
			r += 5 ;			
			g += 5 ;			
			b += 5 ;			
		}
		break;
	case "allDown":
		if(r > 0 || g > 0 || b > 0){
			r -= 5 ;			
			g -= 5 ;			
			b -= 5 ;			
		}
		break;
		
		}

	/* 스타일에 넣은 rgb안에 있는 0값을 각 r,g,b로 선언 */
	box.style.backgroundColor = "rgb("+ r + ","+ g + ","+ b + ")";
	}
function tog(){
	var box = document.getElementById("box");
		console.log(box.style.display);
		
	if(box.style.display == "none"){//display : none => 영역제거
		box.style.display = ""; 
  		//""값을 안줄 경우 해당 style속성이 제거됨
		}else{
			box.style.display = "none";
		}
		
	}
function tog2(){
	var box = document.getElementById("box");
		console.log(box.style.display);
		
	if(box.style.visibility == "hidden"){//visibility : hidden => 감추기
			box.style.visibility = ""; 
  		//""값을 안줄 경우 해당 style속성이 제거됨
		}else{
			box.style.visibility = "hidden";
		}
		
	}
	
function bigger(){
	var box2 = document.getElementById("box2");
	
	console.log(box2.clientWidth);
  	//clientWidth : css에 적용된 크기를 가져옴
	
	
	
	box2.style.width = box2.clientWidth * 2 + "px";
	box2.style.height = box2.clientHeight * 2 + "px";
}
	
function smaller(){
	var box2 = document.getElementById("box2");
	
	console.log(box2.clientWidth); 
  	//clientWidth : css에 적용된 크기를 가져옴
	
	
	
	box2.style.width = box2.clientWidth / 2 + "px";
	box2.style.height = box2.clientHeight / 2 + "px";
}		
	
</script>
</head>
<body>
<div id="box"></div> <div id="box2"></div>
<br/>
<input type="button" value="rUp" onclick="boxColor(this);"/>
<input type="button" value="rDown" onclick="boxColor(this);"/>
<input type="button" value="gUp" onclick="boxColor(this);"/>
<input type="button" value="gDown" onclick="boxColor(this);"/>
<input type="button" value="bUp" onclick="boxColor(this);"/>
<input type="button" value="bDown" onclick="boxColor(this);"/>
<input type="button" value="allUp" onclick="boxColor(this);"/>
<input type="button" value="allDown" onclick="boxColor(this);"/>
<br/>
<input type="button" value="버튼" onclick="tog();"/>
<input type="button" value="버튼2" onclick="tog2();"/>
<input type="button" value="커져라!" onclick="bigger();"/>
<input type="button" value="작아져라!" onclick="smaller();"/>
</body>
</html>
  • 출력

방향키 조작

test 14

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방향키 조작</title>
<style type="text/css">
#box {
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: aqua;
}
</style>
<script type="text/javascript">
var t = 0; 

var l = 0;

function m(e) {
	//console.log(e);
	//console.log(e.keyCode);
	
	// w - 119, s - 115, a - 97, d - 100
	var box = document.getElementById("box");
	
	switch(e.keyCode){
	case 119: //w 위
	if(t -10 >= 0){
			
		t -= 10;
	}
	break;
		
	case 100: //d 오른쪽
		
	l += 10;
	
	break;
	
	case 115: //s 아래
	
	t += 10;
	
	break;
	
	case 97: //a 왼쪽
	if(l -10 >= 0){
		
	l -= 10;
	}
	
	break;
	
	}
	
	box.style.top = t + "px";
	box.style.right = l - "px";
	box.style.bottom = t - "px";
	box.style.left = l + "px";
}
</script>
</head>
<body onkeypress="m(event);">
<div id="box"></div>
</body>
</html>

  • KeyCode : 13 -> 엔터키다 기억하자 !!

  • 출력

    자바 스크립트 문자열

test 15

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
console.log(Math.round(3.141529));
console.log(Math.floor(3.141529));
console.log(Math.ceil(3.141529));
console.log(Math.abs(-123));
console.log(Math.floor(Math.random()*10)+0);

/* 중요하다 꼭 기억 할 것 */
var str = "Hello World!!\"Hi\"";
console.log(str);

str = "Hello World";
console.log(str.length);
console.log(str.indexOf("l"));
console.log(str.indexOf("l", 3));
console.log(str.indexOf("x")); //찾을 게없을때 01
console.log(str.lastIndexOf("l"));
console.log(str.substring(0,1));
console.log(str.replace("l","k"));
  
/* 정규식 사용 시 replaceall하고싶을 때
 /대상문자/옵션 
 의 형태를 사용. 옵션  - i : 대소문자 구분 없음, g : 모든대상 */
console.log(str.replace(/l/ig,"k"));
//정규식은 예약어 같은 것
console.log(str.toUpperCase());
console.log(str.toLowerCase());
//trim : 앞  뒤 공백제거
str = "             Hello world!!                  ";
console.log("["+str.trim()+"]");

str = "Hello World";
console.log(str.charAt(0));
console.log(str[0]);

var arr = "apple,banana,mango".split(",");
console.log(arr);

var d = new Date();

console.log(d);
console.log(d.toString());
console.log(d.getFullYear()); //연도
console.log(d.getMonth()+1); // 인덱스 기반 월
console.log(d.getDate()); // 일
console.log(d.getHours()); // 시
console.log(d.getMinutes()); // 분
console.log(d.getSeconds()); // 초
console.log(d.getMilliseconds()); // 밀리초
console.log(d.getDay()); // 주의 몇번째 날인지
</script>
<head>
<body>

</body>
</html>
  • 출력

    감이 안온다..ㅋㅋㅋㅋ빨리 실습해서 감을 찾아야하는 데...

[html/css] display, position 제어
24. Synchronization 강의 메모

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage