[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고(2) | Javascript

1. 이번 목표:
    자바스크립트 내장 메소드, 객체, DOM, 요소 선택 및 다루기, 이벤트에 대해 알아보자!

 

2. 배운 내용 요약

  1. Javascript 내장 메소드

   1-1. 문자열에서 사용하는 속성과 메소드

let str1 = "Strawberry Moon";
let str2 = "    Strawberry Moon  ";

// length 속성 확인
console.log('str1 길이: ' + str1.length);
console.log('str2 길이: ' + str2.length);

// 양 끝의 공백 없애기
console.log('str2 trim: ' + str2.trim());
console.log('str2 trim의 length: ' + str2.trim().length);

// 소문자/대문자로 바꾸기
console.log('str1 소문자로: ' + str1.toLowerCase());
console.log('str1 대문자로: ' + str1.toUpperCase());

// indexOf, charAt, slice

let fruit = "applemango";

// indexOf: 찾고싶은 문자열의 인덱스 번호 반환
console.log("e: " + fruit.indexOf("e"));
console.log("a: " + fruit.indexOf("a"));
console.log("apple: " + fruit.indexOf("apple")); // 0
console.log("mango: " + fruit.indexOf("mango"));  // 5

// 없는 문자열을 찾으려 하면 -1 반환
console.log("z: " + fruit.indexOf("z"));  // -1
console.log("인덱스 0: " + fruit.charAt(0));
console.log("인덱스 8: " + fruit.charAt(8));
console.log("인덱스 18: " + fruit.charAt(18));  // ''


console.log("slice(5): " + fruit.slice(5));
console.log("slice(3, 6): " + fruit.slice(3, 6)); // 3번 인덱스부터 5번 인덱스까지
console.log("slice(-1): " + fruit.slice(-1));
console.log("slice(-4): " + fruit.slice(-4));

let arr = [1, 2, 3, 4, hi, hello];
let newArray = array.slice(0,4);

//결과값
//arr = [1, 2, 3, 4, hi, hello];   //원본은 변하지 않음
//newArray = [1, 2, 3, 4];

// replace, replaceAll

let msg1 = "Wow~ It is so amazing!!! Wow!";

console.log(msg1.replace('Wow', 'Hey~'));
console.log(msg1.replaceAll('Wow', 'Hoo!'));

let date = "2024.11.06";

console.log(date);

// YYYY-MM-DD
console.log(date.replaceAll('.', '-'));
date = date.replaceAll('.', '-');
console.log(date);

// split
    let hello2 = hello.split();
    console.log('split(): ' + hello2);
    hello2 = hello.split('');
    console.log("split(''): " + hello2);
    hello2 = hello.split('e');
    console.log("split('e'): " + hello2);
    console.log(typeof hello2);
    
    // ['2024', '11', '06']
    date = date.split('-');
    console.log(date);

let str = "하나, 둘, 셋, 넷, 다섯";
let newArray = str.split(",", 3);

//결과값:
//newArray = ["하나", "둘", "셋"];

 

   1-2. 배열에서 사용하는 메소드

// pop: 배열 맨 뒷부분의 값을 삭제
let arr = [1, 2, 3, 4, 5]
arr.pop();
console.log(arr); // [1, 2, 3, 4]

// push: 배열 맨 뒤에 값을 삽입
let arr = [1, 2, 3];
arr.push(4);
console.log(arr) // [1, 2, 3, 4]

// unshift: 배열 맨 앞에 값을 삽입
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

// shift: 맨 앞의 값 삭제
let arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3];

// includes: 해당 배열에 지정한 요소가 있는지 확인
let nums = [1, 2, 3];
console.log(nums.includes(4)); // false
console.log(nums.includes(2)); // true

// length: 배열의 길이 반환
let arr = [1, 2, 3];
console.log(arr.length); // 3

// indexOf(): 매개변수에 해당하는 배열 인덱스 반환
let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf('3'); // 2 (3은 인덱스2)

console.log(arr.indexOf('7'); // -1 (없으면 -1 반환)

console.log(arr.indexOf('3', 1)); // 2 (1번 인덱스부터 검색하여 '3'의 인덱스 반환)

// reverse(): 순서 뒤집기
let arr = [1, 2, 3];
console.log(arr.reverse()); // [3, 2, 1]

// join: 배열의 각 요소를 지정된 구분자로 연결하여 하나의 문자열로 반환

let fruits = ["사과", "바나나", "딸기"];

console.log(fruits.join()); // "사과,바나나,딸기"

console.log(fruits.join("")); // "사과바나나딸기"

console.log(fruits.join(" ")); // "사과 바나나 딸기"

console.log(fruits.join(", ")); // "사과, 바나나, 딸기"

console.log(fruits.join("-")); // "사과-바나나-딸기"

❗ 메소드 체이닝
    각각의 메소드를 연결해서 사용하는 개념.
    단, 사용한 메소드가 반환(return)값을 가지고 있는 경우에만 사용 가능.

let hello = "Hello~"
helloArr = hello.split("");
console.log(helloArr); // [‘H’, ‘e’, ‘l’, ‘l’, ‘o’, ‘~’]

let reverseHello = helloArr.reverse();
console.log(reverseHello); // [‘~’, ‘o’, ‘l’, ‘l’, ‘e’, ‘H’]

let helloAgain = reverseHello.join("");
console.log(helloAgain); // ~olleH
console.log(hello.split("").reverse().join("")); // ~olleH​

 

 

   1-3. 배열에서의 반복

• 기본 for문    

let numbers = [1, 2, 3, 4, 5, 6];
let fruits = ["사과", "바나나", "수박", "포도", "파인애플"];

for (let i = 0; i < numbers.length; i++) {
	console.log(numbers[i]);
}

for (let i = 0; i < fruits.length; i++) {
	console.log(fruits[i]);
}

 

• for of 반복문

let numbers = [1, 2, 3, 4, 5, 6];
let fruits = ["사과", "바나나", "수박", "포도", "파인애플"];

let numbersLength = numbers.length;
let fruitsLength = fruits.length;

for (let number of numbers) {
	console.log(number);
}
for (let fruit of fruits) {
	console.log(fruit);
}

 

• forEach문

let numbers = [1, 2, 3, 4, 5, 6];
let fruits = ["사과", "바나나", "수박", "포도", "파인애플"];

numbers.forEach(function (number, index, array) {
	console.log(number, index, array);
});

numbers.forEach((number, index, array) => {
	console.log(number, index, array);
});

fruits.forEach(function (fruit, i, arr) {
	console.log(fruit, i, arr);
});

fruits.forEach((fruit, i, arr) => {
	console.log(fruit, i, arr);
});

 

• 배열의 합

let numbers = [1, 2, 3, 4, 5, 6];
var sum1 = 0;
var sum2 = 0;
var sum3 = 0;

for (let i = 0; i < numbers.length; i++) {
	console.log(numbers[i]);
sum1 = sum1 + numbers[i];
}

for (let num of numbers) {
	sum2 = sum2 + num;
}

numbers.forEach((num) => {
	sum3 = sum3 + num;
});

console.log(sum1, sum2, sum3);

 

• 배열의 기타 메소드

const arr = [1, 2, 3, 4, 5];

// filter(): 조건에 부합하는 요소만 찾아서 "배열"로 반환
let arr_filter = arr.filter(function (a) {
	return a > 3;
});
console.log(arr_filter); // [4, 5]

// find(): 조건에 부합하는 첫번째 요소를 찾아서 "값"으로 변환
let arr_find = arr.find(function (a) {
	return a > 3;
});
console.log(arr_find); // 4

// map(): 익명함수에 쓰여진 "연산 결과"를 새로운 "배열"로 반환
let arr_map = arr.map(function (b) {
	return b + 3;
});
console.log(arr_map); // [4, 5, 6, 7, 8];

 

  2. Javascript 표준 객체

자바스크립트가 기본적으로 가지고 있는 객체.
프로그래밍에 기본적으로 필요한 도구.
String, Number, Array, Date, Math 등

• Date    

let now = new Date();

// 1970.01.01 00:00:00 이후로 몇 밀리초나 지났는지
console.log(new Date(6000));
console.log(new Date(2010, 2, 2));
console.log(new Date(2010, 3, 3, 9, 5, 40));

console.log(now.getFullYear() + '년');
console.log(now.getMonth() + '월');  // (0 ~ 11)
console.log(now.getDate() + '일');   // (1 ~ )
console.log(now.getHours() + '시');  // (0 ~ 23)
console.log(now.getMinutes() + '분');  // (0 ~ 59)
console.log(now.getSeconds() + '초');  // (0 ~ 59)
console.log(now.getMilliseconds() + '밀리초');  // (0 ~ 999)
console.log(now.getDay() + '요일');  // (0 ~ 6) (일 ~ 토)

 

• Math

console.log(Math.E);
console.log(Math.PI);
console.log(Math.SQRT2); // 루트2

console.log(Math.min(50, 10, 3, 6, -2, -8)); // 최소값
console.log(Math.max(50, 10, 3, 6, -2, -8)); // 최대값

console.log(Math.random()); // 0 <= x < 1

console.log(Math.round(5.4)); // 소숫점 반올림
console.log(Math.ceil(5.4)); // 소숫점 올림
console.log(Math.floor(5.4)); // 소숫점 버림

 

• object

const areaNum = {
	Seoul: "02",
	Incheon: "032",
	Daejeon: "042",
	Busan: "051",
	Ulsan: "052",
	Daegu: "053",
	Gwangju: "062",
	Jeju: "064",
	};
    
// object의 key만 가져와서 배열로 변환
let key = Object.keys(areaNum);

// object의 value만 가져와서 배열로 변환
let value = Object.values(areaNum);

 

3. DOM 요소

  3-1. 요소 선택

// 1. getElementById
console.log(document.getElementById('green'));
console.log(document.getElementById('red'));

// 2. getElementsByClassName
console.log(document.getElementsByClassName('pink'));
console.log(document.getElementsByClassName('pink')[0]);
console.log(document.getElementsByClassName('others'));
console.log(document.getElementsByClassName('others')[1]);

// 3. getElementsByTagName
console.log(document.getElementsByTagName('div'));
console.log(document.getElementsByTagName('div')[0]);

// 4. getElemensByName (name 속성값)
console.log(document.getElementsByName('id'));
console.log(document.getElementsByName('id')[0]);

// 5. querySelector('CSS 선택자')
console.log(document.querySelector('.pink'));
console.log(document.querySelector('#red'));
console.log(document.querySelector('#div'));
console.log(document.querySelector('input'));
console.log(document.querySelector("[name='id']"));

// 6. querySelectorAll('CSS 선택자')
console.log(document.querySelectorAll('.pink'));
console.log(document.querySelectorAll('.others'));
console.log(document.querySelectorAll('#red')); // 결과가 하나여도 배열 형태로 가져온다.

let pinks = document.querySelectorAll('.pink');
// for of문을 이용해서 pink 클래스 모두 출력하기.
for(let p of pinks) {
    console.log(p);
}

 

  3-2. 요소 다루기

// 1. 태그 내부 내용
/*
- innerText
- textContent
- innerHTML
*/

let div1 = document.getElementById('div1');
console.log(div1);
div1.innerText = '    여기는 <b>첫번째</b> 태그입니다. &hearts     /';      // 2칸 이상의 공백, 앞뒤 공백 제거
console.log('innerText: ' + div1.innerText);
div1.innerHTML = '여기는 <b>첫번째</b> 태그입니다. &hearts;'
div1.textContent = '    여기는 <b>첫번째</b> 태그입니다. &hearts;     /'    // 2칸 이상의 공백, 앞뒤 공백 살아있음
console.log('textContent: ' + div1.textContent);


// 2. 속성에 접근
/**
- 요소.속성명
- getAttribute(): 속성값 가져오기
- setAttribute(): 속성값 설정하기 > 추가, 변경
 */

// beach, naver 아이디
let naver = document.getElementById('naver');
console.log(naver);
// naver.setAttribute('속성이름', '바꿔줄 속성값')
naver.setAttribute('href', 'https://www.google.com');

console.log(naver.href);
console.log(naver.getAttribute('href'));

naver.textContent = '구글로 이동';

console.log(document.querySelector('#beach').src);
document.querySelector('#beach').alt = '바다 사진';


// 3. CSS 변경
let h1 = document.getElementsByTagName('h1')[0];
// let h1 = document.querySelector('h1');
let list = document.querySelectorAll('li');

// 배경색 분홍색, 글자색 흰색, 글씨크기 1.3rem
for(let el of list) {
    // el.style.color = "#fff";
    // el.style.backgroundColor = "pink";
    // el.style.fontSize = '1.3.rem';
    el.classList.add('friends')
}

// 클래스가 있는지 없는지 확인 >> true, false 반환
h1.classList.add('add-h1');
h1.classList.remove('add-h1');
h1.classList.toggle('add-h1');

console.log(h1.classList.contains('add-h1'));
console.log(h1.classList); // 선택된 요소의 클래스 목록 확인


// 4. 부모, 자식, 형제 노드 찾기
let friends = document.getElementById('friends');
let tigger = document.querySelector('#tigger');

// 자식 노드 접근
// 배열 형태로 가지고 옴
console.log(friends.children);
console.log(friends.children[0]);

// 부모 노드 접근
// 배열 형태가 아닌 요소 자체를 가져옴
console.log(tigger.parentNode);

// 형제 노드 접근
// 배열 요소가 아닌 요소 자체를 가져옴
console.log('이전 형제: ' + tigger.previousElementSibling);
console.log('다음 형제: ' + tigger.nextElementSibling);


// 5. 노드 생성, 추가, 삭제
let container = document.querySelector('.container');

// 요소 생성
let p = document.createElement('p');
p.innerText = '새로 추가된 p';
p.style.fontWeight = '700';
p.style.background = 'red';
p.id = 'append-p';

// 요소 추가
// append(): 선택된 요소(container)의 맨 뒤 자식요소로 추가됨
container.append(p);

let p2 = document.createElement('p');
p2.innerText = 'p2';
p2.classList.add('p-2')
// container.append(p2);

let p3 = document.createElement('p');
p3.textContent = 'p3';
p3.classList.add('p-3')
container.appendChild(p3);

container.append(p2, p3, 'hello');

// prepend(): 선택된 요소의 맨 앞 자식으로 추가
let li = document.createElement('li');
li.textContent = '캉가';
li.classList.add('friends');
friends.prepend(li);

// before()
let h3 = document.createElement('h3');
h3.innerText = 'h3 태그';
h1.before(h3);

// after()
let h2 = document.createElement('h2');
h2.innerHTML = 'h2 태그';
h1.after(h2);

// 삭제할요소.remove()
h2.remove();

// 부모요소.removeChild(삭제할 자식 요소)
let firstLi = document.querySelector('li');
let ul = firstLi.parentElement;
ul.removeChild(firstLi);

 

  3-3. 이벤트

/*
동작의 종류: click, dblclick, scroll, change, submit, ...
- addEventListner(동작의 종류, function(){})
- <태그 onchange = "함수의 이름()" onclick = "함수의 이름()"></태그>
   on[동작의 종류] 속성으로 이벤트 제어 가능
*/

const btn1 = document.querySelector('.btn--black');
const btn2 = document.querySelector('.btn--green');
const btn3 = document.querySelector('.btn--blue');
const btn4 = document.querySelector('.btn--red');

// btn1.addEventListener("동작의 이름", function(){동작});
btn1.addEventListener("click", function(){
    console.log('btn1이 클릭되었습니다.');
    alert('버튼1을 클릭하셨군요');
});

btn1.addEventListener("mouseover", function(){
    btn1.style.backgroundColor = 'aqua';
})
btn1.addEventListener("mouseout", function(){
    // btn1.style.backgroundColor = 'black';
    this.style.backgroundColor = 'black';
})

// btn2를 눌렀을 때, div를 자식으로 붙이기
const container = document.getElementById('container');
btn2.addEventListener('click', () => {
    let div = document.createElement('div');
    div.innerText = 'hi!';
    div.style.background = 'pink';
    container.append(div);
})

// btn3을 눌렀을 때, 만들어진 div의 배경색 변경
function changeColor() {
    const divs = document.querySelectorAll('#container > div');
    for(let d of divs) {
        d.style.background = 'skyblue';
    }
    // 막내 요소만 노란색으로 변경
    divs[divs.length-1].style.background = 'yellow';
}
// 함수 호출시 괄호 필수적으로 생략해야함. 작성시 즉시 호출
btn3.addEventListener('click', changeColor);

// btn4를 누르면 배경색 노란색으로 변경, 글자색 검정색으로 변경
btn4.addEventListener('click', changeBtnColor);
function changeBtnColor() {
    this.style.backgroundColor = 'yellow';
    this.style.color = 'black';
}

// btn5를 누르면 alert창 띄우기
function sayHi() {
    alert('hi btn5!');
}


const btn = document.querySelector('button');

/* 1. [클릭 이벤트] */
btn.addEventListener('click', function(event) {
    // 클릭 이벤트에 관한 정보 (event객체)
    console.log(event);
    // 어떤 요소가 클릭되었는지 확인 가능
    console.log(event.target);
});


const input = document.querySelector('input');

/* 2. [키보드 이벤트] */
input.addEventListener('keydown', function(event) {
    // console.log(event);

    // 방향키 아래, 위, 왼쪽, 오른쪽
    if(event.code === 'ArrowDown') {
        console.log('아래쪽 방향키 눌림');        
    } else if(event.code === 'ArrowUp'){
        console.log('위쪽 방향키 눌림');        
    } else if(event.code === 'ArrowLeft'){
        console.log('왼쪽 방향키 눌림');        
    } else if(event.code === 'ArrowRight'){
        console.log('오른쪽 방향키 눌림');        
    } else {
        console.log('방향키 아닌 키 누르는 중');
    }   
})


// console.log(window);
window.addEventListener('scroll', (e) => {
    // console.log(e);
    // console.log(scrollY);

    // scrollY 700에서 div opacity > 1
    if(scrollY >= 700) {
        document.querySelector('.pos').style.opacity = '1';
    }
})


// 폼 이벤트
/* 4. [submit] */
const todoForm = document.querySelector('#todo-form');
const todos = document.querySelector('.todos');

todoForm.addEventListener('submit', (e) => {
    // form이 제출되는 것을 취소. 이벤트 전달을 막는 방법.
    // 새로고침 막음
    e.preventDefault();
    
    console.log('submit');

    // form 내부의 input창 선택택
    const todoInput = document.querySelector('input[name = "todo"]');
    // 요소가 가지고 있는 데이터를 출력
    // console.dir(todoInput);

    // 공백으로 들어오는 문자는 추가되지 않도록
    const todo = todoInput.value.trim();

    if(todo !== "") {
        // 선택된 ul 태그의 자식으로 <li>todo</li> 붙이기
        const li = document.createElement('li');
        li.textContent = todo;
        todos.append(li);
    } else {
        alert("오늘의 할 일을 작성하세요");
    }        
})


/* 5. [change 이벤트] */
const changeInput = document.querySelector('#change-input');
// input창의 value에 변경이 발생하고 input창 바깥을 클릭하면 일어나는 이벤트
changeInput.addEventListener('change', function() {
    console.log('changed!');
})

// input창의 value에 변경이 발생되면 일어나는 이벤트
changeInput.addEventListener('input', function() {
    console.log('changing!!');

    let intro = document.querySelector('.intro');
    intro.innerHTML = this.value;
})

 

 

3. 회고

예전 국비로 풀스택 학원을 다녔을 때, 내가 제일 즐겨하고 좋아하던 것은 자바스크립트였다. 자바스크립트를 통해서 간단한 게임도 만들어 보면서 재미도 느꼈고, HTML과 CSS와 마찬가지로 자바스크립트는 내가 쓰는 코드에 따라 화면에 바로 직관적으로 나타나는 점이 정말 마음에 들었다. 시간이 지나서 리액트를 배우고, 자바스크립트 대신 타입에 엄격한 타입스크립트를 쓰면서 순수 자바스크립트에 대해서는 점점 잊게 된 것 같다.

이번 새싹 강의를 들으면서 잠시 기억 저 멀리로 보내놨던 자바스크립트를 다시 되새길 수 있어서 좋다. 예전에 내가 만든 게임은 랜덤한 시간으로 구워지는 고기를 뒤집어 손님상에 내놓는 직관적인 플래시 게임같은 거였는데, 개인적인 시간을 조금 내어 다시 한번 자바스크립트로 간단한 게임을 다시 만들어봐야 겠다.

이번 한 주는 '아 내가 이 재미로 코딩에 재미를 붙였었지!' 하는 옛 추억을 꺼내보는 느낌의 수업이었다.