JS 선행

eunhye·2022년 4월 28일

2022.04.25 Part01-09

1. 개요

VSCODE 실행 - 폴더 생성(ex.test) - 파일 생성(ex. index.html , main.js) - 코드 작성 - index.html를 브라우저에 연결 - 마우스 오른쪽 클릭후 검사 및 단축키 F12 - js 결과 확인
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./main.js"></script>
</head>
<body>
    
</body>
</html>

main.js

console.log('HEROPY')

표기법

dash-case(kebab-case) -데시 케이스 표기법, html과 css에서 사용
snake_case- 스네이크 케이스 표기법 , html과 css에서 사용
camelCase- 카멜(낙타) 케이스 표기법 ,js에서 사용
ParcelCase- 파스칼 케이스, js에서 사용
Zero-based Numbering - 0 기반 번호 매기기! 특수하 경우를 제외하고 0 부터 숫자를 시작합니다.

간단한 코드 살펴보기

let fruits = ['Apple','Banana','Cherry']
console.log(fruits[0]); - 'Apple'
console.log(fruits[1]); - 'Banana'
console.log(fruits[2]); - 'Cherry'

console.log(new Date('2021-01-30').getDay()); - 6, 토요일
console.log(new Date('2021-01-31').getDay()); - 0, 일요일
console.log(new Date('2021-02-1').getDay()); - 1, 월요일

주석(comments)

//한 줄 메모
/* 한 줄 메모 */
/*
* 여러 줄
* 메모 1
* 메모 2
*/

2. 데이터 종류

데이터 종류(자료형)

String(문자데이터) - 따옴표를 사용합니다.

let myName = "HEROPY";
let email = 'hello@naver.com';
let hello = 'Hello ${myName}?!'

console.log(myName); - HEROPY
console.log(email); - hello
console.log(hello); - Hello HEROPY?!

Number(숫자 데이터) - 정수 및 부동소수점 숫자를 나타냅니다.

let number = 123; - 정수
let opacity = 1.57; - 부동소수점 

console.log(number); - 123
console.log(opacity); - 1.57

Boolean(불린데이터) - 두 가지 값 밖에 없는 논리 데이터입니다.

let checked = true; - 참
let isShow = false; - 거짓

console.log(checked); - true
console.log(checked); - false

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

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

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

Null - 어떤 값이 의도적으로 비어있음을 의미합니다.

let empty = null;

console.log(empty); - null

Object(객체 데이터) - 여러 데이터를 Key:Value 형태로 저장합니다. {}

let user = {
    name: 'HEROPY',
    age: 85,
    isValid: true
}

console.log(user.name); - HEROPY
console.log(user.age); - 85
console.log(user.isValid); - true

Array(배열 데이터) - 여러 데이터를 순차적으로 저장합니다. []

let fruits = ['Apple','Banana','Cherry'];

console.log(fruits[0]); - 'Apple'
console.log(fruits[1]); - 'Banana'
console.log(fruits[2]); - 'Cherry'

3. 변수 예약어

변수 - 데이터를 저장하고 참조(사용)하는 데이터의 이름 - var, let, const

let - 재사용 가능, 변수 선언
let a = 2;
let b = 5;

console.log(a + b); - 7
console.log(a - b); - -3
console.log(a * b); - 10
console.log(a / b); - 0.4

값(데이터)의 재할당 가능!
let a = 12;
console.log(a); - 12

a = 999;
console.log(a); - 999

값(데이터)의 재할당 불가!
const a = 12;
console.log(a); - 12

a = 999;
console.log(a); - TypeError: Assignment to constant variable.

예약어 - 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어 - Reserved Word

let this = 'hello!' - SyntaxError
let is = 123; - SyntaxError
let break = true; - SyntaxError

4. 함수

함수 - 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

function helloFunc() { - 함수 선언
  // 실행 코드
  console.log(1234);
}

// 함수 호출
helloFunc(); - 1234

  function returnFunc(){
    return 123;
  }
  
  let a = returnFunc();

  console.log(a); - 123
  
  function sum(a, b){ - a와 b는 매개변수(Parameters)
    return a + b;
}

let a = sum(1, 2); - 1과 2는 인수(Arguments)
let b = sum(7, 12);
let c = sum(2, 4);

console.log(a, b, c) - 3, 19, 6

function hello(){ - 기명(이름이 있는) 함수, 함수 선언
    console.log('Hello~');
}

let world = function() { - 익명(이름이 없는) 함수, 함수 표현
    console.log('World~');
}

// 함수 호출
hello(); - Hello~
world(); - World~

// 객체 데이터
const heropy = {
    name: 'HEROPY',
    age: 85,
    // 메소드(Method)
    getName: function() {
        return this.name;
    }
};

const hisName = heropy.getName();
console.log(hisName); - HEROPY
// 혹은
console.log(heropy.getName()); - HEROPY

5. 조건문

조건문 - 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 - if, else

let isShow =  true;
let checked = false;

if(isShow){
    console.log('Show!') - Show!
}

if(checked){
    console.log('Checked')
}

let isShow =  true;

if(isShow){
    console.log('Show!')
}else{
    console.log('Hide?')
}

6. DOM API(1)

DOM API - Document Object Model, Application Programming Interface

// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box')

// HTML 요소에 적용할 수 있는 메소드!
boxEl.addEventListener();

// 인수(Arguments)를 추가 가능!
boxEl.addEventListener(1, 2);

// 1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);

// 2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function() {
    console.log('Click~!')
})

// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box')

// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); - true

boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); - false

7. DOM API(2)

let boxEl = document.querySelector('.box');

console.log(boxEl);

boxEl.addEventListener('click', function(){
    console.log('Click');
    boxEl.classList.add('active');
    console.log(
        boxEl.classList.contains('active') - true
    )
        boxEl.classList.remove('active');
    console.log(
        boxEl.classList.contains('active') - false
    )
})

// HTML 요소(Element) 1개 검색/찾기
const boxEls = document.querySelectorAll('.box')
console.log(boxEl);

// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가!
boxEl.forEach(function () {});

// 첫 번째 매개변수(boxEl) 반복 중인 요소
// 두 번째 매개변수(index) 반복 중인 번호
boxEl.forEach(function(boxEl, index) {});

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

const boxEl = document.querySelector('.box');

//Getter, 값을 얻는 용도
console.log(boxEl.textContent); - Box!!

//Setter, 값을 지정하는 용도
boxEl.textContent = 'HEROPY?!'
console.log(boxEl.textContent); - HEROPY?!

8. 메소드 체이닝

const a = 'Hello~';
// split: 문자를 인수 기준으로 쪼개서 배열로 반환.
// reverse: 배열을 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split('').reverse().join(''); // 메소드 체이닝

console.log(a); - Hello~
console.log(b); - ~olleH

eunhye

이전 포스트

Git/ Github

다음 포스트