코밍이의 하루

[JS] 함수 본문

웹언어 공부/JS

[JS] 함수

코밍이 2021. 8. 13. 09:37

1. 개발 환경

구분 내용
사용 언어 HTML5, CSS3, JS
개발환경 Visual Studio Code
참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문
웹브라우저 Chrome

2. 주요 문법

1) 함수 vs 변수

특징 변수 함수
저장 방식 1개의 데이터만 저장 자바스크립트 코드 저장
선언 방식 var라는 키워드를 이용하여 선언 function이라는 키워드를 이용하여 선언
데이터 처리 방식 문자형, 숫자형, 논리형 데이터를 보관 출력문, 제어문 등의 코드를 저장하고 데이터 반환

2) 기본 함수 정의문

- 함수를 사용하여 코드를 저장한 것

- function 키워드를 사용해 변수 선언

기본형 익명 함수
function 함수명(){
  자바스크립트 코드;
}

함수명();
또는 참조 변수();		 참조 변수 = function(){
  자바스크립트 코드;
}

3) 일반 함수 정의 방식 vs 함수 선언 참조 방식

 

일반 함수 정의 방식(정상 작동) 익명 함수 선언 참조 방식(오류 발생)
함수 호출 시 호이스팅 기술 지원 함수 호출 시 호이스팅 지원하지 않음
testFnc();

function testFnc() {
  자바스크립트 코드;
}		 testFnc();

var = testFnc = function {
  자바스크립트 코드;
}

※ 호이스팅을 적용하면 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수 호출이 가능

 

4) getElementById() 메서드

- id 값을 이용해 문서 객체(태그)를 선택하는 메소드

- CSS의 아이디 선택자와 비슷한 역할을 한다.

기본형
문서 객체.style.스타일 속성 = 새 값;
ex) id 값이 "theBody"인 요소의 배경색을 노란색으로 적용한다.
document.getElementById("theBody").style.backgroundColor = "yellow";

5) 매개변수가 있는 함수 정의문

-함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있다.

기본형
function 함수명(매개변수1 , 매개변수2, ... 매개변수n) {
  자바스크립트 코드;
}
함수명(데이터1, 데이터2, ... 데이터n);

 

6) 매개변수 없이 함수에 전달된 값 받아오기

- arguments를 사용하여 매개변수 없이 함수에 전달된 값을 받아올 수 있음.

기본형
function 함수명() {
  arguments;
}

함수명(데이터1, 데이터2, 데이터3);
function sum(){
  var sum = arguments[0] + arguments[1] + arguments[2];

  document.write(sum);
}

sum(10, 20, 30);

 

3. 소스 코드 및 실행 결과

- function_1_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset = "UTF-8">
    <title> 함수 </title>
    <script>
        var count = 0;

        myFnc();

        function myFnc() {
            count++;
            document.write("hello" + count,"<br>");
        }        

        myFnc();

        var theFnc = function() {
            count++;
            document.write("bye" + count,"<br>");
        }

        theFnc();
    </script>
  </head>
  <body>
  </body>
</html>

function_1_test.html

 

- function_2_test.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>

function_2_test.html

- function_3_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
      <meta charset = "UTF-8">
      <title> 함수 </title>
      <script>
          function myFnc(name, area) {
              document.write("안녕하세요. " + name + "입니다.", "<br>");
              document.write("사는곳은 " + area + "입니다.", "<br><br>");
          }

          myFnc("홍당무", "서울");

          myFnc("깍두기", "부산");
      </script>
  </head>
  <body>
  </body>
</html>

function_3_test.html

- function_4_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset = "UTF-8">
    <title> 함수 </title>
    <script>
        var rightId = "korea";
        var rightPw = "1234";
        function login(id, pw){
            if(id == rightId){
                if(pw == rightPw){
                    document.write(id + "님 방문을 환영합니다");
                }else{
                        alert("잘못된 비밀번호입니다.");
                }

            } else {
                alert("존재하지 않는 아이디입니다.");
            }
        }

        var userId = prompt("아이디를 입력하세요.", "");
        var userPw = prompt("패스워드를 입력하세요.", "");

        login(userId, userPw);
    </script>
  </head>
  <body>
  </body>
</html>

function_4_test.html

저작자표시 비영리 변경금지

'웹언어 공부 > JS' 카테고리의 다른 글

[JS] 함수 스코프 개념 이해  (0) 2021.08.13
[JS] 함수 - 함수에서 return 문의 역할  (0) 2021.08.13
[JS] 브라우저 객체  (0) 2021.08.12
[JS] 내장 객체 - 문자열 객체  (0) 2021.08.11
[JS] 내장 객체 - 배열 객체  (0) 2021.08.11
'웹언어 공부/JS' Related Articles more