너굴 개발 일지

TIL_210512_JavaScript 기초, 문법 및 예제 본문

JavaScript

TIL_210512_JavaScript 기초, 문법 및 예제

너굴냥 2021. 5. 12. 17:04

목차

css 스타일 설정 방법

자바스크립트 기초, 문법 및 예제

 

 

css 스타일 설정 방법

1. 태그명 사용       : body{}, input{} in css file2. 스타일 클래스   : <input class="클래스명">일때, .클래스명{} in css file    (클래스명 앞에 꼭 점 붙이기)3. 태그 id 속성값  : <input id="속성명"/> 일때, #id속성값{} in css file

 

자바스크립트 코딩 위치

- <head></head> 혹은 <body></body> 태그 사이

 

자바스크립트 코딩 방법

1. html 내부에 명시 - <script>자바스크립트 코딩</script> 2. js파일 생성 후 html 파일에 따로 적용    html 내부에 <script src="자바스크립트 경로.js"></script>

 

 

자바스크립트 문법

prompt()

값을 입력 받을 수 있는 창을 띄우는 자바스크립트 문법 

body 내부에 prompt()를 포함하는 script 태그가 있다면 입력창 실행 뒤 나머지 코드들 출력

prompt() 실행시 취소를 눌렀다면 null값이 넘어감

 

document.write()

html 내부에 글씨, 태그 출력 (jsp에서 out.print처럼 사용)

 

예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>자바스크립트로 입력창 띄우기 : greeting.html</title>
	<script>
		var name=prompt("이름을 입력하세요");
		document.write("<b>"+name+"</b>");
	</script>
</head>

<body>
	<h1>어서오세요</h1>
</body>
</html>

 

 

 

 

 

new Date()

현재 시간을 나타내는 객체

 

예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>자바스크립트를 이용한 현재 시간 : js-time.html</title>
</head>

<body>
	<script>
		var now = new Date();
		var display = now.toLocaleTimeString();
		document.write(display);
	</script>
</body>

querySelector()

특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾음

(#sections) -> sections 아이디를 가진 요소를 찾음

(.section) -> section 클래스명을 가진 요소를 찾음

반환객체는 한개의 요소만 찾을수있으며 동일한 클래스명 을 가진 객체가 있을경우 html문서내의 첫번째를 나타나는 요소를 반환

 

예시

더보기 
@charset "UTF-8";
body{
	text-align:center; /* -body 태그 내부는 다 가운데 정렬 */
}
#heading{ /*태그 속성이 heading인 것들*/
	color:gray; /*글자색 - 회색*/
} 
#text{	/*태그 속성이 text인 것들*/
	color:green;
	font-size:15px;
}
.raccoon{ /*raccoon 이름의 스타일 클래스 */
	color:red;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>change.html : 자바스크립트를 이용한 글자색 변경</title>
	<link rel="stylesheet" href="css/change-color.css" >
</head>

<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위의 글자를 클릭!</p>
	<p class="raccoon">위의 글자를 클릭~</p>
	
	<script>
		var heading=document.querySelector("#heading"); //heading id를 가진 태그들 다 하나로 묶어서 heading 변수에 저장
		heading.onclick=function(){						// heading 애들 클릭했을 떄
			heading.style.color="red";					// 색깔이 red로 변한다
		}
		var text=document.querySelector("#text");
		text.onclick=function(){						// 클릭시 이벤트 적용
			text.style.color="blue";
		}
	</script>
</body>
</html>

적용결과

 

console.log()

브라우저 f12 콘솔창 출력 메서드 (자바스크립트 디버깅 용도)

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>자바스크립트를 이용한 웹 브라우저 F12의 콘솔에 출력 : quiz.html</title>
</head>

<body>
	<script>
		var name = prompt("이름 입력");
		console.log(name+"입니다");
	</script>
</body>
</html>

 

querySelector('"아이디명 혹은 클래스명").innerHTML

내부의 html 태그를 의미

 

예시

더보기 
		#contents {
			width: 450px;
			margin:0 auto;
		}
		#contents > img {
			float:left;
			margin-right:25px;
		}
		ul {			
			list-style: none;
			padding-top:40px;
		}
		li {
			margin-bottom:10px;
		}
		li > label {
			width:80px;
			float:left;
			text-align:right;
		}
		input[type="text"] {
			width:110px;
			padding:5px 10px;			
			margin:0 5px 0 10px;
		}
		li:nth-child(3) {
			margin-top:20px;
			text-align: center;
		}
		button {
			padding:5px 10px;
			border:1px solid #ccc;			
			font-size:1em;
		}
		#showResult {
			margin-top:20px;
			font-size:1.5em;			
		}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>할인율 계산 : bargain.html</title>
	<link rel="stylesheet" href="css/bargain.css">
</head>

<body>
	<div id="contents">
		<img src="images/sale.png" />
		<ul>
			<li>
				<label for="oPrice">원래 가격</label>
				<input type="text" id="oPrice"/>원
			</li>
			
			<li>
				<label for="rate">할인율</label>
				<input type="text" id="rate"/>%
			</li>
			
			<li>
				<button onclick="showPrice()">할인 가격 계산</button>
			</li>
		</ul>
	</div>
	
	<div id="showResult"></div>
	<script>
		function showPrice(){
			var originPrice = document.querySelector("#oPrice").value; // 원래 가격
			var rate = document.querySelector("#rate").value;
			var savePrice = originPrice * (rate/100);	// 할인된 가격
			var resultPrice = originPrice - savePrice;
			document.querySelector("#showResult").innerHTML = "상품의 원래가격은 "+originPrice+"원이고, 할인율은 "+rate+"%입니다"+savePrice+"원을 절약하였고, "+resultPrice+"금액에 구매할 수 있습니다.";
		}
	</script>
</body>
</html>

 

위 예제에서 script 코드를 파일로 분리하여 외부에서 적용시킨 코드 (위와 결과 화면은 같아서 생략)

더보기 
/**
 * 할인가격 함수
 */
function showPrice(){
	var originPrice=document.querySelector("#oPrice").value;
	var rate = document.querySelector("#rate").value;
	
	var savePrice = 0;		// 할인 금액
	var resultPrice = 0;	// 할인된 총금액
	
	// 입력한 금액, 할인율이 0보다 클떄 (입력을 했을 때)
	if(originPrice > 0 && rate > 0){
		savePrice = originPrice*(rate/100);
		resultPrice = originPrice - savePrice;
	}
	
	document.querySelector("#showResult").innerHTML = "상품의 원래가격은 "+originPrice+"원이고, 할인율은 "+rate+"%입니다"+savePrice+"원을 절약하였고, "+resultPrice+"금액에 구매할 수 있습니다.";
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>diy-age.html</title>
	<link rel="stylesheet" href="css/bargain.css">
	<script src="js/rate.js"></script>
</head>

<body>
	<div id="contents">
		<img src="images/sale.png" />
		<ul>
			<li>
				<label for="oPrice">원래 가격</label>
				<input type="text" id="oPrice"/>원
			</li>
			
			<li>
				<label for="rate">할인율</label>
				<input type="text" id="rate"/>%
			</li>
			
			<li>
				<button onclick="showPrice()">할인 가격 계산</button>
			</li>
		</ul>
	</div>
	
	<div id="showResult"></div>
</body>
</html>

 

 

자바스크립트를 이용한 나이 구하기 코드 예시

더보기 
@charset "UTF-8";
/* age.css */
body{
	text-align:center;
}

/*클래스 속성 : html 내부에 <태그명 class="btn"> 스타일 클래스명 명시해야 적용 */
.btn {	
			margin-top:50px;
			font-weight: 400;
			color:#fff;					/* 글씨 색깔*/
			background-color:#007bff;  /* 배경 색깔 */
			text-align: center;			/* 가로 정렬: */
			white-space: nowrap;		/* 공백:제거*/
			vertical-align: middle;		/* 세로 정렬: */
			border: 1px solid transparent;	 /*버튼 테투리선 두께:1px 두께, transparent(투명)*/
			padding: 0.375rem 0.75rem;		/* padding 값순서 : left,top,right, bottom */
			font-size: 1rem;	
			line-height: 1.5;			
			border-color:#007bff;			
			border-radius: 0.25rem;
			transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
			/* 효과 : (background-color 0.15s ease-in-out)-> 이게 한묶음 , ease-in-out(감속), box-shadow(박스 그림자 부분) */
}

/*마우스 올라갔을때 : hover*/
.btn:hover{
	color:#fff;
	background-color: #218838;
	border-color: #1e7e34;
}
.show{
	margin_top:50px;
	padding: 20px 30px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc; /*마지막 명시된 색은 테두리 색*/
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>나이계산 하기 : age.html</title>
	<link rel="stylesheet" href="css/age.css">
</head>

<body>
	<button class="btn" onclick="calc()">나이 계산하기</button>
	<div class="show" id="result">(결과값 표시)</div>
	<script>
		function calc(){
			var currentYear = 2021;
			var birthYear = prompt("태어난 년도를 입력하세요","YYYY"); // 두번째 인자는 힌트값 (placeholder)
			var age = currentYear - birthYear + 1;
			var d = document.querySelector("#result");
			d.innerHTML = "당신의 나이는 "+age+"세 입니다";
			// document.querySelector("#result").d.innerHTML = "당신의 나이는 "+age+"세 입니다";
		}
	</script>
</body>
</html>

시작화면에서 버튼 위에 마우스를 올리면 버튼 색이 변경된다
버튼을 눌러 출생년도를 입력하면 올해의 나이가 출력된다

 

 

자바스크립트를 이용한 이름 입력 받아서 출력하는 예제

더보기 
/**
 *  이름 입력과 출력
 */
function showName(){
	var name = prompt("이름 입력");
	document.querySelector("#quiz1").innerHTML = name+"입니다";
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="css/bargain.css">
	<script src="js/quiz1.js"></script>
</head>

<body>
	<button onclick="showName()">이름</button>
	<div id="quiz1"></div>
</body>
</html>

위의 이름 출력한 예제에서 html 내부에 있던 script 코드를 외부의 파일로 생성하여 적용시킨 코드다

 

 

 

alert()

경고창을 띄우는 기능

 

confrim()

메시지 출력창을 띄우는 기능으로 확인 버튼을 눌렀을시 true, 취소 버튼을 눌렀을시 false 반환

 

window.open()

새창 띄우는 기능

 

alert(), confrim() 예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>quiz-2.html : 결과 값을 경고창에 전달</title>
	<script>
		/* 
		var width = prompt("사각형의 가로 크기 입력");
		var height = prompt("사각형의 세로 크기 입력");
		
		var square = width*height;
		
		alert("사각형의 넓이는 : " + square + "입니다");
		*/
		var bool = confirm("작업 취소 여부?");
		alert(bool);
	</script>
</head>

<body>

</body>
</html>

작업 취소 여부의 창이 뜨며 확인을 누르면 true가 반환되는 것을 볼 수 있다

 

 

자바스크립트를 이용한 for문과 if문 적용 - 1~10까지의 숫자들 중 짝수들의 합 

더보기 
body {
	padding-top:20px;
	font-size:1.2em;
	text-align:center;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>even.html : if(0~10) 짝수끼리 더하기</title>
	<link rel="stylesheet" href="css/even.css">
</head>

<body>
	<h1>1-10까지 숫자들 중 짝수합</h1>
	<div id="result"></div>
	<script>
		var n = 10;
		var sum = 0;
		var r = "";
		
		for(var i=1; i<=n; i++){
			if(i%2 == 1){
				continue;
			}
			sum = sum + i;
			r += i+"-----"+sum + "<br/>";
			// document.querySelector("#result").innerHTML=r; 이문장이 for문 안으로 들어오면
			// 맨마지막 r 값만 출력된다 
		}
		document.querySelector("#result").innerHTML=r;
	</script>
</body>
</html>

코드 결과 화면

 

자바스크립트를 이용한  if-else문 적용 - 입력한 숫자가 3의 배수인지 아닌지 알려주는 코드

더보기 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>

<body>
	<div id="result"></div>
	<script>
		var num = prompt("3의 배수인 숫자를 입력해주세요");
		var resultnum = document.querySelector("#result");
		
		if(num != null){	// 숫자를 입력하였을 떄 
			if(num%3==0){
				resultnum.innerHTML = num + "는 3의 배수입니다";
			}else{
				resultnum.innerHTML = num + "는 3의 배수가 아닙니다";
			}	
		}else{	// 숫자 입력을 하지 않고 취소를 눌렀을 떄 
			alert("입력이 취소되었습니다");
		}
	</script>
</body>
</html>

 

시작화면
결과화면

 

취소 버튼을 누른 경우 결과 화면

 

자바스크립트를 이용한 이중 if문 예제

더보기 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>for.html : 이중 for</title>
</head>

<body>
	<script>
		for(var j=0;j<5;j++){
			for(var i=0;i<30;i++){
				document.write("*");
			}
			document.write("<br />");	
		}
	</script>
</body>
</html>

 

자바스크립트를 이용한 구구단 출력 예제

더보기 
		div {
			display:inline-block;
			padding:0 20px 30px 20px;
			margin:15px;
			border:1px solid #ccc;
			line-height:2;
		}
		div h3 {
			text-align:center;
			font-weight:bold;
		}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="css/gugudan.css">
</head>

<body>
	<h1>구구단</h1>
	<script>
		for(var i=1;i<=9;i++){
			document.write("<div>"); 
			document.write("<h3>" + i + "단</h3>"); 
	
			for(var j=1;j<=9;j++){
				document.write(i + "X  " + j + " = " + (i*j) + "<br />"); 
			}
	
			document.write("</div>"); 
		}
	</script>
</body>
</html>

자바스크립트를 이용한 switch-case 예제

더보기 
body {
	background-color:#0c3268;
	color:rgb(243, 243, 243); /* rgba(R, G, B, 투명도) : 투명도 -> 0~1*/
}

p {
	margin-top:80px;
	font-size:2em;
	font-weight:700;
	text-align: center;
	text-shadow:1px 2px 1px #000;
}

p strong { /*p태그 내부의 storng 태그*/
	font-size:2.2em;
	color:yellow;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>switch.html</title>
	<link rel="stylesheet" href="css/switch.css">
</head>

<body>
	<script>
		var session = prompt("관심 세션 선택. 1-마케팅, 2-개발, 3-디자인","1");
		
		switch(session){
		case "1":
			document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행</p>");
			break;
		case "2":
			document.write("<p>개발 세션은 <strong>202호</strong>에서 진행</p>");
			break;
		case "3":
			document.write("<p>디자인 세션은 <strong>203호</strong>에서 진행</p>");
			break;
		default:
			alert("잘못 입력하였습니다");
		}
	</script>
</body>
</html>

시작화면
2 입력시 결과 화면

 

자바스크립트를 이용한 while문 연습 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>factorial.html : while문 연습</title>
</head>

<body>
	<script>
		var n = prompt("숫자입력");
		var nFact = 1;
		
		var i = 2;
		while(i <= n){
			nFact *= i;
			i++;
		}
		
		document.write(n + "==>" + nFact);
	</script>
</body>
</html>

자바스크립트 이벤트를 이용한 창 열고 닫기

더보기 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>event.html : 이벤트를 통한 창 열고 닫기</title>
	<link rel="stylesheet" href="css/event.css">
</head>

<body>
	<div id="item">
		<img src="images/flower1.jpg">
		<button class="over" id="open" onclick="showDetail()">상세설명보기</button>
		
		<div id="desc" class="detail">
			<h4>민들레</h4>
			<p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>
			<button id="close" onclick="hydeDetail()">상세설명 닫기</button>
		</div>
	</div>
	<script src="js/event.js"></script>
</body>
</html>
function showDetail(){
	document.querySelector("#desc").style.display = "block"; // block : 보여줘
	document.querySelector("#open").style.display = "none"; // none : 보여주지마
}

function hydeDetail(){
	document.querySelector("#desc").style.display = "none";
	document.querySelector("#open").style.display = "block";
}
	#item {
				position:relative;
			width:500px;
			height:auto;
			padding:15px 20px;
			margin:auto;
		}
		button {
			background-color:rgba(255,255,255,0.7);;
			padding:5px;
			border:1px solid #ccc;
			font-size:0.8em;			
		}
		.over {
			position:absolute;
			left:30px;
			bottom:30px;
		}
		.detail {
			width:400px;
			text-align:left;			
			line-height:1.8;
			display:none;
		}
		#cover { border: 5px solid transparent;}

시작 화면

'JavaScript' 카테고리의 다른 글

[JavaScript] Iterable, Iterator 그리고 Generator  (0) 2023.07.23
[JavaScript] Symbol을 사용하는 이유  (0) 2023.07.20
TIL_210517_자바스크립트 슬라이드 쇼 예제  (0) 2021.05.17
TIL_210514_자바스크립트 이용한 form,input 태그 활용 예제  (0) 2021.05.14
TIL_210513_자바스크립트  (0) 2021.05.13
'JavaScript' Related Articles more