fullstack-study

DOM 선택, 출력, 속성,탐색 # querySelector("선택자") , querySelectorAll("선택 자명") 설mdnquerySelector("선택자")해당 선택자를 만족하는 요소하나반환바로가기querySelectorAll("선택자명")해당 선택자를 만족하는 모든요소반환바로가기선택자 바로가기innerHTML 바로가기innerText 바로가기textContent 바로가기 # document.querySelector("선택자")let element = parentNode.querySelector(selector); # document.querySelectorAll("선택 자명")let elementList = parentNode.querySelectorAll(selector);let no..

# DOM 문법 문서 객체 모델(DOM) getElementById getElementsByName getElementsByTagName getElementsByClassName # 문서 객체 모델(DOM)이란 문서 객체 모델(The Document Object Model, 이하 DOM) HTML 문서를 로드한 후, 해당 문서에 대한 모델을 메모리에 생성합니다 이때 모델은 객체의 트리로 구성되는데, 이것을 DOM tree라 합니다. 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 웹 문서를 구조화한 DOM 트리(DOM tree)와 이벤트 등을 정리해 놓은 표준 DOM은 HTML문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연..

# Date객체속성, 메소드설명mdnDate1970년 1월 1일 자정과의 시간 차이를 밀리초로 나타내는 정수 값바로가기getFullYear()주어진 현지 시간 기준 연도를 반환바로가기getMonth()월은 0부터 시작바로가기getDate()주어진 날짜의 현지 시간 기준 일을 반환바로가기getDay()주어진 날짜의 현지 시간 기준 요일을 반환바로가기getHours()주어진 날짜의 현지 시간 기준 시를 반환바로가기getMinutes()Date 인스턴스의 분을 현지 시간 기준으로 반환바로가기getSeconds()초값을 현지 시간에 맞춰 반환바로가기toTimeString()시간을 문자열로 반환바로가기toDateString()날짜 부분을 문자열로 반환바로가기 - 년, 월, 일const now = new Date(..

Array 배열객체 속성속성설명mdnlength배열의 개수바로가기 메서드메소드설명mdnpush()배열의 마지막에 추가하고 배열의 총길이를 반환바로가기pop()배열의 가장 마지막 요소를 제거하고, 제거된 요소를 반환바로가기shift()배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환바로가기unshift()배열의 가장 앞에 추가하고, 배열의 총 길이를 반환바로가기reverse()배열 요소의 순서를 전부 반대로 교체바로가기sort()배열 요소들을 알파벳 순서에 따라 정렬바로가기toString()배열의 모든 요소를 하나의 문자열로 반환바로가기slice()시작부터 종료 바로 앞까지의 모든 배열 요소를 추출하여 새로운 배열을 반환바로가기splice()배열 요소를 제거하거나 새로운 배열 요소를 추가하여 ..

# String  속성속성설명mdnlength개수바로가기 메드메소드설명mdncharAt(position)position에 위치하는 문자를 리턴바로가기charCodeAt(position)position에 위치하는 문자의 유니코드 번호를 리턴바로가기concat(args)매개변수로 입력한 문자열을 이어 리턴바로가기indexOf(searchString, posiiton)앞에서부터 일치하는 문자열의 위치를 리턴바로가기lastIndexOf(searchString, position)뒤에서부터 일치하는 문자열의 위치를 리턴바로가기match(regExp)문자열 안에 regExp가 있는지 확인바로가기replace(regExp,replacement)regExp를 replacement로 바꾼후 리턴바로가기search(regE..

원시(Primitive) 타입, 참조(Reference) 타입 자바스크립은 크게 원시타입과 참조타입 2가지로 나눕니다. 원시타입은 number, bigint, string, boolean, null, undefined, symbol이고 값은 변수에 직접 저장됩니다. 참조타입은 array , funciton , object 등이고 값은 객체나 배열이 저장된 메모리 주소를 가리키는 포인터입니다. 변수에 할당된 값은 메모리 주소이며 이 주소를 통해서 객체나 배열에 접근할 수 있습니다. 객체란 자바스크립트는 객체(object) 기반의 스크립트 언어이며 원시타입을 제외한 나머지들은( 함수, 배열 등 )은 모두 객체입니다. 객체는 크기 두 가지 JS Object (javascript object )와 json()으..

# 템플릿 리터널, 함수, 내장함수 # 템플릿 리터널 백틱(`)을 사용let test='hi';let output = `철수 ${hi}`console.log( output ) 함수 생성방법파라미터정의하기반환값익명함수즉시실행함수 # 함수함수는 하나의 단위로 실행할 수 있도록 명령문을 그룹 한 것입니다.동일한 코드가 여러 곳에서 반복되는 것을 방지하려면 함수를 사용하여 해당 코드를 래핑하고 재사용할 수 있습니다. 1) 함수 생성하는 방법함수 선언식함수 표현식 함수 정의function 함수이름() { 실행문;} 함수 호출함수는 정의 후 함수를 호출해야 실행됩니다.함수명(); 함수 선언식함수는 funciton 예약어와 함수이름 abc 함수 블록{}으로 되어 있습니다.function abc() { consol..

for문 while문 do ~ while문break문 continue문 + 반복문종류설명예for지정된 횟수만큼 반복for (let i = 0; i while조건이 참인 동안 반복while (count do...while일단 한번 실행하고 조건을 검사do { count++; } while (count for...in객체의 속성(키)을 반복for (let key in obj) { console.log(key); }for...of반복 가능한 객체(배열 등)의 값을 반복for (let item of arr) { console.log(item); } + 분기문종류설명예break반복문이나 switch를 즉시 종료for (...) { if (x > 5) break; }continue이번 반복만 건너뛰고 다음 반복..

if문if ~ else문if ~ else if ~ else if ~ else 문 삼항연산자switch ~ case # 단일 if문 기본적인 조건문은 if문입니다. if문은 만약에 ~ 해라를 의미 합니다. if (조건) { 코드;}조건이 만족됐을 때 실행시킬 코드가 { } 코드 블록이라고 합니다.만약에 조건이 true 가 된다면 코드가 실행되는 것이고, false 가 된다면 코드가 실행되지고 {} 밖의 코드로 진행 ex1)const a = 1;if (a ex2) let age = 18; // 변수를 age 다음과 같이 선언하고 초기화합니다 18. if (age >= 18) { console.log('가입 가능합니다.');}age >= 18이기 때문에 명령문 true내부의 코드가 if실행되어 ..

# 연산자 산술연산자관계(비교)연산자대입연산자논리연산자증감연산자       1) 산술 연산자+ , - , * , / , % 덧셈 연산자(+)더하기 연산자는 두 값의 합을 반환합니다. 예를 들어, 다음은 더하기 연산자를 사용하여 두 숫자의 합을 계산합니다.let sum = 10 + 20;console.log(sum); // 30 빼기 연산자(-)빼기 연산자( -)는 한 숫자에서 다른 숫자를 뺍니다.let result = 30 - 10;console.log(result); // 20 곱셈 연산자(*) 곱셈 연산자는 두 숫자를 곱하여 단일 값을 반환합니다. let result = 2 * 3;console.log(result); 나누기 연산자(/)나누기 연산자는 첫 번째 값을 두 번째 값으로 나눕니다let re..