히바리 쿄야 와 함께 하는 Developer Cafe
[1일차] DO IT 자바스크립트 /P14 ~ 124/ 04. 제어문 본문
웹 브라우저 화면에 출력할때 - document.write()
var name = prompt("이름: ");
document.write(name + "님, 어서오시오!");
크롬 브라우저 화면에 표시하는 역할을 함
콘솔창에 출력하기 - console.log()
자바스크립트는 대소문자를 구분한다 , 예약어는 식별자로 사용할 수 없다.
사용자에게 간단한 텍스트 값을 입력 받을 때에는 prompt 라는 함수를 사용한다.
사용자에게 알림 창을 표시할 때에는 alert 함수를 사용한다.
변수 지정 할때 숫자가 맨앞에 나와서는 안된다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>나이 계산하기</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
var currentYear = 2020; //올해연도
var birthYear = prompt("태어난 연도를 입력하세요.","YYYY");; //태어난연도
var age;
age = currentYear - birthYear + 1; // 올해 연도 에서 태어난 연도를 뺀 다음 1을 더해야 나이 값이 나온다.
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>할인 가격 구하기</title>
<link rel="stylesheet" href="css/bargain.css">
</head>
<body>
<div id="contents">
<img src="images/sale.png">
<ul>
<li>
<label for="oPrice">원래 가격</label>
<input type="text" id="oPrice">원
</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>
function showPrice(){
var originPrice = 10000; //상품가격
var rate = 25; //할인율
document.querySelector("#showResult").innerHTML = "상품의 원래 가격은" + originPrice + "원이고, 할인율 은" + rate + "%입니다.";
}
</script>
</body>
</html>
예제 수정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>할인 가격 구하기</title>
<link rel="stylesheet" href="css/bargain.css">
</head>
<body>
<div id="contents">
<img src="images/sale.png">
<ul>
<li>
<label for="oPrice">원래 가격</label>
<input type="text" id="oPrice">원
</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>
function showPrice(){
//var originPrice = 10000; //상품가격
//var rate = 25; //할인율
var originPrice = document.querySelector("#oPrice").value;
var rate = document.querySelector("#rate").value;
var savedPrice = originPrice * (rate / 100); // 절약한 가격 -> 상품 가격 * (할인율 / 100)
var resultPrice = originPrice - savedPrice; // 지불한 가격 -> 상품가격 - 절약한 가격
document.querySelector("#showResult").innerHTML = "상품의 원래 가격은" + originPrice + "원이고, 할인율 은" + rate + "%입니다." + savedPrice + "원을 절약한 " + resultPrice + "원에 구입할 수 있습니다.";
}
</script>
</script>
</body>
</html>
Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
참고: 탐색은 깊이우선depth-first 전위pre-order순회로, 문서의 첫 번째 요소부터 시작해 자식 노드의 수를 기준으로 순회합니다.
document.querySelector(selectors);
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log('#foo\bar') // "#fooar" ('\b'는 백스페이스 컨트롤 문자)
document.querySelector('#foo\bar') // 일치하는 요소 없음
console.log('#foo\\bar') // "#foo\bar"
console.log('#foo\\\\bar') // "#foo\\bar"
document.querySelector('#foo\\bar') // 첫 번째 <div>
document.querySelector('#foo:bar') // 일치하는 요소 없음
ocument.querySelector('#foo\\:bar') // 두 번째 <div>
자료형
기본형
number( 숫자 ) : 따옴표 없이 표기한 숫자를 나타냄
string(문자열) : 작은 따옴표 (') 또는 큰 따옴표 (") 로 묶어 나타냄
boolean(문자열) : true or false
undefined : 자료형을 지정하지 않았을때 변수를 선언하고 값을 지정하지 않으면 표시된다.
null : 값이 유효하지 않을때
복합형
array(배열) : 하나의 변수에 여러값을 저장 -> 배열 시작은 인덱스 0 부터 시작함
object(객체) : 함수와 속성이 함께 포함된 유형
자료형을 확인할때 typeof 연산자 이용
if ~ else 이용 3의 배수를 출력하는 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3의 배수인지 확인</title>
<link rel="stylesheet" href="css/multi3.css">
</head>
<body>
<div id="result"></div>
<script>
var userNumber = prompt("숫자를 입력하세요.");
var userSelect = document.querySelector("#result");
if(userNumber != null){ //취소 버튼을 클릭하지 않았으면
if(userNumber % 3 == 0){
userSelect.innerHTML = userNumber + "은 3의 배수 입니다.";
}else{
userSelect.innerHTML = userNumber + "은 3의 배수가 아닙니다.";
}
}else{ //취소 버튼을 클릭했을때
alert("입력이 취소 되었습니다.");
}
</script>
</body>
</html>
body {
background-color:#0c3268;
color:rgb(243, 243, 243);
}
p {
margin-top:80px;
font-size:2em;
font-weight:700;
text-align: center;
text-shadow:1px 2px 1px #000;
}
p strong {
font-size:2.2em;
color:yellow;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>세션 선택</title>
<link rel="stylesheet" href="css/switch.css">
</head>
<body>
<script>
var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인", "1");
switch(session){
case "1" : document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.");
break;
case "2" : document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.");
break;
case "3" : document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.");
break;
default : alert("잘못 입력했습니다."); // default 에서는 break 사용하지 않는다.
}
</script>
</body>
</html>
for 구문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>중첩된 for 문</title>
<link rel="stylesheet" href="css/for.css">
</head>
<body>
<script>
for(var k = 0;k < 5;k++){
for(var i = 0;i < 30 ;i++){
document.write('*');
}
document.write("<br>");
}
</script>
</body>
</html>
div {
display:inline-block;
padding:0 20px 30px 20px;
margin:15px;
border:1px solid #ccc;
line-height:2;
}
div h3 {
text-align:center;
font-weight:bold;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>구구단 - for문</title>
<link rel="stylesheet" href="css/gugudan.css">
</head>
<body>
<h1>구구단</h1>
<script>
for(var i = 2; i <= 9;i++){
document.write("<div>");
document.write("<h3>" + i + "단</h3>");
for(var j = 1; j<=9;j++){
document.write(i + " X " + j + " = " + i * j + "<br>");
}
document.write("</div>");
}
</script>
</body>
</html>
var i = 0;
undefined
while (i < 10){
document.write("반복 조건이 true 이면 반복합니다. <br>");
i+=1;
}
10
var i = 0;
undefined
do{
document.write("반복 조건이 true 이면 반복합니다. <br>");
i+=1;
}while(i<10);
10
Factorial
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>팩토리얼 계산하기</title>
<link rel="stylesheet" href="css/factorial.css">
</head>
<body>
<script>
var n = prompt("숫자를 입력하세요.");
var nFact = 1;
var i = 2;
while(i <= n){
nFact *= i;
i++;
}
document.write(n + "!= " + nFact);
</script>
</body>
</html>
짝수 홀수 판별 예제
<script>
var useNum = prompt("숫자를 입력하세요.");
if(useNum != null){
if(useNum % 2 == 0){
document.write(useNum +"은 짝수입니다.");
}else{
document.write(useNum +"은 홀수입니다.");
}
}
</script>
3의 배수 모두 표시 개수 확인
<script>
var counter = 0;
for(var i=1;i<=100;i++){
if(i % 3 == 0){
counter++;
document.write(i + ",");
}
}
document.write("<h3>3의 배수의 개수 : ", counter + "<br>");
</script>
'JAVASCRIPT' 카테고리의 다른 글
| [6일차] HTML/CSS/JAVASCRIPT 웹 표준의 정석/p554 ~ p643/ 자바스크립트 객체,DOM (0) | 2021.03.08 |
|---|---|
| [5일차] DO IT HTML/CSS/JAVASCRIPT 웹표준의 정석/p441~p552/자바스크립트기초,자바스크립트문법,함수와이벤트 (0) | 2021.03.05 |
| [4일차] DO IT 자바스크립트/P291~ 345/ Form ~ BOM (0) | 2020.12.31 |
| [3일차] DO IT 자바스크립트 / p195~ 289 / Array ~ DOM (0) | 2020.12.30 |
| [2일차] DO IT 자바스크립트/ P142~193/ 이벤트 (0) | 2020.12.29 |
