JAVASCRIPT
자바스크립트 데이터 제어하기란 ?
Kim do hyun
2023. 2. 28. 18:15
728x90
반응형
데이터 제어
자바스크립트에서 데이터 제어란, 변수, 배열, 객체 등과 같은 데이터를 생성하고 수정하며, 데이터를 검색하고 조작하는 것을 의미합니다. 이는 프로그램에서 데이터를 저장하고 처리하는 것이 중요한 이유로, 데이터를 제어하는 기능은 자바스크립트 프로그래밍에서 핵심적인 역할을 합니다.
01. if문
if 다음 소괄호에 조건을 표기하여 결괏값에 따라 답이 나오는 명령입니다.
const x = prompt("당신이 좋아하는 숫자는 무엇입니까?");
if(x == 100){
document.write("당신은 100점짜리 인간이네요!");
} else if(x == 99) {
document.write("당신은 99점짜리 인간이네요!");
} else if(x == 98) {
document.write("당신은 98점짜리 인간이네요!");
} else if(x == 97) {
document.write("당신은 97점짜리 인간이네요!");
} else {
document.write("좀 더 높게 쓰시는게 어떨까요?");
}100 - 당신은 100점짜리 인간이네요!
99 - 당신은 100점짜리 인간이네요!
98 - 당신은 100점짜리 인간이네요!
97 - 당신은 100점짜리 인간이네요!
그 외 숫자 - 좀 더 높게 쓰시는게 어떨까요?
01-2. if문
건식에서 데이터에 따라서 어떤 결괏값이 나오는지 정리한 기본적인 정보입니다.
if(조건식){
document.write("실행되었습니다.(true)");
} else {
document.write("실행되었습니다.(false)");
}false : 0, null, undefined, false, ""(빈문자열)
true : 1, 2, "0", "1", "ABC", [], {}, true건식에서 데이터에 따라서 어
떤 결괏값이 나오는지 정리한 기본적인 정보입니다.
02. if문 생략
if문을 좀 더 효율적으로 사용하기 위해 생략하는 방법입니다.
const num = 100;
// if(num){
// document.write("실행되었습니다.(true)");
// } else {
// document.write("실행되었습니다.(true)");
// }
if(num) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다.(false)");
03. 삼향(조건) 연산자
if, else문을 사용하지 않고도 조건에 따라 값을 반환할 수 있는 방법입니다.
// const num = 100; // 주석 처리한 기존의 삼항 연산자는 사용되지 않는 코드까지 사용하게 된다는 단점이 있었다.
// if(num == 100){
// document.write("true");
// } else {
// document,write("false");
// }
(num == 100) ? document.write("true") : document.write("false");true
04. 다중 if
if문을 여러번 사용하는 방법입니다.
const num = 100;
//숫자인지,문자인지 ,함수인지,객체인지 == 보다 확실한 정보를 확인하기 위해 ===를 사용한다.
if(num == 90){
document.write("실행되었습니다(num == 90)");
} else if(num == 100) {
document.write("실행되었습니다(num ==100)");
} else if(num == 110) {
document.write("실행되었습니다(num ==110)");
} else if(num == 120) {
document.write("실행되었습니다(num ==120)");
} else {
document.write("실행되었습니다");
}실행되었습니다.(num == 100)
05. 중첩 if문
if문에 if문을 중첩 시켜 사용하는 방법입니다.
const num = 100;
if(num == 100){
document.write("실행되었습니다.(1)");
if(num == 100){
document.write("실행되었습니다.(2)");
if(num == 100){
document.write("실행되었습니다.(3)");
}
}
} else {
document.write("실행되었습니다.(4)")
}실행되었습니다.(1)실행되었습니다.(2)실행되었습니다.(3)
연습
지금까지의 내용들 정리
for(let i=1; i<=100; i++){ // 1부터 100까지
document.write(i);
}
document.write("<br>"); // 줄바꿈 표시
const arr = [1,2,3,4,5,6,7,8,9]
for(let i=0; i<arr.length; i++){ // 배열 안에 있는 데이터 불러오기
document.write(arr[i]);
}
document.write("<br>"); // 줄바꿈 표시
for(let i=1; i<arr.length; i +=2){ // 배열 안에 있는 데이터를 짝수로 불러오기
document.write(arr[i]);
}
document.write(" <br>"); // 줄바꿈 표시
for(let i=0; i<arr.length; i +=2){ // 배열 안에 있는 데이터를 홀수로 불러오기
document.write(arr[i]);
}
연습
for문과 if..else문을 사용하여 배열 안에 있는 데이터에서 짝수는 빨간색으로 출력 그 외는 파란색으로 출력된다
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for(let i=1; i<=arr.length; i++){
if(i % 2 ==0){
document.write("<span style='color:red'>"+i+"</span>");
} else {
document.write(`<span style='color:blue'>${i}</span>`);
}
}<span style="color:blue">1</span> //파란색으로 출력
<span style="color:red">2</span> //빨간색으로 출력
<span style="color:blue">3</span>
<span style="color:red">4</span>
<span style="color:blue">5</span>
<span style="color:red">6</span>
<span style="color:blue">7</span>
<span style="color:red">8</span>
<span style="color:blue">9</span>
06. switch문
주어진 표현식을 평가하여 해당하는 케이스로 분기하는 조건문입니다.
switch 문은 여러 개의 case 문으로 구성되며, case 문은 비교할 값과 일치하는 경우 실행됩니다.
const num = 100;
switch(num){
case 90:
document.write("실행90");
break;
case 80:
document.write("실행80");
break;
case 70:
document.write("실행70");
break;
case 60:
document.write("실행60");
break;
case 50:
document.write("실행50");
break;
default:
document.write("0");0
07. while문
반복문 중 하나로, 주어진 조건식이 true인 동안 반복적으로 코드 블록을 실행합니다.
let num = 0;
while(num<5){
document.write(num);
num++;01234
08. do while문
반복문 중 하나로, 조건식을 먼저 검사하지 않고, 먼저 반복을 실행한 후, 조건식을 검사하여 반복을 계속할지 여부를 결정합니다.
let num2 = 0;
do {
document.write(num2);
num2++;
} while (num2<5);01234
09. for문 연습
1부터 30까지, 배열에 있는 데이터 호출, 배열 안에 있는 수 더하기
for(let i=1; i<30; i++){
document.write(i);
}
document.write("<br>");
let num = [1,2,3,4,5,6,7,8,9];
let sum = 0;
for(let i=0; i<num.length; i++){
document.write(num[i]);
sum +=num[i];
}
document.write("<br>");
document.write(sum);1234567891011121314151617181920212223242526272829
123456789
45
10. 중첩 for문
for문에 for문을 중첩 시키는 방법입니다.
for(let i=1; i<=10; i++){
document.write(i,"<br>")
for(let j=1; j<=10; j++){
document.write(j);
}
}01234
11. break문
반복문 내부에서 사용되며, 현재 반복을 중단하고 반복문을 빠져나가는 기능을 수행합니다.
for(let i=1; i<20; i++){
document.write(i);
if(i == 10){
break;
}
}
document.write("<br>");
for(let j=1; j<20; j++){
if(j == 10)
break;
document.write(j);
}12345678910
123456789
12. continue문
'break 문'과 같이 반복문 내부에서 사용되며, 현재 반복을 중단하고 다음 반복으로 진행하는 기능을 수행하며 약같 다릅니다.
for(let i=1; i<20; i++){
document.write(i);
if(i == 10){
continue;
}
}
document.write("<br>");
for(let i=1; i<20; i++){
if(i == 10){
continue;
}
document.write(i);
}12345678910111213141516171819
123456789111213141516171819