본문 바로가기

JavaScript

(24)
[JS] 비구조화 할당 (destructuring assignment) 문법 * 비구조화 할당 (destructuring assignment)=> 배열이나 객체의 속성을 분해하여 개별 변수에 할당.  [ 배열 비구조화 할당 ]num이라는 변수에 아래와같이 배열을 할당  => 변수 a와 c에 배열 요소들을 각각 할당.  (방법1) let num = [1, 2]; let a = num[0]; let c = num[1]; (방법2) let num = [1, 2]; let [a, c] = [1, 2]; // or let [a, c] = num  * 배열의 일부 요소만 할당 let num = [1, 2, 3, 4, 5]; let [a, b, c, , e] = num * 기본값 설정const num = [1, 2];const [a, b, c = 3] = num;  *..
[JS] previousElementSibling & previousSibling / 삼항연산자 / Truthy & Falsy * previousElementSibling() : 바로 이전 형제요소 반환 ( 실제 HTML 요소만 ) * previousSibling() : 바로 이전 형제요소 반환 (주석, 공백, 텍스트 포함) div2를 기준으로 div1의 text를 가져오려면 첫 번째 div 요소 두 번째 div 요소 * previousElementSibling 사용 var secondDiv = document.getElementById('div2'); var prevElementSibling = secondDiv.previousElementSibling; console.log('previousElementSibling:', prevElementSibling ? prevElementSibling.textContent : '없음'..
[JS] Select / Option 태그 DB의 데이터를 select 태그의 option으로 넣는 경우, 이전 프로젝트에서는 서버에서 불러온 데이터를 jstl태그의 foreach로 뽑아내고 조건문을 걸어서 option값에 할당했었는데 이번 과제에서는 $(document).ready 함수와 ajax로 바로 데이터를 불러왔고 jquery를 활용해서 option값에 할당해줬다. * jstl & foreach 이용해서 option값 할당. ${item.name} * ajax & jquery (forEach) 이용해서 option값 할당. $.ajax({ url : '/getList' , type : 'POST' , async : true , data : data , header: { "Content-Type": 'application/json; cha..
[JS] 키보드 이벤트 (keypress / keyup / keydown ) * keypress _키보드를 누를때 계속 실행 (어떤 값이 눌렸는지*)* keydown  / keyup  _ 키보드를 누를 때(한번) / 뗄 때 실행 (물리적으로 어떤 키가 눌렸는지*) * 동작순서 : keydown → keypress → keyup  입력값에 따른 작업처리는 keyup 사용하는게 좋음. ( keypress는 한글 인식 못함. )예를 들어, iniput창의 값을 검색조건으로 Enter키 눌렀을 때 진행시키려면(JavaScript) (Jquery) ( keycode 정리 ) https://blog.munilive.com/posts/keyboard-keycode-value.html Javascript 키보드 키코드 값키보드의 키별 ASCII 코드값을 표로 정리하였다. 자주 사용되는 만큼 즐..
[JS] jquery_jqGrid / ajax https://coding-plant.tistory.com/97 [Javascript] jqGrid 사용법 총 정리 소개 jqGrid는 jQuery라이브러리를 이용한 Grid Plugin 이다. 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax기반 자바스크립트 컨트롤러 기능을 한다. jqGrid는 Ajax가 내장되어 있어서 조금만 coding-plant.tistory.com ( jqGrid 옵션들 ) https://mine-it-record.tistory.com/290 [jqGrid] 다양한 옵션 및 사용법 모음 (colmodel, option, event, methods) - 다양한 옵션 모음 - 옵션에 대해 알아보기 이전에 일단 아래와 같은 기본 구조를 가지고 시작한다 치고 진행 하도록 한..
[JS] null & undefined [ null ] 변수에 값이 없음을 의미. (변수에 null 깂 할당 가능_값이 의도적으로 비어있음을 표현) [ undefined ] 변수에 값이 정의되지 않음을 의미. (선언 이후 값이 할당되지 않거나, 존재하지 않는 값에 접근하는 경우) * null과 undefined의 데이터 타입 => null의 데이터 타입은 null이지만 수정되지 못한 버그라고 한다. * null과 undefined 비교 ( ==, === ) - 동치연산자( == ) : 값만 비교. - 동등연산자 ( === ) : 값과 데이터타입 모두 비교. * 연산결과 - null ( 0으로 변환 후 연산 ) - undefined ( 연산불가로 NaN 반환 )
[JS] Infinity & NaN [ Infinity ] Infinity (Number.POSITIVE_INFINITY) _ 양의 무한대 -Infinity (Number.NEGATIVE_INFINITY) _ 음의 무한대 * Infinity가 나오는 경우 - number / 0 - Infinity 와 숫자 연산 ( +, -, *, / ) - Infinity 와 Infinity 연산 * 관련 메서드 - isFinite () (전역함수) - Number.isFinite() (Number 객체 제공 함수) => 인자값이 유한하면 true , 무한하면 false 반환. * isFinite() vs Number.isFinite() 더보기 isFinite() 는 값을 number로 변환 후 판별, Number.isFinite() 는 값을 number..
[JS] HTMLCollection & Node Object & 메소드(append, innerHTML..) [ HTMLCollection ] * HTMLCollection HTML 문서에서 요소(element)들의 집합으로, 집합의 요소들을 배열처럼 다룰 수 있는 객체. (유사배열객체) * 특징 - DOM의 변경사항에 대해 동적으로 업데이트. (실시간반영) - 순서를 가지고 있어 배열처럼 요소에 접근 가능. index, length 사용가능 - 유사배열형태이나 배열은 아니기 때문에 forEach나 map은 사용 불가. => for... of , for문 사용 => 배열로 변환하여 배열메소드 사용 _ Array.from(), 스프레드 문법 * HTMLCollection 객체를 반환하는 메서드 - getElementsByTagName( tagName ) - getElementsByClassName( classNa..