Prototype, Prototype Chain

Prototype, Prototype Chain JavaScript는 프로토타입 기반 언어라고 불립니다. JavaScript 개발을 하면 빠질 수 없는 것이 prototype입니다. prototype이 거의 JavaScript 그 자체이기 때문에 이해하는 것이 어렵고 개념도 복잡합니다. JavaScript도 객체지향 언어입니다. 하지만 자바스크립트에는 class라는 개념이 없습니다. (ES6 에서 class 문법이 추가되었습니다.) 대신 prototype이라는 것이 존재합니다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유입니다. 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근 시 객체 자신의 것 뿐 아니라 proto가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나..

2023.12.23

input 글자수 입력 후 다음 칸에 focus

input maxlength 값 만큼 입력 후 다음 input에 자동으로 focusing 된다. 카드번호 입력, 비밀번호 1글자씩 입력 등에 사용된다. 카드번호 취소 취소 취소 취소 유효기간 취소 $(".section__joincard .form__item-input.flex input").keyup (function () { var charLimit = $(this).attr("maxlength"); if (this.value.length >= charLimit) { $(this).parent().next().find('input').focus(); return false; } });

2022.12.23

javascript url 파라미터 가져오기

javascript로 주소에 있는 파라미터 가져오기 url : http://test.com?brand=1 let query = window.location.search; let param = new URLSearchParams(query); let brand = param.get('brand'); console.log(brand); // 1 https://europani.github.io/javascript/2021/06/25/031-URL-parameter.html

2022.06.27

해상도별 이미지 교체 window resize

반응형 웹사이트 제작 시 해상도 처리 및 감지 방법에는 2가지가 있다. CSS의 미디어쿼리 사용 Javascript의 $(window).width();와 if문 사용 CSS로는 미디어쿼리와 background 속성을 이용해 해상도별 이미지를 수정할 수 있지만 마크업을 수정할 순 없다. 이때 Javascript로 브라우저의 가로 값을 계산하여 해상도별로 마크업을 수정해줄 수 있다. resize event // jQuery $(window).resize(function(){ // script }); // JavaScript - addEventListener window.addEventListener('resize', function(event) { // script }, true); // JavaScript..

2022.01.11

클릭 시 Video 주소 바꾸기

클릭 시 Video 주소 바꾸기 a 태그의 링크값을 이용해 Javascript로 Video 주소 바꿔주기 HTML 비디오1 비디오2 비디오3 JS var video; //전역변수 선언 function changeVideo(linkBtn){ //linkBtn=>클릭한 a태그 video = document.getElementById('changeVideo'); //video태그 video.src = linkBtn.href; // 'movie/video01.mp4' video.load(); //연결된 비디오를 로딩한다. video.type = 'video/mp4'; //해당 코덱을 지정한다 video.play(); //비디오를 재생한다. return false; } //

2021.12.23

링크 시 매개변수(parameter)파라미터 값 넘기기

귤 = 매개변수 링크 시 매개변수(parameter)파라미터 값 넘기기 페이지 이동 시 JavaScript를 이용하여 parameter값을 전달받을 수 있다. 매개변수 1개 일 때 링크된 페이지 매개변수 2개 일 때 링크된 페이지 const obj = { 0: "bFleta: 16.61", 1: "pCHERRY: 8.53", } const newObj = Object.values(obj).reduce((acc, cur_ => { const [key, value] = cur.splite(": "); acc[key] = Number(value); return acc; }, {}); console.log(newObj); // { bFleta: 16.62, pCHERRY: 8.53 }

2021.12.21