javascript

do it 자바스크립트+제이쿼리 입문 2일차

fensiel 2023. 4. 13. 13:52
<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    
</body>
<script>

// let walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?");

// if(walkAmount>=10000){
//     document.write("매우 좋은 습관을 지니고 계시는군요!!","<br>");

// }
// document.write("========THE END========");1



// let min = prompt("당신의 하루 통화량은 몇 분인가요?");
// if(min>=60) {document.write("많이 사용하는 편이에요","<br>");}
// document.write("=====THE END======")

// let userName = prompt("방문자의 이름은?",""); //userName에 입력된 prompt값이 if(이곳에 저장되어서 함수실행)
// if(userName){ //userName에 이름이 저장되면 중괄호의 코드가 실행된다.
//     document.write(userName+"님 반갑습니다! 방문을 환영합니다.");
// }

//다음 예제에서 방문자가 질의응답 창에 이름을 입력하지 않으면 기본 응답값인 빈 문자가 변수에 
// 저장되어 조건식에 거짓값이 반환되고 그 결과 문장이 출력되지 않는다.

// let num = prompt("당신이 좋아하는 숫자는?");
// if(num%2 ==0){
//     document.write("당신이 좋아하는 숫자는 짝수");
// }else{
//     document.write("당신이 좋아하는 숫자는 홀수");
// }

// let result= confirm("정말로 탈퇴?"); 👍
// if(result){
//     document.write("탈퇴 처리되었습니다");
// }else{
//     document.write("탈퇴 취소되었습니다");
// }




//else if문
// 두 가지 이상의 조건식과 정해놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어짐

// 다음은 else if문의 기본형이다. 가장 위에 있는 조건식1부터 5까지 차례로 조건 검사를 하면서 만족
// 하는 값이 나오면 그에 해당하는 코드실행하고 조건문을 종료
// 조건식중 만족하는 값이 하나도 없으면 else문의 중괄호에 있는 코드 실행

// if(조건식1){👍
//     코드1;
// }else if(조건식2){
//     코드2;
// }
// }else if(조건식3){
//     코드3;
// }
// }else if(조건식4){
//     코드4;
// }
// }else if(조건식5){
//     코드5;
// }else{
//     코드6;
// }

// let mon = prompt("현재는 몇개월입니까?");👍

// if(mon >=9 && mon<= 11){
//     document.write("독서의 계절 가을이네요!");
// }else if(mon>=6 && mon<=8){
//     document.write("여행가기 좋은 여름이네요!");
// }else{
//     document.write("스키의 계절 겨울이네요!");
// }





// 중첩if문
// 조건문 안에 조건문이 있으면 중첩if문 이라고 한다.
// if(조건식1){
//     if(조건식2){
//         자바스크립트 코드;
//     }
// }


// let id = "easy1004";
// let pw = "112233";

// let user_id = prompt("아이디는?");
// let user_pw = prompt("비밀번호는?");

// if(id === user_id){

//     if(pw === user_pw){
//         document.write(user_id+"님 반갑습니다!");
//     }else{
//         alert("비밀번호가 일치하지 않습니다.");
//         location.reload();
//     }

//     }else{
//         alert("아이디가 일치하지 않습니다.");
//         location.reload;
//     }

// switch문
// 선택문인 switch문은 .if문과 용도는 비슷하지만
// if문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고
// switch문은 여러 경우의 값중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬때 사용한다.

// let site = prompt("네이버,다음,네이트,구글 중 \ 즐겨 사용하는 포털 검색 사이트는?","");👍👍 여러 경우의 값이 prompt에 포함됨
// let url;

// switch(site){
//     case"구글": url = "www.google.com";
//     break;
//     case"다음": url = "www.daum.net";
//     break;
//     case"네이버": url = "www.naver.com";
//     break;
//     case"네이트": url = "www.nate.com";
//     break;
//     default:alert("보기 중에 없는 사이트입니다.");
// }

// if(url)location.href = "http://" + url;



//while 문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행가능하다.
// 예제 안녕하세요1~안녕하세요10까지 1씩 증가하면서 10회 출력하도록 작성한 예제

// let i = 1;
// while(i<=10){
//     document.write("안녕하세요" +i,"<br>");
//     i++}
//     document.write("====THE END====");



// while 문을 사용하여 1부터 30까지의 숫자 중 2의 배수이면서 6의 배수인 숫자만 출력
// let i=1;
// while(i =30) {
//     if(i%2 == 0 && i%6 ==0){
//         document.write(i,"<br/>");
//     }
//     i++;
// }


// while문을 사용하여 20부터 10까지의 숫자 중 짝수일 경우에는 파란색으로 출력되고
// 홀수인 경우에는 빨간색으로 출력

// let i = 20;
// while(i>=10){
//     if(i%2 ==0){
//         document.write("<p class='blue'>"+i+"<p>");
//     }else{
//         document.write("<p class='red'>"+i+"</p>");
//     }
//     i--;
// }


//for문 
//for문은 조건식을 만족할 때까지 특정 코드를 반복실행
// 사용방법은 while문과 같지만 while문보다 사용하기 편해 사용 빈도가 높은 편이다.

for(let i =1; i<=10;i++){ //초기 조건 증감
    document.write("반복" +i,"<br>");
}

// continue문
// 반복문에서만 사용가능하고 for문에서 사용할경우 continue문  다음에 오는 코드는 무시하고
// 바로 증감식으로 이동하여 증감 연산을 실행한다. 즉 for문 안에 있는 continue문은 
// "다음에 오는 코드는 무시하고 증감식을 바로 실행해"라고 말하는 것과 같다.

for(let i=1;i<=10;i++){
    if(i%2==0)continue;
    document.write(i,"<br>");
}
document.write("===THE END===");
</script>
</html>

**이모티콘 기입:윈도우+:

 

let result= confirm("정말로 탈퇴?"); if(result){ document.write("탈퇴 처리되었습니다"); }else{ document.write("탈퇴 취소되었습니다"); } 여기서 if(result)는 왜 탈퇴 처리되었습니다로 결과가 나와?

 

chatgpt:if(result)는 result 변수가 true 값을 가지면 실행되는 조건문입니다.

confirm("정말로 탈퇴?") 함수는 확인 창을 띄우고, 사용자가 확인 버튼을 누르면 true, 취소 버튼을 누르면 false 값을 반환합니다.

따라서, 사용자가 확인 버튼을 눌러 result가 true가 되었을 때는 "탈퇴 처리되었습니다" 문구가 출력됩니다.

반면, 사용자가 취소 버튼을 눌러 result가 false가 되었을 때는 "탈퇴 취소되었습니다" 문구가 출력됩니다.

 

------------------------else if문은 두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을때 실행되는 코드

 

 

if(조건식1){코드1;}else if(조건식3){코드3;}

else if(조건식4){코드4;}     ====>   조건식 1부터 5까지 차례로 조건 검사를 하면서 true하는 값이 나오면

else if(조건식5){코드5;}                   그에 해당하는 코드를 실행하고 조건문을 종료한다.

else{코드6;}                                      조건식 중 만족한는 값이 하나도 없으면 else문의 중괄호에 있는 코드 실행

 

--------------------------중첩 if문

let id = "easy1004";
let pw = "112233";

let user_id = prompt("아이디는?");
let user_pw = prompt("비밀번호는?");

if(id === user_id){

    if(pw === user_pw){
        document.write(user_id+"님 반갑습니다!");
    }else{
        alert("비밀번호가 일치하지 않습니다.");
        location.reload();
    }

    }else{
        alert("아이디가 일치하지 않습니다.");
        location.reload;
    }

else는 항상 바로 이전에 나온 if 조건문과 짝을 이루어 사용됩니다. 따라서 중첩된 if 문에서는 한 개 이상의 else 문이 사용될 수 있습니다.

이 예제에서는, 첫 번째 if 문에서 id === user_id 조건이 거짓일 경우를 대비해 else 블록이 사용되고, 두 번째 if 문에서는 pw === user_pw 조건이 거짓일 경우를 대비해 또 다른 else 블록이 사용됩니다.

즉, 이 코드에서 else는 각각의 if 조건에 해당되는 부분에서 사용된 것이며, 두 개의 if 문이 중첩된 구조에서 각각 독립적으로 처리되도록 작성된 것입니다.

 

if (id ===user_id) =else{alert("아이디가 일치하지 않습니다.");location.reload;} 와 짝이되고

if (pw ===user_pw)=else{alert("비밀번호가 일치하지 않습니다.");location.reload;}와 짝이된다.

 

 

-----------------------------

switch문

여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용한다.

// let site = prompt("네이버,다음,네이트,구글 중 \ 즐겨 사용하는 포털 검색 사이트는?","");👍👍 여러 경우의 값이 prompt에 포함됨
// let url;

// switch(site){
//     case"구글": url = "www.google.com";
//     break;
//     case"다음": url = "www.daum.net";
//     break;
//     case"네이버": url = "www.naver.com";
//     break;
//     case"네이트": url = "www.nate.com";
//     break;
//     default:alert("보기 중에 없는 사이트입니다.");
// }

// if(url)location.href = "http://" + url;

변수에 저장된 값은 switch문을 만나면 case의 값을 하나씩 검사한다.

일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break 문을 만나 switch문을 종료한다.

만일 경우case의 값 중에 일치하는 데이터가 없으면 마지막 default에 있는 코드를 실행하고 switch문을 종료한다.

 

---------------------------------

반복문

for(초깃값; 조건식; 증감식){자바스크립트 코드;}

 

// 예제 for문을 이용하여 1부터 100까지 5의 배수일 경우 빨간색 글자

   7의 배수일 경우에는 초록색 글자

   그리고 5의 배수이며 7의 배수일 경우에는 아쿠아색 글자로 출력한다.

 

for(let i =1; i<=100; i++){
    if(i % 5 == 0 && i%7 !=0){
        document.write("<p class='red'>"+i+"</p>");
    }else if(i%7 ==0 && i%5 !=0){
        document.write("<p class='green'>"+i+"</p>");
    }else if(i % 7 ==0 && i% 5 ==0){
        document.write("<p class='aqua'>"+i+"</p>");
    }
}

class준것은 css에서 처리

 

 

-------------------

continue문

반복문에서만 사용가능하다.

for문에서 continue 문을 실행할 경우에는 continue 문 다음에 오는 코드는 무시하고 바로 증감식으로 

이동하여 증감 연산을 실행한다.

즉 for문 안에 있는 continue 문은 "다음에 오는 코드는 무시하고 증감식을 바로 실행해!"라고 말하는 것

// for(let i=1;i<=10;i++){
//     if(i%2==0)continue;
//     document.write(i,"<br>");
// }
// document.write("===THE END===");

2의 배수이면 continue문이 실행되어 홀수만 출력된다.