14-4 조건문 알아보기
1. if문과 if else문
if (조건) { 조건 결괏값이 true일 때 실행할 명령 }
if (조건) { 조건 결괏값이 true일 때 실행할 명령 } else { 조건 결괏값이 false일 때 실행할 명령 }<script> var userNumber = prompt("숫자를 입력하세요."); if(userNumber !== null) { //입력값이 유효하면 if (userNumber % 3 === 0) { alert("3의 배수입니다."); } else { alert("3의 배수가 아닙니다."); } } </script>
프롬프트 창에서 취소 버튼 누르면 변수에는 null이 저장된다.
따라서 usernumber가 null인지 아닌지 확인해야한다.
2. 조건 연산자로 조건 체크하기
만약조건이 한개이고 true일때와 false일때 실행 할 명령이 각각 하나뿐이라면 if~else문 대신에 조건 연산자를 사용하는 것이 간단하다.
(조건) ? true일 때 실행할 명령 : false일 때 실행할 명령
<script>
var userNumber = prompt("숫자를 입력하세요.");
if(userNumber !== null)
(userNumber % 3 ===0) ? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다.");
else
alert("입력이 취소됐습니다.");
</script>3. 논리 연산자로 조건 체크하기
조건을 2개 이상 체크할 경우. 두 조건이 true일 경우와 조건 1개만 true일 경우처럼 여러 경우의 수를 따질 때
or 연산자
기호는 ||를 사용하며, 피연산자 2개중에서 true가 하나라도 있으면 결괏값은 true
<script>
var numberOne = prompt("50미만의 숫자를 입력하세요.");
var numberTwo = prompt("50미만의 숫자를 입력하세요.");
if (numberOne < 10 || numberTwo < 10)
alert("두 개의 숫자 중 최소한 하나는 10 미만이군요.");
else
alert("두 개의 숫자 중 10 미만인 수는 없습니다.");
</script>and 연산자
기호는 &&를 사용하며, 피연산자 2개중에서 flase가 하나라도 있으면 결괏값은 false
<script>
var numberOne = prompt("50미만의 숫자를 입력하세요.");
var numberTwo = prompt("50미만의 숫자를 입력하세요.");
if (numberOne < 50 && numberTwo < 50)
alert("두 개의 숫자 모두 50 미만이군요.");
else
alert("조건에 맞지 않는 숫자가 있습니다.")
</script>not연산자
!기호를 사용하며 true와 false를 반대로 뒤집는다.
<script>
var numberOne = prompt("50미만의 숫자를 입력하세요.");
var numberTwo = prompt("50미만의 숫자를 입력하세요.");
if (numberOne !== null && numberTwo !== null) {
if (numberOne < 10 || numberTwo < 10)
alert("두 개의 숫자 중 최소한 하나는 10 미만이군요.");
else
alert("두 개의 숫자 중 10 미만인 수는 없습니다.");
}
else {
alert("50 미만의 숫자를 입력하세요.");
}
</script>3. switch문
처리할 명령이 많을 때는 if~else 보다 swiych문 사용
switch (조건) { case 값1: 명령1 break case 값1: 명령2 break case 값1: 명령3 break .... default: 명령n //조건과 일치하는 case문이 없을때, break는 쓰지 않음 }
<script>
var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인");
switch (session) {
case "1" : document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>")
break;
case "2" : document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>");
break;
case "3" : document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>")
break;
default: alert("잘못 입력했습니다.");
}
</script>14-5 반목문 알아보기
for문은 초깃값과 반복 크기가 일정할 경우 주로 사용
ex)0~9를 차례대로 반복사용 for(i = 0; i < 10; i++)
while문과 do~while문은 초깃값이나 반복 크기 없이 조건만 주어졌을 때
- for문
for(초깃값; 조건; 증가식) { 실행할 명령 }조건-> 명령 -> 조건식 순으로 실행
- 초깃값: 카운터의 변수를 초기화 .0 이나 1부터 시작
- 조건: 명령을 반복하기 위한 조건을 체크. 이 조건을 만족해야 다음에 오는 명령을 실행 할 수 있다.
- 증가식: 명령을 반복한 후 실행. 보통 카운터 변수를 1 증가 시키는 용도로 사용
<script>
var i;
var sum = 0;
for(i = 1; i < 6; i++) {
sum += i;
}
document.write("1부터 5까지 더하면 " + sum);
</script>-중첩된 for문 사용하기
안쪽 for문 -> 바깥 for문
<script>
var i, j;
for (i = 1; i <= 9; i++){
document.write("<div>");
document.write("<h3>" + i + "단</h3>")
for (j = 1; j <= 9; j++) {
document.write(i + "x" + j + "=" + i*j + "<br>");
}
document.write("</div>")
}
</script>-while문
조건을 체크하고 true라면 실행
-조건이 flase라면 명령을 한번도 실행하지 않을 수 있다.
let 변수 = 초깃값; while (조건) { 실행할 명령 증감식; }
-do while문
일단 명령을 실행 한 후 조건 체크
-조건이 false여도 명령은 최소 한번은 실행
do { 실행할 명령 } while (조건)
while문으로 팩토리얼 만들기
<script>
var n = prompt("숫자를 입력하세요.);
var msg = "";
if (n !== null) { // '취소' 버튼을 누르지 않았는지 체크
var nFact = 1; // 결과 값
var i = 1; // 카운터
while(i <= n) {
nFact *= i;
i++;
}
msg = n + "! = " + nFact; // 결과 값을 표시할 문자열
}
else
msg = "값을 입력하지 않았습니다.";
document.write(msg); // 결과 표시
</script>-break문
조건이 종료되기 전에 반복문을 빠져나와야 할 경우 사용
<script>
var i, j;
for (i = 1; i <= 9; i++) {
document.write("<div>");
document.write("<h3>" + i + "단</h3>");
for (j = 1; j <= 9; j++) {
document.write(i +" X " + j + " = " + i*j + "<br>");
}
document.write("</div>");
if(i === 3) break;
}
</script>-continue문
주어진 조건에 해당하는 값을 만나면 해당 반복문을 건너뜀. 반복문의 맨 앞으로 되돌아가며 다음 과정으로 넘어가도록 한다.
1부터 10까지 짝수만 더하기
<script>
var i;
var n = 10;
var sum = 0;
for (i = 1; i <= n; i++) {
if (i % 2 === 1)
continue
sum += i;
document.write(i + " ------ " + sum + "<br>");
}
</script>자리배치도 표 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자리 배치도</title>
<style>
table, td {
border:1px solid #ccc;
border-collapse: collapse;
}
td {
padding:5px;
font-size:0.9em;
}
</style>
</head>
<body>
<h1>자리 배치도</h1>
<script>
var i, j;
var memNum = prompt("입장객은 몇 명인가요?"); // 전체 입장객
var colNum = prompt("한 줄에 몇 명씩 앉습니까?"); // 한 줄에 앉을 사람
if (memNum % colNum == 0)
rowNum = parseInt(memNum / colNum);
else
rowNum = parseInt(memNum / colNum) + 1;
// document.write("모두 " + rowNum + "개의 줄이 필요합니다.");
document.write("<table>");
for (i = 0; i < rowNum; i++) {
document.write("<tr>");
for (j = 1; j <= colNum; j++) {
seatNo = i * colNum + j; // 좌석 번호
if (seatNo > memNum) break;
document.write("<td> 좌석 " + seatNo + " </td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>함수와 이벤트
15-1 함수 알아보기
함수를 선언히고 함수 이름을 적어 호출하면 실행이 가능하다.
함수 선언 예약어는 function을 사용하고 , ()안에 실핼할 여러 명령을 넣는다.
function 함수명() { 명령 }
자바스크립트가 함수를 해석할 때 함수 선언을 먼저 헤석해서, 함수 선언 위치는 프로그램에 영향을 주지 않는다.
15-2 var를 사용한 변수의 특징
var이 있는데 let/const이 있는 이유
변수의 scope
- 지역 변수(로컬): 한 함수 안에서만 사용, var
- 전역 변수(글로벌): 스크립트 소스 전체에서 사용 , var 예약어 빼고 선언 var의 문제점
문제1 지역/전역 구별해야함
문제2 재 선언 ,재 할당가능
문제3 호이스팅(자바스크립트가 변수의 선언과 할당을 분리해서 선언 부분을 위로 끌어서 해석함. 변수를 선언하기 전에 사용해도 자료형인 undefined 값을 갖는다)15-3 let과 const의 등장
var은 함수영역(레벨) 스코프를 갖지만, let과 const는 블록영역({}) 스코프를 갖는다. - 값이 자주 바뀌는 변수라면 let, 재할당과 재선언이 없는 변수하면 const를 사용.
let
let 넣으면 블록 변수({}), 빼면 전역 변수이지만
var과 다른점은 재할당은 가능하지만 재선언이 안된다.
호이스팅이 없다.
const
변하지 않으르 값을 변수로 선언할 때 사용
블록 스코프이며 ,재선언 재할당 안됨
자바스크립트 변수 사용법
1) 전역변수는 최소한으로
2) var변수는 함수의 시작 부분에서만 선언
내부 호이스팅 오류 줄일 수 있다
3) for문에서 카운터 변수를 사용할 때 var예약어 사용하지 않기
4) var보다 let사용하기
15-4 재사용할 수 있는 함수 만들기
매개변수를 사용한 함수 만들기
addNumber() 안에 num1,num2가 매개 변수
addNumber(2, 3)처럼 함수를 실핼 할 때 괄호안에 넣은 숫자를 인수라고 한다.
<script>
function addNumber(num1, num2){
var sum = num1 + num2;
return sum;
}
var result = addNumber(2, 3); //함수 호출
document.write("두 수를 더 한 값 : " + result);
//document.write(`두 수를 더 한 값, ${result}`);
</script> 소스 간단하게
<script>
function addNumber(num1, num2){
return num1 + num2;
}
var result = addNumber(2, 3);
document.write("두 수를 더 한 값 : " + result);
</script> 15-5 함수 표현식
1)익명함수
<script>
var sum = function(a, b){
return a + b;
}
document.write("함수 실행 결과 : " + sum(10, 20) );
</script> 2)즉시 실행 함수
(function() { 명령 }());(function() { var userName = prompt("이름을 입력하세요."); document.write("안녕하세요? <span class='accent'>" + userName + "</span>님!"); }()); </script>
매개변수가 있는 즉시 실행 함수
(function(매개변수) { 명령 }(인수));
3)화살표 함수
익명 함수에서만 사용가능
(매개변수) => {함수 내용}
- 매개변수가 없는 경우
const hi = () => {return "안녕하세요" }; const hi = () => "안녕하세요?"; //중괄호 생략
- 매개변수가 1개인 경우
let hi = function(user) { document.write(user + "님, 안녕하세요?"); } let hi = user => {document.write(user + "님, 안녕하세요"); }
- 매개변수가 2개 이상인 경우
let sum = function(a, b) { return a + b; } let sum (a,b) => a + b;
15-6 이벤트와 이벤트 처리기
1. 마우스 이벤트
2. 키보드 이벤트
3. 문서로딩 이벤트
4. 폼 이벤트
이벤트 처리기(이벤트 핸들러)
<태그 on이벤트명 = "함수명">
