[13일] JavaScript (7) - 함수, 내장 객체, Scope, 디지털 시계 만들기

ewok 2022. 8. 11. 18:15

// 3. 리턴값이 있는 경우
//   - 함수는 호출한 시점으로 되돌아온다(return)
//   - 리턴값 : 값을 가지고 호출한 시점으로 되돌아온다
//   - 리턴값 : 1개만 가능하다
//   - 형식) return 값

function test1() {
    document.write("SEOUL");
    return;  //호출 시점으로 되돌아간다
             //맨 마지막 return은 생략 가능하다
} //test1() end

test1(); //함수 호출

function test2(a) {
    if(a<0) {
        return;
    }
    document.write(a);
} //test2() end

test2(3);
test2(-5);  // 출력 안됨

function test3(a, b) {
    let c=a+b;
    return c;   //c값을 리턴 (1개만 리턴할 수 있다)
} //test3() end

let result = test3(6, 7);
document.write(result);     //변수값
document.write(13);         //상수값
document.write(test3(8, 9)); //함수의 리턴값

문제 1

//문1) 팩토리얼값을 구하시오 (4*3*2*1)

function fact(f){
    let gop=1;
    for(a=f; a>=1; a--){
        gop=gop*a;
    }//for end
    return gop;
}//fact() end

let gop = fact(4);
document.write(gop);

문제 2

//문2) 윤년, 평년을 구하시오

function leap(year){
    if(year%4==0 && year%100!=0 || year%400==0){
        return true;
    }else{
        return false;
    } //if end
} //leap() end

if(leap(2022)){
    document.write("윤년");
}else{
    document.write("평년");
}//if end

재귀적 함수 호출

//4. 재귀적 함수 호출
// -> 자신이 자신의 함수를 호출할 수 있다
document.write(test(3));  //3팩토리얼값 구하기
function test(f){
    if(f==0){
        return 1;
    }else{
        return f*test(f-1);
    } //if end
} //test() end
/*
    if(3==0)
    else
            3*test(3-1)
                if(2==0)
                else
                        2*test(2-1)
                            if(1==0)
                            else
                                    1*test(1-1)
                                        if(0==0)    1
*/

내장 객체

Object = 멤버 변수 + 멤버 함수로 구성
멤버 변수, property, attribute, field, column
멤버 함수, fucntion method
객체명.멤버변수
객체명.멤버함수()

// 1. Math 객체
document.write(Math.abs(-3));
document.write(Math.PI);

//2. Number 객체
document.write(Number("5"));
document.write(Number("8.9"));

//3. Date 객체
const d=new Date();

// 4. Window 객체
// 참조 https://www.w3schools.com/jsref/obj_window.asp
// 객체명을 생략할 수 있다

// 1) alert() 경고창(확인)
window.alert();
alert();
alert(123); 경고창에 문구 출력
alert("KOREA");
alert("SEOUL");
alert("'");
alert('"');
alert("\"");
alert('\'');
alert("서울\n제주\n\n부산"); // \n줄바꿈

// 2) confirm() 경고창(확인, 취소)
// -> boolean(true, false)값으로 반환된다
window.confirm();
confirm(); // window객체명 생략 가능
let flag = confirm("영구히 삭제됩니다\n지울까요?");
alert(flag);

// 3) 새창 띄우기
window.open();

// 4) 인쇄창 띄우기
window.print();

// 5) setInterval()과 setTimeout()
/*
    - 주어진 시간에 따라 자동으로 함수 호출
    - 시간 : 1 second = 1000 miliseconds.
    - new version
        setInterval(함수명, 시간) : 주기적으로 함수 호출
        setTimeout(함수명, 시간) : 한 번만 호출
    - old version
        setInterval("함수명()", 시간) : 주기적으로 함수 호출
        setTimeout("함수명()", 시간) : 한 번만 호출
    - 시간해제 : claerInterval(), clearTimeout()
*/

function hello(){
    alert("안녕하세요~");
} //hello() end
setInterval(hello, 3000);    //3초마다 주기적으로 hello함수를 호출
setTimeout(hello, 3000);     //3초후에 hello함수 단 1번만 호출

/*
    재귀적 함수 호출 관계를 이용해서 3초마다 주기적으로 hello함수 호출
    function hello(){
        setTimeout(hello, 3000);
    }
*/

// 5. screen 객체
// -> 사용자 device의 해상도 확인
alert(screen.width);
alert(screen.height);

// 6. location 객체
// -> 페이지 이동
// -> location.href="URL 또는 페이지명"
// -> location="URL 또는 페이지명"
location.href="https://www.itwill.co.kr/"
location.reload(); //현재 페이지 새로고침

// 7. history 객체
// -> 뒤로, 앞으로
history.back();     // 뒤로
history.forward();  // 앞으로
history.go(-2);     // 뒤로 뒤로

변수의 유효 범위(scope)

변수의 종류

지역변수(local variable) : function 함수 내에 선언된 변수는 함수 내에서만 사용 가능하다
전역변수(global variable) : function 함수 외부에서 선언된 변수로 모든 함수 내에서 그 값을 공유

지역변수가 전역 변수보다 우선순위가 높다.

let one="하나";  //전역변수

function test3(){
    alert("one : " + one);
    alert("two : " + two);
    alert("three : " + three);
}//test3() end

let two="둘";   //전역변수

function test4(){
    alert("one : " + one);
    alert("two : " + two);
    alert("three : " + three);
}//test4() end

let three="셋"; //전역변수

let one="하나";  //전역변수

function test3(){
    alert("one : " + one);
    alert("two : " + two);
    alert("three : " + three);
    let uid="아이티윌";
    alert(uid);
    // alert(upw);  에러 upw is not defined
}//test3() end

let two="둘";   //전역변수

function test4(){
    alert("one : " + one);
    alert("two : " + two);
    alert("three : " + three);
    let upw="1234";
    alert(upw);
    // alert(uid);  에러 upw is not defined
}//test4() end

let three="셋"; //전역변수

이 경우 test3()의 alert(upw)는 실행되지 않는다. 또한, test4()의 alert(uid)도 실행되지 않는다.

디지털시계 만들기

<body>
    <h3>디지털 시계</h3>
    <div id="clock"></div>
    <hr>
    <input type="button" value="시작" onclick="showtime()">
    <input type="button" value="중지">
    <script>
        function showtime(){
            const d = new Date();
            let  today="";                
            today += d.getFullYear() + ".";
            if(d.getMonth()+1<10){
                today += "0";
            } //if end
            today += d.getMonth()+1 + ".";
            if(d.getDate()<10){
                today += "0";
            } //if end
            today += d.getDate();
            switch(d.getDay()) {
                case 0 : today+=" (일) "; break;
                case 1 : today+=" (월) "; break;
                case 2 : today+=" (화) "; break;
                case 3 : today+=" (수) "; break;
                case 4 : today+=" (목) "; break;
                case 5 : today+=" (금) "; break;
                case 6 : today+=" (토) "; break;
            }
            if(d.getHours()<12){
                today += " AM ";
            }else{
                today += " PM ";
            }//if end
            if(d.getHours()<13){
                today += d.getHours() + ":";
            }else{
                today +=d.getHours()-12 + ":";
            }//if end
            if(d.getMinutes()<10) {
                today += "0" + d.getMinutes() + ":";
            } else {
                today += d.getMinutes() + ":";
            }
            if(d.getSeconds()<10) {
                today += "0" + d.getSeconds();
            } else {
                today += d.getSeconds();
            }
            
            document.getElementById("clock").innerText=today;
            setTimeout(showtime, 1000);  //1초 후에 showtime 함수를 호출
        }//showtime() end
        
    </script>
    
</body>

killtime 함수를 이용하여 시계를 멈추기 위해서는 showtime 함수 안에 있는 setTimeout에 접근할 수 있어야 한다.

이때 killtime과 setTimeout을 연결하기 위해 전역 변수를 이용할 수 있다.

...
	timer = setTimeout(showtime, 1000);  //1초 후에 showtime 함수를 호출
}//showtime() end
let timer; //전역변수
            
function killtime(){
    clearTimeout(timer);  //시간해제
}//killtime() end

음악 재생 목록 만들기

<body>
    <div style="text-align: center;">
        <h3>음악목록</h3>
        <img src="../../music/gangnamstyle.jpg" id="poster" width="300px" height="250px">
        <br><br>
        <audio src="../../music/gangnamstyle.mp3" id="audio1" controls></audio>
    </div>
    <hr>
    <div style="margin: auto; width: 50%;">
        <ol>
            <li><a href="javascript:loadMusic('../../music/genie.jpg', '../../music/genie.mp3')">소원을 말해봐</a></li>
            <li><a href="javascript:loadMusic('../../music/sheis.jpg', '../../music/sheis.mp3')">그녀가 처음 울던 날</a></li>
            <li><a href="javascript:loadMusic('../../music/candy.jpg', '../../music/candy.mp3')">내 귀에 캔디</a></li>
            <li><a href="javascript:loadMusic('../../music/gangnamstyle.jpg', '../../music/gangnamstyle.mp3')">강남스타일</a></li>
        </ol>
    </div>
    <script>
        function loadMusic(jpg, mp3){
            let poster = document.getElementById("poster");
            let audio1 = document.getElementById("audio1");
            poster.src=jpg;
            audio1.src=mp3;
            audio1.play();
        }//loadMusic() end
    </script>
    
</body>