봉보로봉봉

옵션을 선택하면 이미지가 바뀌도록 하기 강아지 고양이 제이쿼리 $('select').on('change', function(){ let url = $(this).val(); $('div').html(``) $('div img').attr('src', `${url}`); }); 바닐라 const select = document.querySelector('select') select.onchange = function(){ let url = this.value; document.querySelector('div').innerHTML = ``; } DOM제어에 기본적인 바닐라 자바스크립트 코드 document.querySelector('div').classList.textContent = ''; documen..

폼으로 더하기 제이쿼리 $("[type='button']").on('click', function(){ let kor = Number($("input[name='kor']").val()); // input은 string으로 받아오기 때문에 추가 let eng = Number($("input[name='eng']").val()); $('.result input').val(kor + eng); }); 바닐라 const btn = document.querySelector("[type='button']"); const kor = document.querySelector("input[name='kor']"); const eng = document.querySelector("input[name='eng']"); c..

*스크롤 이벤트를 일으키는 같은 코드 제이쿼리 $(window).on('scroll', function(){ console.log( $(window).scrollTop() ); }) 바닐라 자바스크립트 window.onscroll = function(){ console.log( window.scrollY ); } window.addEventListener('scroll', function(){ console.log( window.scrollY ); }) 스크롤을 내렸는지 올렸는지 알아내기 let scrollPos = { y: 0, dy: 0, state: true } $(window).on('scroll', function(){ scrollPos.y = $(window).scrollTop() // {}안..

1 2 3 scroll 이벤트 $(window).on('scroll', function(){ // 마우스가 없는 디바이스를 위해서 scroll 이벤트 사용 console.log(0); // 한번 스크롤을 내리면 여러번의 이벤트가 발생 }); $('body').height(5000); $(window).on('scroll', function(){ clearTimeout(inter) inter = setTimeout(function(){ }, 50); // scroll 이벤트에 텀을 줘서 한번씩만 일어나게 하기 }); scroll의 위치 알아내기 $(window).on('scroll', function(){ clearTimeout(inter) inter = setTimeout(function(){ conso..

컨텐츠의 갯수를 변수화 01 02 03 04 05 let num = 0; let inter, delta; let count = $('.con').length; // 컨텐츠의 갯수를 변수화 $(window).on('mousewheel', function (e) { delta = e.originalEvent.wheelDelta; clearTimeout(inter); inter = setTimeout(function () { if (delta < 0) { if (num != count-1) num++; // 페이지가 더 넘어가지 않게 하는 조건에 변수 사용 } else { if (num != 0) num--; } $('main').css({ transform: `translateY(-${100 * num}vh..

배울 내용 event (touch, scroll, wheel, drag) > 이런 이벤트들은 api를 활용할 수 있음 디바이스 최적화가 돼서 아주 잘 나오기 때문에 쓰는 것을 추천 string 제어 > 기본이 됨! form 제어할 때 도움이 됨 form 제어 > id pw 체크 storage matchMedia(반응형) ajax(xml, json) canvas .on 여러 이벤트에 걸쳐서 사용 동적인 이벤트에 사용함 $(window).on('mousewheel',function(){ // 마우스 휠을 돌리면 console.log('yup') // 콘솔에 해당 내용을 출력 }); mousewheel scroll하면 페이지가 맞춰서 넘어가게 하기 01 02 03 04 05 main{ color: #d1beb..

보호되어 있는 글입니다.

브라우저 콘솔에 location.href 를 하면 URL이 나옴 문자열 함수 let num = '1234'; num.length; // 문자열의 길이를 알아낼 때 사용 num.charAt(index); // 문자열의 index번째 문자를 가져옴 num.substr(index, 문자수), // 문자열에서 특정 부분 글자와 문자열의 길이 num.substring(index, index), // 문자열에서 특정 부분만 잘라낼 때 사용하는 메소드 > index부터 index까지 + 문자열 함수 정리 charAt() 문자열.charAt(index) 문자열에서 인자로 넘긴 index의 글자를 반환 let Example = "Hello"; let result = Example.charAt(1); // result는 ..