본문 바로가기

Learning/HTML&JavaScript

자바스크립트 함수 1

  • 전역변수와 지역변수

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset = "UTF-8">

<title> 함수 </title>

<script>

    var num=100;

    function menu(){

        num+=100;

        alert(num);

    }

    menu();



    function menu(){

        alert(num);

    }

    

</script>

</head>

<body>

</body>

</html>

 

처음엔 200, 두번째엔 100이 출력됨

 


 

 

  • 익명 함수 선언

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset = "UTF-8">

<title> 함수 </title>

<script>

    var count = 0;

    myFunc();



    function myFunc(){ //정상적인 함수 정의

        count++;

        document.write("hello"+count,"<br>");

    }



    myFunc();



    var theFunc=function(){ //익명 함수 선언

        count++; 

        document.write("bye"+count,"<br>");

    }



    theFunc();

</script>

</head>

<body>

</body>

</html>

 


 

  • 배경색 바꾸기

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset = "UTF-8">

<title> 함수 </title>

<script>

    var color=["white", "yellow", "aqua", "purple"];

    var i=0;

    function changeColor(){

        i++;

        if(i>color.length) {

            i=0;

        }

        var bodyTag=document.getElementById("theBody");

        bodyTag.style.backgroundColor=color[i];

    }

</script>

</head>

<body id="theBody">

  <button onclick="changeColor();">배경색 바꾸기</button>

</body>

</html>

 


 

 

 

'Learning > HTML&JavaScript' 카테고리의 다른 글

DOM, BOM  (0) 2020.08.04
자바스크립트 함수 2  (0) 2020.08.03
자바스크립트 객체  (0) 2020.07.31
자바스크립트 제어문  (0) 2020.07.31
자바스크립트  (0) 2020.07.24