국비/Client(HTML&CSS&JavaScrpit)

2023.02.07 9일차 JavaScript

춘핑이 2023. 2. 7. 16:57

JavaScript

문서를 조작할수있는 언어
명령문이 순서대로 실행되지 않을 수 있다.

39. conditional 삼항연산(ternary) - 1

조건연산, 물음표연산이라고도 한다.
1항 ? 2항 : 3항
결과는 1항이 true이면 2항, 1항이 false이면 3항
console.log(true ? 99 : 88); //99
console.log(false ? 77 : 100); //100

40. conditional 삼항연산(ternary) - 2

let age = parseInt(prompt("나이를 입력해주세요", 0 ));
let message = (age >= 20 ? "어른입니다." : "미성년입니다.");
console.log(message);
간단한 예제로 실습해보앗다.

41. conditional 삼항연산(ternary) - 3

31번파일과 같은일을 하도록 삼항연산자 사용해서 만들어보기 홀수 or 짝수
let num = parseInt(prompt("수를 입력하세요" , 0)) ;
let message = ( num % 2 == 0 ? "짝수입니다." : "홀수입니다.");
console.log(message);

42. switch / switch-case문 - 1

값에 따라 실행 흐름이 바뀐다. if로 구현할 수 있다.

key와 value가 일치하는 곳부터 break;를 만나는 곳까지 실행
switch (key) {
case value: //부터
break; //실행
default:
break;
}
실제 에제 실습은 다음과 같다.

let key = 3;

switch (key) {
    case 3: //부터
        console.log("3이니까 여기 실행 됨");
        break; //실행
    case 7:key
        console.log("7이니까 여기 실행 됨");
        break;
    default:
        break;
}

console.log("다음 실행 흐름...");

->
3이니까 여기 실행 됨
다음 실행 흐름...

43. switch / switch-case문 - 2

let grade = prompt("학점을 입력하세요", "A");

switch (grade) {
    case "A":
        console.log("90점 이상입니다.");
        break;
    case "B":
        console.log("80점 이상입니다.");
        break;
    case "C":
        console.log("70점 이상입니다.");
        break;
    default: 
        console.log("다시 입력해주세요."); 
        break;
}

조건 외의 값이면 벗어나서 다음문장을 실행함. 조건문이 끝나면 어차피 나가기 때문에 마지막 break는 생략가능하다.
default문은 모든 case문과 일치하는 값이 없으면 실행된다.

실수로 중간에 break를 작성안하면 다음 break를 만날때까지 출력됨. 적절히 넣을 필요가 있다.
소문자도 출력하고 싶다.

case "a":
case "A":
    console.log("90점 이상입니다.");
    break;

이런 의도로도 사용할 수 있다.

44. switch -> if문

위의 예제를 if문으로 작성해보았다.

let grade = prompt("학점을 입력하세요", "A");

if (grade == "A" || grade == "a"){
    console.log("90점 이상입니다.");
} else if (grade == "B" || grade == "b"){
    console.log("80점 이상입니다.");
} else if (grade == "C" || grade == "c"){
    console.log("70점 이상입니다.");
} else {
    console.log("다시 입력해주세요.");    
};

45. switch - 3

let a = "0";
switch (a){
    case 0: // a === 0
        console.log("a는 0");
        break;
    case 1: // a === 1
        console.log("a는 1");
        break;
}

switch-case문의 key와 value는 타입까지 비교를 한다. 잘맞춰서 작성하자.

alert() 확인버튼만 promt 값입력 confirm()확인취소버튼 확인누르면 true 취소누르면 false리턴

46. while - 1

반복문(loop)에는 while, for이 있다.
어떤 코드를 여러번 실행시키고 싶다.
while (조건) {code block}
조건이 true이면 code block실행 다시 조건확인반복
조건이 false면 다음 실행 흐름 이어감.

47. while - 2

예제실습 5번 반복시키고 싶다.

let a = 1
while(a <= 5){
    console.log("hello");
    a++;
}

a = 1 -> a = 2 -> a = 3 -> a = 4 -> a = 5 -> a = 6 false되서 break;
//5~1까지 출력

let k = 5;

while (k >=1 ) {
    console.log(k);
    k--;
}

48. do - while

do while : 코드블럭이 한번은 꼭 실행됨.

console.log(1);

do {
    console.log(1);
} while (false);


console.log(5);

49. for문

while문을 작성할때 다음과 같이 작성했다.

let a = 0 //초기화

while(a < 5){ //조건
    console.log("a", a);
    a++; //조건 변경하는 코드
}

for : 반복문
for (초기화코드; 조건; 변경코드)

for (let b = 0 ; let < 5 ; b++){
    console.log("b", b);
}

위 while과 같은 일을 하게 된다.
초기 조건 변경코드가 있다면 for문이 낫고 조건만 있다면 while문이 나을 수도 있다.
경험에 의해서 어떤게 더 나을지를 생각하고 선택해서 사용하면 된다.

50. 변수의 scope - 1

let const의 scope는
선언된 코드블럭 내
--> 즉, 코드블럭 내에서만 사용가능

let a = 5;
if (true){
    let b = 10;
    console.log("a", a); //a
    console.log("b", b); //b
}

console.log("a", a); //ok
console.log("b", b); //not defined

51. scope - 2

let a = 0;
while (a < 5){
    console.log("a", a); //a = 0~4
    a++;
}
console.log("a", a); // a = 5

for(let b = 0 ; b < 5 ; b++){
    console.log("b", b); // b = 0~4
}
console.log("b", b); // b = undefined

for문안에서 선언한 변수는 for문안에서만 사용할 수 있다.

let c;
for( c= 0 ; c < 5 ; c++){
    console.log("c", c);
}
console.log("c", c);

초기화를 밖에서 하면 for문바깥에서도 사용할 수 있다.

52. loop - 1

반복문 연습해보기 사용자에게 반복할 내용과 횟수를 입력받고 반복해보자.

let message = prompt("출력할 내용을 작성하세요", "hello");
let num = +prompt("몇 번 출력할까요?", 1);

for (let i = 0 ; i < num ; i++ ){
    console.log(message);
}

53. loop - 2

53.1 사용자로부터 num1과 num2의 값을 입력받고 num1~ num2의 합을 구하라

let num1 = +prompt("첫번째 수를 입력하세요", 1);
let num2 = +prompt("두번째 수를 입력하세요", 10);

let sum = 0;
//num1과 num2 사이의 수들을 더 한 값 출력
for(let i = num1; i <= num2 ; i ++){
    sum += i;
}
console.log(sum);

53.2 등차수열의 합으로 풀기

절댓값 n * ( a + l ) / 2
|첫번째항-마지막항+1| * ( 첫번째항 + 마지막항 ) / 2

let sum2 = (Math.abs(num1-num2)+1) * (num1 + num2) / 2
console.log(sum2);

53.3 어떤게 더 작은 수인지 모를때? 조건문을 줘서 풀기

let min = 0;
let max = 0;
if(num1 < num2){
    min = num1;
    max = num2;
} else {
    min = num2;
    max = num1;
}
let sum3 = 0;
for(let i = min; i <= max ; i ++){
    sum3 += i;
}
console.log(sum3);

54. Break - 1

break 루프에서 나가라라는 명령문이다. 반복을 끝내는 명령어이다.

console.log("이전 명령문들...");
for (let i = 0; i < 5; i++) {
    console.log(i);
    //반복을 끝내는 명령문
    break;
}
console.log("다음 명령문들...");

-> 0출력하고 바로 for문 빠져나가게 됨.

55. break - 2

주사위 굴리기 6 나오면 멈추기예제

let dice;
while (true){
    dice = parseInt((Math.random * 6) + 1);
    console.log(dice);
    if (dice === 6 ){
        break;
    }
}

56. break - 3

!!!확인 문제!!!
두개의 주사위를 던지고 나온 값을 출력 두 주사위의 값이 같을때까지 반복

let dice1;
let dice2;

while (true) {
    dice1 = parseInt((Math.random()*6) + 1);
    dice2 = parseInt((Math.random()*6) + 1);

    console.log(dice1, dice2);

    if(dice1 === dice2){
        break;
    }  
}

57. break - 4

숫자 맞추기 게임 재작성해보자.

//컴퓨터가 1~100사이의 수 선택
let num = parseInt((Math.random() * 100) + 1);

let count = 1;
while (true) {
    let user = +prompt("1~100의 값 중 컴퓨터가 선택한 수를 맞춰보세요", 50);

    if (num > user){
        //user가 입력한 수가 com보다 작으면 alert("더큰수")
        alert("더 큰 수를 입력해주세요")
        count++;
    } else if (num < user){
        //user가 입력한 수가 com보다 크면 alert("더작은수")
        alert("더 작은 수를 입력해주세요")
        count++;
    } else if (num === user){
        //user가 입력한 수가 com보다 크면 alert("정답입니다.")
        alert(count + "번 만에 정답입니다.")
        break;  
    }  
}

정답이면 break문을 만나서 게임을빠져나가도록 해주자.

58. nested-loop 중첩된 반복문

code-block안에 code-block하는 경우가 많다. 구별을 잘하기 위해서 들여쓰기를 잘해주자.

console.log("이전 코드 들");
for (let j = 0; j < 5; j++) {
    console.log("j", j);
    for (let i = 0; i < 5; i++) {
        console.log("i", i);
    }
}
console.log("다음 코드 들");

i가 0~4까지 출력하고 j로 돌아가서 출력 이걸 반복함.

59. nested-loop - 2

for (let j = 0; j < 5; j++) {
    console.log("j", j);

    for (let i = 0; i < 5; i++) {
        console.log("i", i);
        if (i === 2 ){
            break;
        }
    }
}

중간에 if문을 만나서 break를 시키고 싶은데 이 break문이 밖의 for문을 종료시키고 싶다.

outerLoop: for (let j = 0; j < 5; j++) {
    console.log("j", j);

    for (let i = 0; i < 5; i++) {
        console.log("i", i);
        if (i === 2 ){
            break outerLoop;
        }
    }
}

break에 아무것도 안쓰면 현재 루프를 중지시키는데 라벨을 작성하고 break문 옆에 라벨을 작성하면 해당 라벨의 반복문을 종료시킨다.

60. nested-loop - 3

!!!확인문제!!!
구구단을 출력해보자!!

for (let i = 1; i <= 9; i++){
    console.log("[" + i + "단]");
    for (let j = 1; j <= 9; j++) {
        console.log(i + "X" + j + " = " + (j*i)); 
    }
}

1단 ~ 9단 거꾸로 출력하기!!

for (let i = 9; i >= 2; i--){
    console.log("[" + i + "단]");
    for (let j = 9; j >= 1; j--) {
        console.log(i + "X" + j + " = " + (j*i)); 
    }
}

61. continue - 1

loop의 하나의 반복을 건너뛰고 이어서 나간다.
이미 실행된 코드는 상관없이 바로 다시 반복문 위로 돌아감

for (let i = 0 ; i <5; i++){
    console.log(i);
    continue;
    console.log("코드 블럭내 다음 코드들");
}

console.log(0); -> continue; -> console.log("코드 블럭내 다음 코드들"); !!건너뜀!! ->console.log(1);
순서대로 출력되기 때문에 전체 명령문을 건너뛰는게 아니라 continue만난시점부터만 넘어감.

62. continue - 2

10까지 출력하는데 짝수만 출력하도록 하고싶다.

for (let i = 1; i <= 10; i++) {
    if (i % 2 !== 0) {
        continue;
    }
    console.log(i);
}

짝수가 아니라면 continue하도록 해주기

63. continue - 3

!!!확인문제!!!
1100 중 제외할 배수를 입력하세요
let num = +prompt("1100 중 제외할 배수를 입력하세요.", 1);
사용자로부터 num을 전달받고 이 num의 배수를 출력하지 않도록 하자. continue문 활용하기(활용안해도 풀림)
i = 1 ~ 100까지 반복하는데 num으로 나눠서 나머지가 0이면 num의 배수이다. 이것을 출력안하면된다.

for (let i = 1; i <= 100; i++) {
    if (i % num === 0){
        continue;
    }
    console.log(i);
}

물론 continue를 사용안할수도 있다.

for (let i = 1; i <= 100; i++) {
    if (i % num !== 0){
        console.log(i);
    }
}

배수가 아닐때만 출력하면된다.
번외 그 배수만 출력하기하면
나머지가 0인거만 출력하면된다.

for (let i = 1; i <= 100; i++) {
    if (i % num !== 0){
        continue;
    }
    console.log(i);
}

64. array - 1

let a = "java";
let b = "html";
let c = "css";
let d = "javascript";
let e = "react";

console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);

반복해서 이렇게 출력하면 비효율적이다.

얘를 배열로 담으면 쉬워진다.
array : 여러 값을 저장한 자료형
let f = ["java","css","html","vue","react"];

여러 값을 타입 구분없이 가질 수도 있다.
let g = [3, "css", true, 3.14, null, undefined]

빈 배열도 생성가능하다.
let h = [];
코드가 길어지면 각 값 앞에서 새로운 줄 입력하면된다.
let i = ["javascipt" ,
"html은 페이지의구조를 나타낸다.",
"css는 html 요소를 꾸미는 코드다."
];

65. array - 2

let a = ["java", "css", "js", "jquery"];
console.log(a);
특정 값만출력하고 싶을때 배열이름[index]해주면된다.
배열내의 값은 index를 통해서 접근 가능
배열의 index는 0부터 시작
console.log(a[0]); //java
console.log(a[1]); //css
console.log(a[2]); //js
console.log(a[3]); //jquery
index가 없는 값을 가져오면 undefined
console.log(a[4]); //undeifned

let b = a[0];
console.log(b); //java
console.log(a[0]); //java
값을 바꾸고 싶다? index쓰고 값넣으면됨.
a[0] = "spring";
console.log(a[0]); // spring

66. array - 3

let a = ["spring", "java", "css", "html", "vue", "react"]
console.log("반복문 사용");

for (let i = 0 ; i < 5 ; i++){
    console.log(a[i]);
}

배열의 길이(아이템의 갯수)
console.log(a.length);
배열의 길이를 알고 for문을 수정하면 반복횟수를 잘못 입력할일이없다.
나중에 배열이 변경되어도 알아서 갯수에 맞게 출력이된다.

for (let i = 0; i < a.length; i++){
    console.log(a[i]);
}

2023.02.07 후기

자바스크립트의 배열까지 배웠다. 나중에 자바를 배울때 다른점을 잘비교하면서 공부해야할 것 같다.