분류 전체보기 (894) 썸네일형 리스트형 15장 마무리 문제 2 DOCTYPE html> 마무리 문제 2 function compareNumber(num1, num2) { var num1=parseInt(prompt("비교할 첫번째 숫자")); var num2=parseInt(prompt("비교할 두번째 숫자")); if(num1>num2) { alert(num1 + "이 더 큽니다."); } else if(num2>num1) { alert(num2 + "이 더 큽니다."); } else { alert("두 수는 같습니다.") } } compareNumber(); 15장 마무리 문제 1 DOCTYPE html> 마무리 문제 1 function sumMulti(x,y) { var x = parseInt(prompt("첫번째 숫자를 입력하시오:")); var y = parseInt(prompt("두번째 숫자를 입력하시오:")); let sum=0; if(x===y) { sum=x*y; //두 수의 값이 같으면 곱하기 } else { sum=x+y; //두 수의 값이 다르면 더하기 } console.log(sum); } sumMulti(); sumMulti(); 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); - 매개변.. 이전 1 ··· 97 98 99 100 101 102 103 ··· 112 다음
