JavaScript 선행

다시 공부 중...·2021년 10월 12일
패캠-프론트앤드
0

표기법

단어 사이의 공백을 표기하는 방식

  • dash-case(kebab-case): apple-banana / html, css
  • snake_case: apple_banana / html, css
  • camelCase: appleBanana / js
  • PascalCase: AppleBanana / js

zero-based numbering

0부터 인덱싱

주석

  • 한 줄
    • // 메모
    • /* 메모 */
  • 여러 줄
    • /* ~ */

단축키 ctrl + .

데이터 종류(자료형)

  • string
  • number
  • boolean
  • undefined
  • null
  • object
  • array

1. string

let name = "name";
let email = 'email';
let hello = `Hello ${name}` // 보간

console.log(hello);

2. number

정수 및 부동소수점 숫자

let int = 123;
let float = 8.1;

3. boolean

참/거짓

let t = true;
let f = false;

4. undefined

변수가 생성되기만하고 값은 할당되지 않은 상태.

let undef;
let obj = { abc: 123 };

console.log(undef);  // undefined
console.log(obj.abc);  // 123
console.log(obj.xyz);  // undefined

5. null

의도적으로 값이 없는 상태를 명시.

let empty = null;

6. object

여러 데이터를 key:value 형태로 저장.
각 key:value 쌍을 속성property라고 한다.
파이썬의 딕셔너리와 흡사.

let user = {
  name: 'name',
  age: 123,
  isValid: true
};

console.log(user.name);
console.log(user.age);
console.log(user.isValid);

7. array

순서가 있는 데이터 시퀀스

let alphabet = ['A', 'B', 'C'];

console.log(alphabet[0]);
console.log(alphabet[1]);
console.log(alphabet[2]);

변수와 예약어

변수

  • 변수의 선언
    • var: 사용 지양
    • let
    • const

let: 변수에 값을 다시 할당할 수 있다.

let a = 10;
a = 20;
console.log(a);  // 20

const: 변수에 값을 다시 할당할 수 없다.

const a = 10;
a = 20;
console.log(a);  // TypeError

예약어

변수나 함수 이름으로 사용할 수 없는 이름
사용시에 SyntaxError

  • this
  • if
  • break
  • ...

함수

함수의 형태

코드 집합의 실행

function func() {  // 선언
  console.log('func');
}

func();  // 호출, 출력: func

값의 반환

function returnFunc() {  // 선언
  return 123;
}

let a = returnFunc();  // 호출
console.log(a);  // 123

매개변수의 사용

function sum(a, b) {  // 선언
  return a + b;
}

let a = sum(1, 2);  // 호출
console.log(a);  // 3

function sum(a, b) { ... }의 a, b: 매개변수 parameters
let a = sum(1, 2);의 1, 2: 인수 arguments

기명함수, 익명함수

기명함수

이름이 있는 함수
함수 선언

function hello() {  // hello라는 이름의 함수를 선언했다.
  return 'hello'
}

hello();

익명함수

이름이 없는 함수
함수 표현

let world = function () {  // 이름이 없는 함수를 변수에 할당하여 함수를 표현했다.
  return 'world'
}

world();

함수도 데이터처럼 다룰 수 있다.
객체의 속성의 값이 함수일 경우 method라고 한다.

// 예제
const obj = {
  name: 'ho',
  getName: function () {  // method
    return this.name;  // this: 속성이 속해있는 객체를 의미.
  }
};

const hisName = obj.getName();  // method의 호출
console.log(hisName);  // ho
console.log(obj.getName());  // ho / method를 바로 호출

조건문

let sayHello = true;
let sayHi = false;

if (sayHello) {
  console.log('Hello');
}
// Hello

if (sayHi) {
  console.log('Hi');
} else {
  console.log('Bye');
}
// Bye

DOM API

Document Object Model Application Programming Interface

  • Document Object Model: HTML의 요소들. div, span, input, ...
  • DOM API: HTML 요소들을 제어하기 위한 명령들

자바스크립트 코드를 html에 연결하는 script 요소 이후에 생성된 요소들은 자바스크립트 코드 실행 이후에 생성되므로 자바스크립트 코드에서 접근 불가. script 요소에 defer 속성을 추가해 html 모든 요소 생성 이후에 자바스크립트 코드가 실행되도록 할 수 있다.

<!--html-->
<script defer src="./main.js"></script>
...
<div class="box">Box!!</div>

querySelector: 선택자를 통해 html 요소를 반환

  • document.querySelector(선택자): 선택자에 맞는 요소 하나를 반환
  • document.querySelectorAll(선택자): 선택자에 맞는 모든 요소들을 반환 (배열과 비슷한 형태로 - 유사배열)

이벤트와 핸들러

const boxEl = document.querySelector('.box');  // html 요소를 선택

boxEl.addEventListener(이벤트, 핸들러);

// 이벤트가 발생하면 핸들러 실행 - ex) 요소를 클릭하면 'clicked' 출력
// 핸들러는 기명함수, 익명함수 모두 가능.
boxEl.addEventListener('click', function () {
  console.log('clicked');
});

classList

const boxEl = document.querySelector('.box');  // html 요소를 선택

// 요소의 클래스 정보 객체 활용
let isContainsBox = boxEl.classList.contains('box'); 
// true, html에서 정의한 요소의 클래스

boxEl.classList.add('active');  // 클래스 추가
let isContains = boxEl.classList.contains('active');
// true
// 클래스가 추가되었다. <div class="box active">Box!!</div>

boxEl.classList.remove('active');  // 클래스 제거
isContains = boxEl.classList.contains('active');
// false
// 클래스가 제거됨. <div class="box">Box!!</div>

querySelectorAll & forEach

document.querySelectorAll(선택자): 선택자에 해당하는 모든 요소 반환. 배열과 유사한 형태.

...
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
...
const boxEls = document.querySelectorAll('.box');  // 모든 box 클래스 요소 반환

boxEls.forEach(function (반환된요소, 요소의순번) {
  // code
});

boxEls.forEach(function (boxEl, index) {
  console.log(index, boxEl);
  boxEl.classList.add(`order-${index + 1}`);
  console.log(boxEl);
});

출력:
❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓
❓ 클래스를 추가하는 코드 이전에 boxEl을 출력하는데 이미 클래스가 추가된채로 출력된다 ❓
❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓

0 <div class="box order-1">1</div>
<div class="box order-1">1</div>
1 <div class="box order-2">2</div>
<div class="box order-2">2</div>
2 <div class="box order-3">3</div>
<div class="box order-3">3</div>
3 <div class="box order-4">4</div>
<div class="box order-4">4</div>

textContent

const boxEl = document.querySelector('.box');
// getter, 요소의 내용을 얻음.
console.log(boxEl.textContent);
// setter, 요소의 내용을 지정함.
boxEl.textContent = 'hoho';

console 출력:
1

화면 출력: textContent에 새로운 내용을 지정하니 html 출력도 바뀜

전후

메소드 체이닝 method chaining

메소드를 연결해서 사용할 수 있는 기법

const hello = 'hello'
const olleh = a.split('').reverse().join('')
// split: 인수 기준으로 문자열 쪼갬
// reverse: 배열 순서 반전
// join: 배열의 원소들 사이사이에 인수를 끼워넣고 하나의 문자열로 결합하여 반환

console.log(hello); // hello
console.log(olleh); // olleh





































profile
다시 공부 중...
인공지능, 개발 공부
이전 포스트

vs code html 작성 단축키

다음 포스트

스벅 예제 메모

0개의 댓글