웹과 함께 시작하기 ~ 자바 스크립트 기초

자바스크립트는 무엇인가?

• HTML 문서에 적용될 때, 웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어(Dynamic programming language)
• 코어 자바스크립트 언어(core JavaScript language) 위에서 동작하는 다양한 도구를 이용하면, 최소한의 수고로 엄청나게 많은 확장 기능을 사용 가능
  • 브라우저 응용 프로그래밍 인터페이스 (APIs)
    • 브라우저에 내장된 API로 HTML을 동적으로 생성하고 CSS 스타일을 설정
    • 사용자의 웹캠으로부터 비디오 스트림을 수집하거나 조작
    • 3D 그래픽이나 오디오 샘플을 생성 등 다양한 기능 제공
  • 제 3자(third-party) API를 활용해 개발자는 트위터나 페이스북 같은 다른 컨ㄴ텐츠 공급사부터 제공되는 기능을 자신의 사이트에 통합할 수 있음
  • 써드파티 프레임워크와 라이브러리를 HTML에 적용함으로써 사이트와 어플리케이션을 빠르게 구축할 수 있음

---

"Hello world" 예시

• scripts 디렉토리 내에 main.js 생성

  let myHeading = document.querySelector('h1');
  myHeading.textContent = 'Hello World!'

  • querySelector('h1') 함수로 본문 제목에 대한 참조를 myHeading 변수에 저장
  • myHeading 변수의 textContent 프로퍼티 값을 "Hello world!"로 설정

• index.html에 main.js 스크립트 추가

  <script src = "scripts/main.js"></script>

---

JavaScript 기본

여기에 더 자세하게 정리한 내용이 있음

• 변수

  • 값을 저장할 수 있는 컨테이너, var 또는 let 키워드 뒤에 원하는 이름을 붙이면 된다.

    let myVal;
    myVal = 'Zin0'
    
    let myVal2 = 'Zin0';

• 자료형
  변수 설명 예시
  String 문자열로도 알려진 일련의 텍스트. 그 값이 문자열이라는 것을 나타내기 위해서는 인용부호로 둘러싸야 한다. let myVal = 'Zin0';
  Number 숫자. 숫자는 인용부호 사용 X let myVal = 10;
  Boolean 참 / 거짓 값 => true, false let myVal = true;
  Array 여러 값을 하나의 단일 참조(single reference)에 저장할 수 있게 해주는 구조 let myVal = ['Zin0', 28, 'Developer'];
  Object 기본적으로 무엇이든 자바스크립트의 모든 것은 객체(object)이며, 어떤 변수에 저장될 수 있다. let myVal = document.querySelector('h1');

• 연산자
  연산자 설명 기호 예시
  동등 두 값이 서로 같은지 테스트하여 true / false 반환 === let myVal = 3;
  myVal ===4;
  부정,
  다름 연산자 뒤쪽의 값에 대해 논리적으로 반대인 값을 반환. true를 false로 바꾸는 등
  동등 연산자와 함께 사용할 경우 부정 연산자는 두 값이 같지 않은지 여부를 테스트 !,
  !== let myVal = 3;
  !(myVal ===3);
  true를 부정하여 false 반환
  let myVal =3;
  myVal !==3;
  여기서 테스트 하는 것은 myVal이 3과 같지 않은가 이다. false를 반환하는데, myVal과 같기 때문

• 조건문

  • if ... else문
    let iceCream = 'chocolate';
    if (iceCream === 'chocolate') {

      alert('Yay, I love chocolate ice cream!');

    } else {

      alert('Awwww, but chocolate is my favorite...');

    }

• 함수

  let myVal = document.querySelector('h1');
  alert('Hello!');
  
  function multiply(num1, num2) {
      let result = num1*num2;
      return result;
  }
  
  multiply(4,7);
  multiply(20,20);
  multiply(0.5,3);

  • 위의 경우 모두 함수
  • return 문은 브라우저에게 함수로부터 나오는 result 변수를 반환하게 함으로써 그 변수를 사용할 수 있게 한다. 필수적인 것으로 함수 안에서 정의된 변수는 오직 그 함수 내부에서만 사용 가능 => 변수 scoping이라 한다. 프로트앤드 개발자를 위한 자바스크립트 - 스코프

---

이벤트

• 웹사이트의 실질적인 상호작용에는 이벤트가 필요하다. 이벤트는 브라우저에서 발생하는 일을 듣고 그에 대한 반응으로 코드를 실행하는 코드 구조. 가장 확실한 예는 마우스로 무언가를 클릭하면 브라우저가 발생시키는 클릭 이벤트

  document.querySelector('html').onclick = function() { // basic function
      alert('Ouch! Stop poking me!');
  }
  
  document.querySelector('html').onclick = () => { // arrow function
      alert('Ouch! Stop poking me!');
  }

---

예시 웹사이트 확장하기

• 이미지 변경자 추가하기

  • DOM API 특징을 몇 가지 더 사용해서 이미지를 하나 더 추가하고, 이미지가 클릭될 때 JS를 이용해 두 이미지 사이에 전환이 이루어지도록 해보자

    • 맨 먼저, 사이트에 나타내길 원하는 다른 이미지를 찾자(처음 이미지와 비슷한 크기로).

    • images디렉토리에 저장

    • main.js 작성

      let myImage = document.querySelector('img');
      
      myImage.onclick = () => {
          let mySrc = myImage.getAttribute('src');
          if(mySrc === 'images/Liverpool.jpg') { myImage.setAttribute('src', 'images/Gerrard.jpg'); }
          else { myImage.setAttribute('src', 'images/Liverpool.jpg'); }
      }

      • 이미지의 src 속성 값을 얻는다
      • src값이 원래 이미지 경로와 같은지 확인하기 위해 조건문 사용
        • 만약 같다면, src 값을 두 번째 이미지 경로로 변경하여 다른 이미지가 요소 안에 로드되도록 설정
        • 같지 않다면, 원래 상태로 되돌리기 위해 src 값을 원래 이미지 경로로 바꿈

• 개인화된 환영 메시지 추가하기

  • index.html 내의