조코딩 웹개발 5주 완성 3주차 리뷰(1)_JavaScript

들어가기에 앞서

어느덧 3주차 포스트입니다! 개인적인 일과 휴가로 강의 진행되고 2주나 늦게 포스트를 작성하게 되었습니다😥 저도 강의를 보며 생소한 내용이 많아 강의 내용을 정리하는 느낌으로 포스트를 작성하려고 합니다. 미숙하지만 포스트 찾아와주셔서 항상 감사합니다:)

JavaScript

이전에 배운 HTML과 CSS가 웹 페이지의 구조인 마크업을 담당하는 마크업 언어와 스타일 언어였다면, JavaScript는 웹 페이지의 논리 설계를 가능하도록 하는 프로그래밍 언어입니다.

Java와 JavaScript의 관계

많은 분들이 JavaScript가 Java에서 파생된 언어라고 생각하시는데 실상은 둘이 완전히 다른 언어입니다. 조코딩님은 Java와 JavaScript의 관계를 인도와 인도네시아라고 비유하셨는데 찾아보니 JavaScript의 첫 이름은 LiveScript로 Java와 구문이 비슷해서 이름을 JavaScript로 명명했다고 합니다. (출처: 나무위키)

Java의 공식 문서에서도 JavaScript와의 차이점을 명시한 점이 흥미로운데 관심있으신 분은 한번 읽어보시는 걸 추천드립니다:)

Java $\ne$ JavaScript

JavaScript 실습 환경

JavaScript를 실습하기 위해서 다양한 환경을 사용할 수 있지만 가장 간편한 Chrome 개발자 도구를 통해 실습할 수 있는 방법을 알려드리겠습니다.

1. Chrome 브라우저를 엽니다.
2. F12(또는 Ctrl+Shift+J)를 눌러 Chrome 개발자 도구를 엽니다.
3. Console 창에 코드를 입력하고 Enter를 누르면 코드가 실행됩니다.

실제 본 포스트 Chrome 개발자 도구 화면

JavaScript 기초 문법

변수

프로그래밍 언어에서 변수란 값을 담는 메모리 공간을 의미하며, 변수명은 해당 메모리 공간을 식별하기 위한 이름을 의미합니다.

JavaScript에서 변수 선언 방식은 var, let, const가 있습니다. 각각의 방식은 중복 선언 가능 여부, 재할당 가능 여부로 구분할 수 있습니다.

• var

var v = 1;
console.log(v); // 1

var v = 2;
console.log(v); // 2

v = 3;
console.log(v); // 3

var는 중복 선언, 재할당이 모두 가능한 변수 선언 방식입니다.

• let

let l = 1;
console.log(l); // 1

let l = 2; // Uncaught SyntaxError: Identifier 'l' has already been declared

let l = 1;
console.log(l); // 1

l = 2;
console.log(l); // 2

let은 중복 선언은 불가능하지만, 재할당은 가능한 변수 선언 방식입니다.

• const

const c = 1;
console.log(c); // 1

const c = 2; // Uncaught SyntaxError: Identifier 'c' has already been declared

const c = 1;
console.log(c); // 1

c = 2; // Uncaught TypeError: Assignment to constant variable.

const는 중복 선언, 재할당이 모두 불가능한 변수 선언 방식입니다.

이 외에도 JavaScript에서는 언급된 선언 방식들을 생략하고 변수를 선언할 수 있습니다. 변수 선언 방식들을 생략하고 변수를 선언할 시, 기본적으로 var로 선언한 것과 비슷하게 작동합니다. 하지만 둘의 차이점은 var는 뒤에 설명할 함수 안에서 선언될 시 지역변수가 되고, 밖에서 선언될 시 전역변수가 되지만, 변수 선언 방식을 생략하면 함수 안에서나 밖에서나 전역변수가 된다는 특징이 있습니다.

지역변수: 특정한 구역 내에서만 사용가능한 변수
전역변수: 특정한 구역 제한 없이 어느 곳에서나 사용가능한 변수

다음의 코드를 통해 둘의 차이점을 설명드리겠습니다.

var x = 0; // Declares x within file scope, then assigns it a value of 0.

console.log(typeof z); // "undefined", since z doesn't exist yet

function a() {
  var y = 2; // Declares y within scope of function a, then assigns it a value of 2.

  console.log(x, y); // 0 2

  function b() {
    x = 3; // Assigns 3 to existing file scoped x.
    y = 4; // Assigns 4 to existing outer y.
    z = 5; // Creates a new global variable z, and assigns it a value of 5.
           // (Throws a ReferenceError in strict mode.)
  }

  b(); // Creates z as a global variable.
  console.log(x, y, z); // 3 4 5
}

a(); // Also calls b.
console.log(x, z);     // 3 5
console.log(typeof y); // "undefined", as y is local to function a

변수 x는 (첫번째 줄)함수 밖에서 선언되어 0이란 값을 가진 전역변수가 되었고, (열한번째 줄)함수 a를 실행하는 과정에서 3으로 재할당이 되었습니다.

변수 y는 (여섯번째 줄)함수 a 안에서 선언되어 2란 값을 가진 지역변수가 되었고, (열두번째 줄)함수 a를 실행하는 과정에서 4로 재할당이 되었습니다. 하지만 (스물세번째 줄)변수 y의 데이터 타입을 출력하는 과정에서 변수 y는 함수 a의 지역변수이기 때문에 함수 밖에서는 변수 y의 데이터 타입을 불러올 수 없습니다.

변수 z는 (열세번째 줄)함수 b 안에서 선언되었지만 변수 선언 방식이 생략되어 5란 값을 가진 전역변수가 되었습니다. 변수 z는 변수 y와 달리 함수 안에서 선언되었지만, 전역변수이기 때문에 함수 밖에서도 변수 z를 불러올 수 있습니다.

이 외에도 (세번째 줄)변수나 함수가 선언되기 전에 메모리 공간을 미리 할당하는 것을 호이스팅이라고 합니다.

함수

프로그래밍 언어에서 함수란 특정한 작업을 수행하기 위한 코드의 집합입니다.

JavaScript에서 함수는 다음과 같이 선언할 수 있습니다.

function 함수명(매개변수) {
  코드
}

함수명 = (매개변수) => {코드} // 매개변수가 하나뿐인 경우 괄호 생략 가능

후자는 Arrow function이라는 함수 선언 방식으로 전자의 전통적인 방식보다 간편하지만 몇 가지 제한점이 있습니다. 더 알아보고 싶으신 분들은 해당 문서를 읽어보시길 추천드립니다.

다음은 입력받은 두 수를 더한 값을 출력해주는 함수를 실습해보겠습니다.

function add(x, y) {
  let temp = x + y;
  return temp;
}

result = add(1, 2);

console.log(result); // 3

조건문

프로그래밍 언어에서 조건문이란 특정 조건에 따라 특정 동작을 수행하도록 하는 문장입니다.

다음은 성적에 따라 학점을 표시하는 조건문을 실습해보겠습니다.

let math = 100;
let english = 85;

function grade(x) {
    if(x > 90) {
        console.log("A");
    }
    else if(x > 80) {
        console.log("B");
    }
}

grade(math); // A
grade(english); // B

반복문

프로그래밍 언어에서 반복문이란 특정 동작을 여러번 수행하도록 하는 문장입니다.

다음은 1부터 10까지 자연수의 합을 구하는 반복문을 실습해보겠습니다.

let sum = 0;

for (let i = 1; i <= 10; i++) {
    sum += i;
}

console.log(sum); // 55

웹 조작

Browser Object Model (BOM)

BOM이란 웹 브라우저를 제어할 수 있는 객체 모델을 의미합니다.

다음은 실습을 통해 BOM을 다뤄보겠습니다.

alert("Hello, world!"); // 웹 브라우저에 경고창 표시

location.href = "https://duckbankbok.com"; // 페이지 URL 이동

location.reload() // 새로 고침

history.back(); // 뒤로 가기

history.forward(); // 앞으로 가기

Document Object Model (DOM)

DOM이란 문서의 구조, 스타일, 내용 등을 제어할 수 있는 객체 모델을 의미합니다. DOM은 다음과 같이 제어할 객체를 선택할 수 있습니다.

document.getElementById()
document.getElementsBy~()[0~] // ClassName, Name, TagName, TagNameNS
document.querySelector() // .클래스명, #id명, 태그명

다음은 실습을 통해 DOM을 다뤄보겠습니다.

<h4>내 이름은 <span class="introduction" id="name">루피</span>!</h4>
<h4>나는 <span class="introduction" id="dream">해적왕이</span> 될거야!</h4>

document.getElementById("name").style.color = "red"; // 글자색 "red"로 변경

document.getElementsByClassName("introduction")[1].innerHTML = "뽀로로와 친구가"; // 태그 안의 내용 변경 -> 같은 클래스 객체 중 2번째 객체만 적용

document.querySelector("#dream").style.fontSize = "50px";  // 글자 크기 변경

document.querySelector("h4").style.backgroundColor = "yellow"; // 배경색 변경 -> 첫번째 <h4> 태그만 적용

내 이름은 루피!

나는 해적왕이 될거야!

이벤트

JavaScript를 통해 사용자가 이벤트(클릭, 스크롤 등)를 발생시키는 것을 감지하여 사용자와 상호작용할 수 있습니다. JavaScript에서 이벤트를 감지하는 방법은 두 가지가 있습니다.

• inline

inline 방식은 HTML의 태그 안에 속성으로 이벤트를 지정해주는 것을 의미합니다.

다음은 버튼을 클릭할 시 경고창을 띄워 주는 이벤트를 실습해 보겠습니다.

<button onclick="alert('Hello, world!')">Click</button>

• addEventListener

addEventListener 방식은 요소에 직접 이벤트를 지정해주는 것을 의미합니다.

다음은 마우스 커서를 지정한 요소에 올려놓을 때 마우스 커서를 변경해주는 이벤트를 실습해 보겠습니다.

let cursor = document.getElementById("cursor");

cursor.addEventListener("mouseover", function (event) {
  event.target.style.cursor = "url('../../assets/img/골드쉽_일반 선택.cur'), auto";
}, false);

<div id="cursor" style="width: 600px; height: 400px; background-image: url('https://github.com/user-attachments/assets/fb13616e-a55a-409e-bbd6-6c0a51e1e256'); background-size: cover;"></div>

PC 환경에서만 실습 가능하며, url 안의 주소는 직접 다운받은 이미지의 주소로 입력해야 됩니다.

(이미지 참조: 배경 이미지, 커서)