1. 조건문
- 자바 언어와 마찬가지로 동일한 문법의 조건문이 있다.
if,if ~ else,삼항연산자,switch-case,for,중첩된 for등 기타 복합적 조건문들이 있다.
var myage = 29;
if( myage > 19 ){
document.write("<h1>19살 초과 성인입니다.</h1>");
} else {
document.write("<h1>성인이 아닙니다.</h1>");
}- switch
var grade = "B";
switch (grade) {
case A :
document.write("<h1>91점에서 100점 사이입니다.</h1>");
break;
case B :
document.write("<h1>81점에서 90점 사이입니다.</h1>");
break;
case C :
document.write("<h1>71점에서 80점 사이입니다.</h1>");
break;
case F :
document.write("<h1>70점 이하입니다.</h1>");
break;
}2. 반복문
2-1. for문
- for문은 사람이 직접 처리하기에
부담스러운 반복적인 작업을 처리하기에 매우 용이
// 1부터 100까지 누적된 합
var sum = 0;
for (var i =1; i<=100; i++){
sum += i;
}
document.write("<h1>1부터 100까지의 합은 " + sum + "입니다.</h1>");2-2. while문
// 1부터 100까지의 합
var sum = 0;
var i = 1;
while (i<=100){
sum += i;
i++;
}
document.write("<h1>1부터 100까지의 합은 " + sum + "입니다.</h1>");2-3. 중첩된 반복문
- for ~ if 문
// 1~100중 짝수의 합, 홀수의 합을 각각 구하여라
var sum1 = 0;
var sum2 = 0;
for (var i =1; i<=100; i++) {
if( i % 2 == 0 ){
sum1 += i;
} else{
sum2 += i;
}
}
document.write("<h1>짝수들의 합 = " + sum1 + "입니다.</h1>");
document.write("<h1>홀수들의 합 = " + sum2 + "입니다.</h1>");- 이중 for 문
// 테이블 작성하기
document.write("<table border='1' style='text-align:center'>");
for (var i =0; i<6; i++){
// 테이블 행
document.write("<tr>");
// 테이블 열
for (var j =0; j<7; j++){
document.write("<td>(" + i + "," + j + ")</td>");
}
}
document.write("</tr>");
document.write("</table>");prompt()메서드
- 해당내용과 입력요소를 가지는 팝업창을 띄워주는 함수
prompt('아이디를 입력해주세요'): 아이디를 입력해주세요. 질문을 출력하는 팝업창, 입력요소는 빈값이다.
prompt('아이디를 입력해주세요','admin'): 그 입력요소에 admin이 담겨있다.
3. 함수
- 자바에서의 메서드 역할, 자바스크립트의 기능이다.
3-1. 함수의 정의
function 함수이름(){
...실행할 구문...
}3-2. 함수의 호출
함수이름();3-3. 파라미터가 있는 함수
function f(x, y){
...실행할 구문...
}3-4. 파라미터가 있는 함수 호출
f(x, y);파라미터가 있는 함수와 prompt창을 이용한 자바스크립트 예제
// 매개변수(n)이 있는 함수 : 입력값까지의 더하고 출력하는 기능 function calcSum(n){ var sum = 0; // n까지의 합 for (let i = 1; i < n + 1; i++) { sum += i; } // 화면 단에 출력 document.write("1부터 " + n + "까지 더하면 " + sum); } // prompt창에 얼마까지 더할까요? 에 대한 입력값 할당 var userNumber = prompt("얼마까지 더할까요?"); // 만약에 입력값이 null값이 있다면 if (userNumber != null) { // userNumber는 문자형이기 때문에 숫자형으로 형변환한 값을 함수 calcSum(); 호출 calcSum(parseInt(userNumber)); }
3-5. 리턴형 함수
function f(x){
return x + 1;
// return 키워드 만나면 함수 실행중단
}
var y = f(5);
// 6- 자바스크립트의 함수는 처리 도중 return 문을 만나게 되면 그 즉시 실행을 중단한다.
- 이러한 특성을 이용하여, 특정 조건이 충족되지 않을 경우 등에 대한 처리 중단을 목적으로 return 문을 사용할 수 있으며, 리턴값 없이 처리를 중단하고자 하는 경우에는 return 키워드만 사용한다
- 이 때, 값이 없는 리턴 결과를 변수에 대입한 경우, 정의되지 않은 값인 "undefined"가 대입된다.
3-6. 익명함수
- 이름이 없는 일회성 호출하는 함수이다.
- 바로 실행되는 특징이 있다.
( function(){ // 익명함수 선언
.. 실행할 구문..
} )(); // 인수로 바로 실행3-7. 화살표함수
- 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법
1. 매개변수의 지정
- 매개변수가 없는 경우
() => {
..실행할 구문..
}- 매개변수가 한 개인 경우
x => {
..실행할 구문..
}- 매개변수가 여러개인 경우
(x, y) => {
..실행할 구문..
} 2. 함수 몸체 지정 방법
x => {
return x * x
}- 함수 몸체가 한 줄의 구문이라면 중괄호를 생략가능하다. (암묵적으로 return이 된다.)
x => x * x삼항연산자를 활용한 화살표함수 예제
// "나이를 알려주세요" 질문과 입력요소에 19의 값 담은 prompt창 var age = prompt("나이를 알려주세요",19); // 나이가 19 미만일 경우에 대한 출력값은 // 삼항연산자 var welcome = (age <19) ? // 19 미만이면 안녕 () => alert("안녕") : // 19 이상이면 안녕하세요! () => alert("안녕하세요!"); // welcome 호출 welcome();
3-8. 콜백함수
- 함수의 파라미터로 함수를 넘기는 것
function cry(){
console.log("Action : cry");
}
function sing(){
console.log("Action : sing");
}
function checkMood(mood, goodCallback, badCallback){
// 함수 자체를 매개변수로 호출
if (mood == 'good'){
goodCallback()
} else {
// badCallback()함수를 호출하고
badCallback()
}
}
// 콜백함수
// checkMood() 함수에 sad를 입력을 하면,
// badCallback 변수에 cry함수를 입력하므로, console.log("Action : cry")를 실행한다.
checkMood('sad',sing, cry);
Quantum Jump to class for java….