JavaScript. day3

함수

: '불러서 쓸 수 있는 코드 조각'이다. 변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터(값)대신 사용할 수 있는 것처럼, 함수를 선언하고 기능을 정의하면 함수의 이름을 코드 조각 대신 사용할 수 있다.
변수를 선언하는 것처럼 함수를 직접 만들 수도 있다. 그러나 그 특성이 서로 다른만큼, 방법도 다르다.

• 함수 선언식

  function 함수명(){
    //함수의 기능을 표현하 구문
  }

  선언식으로 만든 함수의 경우 호이스팅이 가능하다. -> 함수 만드는 부분이 호출하는 부분보다 아래에 있어도 된다.

• 함수 표현식

  const 함수명 = function 함수명(){
    //함수의 기능을 표현하 구문
  }

  표현식으로 만든 함수의 경우 호이스팅이 불가능하다. -> 함수의 호출보다 무조건 먼저 선언되어야한다.

위를 통해 함수가 만들어지고 나면, 함수명은 스스로 보관하고 있는 구문 대신 사용될 수 있다. 함수가 사용되기 위해서는 반드시 '호출'의 과정을 거쳐야한다.

• 함수 호출하기 ex)

  const sayHello = function(){
    let number = 3 + 3
    console.log(number)
  }
  sayHello() //함수의 호출

! 함수를 호출할 때에는 반드시 함수에 입력하는 데이터가 없더라도 소괄호를 붙여줘야한다.

함수의 인수

: 함수에서 소괄호의 역할은 함수가 실행될 때 사용할 재료를 전달받는 것이다. 재료란 데이터를 뜻하며, 이렇게 전달되는 데이터를 가리켜 '인수(argument)'라 한다.
인수를 전달받아 기능을 수행하는 함수를 만들 때는, 함수 정의 시 '매개변수(parameter)'를 추가해야한다. 이는 함수의 기능을 다양화하는 유용한 도구이다.

ex)

function sayVegetable(vegetable){
    console.log("함수에 전달된 채소 : ")
    console.log(vegetable)
}
sayVegetable("당근")
sayVegetable("5252")

매개변수는 함수 정의 시 원하는 만큼 추가할 수 있다. 단, 두 개 이상의 매개변수를 사용할 경우 각각 쉼표로 구분한다.

ex)

function sayFood(food1,food2){
    console.log("함수에 전달된 음식 : ")
    console.log(food1)
    console.log(food2)
}
sayVegetable("치킨","피자")
sayVegetable("족발","보쌈")

함수 값의 반환

: 함수를 만들 때, 함수가 데이터를 반환하도록 할 수 있다.
함수가 데이터를 반환한다는 것은, 함수 호출문이 데이터로 대체됨을 뜻한다.
키워드 return을 사용해서 반환문을 작성한다.
return 키워드는 두가지 기능을 가진다. 데이터의 반환과 함수의 강제종료를 뜻한다.

function getThree(){
    return 3; // 반환문
}
console.log(getThree())

이벤트 핸들링

• 이벤트(event)란?
  : 웹 프로그래밍에서 이벤트란, DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스이다.
  클릭, 키다운, 제출 이벤트 등등

이러한 이벤트가 발생하면 각각의 이벤트에 대한 이벤트 핸들러를 정의할 수 있다.

• 이벤트 핸들러(event handler)란?
  : 이벤트가 발생되면 실행될 코드 블록을 뜻한다. 주로 함수가 이 역할을 담당한다.
  이벤트 핸들러 엳할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라 한다.

! 이벤트 핸들러를 등록하기 위해 이벤트 속성에 함수를 대입하는 것과 함수호출문을 대입하는 것은 엄연히 다르다.

구문의 기본 형태)
타겟.on이벤트명 = 이벤트핸들러 함수

ex)
버튼 요소를 클릭했을 때, 경고 다이얼로그 박스를 띄우는 이벤트처리 예시

const handleClick = function(){
    window.alert("환영합니다")
}

const button = document.querySelector("button")

button.onclick = handleClick

• addEventListner()
  : onclick, onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 편하고 유용한 처리 방법이다.
  이 메소드는 두가지 장점을 제공한다.
• 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.
• 같은 리스너(타겟)에 대해 다수의 핸들러를 등록할 수 있다.

사용법)
addEventListner(이벤트명, 이벤트핸들러)

• 이벤트 객체
  : 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다. 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생시마다 전달 받을 수 있도록 해야한다.

ex)
target.addEventListner('click',function(event){})

value 속성

: input, select 처럼 사용자로부터 입력을 받는데 사용되는 요소들이 있다.
여기에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근해야한다.

• 차이점
  요소에 쓰여져 있는 텍스트에 접근하고 싶다 -> textContent
  사용자가 직접 요소에 입력한 값에 접근하고 싶다 -> value
• 입력 요소의 value에 접근하여 할 수 있는 일은 크게 읽기와 쓰기 두가지이다.
• 읽기
  console.log(target.value)
• 쓰기
  target.value = "변경값"
• 요소 : 여러 입력 요소를 포함할 수 있는 폼 요소로부터 여러 입력 값을 읽어들일 때는, 개별 입력 요소의 name 속성값을 토대로 입력값에 접근할 수 있다.
• html form 양식
• <form> <input name = "이름" /> <input name = "별명" /> <input type = "submit" /> </form>
• js 폼 양식 value접근
• const form = document.querySelector("form") form.addEventListner("submit", function(e){ console.log(e.target.이름.value) console.log(e.target.별명.value) })