pogun 코딩 공부 저장소

1. XMLHttpRequest를 이용한 JSON 데이터 요청 및 처리 let xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { jsonProc(this); }};xhttp.open("GET", "./client.json", true);xhttp.send();function jsonProc(xhttp) { let json = JSON.parse(xhttp.responseText); let str = JSON.stringify(json); document.getElementById("de..

1. JSON이란?: JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하는 데 사용되는 경량 데이터 형식 : 주로 웹 애플리케이션에서 서버와 클라이언트 간의 데이터 교환을 위해 사용JSON 특징- key-value 형식으로 데이터를 저장 (JavaScript 객체와 유사) - 문자열(" "), 숫자, 불리언(true, false), 배열([ ]), 객체({ })를 지원 - 가독성이 좋고, 데이터 구조가 단순하여 사용하기 편리함 - 언어에 독립적이며 대부분의 프로그래밍 언어에서 지원2. JSON과 배열 비교배열 방식let array = ["홍길동", 24, 172.1];console.log(array[0]); // 홍길동console.log(array[1]); // 2..

1. 코드 분석 (XMLHttpRequest 사용) 1) XMLHttpRequest로 XML 데이터 요청let xhttp = new XMLHttpRequest(); // AJAX 객체 생성xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // nodeValue(this); // 노드 값을 가져오는 함수 childNode(this); // 태그명을 가져오는 함수 }};xhttp.open("GET", "./client.xml", true);xhttp.send();: XMLHttpRequest를 사용하여 "client.xml" 데이터를 가져온다.: 응답이 정상적..

1. AJAX란?: 웹 페이지를 새로고침하지 않고 서버와 데이터를 주고받는 기술이다.: XMLHttpRequest 또는 fetch()를 사용하여 데이터를 가져온다.: JSON, XML, HTML, 텍스트 데이터를 서버에서 받아와 웹 페이지에 반영할 수 있다./* readyState 상태 값: 0 : 요청 초기화 (open() 호출 전) 1 : 서버와 연결됨 (open() 호출 후) 2 : 요청이 서버에 수락됨 3 : 서버가 요청을 처리 중 4 : 서버가 응답 완료 HTTP 상태 코드: 200 : 성공 403 : 접근 금지 404 : 파일을 찾을 수 없음 500 : 서버 내부 오류*/알아두면 유용함! XMLHttpRequest vs fetch() ..

1. XML 데이터란? : XML(eXtensible Markup Language)은 데이터를 구조화하여 저장하고 전달하는 포맷이다.: 예를 들어, 도서 정보를 XML로 저장하면 다음과 같다. 탈무드 man 2012/03/14 이솝이야기 woman 2015/02/18 : 여기서 는 루트 요소이고, 각 태그 안에 , , 등의 정보가 포함된다. 2. JavaScript에서 XML 데이터 파싱 : JavaScript에서 XML을 다루려면 DOMParser를 사용하여 XML 문자열을 파싱해야 한다.3. 코드 설명3-1. XML 데이터를 문자열로 저장let xmlString = ` ... `;: XML 데이터..

1. XML이란?: XML(eXtensible Markup Language)은 데이터를 구조화하고 저장하기 위한 사용자 정의 마크업 언어이다.: 즉, 데이터를 표현하는데 초점을 맞춘 언어로, 웹 서비스, 설정 파일, 데이터 공유 등에 사용된다.  XML의 주요 특징 : 확장성(eXtensible) → 태그를 사용자가 직접 정의할 수 있다. : 데이터 저장 및 교환 → 다른 시스템 간 데이터 공유에 최적화HTML과의 차이점    HTML → 웹 페이지를 렌더링하기 위한 언어 (미리 정해진 태그 사용)     XML → 데이터를 구조화하고 전달하는 데 초점 (사용자 정의 태그 가능)2. XML 문법 구조 기본 XML 예제 홍길동 24 서울시 ..

1. 텍스트 점멸 효과 만들기: setInterval()을 사용하면 일정한 시간 간격마다 특정 동작을 반복할 수 있다. 시간(timer)에 따라서 점멸 설명:: setInterval(myfunc, 500); → 0.5초마다 myfunc() 함수가 실행됨. : myfunc() 함수는 "환영합니다"라는 텍스트를 번갈아가며 표시/숨김 처리한다.: document.myform.myFrmMsg.value를 이용해 input 필드 값을 조작한다. 1-1. querySelector 사용 let flg = false;setInterval(() => { document.querySelector("#time input").value = flg ? "환영합니다" : ""; flg = !flg;}, 500);..

1. DOM (Document Object Model) 이란?: DOM은 웹 페이지의 HTML 요소들을 객체(Object) 형태로 표현하여 JavaScript에서 조작할 수 있도록 해주는 모델: DOM을 사용하면 HTML 태그를 추가하거나, 삭제하거나, 수정할 수 있다.기능전통적인 방식최신 방식 텍스트 가져오기 element.childNodes[0].nodeValue element.textContent 선택된 값 가져오기 element.childNodes[index].text element.value 요소 추가 createElement() + appendChild() new Option() 사용 가능 요소 삭제 removeChild() remove() 사용 가능 모든 요소 가져오기 getElem..

1. onload - 페이지 로딩 완료 시 실행 : onload 이벤트는 페이지가 완전히 로드된 후 실행 : body 태그에 적용하면 HTML, CSS, JavaScript가 모두 로드된 후 실행1-1. 최신 문법 (DOMContentLoaded 사용) : window.onload보다는 DOMContentLoaded 이벤트를 사용하는 것이 더 적절하다.document.addEventListener("DOMContentLoaded", () => { console.log('onload 실행');});2. onblur - 입력 필드에서 포커스가 벗어날 때 실행 : 사용자가 입력 필드에서 다른 곳을 클릭해 포커스를 이동하면 실행 : 주로 유효성 검사(예: 나이 입력 확인)에 사용age: 세2-1. 최신 문..

1. HTML 을 이용한 데이터 전송: 기본 폼 제출 방식 name: age: : 사용자가 입력한 이름(name)과 나이(age) 데이터를 indexTwo.jsp로 전송 : 요소의 name 속성값이 name="name", name="age"로 지정되어 있어 서버에서 데이터를 받을 수 있다.: submit 버튼을 누르면 GET 방식(기본값)으로 데이터가 URL에 포함되어 전달 ex) 사용자가 홍길동 / 25 입력 후 버튼 클릭 → indexTwo.jsp?name=홍길동&age=25 : get방식을 쓰면 url에 넘어가는 값이 보여짐(보여주지 않기 위해선 post방식 사용)2. JavaScript를 이용한 동적 페이지 이동: location.href를 이용한 GET 방식 데이터 전송 ..