본문 바로가기
Log/etc.

Day27_JavaScript, CSS 연습

by uxia 2023. 6. 17.

JSP는 Java와 JavaScript 혼합된 코드를 작성하는 페이지고,

JS는 JavaScript만 작성하는 페이지다.

 

Return 타입은 명시하지 않아도 돼서

리턴이 있으면 쓰고 없으면 안 쓰면 된다.

 

간단한 코드를 작성하면 아래와 같이 페이지가 뜬다.

 

새롭게 out2.js, index2.html 파일을 만들어서

새로운 창이 뜨도록 해봤다.

 

index2.html에 src=js/out2.js로 작성해서 서로를 연결시켜주고

서버를 실행시키면 아래와 같이 버튼을 누르면 alert창이 뜬다.

 

 

JavaScript는 함수형 언어인데,

웹프로그램에서 내장된 객체 중 location, document를 자주 사용한다.

location은 클라이언트가 요청한 주소를 설정해줄 때,

document는 body 태그 안에 내용을 다룰 때 사용한다.

 

이어서 코드를 작성해주고 실행시켜보면

'alert2 함수 호출' 버튼을 눌렀을 때 body에 다음과 같이 뜬다.

 

 

JavaScript는 Java와 유사하면서도 다른데,

그 문법적 특징 몇 가지를 보자면

 

1. 데이터타입에 대해 앞에 작성해주지 않는다. 

그 대신 Var 혹은 Let을 사용하는데 그마저도 생략 가능하다.

 

2. '='를 안쓰고 '=='로 사용한다.

 

3. 데이터 타입을 작성하지 않아도 된다.

 

다음은 이에 대한 실습 코드이다.

 

 

1. 변수 Var

 

Var는 같은 변수를 반복해서 선언할 수 있다.

이를 해결하고자 let이 나왔지만 생략 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	name = prompt("이름을 입력하시오") // name 앞에 var 생략 
	alert("당신의 이름은 " + name + "입니다.")
</script>
</head>
<body>

</body>
</html>

 

 

다음으로 밥을 먹었는 지 질문을 하도록 하여

답변에 따라 다른 창이 뜨도록 했다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	name = prompt("이름을 입력하시오") // name 앞에 var 생략 
	alert("당신의 이름은 " + name + "입니다.")
	
	food = confirm("당신은 아침을 드셨습니까?") // true/false 
	if (food) {
		alert("배가 부르시겠군요")
	} else {
		alert("안됐군요")
	}
</script>
</head>
<body>

</body>
</html>

 

마지막으로 location.href를 사용하여 주소를 추가하고

배가 고프면 bbq지도로, 배가 부르면 여의도 한강공원 지도가 뜨도록 했다.

 

location.href를 사용하여 주소를 입력해주면 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	name = prompt("이름을 입력하시오") // name 앞에 var 생략 
	alert("당신의 이름은 " + name + "입니다.")
	
	food = confirm("당신은 아침을 드셨습니까?") // true/false 
	if (food) {
		alert("배가 부르시겠군요")
		location.href = "https://map.naver.com/v5/search/여의도한강공원/place/13416869?c=15,0,0,0,dh&placePath=%3Fentry%253Dbmp"
	} else {
		alert("안됐군요")
		location.href = "https://map.naver.com/v5/search/bbq/place/37667899?c=15,0,0,0,dh"
	}
</script>
</head>
<body>

</body>
</html>

 

 

실습 문제다.

 

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

<script type="text/javascript">
	
	function go() {
		site = prompt("접속하고싶은 포털은 무엇인가요?")
		if (site == 'naver') {
			location.href = "http://www.naver.com"
		} else if (site == 'daum') {
			location.href = "http://www.daum.net"
		} else {
			location.href = "https://www.google.co.kr"
		} // else
	} // go() 
	
	function check() {
		pw1 = prompt("pw 입력")
		pw2 = prompt("pw 재입력")
		
		if (pw1 == pw2) {
			alert("비밀번호 일치")
		} else {
			alert("비밀번호 불일치")
		}
	}
	
</script>
</head>
<body>
	<button onclick = "go()">포털사이트</button>
	<button onclick = "check()">비밀번호 확인</button>
</body>
</html>

 

 

다음은 로그인 항목 페이지다.

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

<script type="text/javascript">
	function login() {
		id = document.getElementById("user").value // uxia
		pw = document.getElementById("pw").value // 0812
		if (id == "uxia" && pw == "0812") {
			alert("로그인 성공")
		} else {
			alert("로그인 실패")
		}
	}
</script>

</head>
<body>
	ID : <input id = "user" value = "uxia"> <br>
	PW : <input id = "pw" value = "0812"> <br>
	<button onclick = "login()">로그인</button>
</body>
</html>

 

 

다음은 나이 계산기와 사각형의 면적을 구해주는

프로그램 코드도 작성해본다.

 

여기서 코드를 작성하기 전에 주석으로

진행 순서를 표시해놨는데, 이를 수도코드(Pseudo Code)라고 한다.

 

수도코드는 프로그래밍 알고리즘을 설명하기 위해 사용되는

비형식적인 프로그래밍 언어로

실제 프로그래밍 언어가 아니며, 프로그램을 구현하기 전에

알고리즘의 논리와 흐름을 설명하는 데 사용된다고 한다.

 

한마디로 나의 의사 및 계획, 설명을 주석처리하고

인간의 언어로 적어놓는 것을 의미한다.

 

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

<script type="text/javascript">
	function login() {
		id = document.getElementById("user").value // uxia
		pw = document.getElementById("pw").value // 0812
		if (id == "uxia" && pw == "0812") {
			alert("로그인 성공")
		} else {
			alert("로그인 실패")
		}
	} // login 함수
	
	function age() {
		// 의사코드(PseudoCode, 수도코드)
		// 입력 값 가지고와서 
		year = document.getElementById('year').value
		// 숫자로 변경 후 
		let year2 = parseInt(year)
		// 나이 계산
		let age = 2023 - year2
		// 출력 
		alert("your age : " + age)
	} // age 함수 
	
	function rec() {
		// 제어문
		// 순차문, 조건문, 반복문
		// 순차문 : 입력 -> 처리 -> 출력
		// 입력
		w = document.getElementById('w').value
		h = document.getElementById('h').value

		// 처리
		let result = parseFloat(w) * parseFloat(h) // parseFloat 소수로 바꿔주는 연산자 
		
		// 출력 
		alert("사각형의 면적 : " + result)
		
	} // rec 함수 
	
</script>

</head>
<body>
	ID : <input id = "user" value = "uxia"> <br>
	PW : <input id = "pw" value = "0812"> <br>
	<button onclick = "login()">로그인</button>
	<hr>
	태어난 연도 : <input id = "year" value = "2000"> <br>
	<button onclick = "age()">나이 계산 처리</button>
	<hr>
	가로 : <input id = "w" value = "11.11"> <br>
	세로 : <input id = "h" value = "22.22"> <br>
	<button onclick = "rec"()">사각형의 면적 입력</button>
</body>
</html>

 

div 테이블을 이용해서 브라우저 안에서의 레이아웃을 나눌건데,

네이버 홈페이지를 보면 창을 줄이고 키움에 따라서

가운데정렬이 맞춰진다.

 

그리고 검색창, 광고창, 뉴스데스크, 날씨 등의 레이아웃 틀 안에서

내용만 바뀌지 그 템플릿은 그대로 있다.

 

마찬가지로 div 테이블을 이용해서 레이아웃을 나눠봤다.

 

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

<script type="text/javascript">
	function login() {
		id = document.getElementById("user").value // uxia
		pw = document.getElementById("pw").value // 0812
		if (id == "uxia" && pw == "0812") {
			// alert("로그인 성공")
			resultTag = document.getElementById("result") // <div id = "result"></div>
			resultTag.innerHTML = "<span style = 'color : blue'>로그인 성공</span>"
		} else {
			// alert("로그인 실패")
			resultTag = document.getElementById("result") // <div id = "result"></div>
			resultTag.innerHTML = "<span style = 'color : red'>로그인 실패</span>"
		}
	} // login 함수
	
	function age() {
		// 의사코드(PseudoCode, 수도코드)
		// 입력 값 가지고와서 
		year = document.getElementById('year').value
		// 숫자로 변경 후 
		let year2 = parseInt(year)
		// 나이 계산
		let age = 2023 - year2
		// 출력 
		alert("your age : " + age)
	} // age 함수 
	
	function rec() {
		// 제어문
		// 순차문, 조건문, 반복문
		// 순차문 : 입력 -> 처리 -> 출력
		// 입력
		w = document.getElementById('w').value
		h = document.getElementById('h').value

		// 처리
		let result = parseFloat(w) * parseFloat(h) // parseFloat 소수로 바꿔주는 연산자 
		
		// 출력 
		alert("사각형의 면적 : " + result)
		
	} // rec 함수 
	
</script>

</head>
<body>
	ID : <input id = "user" value = "uxia"> <br>
	PW : <input id = "pw" value = "0812"> <br>
	<button onclick = "login()">로그인</button>
	<hr>
	<div id = "result">
		
	</div>
	<hr>
	태어난 연도 : <input id = "year" value = "2000"> <br>
	<button onclick = "age()">나이 계산 처리</button>
	<hr>
	가로 : <input id = "w" value = "11.11"> <br>
	세로 : <input id = "h" value = "22.22"> <br>
	<button onclick = "rec()">사각형의 면적 입력</button>
	<hr>
</body>
</html>

 

여기서 span은 글씨에 효과를 주고싶을 때 인라인 방식으로 사용하면 된다.

 

resultTag = document.getElementById("result") 를 해석해보면

document는 <body>부분을 의미하고

. 접근 연산자로 이동하라는 의미다.

id가 Result인 Element를 가져오라는 의미다.

 

Body 하단 부분에 작성한

<div id = "result" style = "background : lightgrey; width : 500; height : 300;"></div>

result가 id인 위 태그를 불러온다는 의미이다.

 

 

 

로그인 성공과 실패 여부를 한 눈에 알기 쉽게

이미지를 추가해본다.

 

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

<script type="text/javascript">
	function login() {
		id = document.getElementById("user").value // uxia
		pw = document.getElementById("pw").value // 0812
		if (id == "uxia" && pw == "0812") {
			// alert("로그인 성공")
			resultTag = document.getElementById("result") // <div id = "result"></div>
			resultTag.innerHTML = "<span style = 'color : blue'>로그인 성공</span><br>" + 
								  "<img src = 'img/success.JPG' width = '200' height = '200'>"
		} else {
			// alert("로그인 실패")
			resultTag = document.getElementById("result") // <div id = "result"></div>
			resultTag.innerHTML = "<span style = 'color : red'>로그인 실패</span><br>" + 
								  "<img src = 'img/fail.JPG' width = '200' height = '200'>"
		}
	} // login 함수
	
	function age() {
		// 의사코드(PseudoCode, 수도코드)
		// 입력 값 가지고와서 
		year = document.getElementById('year').value
		// 숫자로 변경 후 
		let year2 = parseInt(year)
		// 나이 계산
		let age = 2023 - year2
		// 출력 
		alert("your age : " + age)
	} // age 함수 
	
	function rec() {
		// 제어문
		// 순차문, 조건문, 반복문
		// 순차문 : 입력 -> 처리 -> 출력
		// 입력
		w = document.getElementById('w').value
		h = document.getElementById('h').value

		// 처리
		let result = parseFloat(w) * parseFloat(h) // parseFloat 소수로 바꿔주는 연산자 
		
		// 출력 
		alert("사각형의 면적 : " + result)
		
	} // rec 함수 
	
</script>

</head>
<body>
	ID : <input id = "user" value = "uxia"> <br>
	PW : <input id = "pw" value = "0812"> <br>
	<button onclick = "login()">로그인</button>
	<hr>
	<div id = "result" style = "background : lightgrey">
		
	</div>
	<hr>
	태어난 연도 : <input id = "year" value = "2000"> <br>
	<button onclick = "age()">나이 계산 처리</button>
	<hr>
	<div id = "result2" style = ""pont : lightblue"></div>
	가로 : <input id = "w" value = "11.11"> <br>
	세로 : <input id = "h" value = "22.22"> <br>
	<button onclick = "rec()">사각형의 면적 입력</button>
	<hr>
</body>
</html>

로그인 성공시 파란 글자와 함께 젠틀한 개구리가,

로그인 실패시 빨간 글자와 함께 못생긴 개구리가 뜨게 했다.

 

 

CSS도 잠깐 배웠는데(ppt p.237 중요)

 

a : hover 는 마우스 올렸을 때 효과가 적용되는데,

가상상황에 대해 적용되는 가상 선택자다.

 

li:nth-child(2n) 는 짝수만 적용되고

 

li:nth-child(2n+1) 는 홀수만 적용된다.

 

.은 class를 의미한다.

 

id는 #이 붙어서 하나만 콕 찝어서 스타일 적용이 가능하다.

 

위 내용을 토대로 스타일을 만들어봤다.

 

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

	#food { /* #아이디 */
		background : black; 
		color : yellow;
	}
	
	.best { /* .class 이름 */
		background : white;
		color : black;
		border : 3px solid #E6FEFF;
	}
</style>

</head>
<body>
	<h3>취미 목록</h3>
	<ul>
		<li class = "best">헬스</li>
		<li class = "best">웨이크보드</li>
		<li class = "best">댄스</li>
		<li id = "food">서핑</li>
	</ul>
</body>
</html>

 

 

마무리 JS 정리 문제

 

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

<script type="text/javascript">

	function me() {
		name = document.getElementById("name").value
		com = document.getElementById("com").value
		role = document.getElementById("role").value
		gender = document.getElementById("gender").value
		
		resultTag = document.getElementById("result")
		text = com + "에 " + role + "으로 있는 " + name + "입니다.<br>" 
		
		if (gender == "여자") {
			image = "<img src = img/woman.JPG width = 300 height = 300>"
		} else {
			image = "<img src = img/man.JPG width = 300 height = 300>"
		}
		
		resultTag.innerHTML = text + image
	
	}
	
	// 가방 첫 번째
	
	function bag() {
		best = document.getElementById("best").value
		resultTag = document.getElementById("result")
		
		if (best == "휴대폰") {
			image = "<img src = img/iphone.jpg width = 300 height = 300>"
		} else if (best == "시계") {
			image = "<img src = img/applewatch.jpg width = 300 height = 300>"
		} else {
			image = "<img src = img/etc.jpg width = 300 height = 300>"
		}
		resultTag.innerHTML = image
	}
	
	// 가방 두 번째 
	
	function bag2() {
		sec = document.getElementById("sec").value
		if (sec == "시계") {
			location.href = "https://www.rolex.com"
		} else {
			location.href = "https://www.dior.com/ko_kr"
		}
		
	}
	
	
</script>

</head>
<body>
	이름 : <input id = "name" value = "유시아"><br>
	회사 : <input id = "com" value = "NAVER"><br>
	직책 : <input id = "role" value = "인턴"><br>
	성별 : <input id = "gender" value = "여자"><br>
	<button onclick = "me()">내 정보 확인</button><hr color = "lightgrey">
	<div id = "result" style = "background : lightgrey; width : 500; height : 300;"></div>
	
	<hr color = lightblue>
	가방 안에 들어있는 물건 중 가장 중요한 것 입력 : <input id = "best" value = "휴대폰"><br>
	가방 안에 들어있는 물건 중 두번째로 중요한 것 입력 : <input id = "sec" value = "시계"><br>
	<button onclick = "bag()">제일 중요한 것 확인</button><br>
	<button onclick = "bag2()">두번째 중요한 것 확인</button><br>
	
</body>
</html>

 

복습 끝👍

'Log > etc.' 카테고리의 다른 글

Day39_[Mac OS] Finder 설정  (0) 2023.06.29
Day28_오픈소스 활용 실습  (0) 2023.06.19
Day14_Safari 사파리 개발자모드 안열림  (0) 2023.05.31
Day13_MacBook M1 HomeBrew 경로 설정_Brew 자꾸 사라짐  (0) 2023.05.31
Day2_터미널/iTerm2 오류 해결 at. Mac  (0) 2023.05.22

관련글

티스토리툴바