🟨 JavaScript

[코딩애플] 스크롤 이벤트

스크롤바 위치 찾기 : window.scrollY, window.scrollTop() window.addEventListener('scroll', function(){ console.log(window.scrollY); //window.pageYOffset과 동일한 기능(이쪽이 호환성이 더 떨어짐) }) //jquery버전 $(window).on('scroll', function(){ $(window).scrollTop() //(100) 괄호안에 숫자를 넣으면 현재스크롤바 이동 }); 더 알아가기 : scrollTop은 현재 스크롤바 이동 기능도 겸한다. 강제로 맨 위에서부터 스크롤하기 : scrollTo(x,y) window.addEventListener('scroll', function(){ wind..

Level 2 : 1~5 (숙제 및 깨달은 점)_if문

1. 2년 후 받을 총예금액 구하기 조건 50000원 미만: 연 15% / 50000원 이상 : 연 20% function depositResult(amount) { const amountOver = amount * 1.2 * 1.2; const amountLess = amount * 1.15 * 1.15; if (amount >= 50000) { console.log(amountOver); } else { console.log(amountLess); } } 2. 커피 총리필액 구하기 조건 커피는 총 3번 리필되며, 직전 마신 커피의 2/3만 리필된다. let first = 360; let total = 0; console.log(first + first * (2/3) + first * (2/3) * (..

Level 1 : 6~12 (숙제 및 깨달은 점)

6. form과 input 값이 비었을 때 얼럿 띄우고 submit막기 document.querySelector('form').addEventListener('submit', function(e){ if (document.querySelector('input[type=text]').value == '') { alert(`아이디를 입력하세요.`); e.preventDefault(); } else { document.querySelector('input[type=text]').submit; }; if (document.querySelector('input[type=password]').value == '') { alert(`비밀번호를 입력하세요.`); e.preventDefault(); } else { do..

Level 1 : 1~5 (숙제 및 깨달은 점)

1. 폰트사이즈 변경하기 document.getElementById('hello').style.fontSize = '16px 2. 알림창 열기/닫기 let alertBox = document.getElementsByClassName('alert-box'); let openBtn = document.getElementsByClassName('open'); let closeBtn = document.getElementsByClassName('close'); openBtn[0].addEventListener("click", function() { alertBox[0].style.display = "block"; }) closeBtn[0].addEventListener("click", function() { a..

[드림코딩] 콜백함수 (4) : 콜백지옥 탈출, Promise (callback hell 코드개선하기)

Callback Hell 예시 이전시간에 만들었던 콜백지옥 예시다. // 기본세팅 class UserStorage { loginUser(id, password, onSuccess, onError) { setTimeout(() => { if ( (id === 'master' && password === 'master00') || (id === 'submaster' && password === 'submaster00') ) { onSuccess(id); } else { onError(new Error('not found')); } }, 2000); } getRoles(user, onSuccess, onError) { setTimeout(() => { if (user === 'master') { onSucce..

[드림코딩] 콜백함수 (3) : promise로 Error Handling하기 (reject, catch 활용)

Error Handling const turnonLaptop = () => new Promise((resolve, reject) => { setTimeout(() => resolve(`노트북 실행.`), 1000); }); const loginBlog = blog => new Promise((resolve, reject) => { setTimeout(() => reject(new Error(`Error! ${blog} => 블로그 진입.`)), 1000); }); const writePost = post => new Promise ((resolve, reject) => { setTimeout(() => resolve(`${post} => 게시 완료.`), 1000); }); producer 코드를 작성했..