JavaScript 선행

---

🗒️ 표기법

• dash-case(kebab-case) : - 기호를 사용하는 표기법

  • 주로 HTML, CSS에서 사용됩니다.
  • ex) login-btn
    
    

• snake_case : _ 기호를 사용하는 표기법

  • 주로 HTML, CSS에서 사용됩니다.
  • ex) login_btn
    
    

• camelCase : 낙타의 등 모양에서 따온 표기법

  • 첫 단어는 소문자로 작성하고 이후 나오는 단어는 대문자로 표기합니다.
  • 주로 JavaScript에서 사용됩니다.
  • ex) loginBtn
    
    

• PascalCase : 첫 단어와 중간 단어들이 대문자인 표기법

  • 주로 JavaScript에서 사용됩니다.
  • ex) LoginBtn
    
    

• Zero-based Numbering : 프로그래밍 언어에서 숫자를 세는 방식

  • 1부터 숫자가 시작되는 것이 아닌, 0부터 숫자가 시작됩니다.
    
    

• 주석

// 한줄 주석

/* 한줄 주석 */

/**
* 여러 줄
* 주석
*/

🗒️ 데이터 종류(자료형)

1. String (문자 데이터)

문자 데이터의 경우 따옴표를 이용해 문자를 표현합니다.
이때 `(백틱)을 이용해 템플릿 리터럴 방식을 사용할 수 있습니다.

let name = "seokji";
let email = 'abcd@email.com'
let hello = `Hello ${name} 😄` -> 템플릿 리터럴

console.log(name); // seokji
console.log(email); // abcd@email.com
console.log(hello); // Hello seokji 😄

2. Number (숫자 데이터)

정수 및 부동소수점 숫자를 나타내는 데이터입니다.

let number = 123;
let pi = 3.14;

console.log(number); // 123
console.log(pi); // 3.14

3. Boolean (불리언 데이터)

true, false 두 가지 값을 가진 논리 데이터입니다.

let isTrue = true;
let isOpen = false;

console.log(isTrue); // true 참
console.log(isOpen); // false 거짓

4. Undefined

값이 할당되지 않은 상태를 나타냅니다.

let something;
console.log(something); // undefined

5. Null

어떤 값이 의도적으로 비어있음을 나타냅니다.

let empty = null;
console.log(empty); // null

6. Object (객체 데이터)

여러 데이터를 key : value 형식으로 저장합니다.

let person = {
  name: "seokji",
  age: 123,
  isLogin: true,
};

console.log(person.name); // seokji
console.log(person.age); // 123
console.log(person.isLogin); // true

7. Array (배열 데이터)

여러 데이터를 순차적으로 나열해 저장합니다.

let foods = ["🍕", "🍝", "🍟"];

console.log(foods[0]); // 🍕
console.log(foods[1]); // 🍝
console.log(foods[2]); // 🍟

🗒️ 변수

변수는 데이터를 저장하고 사용할 때 쓰이는 저장 공간입니다.

• var : 모던 자바스크립트에서는 지양하는 것이 좋습니다.
• let
  • let은 값을 재할당 할 수 있습니다.

let a = 123;
consol.log(a); // 123

a = 456;
consol.log(a); // 456

• const
  • const는 값을 재할당 할 수 없습니다.

const a = 123;
console.log(a);

a = 456;
console.log(a); // TypeError: Assignment to constant variable.

-> ❗ 이미 JavaScript에서 사용되는 예약어의 경우 변수의 이름으로 사용할 수 없습니다.
ex) this, if, break ...

🗒️ 함수

함수는 특정 기능을 수행하는 코드의 집합입니다.

// 함수 선언
function sayHi() {
  // 실행 코드 (명령)
  console.log("안녕하세요?");
}

// 함수 호출
sayHi(); // 안녕하세요?

// 값을 반환 하는 리턴 함수
function returnFunc() {
  return "return"; // 리턴 값 -> 데이터를 함수 밖으로 내보낼 수 있다.
}

let a = returnFunc();
console.log(a); // return

// 매개 변수를 갖는 함수

function sum(x, y) {
  // x, y는 매개변수(Parameters)
  return x + y;
}

let a = sum(10, 11); // 10과 11은 인수(Arguments)
let b = sum(50, 10);
let c = sum(1, 10);

console.log(a, b, c); // 21, 60, 11

// 기명 함수
// 함수 선언
function foo() {
  console.log("기명 함수!");
}

// 익명 함수
// 함수 표현
let bar = function () {
  console.log("익명 함수!");
};

foo(); // 기명 함수!
bar(); // 익명 함수!

// 객체 -> 객체 속성에 함수가 있을 경우 메소드라고 부른다.
const ji = {
  name: "ji",
  age: 123,
  // 메소드
  getName: function () {
    return this.name;
  },
};

const jiHello = ji.getName();
console.log(jiHello); // ji
console.log(ji.getName()); // ji

🗒️ 조건문

조건문은 조건의 결과(truthy, falsy)에 따라 코드가 실행되는 구문을 의미합니다.
if, else 키워드를 사용해 구문을 작성할 수 있습니다.

let isShow = true;
let isTrue = false;

if (isShow) {
  console.log("Show"); // Show
}

if (isTrue) {
  console.log("True");
}

let isShow = false;

if (isShow) {
  console.log("Show");
} else {
  console.log("Hide"); // Hide
}

🗒️ DOM API

DOM은 Document Object Model의 줄임말로, 웹 페이지에 대한 인터페이스를 말합니다. API는 Application Programming Interface의 약자로 프로그래밍 명령어입니다. DOM API는 한마디로 자바스크립트에서 HTML을 다루는 명령들입니다.

❗ defer 속성을 사용하는 이유 -> 브라우저는 코드를 위에서 아래로 읽기 때문에 스크립트 아래 DOM에 접근할 수 없습니다. defer를 사용하면 스크립트를 백그라운드에서 다운로드 되며 HTML 파싱이 끝난 후 스크립트가 실행됩니다.

✏ 예제

🗒️ 메서드 체이닝

메서드 체이닝이란 코드 줄에서 메서드를 반복적으로 호출하는 것을 의미합니다.
쉽게 말하면 메서드들이 체인처럼 엮어서 호출되는 프로그래밍 패턴입니다.

✏ 예제