스포츠마케터의 초보 개발자 도전기
HTML / CSS / JS/ jQuery study 08 본문
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 |