javascript (4) 썸네일형 리스트형 Step02_event3 (이벤트 목록, 좌표값) 배운 것들을 응용해서 예제를 작성해보자 1,2번 예제는 2022.07.07 - [javascript] - Step02_event (addEventListener) 2022.07.07 - [javascript] - Step02_event2 (css에 접근하기) 이전 배운 것들을 참고하여 작성하였다. 3번 예제는 구글링을 하여 작성하였다. https://developer.mozilla.org/ko/docs/Web/API/MouseEvent/clientX 해당 글에서 마우스 좌표값을 구하는 공식이 있는데 해당 내용을 예제에 맞게 변경하고 싶어서 더 찾아봤다. 자주 쓰일 것 같은 이벤트 목록 keydown : 키보드를 눌렀을 때 실행 keyup : 키보드를 눌렀다가 놓았을 때 실행 mousedown : 마우스 .. Step02_event2 (css에 접근하기) 최근까지 javascript로 html에 접근하는 방법을 배웠다면 이번에는 css에 접근하고 변경하는 방법을 배워보자. myDiv를 id 값으로 가지고 있는 div를 변수 div1으로 지정하여 css를 변경했다. 물론 변수를 지정하지 않고 작성해도 가능하다. css 작성법과 약간의 차이가 있다. javascript에서 css를 수정할때 -등의 연산자를 주의해서 작성해야하는 것이다. 예시의 backgroundColor 처럼 여러 단어로 조합된 css property 는 - 대신에 다음 단어의 첫글자를 대문자로 작성한다. myDiv는 변수 선언후 css를 작성하고, yourDiv는 변수 선언하지 않고 css를 작성하였다. 배운 것을 활용한 script 작성 예시이다. Step01_dataType2,3 (boolean type, object type) 프로그래밍에서는 참과 거짓을 나타낼때 사용하는 boolean type이 존재한다. 위의 사진은 boolean type을 사용할때 활용되는 연산 및 연산자를 사용한 예시이다. javascript에 대표적인 3가지 타입이다. 이외에도 다양한 타입이 존재하고 언어별로 차이가 있다. number type : 숫자 타입 string type : 문자 타입 boolean type : 참, 거짓 여러개의 데이터를 하나의 묶음으로 관리하는 경우 object type을 사용하며 let 변수명={key:value, key2:value2}형식으로 작성하면 된다. 예시에서는 let mem1={num:1, name:"김구라", isMan:true}를 작성하였다. number, string, boolean 타입이 하나의 변수명으.. Step01_dataType (let, 변수) javascript는 html, css와는 다르게 동적인 언어라고 할 수 있다. javascript 영역은 head와 body 상관없이 작성 가능하다 브라우저에서 확인 가능한 console 영역 역시 javascript의 영역으로 추후에 작업할때 실험해볼 수 있다. 이렇듯 html과 console 과 같은 영역을 global area(전역)라고 한다. 프로그래밍에는 변수(variable)라는 단어가 존재한다. 변수는 값을 저장할 수 있는 이름 지어진 공간이라고 정의할 수 있다. global area(전역) 공간에서 만들어진 변수를 전역 변수라고 한다. 변수는 필요한 시점에 값을 바꿀 수 있게 해준다. 변수를 만들때는 미리 약속된 예약어 let 을 사용한다. (형태 : let 변수명=값;) let 다음에는.. 이전 1 다음
