BOM, DOM
참고: https://csooy38.com/JavaScript-BOM-&-DOM
https://cbw1030.tistory.com/46
[Javascript] Window, DOM, BOM이란?
나는 자바스크립트 언어를 Window, DOM, BOM이 정확히 무엇을 의미하는지도 모른채 사용해왔다. 사실 Window, DOM과 BOM을 이해하기 위해 과거에 여러 문서를 보고 구글링도 했었지만 와닿지가 않았고
cbw1030.tistory.com
[JavaScript] BOM & DOM
자바스크립트(JavaScript) 8. BOM BOM(Browser Object Model : 브라우저 객체 모델)은 브라우저 내에 내장된 객체를 의미한다. BOM 객체의 최상위 내장 객체는 window 객체로, 생략가능하다. 8.1. window 객체 window
csooy38.com
- BOM (Browser Object Model)
: 브라우저 창 조작
screen, location, history 메소드
- DOM (Document Object Model)
: 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공
자바스크립트에서 동적인 HTML을 위해 DOM 객체에 접근하여 조작
연산자
- 문제
1분기 판매량 1200
2분기 판매량 1300
3분기 판매량 1000
=> 4분기 판매량 입력받기
1분기~3분기의 평균 이상 -> 판매량이 평균 이상입니다 / 판매량 평균 미달입니다.
document.write
=>
<script>
var first = 1200;
var second = 1300;
var third = 1000;
var avg = (first+second+third)/3;
var fourth = Number(prompt("4분기 판매량은?"));
var result = (fourth>=avg)?"판매량이 평균 이상입니다.":"판매량이 평균 미달입니다";
document.write(result);
</script>
- input 값 받아 script function 적용하기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<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>
<style>
#contents {
width: 450px;
margin: 0 auto;
}
#contents>img{
float: left;
margin-right: 20px;
}
#contents>ul {
list-style: none;
padding-top: 40px;
}
#contents li{
margin-bottom: 10px;
}
#contents li label{
width: 80px;
float: left;
text-align: right;
}
#contents li input{
width: 110px;
padding: 5px 10px;
border: 1px solid #ccc;
margin: 0 5px 0 10px;
}
#contents>ul>li:last-child{
margin-top: 20px;
text-align: center;
}
#contents ul button{
padding: 5px 10px;
border: 1px solid #ccc;
font-size: 1.1em;
}
#contents button:hover{
background-color: greenyellow;
}
#showResult{
margin-top: 20px;
font-size: 1.5em;
}
</style>
<script>
function showPrice(){
var oPrice = document.querySelector("#oPrice").value;
var rate = document.querySelector("#rate").value;
var rPrice = oPrice*rate/100; //할인액
var price = oPrice-rPrice; //할인 후 가격
document.querySelector("#showResult").innerHTML="상품의 정상가는 "+
oPrice+"원이고, 할인율은 "+rate+"%입니다. "+rPrice+
"원을 절약한 "+price+"원에 살 수 있습니다.";
}
</script>
</head>
<body>
<div id="contents">
<img src="../images/sale.png" alt="sale">
<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>
</body>
|
cs |
- 문제 : 연필 나누어주기
연필총개수
인원수
=>연필 총개수는 00개이며 00명에게 나누어 줄 것입니다. 1인당 00개씩 나누어주고 연필이 00개 남았습니다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<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>
<style>
#contents {
width: 450px;
margin: 0 auto;
}
#contents>img{
float: left;
margin-right: 20px;
}
#contents>ul {
list-style: none;
padding-top: 40px;
}
#contents li{
margin-bottom: 10px;
}
#contents li label{
width: 80px;
float: left;
text-align: right;
}
#contents li input{
width: 110px;
padding: 5px 10px;
border: 1px solid #ccc;
margin: 0 5px 0 10px;
}
#contents>ul>li:last-child{
margin-top: 20px;
text-align: center;
}
#contents ul button{
padding: 5px 10px;
border: 1px solid #ccc;
font-size: 1.1em;
}
#contents button:hover{
background-color: greenyellow;
}
#showResult{
margin-top: 20px;
font-size: 1.5em;
}
</style>
<script>
function showDivide(){
var totalPencil=document.querySelector("#totalPencil").value;
var number=document.querySelector("#number").value;
var residue=totalPencil%number;
var shared=parseInt(totalPencil/number);
document.querySelector("#showResult").innerHTML="연필 총 개수는 "+totalPencil+"개이며 "
+number+"명에게 나눠 줄 것입니다. 1인당 "+shared+"개씩 나누어주고 연필은 "+residue+"만큼 남았습니다.";
}
</script>
</head>
<body>
<div id="contents">
<img src="../images/3.png" alt="sale">
<ul>
<li>
<label for="totalPencil">연필총개수</label>
<input type="text" id="totalPencil">개
</li>
<li>
<label for="number">인원수</label>
<input type="text" id="number">명
</li>
<li>
<button onclick="showDivide();">연필 나누어주기</button>
</li>
</ul>
<div id="showResult">
</div>
</div>
</body>
|
cs |
- 복합 대입 연산자 (cf. 대입연산자 : =)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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>
<script>
function menu(){
var list=""; //초기화 필수
list+="<ul>";
list+="<li>된장찌개</li>";
list+="<li>순대국</li>";
list+="<li>칼국수</li>";
list+="</ul>";
document.body.innerHTML+=list;
}
</script>
</head>
<body>
<h2 onclick="menu();">오늘의 메뉴</h2> //() 필수
</body>
|
cs |
- 비교연산자 ==, ===
== : 자료형 상관없이 값 비교 (type 다르면 형변환)
ex.
<script>
alert(0==false); //true
alert(50=='50'); //true
</script>
=== : 자료형, 값 모두 일치해야 함
ex.
<script>
alert(0===false); //false
alert(50==='50'); //false
</script>
변수
- 재선언
<script>
var food="김치찌개";
var food="부대찌개"; //자바: 변수 이름 중복으로 컴파일 오류
var food="칼국수";
alert(food);
</script>
=> 마지막 값인 칼국수 출력
cf.
<script>
var food="김치찌개";
food="부대찌개"; //값 변경한 것일 뿐
food="칼국수";
alert(food);
</script>
- typeof
: 값의 타입 알려주는 함수 (int, string, undefined,..)
ex.
<script>
var num;
alert(typeof(num));
</script>
=> 값을 알 수 없으므로 (타입이 주어지지 않음) undefined
- confirm :확인/취소 창
ex. var num = confirm("숫자 입력하시겠습니까?");
확인 = true, 1 / 취소 = false, 0
조건문
- if문
- 문제 : 숫자 입력받아 3의 배수인지 체크
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html lang="en">
<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>
<style>
#result{
width: 500px;
height: 100px;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 1px 2px 1px #666;
font-size: 1.4em;
line-height: 100px;
text-align: center;
font-weight: bold;
}
</style>
<script>
function qua(){
var userNum=prompt("숫자를 입력하세요","0");
var displayArea=document.querySelector("#result");
if (userNum!=null){ //null : alert 취소버튼
if (userNum%3===0){
displayArea.innerHTML=userNum+"은 3의 배수입니다";
}else{
displayArea.innerHTML=userNum+"은 3의 배수가 아닙니다";
}
} else{
alert("입력이 취소되었습니다");
}
}
</script>
</head>
<body>
<button onclick="qua();">3의 배수 체크 문제 풀기</button>
<div id="result">
</div>
</body>
|
cs |
- 문제
0~5 => 아직 새벽입니다. 일찍 일어나셨네요.
6~11 => 상쾌한 아침입니다. 좋은 하루 되세요.
12~17 => 즐거운 오후 되세요.
18~23 => 행복한 저녁 되세요.
alert
=>
<script>
var d=new Date();
var h = d.getHours();
if (0<=h&&h<=5){ //h<6
alert("아직 새벽입니다. 일찍 일어나셨네요.");
} else if (h<=11){ //h<12
alert("상쾌한 아침입니다. 좋은 하루 되세요.");
} else if (h<=17){ //h<18
alert("즐거운 오후 되세요.");
} else{
alert("행복한 저녁 되세요.");
}
</script>
- switch문
조건이 한정적, 명확할 때 사용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<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>switch 조건문</title>
<style>
body{
background-color: #666;
color: #fff;
}
p{
margin-top: 80px;
font-size: 2em;
font-weight: 700;
text-align: center;
text-shadow: 1px 2px 1px #000;
}
p strong{
font-size: 2.3em;
color: #ff0;
}
</style>
<script>
var choice = Number(prompt("여행지를 선택해주세요(1. 미주 2. 유럽 3. 동남아)"));
//input은 문자 인식 switch(choice){
case 1: //case "1":
document.write("<p>미주 여행은 <strong>1층 안내데스크</strong>에 문의하세요</p>");
break;
case 2:
document.write("<p>유럽 여행은 <strong>2층 안내데스크</strong>에 문의하세요</p>");
break;
case 3:
document.write("<p>동남아 여행은 <strong>3층 안내데스크</strong>에 문의하세요</p>");
break;
default:
alert("여행지 선택이 잘못되었습니다."); //break X
}
</script>
</head>
<body>
</body>
|
cs |
- 문제 : prompt -> 짝홀수 분류
<script>
var num = prompt("숫자를 입력하세요");
switch(num%2){
case 0:
document.write("짝수입니다");
break;
case 1:
document.write("홀수입니다");
break;
default:
alert("숫자가 아닙니다");
}
</script>
- 삼항 연산자
<script>
var score = Number(prompt("점수를 입력해주세요"));
(score>=80)?alert("합격"):alert("불합격");
</script>
- 짧은 조건문
if문 없더라도 조건문 실행
(bool 표현식)||(bool 표현식 거짓일 때 수행할 문장)
(bool 표현식)&&(bool 표현식 참일 때 수행할 문장)
- or
<script>
true || alert("실행?A"); //왼쪽 true 실행돼 오른쪽 alert으로 안 넘어감
false || alert("실행?B"); //왼쪽 false이므로 오른쪽으로 넘어가 alert 실행
</script>
=> 실행?B alert 실행됨
- and (왼쪽 true면 다음 조건도 조사함)
<script>
var input=Number(prompt("숫자를 입력해주세요"));
input%2==0||document.write("홀수"); //if not A, B
input%2==0&&document.write("짝수"); //if A, B
</script>
반복문
- for문
<script>
var sum=0;
for (var i=1;i<100;i++){
sum+=i;
}
document.write("1부터 100까지 합= "+sum);
</script>
※ 자바스크립트 배열 기호
var nums = [10,20,30];
alert(nums[0]);
cf. 자바
int[] nums ={10,20,30};
sys~(nums[0]);
- 문제 : 배열 역순 출력
<script>
var seasons=["봄", "여름", "가을","겨울"];
/*for (var i=0;i<seasons.length;i++){
document.write(seasons[i]+"<br>");
}*/
for (var i=seasons.length-1;i>=0;i--){
document.write(seasons[i]+"<br>");
}
</script>
- 문제 : 평균, 총합
<script>
var scores = [89,74,63,88,70,96,88,55,60];
var sum=0;
for (var i=0;i<scores.length;i++){
sum+=scores[i];
}
var avg=parseInt(sum/scores.length);
document.write(sum+" "+avg);
</script>
※ Number - parseInt 의 차이
1. Number
<script>
var input=Number(prompt("점수를 입력하세요"));
var score = input+10;
alert(score);
</script>
=> 숫자+문자 input -> NaN(알 수 없는 값) 출력
2. parseInt
<script>
var input=parseInt(prompt("점수를 입력하세요"));
var score = input+10;
alert(score);
</script>
=> 숫자+문자 input -> 정수 출력
=> 기존 parseInt 원리 활용 (90.xxx 일 때 소수점 모두 없애고 90만 추출)
=> 추후 css 스타일 변경시 활용 예정 ex. parseInt("80px")*2
- 배열 출력
<script>
var seasons =["봄","여름","가을","겨울"];
document.write(seasons+"<br>"); //봄,여름,가을,겨울 => 콤마 구분자
var scores = [89,74,63,88,70,96,88,55,60];
document.write(scores); //89,74,63,88,70,96,88,55,60
var na = "korea";
document.write(na); //korea
document.write(na[2]); //r
</script>
var nums=[10,20];
nums.push(30);
nums.push(55);
nums.push(70);
document.write(nums); //10,20,30,55,70
var arr=[10,"대한민국",2.4,false];
document.write(arr); //10,대한민국,2.4,false
※ node.js es6 => 변수 타입으로 var 대신 let 사용
- 향상된 for문
var fruits=['자두','참외','수박','사과'];
for (var i in fruits){
document.write(fruits[i]); //자두참외수박사과
}
'Programming > 국비학원' 카테고리의 다른 글
| 220701 - 자바스크립트 - 객체 생성, 객체의 배열화, 내장 객체 (0) | 2022.07.02 |
|---|---|
| 220630 - 자바스크립트 - 반복문, 함수, 객체 (0) | 2022.07.01 |
| 220628 - 웹페이지 구현 실습(회원가입창 완료), 자바스크립트 (변수) (0) | 2022.06.29 |
| 220627 - 웹페이지 구현 실습 (0) | 2022.06.28 |
| 220624 - 웹페이지 구현 실습 (0) | 2022.06.25 |