맛대의 블로그

AJAX & 동기식,비동기식 AJAX Asynchronous JavaScript And XML (비동기식 JavaScript와 XML) XMLHttpRequest()를 활용하여 서버와 통신 페이지 전체를 새로고침 하지 않아도 수행되는 비동기성 전체 페이지가 아닌 일부분만 업데이트 가능 서버로부터 데이터를 받고 작업을 수행 가능 XMLHttpRequest() 서버와 상호작용하기 위해 사용 새로고침 없이 데이터 받기 가능 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음 const request = new XMLHttpRequest() const URL = '~~~' request.open('GET', URL) Axios 브라우저를 위한 Promise(뒤에 서술) 기반의 클..

DOM 조작과 Event DOM, BOM DOM HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스 문서를 구조화, 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델 단순한 속성 접근, 메서드 활용 + 프로그래밍 언어적 틍성을 활용한 조작 가능 객체 window : DOM을 표현하는 창, 가장 최상위 객체(생략가능), 브라우저상 탭 한개에 해당 document : 페이지 컨텐츠의 Entry Point 역할 navigator, location, history, screen ... BOM Browser Object Model 자바스크립트가 브라우저와 소통하기 위한 모델 브라우저의 창이나 프레임을 프로그래밍적으로 제어하는 수단 DOM 조작 조작순서 선택(Select) 변..

함수 참조타입, function 타입 일급 객체 변수에 할당 가능 함수의 매개변수로 전달 가능 함수의 반환 값으로 사용 가능 함수 선언식 function add(n1, n2){ n1 + n2 } add(1,2) 함수의 이름과 함께 정의하는 방식 구성 함수의 이름 매개변수 (소괄호) 몸통 {중괄호} 호이스팅 함수 표현식 const add = function (n1, n2) { return n1 + n2 } add(1,2) 함수를 표현식 내에서 정의하는 방식 함수 이름을 생략하고 익명 함수로 정의 가능(function 뒤에 이름이 없음) 구성 함수 이름(생략 가능) 매개변수 (소괄호) 몸통 {중괄호} 호이스팅X Airbnb Style Guide 권장 JS 함수 특징 기본인자 인자 작성시 = 문자 뒤 기본 인..

문자열(String) & 배열(Arrays) & 객체(Objects) 문자열 관련 메서드 includes 특정 문자열의 존재 여부를 **참/거짓**으로 반환 const str = 'github ljm0850' str.includes('github')// true str.includes('https')// false split 문자열을 토큰 기준으로 나눈 **배열** 반환 인자가 없으면 기존 문자열을 배열에 담아 반환 const str = 'github ljm' str.split()// ['github ljm'] str.split('')// ['g','i','t','h','u','b',' ','l','j','m'] str.split(' ')// ['github', 'ljm'] replace 해당 문자열을 ..

연산자 & 조건문 & 반복문 연산자 할당 연산자 let x = 0 x += 123 console.log(x) // 123 x -=23 console.log(x) // 100 x *= 2 console.log(x) // 200 x /= 10 console.log(x) // 20 x++ console.log(x) //21 x-- console.log(x) //20 Increment(++) : 피연산자의 값을 1증가 +=1 같은 형식 권장(Airbnb Style Guide) Decrement(--) : 피연산자의 값을 1감소 -=1같은 형식 권장(Airbnb Style Guide) 비교 연산자 숫자,문자,Boolean 등을 비교하여 결과값을 boolean으로 반환 문자 연산의 경우 유니코드 값을 기준으로 계산..

문법 기초 변수와 식별자 식별자 식별자(identifier) : 변수를 구분할 수 있는 변수명 $ 또는 _로 시작 대소문자 구분, 클래스명 외에는 소문자로 시작 식별자 작성 스타일 카멜 케이스(camelCase) 변수, 객체, 함수에 사용 파스칼 케이스(PascalCase) 클래스, 생성자에 사용 대문자 스네이크 케이스(SNAKE_CASE) 상수에 사용 변수 선언 let 재할당 할 예정인 변수 선언 시 사용 변수 재선언 불가능 블록 스코프 let ljm // 선언 console.log(ljm) // undefined ljm = 0850 // 할당 console.log(ljm) // 850 ljm = 0 // 재할당 let ljm // 재선언, Error 발생 let jstest = 123 // 선언+할당..

JavaScript 브라우저 화면을 동적으로 만드는데 사용 Browser URL로 웹을 탐색하며 서버와 통신, HTML 문서나 파일을 출력하는 GUI 기반의 소프트웨어 Chrome, Firefox, Edge, Opera, Safari ... DOM(Document Object Model) 조작 문서(HTML,XML) 조작 문서를 객체로 구조화, 구조화된 구성 요소를 하나의 객체로 취급하여 다룸 key를 이용하여 접근 개발자 도구 console창 document.title = 'DOM 조작' 대략적인 구조 document html head title body h1 a 파싱(Parsing) 구문 분석, 해석 브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정 BOM(Browser Obj..