JavaScript와 XML을 이용한 비동기적 정보 교환 기법· 브라우저의 XMLHttpRequest를 이용해 전체 페이지를 새로 가져오지 않고도 페이지 일부만을 변경할 수 있도록 JavaScript를 실행해 서버에 데이터만 별도로 요청하는 기법 · HTTP 프로토콜을 이용한 비동기 통신이며, 브라우저는 정적 HTML 파일과 CSS 파일, 데이터를 어떻게 요청하면 되는지를 설명한 JavaScript를 통해 HTML, CSS를 이용해 골격을 먼저 형성하고 Ajax 실행부가 담긴 JavaScript 영역을 실행하여 데이터를 별도로 가져와 페이지를 로딩함Ajax 설정값종류설명urlAjax 요청할 데이터가 매핑된 url typeHTTP 통신의 종류를 설정 (기본값 : get)get, post, delete, p..

이벤트 버블링한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 것이 최상단의 부모 요소를 만날 때까지 반복되는 현상  이벤트 캡처링 버블링과의 반대 개념으로, 최상위 태그에서 해당 태그를 찾아 내려가는 이벤트 전파 방지let clickEvent = (event) => { event.stopPropagation();}; event.stopPropagation()을 사용하여 해당 타깃의 이벤트만 발생하도록 제어할 수 있다.이벤트 위임이벤트 발생 시 이벤트 버블링에 의해 document 레벨까지 버블링되어 올라가는데, 이를 활용하여 자식 엘리먼트 하나하나에 모든 이벤트를 주는 것이 아닌 부모에게만 이벤트를 위임하여 자식 엘리먼트를 제어하는 방법 장점1. 동..

jQuery특징설명JS의 라이브러리DOM 탐색이나 이벤트, 애니메이션, ajax 등을 활용할 때 유용하게 사용JS보다 적은 양의 코드로 수행css의 선택자처럼 선택자를 사용하여 DOM 요소의 검색, 선택 및 조작을 단순화크로스 브라우저 지원브라우저별로 처리 방법이 다른 이벤트 처리나 함수들의 문장을 하나의 표현으로 사용 가능Vanila JS와 jQuery종류설명Vanila JS높은 수준의 프로그래밍 언어jQueryJS를 사용하여 수행되는 작업을 단순화하도록 설계된 오픈 소스 기반의 JS 라이브러window.onload 와 $(document).ready window.onload $(document).ready 페이지의 모든 요소들이 로드된 이후에 호출DOM이 로드된 시점에 호출한 페이지에서 하나의 wi..

동기와 비동기 종류설명동기서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행비동기서버에서 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행// 동기console.log(1);console.log(2);console.log(3);// 비동기console.log(1);setTimeout(() => { console.log(2);}, 2000)console.log(3);* 참고 : 비동기적 코드의 실행 결과는 동기적 코드가 전부 실행되고 나서 값을 반환참고 블로그 : 동기, 비동기 처리 (velog.io)이벤트 루프브라우저 동작을 제어하는 관리자로, setTimeout이나 fetch와 같은 비동기 자바스크립트 코드를 브라우저 Web APls에게 맡기고, 백그라운드 작업이 끝난 결과를 콜백 함수..

클로저주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합으로, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공한다. JavaScript에서 함수가 생성될 때마다 생성된다.참고 블로그 : 클로저 - JavaScript | MDN (mozilla.org) 오버로딩과 오버라이딩오버로딩은 자바스크립트에서 지원하지 않는 개념이며, 오버라이딩은 상속받은 부모의 메소드를 재정의하는 것이다. 자바와는 매개변수가 자유롭고 리턴값의 자료형도 자유롭다는 차이점이 있다.private 멤버 변수자바의 접근지정자 private과 비슷한 의미class Class01 { #name; // private 멤버 변수 age; // public 멤버 변수}상속 객체지향 프로그래밍의 핵심 개념으로 어떤 객체..

bootstrap웹사이트를 쉽게 만들 수 있도록 미리 만들어 둔 CSS를 적용할 수 있는 프레임워크 BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com정규표현식문자열에서 특정 내용을 찾거나 대체 또는 발췌하는 데 사용// 자바 스크립트 사용 예제 (전화번호)const regwxp = /\d{3}-\d{4}-\d{4}/;이전에 정리해 둔 게시글 첨부 JAVA 20디버깅..

함수(Function) 작성하기// 일반적function 함수이름([매개변수1, 매개변수2, ...]) { 함수가 호출되었을 때 실행하고자 하는 실행문; [return 반환값;]}// 함수 리터럴 (함수 표현식)let 변수 = function() { 함수가 호출되었을 때 실행하고자 하는 실행문; [return 반환값;]}// 생성자let 변수 = new Function() { 함수가 호출되었을 때 실행하고자 하는 실행문; [return 반환값;]}사용자 함수 활용 문제주어진 문자열에서 숫자를 추출하여 그 합을 반환하는 함수를 작성function exam(a1) { let result = 0; let a2 = [...a1]; for (i = 0; i 0) { ..

var, let, const자바스크립트의 변수 선언 방식종류특징변수 선언 방식스코프(Scope)var중복 선언 가능, 재할당 가능함수레벨 스코프(Funcion level scope)let중복 선언 불가, 재할당 가능블록레벨 스코프(Block level scope)const중복 선언 불가, 재할당 불가html에서 javascript 사용하기구구단 출력조건 1) table을 사용 (border = 1)조건 2) 각 단은 행으로 구분조건 3) 짝수단은 노란 배경 (inline 방식, style 적용)상호작용종류설명prompt사용자에게 보여 줄 문자열 : 입력초기값 : 0값을 입력받는 메시지 창 출력confirm사용자에게 보여 줄 문자열 : yes/no확인 및 취소 버튼이 있는 메시지 창 출alert사용자가 확..