목록JavaScript (30)
hrming
■ 자바스크립트 this - 이벤트가 발생한 태그 요소가 표시■ 제이쿼리 $(this) - 이벤트가 발생한 요소의 정보들이 Object로 표시 제이쿼리에서 자바스크립트에서의 this와 같은 데이터를 가져오기 위해서는 $(this)[0] 를 쓰면 된다. this === $(this)[0]참고 및 출처 :https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-this-%E2%9A%94%EF%B8%8F-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-this 📚 자바스크립트 this vs 제이쿼리 $(this) 차이자바스크립트 this 자바스크립트에..
foreach 반복문- foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드이다. (ES6부터는 Map, Set 등에서도 지원됨) - 배열의 요소들을 반복하여 작업을 수행할 수 있다. - foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출된다. - callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.var items = ['item1', 'item2', 'item3'];items.forEach(function(item) { console.log(item);});// 출력 결과: item, item2, item3 for …in 반복문- for in 반복문은 객체의 속성들을 반복하여 작업을..
문득, AJAX로 데이터를 보낼 때 왜 JSON 형식으로 보내야 하는 이유가 있는 것인지 의문점이 생겼다. 🤔🤔 AJAX 사용 시, JSON 형식으로 데이터를 보내는 이유■ Chat GPT에서 확인한 내용: 경량화(Lightweight): JSON은 텍스트 기반의 경량 데이터 형식으로, XML에 비해 더 적은 용량을 차지합니다. 이는 데이터를 전송할 때 더 적은 대역폭을 사용하여 효율적으로 전송할 수 있다는 것을 의미합니다.JavaScript와의 호환성: JSON 데이터는 JavaScript Object Notation의 약자로, JavaScript에서 객체와 유사한 구문을 사용하여 데이터를 나타냅니다. 따라서 서버에서 클라이언트로 JSON 데이터를 전송하면 클라이언트 측에서 쉽게 처리할 수 있습니..
AJAX- 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능- 클라이언트와 서버간에 XML 데이터를 주고받는 기술// 출처: https://www.w3schools.com/jquery/jquery_get_started.asp장점 😎👍- 페이지 이동없이 고속으로 화면을 전환할 수 있다.- 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.- 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.- 플러그인 없이도 인터렉티브한 웹페이지 구현할 수 있다. 단점 😣👎- Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.- HTTP 클라이언트의 기능이 한정되어 있다.- 페이지 이동없는 통신으로 인한 보안상의 문제- 지원하는 문자집합(Char..
① document.querySelectorAll('table tbody tr')는 HTML 문서의 모든 테이블 행을 선택하여 배열로 반환.② forEach 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하기 때문에, 각 행에 대해 특정 작업을 수행할 수 있음.③ forEach의 인수로 전달된 함수는 각 요소(여기서는 각 테이블 행)를 나타내는 변수를 받고 이 변수는 함수 내에서 해당 요소에 접근할 때 사용됨.
1. Local Storage / Session Storage key : value 형태로 문자, 숫자 데이터 저장가능 Local Storage Session Storage 문자, 숫자만 key : value 형태로 저장가능 5MB까지만 저장가능 브라우저 재접속해도 영구적으로 남아있음 브라우저 끄면 날라감 // 1. 로컬 스토리지 사용법 localStorage.setItem('key', 'value') // 자료 저장 localStorage.getItem('key') // 자료 가져오기 localStorage.removeItem('key') // 자료 삭제 // 2. localStorage에 array & object 저장 // 2-1. JSON.stringify() : array/object -> JS..
1. DOM (Document Object Model) : 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 object 자료로 정리한 것 2. 브라우저는 HTML 문서를 위에서 부터 읽으며 DOM을 생성 : DOM이 생성된 경우에만 HTML을 변경할 수 있음. Previous // DOM이 생성된 경우에만 HTML을 변경할 수 있음 // p태그에 대한 DOM이 생성되지 않았기 때문에, HTML 변경 불가. 에러 발생. 3. 자바스크립트 실행을 미루는 방법 : 자바스크립트를 태그 끝나기 전에 작성하면 상관 없지만, 자바스크립트 위치를 정할 수 없을 경우 사용 $(document).ready(function(){ TEST }) document.add..
null 명시적으로 값이 없음을 나타내는 값 (= 빈 값을 의미) 변수가 존재하지만 값이 지정되지 않았거나 비어 있는 경우에 사용 undefined 값이 할당되지 않은 변수 또는 객체의 속성에 접근 했을 때 나타는 값 (= 정의되지 않음) 변수가 선언되었지만 초기화 되지 않은 경우 또는 함수에서 값을 반환하지 않은 경우 등에서 발생 NaN 숫자가 아님을 나타내는 값 (= 표현 불가능한 수치형 결과) 수학적으로 정의되지 않은 연산을 수행하려고 시도했을 때 발생 var totalExam1 = 0; totalExam1 += exam1[i]; // 위 코드에서, totalExam1 변수를 선언한 후, 0을 할당하지 않으면 NaN에러가 뜸 // 숫자가 할당되지 않은 변수로 연산을 하려고 했기 때문 참고: http..