[Javascript] Function 함수, Event

Function 함수

---

 

1. 함수선언

 function[함수명] ([매개변수 선언]){

       [return]

}

 

2. 함수호출

  1) 함수명([인자값]);

 

함수호출을 먼저하고 함수선언을 해도 잘 작동함

 

3. 함수이름 유무

  1) 명명함수

      - 이름이 있는 함수 

      - 함수선언 위치와 함수 호출의 위치는 상관없음

 

  2) 익명함수 (이건 순서가 중요 선언후 호출해야함)

      - 이름이 없는 함수 

      - 콜백함수용 ( 어떤 결과물로 실행해야 하는 함수), 다른 함수의 매개변수의 값으로 함수를 넣을 수도 있음

      - 함수를 선언하고 호출

 

 

4. 매개변수 선언은 변수명만 선언 

      function test(param1, param2){ }  >>이런식으로 변수명만 선언

      function test( let param1, param2){ }  >> 이렇게 안씀

 

fx1();

function fx1 (){

    console.log('fx2');

   

}

let f1 = function (){

    console.log("익명함수");

    fx1();   다른함수안에 호출 가능

}

 

---

Event 

- 사건 

- 사용자의 행위, 클릭, 입력, 마우스를 움직이거나, 페이지 닫기, 열기, 스크룰, 사이즈 변경 등

- ~ 했을 때 

 

 

1. 이벤트의 종류

 

  *마우스 이벤트

  1) 클릭 이벤트 click! 이벤트명: click

      : 마우스의 왼쪽 버튼 눌렀을 때 

  2) mouseenter 

      : 어떤 영역( Element) 에 마우스 커서가 들어갔을 때

  3) mouseleave 

      : 어떤 영역( Element) 에 마우스 커서가 나갔을 때

 

 2. 이벤트 등록

 

    1) Element의 속성 형식으로 등록

        - on 이벤트명 ="함수호출"

 <div>

        <button type="button" onclick="fx1()">Click</button>

    </div>

    2) JS 파일에서 코드 작성

  - 선택자.on이벤트명= 익명함수 선언 또는 함수 호출 (함수호출 시에는() 생략 해야함)

 btn.onclick=f1;  이름만 씀   f1이 익명함수 

 

btn.onclick=f1(); 이렇게 쓰면 버튼 누르기도 전에 콘솔창에 출력이 되어버림

    3) JS 파일에 작성

  - 선택자.addEventListener("이벤트명", 익명함수선언 또는 함수호출 코드)

-----------------------------

<div>

        <input type="text" id="input1" value="">

        <select>

            <option value="+" class="operator">+</option>

            <option value="-" class="operator">-</option>

            <option value="*" class="operator">*</option>

            <option value="/" class="operator">/</option>

            <option value="%" class="operator">%</option>

        </select>

------------------------------------------------------------------

btn1.addEventListener("click",function(){

    let o1='';

    for(let i=0;i<operator.length;i++){

        if(operator[i].selected){

            o1=operator[i].value;

        }

    }

    // console.log(operator[4].selected);

    let v1=input1.value*1;

    let v2=input2.value*1;

    // let v2=input1.getAttribute('value');

    // let o1=operator.value;

    let result1=0;

    if(o1=='+'){

        result1=v1+v2;

    }else if(o1=='-'){

        result1=v1-v2;

    }else if(o1=='*'){

        result1=v1*v2;

    }else if(o1=='/'){

        result1=v1/v2;

    }else {

        result1=v1%v2;

    }

    result.value=result1;

    // result.value=v1;

    // console.log(v1*1);

    // console.log(v2);

})

name=""이 이름을 써준 이유는 파라미터로 전송할때 이름 같은이름을 주면 중복체크 불가 

value랑 name을 잘 모르겠음

 

[html 입력태그 글 참고하기]

4. 공통속성 
  1) value :  input태그에 입력된 값이 저장되는 속성이 value이다
               파라미터의 값으로 서버로 전송
               같은말 -> 파라미터값은 VALUE속성으로 넘어감 
  2) name : 파라미터의 이름이 됨

(쓰는 순서 상관없음)
<input type="text" value="아이유" name="id" > => url? id=아이유

 

여기서 궁금한거 value 는 name이  있을 때만 올 수 있는건가?

만약에 파라미터의 값이 없고 value만 올 수 있는건지...

 

 

 

잘못된 정보나 이상한 부분이 있다면

댓글남겨주시면 확인즉시 수정하겠습니다 :)