JavaScript 검색 결과

해당 글 77건

html에 js,css파일 적용이 안되는 문제

c어느 정도 기초 공부를 다 했다고 생각해서 이제 간단한 프로젝트를 하나 만들려고 하던 중이었다 UI를 다 만들어 놓고 js파일을 작성해서 테스트를 하려했는데 뭐지? js가 적용이 안된다 코드를 이리바꾸고 저리바꿔봐도 반응이 없어서 개발자 도구에 들어가서 확인해 봤다 ?? 너무 당황스러웠다.. 오류코드가 뜨는게 아니라 어떻게 검색해야 할지도 모르겠고 파일 인식은 하는데 내용은 비어있으니.. 이래저래 검색하다가 답을 찾았다 좋은 글을 보고 해답을 찾았다 https://kanu.tistory.com/30 이 코드로 자바스크립트를 선언하면 브라우저는 이전에 처리한 js나 css파일을 캐쉬에서 불러와 작업하기 때문에 내가 지금 로컬에 들고있는 파일과 다른 파일을 불러와서 작동한다는 것 사실 이해는 잘 안간다....
JavaScript 2020. 10. 17. 15:03

타이밍 제어

setTimeout setTimeout은 첫번째 인자로 함수를 받고 두번째 인자로 ms단위의 시간 값을 받는데 ms시간 만큼 지난 뒤에 콜백 함수를 실행시키는 함수이다 setTimeout(function () { console.log('setTime'); },3000); 이 코드를 실행하면 3초후에 콜백 함수가 실행되어 콘솔창에 setTime이 출력된다 setInterval setInterval도 setTimeout과 작동 방식이 유사한데 똑같이 함수와 ms단위의 시간을 받고 ms시간마다 콜백 함수를 실행시키는 함수이다 setInterval(function () { console.log('setInterval'); }, 3000); 이 코드를 실행하면 3초마다 콜백 함수가 실행되어 콘솔창에 setInte..
JavaScript 2020. 10. 15. 15:56

공 움직이기

우선 자바스크립트로 css를 추가하는 법을 알아보자 ball클래스를 가진 공하나만 있다 (function () { const ballElem = document.querySelector('.ball'); function clickHandler() { ballElem.style.transform = 'translate(50vw,50vh)'; ballElem.style.transition = '2s'; } ballElem.addEventListener('click', clickHandler) })(); 공을 클릭하면 transform : translate(50vw, 50vh); transition : 2s; 를 ball엘리먼트의 css에 추가하는 코드이다 클릭하면 css가 적용되어서 공이 중앙으로 움직인다 ..
JavaScript 2020. 10. 13. 22:17

scroll event

스크롤 이벤트에 쓰이는 몇가지 메소드, 프로퍼티를 알아보자 top 스크롤 이벤트는 말 그대로 웹 페이지에서 스크롤할 때 발생하는 이벤트다 (function () { const top = document.querySelector('.fixedTop'); window.addEventListener('scroll', function () { top.innerHTML = ''; }); })(); 클릭 이벤트와 동일하게 addEventListener를 사용하고 첫번째 인자로 scroll을 주면 스크롤을 이동할 때 이벤트가 발생하게 된다 그 안에 있는 콜백 함수는 스크롤 이벤트가 발생할 때 상단에 고정되어있는 top문자열을 수정하게끔 작동한다 window.pageYOffset const top = document...
JavaScript 2020. 10. 12. 18:56

전역 변수 줄이기

전역 변수의 남용은 혼자서 진행하는 프로젝트에서는 눈치채기 힘들지만 협력하는 프로젝트에서는 내가 선언한 전역 변수가 남의 함수에 의해서 값이 바뀌는 등 문제점을 가지고 있다 그래서 프로그래머들은 전역 변수를 최소화하기 위해서 노력한다 이전 포스팅의 클래스a를 가진 박스를 클릭시 apply라는 코드를 적용하는 간단한 이벤트 코드다 이런 간단한 코드에서 벌써 전역 변수를 boxA와 clickHandler 2개나 사용하고 있는데 이를 줄이려면 어떻게 해야할까? 저 코드를 통째로 함수 안에 넣어버리면 된다 이렇게 하면 이전에 있던 두개의 전역 변수는 clickA 함수 안의 지역 변수가 돼서 전역 변수를 줄이는 효과를 봤다 하지만 clickA도 결국 전역 변수인데 이 clickA 함수는 페이지가 로드되는 처음에만..
JavaScript 2020. 10. 11. 02:11

이벤트

이벤트라는 웹페이지에서 일어나는 모든 사건을 말한다 우리는 자바스크립트에서 일어날 사건에 대응하는 함수를 미리 준비해 놓고 사건을 감지해서 그에 맞게 준비해 놓은 함수를 실행시키도록 할 수 있다 JS EVENT A B C 웹페이지에서 가장 흔하게 일어나는 이벤트는 무엇일까? 바로 클릭 이벤트이다 a박스를 클릭하면 박스에 빨간테두리를 생성하는 간단한 코드를 만들어보자 이전 포스팅에서 자바스크립트로 클래스 이름을 추가하는 것이 응용된다 .apply { border: red solid 2px; }빨간색 테두리를 만드는 apply코드 const boxA = document.querySelector('.a'); boxA.addEventListener('click', function()..
JavaScript 2020. 10. 10. 01:45

DOM 조작

DOM이란? DOM(Document Object Model) 문서 객체 모델은 웹 페이지에 대한 인터페이스다 HTML을 파싱해서 노드 트리 구조로 만든 것을 DOM이라고 한다 자바스크립트는 이 DOM을 이용해서 작동한다 조작 방법 말했듯 우리는 자바스크립트를 이용해 DOM을 조작해서 시각적 효과나, 우리가 원하는 동작들을 구현할 수 있다 언제나 그렇듯 기본 CSS는 생략 JS DOM A B C D 엘리먼트 가져오기 자바스크립트로 B상자의 색을 바꾸고 싶다면 어떻게 해야할까? 우선 html의 test b클래스인 div를 자바스크립트 속으로 가져와야한다 html 조작하기 위한 여러 메소드를 제공해주는 document객체를 사용해야한다 const b = document.querySelector('.b'); c..
JavaScript 2020. 10. 8. 01:49

var, let, const

책과 내가 배운 강의들에는 var만을 사용해서 변수를 선언하고 초기화 했는데 응용 강의를 듣다보니 var의 사용을 자제하고 let과 const의 사용을 권장했다 그래서 찾아봤다 let, const 유효 범위 let,const도 var처럼 변수 선언인데 스코프의 유효 범위가 다르다 var은 함수 단위의 스코프였지만 let과 const는 블록 단위의 스코프를 가진다 if(true){ let test = 110; } console.log(test); 위의 코드가 var로 선언되어 초기화되었다면 아무 문제없이 콘솔창에 110을 찍었겠지만 결과는 그렇지 못하다 에러를 뱉는다 블록 단위란 {로 시작해서 }로 끝나는 그 괄호 안의 범위를 블록 단위라고 한다 if(true){ let test = 110; } conso..
JavaScript/ES6 2020. 10. 7. 02:35

prototype

프로토타입 자바스크립트의 모든 객체는 자신의 프로토타입(부모)을 가르키는 [[Prototype]] 이라는 숨겨진 프로퍼티를 가지고 있다 var a = { b:1, c:"123", d:{ e: 'e' } }; console.log(a.toString()); 이 결과는 살짝 의문점을 갖게 만든다 우리는 객체 a에 toString()이라는 메소드를 생성해 준적이 없는데 아무런 에러 없이 정상적인 출력이 되고 있다 어째서 일까? console.dir(a); 로 객체 a를 크롬에서 출력해보면 다음과 같은 값을 얻을 수 있다 순서대로 b,c,d의 값이 출력되는 것을 볼 수 있지만 맨 마지막의 __proto__는 뭘까? 바로 이 프로퍼티가 맨 위에서 얘기한 숨겨진 프로퍼티인 [[Prototype]]이며 다른 객체를 ..
JavaScript/기초 2020. 10. 3. 22:02