[JAVASCRIPT] 함수의 기본

함수 설정

  - 기본형 

 function 함수명() {
   명령
 }

 

var 변수의 특징 및 변수 기본 이론

 1. 함수 선언 순서가 영향을 주지 않음 > 스크립트 맨뒤에 함수를 몰아 놓는 경우도 있음.

 2. 자바스크립트에서 변수를 선언하고 사용할때 변수가 적용되는 범위를 스코프라 한다.

 3. 한 함수 안에 존재하는 변수를 지역 변수, 함수 밖에서 선언한 변수를 전역 변수라 한다.

 4.함수안에서 var를 사용해서 선언해야 지역변수가 되며 그외의 선언은 전역 변수로 취급된다.

 5.함수내에서는 순차적으로 선언이 되며 변수를 선언하기도 전에 사용하더라도 함수 내에 선언한 변수가

 존재할 시에 이를 undefiend로 인식하며 이는 호이스팅이라고 표현한다. 

 6. 함수 재선언 및 재할당이 가능하다. 순서대로 코드를 읽기 때문에 가장 최근에 할당된 값을 따름.

 

1.let과 const

 - let, const (블록 영역의 스코프)가 추가된 이후로 var (함수 영역의 스코프) 를 잘사용하지 않음

1.let 함수의 특징

 (1) let의 경우 변수를 선언한 블록에서만 사용할 수 있다. 그외에선 작동은 안함

 (2) 재할당은 가능하지만 재선언은 불가능하다. 중복 선언시 오류 발생 

 (3) 호이스팅이 없는 변수. 무조건 선언을 해주어야하고 순서대로 작성이 되어야함 그렇지 않으면 인식하지를 않음

 

2.const 변수

 (1) 재선언 및 재할당이 불가능한 상수.

 (2) 자주 선언하는 상수를 사용할 것

> 변수 때문에 생기는 오류를 줄이려면 let과 const를 사용하는 것이 좋음.

 

<주의 사항>

 - 전연 변수는 최소한으로 사용하는 것이 좋다.

 - var 변수는 함수의 시작 부분에서 선언합니다. > 호이스팅을 방지하기 위함. 

 - for문(반복문) 에서 카운터 변수를 사용할때에는 var 예약어를 되도록이면 사용하지 않음.

  > let함수를 for 초기 조건문에 활용하거나 ex) for(let i=0; i<n; i++) {}

  > var문을 꼭 사용할때에는 for문 밖에 선언할 수 있도록 합니다 . var i;  for(i=0; i<n; i++) {}

 

재사용할 수 함수 만들기 

 - 매개변수 : 함수를 선언할 때 괄호 안에 표시한 변수를 매개변수(parameter) 라고 함

 - 인수 : 함수를 실행할때 넣어준 숫자를 인수(argument)라고 함

 - return a; - a 라는 변수를 반환합니다. 

    function addNum (num1,num2) {
      var sum = num1 + num2;
      return sum;
    }

    var result = addNum(2,3);
    document.write("두수의 합 : " + result);

 -> 다음과 같은 함수에서 sum 변수는 지역 변수로써 선언했기 때문에 값을 반환 받기 위해서는 return함수를 사용해야함

 - 또한 매개변수의 기본값을 설정할 수 있음 ex) function mutiple(a, b=5, c=10) {} < 와 같이 사용

  > 인수를 선언하지 않는 경우에는 설정된 기본 값을 사용함

 

함수 표현식

 1.익명함수

  - 함수의 이름 없이 선언하는 경우

    var sum =  function(a,b) {
      return a+b;
    }

 > 이름 없는 함수 선언 및 실행. 함수이름 대신 sum이라는 변수를 사용하여 출력

 

 2.즉시 실행함수

  - 한번만 실행하는 함수의 경우, 정의와 동시에 실행할 수 있습니다.

    (function(매개변수 있을시 집어넣기) {
    var userName = prompt("이름 입력");
    document.write("안녕하세요." + userName);
    }(인수 있을 시 집어 넣기)
    );
    
    // 이벤트 = 일회성 함수 
    
    의 형식으로 작성할 수도 있음.

 

 3.화살표 함수

 - 익명 함수에서만 사용 가능한 함수

   > 기본형 : (매개변수) => { 함수 내용 }

        // let sum = function(a, b) {
        //     return a + b;
        // }
        // let sum = (a, b) => { return a + b }

        let sum = (a, b) => a + b;
        
        document.write("두 수의 합 : " + sum(10, 20));
        
        // 중괄호가 생략시 return을 생략하여 표현할 수 있음

 

함수를 발생시키기 위한 이벤트와 이벤트 처리기  

 

on뒤에 작성을 통해 수행한다.

 - 마우스 이벤트 

  (1) click ; html 요소를 클릭

  (2) dbclock : html 요소를 더블클릭할떄

  (3) mousedown : 요소 위에서 마우스버튼을 눌렀을때

  (4) mousemove : 요소 위에서 마우스 포인트를 움직일때

  (5) mouseover : 요소 위로 마우스가 이동할때 

  (6) mouseout : 마우스가 요소위를 벗어날때

  (7) mouseup : 요소 위에 놓인 마우스 버튼에서 손을 땔때 

 

 - 키보드 이벤트

  (1) keydown : 사용자가 키를 누르는 동안 발생

  (2) keypress : 사용자가 키를 눌렀을때 발생

  (3) keyup : 키에서 손을 땔때 발생 

 

 - 문서 로딩 이벤트

  (1) abort : 문서가 완전히 로딩되기전에 불러오기를 멈췄을때 발생

  (2) error : 문서가 '정확히' 로딩되지 않았을때, 이벤트가 발생

  (3) load : 문서 로딩이 끝나면 이벤트가 발생

  (4) resize : 문서 화면 크기가 바뀌었을때 이벤트 발생

  (5) scroll : 문서 화면이 스크롤 되었을때 이벤트 발생

  (6) unload : 문서에서 벗어날때 발생 

 

 - 폼 이벤트

  (1) blur : 폼 요소에 포커스를 잃었을때

  (2) change : 목록이나 체크상태 변경시 (input, select, textarea) 등에서 사용

  (3) focus : 폼 요소에 포커스가 놓였을때 이벤트 발생 (label, select, textarea, button 태그에서 주로 사용)

  (4) reset 폼이 리셋 되었을때 이벤트 발생

  (5) submit : submit 버튼을 눌렀을때 이벤트가 발생함

 

 이벤트 처리기

  - 이벤트가 발생하면 이것을 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러 라고 함

// 기본형
 <태그 on이벤트명 = "함수명">
 
 //예시 - 언로드 리스트의 경고 글자를 클릭하면 알람 발생
  <ul>
   <li onclick="alert("경고")"> 경고 </li>
  </ul>

 - 이를 활용하여 함수를 따로 불러오는 것또한 가능함

// 버튼 예시
 <button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>

 -  showDetail 이라는 함수를 실행합니다. ( 만약 매개변수가 안에 들어간다면 작은 따음표안에 들어갔을 것)

 

DOM을 이용한 이벤트 처리기

 - DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와 이벤트 처리기를 연결함.

// 기본형
 웹 요소.onclick = 함수 ;

 - html 의 태그에 속성을 부여하여 처리하는 방법이 아니라 스크립트에 이를 작성하여 부여함.

 - 이때 함수탭에는 ()를 작성하지 않음.