JavaScript (98) 썸네일형 리스트형 15장 - DOM을 이용한 이벤트 처리기 - DOM을 사용하면 자바스크립트가 주인이 되어 HTML 요소를 가져와서 이벤트 처리기를 연결 할 수 있음 - 웹요소.onclick =함수 ; - querySelector(클래스 이름, id 이름 etc) 사용 - 버튼 클릭해서 글자색 바꾸기 1) 웹 요소를 변수로 지정 & 미리 만든 함수 사용 //방법 1: 웹 요소를 변수로 지정 & 미리 만든 함수 사용 var changeBttn = document.querySelector("#change"); changeBttn.onclick = changeColor; function changeColor() { document.querySelector("p").style.color="#f00"; } 2) 웹 요소를 따로 변수로 만들지 않고 사용 //방법 2: 웹 .. 15장 실습 2 DOCTYPE html> 버튼을 클릭해서 상세 설명 표시하거나 닫기 #item { position:relative; /*문서의 흐름에 맞게 배치 + 위칫값 지정*/ width:500px; height:auto; padding:15px 20px; margin:auto; } button { background-color:rgba(255,255,255,0); padding:5px; border:1px solid #ccc; font-size:0.8em; } button:focus { background-color:red; } .over { position:absolute; /*relative값을 사용한 상위요소를 기준으로 위치를 지정해 배치*/ left:30px; bottom:30px; background-co.. 15장 - 이벤트와 이벤트 처리기 - 이벤트 : 버튼을 클릭하거나 항목을 선택하는 것 - 이벤트 처리기 : 이벤트가 발생했을 때 처리하는 함수 - 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결 - 1. 마우스 이벤트 종류설명click사용자가 HTML 요소를 클릭할때 이벤트 발생dbclick사용자가 HTML 요소를 더블클릭할때 이벤트 발생mousedown사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생mousemove사용자가 요소 위에서 마우스 포인터를 움직일때 이벤트 발생mouseover마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생mouseout마우스 포인터가 요소를 벗어날 때 이벤트 발생mouseup사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗼 때 이벤트 발생 2. 키보드 이벤트 종류설명keydown사용자가.. 15장 - 익명 함수/ 즉시 실행 함수/ 화살표 함수 1. 익명 함수 - 이름이 없는 함수 - 익명함수는 함수 자체가 식(expression)이므로 함수를 변수에 할당할 수 있으며, 또한 다른 함수의 매개변수로 사용 가능 DOCTYPE html> 익명함수 실행하기 var sum = function(a,b) { //익명함수를 선언한 후 변수 sum에 할당 return a+b; } document.write("함수 실행 결과:"+sum(10,20)); 2. 즉시 실행 함수 - 한번만 실행하는 함수라면 함수를 정의하면서 동시에 실행 가능 - 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석 DOCTYPE html> 즉시 실행 함수 만들기 body { padding-top: 20px; text-align:center; } .accent { font-wei.. 15장 실습 DOCTYPE html> 1부터 n까지 숫자를 더하는 함수 function calcSum(n) { var sum =0; for(let i=1; i 15장 - 재사용할 수 있는 함수 만들기 -함수의 재사용성 - 입력을 바꿔 여러 번 사용할 수 있는 성질 -매개변수 (parameter) - 함수를 선언할때 외부에서 값을 받아 줄 변수 - 선언된 함수 안에서만 사용 -값을 반환(return) - 결괏값을 함수 밖에서 사용하려면 함수를 실행한 위치로 돌려줘야함 -인수(argument) - 매개변수가 있는 함수를 호출할 때 실제 값 부분 -매개변수를 사용한 함수 선언하고 호출하기 DOCTYPE html> 매개 변수를 사용한 함수 선언하고 호출하기 function addNumber(num1, num2) { let sum= num1 + num2; return sum; } let result = addNumber(2,3); document.write("두 수를 더한 값:" + result); - 매개변.. 15장 - let과 const var- 함수 영역(레벨)의 스코프 let, const - 블록 영역의 스코프 let - 값이 자주 바뀌는 변수 const - 재할당이 없는 변수 1. let을 사용한 변수의 특징 1) 블록안에서만 쓸 수 있는 변수 - 변수를 선언한 블록({}로 묶은 부분)만 유효하고 블록을 벗어나면 사용할 수 없음 DOCTYPE html> 블록 변수 선언하기 function calcSum(n) { let sum = 0; for(let i = 1; i DOCTYPE html> 전역 변수 선언하기 function calcSum(n) { sum=0; //전역 변수 선언 for(let i = 1; i < n+1; i++) { sum+=i; } } calcSum(10); console.log(sum); //전역 변수 사용 2).. 15장 - var를 사용한 변수의 특징 1. 지역 변수와 전역 변수 - 지역변수 (로컬 변수) : 한 함수 안에서만 사용할 수 있는 변수 : var 변수이름 - 전역변수(글로벌 변수) : 스크립트 소스 전체에서 사용할 수 있는 변수 : 함수 밖에서 선언 : 함수 안에서 var예약어 없이 선언 - var예약어를 사용한 지역변수와 전역변수 DOCTYPE html> var 예약어를 사용한 지역변수와 전역 변수 function addNumber() { var sum=10+20; //지역 변수 sum 선언 multi=10*20; //전역 변수 multi 선언 } addNumber(); console.log(multi); //전역 변수 사용 2. var와 호이스팅 - 호이스팅 : 변수의 선언과 할당을 분리해서 선언 부분을 스코프에 가장 위쪽으로 끌어올리.. 이전 1 ··· 8 9 10 11 12 13 다음
