[2024 JS 심화 백엔드 스터디] #2주차 "JS 기초(2)"

본 글은 다음 영상(반복문~)을 보고 정리한 글입니다.

https://www.inflearn.com/course/%EB%89%B4%EB%B9%84%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#curriculum

[지금 무료] 뉴비를 위한 자바스크립트 | 얄팍한 코딩사전 - 인프런

 

앞부분 https://taei1.tistory.com/2 참고

---

01. 반복문

- 주어진 조건이 충족되는 동안 특정 작업을 반복해서 수행

 

 

1)for문

- 자바스크립트뿐 아니라 많은 언어에서 같은 문법으로 존재

- if문과 같이 중첩사용 가능

 

1-1) for...of 문

- 어떤 배열을 그안에 있는 요소들을 가져다가 순서대로 돌면서 특정작업을 실행할 때 사용

- 배열의 요소들을 순서대로 반환

- 각 턴마다 새로운 상수가 만들어져서 사용

 

1-2) for...in 문

- 객체의 키들을 순서대로 반환

 

1-3) continue & break

1-3.1) continue

- 루프를 하나만 건너띄는것

- cotinue가 발생하면 뒤에있는 것은 해당 턴에서는 실행되지 않는다

 

1-3.2) break

- 루프 전체를 종료시킴

실무에서는 보다 복잡한 상황에서 다양한 변수가 있고, 첫번째 for문에서 통제할 수 없는 조건이 발생했을때(오류발생) break를 사용해서 반복 전체를 긴급 종료하는 용도로 사용됨

 

※괄호 안 요소들은 ';' 으로 구분

';'의 역할

- 변수의 선언 및 할당 (초기값 설정을 위해서만 사용되고 그 이후에는 반복할때 포함되지 않는다.)

- 종료조건

- 참일시 블록 안의 코드 이후 실행할 것

 

※key를 부르는 방법

person[key]  (o)

person.key = person['key']  (x)

key 중에 'key'라는 값이 없으면 출력이 안됨

 

 

 

2)while문

- 형식이 단순화 됨

- 다른언어에서도 거의 다 있는 문법

- 괄호안의 조건이 참인 동안 반복

- 선확인 후조치

- while문에 사용되는 변수는 while문 바깥에서 지정해줘야함

 

2-1)continue & break

for문에서의 역할과 동일

let x = 0;while (x<10) {
    if (x % 3 === 0) continue;
    console.log(x++);
}

 

이 코드에서는 x가 0부터 시작하는데 첫턴부터 continue에 걸려 x를 증가시키는 코드를 넘겨버려 코드가 무한반복된다.

따라서 x를 증가시키는 코드를 continue에 걸리지 않도록 놓아줘야 한다.

 

 

do ... while문

- 선조치 후확인

- 조건에 맞지 않더라도 첫 한번은 수행함

- 일단 먼저 실행을 하고 while 문의 조건을 확인함.

 

 

02. 함수

- 반복될 수 있는 작업을 정의할 때 사용

- 어떤 복잡한 일이 여러차례 같은 방식으로 동작할 필요가 있을때 유용

- input을 받아 output을 반환 (수학적용어의 함수와 유사한 역할)

 

함수 생성: function을 붙이고 함수의 이름을 붙인다

console.log('한준교')

function describeHtmlCssJs () {
	console.log('한준교');
}

describeHtmlCssJs();

 

1) 매개변수와 인자

- 특정 인풋을 받아 작업을 수행하는 함수들에 사용

- 호출부에서는 인자, 함수에서 정의하는 부분에서는 매개변수(따라서 매개변수=인자 로 봐도 무방)

- 매개변수라는 옵션을 두어서 옵션 값을 가지고 실행하도록 지정 가능

- 매개변수가 없을수도 있고 여러개 있을 수도 있다.

 

2) 값을 반환하는 함수

- return: 함수가 해당 값을 반환하도록 함 (마지막에 작성)

- return 뒤에 오는 값을 함수가 반환

 

3) 함수도 값이다

- 변수, 상수에 객체의 값이나 배열의 요소로 다른 함수의 인자로 넣을 수 있음

- 상수에 담길 수 있다는 것은 함수(function)도 특정 기능을 대변하는 하나의 데이터로 볼 수 있다.

 

4) 화살표 함수

- function으로 정의한 함수와는 세부적으로 기능이 다름

- 화살표(=>)는 return과 비슷한 역할을 하는것으로 보임

const mult = (x, y) => x * y;

 

5) 두 줄 이상의 작업이 있을 시

- {}를 사용해줘야 함

- return을 통해 반환되는 것이 무엇인지 명시해줘야함.

 

 

03. html요소들 선택하기

- 웹사이트 내에서 요소들을 선택하는 법

 

 

1) getElementsByTagName

-태그명을 사용해서 요소를 선택

여러번 실행될 것 같으면 상수 또는 변수로 저장하는 것도 가능

document.getElementsByTagName('section');

const $listItems = document.getElementsByTagName('li');

console.log($listItems);

웹사이트의 요소들을 변수나 상수로 저장할때 $를 앞에 붙임(컨맨션(암묵적인 규칙))

 

 

2) getElementsByClassName

-클래스명으로 선택

 

3) getElementById

-아이디로 선택

s가 안붙은 이유는 id는 고유한것이기 때문 (둘 이상의 요소가 같은 Id를 공유하는것 불가능)

 

4) querySelector, querySelectorAll

-css선택자로 선택

- all의 유뮤 차이 

all이 안붙어있으면 css선택자의 첫번째 요소만 가져옴

 

5) children

- 자식 요소들 반환

- 위에 선택한요소에 바로 안쪽에 있는 자식 요소들을 전부 가져옴

 

6) firstElementChild, lastElementChild

- 첫번째 자식, 마지막 자식 요소를 반환

 

7) parentElement

- 부모 요소 반환

- 부모 요소는 딱 하나(자기 자신을 감싸는 바로 위의 요소)

 

 

※document

- 웹사이트에서 자바스크립트를 실행할때 선언하거나 만들지 않아도 존재하는것

 

※dom의 개념

- html과 css로 웹사이트를 만들고 그것을 자바스크립트로 제어하는것을 가능하게 해주는것을 제공

 

 

04. 요소들 조작하기

- 함수를 통해 값에 접근

- 등호(=)를 통해 값을 수정하는 것이 가능

 

1) textContent

- 특정 요소가 이미 갖고 있는 값을 접근해서 반환받는것

 

2) classList

- 리스트 형태의 클래스 확인 및 수정

- 하나의 문자열로 받는 방법도 있지만 하나의 html요소가 여러 클래스를 가질 수 있으므로 리스트 형태가 더 안정적임

 

3) classList.remove

- remove뒤에 문자열로 넣는 클래스를 그것이 이안에 현재 들어있는 상태라면 제거를 해준다.

※ 페이지소스보기를 통해 html을 보면 원본파일을 보여주기 때문에 클래스가 지워져있지 않고 그대로임.

 

4) classList.add

-클래스를 추가

 

5) classList.toggle

- 어떤 클래스를 특정 필요에 의해서 토글링

- on/off 기능을 한다

- 특정 클래스의 적용 여부에 따라서 바뀌도록 적용하려면 toggle기능 사용

 

6) style

- css 스타일 확인 및 수정

style.fontSize -->원하는 요소(폰트사이즈)에 접근해서 정보를 살펴보고 그것을 수정

 

※ camel case

어떤 문자열을 넣어서 스타일이라는 프롬프트에 접근할때에는 css에서 썼던 것과 같이 대시(-)를 그대로 활용가능

점을 붙여서 그 뒤에 입력할때는 대시(-)를 없애고 다음글자를 대문자로 한다

 

7) getAttribute, setAttruibute

- 요소의 속성을 반환 및 수정

- (속성, 해당 속성에 넣을 값)을 하면 속성에 대한 값이 수정된다.

 

8) value, checked

- 인풋 요소들의 값 확인 및 수정

 

= true, = false 를 통해 checkbox의 값을 수정할 수 있다.

$toggle.checked = !$toggle.checked;

$toggle.checked에다가 그것의 반댓값을 넣어주는 위의 코드를 쓰면 on/off를 반복할 수 있다.

 

9) removeChild

- 특정 html요소 제거

- 해당 부모클래스.removeChild를 쓰고 자식을()안에 넣어주면된다.

while ($ul.firstChild) {
  $ul.removeChild($ul.firstChild);
}

위처럼 while 반복문을 써서 첫번째 자식을 계속 지워 요소가 완전히 빌때까지 계속 지우는 방식으로 활용할 수 있다.

 

10) createElement

- 태그명으로 요소를 생성

a) createElement를 통해 요소를 생성

b) textContext를 통해 값을 넣음

c) appendChild를 통해 요소를 대상 요소 안에 넣음

 

11)appendChild

const veges = ['상추', '가지', '브로콜리'];

for (const itm of veges) {
  const $el = document.createElement('li');
  $el.textContent = itm;
  $ul.appendChild($el);
};

 

for문을 활용해 요소 생성

 

05.이벤트

- 사용자가 웹사이트에서 무엇인가를 클릭하거나 어떤 값을 입력하는 것

 

1) addEventListner

- 첫번째 인자로 주어진 이벤트에, 두번째 인자로 주어진 함수의 동작을 부여

- 이벤트가 발생하는지 보고 실행

myButton.addEventListener('click', function () {
	console.log('클릭');
});

클릭이라는 이벤트가 발생하면 클릭을 출력

myButton.addEventListener('mouseenter', logMouseEnter);
myButton.addEventListener('mouseleave', logMouseLeave);

logMouseEnter를 진입을 출력하는 함수, logMouseLeave를 이탈을 출력하는 함수라 할때

마우스를 버튼위에 올리면 진입이 출력, 마우스를 버튼위에서 다른 곳으로 옮기면 이탈을 출력함.

 

※콜백함수 : 다른 곳에 인자 같은걸로 들어가서 특정 조건에 따라 호출되는 함수

- 인자로 이벤트객체라는 것을 가지게 할 수 있다.

- 해당 이벤트가 발생했을 때 이벤트에 대한 상세한 정보들을 전반적으로 포괄하는 객체

- 하나의 이벤트에 여러 콜백함수를 등록하는 것도 가능

 

 

- focus와 blur

focus: 현재 활성화되지않은 인풋을 클릭하거나 다른 요소로부터 탭을 쳐서 창이 입력을 받게되는 상태

blur: 활성화 되어 있는 상태에서 다른것을 클릭하거나 탭을 눌러서 입력을 받고 있는 상태로부터 벗어나는 것

 

- change

인풋 요소의 value(값)이 바뀔때

myInput.addEventListener('change', (e) => {
	console.log(e.target.value)
});

focus를 잃고 blur가 된 상태에서 이전과 값이 바뀌었을때 값을 출력

(e.target은 이벤트가 발생한 대상을 뜻함)

 

- keyup

키보드 입력 자체

myInput.addEventListener('keyup', (e) => {
	console.log(e.key);
});

이벤트객체의 키 값이 출력

 

 

이벤트들의 종류는 keypress, keydown 등등 굉장히 많음

 

 

최종 프로젝트

- css로만 구현해놓은 페이지의 기능을 전부 자바스크립트로 대체

1.자바스크립트 파일 프로젝트에 추가

2.index.html에 로드

<script defer src="./script.js"></script>

defer은 자바스크립트 파일 안에 html요소들이 전부 다 로드가 되서 화면에 불러오진 다음에 코드가 실행되기 위해 defer를 씀

그렇지 않으면 아래요소들이 로드가 되기도 전에 자바스크립트 코드가 동작해서 있지도 않은 그런 요소들을 조작하려고 할 수도 있기 때문

 

html에 들어가는 요소들도 여러가지 조건들에 따라 내용들이 유동적으로 바뀔수도 있기때문에 데이터 형식으로 만들어놓은 다음, 데이터에 맞게 html요소들을 생성해서 코드 생성

 

기초강의최종프로젝트.zip

2.50MB