본문 바로가기
반응형

JavaScript27

[JavaScript] 옵셔널체이닝 const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']; const openingHours = { [weekdays[3]]: { open: 12, close: 22, }, [weekdays[4]]: { open: 11, close: 23, }, [weekdays[5]]: { open: 0, // Open 24 hours close: 24, }, }; ... if(restaurant.openingHours && restaurant.openingHours.mon) console.log(restaurant.openingHours.mon.open); //옵셔널체이닝 사용 console.log(restaurant.openingHours.fri?.op.. 2022. 3. 26.
[JavaScript] Hoisting(호이스팅) 호이스팅이란? JavaScript에서 호이스팅이란 코드를 실행하기 전에 변수와 함수에 해당하는 scope의 최상단으로 끌어 올리는 것을 말한다. 즉 일부 유형의 변수를 실제로 선언하기 전에 scope를 위로 끌어 올려 사용할 수 있도록 해주는 것이다. (function () { var a = 10; (function () { console.log(a); //undefiend var a = 20; })(); console.log(a); //10 })(); console.log(a); // a is not defined 기존 var는 변수명만 위로 끌어올리고 값이 없기 때문에 undefined로 인식한다. 즉 코드에서 선언되기 전에 우리는 선언된 값을 얻지 못하게 된다. 이러한 행동은 JavaScript에서.. 2022. 3. 24.
[JavaScript] 랜덤주사위 아래와 같은 이미지 파일이 있다고 가정할 때 랜덤주사위를 만들어 보기로 했다. //javascript const diceEl = document.querySelector('.dice'); const btnRoll = document.querySelector('.btn--roll') ... btnRoll.addEventListener('click', function () { // 1. Generating a random dice roll const dice = Math.trunc(Math.random() * 6) + 1; console.log(dice); diceEl.classList.remove('hidden'); diceEl.src = `dice-${dice}.png`; }) //HTML ... 🎲 R.. 2022. 3. 22.
[JavaScript] keyboardEvent 🎈 Keyborad Event KeyboardEvent는 사용자가 키보드의 키를 눌렀을 때 발생하는 이벤트 객체에 속한다. 이벤트 유형은 keydown, keypress, keyup이 있으며 발생한 키도의 활동의 종류를 식별한다. 사용자가 키보드의 키를 눌렀을 때 발생하는 이벤트는 KeyboardEvent 객체에 속합니다.' keydown - 어떤 키가 눌렸는지 나타내는 코드를 제공 //keydown을 사용한 모달창 닫기. ... document.addEventListener('keydown', function (e){ if (e.key === "Escape") { closeModal(); } }) ... keyup - 키를 놓을 때마다 값을 기록합니다 Focus the IFrame first (e.g... 2022. 3. 22.
[JavaScript] Math 정리 Math Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다. Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없습니다. Math 설명 예시 Math.trunc() 함수는 소수 자릿수를 제거하여 숫자의 정수 부분을 반환함. ex) 3.24 => 3 , 42.84 => 42 등등 Math.random() 0부터 1보다 작은 수의 근사적으로 균일한 부동소수점 의사난수를 반환함. ex) 0.3400842988693815 등등 Math.around() 입력값을 반올림한 수와 가장 가까운 정수 값을 반환함. ex) 0.9 => 1 등등 Math.floor() 함수는보다 작은 최대의 정수를 반환하거나 소정의 수와 동일. ex) 2.95 => 2 -.. 2022. 3. 16.
[JavaScript] JavaScript 공부할 때 좋은 플러그인 이런식으로 미리 콘솔값을 옆에 자동으로 띄워주는 Quokka 플러그인 설치를 한 후 나같은 경우에는 필요할때 마우스 오른쪽 클릭 후 자동으로 나오게 클릭해서 사용하고 있다. 2022. 3. 16.

티스토리툴바