Front-end 국비지원 #029일

JooSehyun·2022년 11월 24일
CSSDynamic typingInfinityJavaScriptStringSymbolTruebooleanconstfalseforhtmlletnullnumberobjectundefined
0

JavaScript

Number

1-1 무한의 양수 값

JavaScript

const infinity=1/0;

결과

1-2 무한의 음수 값

JavaScript

const negativeInfinity=-1/0;

결과

1-3 문자열 '문자' 연산

JavaScript

const nAn='not a number'/2;

결과

  • 문자열은 나눌 수 없다. (+, -, *, / 등 불가능)

String (문자)

1. 문자와 변수 연결

JavaScript

const char='c';
const joo='joo';
const hyeon='hello '+joo
const hyeons='hi'+1;

결과

  • 문자와 변수를 연결할때 ` (벡틱) 을 사용하면 쉽게 표현할 수 있음

console.log(hyeon);
console.log(value:${hyeon}, type:${typeof hyeon});
console.log(value:${hyeons}, type:${typeof hyeons});
console.log(value:${hyeons1}, type:${typeof hyeons1});

  • type 과 value를 알고 싶을때 쓰는 코드 사용하면 console에 해당 value와 type이 출력된다.

Boolean (참 or 거짓) (True or false)

* true

1 과 any other value 내용이나 값이 들어있는 나머지 전부(내용이 있거나 다른 value 값들이 있을 경우)

* false

0 , null , undefined , NaN 등이 있다.

JavaScript

const canRead=true; // true
const test=3<1; // false
console.log(`value:${canRead}, type:${typeof canRead}`)
console.log(`value:${test}, type:${typeof test}`)

결과

null (false)

undefind(아직 정의가 되지 않은것) , 비워져있는것

JavaScript

let nothing=null; //아무것도 아닌것 내가 고의로 지정해준것 
console.log(`value:${nothing} type:${typeof nothing}`) //object로 인식

결과

undefined

JavaScript

let x;
console.log(`value: ${x} type: ${typeof x}`);

결과

symbol

우선 순위를 주고 싶을 때 고유한 식별자가 필요할때 사용 

const symbol1=Symbol('id'); 
const symbol2=Symbol('id');

console.log(symbol1===symbol2);
이렇게 하고. symbol1 과 symbol2 는 같은지 보면 아래와 같이 false 가 뜬다.
(* = 대입 ==같다 ===데이터 타입까지 같니?)

symbol1 과 symbol2를 같게 하고싶다면 이렇게 사용한다.

const symbol1=Symbol.for('id');
const symbol2=Symbol.for('id');

이렇게 한 후 콘솔로 확인한다. console.log(symbol1===symbol2); true가 나온다.

* 심볼은 바로 콘솔로 출력하면 오류가 난다.
console.log(value: ${symbol1}, type:${typeof symbol1}) string으로 변환이 되지 않아서 에러가 뜸..

* 문자열로 변환해서 출력해야 함 (.description을 쓴다)
console.log(value: ${symbol1.description}, type:${typeof symbol1})

Dynamic typing (동적 타이핑)

JavaScript

let text='hello';

console.log(text.charAt(0));
console.log(text.length);
console.log(`value:${text}, type:${typeof text}`);
text=1;
console.log(`value:${text}, type:${typeof text}`);
text='5'+6;
console.log(`value:${text}, type:${typeof text}`);
  • let text에 'hello'라는 변수를 넣어준다.

console.log(text.charAt(0)); console 창에는 'h'가 나온다.
'hello'의 '0'번째의 문자는 무엇인지 물어본다.

console.log(text.length); 'hello'의 length가 몇자 인지 나온다. '5'

console.log(value:${text}, type:${typeof text}); 텍스트의 value와 type을 본다.
value는 'hello' 이고 type은 'string'이다.

ex)
text=1;
console.log(value:${text}, type:${typeof text}); text를 '1'로 변경하였고 value와 type의 값을 본다.
value는 '1'이고 type은 'number'이다.

ex)
text='5'+6;
console.log(value:${text}, type:${typeof text}); text를 이번에는 '5'+6으로 변경하였고 value와 type의 값을 본다.
value는 'string'과 'number'가 합쳐져서 11이 나오지 않고 문자 5와 6이 합쳐져서 '56'으로 나오고 type은 string으로 나온다.

문자열로 변환

JavaScript

text='8'/'2';
console.log(`value:${text}, type:${typeof text}`);
console.log('value:' + text+', type: '+typeof text);

text에 '8' / '2' 를 넣었다. +를 제외하고 빼기( - ) , 나누기( / ) , 곱하기( * )는 숫자로 인식하여 계산해준다. 문자를 숫자로 인식하여 type에도 number로 인식하지만 더하기( + )를 하면 string으로 인식하여 value는 '82' type은 'string'이 뜬다.

Object

JavaScript

const apple={name:'사과', age:1, address:'과수원'}
console.log(apple)
apple.age=2;
console.log(apple)

변할 수 없는 값 const 에 'apple'을 만들고 name은 '사과' age는'1' address는 '과수원' 이다.
apple 이라는 명칭은 바꿀 수 없지만, 안에 있는 속성들은 새로 선언하면 바뀐다.

연산자

프로그래밍 언어에서 특정 연산을 하도록 하는 문자이다.

1. 문자결합 (string concatenation)

JavaScript

console.log('my'+'joo')//string
console.log('my'+2)//string
console.log(`string literals : 1+2=${1+2}`)
  'my' + 'joo' = 'string' 으로 myjoo 가 나오고
  'my' +2 = 'string' + 'number' 도 my2 로 나온다.
  `string literals : 1+2=${1+2}` 1+2는 문자로 표현하고 ${1+2} 를 넣어주면 1+2=3 의 값으로 나오게 할 수 있다.

2. 숫자 연산자 (numberic operators)

JavaScript

console.log(1+1);
console.log(10-1);
console.log(2*2);
console.log(4/2);
console.log(10%3);// 10/3 의 나머지 값
console.log(2**3); //2의3승

결과

  • 1+1= 2
  • 10-1= 9
  • 2x2= 4
  • 4/2= 2
  • 10/3의 나머지 값 10-9= 1
  • 2의3승 = 8

3. 증감 연산자(Increment and Decrement operators)

JavaScript

let counter=3;
const preIncrement=++counter;

counter=3 이고 ++이 counter 앞에 오게 되면 preIncrement의 값은 4이고 counter의 값도 4이다.

let counter=3;
const preIncrement=counter++;

counter=3 이고 ++이 counter 뒤에 오게 되면 preIncrement의 값은 3이고 counter의 값은 4이다.

즉 앞에 ++이 붙으면 preIncrement도 같이 증가하고 뒤에 ++이 붙으면 다음번에 증가하므로 preIncrement의 값은 3이 된다.


3-1. 감소 연산자

JavaScript

let counter=3;
const preIncrement=--counter;

counter=3 이고 --이 counter 앞에 오게 되면 preIncrement의 값은 2이고 counter의 값도 2이다.

let counter=3;
const preIncrement=counter--;

counter=3 이고 --이 counter 뒤에 오게 되면 preIncrement의 값은 3이고 counter의 값은 2이다.

감소연산자도 마찬가지로 앞에 --가 붙으면 같이 감소하고 뒤에 --가 붙으면 다음번에 감소된다.

4. 할당연산자 (Assignment operators)

let x=3;
let y=6;

x +=y; //x=x+y
x -=y; //x=9 y=6 9-6=3
x *=y; //x=3*6 = 18
x /=y; //x=18/6 = 3
console.log(x);

x +=y; 에 =은 대입이므로 x= x+y 이다. 이렇게 쓰는이유는 실행속도가 빠름

5. 비교연산자 (Comparison operators)

console.log(10<6); = false
console.log(10<=6); = false
console.log(10>6); =true
console.log(10>=6); =true

or( || ) , and( && ) , not( ! )
or의 경우 여러개중에 하나라도 참이 있으면 '참'
or의 특징 : 첫번째가 참이면 더이상 다음 연산자를 읽지 않음
or의 주의 : 가벼운 연산자를 제일 먼저 둬서 읽어오게 만드는 것을 추천
and의 경우 : 여러개중에 전부다 참일 경우 '참'
not의 경우 : 홀수(1, 3, 5, 7)의 not은 짝수(2, 4, 6, 8) 응용 가능.

ex )

1) const value1=false;
2) const value2=4<2;
3) function check(){
    for(let i=0; i<10; i++){
        console.log('happy'+i);
    }
    return true;
}

예제에 1번 2번 3번이 있다. 가령 or( || )을 써야하는 경우에는 하나라도 참이 있으면 '참' 이므로 복잡한 연산이 없이 '참'인 값을 먼저 '참'으로 나오게 하는것이 좋다.
1) 가장빠르게 도출되는 값
2) 두번째로 빠르게 도출되는 값
3) 상대적으로 제일 복잡한 값

또는 or 처럼 하나만 '참'일 경우 '참'이므로 제일 먼저 '참'이 되는 값을 넣어주는것이 좋다.

  • or( || )

    or( || ) 을 사용한다면 이렇게 사용하는것이 좋다. -> console.log(or:${check() || value2 || value1})

  • and( && )

    and( && ) 를 사용한다면 1) false 2) false 3) true 이므로 false 값이 된다.

  • not( ! )

    not( ! ) 을 사용하면 console.log(or:${!value1 && !value2 && check()}) 반대가 되므로
    1) true 2) true 3) false 가 된다.

6. 같다(Equality)

ex ) 1

const stringFive='5'
const numberFive=5

위의 stringFive='5' 와 numberFive=5 가 같냐고 물어본다.

console.log(stringFive==numberFive) 는 'true'
console.log(stringFive===numberFive) 는 'false' 가 뜬다.

'==' 값은 같지만 '===' type은 다르기 때문에 'false' 가 뜬다.

ex ) 2

const joo1={name: 'se'}
const joo2={name: 'se'}
const joo3=joo1

console.log(joo1==joo2) 는 false
console.log(joo1===joo2) 는 false
console.log(joo1==joo3) 는 true

ex ) 3

console.log(0==false);
console.log(0===false);
console.log(''==false);
console.log(''===false);
console.log(null==undefined)
console.log(null===undefined)

console.log(0==false); 는 true (0은 false이다.)
console.log(0===false); 는 false 이다. (0은 블리언 타입이 아니기 때문)
console.log(''==false); 는 true
console.log(''===false); 는 false
console.log(null==undefined) 는 true
console.log(null===undefined) 는 false (임의로 비운것이기 때문에 정의를 하지 않은 값인 undefined 와 다르다)

7. 반복문 (Loops)

1) while문 : while(i>0) 부터 조건이 틀리면 실행을 하지 않음

ex ) 1

let i=3;
while(i>0){
    console.log(`while: ${i}`)
    i--
}

i 는 3이고 i>0 , 즉 i는 3에서 -1 씩 0보다 큰 값이 될 때까지 반복한다.

결과

while: 3
while: 2
while: 1

2) do while문 : 실행문이 먼저 나오고 조건문이 뒤에 있음

*while과 다르게 한번이라도 실행을 하기 때문에 한번만 실행하게 하는 반복문을 사용할 때 쓴다.

let k=5;
do{
    console.log(`dowhile: ${k}`)
    k--
}while(k<0)

k 는 5이고 반복문은 k가 0보다 작으면 멈춘다. while로 한다면 false가 뜨지만, do while은 5의 값을 도출한다.

결과

do while: 5

3) for문 : (시작값; 조건값; 증가또는 감소값){ 실행문 } 으로 작성

ex )1

for(let i=0; i<10; i++){
    console.log(`for:${i}`)
}

i 는 0부터 시작이고 10보다 작아질때까지 증가한다.

결과

for : 0
for : 1
for : 2
for : 3
for : 4
for : 5
for : 6
for : 7
for : 8
for : 9

ex )2

for(let i=3; i>0; i--){
    console.log(`for:${i}`)
}

i 는 3이고 0보다 클때까지 감소한다.

결과

for : 3
for : 2
for : 1

4) 중첩 for문 nested

ex ) 1

for(let i=0; i<3; i++){
    for(let j=0; j<3; j++){
        console.log(`i:${i},j:${j}`)
    }
}

첫번째 for문안에 두번째 for문이 있다. 두번째 for문이 0, 1, 2 가 될때까지 첫번째 for문은 0 이고 두번째 for문이 반복이 완성되면 카운팅이 된다.

결과

i: 0, j: 0
i: 0, j: 1
i: 0, j: 2
i: 1, j: 0
i: 1, j: 1
i: 1, j: 2
i: 2, j: 0
i: 2, j: 1
i: 2, j: 2

5) continue : 반복문에서 지금것만 스킵하고 다음것 실행

ex ) 1

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

결과

0
2
4
6
8
10

6) break : 반복문에서 완전히 끝내는것

ex) 1

for(let i=0; i<=10; i++){
    if(i>8){
        break;
    }
    console.log(i)
}

for(let i=0; i<=10; i++) i 는 10 과 같거나 작을 때 까지 반복하지만 if( i > 8 ) break; 를 넣으면 8보다 클때 멈춘다.

결과

0
1
2
3
4
5
6
7
8

7) if, else if, else

ex )1

const names='joo';
if(names=='joo'){
    console.log('Welcom joo');
}else if(names=='coder'){
    console.log('Welcom coder');
}else{
    console.log('unknown');
}

const names를 'joo'를 지정하고 if문에 이름이 joo와 같으면 콘솔창에 Welcom Joo 를 뜨게 하였다.
else if에 names가 coder라면 Welcom coder 가 뜬다. names가 'joo' 와 'coder'가 아니라면 (else) 는 unkonwn이 뜬다.

8) 삼향조건연산자 (condition ? value1 : value2) : true = value1 false = value2 / if 와 else를 사용

ex )1


console.log(names=='joo'? 'yes' : 'no')//물음표 기점 'true' : 'false' 값이 된다.

/* let gender=prompt('당신의 성별은 뭐에요?','여성');
let age=prompt('당신의 나이는?','30') */

9) 우선순위

1.()
2.단항 연산자(--, ++, !)
3.산술 연산자(, /, %, +, -)
4.비교 연산자(>,>=,<,<=,==,===,!==)
5.논리 연산자(&&, ||)
6.대입 연산자(=,+=,-=,=,/=,%=)

JavaScript 문제풀이

ex) 20대 여성이면 true, 아니라면 false를 나타내시오

JavaScript

let gender=prompt('당신의 성별은 ?','여성');

if(gender=='여성'){
  console.log('true');
  }
  else{
      console.log('false');
  }

'여성' 이면 true 의 값이 나오고 그 외의 값은 false로 나온다.

ex) prompt 메서드를 활용하여 국어, 영어, 수학 점수를 입력 받으세요. 평균이 70점 이상이고 각 과목별 점수가 60점 이상이면 true를 아니라면 false를 출력합니다.

JavaScript

let korNum=Number(prompt("국어 점수는?","0"))
let engNum=Number(prompt("영어 점수는?","0"))
let mathNum=Number(prompt("수학 점수는?","0"))
let avg=(korNum+engNum+mathNum)/3;

if(korNum>=60 && engNum>=60 && mathNum>=60 && avg>=70){
    console.log('true')
}else{
    console.log('false')
}

ex) 지출 내역은 교통비 3,000원 식비 7,000원, 음료비 2,000원 입니다. 삼항 조건 연산자를 사용하여 하루 적정 지출 비용인 1만원을 초과했을 경우 "000원 초과"라고 출력되거, 아니면 "돈 관리 참 잘했어요!"라고 출력되도록 해보세요

JavaScript

let p1=3000;
let p2=7000;
let p3=2000;
let total=p1+p2+p3;
total>10000 ? console.log(total-10000+"원초과"): console.log('돈 관리 참 잘했어요!');

ex) 방문자에게 질이응답 창(prompt)을 이용하여 신장과 몸무게를 입력받아 옵니다. 방문자의 몸무게가 적정 몸무게보다 이상일 경우"적정 몸무게 이상", 미만일 경우에는 "적정 몸무게 미달"로 출력되도록 하세요. 적정 몸무게 공식은 '적정 몸무게=(신장-100)*0.9'

JavaScript

let height=Number(prompt("키는?","ex)160"));
let weight=Number(prompt("몸무게는??","ex)50"));
let avg=(height-100)*0.9

if(weight<=avg){
  console.log('적정몸무게 미달')
}else{
  console.log('적정몸무게 이상')
}

ex) 질의응답 창(prompt)을 이용하여 임의로 정한 변수에 시험 점수를 입력 받아 저장한 후 만일 70점보다 크거나 같으면 '합격'이라는 메시지를 출력하시오. (조건만쓴다.)

JavaScript

let grade=prompt("점수는?","0")
if(grade>=70){
  console.log("합격")
}

ex) 나이가 20세 이상이고, 30세 미만일 경우에는 '통과'라고 출력하고, 그렇지 않으면 '비통과'라고 출력하시오

JavaScript

let age=prompt("나이는?","")
if(age>=20 && age<30){
  console.log("통과")
}
else{
  console.log("비통과");
}

for 문을 이용하여 CSS 조작

HTML

<div id="wrap">
      <h1>반복문</h1>
      <div class="box">
          <h2>for</h2>
          <ul class="menu1">
              <li>list item1</li>
              <li>list item2</li>
              <li>list item3</li>
              <li>list item4</li>
              <li>list item5</li>
              <li>list item6</li>
              <li>list item7</li>
          </ul>
      </div>
      <div class="box">
          <h2>for each</h2>
          <ul class="menu2">
              <li>list item1</li>
              <li>list item2</li>
              <li>list item3</li>
              <li>list item4</li>
          </ul>
      </div>
      <div class="box">
          <h2>for in</h2>
          <ul class="menu3">
              <li>list item1</li>
              <li>list item2</li>
              <li>list item3</li>
              <li>list item4</li>
          </ul>
      </div>
      <div class="box">
          <h2>do/while</h2>
          <ul class="menu4">
              <li>list item1</li>
              <li>list item2</li>
              <li>list item3</li>
              <li>list item4</li>
              
          </ul>
      </div>
  </div>

for 문을 이용한 반복문

JavaScript

const $menu1=document.querySelectorAll('.menu1 li')
const $menu2=document.querySelectorAll('.menu2 li')
const $menu3=document.querySelectorAll('.menu3 li')
const $menu4=document.querySelectorAll('.menu4 li')

      //for
      $menu1[0].style.color="blue"
      $menu1[1].style.color="blue"
      $menu1[2].style.color="blue"
      $menu1[3].style.color="blue"
      for(let i=0; i<=$menu1.length; i++){
          $menu1[i].style.color="blue"
          $menu1[i].addEventListener('mouseover', function(){
              this.style.color='red'
          })
          $menu1[i].addEventListener('mouseout', function(){
              this.style.color='black'
          })
      }

for each 문을 이용한 반복문

JavaScript

$menu2.forEach(function(item, index){
          item.style.color="blue"
          item.addEventListener('mouseover', function(){
              this.style.color='red'
          })
          item.addEventListener('mouseout', function(){
          this.style.color='blue'
          })
      })

for of 문을 이용한 반복문

JavaScript

let x;
      for(x of $menu3){
          x.style.color="green";
          x.addEventListener('mouseover', function(){
              this.style.color='red'
          })
          x.addEventListener('mouseout', function(){
              this.style.color='yellowgreen'
          })
      }

do while 문을 이용한 반복문

JavaScript

let y=0;
      do{
          $menu4[y].style.color='orange';
          
          $menu4[y].addEventListener('mouseover', function(){
              this.style.color='red'
          })
          $menu4[y].addEventListener('mouseout', function(){
              this.style.color='yellowgreen'
          })
          
          y++;
      }while(y<$menu4.length)

ul안에 반복문으로 li 만들기

HTML

<div id="wrap">
      <h1>반복문</h1>
      <div class="box">
          <h2>for</h2>
          <ul id="for"></ul>
      </div>
      <div class="box">
          <h2>forEach</h2>
          <ul id="forEach"></ul>
      </div>
      <div class="box">
          <h2>for of</h2>
          <ul id="forOf"></ul>
      </div>
      <div class="box">
          <h2>for in</h2>
          <ul id="forIn"></ul>
      </div>
  </div>

for

JavaScript

const fruits=['apple','peach','banana','orange'];

      for(let i=0; i<fruits.length; i++){
          document.getElementById('for').innerHTML += '<li>'+fruits[i]+'</li>';
          document.getElementById('for').innerHTML += `<li>${fruits[i]}</li>`;
      }

forEach

JavaScript

fruits.forEach(function(item, idx){
          document.getElementById('forEach').innerHTML += `<li>${fruits[idx]}</li>`;
      });

for Of

JavaScript

let item
      for(item of fruits){
          document.getElementById('forOf').innerHTML += `<li>${item}</li>`;
      }

for in : (배열x 객채내의 값들마다 할일(변수(property) + 함수(method))

JavaScript

const person={psname:'JSH', psage:'23', psgender:'남성'}

      let x;
      for(x in person){
          document.getElementById('forIn').innerHTML +=`<li> ${x}: ${person[x]}</li>`
      }

for문을 이용한 구구단 만들기

JavaScript

for(let j=1; j<=9; j++){
          document.write(`<h1>${j}단</h1>`)
          for(let k=1; k<=9; k++){
              document.write(`${j}x${k} =${j*k} <br>`)
          }
      }
profile
JooSehyun
이전 포스트

Front-end 국비지원 #028일

다음 포스트

Front-end 국비지원 #030일

0개의 댓글