HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="/2023-11-27/win_ob.js"></script>
</head>
<body>
<button onclick="clearInterval(auto_1)">증가 정지</button>
<button onclick="clearInterval(auto_2)">감소 정지</button>
</body>
</html>
JS
var addNum = 0;
var subNum = 1000;
var auto_1 = setInterval(function () {
addNum++;
console.log("addNum : " + addNum);
}, 3000);
var auto_2 = setInterval(function () {
subNum--;
console.log("subNum : " + subNum);
}, 3000);
브라우저 객체 모델을 사용해 운영체제와 스크린 정보 얻기
브라우저 객체중 브라우저와 운영체제 정보를 제공하는 navigator 객체와 스크린 정보를 제공하는 screen 객체를 이용하여 각각의 버튼을 누를 때마다 방문자의 운영체제 정보와 스크린 사이즈 정보를 출력하는 예제를 활용함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
var info = navigator.userAgent.toLowerCase();
var oslmg = null;
if (info.indexOf("windows") >= 0) {
oslmg = "windows.png";
} else if (info.indexOf("mecintosh") >= 0) {
oslmg = "macintosh.png";
} else if (info.indexOf("iphoen") >= 0) {
oslmg = "iphone.png";
} else if (info.indexOf("android") >= 0) {
oslmg = "android.png";
}
document.write('<img src="images/' + oslmg + '">', "<br>");
var scr = screen;
var sc_w = scr.width;
var sc_h = scr.height;
document.write("모니터 해상도 너비:" + sc_w + "px", "<br>");
document.write("모니터 해상도 높이:" + sc_h + "px", "<br>");
</script>
</head>
<body></body>
</html>
매개변수가 있는 함수 정의문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
var rightId = "korea";
var rightPw = "1234";
function login(id, pw) {
if (id == rightId) {
if (pw == rightPw) {
alert(id + "님 방문을 환영합니다.");
return true; // Successful login
} else {
alert("잘못된 비밀 번호입니다.");
}
} else {
alert("존재하지 않는 아이디입니다.");
}
return false; // Unsuccessful login
}
var loggedIn = false;
while (!loggedIn) {
var userId = prompt("아이디를 입력하세요.", "");
var userPw = prompt("패스워드를 입력하세요.", "");
loggedIn = login(userId, userPw);
}
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function testAvg(arrData) {
var sum = 0;
for (var i = 0; i < arrData.length; i++) {
sum += Number(prompt(arrData[i] + "점수는?", "0"));
}
var avg = sum / arrData.length;
return avg;
}
var arrSubject = ["국어", "수학"];
var result = testAvg(arrSubject);
document.write("평균 점수는" + result + "점입니다.");
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
var num = 1;
function gallery(direct) {
if (direct) {
if (num == 8) return;
num++;
} else {
if (num == 1) return;
num--;
}
var imgTag = document.getElementById("photo");
imgTag.setAttribute("src", "images/pic_" + num + ".jpg");
}
</script>
</head>
<body>
<div id="galleryZone">
<p><img src="images/pic_1.jpg" id="photo" alt="" /></p>
<p>
<button onclick="gallery(0)">이전</button>
<button onclick="gallery(1)">다음</button>
</p>
</div>
</body>
</html>
이미지 변경 이전, 다음 클릭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
var num = 0;
function testFnc() {
num++;
document.write(num, "<br>");
if (num == 10) return;
testFnc();
}
testFnc();
</script>
</head>
<body></body>
</html>
재귀 함수 사용
testFnc() 코드는 변수를 증가시키고 num해당 값을 문서에 쓰는 함수를 정의합니다 . 그런 다음 함수는 num10에 도달할 때까지 자신을 재귀적으로 호출합니다. 코드를 단계별로 설명하겠습니다.
- num처음에는 0으로 설정되어 있습니다.
- 기능 testFnc이 정의되어 있습니다.
- 함수 내부:
- num1씩 증가합니다.
- 의 현재 값은 를 num사용하여 문서에 기록됩니다 document.write.
- 가 10 이면 num함수가 반환되고 재귀가 종료됩니다.
- 그렇지 않으면 함수가 자신을 호출하여( testFnc()) 재귀 루프를 생성합니다.
- 함수 testFnc는 처음에 를 사용하여 함수 정의 외부에서 호출됩니다 testFnc();. 그러면 재귀 프로세스가 시작됩니다.
이 스크립트가 실행되면 문서에 1부터 10까지의 숫자가 출력됩니다. 태그 로 인해 각 번호는 새 줄에 인쇄됩니다 <br>.
스코프 Scope > 범위라는 뜻
전역변수와 지역변수
지역변수> 블록 안에 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
(function () {
var num = 100;
function menu() {
num += 100;
alert(num);
}
menu();
})();
(function () {
var num = 100;
function menu() {
alert(num);
}
})();
</script>
</head>
<body></body>
</html>
지역변수를 잘 사용할 것 (148p 참고)
생성자 함수는 언제 호출되나? 인스턴스를 만들 때,,
소멸자 > 개념적으로 객체가 소멸할 때 호출되는 것
생성자 함수는 주로 객체가 가지고 있는 변수들을 초기화 해주거나 파일을 오픈할 때 해당하는 디바이스에 대한 인스턴스를 얻어오거나 여러가지 초기화를 해주는 데 이용이 된다.
내장 객체를 생성할 때는 이미 자바스크립트 엔진에 낮아되어 있는 객체 생성자 함수를 사용하여 객체를 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function CheckWeight(name, height, weight) {
//객체생성자의 함수명은 소문자로도 시작가능 하지만 가능하면 대문자로 만드는게 좋다(개발자의 약속)
// 생성한 객체에 이름, 키, 몸무게 등의 속성을 등록
this.userName = name;
this.userHeight = height;
this.userWeight = weight;
this.minWeight;
this.maxWeight;
this.getInfo = function () {
//생성한 객체에 각 속성값을 출력하는 함수를 등록
var str = "";
str += "이름:" + this.userName + ",";
str += "키" + this.userHeight + ",";
str += "몸무게" + this.userWeight + "<br>";
return str;
};
this.getResult = function () {
// 정상 몸무게, 표준 오차 몸무게를 구하여 몸무게가 정상인지 출력하는 함수를 등록
this.minWeight = (this.userHeight - 100) * 0.9 - 5;
this.maxWeight = (this.userHeight - 100) * 0.9 + 5;
if (
this.userWeight >= this.minWeight &&
this.userWeight <= this.maxWeight
) {
return "정상 몸무게 입니다.";
} else if (this.userWeight < this.minWeight) {
return "정상 몸무게보다 미달입니다.";
} else {
return "정상 몸무게보다 초과입니다.";
}
};
}
var jang = new CheckWeight("장보리", 168, 62);
var park = new CheckWeight("박달재", 180, 88);
console.log(jang);
console.log(park);
document.write(jang.getInfo());
document.write(jang.getResult());
</script>
</head>
<body></body>
</html>
메모리 절약을 위한 프로토 타입 사용하기 (151페이지)
객체 생성자 함수를 선언하여 객체를 생성하고 속성과 함수를 등록,
> 객체를생성하면 생성한 만큼 함수가 등록된다. 함수를 여러개 등록하면 메모리공간을 많이 차지, 프로토타입(Prototype)을 사용하여서 메모리 공간 절약
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function CheckWeight(name, height, weight) {
//객체생성자의 함수명은 소문자로도 시작가능 하지만 가능하면 대문자로 만드는게 좋다(개발자의 약속)
// 생성한 객체에 이름, 키, 몸무게 등의 속성을 등록
this.userName = name;
this.userHeight = height;
this.userWeight = weight;
this.minWeight;
this.maxWeight;
}
CheckWeight.prototype.getInfo = function () {
//생성한 객체에 각 속성값을 출력하는 함수를 등록
var str = "";
str += "이름:" + this.userName + ",";
str += "키" + this.userHeight + ",";
str += "몸무게" + this.userWeight + "<br>";
return str;
};
CheckWeight.prototype.getResult = function () {
// 정상 몸무게, 표준 오차 몸무게를 구하여 몸무게가 정상인지 출력하는 함수를 등록
this.minWeight = (this.userHeight - 100) * 0.9 - 5;
this.maxWeight = (this.userHeight - 100) * 0.9 + 5;
if (
this.userWeight >= this.minWeight &&
this.userWeight <= this.maxWeight
) {
return "정상 몸무게 입니다.";
} else if (this.userWeight < this.minWeight) {
return "정상 몸무게보다 미달입니다.";
} else {
return "정상 몸무게보다 초과입니다.";
}
};
var jang = new CheckWeight("장보리", 168, 62);
var park = new CheckWeight("박달재", 180, 88);
console.log(jang);
console.log(park);
document.write(jang.getInfo());
document.write(jang.getResult(), "<br>");
document.write(jang.getResult === park.getResult); //두 객체가 같은 함수를 사용하고 있다는 의미.
</script>
</head>
<body></body>
</html>
앞의 예제에서 객체를 생성한 거과는 다르게 객체에 함수가 등록되지 않았습니다.
'서버 > JQ' 카테고리의 다른 글
| jsq 끝나고 다음 수업 예정 (0) | 2023.12.08 |
|---|---|
| 제이쿼리 문서 객체 선택자와 조작법 (0) | 2023.12.01 |
| java를 이용한 html 활용 (1) | 2023.11.28 |
| String 문자열 객체의 메서드 및 속성 (1) | 2023.11.24 |
| 배열 객체의 메서드 및 속성 활용 101p (1) | 2023.11.24 |