인프런 강의를 보고 코드 생성
ㆍage.html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>age</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<!-- 버튼을 클릭하면 calc()가 호출 된다. -->
<button class="btn" onclick="calc()"> 나이 계산 </button>
<div id="result" class="show"> (결과값 표시 div) </div>
<script>
//함수 calc()선언과 구현을 하고 있다.
function calc() {
// 올해 년도를 변수로 저장함
var currentYear = 2023;
//사용자로부터 입력을 받은 값으로 변수 birtYear에 저장/할당
var birthYear = prompt("태어난 년도를 입력하세요","YYYY");
//변수 age를 0으로 초기화
var age = 0;
//실제 나이를 구하기 위한 코드
age = currentYear - birthYear
//document는 현재 웹브라우저의 페이지를 의미하고 querySelector()는
//id가 result인 웹요소(div)를 의미한다 .innerHTML은 대입한 값으로
//html문서에 대체함.
document.querySelector("#result").innerHTML = "당신의 나이는" + age + "세 입니다.";
}
</script>
</body>
</html>ㆍage.css 코드
body{
text-align: center;
}
.btn {
margin-top: 50px;
font-weight: 400;
color: #fff;
background-color: #007bff;
text-align: center;
vertical-align: center;
border: 1px solid purple;
padding: 5px;
}
/* <btn> 태그에 :hover를 붙이면, <btn>태그에 마우스를 올렸을 때에 CSS 효과를 지정할 수 있습니다.
마우스를 올리면, <btn>태그의 글씨색이 붉은색과 border(테두리)색이 민트색으로 변하는 CSS 코드입니다. */
.btn:hover {
color: red;
background-color: aquamarine;
border-color: aquamarine;
}
.show {
margin-top: 50px;
padding: 20px 30px;
border-top: 1px solid #ccc;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid #ccc;
}
ㆍ구현결과
기본페이지 |
마우스를 가져다 댔을때 css에 의한 색상 변화 (나이변화) |
|
버튼을 클릭했을 때 (prompt 실행)
 |
데이터를 넣고 calc()함수가 호출되어 나온 결과 값 |
ㆍjs 파일로 따로 추출하기
age.html 코드
age.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>age</title>
<link rel="stylesheet" href="../css/age.css">
<script src="age.js"></script> <-추가
</head>
<body>
<!-- 버튼을 클릭하면 calc()가 호출 된다. -->
<button class="btn" onclick="calc()"> 나이 계산 </button>
<div id="result" class="show"> (결과값 표시 div) </div>
</body>
</html>
age.js (같은 경로에 생성)
//함수 calc()선언과 구현을 하고 있다.
function calc() {
// 올해 년도를 변수로 저장함
var currentYear = 2023;
//사용자로부터 입력을 받은 값으로 변수 birtYear에 저장/할당
var birthYear = prompt("태어난 년도를 입력하세요","YYYY");
//변수 age를 0으로 초기화
var age = 0;
//실제 나이를 구하기 위한 코드
age = currentYear - birthYear
//document는 현재 웹브라우저의 페이지를 의미하고 querySelector()는
//id가 result인 웹요소(div)를 의미한다 .innerHTML은 대입한 값으로
//html문서에 대체함.
document.querySelector("#result").innerHTML = "당신의 나이는" + age + "세 입니다.";
}
'개발' 카테고리의 다른 글
| 파이썬3 연차 사용 확인 소스코드 (작성중) (0) | 2023.09.26 |
|---|---|
| 파이썬3 기초 정리 (0) | 2023.07.31 |
| 자바스크립트 실습3 : 연산자 (0) | 2023.02.21 |
| 자바스크립트 실습2: 클릭으로 글자 색 바꾸기 (0) | 2023.02.20 |
| HTML과 CSS 실습 (0) | 2023.02.11 |
