본문 바로가기
컴퓨터 프로그래밍/수업

2020.05.22_2

깝돌이 2020. 5. 22. 16:46

for사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*자바의 주석과 동일한 주석을 사용한다.*/
/*
 * 자바의 스크립트의 for ------변수의 타입을 명시하지 않는다.\
 */
 
 for (var i=0; i<10; i++){
	 document.write(i+" Hello javaScript Event..<br>");
	 }
 document.write("===============================<br>");
</script>
</head>
<body>
<!-- html 주석이다. 자바스크립트의 주석과는 다르다.
	javascript 선언부는 body태그 안에서도 가능하다. -->
<script type="text/javascript">
	for (var i=0; i<10; i++){
		 document.write(i+" Hello javaScript Event..<br>");
		 }
	 	 document.write("===============================<br>");
</script>

</body>
</html>

 

onclick

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

	function test1(){
		document.write("연희 안녕?");
		alert("연희안녕??");//항상 먼저 실행된다.
	}
	function test2(str, name){
		var data = test3(name);
		alert(str+data);
		
	}
	function test3(message){
		return message+", 짱짱!!";
	}
</script>
</head>
<body>
	<input type = "button" value ="test1" onclick="test1()">
	<!--자바스크립트랑 연결 할 수 있는 속성!  onclick이랑 onchange은 select은 중요함. -->
	<input type = "button" value ="test2" onclick="test2('우유빛깔', '김연희')">
</body>
</html>

 

submit

jsp파일을 만들어서, action에 넣어줍니다. 

 

--jsp파일 백그라운드를 빨갛게만 해줌

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor=red>

</body>
</html>

버튼 눌렀을때 한번 확인해야합니다. 그것은 onsubmit으로 처리해줍니다. 

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

function entrance(){
	var flag = confirm("성인 사이트 입니다... 정말 입장하시겠습니까?");// yes, no 중 하나만 선택
	return flag;
}

</script>
</head>
<body>
	<form action = "adult.jsp" onsubmit = "return entrance()">
	<!-- 리턴을 써줘야지 결과값을 가지고 다시 옵니다. -->
	<!-- true가 리턴해서 돌아오면 앞에 action이 되고, false가 리턴해서 돌아오면 action이 실행이 안됩니다.  -->
	<!-- 온 서브밋은 무조건 폼에다가 써야합니다.  -->
		<input type="submit" value="성인 사이트 입장">
	</form>
</body>
</html>

 

jsp와 html의 차이는 이게 다릅니다.  

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

둘다 script기반입니다. 태그 기반이라는 뜻입니다. 

html은 프로그램이 아니나, jsp는 태그 기반의 프로그램(로직을 모양이 태그로 만들었음)입니다. 

웹컨테이너(PHP, jsp, asp)->꼬라지는 tag기반입니다. 

서버에서 돌아가는 가장 핵심적인 language는 servlet입니다. 

서블렛의 모양을 바꿔서 만든게 jsp

프론트랑와 프로그래머의 중간단계에서 잘 하게 하려는 asp, php, jsp입니다. 

mvc만 하는 회사, jsp만 하는 회사는 안됩니다. 

maven기반, servlet기반으로 하는 회사가 내가 성장 할 수 있는 회사입니다. 

 

 

formValue

여기까지면 폼 객체까지만 접근 한것입니다. 그래서 value까지 가야합니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>formValue</title>
<script type="text/javascript">
	function showData(){
	//닉네임으로 입력한값을 변수에 받아 온다. document.form이름.컴포넌트이름.value 
	var nickName = document.loginForm.nick.value;//트리구조로 차례로 들어감
	alert(nickName+" Hello~~~~~");
	document.loginForm.nick.value = "";//다시 value초기화 clear
	document.loginForm.nick.focus();//커서 초기화
		}
	
	function showHobby(){
		var hobby = document.loginForm.hobby.value;
		alert(hobby+" Hello~~~~~");
		document.loginForm.hobby.value = "";//다시 value초기화 clear
		document.loginForm.hobby.focus();//커서 초기화
				
	}
</script>
</head>
<body>
<form name = "loginForm">

	닉네임<input type= "text" name = "nick">
	<input type = "button" value = "닉네임보기" onclick="showData()"><br>
	취미<input type= "text" name = "hobby">
	<input type = "button" value = "취미보기" onclick="showHobby()">
</form>

</body>
</html>

 

valueCheck

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/* 
	 입력된 나이가 19세 이상이면  "성인입니다. 입장가능!!" 메세지를 alert로 출력
	 19세 미만이면"~~~~"메세지를 alert로 출력
	 위작업을 모두 각각의 입력박스의 값을 지우고 커서를 다시 위치 시킨다.
	 만약 빈공간일때는(값을 입력하지 않으면....)값을 입력 하라는 메세지를 띄운다....required 속성을 사용안함.
	 마지막 조건!!
	 숫자대신에 문자를 입력할때도 처리..."나이는 수자로 입력바랍니다."isNaN() 함수를 사용 합니다.is not a number? 
	 */
	function checkAge() {
		var age = document.ageFrm.age;
		//alert(typeof age.value);->string입니다.
		if (age.value == "") {
			alert("나이를 입력하세요.");
		} else if (isNaN(age.value)) {
			alert("나이는 숫자로 입력하세요.")
		} else if (age.value >= 19) {
			alert(age.value + "는 성인이므로 입장 하실수 있습니다.");
		} else {
			alert("미성년자는 입장 불가입니다.")
		}
		age.value = "";
		age.focus();

	}
</script>


</head>
<body>
	<form name="ageFrm">
		나이<input type="text" name="age"> <input type="button"
			value="나이확인" onclick="checkAge()">


	</form>
</body>
</html>

js를 밖으로 빼줍니다. 

 

라디오!!!!

배열임을 확인

 

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

	function reserve(){
		var ma = document.movieFrm.movie;
		//alert(m.length);
		//alert(ma[0].value);
		//alert(ma[3].checked);//radio에서 checked된거는 true 안된거는 false를 리턴
		
		//1. 해보기
		var flag = false;
		for (var i=0; i<ma.length; i++){
			/*만약에 특정한 영화가 선택 되었다면
			선택한 영화이 이름을 alert창으로 출려...
			선택한 영화가 해제가 되고 for문을 빠져나간다...
			
			만약에 어떤 영화도 선택하지 않았다면
			하나의 영화는 선택하라는 메세지를 alert로 합니다. 
			*/
			if(ma[i].checked){
				alert(ma[i].value+" 영화 예약!!");
				ma.checked = false;
				flag = true;
				break;
			}			
		}
		if(flag==false) alert("하나의 영화는 선택하세요.");
	}



</script>



</head>
<body>
	<form name = "movieFrm">
		<input type="radio" name = "movie" value="그을린 사랑">그을린 사랑<br>
		<input type="radio" name = "movie" value="타임 패러독스">타임 패러독스<br>
		<input type="radio" name = "movie" value="셔터아일랜드">셔터아일랜드<br>
		<input type="radio" name = "movie" value="식스센스">식스센스<br>
		<input type="button" value="reservation" onclick ="reserve()">
	</form>
</body>
</html>

 

 

체크박스멀티박스

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function choiceBox() {
		var ca = document.checkFrm.boy;
		//alert(ca.length); checked

		/*
		선택한 이상형들을 alert창으로 출력.... 한번 창 열리고....출력
		한명도 선택화지 않으면 alert출력
		 */
		var flag = false;
		var results = "";
		for (var i = 0; i < ca.length; i++) {
			if (ca[i].checked) {
				results += ca[i].value+" ";
				flag = true;
			}
			ca[i].checked = false;
		}
		
		if(flag){
			alert("당신의 이상형은 "+results+"입니다.");
		}else{
			alert("한명은 선택하세요.")
		}
		

	}
</script>

</head>
<body>
	<form name="checkFrm">
		<strong>이상형을 선택하세요(여러명 선택 가능합니다)</strong><br> <input
			type="checkbox" name="boy" value="김선생님">김선생님<br> <input
			type="checkbox" name="boy" value="이태호">이태호<br> <input
			type="checkbox" name="boy" value="조정석">조정석<br> <input
			type="checkbox" name="boy" value="공유">공유<br> <input
			type="checkbox" name="boy" value="이동욱">이동욱<br> <input
			type="button" value="선택" onclick="choiceBox()">
	</form>

</body>
</html>

 

'컴퓨터 프로그래밍 > 수업' 카테고리의 다른 글

2020.05.25_2  (0) 2020.05.25
2020.05.25_1  (0) 2020.05.25
2020.05.22_1  (0) 2020.05.22
2020.05.21_3  (0) 2020.05.21
2020.05.21_2  (0) 2020.05.21

'컴퓨터 프로그래밍/수업' Related Articles

티스토리툴바