국비필기노트/HTML & CSS & JS (15) 썸네일형 리스트형 js_mouse(Event) click 클릭했을 때 발생 dblclick 더블 클릭했을 때 발생 mousedown 마우스를 누를 때 발생 mouseup 마우스버튼을 땔 때 발생 mousemove 마우스를 움직일 때 발생 mouseover 마우스가 엘리멘트에 진입할 때 발생 mouseout 마우스가 엘리멘트에 빠져나갈 때 발생 contextmenu 컨텍스트 메뉴가 실행될 때 발생 예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 event type info click db.. JS_cursor,submit(Event) Cursor 커서의 위치에 따라서 event를 수행할 수 있다. 1)Change 1 2 3 4 5 6 7 8 9 10 11 let t = document.getElementById('target'); t.addEventListener('change',function(event){ document.getElementById('result').innerHTML = event.target.value; }); Colored by Color Scripter cs Change: 커서가 밖으로 빠져나올 때 function을 실행한다. text안에서 커서가 밖으로 빠져나오게되면 change가 이를 캐치하여 input에 썼던 내용이 p태그에 innerHTML로 인하여 삽입이 되는 코드다. 2)focus, blur 1 2.. JS_기본동작의 취소(Event) 기본동작의 취소 웹브라우저 구성요소들은 a태그가 클릭이 되면 href 주소로 이동이 되는 것과 같은 기본적인 동작 방법을 가지고 있다. 이를 모두 이벤트라고 칭하는데 우리는 JS를 통해 어떠한 조건이 충족이 되면 이런 기본동작들을 중단시킬 수 있다. inline 방식 1 2 3 4 5 6 7 8 9 10 11 12 13 prevent event on naver Colored by Color Scripter cs 해당문은 checkbox가 check가 되어있으면 해당문을 막아주고 check가 해제되어있으면 event를 실행시켜주는 구문이다. event를 막아주는 방법은 onclick="if(document.getElementById('prevent').checked) return false; 으로 even.. JS_onclick(Event) 이벤트(event)란? 이벤트는 어떠한 사건을 의미한다. 브라우저에서 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. onclick 속성의 자바스크립트 코드는 사용자가 이 버튼을 클릭했을 '때' 실행된다. 개발자는 어떤 일이 발생했을 때 실행되어야하는 코드를 등록하고 브라우저는 그 일이 발생했을 떄 등록된 코드를 실행하게 되는데 이러한 방식을 이벤트 프로그래밍이라고 한다. onclick 사용자가 버튼을 클릭했을 때 실행 event target 이벤트가 일어날 객체를 의미하며 여기서는 버튼 태그에 대한 객체가 타겟이 된다. event type 이벤트의 종류를 의미한다 event handler 이벤트가 발생했을 때 동작하는 코드를 의미하며 .. JS_document.getElementsByTagName ▶document.getElementsByTagName 1) getElementsByTagName 자바스크립트를 제어하기위해 제어의 대상에 해당되는 객체를 찾는 메서드로서, 태그명을 기준을 조회한다. 그리고 리스트들을 유사배열에 담아서 변환한다. 유사배열의 의미하는바는 배열은 아니지만 배열접근연산자를 사용하여 각 요소들에 접근 및 조회할 수 있다는 말이다. HTML CSS JavaScript "li" 태그를 가진 모든 항목의 style.color를 tomato색으로 변환하기위해 해당 메서드를 사용하였다. 2) getElementsByClassName 자바스크립트를 제어하기위해 제어의 대상에 해당되는 객체를 찾는 메서드로서, Class 속성값을 기준으로 조회한다. HTML CSS JavaScript "ac.. JS_객체(Window, Location, History, Navigator) ▶Window 객체 1) Window객체란? 윈도우 객체는 자바스크립트의 전역객체이다. 즉, 자바스크립트의 모든 객체는 window 객체의 하위 객체로서 존재한다. 그러므로 내장 객체에 대한 접근 방법은 window.내장객체이름.함수이름( ) ; 이지만, 모든 객체가 window안에 내장되어 있기 때문에, window객체를 명시적으로 선언하는 것은 내장객체이름.함수이름( ) ; 처럼 생략하는 것이 가능하다. 2) window.open( ) 함수 자바스크립트의 모든 기능이 window객체의 하위기능이기도 하지만, 그 중 브라우저의 창을 제어하는 것과 관련된 open( ) 함수가 window 객체에 직접적으로 포함되어있기에 이를 window( )로 예시를 들어보자 open함수는 새로운 창을 여는 함수이다. .. JS_객체(Object) ▶객체란? 배열과 함께 참조자료형에 속한다. 하나의 데이터형태에 여러개의 데이터를 표현하기 위해 사용하는 자료의 형태이다 객체는 배열과 주로 비교가 많이 되는데 객체의 가장 큰 장점은 직관적이라는 것이다. 배열은 people = [1,2,3] 형태로 저장되기에 코드를 처음 보는 사람들은 이 배열이 어떤 값을 저장하는지 주석이나 명확한 변수명이 없다면 알 수 없다. 그러나 객체는 " : " 을 사용하여 코드의 명확성을 더해 협업을 하기에 유용하다고 할 수 있다. ▶객체의 생성 1) { } 사용하여 객체생성 let people = { }; people이라는 변수는 비어있는 객체를 가지고있는 변수가 된다. 이를 빈 객체라고 부른다. 2) 생성자 형태로 객체생성 let grade = new Object( ){ .. JS_스크립트 로딩제어(defer, async, onload) 1) defer html 페이지가 전부 로딩된 이후에 script가 실행된다. html중간에 스크립트를 만나면 바로 실행시키지않고 지연시켜 html이 모두 종료된 이후 해당 스크립트를 실행한다. 스크립트를 가장 나중에 실행하는 지연특성 2) async html 중간에 스크립트를 만나면 html파싱을 중지하고 스크립트를 실행시키고 그 실행이 끝나면 html 파싱을 진행한다. 스크립트를 바로 실행시키는 비동기적 특성 3) onload window.onload = function(){ let hw = document.getElementById('hw'); hw.addEventListener('click',function(){ alert("Hello world"); }); } 문서에 포함된 모든 페이지 구성요소.. JS_여러가지함수들(기본함수, date, setInterval, 현재시각출력) ▶자주사용하는 기본함수 Max 최대값 MIN 최소값 Math.PI 원주율 Math.round() 소수점 반올림 Math.abs() 절대값 Math.random() 난수값(랜덤) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 //MAX let max = Math.max(100,123); document.write(max); //123 //MIN let min = Math.min(100,123); document.write(min); //100 //원주율 document.write(Math.PI); // 3.14159... //소수점반올림 let num1 = 3.4543; document.write(Math.round(num1)); //4 /.. JS_주요 내장 함수 ▶내장함수 종류 문자열 함수 alert 주어진 문자열을 확인 대화창으로 화면에 표시한다. confirm 주어진 문자열이 표시되는 확인/ 취소 대화창을 화면에 표시 prompt 주어진 문자열이 제목으로 표시되는 값을 입력받기 위한 대화창 eval 주어진 문자열을 수식으로 변환하여 리턴 Number 주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴 parseInt 주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴 inNaN 주어진 문자열이 숫자형식이 아니면(문자열..) true, 숫자 형식이면 flase 를 리턴한다. ▶내장함수 예시 1) eval(문자열) 1 2 3 4 5 6 7 8 9 let a = "1+1"; let b = 1+1; let c = eval("1+1.. 이전 1 2 다음