목록JavaScript (30)
hrming
■ getElementById vs querySelectorgetElementById querySelectorid명과 일치하는 엘리먼트 객체 반환선택자와 일치하는 '첫번 째' 엘리먼트 객체 반환일치하는 엘리먼트가 없다면 null 반환일치하는 엘리먼트가 없다면 null 반환querySelector에 비해 속도가 더 빠름id 어트리뷰트가 있는 요소 노드를 취득할 때 사용구체적인 엘리먼트를 선택하고 싶을 때 유용 // getElemenyByIdconst name = document.getElementById("name");// querySelectorconst name = document.querySelector("#studentForm #name");■ getElementByClassName vs que..
이중 for문으로 데이터를 비교하다가 부적합한 데이터가 확인되어 한번에 for문을 나오게 해야하는 경우, 아래와 같이 라벨/플래그 변수/함수 을(를) 사용할 수 있다.☑️ 라벨의 사용법- 라벨 정의 : 반목문 앞에 라벨을 선언함. 라벨 이름 뒤에는 반드시 콜론(:)이 붙음- 라벨 사용 : break 또는 continue와 함께 라벨 이름을 사용하여 해당 반복문을 종료하거나 다음 반복으로 넘김outerLoop: // 라벨 이름for (let i = 0; i ☑️ 플래그 변수 사용let isBreak = false;for (let i = 0; i ☑️ 함수 사용function nestedLoop() { for (let i = 0; i 참고 및 출처 : https://velog.io/@iimandoo/%EC..
function fn_addRow(){ var innerHtml = “”; innerHtml += ~~~~~ innerHtml += ~~~~~ $(‘.table’)append(innerHtml); fn_updateRowNo(); } function fn_deleteRow(){ $(‘.table tbody tr’).each(function(){ var checkbox = $(this).find(‘input[type=“checkbox”]’); if(checkbox.prop(‘checked’)){ $(this).hide(); } }); fn_updateRowNo(); } function fn_updateRowNo(){ var indexNo = 1; $(‘table tbody tr’).each(function(..
window.open(‘URL’, ‘팝업창명‘, ’options’); 로 팝업창을 호출 한 다음에, window.focus(); 로 포커스를 한번 더 주길래.. 굳이 왜 또 포커스를 줘야하는 지 궁금해졌다. 🧐 팝업창을 호출한 다음에 팝업창을 끄지 않은 상태에서 다른 작업을 하다가 뒤로 밀려난 팝업창이 보이지 않아 다시 팝업창을 호출하는 경우, IE에서는 팝업창이 뒤에서 새로고침되는 이슈가 있었다고 한다.참고 및 출처 https://8millimeters.tistory.com/m/9 [JAVASCRIPT] 팝업창에 포커스 줘서 최상단에 띄우기팝업창을 호출하고 팝업창을 끄지않은 상태에서 다른 작업을 하다가 뒤로 밀려난 팝업창이 보이지 않아 다시 팝업을 호출하는 경우, 크롬같은 경우에는 창이 앞으로 나오는데..
📌 1. 한 문장 요약 • sessionStorage → 탭을 닫으면 사라지는 임시 저장소 • localStorage → 브라우저를 꺼도 남아 있는 영구 저장소📌 2. 핵심 차이 표📌 3. sessionStorage는 언제 쓸까?세션 스토리지는 탭 단위로 유지되는 임시 저장소다.✔ 이런 상황에 잘 맞는다 • 페이지 이동 중 검색 조건 유지 • 결제 페이지의 단계별 임시 데이터 저장 • 글쓰기 중 실수로 새로고침할 때 대비 • 탭마다 다른 상태를 유지해야 할 때sessionStorage.setItem("searchKeyword", "test");sessionStorage.getItem("searchKeyword");📌 4. localStorage는 언제 쓸까?로컬스토리지는 브라우저를 껐다 켜도 남는..
옵셔널 체이닝은 존재하지 않을 수 있는 프로퍼티 또는 메서드를 안전하게 호출할 수 있도록 도와준다.?. 연산자의 왼쪽에 있는 것을 평가한 뒤, undefined 또는 null이 맞다면 undefined를 반환하고 평가가 끝난다. 장점1. if문을 줄여준다2. nullish 연산자 (??)와 함께 쓰면 기본값 설정하기에 유리하다3. 대괄호 표기법에도 옵셔널 체이닝이 가능하다4. 존재하지 않을 수 있는 메서드를 호출할 때도 유용하다5. 배열 항목에 접근이 가능하다→ 기억을 더듬어... 예시 혼자 생각해보고, 모르겠으면 아래 블로그 가서 예시 참고하기! 😎주의점1. 지원하지 않는 브라우저에서는 동작하지 않기기때문에, 브라우저 호환성을 고려해야 한다.2. 프로퍼티나 메서드가 null 또는 undefined인 ..
JavaScript에서 'Object'는 데이터를 키-값 쌍의 형태로 저장하는 기본 데이터 타입이다. 객체는 속성(property)의 집합으로, 각 속성은 키와 값으로 이루어져 있다.Object.values()메서드는, 객체의 모든 값을 '배열로' 추출해 반환하는 메서드이다. var row = { name: "John", age: 30};var values = Object.values(row);// values 는 ["John", 30] 참고 및 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values Object.values() - JavaScript | MDNObject.values()..
배열에서 특정 조건을 만족하는 모든 요소를 모아 새 배열로 반환하고자 할때 사용하는 메서드 filter 사용법 1. 조건을 filter안에 명시 - 조건식이 간단할 경우 유용let array = [3,5,11,0,9,'string'];let result = array.filter((value) => value 2. 조건을 외부 함수로 선언한 후, 이를 호출 - 조건식이 복잡할 경우 유용function lessThanTen(value) { return value 참고 및 출처 :https://velog.io/@haleyjun/JavaScript-filter-%EC%82%AC%EC%9A%A9%EB%B2%95