1부터 10까지 출력하기(초기값0)
for()문을 이용하여 1부터 10까지 출력하는 예제입니다.
{
for(let i=0; i<10; i++){
console.log(i+1);
}
}
1줄 : for: JavaScript의 반복문 중 하나로, 특정 조건이 참인 동안 반복적으로 코드 블록을 실행합니다.
2줄 : let i = 0: 루프를 시작하기 위해 변수 i를 0으로 초기화합니다. 이 변수는 루프의 반복 횟수를 추적하는 데 사용됩니다.
3줄 : i < 10: 조건식으로, i가 10보다 작을 동안에만 루프를 실행합니다. 즉, i가 0부터 9까지 변할 동안 루프가 실행됩니다.
4줄 : i++: 루프의 각 반복이 끝날 때마다 i 값을 1씩 증가시킵니다.
5줄 : console.log(i + 1): 현재 i 값에 1을 더한 결과를 콘솔에 출력합니다. i는 0부터 시작하므로 출력되는 값은 1부터 10까지입니다.
결과 확인하기
2부터 25까지 출력하기(초기값0)
for()문을 이용하여 2부터 25까지 출력하는 예제입니다.
{
for(let i=0; i<24; i++){
console.log(i+2);
}
}
1. 초기화: let i = 0; - 반복 변수인 i를 0으로 초기화합니다. 이 변수는 반복의 횟수를 추적하는 역할을 합니다.
2. 조건: i < 24; - 반복이 계속될 조건을 정의합니다. i가 24보다 작을 때까지만 반복이 실행됩니다.
3. 반복 후 작업: i++ - 각 반복이 끝날 때마다 i 변수를 1씩 증가시킵니다. 이것은 반복이 진행될 때마다 i의 값이 변화하게 하는 역할을 합니다.
루프 내부에서는 console.log(i+2); 라인이 있습니다. 이 라인은 현재 i 값에 2를 더한 값을 콘솔에 출력합니다. 처음 반복에서 i는 0이므로 0
+ 2인 2가 출력됩니다. 그 다음 반복에서 i는 1이 되므로 1 + 2인 3이 출력되고, 이런 식으로 반복이 계속되면서 2씩 증가하는 값들이 출력됩니다.
최종적으로 23번째 반복에서 i가 23이 되므로 23 + 2인 25가 출력됩니다.
따라서 이 코드를 실행하면 2부터 25까지의 숫자가 한 줄에 하나씩 출력될 것입니다.
결과 확인하기
1부터 20까지 출력하기(짝수만)(3가지)
for()문, if()문, while()문을 이용하여 1부터 20까지 짝수만 출력하는 예제입니다.
{
for(let i=2; i<=20; i+=2){
console.log(i);
}
for(let i=1; i<=20; i++){
if(i%2 == 0){
console.log(i);
}
}
let i = 2;
while(i<=20){
console.log(i);
i+=2;
}
}
1. for()문 : 이 루프는 초기값 i를 2로 설정하고, i가 20 이하일 동안에 2씩 증가하면서 반복합니다. 따라서 2부터 시작하여 20까지의 짝수를
출력합니다.
2. if()문 : 이 루프는 초기값 i를 1로 설정하고, i가 20 이하일 동안에 1씩 증가하면서 반복합니다. 하지만 if(i%2 == 0) 조건문을 통해 i가
짝수인 경우에만 출력을 수행합니다. 따라서 2부터 시작하여 20까지의 짝수를 출력합니다.
3. while()문 : 이 코드는 초기값 i를 2로 설정하고, i가 20 이하일 동안에 2씩 증가하면서 반복하는 "while" 루프를 사용합니다. 따라서 2부터
시작하여 20까지의 짝수를 출력합니다.
세 가지 반복 구조 모두 비슷한 결과를 도출하지만, 각각의 방식으로 코드를 작성하고 실행할 수 있습니다. 이 코드는 반복문의 다양한 형태를 보여주는 좋은 예시입니다.
결과 확인하기
1부터 20까지 출력하기(홀수만)(3가지)
for()문, if()문, while()문을 이용하여 1부터 20까지 홀수만 출력하는 예제입니다.
{
for(let i=1; i<20; i+=2){
console.log(i);
}
for(let i=1; i<20; i++){
if(i%2 == 1){
console.log(i);
}
}
let i = 1;
while(i<20){
console.log(i);
i+=2;
}
}
1. for()문 : 이 루프는 초기값 i를 1로 설정하고, i가 19 미만일 동안에 2씩 증가하면서 반복합니다. 따라서 1부터 시작하여 19까지의 홀수를
출력합니다.
2. if()문 : 이 루프는 초기값 i를 1로 설정하고, i가 19 미만일 동안에 1씩 증가하면서 반복합니다. 하지만 if(i%2 == 1) 조건문을 통해 i가
홀수인 경우에만 출력을 수행합니다. 따라서 1부터 시작하여 19까지의 홀수를 출력합니다.
3. while()문 : 이 코드는 초기값 i를 1로 설정하고, i가 19 미만일 동안에 2씩 증가하면서 반복하는 "while" 루프를 사용합니다. 따라서 1부터
시작하여 19까지의 홀수를 출력합니다.
세 가지 반복 구조 모두 결과적으로 1부터 19까지의 홀수를 출력합니다. 이 코드는 반복문을 활용하여 특정한 패턴을 출력하는 방법을 보여주는 좋은 예시입니다.
결과 확인하기
1부터 100까지 출력하기(5의 배수)(3가지)
for()문, if()문, while()문을 이용하여 1부터 100까지 5의 배수만 출력하는 예제입니다.
{
for(let i=5; i<=100; i+=5){
console.log(i);
}
for(let i=5; i<=100; i++){
if(i%5 == 0){
console.log(i);
}
}
let i = 5;
while(i<=100){
console.log(i);
i+=5;
}
}
1. for()문 : 이 루프는 초기값 i를 1로 설정하고, i가 19 미만일 동안에 2씩 증가하면서 반복합니다. 따라서 1부터 시작하여 19까지의 홀수를
출력합니다.
2. if()문 : 이 루프는 초기값 i를 1로 설정하고, i가 19 미만일 동안에 1씩 증가하면서 반복합니다. 하지만 if(i%2 == 1) 조건문을 통해 i가
홀수인 경우에만 출력을 수행합니다. 따라서 1부터 시작하여 19까지의 홀수를 출력합니다.
3. while()문 : 이 코드는 초기값 i를 1로 설정하고, i가 19 미만일 동안에 2씩 증가하면서 반복하는 "while" 루프를 사용합니다. 따라서 1부터
시작하여 19까지의 홀수를 출력합니다.
세 가지 반복 구조 모두 결과적으로 1부터 19까지의 홀수를 출력합니다. 이 코드는 반복문을 활용하여 특정한 패턴을 출력하는 방법을 보여주는 좋은 예시입니다.
결과 확인하기
1부터 20까지 출력하기(짝수는 빨간색, 홀수는 파란색)
for()문을 이용하여 1부터 20까지 짝수는 빨간색, 홀수는 파란색으로 style을 적용하여 출력하는 예제입니다.
{
for(let i=1; i<=20; i++){
if(i%2 == 0){
document.write("<span style='color:red;'>" + i + "</span><br>")
} else {
document.write("<span style='color:blue;'>" + i + "</span><br>")
}
}
}
반복문이 실행될 때마다 숫자 i의 값이 1부터 20까지 증가하며, if문을 통해 i가 짝수인지 홀수인지를 확인합니다.
i가 짝수라면, "<span style='color:red;'>" + i + "</span><br>" 형태의 문자열을 출력하고, i가
홀수라면 "<span style='color:blue;'>" + i + "</span><br>" 형태의 문자열을 출력합니다.
결과적으로, i가 짝수인 경우에는 출력된 숫자가 빨간색으로, 홀수인 경우에는 파란색으로 표시되어 출력됩니다.
결과 확인하기
배열 데이터 1부터 10까지 출력하기
for()문을 이용하여 배열 데이터를 1부터 10까지 출력하는 예제입니다.
{
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for(let i=0; i<arr.length; i++){
console.log(i+1);
}
//짝수만 출력하기
for(let i=0; i<=arr.length; i++){
if(arr[i] % 2 == 0){
console.log(arr[i]);
}
}
}
이 코드는 주어진 배열(arr)의 원소를 반복하여 출력하는 반복문 및 조건문을 포함하고 있습니다.
반복문을 통해 배열의 길이(arr.length)만큼 반복하며, 현재 인덱스(i)에 1을 더한 값을 출력합니다.
따라서 배열의 첫 번째 원소는 1이 출력되고, 두 번째 원소는 2가 출력되고, 이런 식으로 배열의 마지막 원소까지 출력합니다.
그 다음으로, 배열의 짝수만 출력하는 반복문이 나타납니다.
반복문을 통해 배열의 길이(arr.length)만큼 반복하며, 현재 인덱스(i)로 배열의 원소에 접근합니다.
if문을 사용하여 arr[i]의 값이 짝수인지 여부를 확인하고, 짝수일 경우에만 그 값을 출력합니다.
따라서 배열에서 짝수인 원소만을 차례로 출력합니다.
결과 확인하기
구구단 출력하기(8단만 출력하기)
중첩 for()문을 이용하여 구구단을 출력하는 예제입니다.
{
for(let i=8; i<=8; i++){
console.log(i + "단");
for(let j=1; j<10; j++){
console.log(i + " * " + j + " = " + i*j);
}
}
}
이 코드는 구구단 중에서 8단을 출력하는 코드입니다.
반복문을 통해 첫 번째 for문에서 변수 i의 값을 8로 초기화하고, i가 8과 같거나 작을 때까지 반복합니다.
따라서 이 경우에는 한 번만 실행되며, 8단을 출력하는 역할을 합니다.
첫 번째 for문의 내부에는 두 번째 for문이 포함되어 있습니다.
두 번째 for문에서는 변수 j를 1로 초기화하고, j가 10보다 작을 때까지 반복합니다.
앞선 첫 번째 for문에서 설정된 i값과 j값을 사용하여 i * j의 결과를 출력합니다.
따라서 8 * 1 = 8, 8 * 2 = 16, ... , 8 * 9 = 72까지 8단의 계산 결과를 차례로 출력합니다.
결과 확인하기
테이블 출력하기(5*5 출력하기)
for()문을 이용하여 table을 생성하는 예제입니다.
{
let table = "<table class='table'>";
let num = 1;
for(let i=1; i<=5; i++){
table += "<tr>";
for(let j=1; j<=5; j++){
table += "<td>" + num + "</td>";
num++;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
1. table 변수를 선언하고, 초기값으로 <table class='table'> 문자열을 할당합니다. 이 문자열은 HTML 테이블을 시작하는 태그로,
class 속성이 "table"로 지정되어 있습니다.
2. num 변수를 선언하고, 초기값으로 1을 할당합니다. 이 변수는 표에 표시할 숫자를 나타냅니다.
3. 첫 번째 for 루프를 사용하여 <tr> 요소를 생성합니다. i 변수는 1부터 5까지 증가하며, 각각의 값은 표의 행을 나타냅니다.
4. 두 번째 for 루프를 사용하여 각 행 안에 5개의 <td>(테이블 셀) 요소를 생성합니다. j 변수는 1부터 5까지 증가하며, 각각의 값은 열을
나타냅니다. <td> 안에는 num 변수의 값을 문자열로 포함하여 출력합니다. 그리고 num 값을 1씩 증가시킵니다.
5. 두 번째 for 루프가 모든 열에 대한 <td> 요소를 생성하고 나면 해당 행에 대한 <tr> 요소를 닫아줍니다.
6. 이 과정을 첫 번째 for 루프가 5번 반복하면서 총 5개의 행을 생성합니다.
7. 마지막으로, 테이블을 닫는 </table> 태그를 table 변수에 추가합니다.
8. document.write(table); 코드를 사용하여 최종적으로 생성된 HTML 문자열을 웹 페이지에 출력합니다. 이렇게 하면 5x5 크기의 표가 화면에
표시됩니다.
결과적으로, 이 코드는 JavaScript를 사용하여 HTML 테이블을 동적으로 생성하고, 숫자로 채워진 표를 만들어 웹 페이지에 표시하는 예제입니다.
결과 확인하기
테이블 출력하기(5*5 짝수만 나오게 출력하기)
HTML의 <table> 요소를 동적으로 생성하여 짝수 숫자로 채워진 5x5 크기의 표를 만드는 JavaScript 코드입니다. 기존 코드와 비슷한 구조를 가지고 있지만 시작하는 숫자와 셀 간격이 다르게 설정되어 있습니다.
{
let table = "<table class='table'>";
let num = 2;
for(let i=1; i<=5; i++){
table += "<tr>";
for(let j=1; j<=5; j++){
table += "<td>" + num + "</td>";
num+=2;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
1. table 변수를 선언하고, 초기값으로 <table class='table'> 문자열을 할당합니다. 이 문자열은 HTML 테이블을 시작하는 태그로,
class 속성이 "table"로 지정되어 있습니다.
2. num 변수를 선언하고, 초기값으로 2를 할당합니다. 이 변수는 표에 표시할 숫자를 나타냅니다. 시작 숫자가 2로 설정되었으므로 표는 짝수 숫자로 채워집니다.
3. 첫 번째 for 루프를 사용하여 <tr> 요소를 생성합니다. i 변수는 1부터 5까지 증가하며, 각각의 값은 표의 행을 나타냅니다.
4. 두 번째 for 루프를 사용하여 각 행 안에 5개의 <td>(테이블 셀) 요소를 생성합니다. j 변수는 1부터 5까지 증가하며, 각각의 값은 열을
나타냅니다. <td> 안에는 num 변수의 값을 문자열로 포함하여 출력합니다. 그리고 num 값을 2씩 증가시킵니다. 따라서 각 셀에는 2, 4, 6, 8,
10과 같은 짝수 숫자가 출력됩니다.
5. 두 번째 for 루프가 모든 열에 대한 <td> 요소를 생성하고 나면 해당 행에 대한 <tr> 요소를 닫아줍니다.
6. 이 과정을 첫 번째 for 루프가 5번 반복하면서 총 5개의 행을 생성합니다.
7. 마지막으로, 테이블을 닫는 </table> 태그를 table 변수에 추가합니다.
8. 주석 처리된 document.write(table); 코드는 표를 웹 페이지에 출력하는 부분이 주석 처리되어 있으므로 현재 화면에는 출력되지 않습니다.
결과적으로, 이 코드는 JavaScript를 사용하여 HTML 테이블을 동적으로 생성하고, 짝수 숫자로 채워진 5x5 크기의 표를 만드는 예제입니다. 만약 표를
화면에 표시하려면 주석 처리된 document.write(table);를 주석 해제하면 됩니다.
결과 확인하기
테이블 출력하기(10*10 짝수는 빨간색, 홀수는 파란색 출력하기)
HTML의 <table> 요소를 동적으로 생성하여 10x10 크기의 표를 만들고, 각 셀에 짝수와 홀수를 다른 색상으로 표시하는 JavaScript 코드입니다. 코드를 한 줄씩 설명하겠습니다.
{
let table = "<table class='table'>";
let num = 1;
for(let i=1; i<=10; i++){
table += "<tr>";
for(let j=1; j<=10; j++){
table += "<td>";
if(num % 2 == 0){
table += "<span style='color:red;'>" + num + "</span>";
} else {
table += "<span style='color:blue;'>" + num + "</span>";
}
num++;
table += "</td>";
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
1. table 변수를 선언하고, 초기값으로 <table class='table'> 문자열을 할당합니다. 이 문자열은 HTML 테이블을 시작하는 태그로,
class 속성이 "table"로 지정되어 있습니다.
2. num 변수를 선언하고, 초기값으로 1을 할당합니다. 이 변수는 표에 표시할 숫자를 나타냅니다.
3. 첫 번째 for 루프를 사용하여 <tr> 요소(테이블 행)를 생성합니다. i 변수는 1부터 10까지 증가하며, 각각의 값은 표의 행을 나타냅니다.
4. 두 번째 for 루프를 사용하여 각 행 안에 10개의 <td>(테이블 셀) 요소를 생성합니다. j 변수는 1부터 10까지 증가하며, 각각의 값은 열을
나타냅니다.
5. 각 <td> 셀 안에는 조건문을 사용하여 짝수인지 홀수인지를 판별하고, 그에 따라 다른 색상으로 숫자를 감싸는 <span> 요소를 생성합니다. 짝수인
경우에는 빨간색('color:red;')으로, 홀수인 경우에는 파란색('color:blue;')으로 텍스트를 스타일링합니다.
6. num 변수를 1씩 증가시킵니다.
7. <td> 셀을 닫아줍니다.
8. 두 번째 for 루프가 모든 열에 대한 <td> 요소를 생성하고 나면 해당 행에 대한 <tr> 요소를 닫아줍니다.
9. 이 과정을 첫 번째 for 루프가 10번 반복하면서 총 10개의 행을 생성합니다.
10. 마지막으로, 테이블을 닫는 </table> 태그를 table 변수에 추가합니다.
11. 주석 처리된 document.write(table); 코드는 표를 웹 페이지에 출력하는 부분이 주석 처리되어 있으므로 현재 화면에는 출력되지 않습니다.
결과적으로, 이 코드는 JavaScript를 사용하여 HTML 테이블을 동적으로 생성하고, 10x10 크기의 표를 만듭니다. 짝수와 홀수는 서로 다른 색상으로
표시되어 있어 시각적으로 구분이 가능하며, 원한다면 주석 처리된 코드를 해제하여 표를 화면에 출력할 수 있습니다.
TOP