[220520 / Day 14] JS 제어문, SCSS 활용

1. 조건문 if 문 212p

1) js1.js

값이 없는 것으로 인식하는 건 0 ‘’ null undefind

따라서 if 문 인식하지 못하고 else 로 출력

값이 있는 건 무조건 참, 뭐 비교문 같은 게 들어와야 인식하는 게 아님

 

2) js2.html

.window 라는 객체는 최상위 객체라서 생략가능

브라우저에 창을 띄우게 하는 건 prompt

 

3) js3.html

if(score>=90 && score<=100) 이곳에서 걸러지지 않으면 나머지 변수로 처리

 

4) js4.html

if, else 중첩 주의할 것!

순서 : id 변수 선언 - id 의 if 문 - pw 변수 선언 - pw 의 if 문 - pw 의 else 문 - id 의 else 문

 

 * 아이디와 비밀번호를 입력 받고 아이디가 sesac , 비밀번호가 001 경우에만 로그인 되었습니다. 출력 아닌 경우 로그인 정보가 일치하지 않습니다.

let userId = prompt(`아이디를 입력하세요`)

        let userPw = prompt(`비밀번호를 입력하세요`)

 

        if(userId==`sesac` && userPw==`001`){

            console.log(`로그인 되었습니다.`)

        }else{

            console.log(`로그인 정보가 일치하지 않습니다.`)

        }

 

 

* 아이디가 맞으면 비밀번호 창 뜨도록, 맞지 않으면 아이디가 틀렸다고 뜨도록

let userId = prompt(`아이디를 입력하세요`)

        if (userId === 'sesac') {

            let userPw = prompt(`비밀번호를 입력하세요`);

            if (userPw === '001') {

                console.log(`로그인 되었습니다.`)

            } else {

                console.log(`비밀번호가 잘못 입력되었습니다.`)

            }

        } else {

            console.log(`잘못된 아이디입니다.`);

            //

        }

 

 

 

2. 조건문 switch 문 217p js5.js

- 범위가 한정적일 경우 간단하게 사용가능

- 표현식 : 값으로 결과가 나올 수 있는

- break : 문장의 케이스가 일치해도 브레이크 안해주면 종료가 안됨, 구문이 완료됐을 때 종료하고 떠나도록

case '10': console.log(`당첨! 냉장고`);

case '20': console.log(`당첨! 아이패드`);

    break;

* break 문이 없으면 값이 냉장고, 아이패드가 같이 나옴

- 디폴트문이 없으면 나머지 값은 받지 않을 뿐이지 에러는 안남

 

 

 

3. 반복문

 

1) while문 js7.js

while(i<=10){

    console.log(`문장반복출력`);

    i++;

}

→ i 의 값이 10이 될 때까지 10번 반복하고 끝남

 

2) do/while 문 225p

조건에 상관없이 한번은 무조건 실행됨, 조건에 맞지 않아도 한번은 나오게 하고 싶다 할 때 실행

 

3) for 문 228p js8.js

증감식 들어가는 경우 많음

for(let i = 1; i<5 ; i++){

    console.log(i)

}

→ 5 미만으로 올 때까지 증감하여 출력 따라서 값은 1 2 3 4

 

for(let i = 1; i<10 ; i++){

    console.log(i*2)

}

→ 2의 배수 나옴

 

for(let i = 1; i<10 ; i++){

    console.log(`${i}x2=${i*2}`)

    /* console.log(i+'x2'+(i*2)) -> 다른 표기법 */

}

 

 

 

4. 점프문 237p

 

1) 라벨문

- 사용법  라벨 이름 : 문장 (ex:  loop : switch)

- 라벨 이름에는 모든 식별자 사용 가능

- 라벨로 점프할 수 있는 문장은 break 와 continue / 따라서 실제로 라벨을 붙여서 사용할 수 있는 문장은 switch 문과 반복문

 

2) break 문

- switch 문과 반복문 안에서만 사용 가능

- 사용법 : break; 또는 break 라벨 이름;

- 줄바꿈 문자x

- 주로 중첩된 반복문의 안쪽 반복문안에서 전체 반복문을 빠져나올 때 사용.

 * if(i===5){ break; }  → i가 5와 같다면 출력을 멈춤 이라는 뜻

switch (luckyNum) {

    case '10': console.log(`당첨! 냉장고`);

        break;

    case '20': console.log(`당첨! 아이패드`);

        break;

    case '30': console.log(`당첨! TV`);

        break;

    default: console.log(`꽝 다음기회에`);

}

→ switch 문에서 다음 건 출력되지 않도록 break

 

loop: while (true) {

    ...

    if (confirm('종료하시겠습니까?')) break loop;

    ...

}

→ if 위아래 코드 상관 없이 loop 라고 라벨 이름을 붙인 while 문 에서 break(빠져나옴) 한다.

 

3) continue 문

- 사용법 : continue; 또는 continue 라벨 이름;

- 라벨 지정 여부와 관계없이 반복만 안에서만 사용 가능

- 반복문 실행을 멈추고 반복을 새로 시작, 이 때의 동작이 반복문에 따라 달라지는데

→ while 문, do/while 의 경우 true 면 반복문 처음부터 실행

→ for 문의 경우 ture 면 반복문을 이어서 실행

 

 

 

5. SASS, SCSS 전처리기기

preprocessor 선행처리기기 라고 함

html 에는 scss 말고 css 파일 연결

scss 파일 만들어 놓고 하단의 watch scss 누르면 동일한 이름의 css 파일이 생김

 

- 변수 적용하기 : $원하는 이름: 속성값; -> 나중에 클래스에 속성값으로 $원하는 이름 적으면 그대로 적용

 

- 중첩 적용하기 : .box4{  p{ }  }

중첩 적용하다보면 .box4 밑에 p 이기 때문에 한칸이 띄워짐

그래서 :hover 같은 경우 a :hover 이렇게 띄어쓰기가 생겨서 &:hover 이렇게 & 넣어줘야 함

 > 자식 표시도 똑같음 >a 이렇게 해줄 것

* 많이 중첩하면 너무 정신없을 수 있음

 

- 리셋 파일 불러오기:

@use '_core.scss';

_ 언더바 하면 복사해서 css 파일이 새로 만들어지지 않음

 

- @extend : 중괄호 안에 @extend .클래스 이름

.아무 클래스 이름{ 공통 속성들 작성; }

.지정하고 싶은 클래스{ @extend .아무 클래스 이름 }

→  .아무 클래스 이름 에 지정돼 있는 공통 속성을 지정하고 싶은 해당 클래스 중괄호 안에 extend .아무 클래스 이름 이렇게 지정하면 해당 속성들 적용

 

- @mixin :

@mixin 원하는 이름 ( $지정할 속성 이름 ){

           공통으로 원하는 속성 등 지정;

           공통으로 원하는 속성 등 지정;

           공통으로 원하는 속성 등 지정;

           다르게 할 속성: $지정할 속성 이름;

}

.지정할 클래스{

           @include 원하는 이름( 다르게 지정할 속성 )

}

→ minix 중괄호 안에 속성은 공통으로 지정하고 싶은 속성에 다 들어가고 다르게 지정하고 싶은 속성은 클래스를 따로 부여하는 것처럼 mixin 옆에 이름 지정해주고 $ 으로 불러들여서 지정할 클래스에 @include 해줘서 공통 속성 부여해주고 그 다음 다르게 지정하면 그 속성만 다르게 지정 가능.