JAVASCRIPT

for...of 는 배열의 반복에서 사용, for...in은 객체의 반복에서 사용. for ... of (배열) var arr = [1, 2, 3]; for (var item of arr) { console.log(item); // 1, 2, 3 } for ... in (객체) var obj = { a: 1, b: 2, c: 3 }; for (var item in obj) { console.log(item) // a, b, c } 알고 있던 내용이지만 사용할 때마다 객체였나 배열이였나 헷갈려서 한번 더 개념정리하면서 포스팅

개요 매번 slide 작업할 때마다 까먹어서 찾아다니기 귀찮아서 글로 남기기.. CSS .qa-wrap .qa-box { cursor: pointer; } /* active 들어가는 부분 */ .qa-wrap .qa-box .contents { display: flex; flex-direction: column; gap: 12px; height: 0; margin-top: 0; overflow: hidden; transition: all .3s; } .qa-wrap .qa-box.active .contents { height: auto; margin-top: 16px; } JS const tabList = document.querySelectorAll('.qa-wrap .qa-box'); for(var ..

문제 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다. 제한 사항 s는 길이 1 이상, 길이 8 이하인 문자열입니다. 입출력 예 a return "a234" false "1234" true 문제 풀이 본처음엔 아래와 같은 코드로 풀었다 function solution(s) { var answer; if(s.length === 4 || s.length === 6){ if(isNaN(s)){ answer = false; } else { answer = true; } } else { answer = false; } return answer; } isN..

할인율 계산 프로그램 html 할인 가격 계산 프로그램 가격 원 할인율 % 계산 Copyright © 2023 : YOON scss(css) html { height: 100%; } body { height: 100%; margin: 0; display: flex; flex-direction: column; } header { text-align: center; } main { text-align: center; display: flex; flex-direction: column; gap: 20px; .wrap { display: flex; justify-content: center; align-items: center; label { width: 100px; } input { width: 150px; ..

Javascript로 html 요소 생성 서버와 통신이든 추후의 js에서 html 코드를 만들어야 하는 경우가 있을 때 사용하면 좋다 createElement() 메서드 document 객체의 createElement() 메서드를 사용한 것 // div 생성 const div = document.createElement('div'); // 텍스트 적용하는 방법 div.textContent = 'Hello'; // 스타일 적용하는 방법 div.className = 'div-style' // 또는 div.classList.add('div-style'); // id 적용하는 방법 div.id = 'div-ID' // 원하는 위치에 생성된 div를 넣어줘야 화면에 나타난다. document.body.append..

시작 전 체크 function Test() { console.log(this); } Test(); 해당 함수를 호출하면 this는 전역객체로 바라봐서 window가 출력된다. 만약 전역객체 아닌 다른 객체를 출력하고 싶을 때 call, apply, bind를 사용한다. 1. call() call() 메서드는 호출 주체인 함수를 즉시 실행하는 메서드이다. 첫번째 인자는 this에 바인딩된다. 이후 인자들은 호출할 함수의 매겨변수로 전달된다. function test(c, d) { console.log(this, c, d); } test.call({a: 1, b: 2}, 3, 4); // {a: 1, b: 2} 3 4 출력 2. apply() apply() 메서드도 call() 메서드와 마찬가지로 호출 주체..

위는 해상도를 resize 중이거나 mobile 사이즈로 새로고침 됐을 때 모두를 적용 할 수 있는 fucntion이다. $(function(){ function windowSize() { if ($(window).width() > 770) { // pc화면 } else { // 모바일 사이즈 if ($(window).width() < 769) { if ($(window).width() < 480) { $('.paging .paging-wrap a.active').prev().show(); $('.paging .paging-wrap a.active').next().show(); } } } } windowSize(); $(window).resize(function() { windowSize(); imgWi..

보호되어 있는 글입니다.

initSwiper 함수는 기본적으로 페이지에 하나의 swiper에 있을 때 사용하는 경우고, initSwiper2 함수는 기본적으로 페이지에 둘 이상의 swiper가 있을 때 사용하면 된다. var ww = $(window).width(); var swiperSubNav = undefined; var mySwiperMob = undefined; function initSwiper() { if (ww < 768 && swiperSubNav === undefined) { swiperSubNav = new Swiper(".swiper-container.subpage-nav", { mousewheel: true, slidesPerView: "auto", navigation : { nextEl : '.swipe..