ES5 ▶ XMLHttpRequest, fetch(), ajax(), Axois 등 XMLHttpRequest: ajax 프로그램에 사용할 수 있는 객체 AJAX (비동기 통신) Asynchronous Javascript ans XML 웹페이지의 이동 없이 필요한 데이터만 전송하는 기술 ex) 구글맵에서 특정 지역을 클릭하면, 주소는 변하지만 화면이 reload 되지는 않음 비동기: 순차적으로 진행하지 않음 = 함수가 끝날때까지 기다리지 않음 ↔ 동기: 순차적으로 실행 (지금까지 배웠던 함수) API Application Programming Interface 기능을 사용할 때 너무 어렵고, 많은 것을 해야 하기 때문에 사용방법을 정의해서 줄테니 너는 그대로만 사용해라~~ fetch API 비동기 방식을..
BOM 브라우저 객체 모델(Browser Object Model) = 내장객체 window, location, history, document 등 포함 2022.12.29 - [클라이언트/JavaScript] - [JavaScript] 이벤트 핸들러, this, BOM, DOM [JavaScript] 이벤트 핸들러, this, BOM, DOM 이벤트 핸들러 화면에서 클릭이나, 동작시 발생하는 동적인 기능 이벤트: 사용자의 동작 / 핸들러: 함수 이벤트 앞에 on 붙음 태그 - 스크립트의 이벤트 연결 방식: 인라인 이벤트 모델 / 기본 이 j-won950101.tistory.com window 객체 웹브라우저에 대한 전반적인 정보 취득이나 제어에 관련된 객체 window.open() - 새 창을 띄워주는 ..
form 객체 document 객체의 하위 객체 중 하나이므로 유일하게 name 속성으로 선택 가능 document.폼name.요소명 document.body; = document.querySelector("body"); 속성값 설명 value input, textarea 요소의 value값 반환 checked checkbox, radio 체크되어 있으면 true, 아니면 false disabled 요소가 활성화 상태이면 false, 비활성화 상태이면 true length 요소의 개수 focus() 요소의 포커스 맞춤 blur() 요소의 포커스 없애줌 submit() form의 값을 전송 javascript로 form 전송 가능 reset() form의 값을 초기화 "input[ type='submit'..
이벤트 객체 모든 이벤트에서 이벤트 객체 사용 가능 (꼭 다중 이벤트 상황이 아니어도 가능) 이벤트 발생시 실행되는 함수의 (인자값, 첫번째 매개변수)로 현재 실행되는 event 객체를 넣어줌 이벤트 객체의 기능 stopPropagation() 이벤트 전파를 막음 (버블링 중단하기) 굳이 사용x target 이벤트를 적용한 타겟 속성 클릭한 대상, 선택한 것 currentTarget 실제 이벤트가 걸려있는 타겟 속성 부모의 위치 preventDefault() 태그의 고유 이벤트 제거 a, submit 태그 같은 경우 모달창 띄우고 싶을 때 새로운 페이지로 안 넘어가게끔 이벤트 전파 (a.k.a 상속) 부모에 하나의 이벤트만 걸어 놓으면, 모든 이벤트가 동일하게 자식으로 위임 li에 일일히 이..
Node element = node = tag(태그) console.dir(태그); ▶ 어떤 것을 사용할 수 있는지 나타냄 Element 들어간 키워드가 text제외 순수한 태그만 선택해줌 node(tag) 삭제 remove() removeChild(삭제할 자식 노드 선택) 자식 태그의 인덱스 번호를 지울 때 사용 더보기 step 1. 사용자 이름과 할일 목록 만들기 step1 input은 지우는게 아니라 display를 제어하세요 할일 목록 만들기 확인 확인 step 2. 할일 목록 삭제/전체삭제 및 위, 아래 이동 인라인 이벤트 - remove, up, down 함수를 만듦(매개변수 this 사용) 전체삭제시 ul을 지워버리면 다시 목록을 쓸 수 없으므로 .list li를 삭제해야 함 step1 in..
Node element = node = tag(태그) console.dir(태그); ▶ 어떤 것을 사용할 수 있는지 나타냄 node css 변경 style 속성 이용 (속성은 점(.)으로 가져옴/ 쿼리셀렉터로 가져오는 것은 태그) 카멜표기법 따름 (text-align ▶ textAlign) style에 전달되는 값을 문자열로 작성 노드.style.css속성 = 값 node 생성, 추가 createElement() 태그(요소)를 생성 ()안에 문자열 들어감 appendChild() 요소를 부모 자식 관계로 넣어줌, 어떤 태그의 자식요소를 마지막에 추가 태그 요소를 생성해서 넣어줌 append 마지막에 추가하겠다 추가 innerHTML = 문자열 요소를 HTML의 방식으로 생성 직접 문자열로 집어 넣음 버튼..
이벤트 핸들러 화면에서 클릭이나, 동작시 발생하는 동적인 기능 이벤트: 사용자의 동작 / 핸들러: 함수 이벤트 앞에 on 붙음 태그 - 스크립트의 이벤트 연결 방식: 인라인 이벤트 모델 / 기본 이벤트 모델 / 표준 이벤트 모델 인라인 이벤트 모델 가장 많이 사용 태그에 이벤트를 직접 적음 장점: 동일한 함수에 여러 이벤트를 걸어줄 수 있음 ex) 여러 버튼에 check() 함수을 걸어줄 수 있음 단점: 너무 길어지고, 재활용 불가능 어떤 이벤트에 대한 동작인지 확인: this this 키워드 더보기 함수, 아무것도 없는 상태에서의 this ▶ window라는 최상위 객체 이벤트에서의 this ▶ 태그 자신 같은 행동을 하는 이벤트를 실행하는 경우 하나의 함수로 작동할 때 this를 매개변수에 넣어서 현..
함수 java script에서 함수는 1급 최상위 함수 객체지향 프로그래밍 언어에서 훨씬 더 많은 기능을 함 사용자 정의 함수 - 선언적 함수 & 익명 함수 선언적 함수 이름 有 접근제어자 X return 값이 없을 수도 있음 return 있으면 return 값 반환 return 없으면 자동으로 undefined 반환 (자바의 void 개념) 매개변수 없을수도 있음 hoisting(호이스팅): 함수 선언 이전에 호출해도 에러 발생 X (선언 이전 호출 해도 가능) 함수를 변수에 저장 가능 함수를 a에 저장할 때, 변수 선언 이후 호출 가능 - a에 저장하면서 호출X 익명 함수 이름 無 변수에 함수 데이터를 저장하여 변수를 함수처럼 사용 하도록 만들어 줌 hoisting(호이스팅) 사용 불가: 변수 선언 ..
JavaScript 자바 프로토타입(기준이 되는 객체) 기반 객체지향 언어 + 함수형 언어 데이터 통신, 외부 데이터(카카오 지도 등) 가져올 때 사용 플랫폼에 독립적이고, 코드가 직접 html 문서에 삽입되어 브라우저에서 html 파일을 읽을 때 같이 해석되고 실행됨 클라이언트에서만 실행되기 때문에 정보를 서버에 보낼 필요 없이 처리 가능 바로 화면에 나타나는 것을 볼 수 있음 변수들의 타입에 있어 차이 x 순수 스크립트의 사용을 선호 → java보다 확장성이 뛰어남 (유연함) 사용방법이 다양 인터프리터 언어: 어플리케이션이 실행되는 동안 라인 단위로 해석되어 실행되는 언어 한 줄씩 치면 바로 결과가 들어옴 ( ↔ java는 컴파일 언어) // script 언어는 ..