DOMContentLoaded를 사용하여 자바스크립트로 HTML 문서를 조작할 수 있습니다. document.body.innterHTML도 마찬가지로 HTML 문서를 조작할 수 있지만 body 안에 넣어줘야 실행되는 반면 DOMContentLoaded는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행해 body 태그 이전에 넣어줘도 문제 없이 실행됩니다. document.addEventListener('DOMContentLoaded',()=>{ }) HTML 문서 객체를 가져오기 위해서 document. 을 사용하면 됩니다. (head, body, title ...) 만약 head 안에 다른 태그에 접근하고 싶다면 querySeletor, querySeletorAll을 사용해야 합니다.querySelet..

객체란 추상적인 의미로 이름과 값으로 이루어져 있습니다. 배열에서는 인덱스와 요소로 이루어져 있었다면 객체는 키와 값으로 이르어져 있습니다. const product = { 제품명 : '망고', 유형 : '당절임' } 배열의 인덱스는 객체의 키 값과 유사합니다. 따라서 객체의 요소에 접근할 때는 product['제품명'] product.제품명 위와 같이 객체[키 값] 또는 객체.키값 으로 접근합니다. 객체에는 속성과 메소드가 있습니다. 쉽게 설명하면 속성은 정적인 특징, 메소드는 동적인 특징으로 볼 수 있습니다. 예를 들어 자동차라는 객체에서 자동차의 주인, 색상, 차종 등은 속성으로, 자동차가 출발, 정지하는 것은 메소드로 생각할 수 있습니다. 객체에서 this라는 키워드를 사용하기도 합니다. this..

함수는 코드의 집합을 나타내는 자료형입니다. 함수를 쓰게 되면 반복 작업을 피할 수 있고, 가독성이 높아지고, 유지보수가 쉬워진다는 장점이 있습니다. 이름이 붙어있지 않은 익명 함수는 아래와 같이 활용합니다. function(){} 이름이 있는 선언적 함수는 아래와 같이 활용합니다. function 함수(){} 함수에는 매개변수와 리턴값을 넣어줄 수 있습니다. 매개변수는 함수에 넣는 input을, 리턴값은 결과로 나오는 output으로 생각할 수 있습니다. function 함수(매개변수, 매개변수1, 매개변수2 •••) { return 리턴값 } 윤년 예제 숫자 더하기 예제 최솟값 예제 나머지 매개변수(...)를 사용하면 배열이 아니라 숫자들만 입력해도 배열로 들어오게 됩니다. 만약 매개변수와 나머지 매..

배열은 여러 자료를 묶어서 활용할 수 있는 특수한 자료입니다! 배열은 변수 = [요소1, 요소2, 요소3, 요소4 •••] 로 선언해 사용할 수 있습니다. 배열 요소에 접근하기 위해서는 배열[인덱스] 로 접근할 수 있습니다. 이때 인덱스는 0부터 시작합니다! 배열 요소의 개수는 배열.length 로 접근할 수 있습니다. 배열에 요소를 추가하고 싶을 때는 배열.push(요소)를 사용하거나 배열[인덱스] = '요소' 를 사용할 수 있습니다. push는 맨 뒤에 요소가 들어가는 반면 인덱스를 사용하게 되면 자신이 선택한 인덱스에 배열이 들어가게 됩니다. 만약 특정 위치에 요소를 넣고 싶으면 배열.splice(인덱스, 0, 요소) 를 사용하면 됩니다. 배열의 요소를 제거하고 싶을 때는 배열.splice(인덱스,..

조건문은 조건에 따라서 코드를 실행하거나 실행하지 않을 때 사용하는 구문입니다! 1주차에서 배웠던 비교 연산자, 논리 연산자를 사용해 조건문을 만들어 봅시다! if(불 값이 나오는 표현식) { 불 값이 참일 때 실행할 문장 } 책에 나온대로 오전과 오후를 구분하는 예제를 만들어봅시다! if 값이 참이면 오전입니다, 거짓이면 오후입니다를 출력하는게 더 편하지 않을까요? if문을 두 개 쓰려니 코드가 영.. 그래서 우리에겐 if~else문이 있습니다!! if(불 값이 나오는 표현식) { 불 값이 참일 때 실행할 문장 } else { 불 값이 거짓일 때 실행할 문장 } if~else문을 사용해 위의 오전과 오후를 구분하는 예제를 만들면 코드가 훨씬 간결해지고 보기도 쉽죠? 제가 중괄호를 안 적은 이유는 실행할..

공부한 내용 정리 렛추고! Chapter 1 자바스크립트는 웹 동적 구현, 웹 서버 (Node.js) 개발, 모바일•데스크톱 웹 개발, 데이터베이스 관리 등의 역할을 하는 프로그래밍 언어입니다! Chapter 1-1 마무리 1. 인터넷을 돌아다니면서 보았던 쉽게 사용할 수 있고, 기능이 많다고 느꼈던 웹 사이트를 5개 정도 적어 보세요. ① 유튜브 ② 깃허브 ③ 페이스북 ④ 노션 ⑤ 인스타그램 2. Statcounter에서 책을 보고 있는 현재 시점의 웹 브라우저 점유율을 확인해보세요. 자바스크립트의 개발환경에는 텍스트 에디터인 비쥬얼 스튜디오와 코드 실행기인 크롬이 필요합니다. 설치를 했다면 크롬 개발자 도구에서 console.log를 사용해 이와 같이 실행시킬 수 있습니다! 그럼 HTML 파일을 생성..