1. Ajax Asynchronous JavaScript and XML 비동기적인 웹 애플리케이션 제작을 위한 웹 개발 기법 이를 통해 웹 페이지 전체를 다시 로드하지 않고도 페이지의 일부만을 업데이트할 수 있다. 가. 이용방법 여러가지 방법으로 비동기 통신을 할 수 있다. XMLHttpRequest var xmlHttp = new XMLHttpRequest(); // XMLHttpRequest 객체를 생성함. xmlHttp.onreadystatechange = function() { // onreadystatechange 이벤트 핸들러를 작성함. // 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때 if(this.status == 200 && this.readySt..

1. XML, JSON 가. XML let parser = new DOMParser(); let xmlString = ` Some text here `; let xmlDoc = parser.parseFromString(xmlString, "text/xml"); // Get the text from the tag let elementText = xmlDoc.getElementsByTagName("element")[0].childNodes[0].nodeValue; console.log(elementText); // Outputs: "Some text here" XML을 파싱하고 값을 읽어오는 방법이다. 파싱을 통해서 DOM만 생성하면 나머지는 HTML과 동일하다. 나. JSON let jsonString =..

Array - JavaScript | MDN 다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다. developer.mozilla.org 메소드 설명 push() 배열의 끝에 요소 추가 pop() 배열의 마지막 요소 제거 shift() 배열의 첫 번째 요소 제거 unshift() 배열의 시작 부분에 요소 추가 splice() 배열의 요소를 삭제, 교체, 추가 slice() 배열의 일부를 새 배열로 반환 map() 배열의 각 요소에 함수를 적용한 새 배열 반환 filter() 함수의 테스트를 통과하는 요소로 새 배열 반환 reduce() 배열의 각 요소에 대해 함수를 실행하고, 하나의 ..

1. Location 나. location.href 웹 브라우저의 현재 URL을 가져오거나 새 URL로 페이지를 리디렉션 할 때 location.href가 사용된다. 이를 통해 사용자는 현재 페이지의 URL을 알 수 있고, 필요한 경우 다른 페이지로 이동할 수 있다. // 현재 페이지의 URL을 반환 console.log(location.href); // 새로운 페이지로 리디렉션 location.href = ''; 나. location.replace() location.replace() 메소드는 현재 문서를 새 URL로 대체한다. 이 메소드는 브라우저의 히스토리에 현재 페이지를 남기지 않는다. 즉, 뒤로 가기 버튼을 눌러도 원래 페이지로 돌아갈 수 없다. location.replace(''); 다. lo..

1. Event 사용자와 웹 페이지 간의 상호작용이 있을 때 적절한 액션을 취한다. 가. 이벤트 유형 이벤트 이름설명click사용자가 마우스 버튼을 클릭했을 때 발생dblclick사용자가 마우스 버튼을 빠르게 두 번 클릭했을 때 발생mousedown사용자가 마우스 버튼을 누르는 순간 발생mouseup사용자가 마우스 버튼을 눌렀다 뗄 때 발생mouseover마우스 포인터가 요소 위로 이동했을 때 발생mouseout마우스 포인터가 요소에서 벗어났을 때 발생mousemove마우스 포인터가 요소 위에서 움직였을 때 발생contextmenu사용자가 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 요청했을 때 발생 이벤트 이름설명keydown키를 누르는 순간 발생 (ASCII)keypress키를 누르는 순간 발생하며..

1. FOR문 for for...in for...of forEach() 4가지 방법이 있다. 가. for for (let i = 0; i < 5; i++) { console.log(i); } 특별할 것 없는 일반적인 for문이다. 나. for ... in let person = {fname:"John", lname:"Doe", age:25}; for (let prop in person) { console.log(`${prop}: ${person[prop]}`); } for...in은 객체의 모든 열거 가능한 속성을 순회한다. (이를 enumerable하다고 표현하더라…) 이는 객체의 속성 Key를 반환한다. 주로 객체의 속성을 순회할 때 사용된다. 배열에도 사용할 순 있지만 추천되지 않는다. 다. for..

1. 자료형 Javascript에서 사용할 수 있는 자료형은 Primitive type과 객체(objects)가 있다. 2. Primitive type Primitive type은 Null, Undefined, Boolean, Number, String, BigInt, Symbol이 있다. 나머지는 모두 객체(objects)다. 가. Symbol Symbol은 ES6에서 도입된 새로운 Primitive type이다. 고유하고 변경 불가능한 값을 표현하기 위해 사용된다. let sym1 = Symbol(); let sym2 = Symbol("symbol description"); let sym1 = Symbol(); : Symbol은 Symbol() 함수를 사용하여 생성한다. Symbol("symbol d..

1. Positioning 가. position .box-position { position: static; } Position 옵션 설명 static (default) Position의 기본값. 상위 요소나 다른 요소에 영향을 받지 않고 문서의 흐름에 따라 위치가 결정됩니다. relative 일반적인 문서 흐름에 따라 배치하고, 조상 요소를 기준으로 top, right, bottom, left의 값으로 위치를 조정. absolute 가장 가까운 위치 지정 조상 요소(position 값이 static이 아닌 요소)에 대해 상대적으로 위치를 결정하며, 위치 지정 조상이 없으면 document의 body에 대해 상대적으로 위치가 결정됩니다. fixed viewport(브라우저 창)를 기준으로 위치를 결정합니..