전체 글157 [JavaScript] classList 코딩을 할 때 효과적인 방식은 html은 html파일에만 쓰고 css로 처리할 수 있는 것은 css로 처리하고 JavaScript는 최소한의 로직만 처리하게끔 분리하는것이다. 반응속도.html html에 이렇게 style을 여러개의 class형태로 여러 속성을 적용을 해놓았다. 반응속도.js var 스크린 = document.querySelector('#screen'); var 상태 = { }; 스크린.addEventListener('click', function(){ if(스크린.classList.contains('waiting')){ // classList.contains: 현재클래스를 파악가능하다 스크린.classList.remove('waiting'); // class는 여러 스타일을 한번에 적용.. 2020. 9. 4. [JavaScript] 렉시컬 스코프, 클로저 렉시컬 스코프 자바스크립트에서는 코드가 적힌 순간 변수의 유효범위가 정해진다다. 이것을 정적 유효범위, 렉시컬(어휘적) 스코프라고 부릅니다. function main(){ var name = 'skykchmin'; } var로 선언한 name변수의 유효범위는 함수를 절대로 벗어날 수 없다. 즉 함수안에서 선언한 변수는 함수 밖에서 접근할 수 없다. var name = 'kchmin'; function log(){ console.log(name); } function main(){ var name = 'skykchmin'; log(); } main(); 위 예의 실행 결과는 skykchmin 이다. main() 메서드가 실행하면서, variable name이 있는지 찾아보고, 없으면 전체에서 찾아본다. 이.. 2020. 9. 3. [JavaScript] 이벤트 리스너, 이벤트 버블링, 이벤트 객체 이벤트 리스너 이벤트 리스너는 말 그대로 해당 이벤트에 대해 항상 리스닝 하며 대기중이다. 해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행된다. 이벤트 리스너는 on + '이벤트명' 의 구조를 가지고 있다. document.getElementById('Hello').onclick = function () { alert('Hello world'); }; 이벤트 리스너는 여러 태그에 각각 이벤트를 설정할 수 있다. 모든 DOM들이 이벤트 리스너를 등록할 수 있는 속성들을 갖고 있다. document.addEventListener('contextmenu', function(e){ //contextMenu 오른쪽 마우스 e.preventDefault(); console.log('Hello world').. 2020. 9. 2. [JavaScript] 이미지 스프라이트 이미지 스프라이트: 이미지가 50개정도 대량의 이미지가 되면, 한번에 화면에 뿌려주기 위해 작은 이미지를 하나로 합쳐서 좌표를 통해 보여주는 기술 ex) 가위바위보, 지뢰찾기에 사용할 수 있다. var 이미지좌표 = '0'; var 가위바위보 = { // 키: 속성 바위: '0' , 가위: '-142px', 보: '-284px' }; // Object.entries(가위바위보); // object.entries(객체) -> 객체를 배열로 바꿀 수 있다. function 컴퓨터의선택(이미지좌표){ return Object.entries(가위바위보).find(function(v){ //배열.find는 반복문이지만 원하는 것을 찾으면(return 이 true) 멈춘다. console.log(v); return.. 2020. 8. 31. 이전 1 ··· 32 33 34 35 36 37 38 ··· 40 다음
