여름의 서재

💡 AJAX : Asynchronous JavaScript And XML (비동기식 JavaScipt와 XML) : JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양항 포맷을 주고 받을 수 있음. : 서버와 통신하기 위해 XMLHttpRequest 객체를 활용. : 페이지 전체를 reload를 하지 않고서도 수행되는 "비동기성" (사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음) 📌 동기 vs 비동기 - 동기식 (Synchronous) : 순차적, 직렬적 Task 수행. : 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐. (blocking) - 비동기식 (Asynchronous) : 병렬적 Task 수행. : 요청을 보낸 후 응답을 기다리지 않..

💡 배열 : 키와 속성들을 담고 있는 참조 타입의 객체. 배열의 길이는 array.length로 접근 가능. ex) [1, 2, 3, 4, 5] 📌 배열 관련 메서드 - array.reverse() : 워본 배열의 요소들의 순서를 반대로 정렬 - array.push(요소) : 배열의 가장 뒤에 요소 추가 - arrays.pop() : 배열의 마지막 요소 제거 - arrays.unshift(요소) : 배열의 가장 앞에 요소 추가 - arrays.shift() : 배열의 첫번째 요소 제거 - array.includes(value) : 배열에 특정 값이 존재하는지 판별 후 참 또는 거짓 반환 - array.indexOf(value) : 배열에 특정 값이 존재하는지 확인 후 가장 첫번째로 찾은 요소의 인덱스 반..

💡 함수 : 참조 타입 중 하나로 function 타입에 속함. 일급 객체에 해당. - 일급 객체 변수에 할당 가능 함수의 매게 변수로 전달 가능 함수의 반환 값으로 사용 가능 📌 함수 선언식 : 함수의 이름과 함께 정의하는 방식. 3가지 부분으로 구성 (함수의 이름, 매개변수, 몸통) : 호이스팅 가능 function add(numOne, numTwo) { return numOne + numTwo } const result = add(1, 2) console.log(result) // 3 📌 함수 표현식 : 함수를 표현식 내에서 정의하는 방식. 3가지 부분으로 구성 (함수의 이름(생략 가능), 매개변수, 몸통) : 호이스팅 불가 const add = function(numOne, numTwo) { re..

💡 조건문 📌 'if' statement : 조건 표현식의 결과값을 boolean 타입으로 변환 후 참/거짓으로 판단. 블록 스코프 생성. const num = 3 if (num > 2) { console.log('크다') } else if (num < 2) { console.log('작다') } else { console.log('같다') } 📌 'switch' statement : 조건 표현식의 결과값이 어느값(case)에 해당하는지 판별. 블록 스코프 생성. const nation = 'Korea' switch(nation) { case 'Korea': { console.log('안녕') break } case 'France': { console.log('Bonjour') break } defaul..

💡 식별자 : 변수를 구분할 수 있는 변수명, 반드시 문자, 달러 또는 밑줄(_)로 시작 📌 식별자 작성 스타일 카멜 케이스(camelCase) : 두번째 단어의 첫글자부터 대문자. 변수, 객체, 함수에 사용 ex) formList, userInfo 파스칼 케이스(PascalCase) : 모든 단어의 첫 번째 글자를 대문자로 작성. 클래스, 생성자에 사용 ex) User 대문자 스네이크 케이스(SNAKE_CASE) : 모든 단어 재문자 작성, 단더 사이에 언더스코어 삽입. 상수에 사용 ex) API_KEY 💡 변수 선언 키워드 📌 let 재할당할수 있는 변수 선언 시 사용 변수 재선언 불가능 블록 스코프 📌 const 재할당할 수 없는 변수 선언 시 사용 변수 재선언 불가능 블록 스코프 📌 var var..

💡 왜 JavaScript를 써야할까? : 브라우저 화면을 '동적'으로 만들기 위함. 브라우저를 조작할 수 있는 유일한 언어. 💡 DOM (Document Object Model) : HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스 : 문서를 구조화하고 구조화된 각 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델 -> DOM 조작 순서 1. 선택 2. 변경 📌 DOM 선택 관련 메서드 document.querySelector(selector) : 제공한 선택자와 일치하는 element 하나 선택 (없다면 null) document.querySelectorAll(selector) : 제공한 선택자와 일치하는 여러 element를 선택 (nodeList를 반환) docum..