수업 시간 테스트 복습

수업 시간에 했던 테스트를 복습해보겠습니다.

//0~100 for문
for(let  i=0; i<=100; i++){
    document.write(i);
}

답: 1 2 3 4 5 ~ 98 99 100

숫자 1부터 100까지를 출력하는 for문을 이용한 간단한 식입니다.

i의 초기값을 0을 정해주고, 조건식을 100보다 작거나 같은 수로 정해준 후 1씩 증가한다는 증감식을 지정해주면,

다음과 같이 1부터 100까지의 정수가 출력됩니다.

//100칸 테이블
let a = 1;
let table = "<table border = '1'>";
for(let i=1; i<=10; i++){
    table += "<tr>";
        for(let j=1; j<=10; j++){
            table += "<td>"+a+"</td>";
            a++;
        }
    table += "</tr>";
}
table += "</table>";
document.write(table);

답:

100칸 데이블

숫자 1부터 100까지가 입력된 100칸 짜리 테이블을 for문을 이용해서 출력하는 식입니다.

기본적인 테이블을 출력하는 식에 테이블 안의 숫자를 1씩 증가해준다는 식을 더하면 됩니다.

 

우선, 테이블 안에 입력될 숫자의 초기값을 정해줍니다. (let a = 1;)

그 다음은 테이블을 입력해주는 과정입니다. 

테두리를 1로 정하면 답에서 보이는 것과 같은 두께의 테이블이 형성됩니다. 

 

그 다음 for문으로 테이블의 칸의 갯수를 정해줍니다.

행과 열 모두 정해주어야 하기 때문에 중첩으로 for문을 이용합니다.

 

이 때, a++; 즉 a의 값이 1씩 증가한다는 a의 증감식을 td태그 아래에  써주는 것을 잊지 말아야 합니다.

//20단 구구단
for(let i=20; i<=20; i++){
    for(let j=1; j<=9; j++){
        document.write(i+"*"+j+"="+(i*j),"<br>");
    }
}

답:

20단

구구단을 "i * j = i 와 j 의 곱하기 값" 의 형태로 for문을 중첩으로 써서 출력하는 식입니다. 

문자가 들어가는 식이기 때문에 문자를 큰 따옴표("")안에 꼭 넣어주어야 실행이 됩니다. 

 

20단만 출력하면 되기 때문에 i의 초기값과 조건식은 20으로 고정해줬습니다.

그리고j의 값은 1단부터 9단까지 출력을 해줘야 하기 때문에

초기값은 1, 범위는 9보다 작거나 같다로 정했습니다.

//1~100까지 중 짝수의 합
let sum = 0;
for(let i=1; i<=100; i++){
    if(i % 2 == 0){
        sum = sum + i;
    }
}
document.write(sum);

답: 2550

for문과 if문을 이용해서 1부터 100까지의 숫자 중 짝수의 합을 구하는 식입니다.

 

우선, 짝수를 구하는 식은 간단합니다.

%를 이용해서 2로 나누었을 때 나머지 값이 0과 같으면 출력한다는 조건을 걸면 됩니다.

2로 나눠서 나머지가 0이면, 2로 나누어 떨어진다는 의미이므로, 짝수이기 때문입니다.

 

1부터 100까지의 범위와 증감식은 for문을 이용해서 쉽게 구할 수 있고,

합을 구하는 식도 간단합니다.

 

범위 내의 숫자들을 서로 더하는 식을 만들어 주어야 하기 때문에

sum이라는 키의 초기값을 0으로 정하고, sum = sum + i; 로 정해주면,

i의 값끼리 더한 수의 결과값을 구할 수 있게 됩니다.

//1~100까지 짝수 파 홀 빨
for(let i=1; i<=100; i++){
    if(i % 2 ==0){
        document.write("<span style= 'color:blue'>"+i+"</span>");
    } else {
        document.write("<span style= 'color:red'>"+i+"</span>");
    }
}

답:

span style 태그를 이용해서 숫자에 색을 주는 식입니다.

if 와 else 식을 이용해서 짝수와 홀수를 나눠서 색을 정할 수 있습니다.

 

if는 위에서 쓴 것처럼 나눠서 2로 나누어 떨어지면(i % 2 == 0) 짝수이고,

else는 if의 식과 일치하지 않으면 이라는 뜻이 있기 때문에 짝수를 제외한 홀수인 정수를 출력하는 식이 됩니다.

 

span style 태그로 색을 줄 때에는 큰 따옴표 안에 입력을 해야하고, 

색은 작은 따옴표('') 안에 입력해야 한다는 것을 잊지 말아야 합니다.

 

큰 따옴표 안에 입력하는 것은 요소가 서로 다른 요소이기 때문입니다. 

//배열안에 1-10까지 데이터가 있음 (forEach문을 통해 출력하시오)
const arr = [1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(el){
    document.write(el);
});

답: 1 2 3 4 5 6 7 8 9 10

forEach문을 이용해서 배열을 출력하는 간단한 식입니다.

배열을 지정해주고, forEach문의 형식을 맞춰서 입력하면 됩니다.

 

el은 element의 약자로 쓴 겁니다.

//함수의 유형 4가지
function a(){
    document.write("안녕");
}
a();

const b = function(){
    document.write("하이");
}
b();

function c(str){
    document.write(str);
}
c("hello");

function func(){
    const d = "hi";
    return d;
}
document.write(func());

답: 안녕 하이 hello hi

차례대로 선언식 함수, 익명 함수, 매개변수 함수, 리턴값 함수입니다.

기본적인 함수식을 잘 기억해둬야 생략함수식들을 알아볼 수 있기 때문에 잘 기억해둬야 합니다.

//7번을 화살표 함수로
a = () => {
    document.write("안녕");
}
a();

const b = () => {
    document.write("하이");
}
b();

c = (str) => {
    document.write(str);
}
c("hello");

func = () => {
    const d = "hi";
    return d;
}
document.write(func());

답: 안녕 하이 hello hi

위의 식들을 화살표 함수로 바꾼 식들입니다.

function을 생략하고 괄호를 = () => 의 형태로 바꿔썼다고 생각하면 외우기 쉽습니다.

//1~25까지의 숫자 중 짝수는 빨강, 홀수는 파랑색의 숫자를 가진 테이블
let a = 1;
let table = "<table border='1'>";
    for(let i=1; i<=5; i++){
        table += "<tr></tr>";
        for(let j=1; j<=5; j++){
            if(j % 2 ==0){
               table += "<td style='color:red'>"+a+"</td>"
               a++;
            }
            if(j % 2 ==1){
                table += "<td style='color:blue'>"+a+"</td>"
                a++;
            }                    
        }               
    }       
    table += "</table>"
document.write(table);

답:

25칸 테이블 홀 파 짝 빨

위의 테이블 식과 짝수 홀수를 빨강과 파랑색으로 입력하는 식을 합친 식입니다.

두 가지를 차례대로 쓰면 되기 때문에 간단합니다.

 

테이블 안에 입력할 수의 초기값을 1로 정하고, 

테이블을 5*5의 형태로 만들어서 짝수일 경우에는 span style로 빨강색을 입혀주고, 
홀수일 경우에는 파랑색을 입혀줍니다.

 

if문을 이용해서 입력했는데, 짝수가 아닐 경우에라는 의미로 else를 써줘도 같은 결과값을 얻을 수 있습니다.

여기서도 마찬가지로 테이블 안의 숫자의 값이 1씩 증가한다는 증감식을 잊지 말아야 합니다.

// 선언적 함수로 table
function func () {
	let a = 1;
    let table = "<table border='1'>";
        for(let i=1; i<=10; i++){
                table += "<tr>";
                for(let j=1; j<=10; j++){
                        table += "<td>"+a+"<td>";
                        a++;
                    }
                table += "</tr>";
        }
    table += "</table>";
    document.write(table);
}
func();

답:

선언적 함수로 만든 100칸 테이블

마지막으로, 선언적 함수를 이용해서 테이블을 출력하는 식입니다.

테이블 식을 선언적 함수 안에 넣어서 입력해주면 되는 간단한 식입니다.