Javascript 기초문법Ⅴ
13. Scope
자바스크립트의 스코프
스코프는 변수의 유효범위를 말한다.
- Local Scope (지역변수)
- Global Scope (전역변수)
| - Local Scope (지역변수) | - Global Scope (전역변수) |
| function 내에 선언된 변수로 function 내에서만 사용가능 |
function외부에서 선언된 변수로 모든 function에서 사용가능 |
변수는 선언위치(전역 or 지역)에 의해 스코프를 갖게 된다.
전역변수는 전역스코프를 갖는다.
지역변수는 지역스코프를 갖는다.
전역변수는 어느 곳에 위치해도 다 가져다 쓸 수 있다.
그러나 그런 식의 코딩은 바람직하지 않음.
예시 1)
var one = "하나"; //전역변수
function test1(){
var uid="user"; //지역변수
alert("ID:"+uid);
//alert("Password"+upw); 에러
}
var two="둘"; //전역변수
function test2(){
var upw = "12345"; //지역변수
alert("Password:"+upw);
alert("하나:"+one);
alert("둘:"+two);
alert("셋:"+three);
//alert("Password"+upw); 에러
}
var three="셋"; //전역변수자바스크립트 변수 생애주기 확인하기
참고: https://poiemaweb.com/js-closure
14. setTimeout
자바스크립트
주어진 시간에 따라 자동으로 함수를 호출한다.
시간: 1000ms = 1 second.
setInterval("메소드명()", 시간) : 주기적으로 호출
setTimeout(메소드명, 시간) : 한번만 호출
시간해제:
clearInterval()
clearTimeout()
setInterval()
https://www.w3schools.com/jsref/default.asp
//3초마다 반복적으로 경고창
setInterval(function(){alert("Hello");}, 3000);
//3초후 경고창 1번만
setTimeout(function(){alert("Hello");}, 3000);
//재귀적 함수 호출관계를 이용해서 3초마다 주기적으로 test함수 호출
function test(){
setTimeout(test, 3000);
}
15. Javascript를 이용한 예제
브라우저에 디지털 시계 만들기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>디지털시계</title>
<style>
body {font-size: 16px; letter-spacing: -0.8px; text-align: center; font-family: 'Noto Serif KR';}
.box { margin: auto; }
#clock {font-size: 34px; padding: 20px 0;}
hr {border: 1px dotted #ddd;}
th {cursor: pointer;}
</style>
</head>
<body onload="showtime()" onunload="killtime()">
<div class ="box">
<h1>DIGITAL CLOCK</h1>
<img src="https://images.unsplash.com/photo-1500145588304-deb802b4af76?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" style="width: 300px;" alt="">
<hr>
</div>
<div id="clock"></div>
<input type="button" name="" value="시작" onclick="showtime()">
<input type="button" name="" value="중지" onclick="killtime()">
<script>
function showtime(){
var today = new Date();
var str="";
str += today.getFullYear()+".";
str += today.getMonth()+1+""+".";
str += today.getDate()+".";
//요일
switch(today.getDay()){
case 1: str += "(Monday) "; break;
case 2: str += "(Tuseday) "; break;
case 3: str += "(Wednesday) "; break;
case 4: str += "(Thursday) "; break;
case 5: str += "(Friday) "; break;
case 6: str += "(Saturday) "; break;
case 7: str += "(Sunday) "; break;
}
//시각
var hour =today.getHours();
if(hour>12){
str += "PM "+(hour-12)+":";
}
else if(hour==12){
str += "PM "+hour+":";
}
else {
str += "AM "+hour+":";
}
str += today.getMinutes()+":";
str += today.getSeconds();
str += "<hr>";
//html 삽입
document.getElementById("clock").innerHTML=str;
//1초뒤에 showtime메소드 호출
timer = setTimeout(showtime, 1000); //timer를 지정해주어야 한다.
}//function end
var timer;
function killtime(){
//시간해제
clearTimeout(timer); //시간반납
}//killtime() end
</script>
</body>
</html>
브라우저에 디지털 계산기 만들기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Iceland&display=swap" rel="stylesheet">
<title>디지털계산기</title>
<style>
body {background: #21222b;}
.line {}
.frm {margin: 50px;}
.txt {border: 2px solid #888; border-radius:5px; text-align: right; font-family: 'Iceland', cursive; font-weight: bold; font-size: 32px; color: #000; width: 325px; height: 32px;}
.txt:focus {border: 2px solid #ffd382;}
.num {width: 85px; height: 50px; border: none; font-size: 20px; cursor: pointer;}
.num:hover {background: #f5f5f5;}
.numEnter {background: orange; width: 85px; height: 100px; border: none; font-size: 20px; cursor: pointer;}
.numEnter:hover {background: #ffc04c;}
.enter {background: orange; cursor: pointer;}
.enter:hover {background: #ffc04c;}
h1 {color:#fff;}
tr {align-items: center; text-align: center; }
td {width: 25%; height: 50px; border-radius: 5px; font-size: 18px; background: #e8e8e8; }
td:hover {background: #f5f5f5;}
</style>
</head>
<body onkeydown="enter(event)">
<div id="calculator"></div>
<div class="frm">
<h1>DIGITAL CACULATOR</h1>
<form name="calcfrm" id="calcfrm">
<table class="line">
<tr class="row">
<td colspan="4">
<input type ="text" name ="result" id="result" size="" value="0" class="txt" readonly>
</td>
</tr>
<tr class="row">
<td><input type ="button" class="num" value="+" onclick="operator('+')"></td>
<td><input type ="button" class="num" value="-" onclick="operator('-')"></td>
<td><input type ="button" class="num" value="x" onclick="operator('*')"></td>
<td><input type ="button" class="num" value="/" onclick="operator('/')"></td>
</tr>
<tr class="row">
<td><input type ="button" class="num" value="7" onclick="inputData(7)" onKeyDown="onlyNumber(this)"></td>
<td><input type ="button" class="num" value="8" onclick="inputData(8)" onKeyDown="onlyNumber(this)"></td>
<td><input type ="button" class="num" value="9" onclick="inputData(9)" onKeyDown="onlyNumber(this)"></td>
<td><input type ="button" class="num" value="%" onclick="operator('%')"></td>
</tr>
<tr class="row">
<td><input type ="button" class="num" value="4" onclick="inputData(4)" onKeyDown="onlyNumber(this)"></td>
<td><input type ="button" class="num" value="5" onclick="inputData(5)" onKeyDown="onlyNumber(this)"></td>
<td><input type ="button" class="num" value="6" onclick="inputData(6)" onKeyDown="onlyNumber(this)"></td>
<td><input type ="button" class="num" value="←" onclick="backspace(this.form)"></td>
</tr>
<tr class="row">
<td><input type ="button" class="num" value="1" onclick="inputData(1)" onKeyDown="onlyNumber(this)"></td>
<td><input type ="button" class="num" value="2" onclick="inputData(2)" onKeyDown="onlyNumber(this)"></td>
<td><input type ="button" class="num" value="3" onclick="inputData(3)" onKeyDown="onlyNumber(this)"></td>
<td rowspan="2" class="enter"><input type ="button" class="numEnter" value="=" onclick="compute('=')"></td>
</tr>
<tr class="row">
<td><input type ="button" class="num" value="0" onclick="inputData(0)" onKeyDown="onlyNumber(this)"></td>
<td><input type ="button" class="num" value="." onclick="inputData('.')"></td>
<td><input type ="button" class="num" value="C" onclick="cls(this.form)"></td>
</tr>
</table>
</form>
</div>
<script>
function cls(f){
//C버튼을 클릭하면 name=result 상자에 0을 대입.
f.result.value=0;
};
function backspace(f){
//입력된 숫자열을 String으로 생각하고 맨 뒷문자를 자르는 것이다.
var str = String(f.result.value); //우선 입력된 값을 String으로 변경.
f.result.value = str.substr(0,str.length-1); //String이 된 숫자의 맨 마지막 글자 자르기.
if(str.length==1){ //왜 1인지는 모르겠음?
f.result.value=0;
}
}
function inputData(a){
//전달받은 a변수값을 클릭할 때마다 추가.
//name=result 상자에 출력.
var f = document.calcfrm;
f.result.value = Number(f.result.value+a); //0이 앞에 붙어 사라지지 않는 문제를 형변환으로 해결하였다.
};
// 두 수(의 값)를 넣고 -> 그 둘을 계산
var num1; //사용자가 입력한 첫번째 수
var num2; //사용자가 입력한 두번째 수
var op; //연산기호
//전역변수를 선언하여 번갈아가며 사용.
function operator(kind){
//1)클릭한 연산기호를 op전역변수에 저장
op=kind;
//2)현재 name=result가 가지고 있는 값을 첫번째 수로 저장
num1 = Number(document.calcfrm.result.value);
//3)두번째수를 저장하기 위한 초기화가 필요하다.
document.calcfrm.result.value=0;
//-> 이 다음은 compute()에 있음.
};
function compute(){
//4)현재 name=result가 가지고 있는 값을 첫번째 수로 저장
num2 = Number(document.calcfrm.result.value);
//5)두 수 연산하기.
document.calcfrm.result.value=eval(num1+op+num2);
}
</script>
</body>
</html>
'Frontend' 카테고리의 다른 글
| 자바스크립트 완벽가이드 목차 (0) | 2019.07.15 |
|---|---|
| 07월 15일 월 | UI 화면구현 09 - Javascript 기초문법Ⅵ (0) | 2019.07.15 |
| 07월 11일 목 | UI 화면구현 07 - Javascript 기초문법Ⅳ (0) | 2019.07.11 |
| 07월 10일 수 | UI 화면구현 06 - Javascript 기초문법Ⅲ (0) | 2019.07.10 |
| 07월 09일 화 | UI 화면구현 05 - Javascript 기초문법Ⅱ (0) | 2019.07.09 |
댓글