💻인프런, 자바스크립트+JQuery 기초 part.1 실습 예제
HTML, JavaScript
<!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>Document</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이 계산</button>
<div id="result" class="show">(결과값 표시)</div>
<script>
//동적 부분
//나이 계산 함수 calc()선언과 구현.
function calc(){
//올해 년도 currentYear에 저장
var currentYear = 2022;
//사용자 출생년도 입력받아서 birthYear에 저장
var birthYear=prompt("태어난 연도 입력", "YYYY");
//변수 age 0으로 초기화
var age=0;
//나이 계산
age=currentYear-birthYear+1;
//페이지에 결과값 보여주기
//document는 현재 웹브라우저 페이지를 의미
//querySelector()는 id가 result인 웹 요소(div) 의미
//innerHTML은 대입한 값으로 html문서에 대체하라는 의미
document.querySelector("#result").innerHTML="당신의 나이는 "+age+"세 입니다.";
}
</script>
</body>
</html>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 blue;
padding: 5px;
}
.btn:hover{
color:#fff;
background-color: aquamarine;
border-color: aquamarine;
}
.show{
margin-top: 50px;
padding: 20px 30px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}✅ Script 객체
- document는 현재 웹브라우저 페이지를 의미
- querySelector()는 특정 name이나 id를 제한하지 않고 css선택자를 사용하여 요소에 접근
- innerHTML은 대입한 값으로 html문서에 대체
💻인프런, 자바스크립트+JQuery 기초 part.1 실습 예제
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>글자색 변경</title>
<link rel="stylesheet" href="css/text-color.css">
</head>
<body>
<h1 id="heading">안녕 자바스크립트</h1>
<p id="text">위의 텍스트를 클릭해보세요</p>
</body>
<script src="js/text-color.js"></script>
</html>JavaScript
//heading 변수를 선언하고 h1태그를 저장
var heading = document.querySelector("#heading");
//h1태그를 클릭하면 색을 red로 설정
heading.onclick = function () {
heading.style.color = "red";
}CSS
body{
text-align: center;
}
#heading{
color:blue;
}
#text{
color:gray;
font-size: 15px;
}❗ chrome에서 F12 key
- F12로 console로 디버깅 가능
'typeof 변수명' : 변수의 type 확인 가능 - F12로 elements 확인 가능
💻인프런, 자바스크립트+JQuery 기초 part.1 실습 예제
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>할인 가격 계산</title>
</head>
<link rel="stylesheet" href="css/sale.css">
<body>
<div id="contents">
<img src="resource/sale.png" width="150">
<ul>
<li>
<label for="originalPrice">원래 가격</label>
<input type="text" id="originalPrice">원
</li>
<li>
<label for="rate">할인 가격</label>
<input type="text" id="rate">%
</li>
<li>
<button onclick="showPrice()">할인 가격 계산하기</button>
</li>
</ul>
<div id="showResult"></div>
</div>
<script src="js/sale.js"></script>
</body>
</html>CSS
#contents{
width: 450px;
margin: 0 auto;
}
#contents img{
float:left;
margin-right: 25px;
}
ul{
list-style:none;
padding-top:40px;
}
li{
margin-bottom: 10px;
}
li label{
width: 80px;
float: left;
text-align: right;
}
input[type=text]{
width: 110px;
padding:5px 10px;
margin: 0 5px 0 10px;
}
button{
padding: 5px 10px;
border: 1px solid #fff;
font-size: 1em;
}
#showResult{
margin-top: 20px;
font-size: 1.5em;
}JavaScript
function showPrice(){
//사용자가 입력한 값을 두 개의 변수에 저장
var oPrice = document.querySelector("#originalPrice").value;
var rate=document.querySelector("#rate").value;
//값 모두 음수가 아닐 경우 실행
if(oPrice>0&&rate>0){
var savedPrice =oPrice*(rate/100);
var resultPrice=oPrice-savedPrice;
}
document.querySelector("#showResult").innerHTML="상품 원래 가격은 "+oPrice+" 원이고, 할인율은 "+rate+"%입니다."
+savedPrice+"원을 절약한 "+ resultPrice+"원에 살 수 있습니다."
}✅ label태그
- input태그와 label태그는 주로 같이 사용되며 연결시켜준다.(label의 for=""와 input의 id 값)
ex) 원래가격 원
✅input태그에 css 적용하기
- input태그의 type에 따라 선택하기 위해 아래 형식과 같이 작성, type을 변경해주면 된다.
ex) input[type=text] {}
