믿음의 개발자
블로그 이미지

Home

Write

Setting

About Me
Dark
javaScript↗

JavaScript 정리

메타플랫폼대표
|2024. 6. 10. 11:13
반응형

우리 아이 for문도 가능합니다

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

	<script type="text/javascript">
		// Array 선언         0       1       2       3       4       5
		const sido_array = ["서울", "경기", "인천", "대전", "대구", "광주"];
		document.write("sido_array's length : " + sido_array.length + "<br>");
		
		
		document.write("sido_array[0] : " + sido_array[0] + "<br>");
		
		document.write("----sido_array index방식----<br>");
		
		for(let i = 0; i < sido_array.length; i++) {
			document.write(`sido_array[${ i }] : ${ sido_array[i] }<br>`);
		}
		
		document.write("----sido_array for ~ in 방식----<br>");
		for(let i in sido_array) { // index 반환
			document.write(`sido_array[${ i }] : ${ sido_array[i] }<br>`);
		}
	
	</script>

</head>

<body>
</body>
</html>

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

	<script type="text/javascript">
		// Array 선언         0       1       2       3       4       5
		const sido_array = ["서울", "경기", "인천", "대전", "대구", "광주"];

		
		// 초기화 함수
		window.onload = () => {
			
			document.write("sido_array's length : " + sido_array.length + "<br>");
			
			sido_array.push("제주"); // 맨뒤에 추가
			let s = sido_array.pop(); // 맨뒤에서 추출
			console.log("맨뒤", s);
			
			let s1 = sido_array.shift(); // 맨앞에 추출
			console.log("맨앞", s1);
			
			sido_array.unshift("서울"); // 맨앞에 추가
			
			document.write("sido_array[0] : " + sido_array[0] + "<br>");
			
			document.write("----sido_array index방식----<br>");
			
			for(let i = 0; i < sido_array.length; i++) {
				document.write(`sido_array[${ i }] : ${ sido_array[i] }<br>`);
			}
			
			document.write("----sido_array for ~ in 방식----<br>");
			for(let i in sido_array) { // index 반환
				document.write(`sido_array[${ i }] : ${ sido_array[i] }<br>`);
			}
			
			document.write("----sido_array for ~ of 방식----<br>");
			for(let sido of sido_array) { // 요소값 반환
				document.write(sido + "<br>");
			}
			
			
			document.write("----sido_array ul로 출력----<br>");

			document.write('<div id="disp"></div>');
			
			let html = "<ul>";
			
			for(let sido of sido_array) {
			html += "<li>"+ sido+ "</li>";
			}
			
			html += "</ul>"
			
			document.getElementById("disp").innerHTML = html;
		};
		
		
	
	</script>

</head>

<body>
</body>
</html>

 

 

 

 

HTML에서 JavaScript를 활용하기

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

	<script type="text/javascript">
	
		// 정규표현식(숫자만 입력할 수 있게끔)
		// ^: 시작하는 값
		// [0-9] 0부터 9까지의 숫자
		// {1,6} 1자리부터 6자리까지
		// $: 끝나는 값
		//                     숫자 6자리 Pattern
		const regular_number= /^[0-9]{1,6}$/;
	
		function plus() {
			//window.alert('더해줘?');
			// 2개의 입력값 읽어오기
			// id= su1 Element에서 value값을 얻어온다.
			let su1 = document.getElementById("su1").value;
			let su2 = document.getElementById("su2").value;
			
			// regular_number pattern과 일치하면 true, 아니면 false
			if( regular_number.test(su1) == false ) {
				alert("su1에는 1의 자리에서 부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su1").value= ""; // 적어놨던거 지우기
				document.getElementById("su1").focus(); // 입력포커스
				return; // 함수 끝내라
			}
			if( regular_number.test(su2) == false ) {
				alert("su2에는 1의 자리에서  부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su2").value= ""; // 적어놨던거 지우기
				document.getElementById("su2").focus(); // 입력포커스
				return; // 함수 끝내라
			}
			
			// 읽어온 값을 연산한다
			// 방법1) String -> int  parse("123") -> 123
			let result = parseInt(su1) + parseInt(su2);
			// 방법2) String -> int  Number("123") -> 123
			let result2 = Number(su1) + Number(su2);
			// 결과값을 id= result인 Element에 넣는다.
			document.getElementById("result").value = result2;
		}
	</script>

</head>
<body>
	수1:<input id="su1" > <br>
	수2:<input id="su2" > <br>
	
	<input type="button" value="+" onclick="plus();"> <br>
	
	결과:<input id="result" >
</body>
</html>

 

 

 

- 여러가지 연산

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

	<script type="text/javascript">
	
		// 정규표현식(숫자만 입력할 수 있게끔)
		// ^: 시작하는 값
		// [0-9] 0부터 9까지의 숫자
		// {1,6} 1자리부터 6자리까지
		// $: 끝나는 값
		//                     숫자 6자리 Pattern
		const regular_number= /^[0-9]{1,6}$/;
	
		function plus() {
			//window.alert('더해줘?');
			// 2개의 입력값 읽어오기
			// id= su1 Element에서 value값을 얻어온다.
			let su1 = document.getElementById("su1").value;
			let su2 = document.getElementById("su2").value;
			
			// regular_number pattern과 일치하면 true, 아니면 false
			if( regular_number.test(su1) == false ) {
				alert("su1에는 1의 자리에서 부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su1").value= ""; // 적어놨던거 지우기
				document.getElementById("su1").focus(); // 입력포커스
				return; // 함수 끝내라
			}
			if( regular_number.test(su2) == false ) {
				alert("su2에는 1의 자리에서  부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su2").value= ""; // 적어놨던거 지우기
				document.getElementById("su2").focus(); // 입력포커스
				return; // 함수 끝내라
			}
			
			// 읽어온 값을 연산한다
			// 방법1) String -> int  parse("123") -> 123
			let result = parseInt(su1) + parseInt(su2);
			// 방법2) String -> int  Number("123") -> 123
			let result2 = Number(su1) + Number(su2);
			// 결과값을 id= result인 Element에 넣는다.
			document.getElementById("result").value = result2;
		}
		
		function minus() {
			let su1 = document.getElementById("su1").value;
			let su2 = document.getElementById("su2").value;
			
			if( regular_number.test(su1) == false ) {
				alert("su1에는 1의 자리에서 부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su1").value= "";
				document.getElementById("su1").focus();
				return; // 함수 끝내라
			}
			if( regular_number.test(su2) == false ) {
				alert("su2에는 1의 자리에서  부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su2").value= "";
				document.getElementById("su2").focus();
				return;
			}
			
			let result = su1 - su2;
			document.getElementById("result").value = result;
		}
		
		
		function multiply() {
			let su1 = document.getElementById("su1").value;
			let su2 = document.getElementById("su2").value;
			
			if( regular_number.test(su1) == false ) {
				alert("su1에는 1의 자리에서 부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su1").value= "";
				document.getElementById("su1").focus();
				return; // 함수 끝내라
			}
			if( regular_number.test(su2) == false ) {
				alert("su2에는 1의 자리에서  부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su2").value= "";
				document.getElementById("su2").focus();
				return;
			}
			
			let result = su1 * su2;
			document.getElementById("result").value = result;
		}
		
		
		function exponential() {
			let su1 = document.getElementById("su1").value;
			let su2 = document.getElementById("su2").value;
			
			if( regular_number.test(su1) == false ) {
				alert("su1에는 1의 자리에서 부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su1").value= "";
				document.getElementById("su1").focus();
				return; // 함수 끝내라
			}
			if( regular_number.test(su2) == false ) {
				alert("su2에는 1의 자리에서  부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su2").value= "";
				document.getElementById("su2").focus();
				return;
			}
			
			let result = su1 ** su2;
			document.getElementById("result").value = result;
		}
		
		
		function divide() {
			let su1 = document.getElementById("su1").value;
			let su2 = document.getElementById("su2").value;
			
			if( regular_number.test(su1) == false ) {
				alert("su1에는 1의 자리에서 부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su1").value= "";
				document.getElementById("su1").focus();
				return; // 함수 끝내라
			}
			if( regular_number.test(su2) == false ) {
				alert("su2에는 1의 자리에서  부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su2").value= "";
				document.getElementById("su2").focus();
				return;
			} else if ( document.getElementById("su2").value == 0 ) {
				alert("su2에는 0의값을 넣어서 나누면 안됩니다!! 다시 입력하세요!!")
				document.getElementById("su2").value= "";
				document.getElementById("su2").focus();
				return;
			}
			
			let result = su1 / su2;
			document.getElementById("result").value = result.toFixed(1);
		}
		
		function remain() {
			let su1 = document.getElementById("su1").value;
			let su2 = document.getElementById("su2").value;
			
			if( regular_number.test(su1) == false ) {
				alert("su1에는 1의 자리에서 부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su1").value= "";
				document.getElementById("su1").focus();
				return; // 함수 끝내라
			}
			if( regular_number.test(su2) == false ) {
				alert("su2에는 1의 자리에서  부터 6자리까지의 숫자만 입력하세요!!")
				document.getElementById("su2").value= "";
				document.getElementById("su2").focus();
				return;
			}
			
			let result = su1 % su2;
			document.getElementById("result").value = result;
		}
		
		
	</script>

</head>
<body>
	수1:<input id="su1" > <br>
	수2:<input id="su2" > <br>
	
	<input type="button" value="+" onclick="plus();"> 
	<input type="button" value="-" onclick="minus();"> 
	<input type="button" value="*" onclick="multiply();"> 
	<input type="button" value="**" onclick="exponential();"> 
	<input type="button" value="/" onclick="divide();"> 
	<input type="button" value="%" onclick="remain();"> 
	<br>
	
	결과:<input id="result" >
</body>
</html>

 

 

 

 

- 구구단 출력하기

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

	<style type="text/css">
		#disp {
			width: 250px;
			height: 300px;
			background: black;
			color: white;
			padding: 50px;
		}
	</style>
	
	<script type="text/javascript">
	
		// 2~9 사이값인지 검사(정규식)
		const regular_number= /^[2-9]{1}$/;
		
		function show_gugudan() {
			let dan = document.getElementById("dan").value;
			
			if( regular_number.test(dan) == false ) {
				alert("2에서 9사이의 1자리 숫자만 입력해주세요!!");
				document.getElementById("dan").value= "";
				document.getElementById("dan").focus();
				return;
			}
			
			// backticks(키보드 ~ 밑에 있는 `)
			// `: String Template  ${ 변수 }
			let html2 = "<h3>參" + dan + "단 보기</h3>"
			let html = `<h3>參${ dan }단 보기參</h3>`;
			
			for(let i = 1; i <= 9; i++) {
				// html += dan + "x" + i + "=" + dan*i + "<br>"; (백틱을 쓰지 않는 경우)
				html += `${dan} x ${i} = ${dan*i}<br>`;
			}
			
			// id= "disp"인 div에 html 넣는다.
			document.getElementById("disp").innerHTML = html;
		}
	
	</script>	
	

</head>
<body>
	단: <input id= "dan" value="">
		<input type= "button" value= "결과보기" onclick="show_gugudan();">
	<hr>
	
	<div id= "disp">구구단 생성기</div>
</body>
</html>

 

 

 

 

- 현재 시간 출력하기

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

	<style type="text/css">
		
		* {
			/* span 태그 사이의 엔터사이즈의 공백을 없애기 위해 */
			/* 이거 안넣을거면 일자로 쭉 or 사이사이에 주석 넣기 */
			font-size: 0px;
		}
	
		span {
			/* 크기조절하기 위해 */
			display: inline-block;
			width: 60px;
			height: 70px;
			text-align: center;
			font-size: 48px;
			
			background: black;
			color: white;
		}
		
		.colon {
			width: 30px;
		}
		
		#backgroundimage {
			background-image: url("https://여기유.com/data/editor/2112/20211208144440_b00f3b0ef5332d92a0c500ef4f76c6fb_4tj5.jpg");
			background-repeat: no-repeat;
			height: 300px;
		}
	
	</style>
	
	<script type="text/javascript">
		
		// 자바 스크립트에서 함수선언 방법
		// 1. 선언적 방식
		function 함수명1() {};
		// 2. 리터럴 방식(변수를 호출하면, 메서드가 호출됨)
		const 함수명2 = function() {};
		// 3. Arrow Funtion
		const 함수명3 = () => {};
		
		//   상수= 리터럴
		const PI = 3.141592;
	
		/* Browser에 모든 요소(Element)가 배치가 완료되면 호출하는 이벤트 */
		// 전 파일과 구분지어야 하는 것은 전 파일은 function을 호출하면 생성되는 코드였음.
		// 밑에 HTML들이 다 만들어진 다음에 호출 할 예정이다.
		window.onload = function() {
			/* document.getElementById("hour").innerHTML = 12;
			document.getElementById("minute").innerHTML = 12;
			document.getElementById("second").innerHTML = 12; */
			
			// Timer:   함수    시간
			setTimeout(display_time,0);
			
		};
		
		function display_time() {
			// 현재 시스템 시간
			const now = new Date();
			let hour = now.getHours();
			let minute = now.getMinutes();
			let second = now.getSeconds();
			
			document.getElementById("hour").innerHTML = hour;
			document.getElementById("minute").innerHTML = minute;
			document.getElementById("second").innerHTML = second;
			
			setTimeout(display_time,1000);
		}
	
	</script>

</head>
<body>

	<div id="backgroundimage">
		<div id="go">
			<span id="hour">14</span>
			<span class="colon">:</span>
			<span id="minute">40</span>
			<span class="colon">:</span>
			<span id="second">30</span>
		</div>
	</div>

</body>
</html>

 

 

 

 

 

- 난리난 현재 시간

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

	<style type="text/css">
		
		* {
			/* span 태그 사이의 엔터사이즈의 공백을 없애기 위해 */
			/* 이거 안넣을거면 일자로 쭉 or 사이사이에 주석 넣기 */
			font-size: 0px;
		}
	
		span {
			/* 크기조절하기 위해 */
			display: inline-block;
			width: 60px;
			height: 70px;
			text-align: center;
			font-size: 48px;
			
			background: black;
			color: white;
		}
		
		.colon {
			width: 30px;
		}
		
		#backgroundimage {
			background-image: url("https://여기유.com/data/editor/2112/20211208144440_b00f3b0ef5332d92a0c500ef4f76c6fb_4tj5.jpg");
			background-repeat: no-repeat;
			height: 300px;
		}
		
		#ampm {
			width: 130px;
			color: yellow;
		}
	
	</style>
	
	<script type="text/javascript">
		
		// 자바 스크립트에서 함수선언 방법
		// 1. 선언적 방식
		function 함수명1() {};
		// 2. 리터럴 방식(변수를 호출하면, 메서드가 호출됨)
		const 함수명2 = function() {};
		// 3. Arrow Funtion
		const 함수명3 = () => {};
		
		//   상수= 리터럴
		const PI = 3.141592;
		
		let timer = null;
	
		/* Browser에 모든 요소(Element)가 배치가 완료되면 호출하는 이벤트 */
		// 전 파일과 구분지어야 하는 것은 전 파일은 function을 호출하면 생성되는 코드였음.
		// 밑에 HTML들이 다 만들어진 다음에 호출 할 예정이다.
		window.onload = function() {
			/* document.getElementById("hour").innerHTML = 12;
			document.getElementById("minute").innerHTML = 12;
			document.getElementById("second").innerHTML = 12; */
			
			// Timer:   함수    시간
			setTimeout(display_time,0); // 1회만 호출
			timer = setInterval(display_time,250); // 지정된 시간 간격으로 지속적으로 호출
			
			// 타이머 해제
			// clearInterval(timer);
		};
		
		// 전역변수 처리
		let watch_color = true;
		let ampm_color = true;
		let hour_color = true;
		
		function display_time() {
			// 현재 시스템 시간
			const now = new Date();
			let hour = now.getHours();
			let minute = now.getMinutes();
			let second = now.getSeconds();
			
			if(hour<12) {
				document.getElementById("ampm").innerHTML = "오전";
			} else document.getElementById("ampm").innerHTML = "오후";
			
  			if(hour<10) {
  				document.getElementById("hour").innerHTML = "0" + hour;
			} else if(hour>12) {
				document.getElementById("hour").innerHTML = hour%12;
			} if(hour%12<10) {
				document.getElementById("hour").innerHTML = "0" + hour%12;
			}
			
/* 			if(hour<10) {
				document.getElementById("hour").innerHTML = "0" + hour;
			} else document.getElementById("hour").innerHTML = hour; */
			
			if(minute<10) {
				document.getElementById("minute").innerHTML = "0" + minute;
			} else document.getElementById("minute").innerHTML = minute;
			
			if(second<10) {
				document.getElementById("second").innerHTML = "0" + second;
			} else document.getElementById("second").innerHTML = second;
			
			// toggle 처리
			watch_color = !watch_color;
			ampm_color = !ampm_color;
			hour_color = !hour_color;
			
			// class = "colon"인 Elements정보 구하기
			let colons = document.getElementsByClassName("colon");
			// console.log(colons.length);
			colons[0].style.color = watch_color ? "blue" : "yellow";
			colons[1].style.color = watch_color ? "red" : "orange";
			
			if(ampm="오전") {document.getElementById("ampm").style.color = ampm_color ? "blue" : "red";}
			else if(ampm="오후") {document.getElementById("ampm").style.color = ampm_color ? "yellow" : "orange";}
			
			document.getElementById("hour").style.color = hour_color ? "#eeee22" : "#00ff00";
			document.getElementById("minute").style.color = hour_color ? "#d43e82" : "#38cbe5";
			document.getElementById("second").style.color = hour_color ? "#a9ceee" : "#e723ea";
		
		}
	
	</script>

</head>
<body>

	<div id="backgroundimage">
		<div id="go">
			<span id="ampm">오전</span>
			<span id="hour">14</span>
			<span class="colon">:</span>
			<span id="minute">40</span>
			<span class="colon">:</span>
			<span id="second">30</span>
		</div>
	</div>

</body>
</html>

 

 

 

 

 

 

- 삼항연산자로 코드 줄이기

document.getElementById("ampm").innerHTML = (hour<12) ? "오전" : "오후";

/* 선생님의 답안
if(hour>12) {
    hour = hour % 12; // hour %= 12  hour -= 12
}
document.getElementByID("hour").innerHTML = (hour<10) ? "0" + hour : hour;
*/

if(hour<10) {
    document.getElementById("hour").innerHTML = "0" + hour;
} else if(hour>12) {
    document.getElementById("hour").innerHTML = hour%12;
} if(hour%12<10) {
    document.getElementById("hour").innerHTML = "0" + hour%12;
}

document.getElementById("minute").innerHTML = (minute<10) ? "0" + minute : minute;
document.getElementById("second").innerHTML = (second<10) ? "0" + second : second;

// toggle 처리
watch_color = !watch_color;
ampm_color = !ampm_color;
hour_color = !hour_color;

// class = "colon"인 Elements정보 구하기
let colons = document.getElementsByClassName("colon");
// console.log(colons.length);
colons[0].style.color = watch_color ? "blue" : "yellow";
colons[1].style.color = watch_color ? "red" : "orange";

if(ampm="오전") {document.getElementById("ampm").style.color = ampm_color ? "blue" : "red";}
else if(ampm="오후") {document.getElementById("ampm").style.color = ampm_color ? "yellow" : "orange";}

document.getElementById("hour").style.color = hour_color ? "#eeee22" : "#00ff00";
document.getElementById("minute").style.color = hour_color ? "#d43e82" : "#38cbe5";
document.getElementById("second").style.color = hour_color ? "#a9ceee" : "#e723ea";
반응형
저작자표시

'javaScript↗' 카테고리의 다른 글

JavaScript Class(클래스)  (0) 2024.06.11
JavaScript JSON(제이슨)  (1) 2024.06.11
[ jS] HTML 태그 추가 / 클래스 관리  (1) 2024.04.12
javaScript 이벤트(event)  (0) 2024.04.11
javaScript 함수(function)  (0) 2024.04.11

티스토리툴바