pogun 코딩 공부 저장소

1. JavaScript vs jQuery 이벤트 처리1-1. JavaScript 클릭 이벤트 처리jQuery 방식$("#demo").click(function(){ alert("p tag click");});: $("#demo")를 사용해 id="demo"인 요소를 선택한 후 click() 이벤트를 추가함: 더 짧고 가독성이 좋음$("#btn").click(() => { alert("button click");});: 화살표 함수를 사용하면 코드가 더 간결해짐 JavaScript 방식document.getElementById("demo").onclick = function () { alert("p tag click");};: onclick 속성을 사용해 클릭 이벤트를 등록할 수 있음:..

1. JavaScript와 jQuery의 차이JavaScript : : 웹 브라우저에서 DOM 조작, 이벤트 처리, AJAX 요청 등을 수행하는 클라이언트 측 언어jQuery : : JavaScript를 더 쉽게 사용할 수 있도록 만든 라이브러리. 짧고 간결한 코드로 DOM 조작과 이벤트 처리를 쉽게 할 수 있음1-2. jQuery 문법 기본 형식: $(선택자).메서드(매개변수);$("p").text("안녕하세요!"); // 모든 `` 태그의 텍스트 변경: 선택자 부분에 class, id 또는 특정 속성 선택자 모두 사용 가능2. JavaScript vs jQuery 사용법 차이2-1. getter (값 가져오기)javaScript 방식let ptag = document.getElementsByTagNa..

1. 화살표 함수(Arrow Function) 1-1. 기본 함수 선언 방식function func() { console.log('func()');}func();: 전통적인 함수 선언 방식 1-2. 즉시 실행 함수 (IIFE) (function func() { console.log('(func())');})();: 함수 선언과 동시에 실행되는 패턴 : 특정 코드 블록을 즉시 실행하고 싶을 때 사용 1-3. 익명 함수 표현식 const func = function () { console.log('function ()'); };func();: const를 사용하여 함수를 변수에 할당하는 방식 1-4. 화살표 함수(Arrow Function)const func = () => { console.log('func..

1. 배열 생성let array = ['a', 'b', 'c'];: array라는 이름의 배열을 생성하고, 'a', 'b', 'c' 값을 초기값으로 설정 2. 배열 요소 추가하기 : 배열에 새로운 요소를 추가하는 방법에는 push(), unshift(), splice()가 있다. 2.1 push() - 배열 맨 뒤에 요소 추가array.push('d'); // 배열의 끝에 'd' 추가console.log(array); // ['a', 'b', 'c', 'd']: push()는 배열의 마지막 요소 뒤에 새로운 요소를 추가합니다. 2.2 unshift() - 배열 맨 앞에 요소 추가 array.unshift('A'); console.log(array); // ['A', 'a', 'b', 'c', 'd'..

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 서울시 ..