[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 17 함수와 이벤트(2)

DAY 25

🔖 오늘 읽은 범위 :

☃️2/6(금) 진도표 알림
❄️공부 내용: 17 함수와 이벤트(2)
❄️쪽수: 570-586쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

재사용할 수 있는 함수

• 매개변수, 인수, return

  • 매개변수 : Parameter
  • 인수 : Argument
  • return : 값을 반환한다.

• 매개변수 기본값 지정하기

    function multiple(a, b = 5, c = 10) {
        return a * b + c;
    }

익명 함수

• 이름 없는 함수.

    // 익명 함수
    function(a, b) {
        return a + b;
    }

• 함수 자체가 Expression(식) 이다.

• 그래서 변수에 할당할 수 있다.

• 다른 함수의 매개변수로 사용할 수 있다.

• 함수 간에 실행 순서를 제어할 때 함수를 매개변수로 넘겨서 사용한다.

즉시 실행 함수 IIFE(Immediately Invoked Function Expression)

• 한 번만 실행하는 끝내는 함수가 필요할 때 사용한다.

• 함수 정의하면서 동시에 실행한다.

    (function() {
      let userName = prompt("input your name:");
      document.write(`<p>Hello? <span class="accent">${userName}</span>!!!</p>`);
    }());

• 매개변수를 사용하는 함수인 경우, 선언하는 끝 부분에 인수를 넣는다.

    (function(a, b) {
        sum = a + b;
    }(100, 200));
    document.write(`result is ${sum}`);

화살표 함수 Arrow function

• ES6 : ECMAScript 2015 또는 ECMAScript 6

• => 표기법으로 사용해 선언한다.

    // 매개변수 없는 익명 함수
    const hi = function() {
      return "안녕하세요?";
    };
  
    // 화살표 함수
    const hi = () => { return "안녕하세요?" };
  
    // 화살표 함수. 리턴문이 생략된 것.
    const hi = () => "안녕하세요?";
    -------------------------------------------------
    // 매개변수 1개인 경우
    let hi = function(user) {
      document.write (`${user}님, 안녕하세요?`);
    };
  
    // 매개변수 1개인 화살표 함수
    let hi = user => { document.write(`${user}님, 안녕하세요?`) };
  
    // 매개변수 2개인 경우
    let sum = (a, b) => a + b;

이벤트 알아보기

• 브라우저의 이벤트 개념
• 웹 브라우저나 사용자가 행하는 어떤 동작.
• 주의!: 이벤트는 웹 페이지를 비롯한 웹 문서 영역 안에서 이뤄지는 동작만을 의미한다.
• 이벤트는 아래 링크 참고
  • https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Events
  • 마우스 이벤트
  • 키보드 이벤트
  • 문서 로딩 이벤트

이벤트 처리기

• 웹 문서에서 이벤트가 발생하면 처리하는 함수.; 이벤트 핸들러(Event Handler)

이벤트 처리

• 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것.

  • 태그 안에 “on이벤트명” 으로 속성 이름을 만들고 → 실행할 이벤트 핸들러 “함수명” 을 작성.

    <a href="#" onclick="alert('Hello')">HELLO</a>

• 이벤트가 발생한 후 실행할 함수를 따로 만든 후 묶어서 처리하는 방식.

    <ul>
        <li><a href="#" onclick="changeBg('green')">Green</a></li>
        <li><a href="#" onclick="changeBg('orange')">Orange</a></li>
        <li><a href="#" onclick="changeBg('purple')">Purple</a></li>
    </ul>        
    <div id="result"></div>
  
    <script>
        function changeBg(color) {
            let result = document.querySelector('#result');
            result.style.backgroundColor = color;
        }
    </script>

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 화살표 함수는 람다 함수랑 비슷한 것 같다.
• ECMAScript 6 과 관련해서 스펙이 설명된 문서가 있다. 쭈욱 읽어봤는데 어라 내용이 알아야 할 것이 많다. 문법적으로 사용해야 할 것과 사용하면 좋을 것이 많았다.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
• ECMAScript 6
• https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Events
• Javascript Best Practices

---

🤟소감 3줄 요약

• 자바스크립트 베스트 프랙티스가 뭘까 고민 중.
• 찾아보니 책도 있고, 문서도 있다. 찾으면 된다.
• 타입스트립트를 좀 봐야 할 것 같다. 자바스크립트는 코드 관리가 어려운 듯 하다.