1.Array methods

1.1 forEach()

  • for 를 대신하여 사용하는 반복 method.
  • forEach 함수에서 나오고 싶을 때 return 을 사용
  • forEach 함수의 parameter로는 각 원소에 대하여 처리하고 싶은 코드를 함수로
  • 함수형태의 parameter를 전달하는 것을 callback 함수라고 한다.
    const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '앤트맨'];
    // for문 사용
    for ( let i = 0; i < superheroes.length; i++) {
        console.log(superheroes[i]);
    }
    // forEach()
    superheroes.forEach(hero => {
        console.log(hero);
    }

    1.2 map()

  • 배열을 반복, 배열 안의 각 요소를 변환 할 때 사용
  • map() method 의 return 값은 수정된 값으로 다시 생성된 배열.
  • array type의 데이터 요소 갯수 만큼 반복
  • 반복할 때마다 실행할 함수를 parameter로 전달
    const array = [1, 2, 3, 4, 5, 6, 7, 8];
    const square = n => n * n;
    const squared = array.map(square);
    // 조금 더 짧게
    const squared = arry.map(n => n * n)
    console.log(squared)

    2. DOM / event

    2.1 JavaScript의 위치

  • JavaScript 작성
    <!-- HTML 문서 내부에 작성 -->
    <script>
      function say() {
            console.log('여기는 index.html파일입니다.')
    </script>
    <!-- HTML 문서에 링크 -->
    <script src="index.js"></script>
    <!-- JavaScript 위치 -->
    <!DOCTYPE html>
    <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <title>repl.it</title>
        </head>
        <body>
          <h1>html 페이지</h1>
          <script src="index.js"></script>
          <script> 
            function say() { 
              console.log('여기는 index.html파일입니다.'); 
            } 
            sayHi();
          </script>
        </body>
    </html>

    2.2 DOM

  • DOM ( Document Object Model )
    • HTML/CSS 와 JavaScript를 서로 이어주는 역할
    • document 라는 전역객체를 통해 접근
    • document 객체로 element, attribute에도 접근 할 수 있다
    • class, id 추가, style 수정 등등 가능
const create = document.createElement('p'); //"createElement" , p Tag 생성,
create.className('class'); // className : 클래스 생성
create.innerHTML('wow'); // innerHTML : 요소에 텍스트 작성
// HTML에서 box라는 class를 가진 요소에 접근
const hTag = document.querySelector('.box')
hTag.appendChild(create) //hTag 요소 내부에 create 추가

2.3 event