찐망고 Frontend Lab / JavaScript자료 추가

 

안녕하세요 찐망고 입니다.

 

웹개발의 가장 기본 문법인 자바스크립트 관련하여 

블로그에 쓰여진 내용과 실습한 내용을 정리하여 인터렉티브한 사이트를 만들었습니다.

 

순서대로 업데이트 중이고

 

01. JavaScript 역사

• JavaScript의 탄생
• 브라우저 전쟁
• DOM과 BOM
• 모던 JavaScript

02. JavaScript 변수

• 변수란? (선언, 할당, 참조)
• var / let / const의 완벽한 차이
• 중복선언, 재할당, 스코프

03. JavaScript 데이터타입

• String (문자열)
• Number (숫자)
• Boolean (불린)
• null vs undefined
• typeof 연산자

04. JavaScript 연산자

• 산술 연산자 (+, -, *, /)
• 문자열 연결
• 대입 연산자 (+=, -=, etc)
• 증감 연산자 (++, --)
• 비교 연산자 (==, ===)
• 논리 연산자 (&&, ||, !)
• 삼항 조건 연산자
• 우선순위

05. JavaScript 스코프 & 호이스팅

• 전역 스코프 vs 함수 스코프
• 블록 스코프 (let, const)
• 스코프 체인
• 호이스팅이란?
• var / let / const 호이스팅 차이

06. JavaScript 조건문 

• if문 (조건이 참이면 실행)  
• if...else문 (참/거짓 분기)
• else if (여러 조건)
• switch문 (값 비교)
• if vs switch (사용 시기)

07. JavaScript 반복문  

• while문 (조건 기반 반복)
• for문 (가장 많이 쓰는 반복)
• break와 continue
• forEach
• for...of (ES6 간결한 반복)
• 실전 예시 (구구단, 중첩)

08. JavaScript DOM 조작  

• 요소 선택 (getElementById, querySelector)
• 요소 생성/추가/제거 createElement, appendChild, remove (할 일 추가/삭제 실습)
• 텍스트/HTML 조작 textContent, innerHTML
• 클래스 조작 classList.add, remove, toggle, contains
• 스타일 조작 style.color, style.fontSize 등
• 이벤트 처리 addEventListener (클릭 카운터 실습)
• 요소 관계 parentElement, children, siblings

09. JavaScript 내장 객체 

• Array 메서드 (length, indexOf)
• String 메서드 (substring, split)
• Math 객체 (Math.floor, Math.max)
• Date 객체 (날짜/시간)
• Object 메서드 (keys, values)

10. JavaScript 배열

• 배열 기초 (생성, 접근)
• Array 메서드 (push, pop, shift, unshift)
• 고차 함수 (map, filter, reduce)
•  find, some, every
• 배열 복사 (slice, spread operator)

11. JavaScript 함수

• 함수 선언 vs 함수 표현식
• 매개변수와 반환값
• 클로저 (closure)
• 콜백 함수
• 고차 함수

 

 

 

열한개의 카테고리를 가지고 있습니다. 

 

저도 과거 자바스크립트를 처음 배웠을 때의 그 막막함을 아직도 기억하는데요.

그과거가 벌써 20년도 더 된 것 같네요.

저는 불행인지 다행인지  플래시라는 프로그램을 시작하면서 자연스럽게 액션스크립트를 쓰다보니

자바스크립트 문법을 자연스럽게 받아들였는데 

아무래도 맨땅에 해딩하는 초보자는 어려울 수 있습니다.

현재 JS도 클로드코드나 codex를 사용하면 직접 짤 필요가 없을 정도의 세상이 와서

코드를 한줄 한줄 무작적 외우는 노동은 끝났다 봅니다. 

그럼에도 불구하고 기초문법정도는 알고 검수하는게 좋을 거라 생각합니다.

 

사이트링크입니다

https://jjinmanggo.github.io/frontend-lecture/