Notice
Recent Posts
Recent Comments
Link
«   2025/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

스포츠마케터의 초보 개발자 도전기

HTML / CSS / JS/ jQuery study 09 본문

develop/WEB

HTML / CSS / JS/ jQuery study 09

teammate brothers 2024. 5. 22. 09:14

ex001_calculator

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<style>
			.number{width: 50px;}
			option{width: 50px;}
		</style>
		
		<script>
			
			let opt_array = ["더하기(+)", "빼기(-)" , "곱하기(*)", "나누기(/)"];
			let opt_value_array = ['+', '-', '*', '/'];
			
			window.onload = function(){
				let operator = document.getElementById("operator");
				
				for(let i = 0; i < opt_array.length; i++){
					let option = document.createElement("option");
					option.innerHTML = opt_array[i];
					option.value = opt_value_array[i];
					
					operator.appendChild(option);
				}
			}
			
			function calculate(){
				let num1 = document.getElementById("num1").value.trim();
				let num2 = document.getElementById("num2").value.trim();
				let operator = document.getElementById("operator").value;
				let result = document.getElementById("result");
				
				//결과값 담는 res 준비				
				let res;
				
				let numbers = /^[0-9]*$/;
					if(!numbers.test(num1) || !numbers.test(num2) ){
						alert("정수를 입력하세요.");
						return;
					}
					
					if(num1 == "" || num2 == ""){
						alert("두개의 입력상자를 모두 채워야 합니다.")
						return;
					}
				
				
				//소수점이 최대 2자리인지까지인지를 판단하는 정규식
				let floatPattern = /^(\d*)[\.]?(\d{1,2})?$/;
				
				
				switch(operator){
					case '+' : res = Number(num1) + Number(num2);
					break;
					
					case '-': res = num1 - num2;
					break;
					
					case '*': res = num1 * num2;
					break;
					
					case '/': res = num1 / num2;
					if(num2 == 0){
						alert("0으로 나눌 수 없습니다.")
						return;
					}
					
					//연산결과인 result가 소수점 2자리를 넘어 간다면 if로
					if ( !floatPattern.test(res)){
						res = res.toFixed(2);
						return;
					}
					break;
				}
				
				result.innerHTML = "결과 : " + res;
				 
			}
			
			
				
		</script>
		
	</head>
	
	<body>
		<input id="num1" class="number" placeholder="정수1">
		<input id="num2" class="number" placeholder="정수2">
		<select id="operator">
			<option value="">::연산자를 고르세요::</option>

		</select>
		<input type="button" value="실행" onclick="calculate()">
		<br>
		<p id="result"></p>
	</body>

</html>

 

ex002_gugudan

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<script>
			window.onload = function(){
				let selectDan = document.getElementById("selectDan");
				
				for(let i = 2; i <= 9; i++){
					let opt = document.createElement("option");
					opt.innerHTML = i + "단";
					opt.value = i;
					selectDan.appendChild(opt);
				}
			}
			function send(){
				let dan = document.getElementById("selectDan").value;
				
				let result = document.getElementById("result");
				
				let str = "";
				
				for(let i = 1; i <= 9; i++){
					str = str + dan + "*" + i + "=" + (dan * i) + "<br>";
				}
				result.innerHTML = str;
			}
		</script>
		
	</head>
	
	<body>
		<select id="selectDan"></select>
		<input type="button" value="확인" onclick="send()">
		<div id="result"></div>
	</body>

</html>

 

ex003_select

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<script>
			window.onload = function(){
				/*출생년도 2000-2024*/
				let year = document.getElementById("birth_year");
				
				for(let i = 2000; i <= 2024; i++){
					let option = document.createElement("option");
					option.innerHTML = i + "년";
					option.value = i;
					year.appendChild(option);
				}
			}
			
			let last_day = 31;
			function check_yoon(){
				//선택한 년도가 윤년인지 체크
				let year = document.getElementById("birth_year").value;
				
				if(isYoon(year)){
					last_day = 29;
				}else{
					last_day = 28;
				}
				
				//월추가
				let month = document.getElementById("birth_month");
				
				//년도를 변경할때마다 월에 데이터가 append 되면서 누적되지 않도록 초기화를 해줘야한다
				//month.innerHTML = ""; (방법1)
				
				let n = month.length; //(방법2)
				while(n > 0){
					month.remove(0);
					n--;
				}
				
				for(let i = 1; i <= 12; i++){
					let option = document.createElement("option");
					option.innerHTML = i + "월";
					option.value = i;
					month.appendChild(option);
				}
			}
			
			//윤년검사 함수
			function isYoon(year){
				//윤년: 400의 배수이거나, 4의 배수이면서 100의 배수가 아닌경우
				let yoon = (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0);
				return yoon;
			}
			
			//월 선택했을때 호출함수
			function monthChange(month){
				let m;
				switch(Number(month)){
					case 1: case 3: case 5: case 7: case 8: case 10: case 12:
					m = 31;
					break;
					
					case 2:
					m = last_day;
					break;
					
					case 4: case 6: case 9: case 11:
					m = 30;
					break;
				}
				
				let day = document.getElementById("birth_day");
				
				day.innerHTML = "";
				
				for(let i = 1; i <= m; i++){
					let option = document.createElement("option");
					option.innerHTML = i + "일";
					option.value = i;
					day.appendChild(option);
				}
			}
		</script>
		
	</head>
	
	<body>
		생년월일 : 
		<select id="birth_year" onChange="check_yoon();">
			<option>년</option>
		</select>
		
		<select id="birth_month" onChange="monthChange(this.value);">
			<option>월</option>
		</select>
		
		<select id="birth_day">
			<option>일</option>
		</select>
	</body>

</html>

ex004_jQuery_init

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<!--jQuery : 자바스크립트를 좀 더 사용하기 용이하도록 설계해둔 일종의 라이브러리-->
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		
		<script>
			//초기화 영역 세팅방법 1
			$(document).ready(function(){
				alert("최초실행되는 영역");
				
				//document.body
				$("body").css("background", "red");
			});
			
			//초기화 영역 세팅방법 2
			//$(function(){
			//	
			//});
		</script>
		
	</head>
	
	<body>
	
	</body>

</html>

 

ex005_jQuery_click

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		
		<script>
			$(function(){
				$("#btn1").click(function(){
					alert("버튼1 클릭됨");
				});
			
			
				$("#btn2").click(function(){
					//let msg = $("#msg").val();
					//alert(msg);
					
					$("#msg").val("입력상자에 값 넣음"); //입력상자 값 넣기
					
					//$(this) : 현재 이벤트를 발생시킨 btn2 객체
					$(this).val("내용바뀜"); //버튼 내용 바꾸기		
				});
				
				//버튼에게 감지자를 참조
				$("#btn3").click(bt3_click);
				$("#btn4").click(bt4_click);
				
			});	
			
			function bt3_click(){
				alert("버튼3 클릭됨");
			}
			
			let bt4_click = function(){
				alert("버튼4 클릭됨")
			}
		</script>
		
	</head>
	
	<body>
		<input id="msg" placeholder="메시지를 입력하세요"><br>
		<input type="button" id="btn1" value="버튼1">
		<input type="button" id="btn2" value="입력된 메시지">
		<input type="button" id="btn3" value="test">
		<input type="button" id="btn4" value="test2">
		
	</body>

</html>

 

ex006_jQuery_click

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		
		<script>
		
		
/*				$("#plus").click(plus_f);

				$("#plus").click(function(){
					let n1 = $("#num1").val();
					let n2 = $("#num2").val();
					
					let result = Number(n1) + Number(n2);
					$("#result").val(result);
					
				});
			}); 
			

//		function plus_f(){
//			let num1 = document.getElementById("num1").value;
//			let num2 = document.getElementById("num2").value;
//			let result = document.getElementById("result");
//			
//			let numbers = /^[0-9]*$/;
//					if(!numbers.test(num1) || !numbers.test(num2) ){
//						alert("정수를 입력하세요.");
//						return;
//					}
//					
//			result.value = Number(num1) + Number(num2)
//			
//		} */

		$(function(){
			$("#plus, #minus, #mult, #div").click(function(){
				calc($(this));
			});
		});
				
				function calc(btn){
				//	alert(btn.val());
					
					let n1 = $("#num1").val();
					let n2 = $("#num2").val();
					
					let result;
					
					switch(btn.val()){
						case "합" :
						result = Number(n1) + Number(n2);
						break;
	
						case "차" :
						result = n1 - n2;
						break;
	
						case "곱" :
						result = n1 * n2;
						break;
	
						case "분" :
						result = n1 / n2;
						break;
					} 
					
					$("#result").val(result);
				}
		
	</script>
		
			
	</head>
	
	<body>
		<input id="num1" size="5">
		<input id="num2" size="5"> =
		<input id="result" size="5">
		
		<br>
		
		<input type="button" id="plus" value="합">
		<input type="button" id="minus" value="차">
		<input type="button" id="multi" value="곱">
		<input type="button" id="div" value="분">
	</body>

</html>

 

ex007_jQuery_html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		
		<script>
			$(function(){
				$("#btn1").click(function(){
					let aa = $("#aa").html();
					console.log("aa.html : " + aa);
					
					$("#aa").html("<h2>곧 점심시간</h2>");
				});
				
				$("#btn2").click(function(){
					$("#bb").html("");
				});
				
				$(".btn3").click(function(){
					$("p").html("오늘 상담");
				});		
			});		
		</script>
		
	</head>
	
	<body>
		<input type="button" value="btn1" id="btn1">
		<input type="button" value="btn2" id="btn2">
		<input type="button" value="btn3" class="btn3">
		
		<div id="aa">jQuery</div>
		<div id="bb">노잼</div>
		<p>제이쿼리 연습중</p>
		
	</body>

</html>

 

ex008_jQuery_css

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		
		<script>
			$(function(){
				$("#pwd").css("border","1px solid red");
				$("#id").css("border","1px solid blue");
				
				$(".row").css("border", "1px dotted green")
						 .css("background", "pink")
						 .css("color", "#fff");
						 
				$("input[type='button']").css("background", "yellow");				
			});		
		</script>
		
	</head>
	
	<body>
		<table border="1">
			<tr>
				<th class="row">ID</th>
				<td>
					<input id="id">
				</td>
			</tr>

			<tr>
				<th class="row">PWD</th>
				<td>
					<input id="pwd" type="password">
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<input type="button" value="로그인">
				</td>
			</tr>
		</table>
	</body>

</html>

ex009_jQuery_css

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>		
		<script>
			$(function(){
				$("a[target]").css("background", "#ccc");	
				
				$("input[size != 20]").css("border", "1px solid red");
				
				//=: 정확하게 일치하는 것
				//~=: 공백을 제거하고 내용이 일치하는 것
				//$("a[href='https://www.naver.com']").css("background", "pink");
				$("a[href~='https://www.naver.com']").css("background", "pink");
			});
		</script>
		
	</head>
	
	<body>
		<input size="10">
		<input size="20">
		<br>
		<a href="https://www.daum.net">다음</a><br>
		<a href="   https://www.naver.com   ">네이버</a><br>
		<a href="https://www.naver.com" target="_blank">네이버(새창)</a>
	</body>

</html>

 

ex010_jQuery_state

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>		
		
		<script>
			$(function(){
				//^=: ~로 시작하는...
				$("div[id^='vi']").css("background", "blue");
				
				//*=: 해당문자를 포함하는 요소
				$("div[id*='tent']").css("background", "pink");
				
				//$= : 해당 값으로 긑나는 요소
				$("div[id$='1']").css("background", "yellow");
				
			});		
		</script>
		
	</head>
	
	<body>
		<div id="content-1">속성에 따른 스타일 시트 적용</div>
		<div id="content-2">속성에 따른 스타일 시트 적용</div>
		<div id="view-1">속성에 따른 스타일 시트 적용</div>
	</body>

</html>

ex011_jQuery_child

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>				
		<script>
			$(function(){
				$(".movie").css("border", "2px solid red");
				
				//.find()를 통해서 자신의 하위요소로 접근이 가능
				$(".movie").click(function(){
					let msg = $(this).find("p").html();
					alert(msg);
				});
			});
		</script>
		
	</head>
	
	<body>
		<ul>
			<li>
				<div class="movie" id="movie1">
					<p>범죄도시4</p>
				</div>
			</li>
			
			<li>
				<div class="movie" id="movie2">
					<p>파묘</p>
				</div>
			</li>
			
			<li>
				<div class="movie" id="movie3">
					<p>쿵푸팬더</p>
				</div>
			</li>
		</ul>
	</body>

</html>

'develop > WEB' 카테고리의 다른 글

HTML / CSS / JS/ jQuery study 08  (0) 2024.05.22
HTML / CSS / JS/ jQuery study 07  (0) 2024.05.22
HTML / CSS / JS/ jQuery study 05  (0) 2024.05.17
HTML / CSS / JS/ jQuery study 04  (0) 2024.05.17
HTML / CSS / JS/ jQuery study 03  (0) 2024.05.17
'develop/WEB' Related Articles more