JavaScript (15) 썸네일형 리스트형 [JavaScript] window객체, history, form [JavaScript] 이벤트 리스너 이벤트 리스너 란? 이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. 이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다. 특정 DOM요소에 이벤트 리스너를 등록할 때는 addEventListener를 사용한다. DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션) click 이벤트 : 클릭했을 때 이벤트 발생 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 이벤트 리스너 #box{ width: 100px; height: 100px; backgro.. [JavaScript] 셀렉터, 콜백함수 셀렉터 ( 선택자 ) document.getElementsByTagName(태그명) -> 복수의 HTML Tag를 선택하여 객체를 반환한다. document.getElementById(아이디명) -> 1개의 ID에 대한 값들을 가져 온다 document.getElementsByClassName(클래스명) -> 복수의 Class의 객체(배열) 모두를 가져 온다 document.querySelector(선택자) -> 단수개의 값만을 가져온다. 만약 여러개가 있다면 처음 하나만 가져 온다. document.querySelectorAll(선택자) -> 복수의 값을 배열로 가져 온다. - 버튼 클릭하면 id, class 명에 따라서 색상 변경 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .. [JavaScript] Eclipse에 jQuery 라이브러리 셋팅법 JQuery란? 보다 효율적이고 직관적이게 엘리먼트를 선택하고 제어할 수 있도록 해주는 JavaScript 라이브러리 Eclipse에 jQuery세팅법은 두가지 방법이 있는데 첫번째 방식 보다는 두번째 방식을 추천한다. 1. https://jquery.com/download/ 사이트 접속 후 설치하고자 하는 태그 복사하여 사용 노란색으로 표기된 부분 클릭 코드 전체 복사 jquery-3.6.0.js 파일을 만들어준 후 해당 파일에 코드 붙여넣기 js파일 생성 후 jquery-3.6.0.js 넣어주기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 jQuery 라이브러리 $(document).ready(function(){ console.log('jQuery 라이브러리 연결완료!'); }).. [JavaScript] 마우스, 키보드 이벤트 이벤트 이벤트 트리거 이벤트를 발생시키는 신호 ex) click,dblclick,mouseover,keydown,keypress,... 이벤트 핸들러 실제 발생되는 이벤트 내용 html에서 사용하는 요소에게 이름을 부여하는 방식 - id - class - name 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 마우스 이벤트 #box { width: 100px; height: 100px; cursor: pointer; background-color: coral; } function func1(obj){ obj.style.backgroundColor="lightblue"; } functio.. [JavaScript] 랜덤, Math함수를 사용하여 UpDown 게임 만들기 랜덤, Math함수를 사용하여 UpDown 게임 만들기 Math함수 정리 Math.min(x,y,z....) 가장 작은 값 반환 Math.max(x,y,z....) 가장 큰 값 반환 Math.random() 0보다 크거나 같고 1보다 작은 무작위 숫자 반환 Math.round(x) 소수점 첫 번째 자리에서 반올림 후 반환 Math.floor(x) 인수와 같거나 작은 수 중에서 가장 큰 정수 반환 Math.ceil(x) 인수와 같거나 큰 수 중에서 가장 작은 정수 반환 Math.abs(x) x의 절댓값 반환 Math.sqrt(x) x의 제곱근 반환 Math.cbrt(x) x의 세제곱근 반환 Math.exp(x) e의 x제곱근 값을 반환 Math.log(x) x의 자연로그 값을 반환.(ln x) Math.l.. [JavaScript] JavaScript 란? 변수 선언, 데이터타입, 제어문, 함수, 객체, 배열 JavaScript 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, JavaScript 함수는 웹 사이트의 사용자 경험을 개선할 수 있음 script언어를 해석하는 번역가는 브라우저에 포함되어 있음 -> 각 브라우저마다 실행결과가 다를수있음에 유의 기준: 크롬 JS는 크게 두가지로 사용됨 1) 연산,기능 처리 ex) 비밀번호와 비밀번호 확인 2) 웹 페이지에서 요소(태그)의 기능 ex) 위젯의 움직임 변수선언 var num=10; var name='홍길동'; // 전역 변수 function func(){ var score=57; // 지역 변수 } 데이터타입(자료형) 숫자형(Number) Boo.. 이전 1 2 다음
