Notice
Recent Posts
Recent Comments
Link
«   2025/10   »
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 31
Archives
Today
Total
관리 메뉴

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

HTML / CSS / JS/ jQuery study 08 본문

develop/WEB

HTML / CSS / JS/ jQuery study 08

teammate brothers 2024. 5. 22. 09:11

ex001_random

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			#result{color:red;}
		</style>
		<script>
			//1 ~ 100 사이의 난수
			let rnd = Math.floor(Math.random() * 100) + 1;
			
			let log_txt = "";
			
			function check(){
			
			let input_num = document.getElementById("guess");
			let guess = input_num.value.trim();
			
			let log = document.getElementById("log");
			
			//숫자 판단 정규식(최대 세자리)
			let regex = /^[0-9]{1,3}$/;
				if(!regex.test(guess) || guess > 100){
					alert("정수를 입력해야하며, 최대값은 100입니다.");
					return;
				}
			
			let result = document.getElementById('result');
			
				if(guess > rnd){
					result.innerHTML="입력값이 큽니다."
				}else if(guess < rnd){
					result.innerHTML="입력값이 작습니다."
				}else{
					result.innerHTML="정답."
				}
			log_txt += guess + " ";
			log.innerHTML = log_txt;
			}

		</script>
		
	</head>
	
	<body>
		1~100 사이의 숫자 중 하나를 입력해서 정답을 맞혀보세요.<br>
		<input id="guess">
		<input type="button" value="확인" onclick="check();">
		<div id="log"></div>
		<div id="result"></div>
	</body>

</html>

 

ex002_select

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<script>
			function showFruit(){
				let selectFruit = document.getElementById("fruitSelect");
				
				let selValue = selectFruit.value;
				if(selValue == ''){
					alert("과일을 선택하세요.");
				}else{
					alert("선택한 과일 : " + selValue);
				}
				
			}	
		</script>
		
	</head>
	
	<body>
		<select id="fruitSelect">
			<option value="">선택하세요</option>
			<option value="apple">사과</option>
			<option value="banana">바나나</option>
			<option value="orange">오렌지</option>
		</select>
		
		<input type="button" value="확인" onclick="showFruit()">
	</body>

</html>

ex003_create

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>동적 태그 관리</title>
		
		<script>
			//브라우저 시작과 함께 자동으로 호출되는 영역
			window.onload = function(){
				//새로운 div태그 생성
				let newDiv = document.createElement("div");
				
				let main_div = document.getElementById("main_div");
				
				//새로 생성한 div에 텍스트 추가
				newDiv.innerHTML = "안녕";
				
				//newDiv요소에 스타일 적용
				newDiv.style.backgroundColor = "lightblue";
				newDiv.style.padding = "20px";
				newDiv.style.margin = "10px";
				newDiv.style.borderRadius = "5px";
				
				//main_div태그에 newDiv를 추가
				main_div.appendChild(newDiv); 
		
			}	
			
		</script>
		
	</head>
	
	<body>
		<div id="main_div">
			메인 DIV
		</div>
	</body>

</html>

 

ex004_array

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			.opt{color:red;}
		</style>
		<script>
			let sido_array = ["서울", "대전", "대구", "부산"];
			
			window.onload = function(){
				let sido = document.getElementById("sido");

				//for문을 반복하며 option태그 생성 및 value 추가
				for(let i = 0; i < sido_array.length; i++){
					let option = document.createElement("option");
					option.innerHTML = sido_array[i];
					option.value = sido_array[i];
					option.className = "opt";
					
					sido.appendChild(option);
				}
			}
		</script>
		
	</head>
	
	<body>
		지역 : <select id="sido">
			<option value="">:::지역을 선택하세요:::</option>
			
		</select>
	</body>

</html>

ex005_form1

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>form태그를 사용하여 서버로 값 전달하기 1</title>
		
		<script>
			function check(){
				let f = document.forms[0]; //forms는 body안에 있는 모든 form태그들을 배역 구조로 가져오는 속성
				
				//form태그에서 name속성이 00으로 지정된 태그의 value값을 가져올께
				//form태그 내용은 아래 내용이 없어도 다 넘어가지만, 유효성 체크를 위해 아래 내용이 필요하다.
				let id = f.id.value;
				let pwd = f.pwd.value;
				let ta = f.ta.value;
				let select = f.select.value;
				
				alert(id + pwd + ta + select);
				
				//form태그의 정보들을 가지고 전환하고 싶은 페이지를 action으로 지정
				f.action = "signup.jsp";
				
				//form태그의 정보를 가지고 signup.jsp로 데이터를 전송
				f.submit();
				
			}
		</script>
		
	</head>
	
	<body>
		<!--form1-->
		<form>
			<input name="age">
			
			<!--a태그는 form태그의 공식적인 자식 요소가 아니므로, name 속성을 넣어도 파라미터로 전달되지 않는다-->
			<a href="#" name="link_a">나는 링크</a>
			
			<table border="1">
				<tr>
					<th>아이디</th>
					<td><input name="id"></td>
				</tr>
				
				<tr>
					<th>비밀번호</th>
					<td><input type="password" name="pwd"></td>
				</tr>
				
				<tr>
					<td colspan="2" align="center">
						<input type="button" value="폼 체크" onclick="check();">
					</td>
				</tr>
				
			</table>
			
			<textarea name="ta" rows="5" cols="50">나는 텍스트에어리어</textarea><br>
			
			<select name="select">
				<option value="menu1">메뉴1</option>
				<option value="menu2">메뉴2</option>
			</select>
		</form>
		
		<!--form2-->
		<form>
			
		</form>
	</body>

</html>

ex006_form2

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<script>
			function check(){
			let f = document.getElementById("ff");
			
			let age = f.age.value;
			
			let pat = /^[0-9]*$/;
			if(!pat.tst(age)){
				alert("나이는 정수입니다.");
				return;
			}

			//f.action = "signup.jsp";
			//method(전송방식):
			//1) get방식 : url에 모든 정보가 노출, 보안에 취약 - 속도가 빠름
			//2) post방식 : ulr에 정보노출 안됨, 보안 강화 - 속도 느림
			f.submit();				
			}
		</script>
		
	</head>
	
	<body>
		<!--method(전송방식)의 방식이 default 값이 get인데 그냥가면 url에 다 나타남. post 방식이면 나타나지않음-->
		<form id="ff" action="signup.jsp" method="post">
			<input name="id"><br>
			<input name="age"><br>
			<input name="pwd" type="password"><br>
			<input type="button" value="확인" onclick="check();">
		</form>
	</body>

</html>

 

ex007_form3

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<script>
			function check(){
				
				//name="ff"로 지정된 form태그를 가져온다
				let f = document.ff;
				
				f.method = "get";
				f.action = "login.jsp";
				f.submit();
				
			}
		</script>
		
	</head>
	
	<body>
		<form name="ff">
			<input name="my_name"><br>
			<input name="my_age"><br>
			<input type="button" value="확인" onclick="check();">			
		</form>
		
	</body>

</html>

 

ex008_form4

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		
		<script>
			function check(f){
				
				let id = f.id;
				let pwd = f.pwd;
				
				if(id.value == ""){
					alert("아이디를 입력하세요")
					id.focus(); //특정 입력상자로 커서 옮기기
					return;
				}
				
				f.method = "get";
				f.action ="signup.jsp";
				f.submit();
			}	
		</script>
		
	</head>
	
	<body>
		<form name="ff">
			아이디 : <input name="id"><br>
			비밀번호 : <input type="password" name="pwd"><br>
			
			<!--this는 현재 '전송버튼'을 의미함
				this.form은 나를 소유하고 있는 폼(ff)를 의미한다.
				this.table, this.div등은 없다!!-->
			<input type="button" value="전송" onclick="check(this.form);">
		</form>
	
	</body>

</html>

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

HTML / CSS / JS/ jQuery study 09  (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