1) 01while.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let i = 0;
//while문
while(i<10){
document.write('<h2>금요일입니다</h2>')
i++;
}
//do while문 : do 안의 실행문 한번은 무조건 실행한다!
do {
document.write('<h2>금요일입니다</h2>')
i++;
}while(i<10)
</script>
</body>
</html>2) 02for.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<ul id="forul">
</ul>
</div>
<script>
//2단~9단까지 구구단을 콘솔에 출력
let li = ""
for(let i=2; i<10; i++){
li = li + `<li><h3>${i}단입니다.</h3><ul>`
for(let j=1; j<10; j++){
li = li + `<li>${i} * ${j} = ${i*j}</li>`
}
li = li + `</ul></li>`
}
document.querySelector('#forul').innerHTML = li;
let str = "";
for(let i=0; i<10; i++){
str = str + `안녕${i}`;
console.log(str);
}
</script>
</body>
</html>3) ex01_teach.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
let inner = "";
for(let i=0;i<5;i++){
inner = inner + '<p>';
for(let j=5;j>i;j--){
inner = inner + '*';
}
inner = inner + '</p>';
}
document.querySelector('div').innerHTML = inner;
</script>
</body>
</html>4) ex02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let message = prompt('100보다 큰 숫자를 입력하시오');
while(message <= 100){
// console.log('반복문');
if(message === "" || message === null){
break;
}
message = prompt('100보다 큰 숫자를 입력하시오');
// console.log(message);
}
</script>
</body>
</html>5) ex02_teach.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num;
do {
num = prompt("100을 초과하는 숫자를 입력하세요");
} while(num <= 100 && num)
</script>
</body>
</html>6) array.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let fruits = ['🍅','🥝','🍌','🍓','🍉'];
// 마지막에 배열요소를 추가
fruits.push('🍊');
// 제일 앞에 배열요소를 추가
fruits.unshift('🍇');
console.log(fruits);
// 마지막 배열요소를 삭제
fruits.pop();
console.log(fruits);
// 제일 앞 배열요소를 삭제
fruits.shift();
console.log(fruits);
fruits.forEach(function(a,b,c){
console.log(`첫번째 매개변수 자리에는 값 ${a}`);
console.log(`두번째 매개변수 자리에는 인덱스 ${b}`);
console.log(`세번째 매개변수 자리에는 배열 ${c}`);
})
fruits.forEach(value=> console.log(`첫번째 매개변수 자리에는 값 ${value}`)); //function을 한줄로도 사용한다.
for(let i=0; i<fruits.length; i++){
console.log(fruits[i]);
}
fruits.forEach(function(list){
console.log(list);
})
</script>
</body>
</html>
'노력이 좋아서' 카테고리의 다른 글
| <step32>'js_객체object' (0) | 2022.05.03 |
|---|---|
| <step31>'js_메소드, 객체' (0) | 2022.05.02 |
| <step29>'js_switch' (0) | 2022.04.28 |
| <step28>'js_조건문(if)' (0) | 2022.04.27 |
| <step27>'js_변수선언, 함수선언' (0) | 2022.04.26 |