멋사_프론트엔드스쿨_TIL_5W_1Day

Don't forget the code for your dream! ·2021년 11월 29일
JavaScript멋쟁이사자처럼
0

멋쟁이사자처럼_ 프론트엔드스쿨_ TIL ✏️

목록 보기
21/30

5주차가 시작되고 공부법을다시 정립했다.

Remind (19:30~23:00)

1) 교안
2) deep dive 1회독
3) deep dive ebook → 정리
4) 혼자 공부하는 자바스크립트 (+학습사이트)→ 추가

→ 21:00 study meet up

Preview (A.M 06:00~09:00)

1) 다음 진도 예습
2) 프론트엔드 기초 도서

How to study for JS?

☑️  전체 가지를 치고 난 뒤에 자세히 가지치기를 하고 나뭇잎을 그려라. (제코베(제주코딩베이스캠프) 요약 강좌를 여러번)

☑️  백문이 불여일 타다다닥!

about:blank 를 켜고...

1. 출력방법 4가지

☑️ window.console.log('hello')

☑️ document.write('hello world')

☑️ document.getElementById('one').innerHTML= 'hi;

☑️  window.alert('hello world')

window.innerWidth → window 의 width 값 출력

document→ 문서를 control

접근방법 (멤버접근 연산자 '.' dot)

window.console.log

2. 꼭 알아야할 console.

console.dir(window) → (window)의 정체를 알려줘

console.error('hello') → error를 표시 할 때!

console.log.table
(⚠️ 변수는 let으로만 선언! )

let tableSample = [

{

"name":"ryung",

"age" :"11",

"gender" : "feamle"

}

]

console.table(tableSample)

3. 변수

변수? 메모리 주소의 식별자 (담는다의 개념이 아니라, 주소를 가리킨다!)

typeof 'hello world'   // String
typeof 100             // Number
typeof NaN             // Nnumber
typeof true            // Boolean
typeof undefined       // undefined
typeof Symbol()        // Symbol
typeof null            // Object
typeof []              // Object
typeof {}              // Object
typeof function () {}  // Object
typeof /정규표현식/gi   // Object

number 관련 함수

// Number 관련 함수
let n = 10000;
let nFloat = 10000.123123123;
let s = '10,000,000';

document.write(`n : ${n} <br>`);
document.write(`n.toLocaleString() : ${n.toLocaleString()} <br>`);
document.write(`s : ${s} <br>`);
document.write(`s.replace(/,/g, '') : ${s.replace(/,/g, '')} <br>`);
document.write(`parseInt(s, 10) : ${parseInt(s, 10)} <br>`);
//소주점 자리 표기법//
document.write(`n.toFixed(10) : ${n.toFixed(10)} <br>`);
// 지수 표기법 //
document.write(`nFloat.toFixed(3) : ${nFloat.toFixed(3)} <br>`);   
document.write(`nFloat.toExponential(4) : ${nFloat.toExponential(4)} <br>`);

document.write(`Number(true) : ${Number(true)} <br>`);
document.write(`Number(false) : ${Number(false)} <br>`);
document.write(`Number('') : ${Number('')} <br>`);
document.write(`Number(' ') : ${Number(' ')} <br>`);
document.write(`Number('hello') : ${Number('hello')} <br>`);
document.write(`Number('10 20') : ${Number('10 20')} <br>`);
document.write(`Number('10     ') : ${Number('10     ')} <br>`);
document.write(`Number('     10') : ${Number('     10')} <br>`);
document.write(`Number('     10     ') : ${Number('     10     ')} <br>`);

document.write(`Math.PI : ${Math.PI} <br>`);
document.write(`Math.round(4.7) : ${Math.round(4.7)} <br>`);
document.write(`Math.pow(2, 8) : ${Math.pow(2, 8)} <br>`);
document.write(`Math.sqrt(64) : ${Math.sqrt(64)} <br>`);
document.write(`Math.abs(-5) : ${Math.abs(-5)} <br>`);
document.write(`Math.random() : ${Math.random()*10} <br>`);
document.write(`Math.max(10, 20, 30, 40, 50) : ${Math.max(10, 20, 30, 40, 50)} <br>`);
document.write(`Math.min(10, 20, 30, 40, 50) : ${Math.min(10, 20, 30, 40, 50)} <br>`);

☑️ toFixed(n): 소수점 n번째 자리

let n = 10000
n.toFixed(4)
'10000.0000'
n.toFixed(5)
'10000.00000'

4. 연산

산술연산

할당연산

: ⚠️ 할당은 우선순위가 굉장히 높다.
(협업 할 때는 괄호로 해결하면 됨)

비교연산

: 객체의 크고 작고를 비교하거나 맞고 틀림을 비교하는 연산을 말한다.

var x, y;
x = 20;
y = 10;
document.write(x > y, '<br>');         // true
document.write(x < y, '<br>');         // false
document.write(x <= y, '<br>');        // false
document.write(x >= y, '<br>');        // true

document.write(x == 20, '<br>');       // true
document.write(x === '20', '<br>');    // false
document.write(x != y, '<br>');        // true
document.write(x != y*2, '<br>');      // false

var x, y, z;
x = 10;
y = 20;
z = '10';

document.write(x > y, '<br>');
document.write(x < y, '<br>');
document.write(x >= y, '<br>');
document.write(x <= y, '<br>');

document.write(`x == z : ${x == z} <br>`);
document.write(`x === z : ${x === z} <br>`);
document.write(`x != y : ${x != y} <br>`);
document.write(`x != 10 : ${x != 10} <br>`);

→ == === 중 === 가 속도가 더 빠르다.

논리연산

  • true == 1
  • false == 0
  • and &&
    = 곱 (true true) (앞에가 false면 무죡건 false)
  • || or
    = 논리합
  • ! = 부정

and or 연산은 어떻게 쓰일까?

코딩도장 문제를 풀어보자

⬇️ 

let result = 0;

for (let x = 0; x < 1001; x++) {
    if (x % 3 == 0 || x % 5 == 0) {
        result += x
    }
}
console.log(result);
**[풀이]**
1) 1000미만이므로 1001까지 scope를 정한다. 
2) 3의 배수 || 5의 배수를 구한다.
➡️ 3으로 나누었을 때 0인 값, 5로 나누었을 때 0인 값 추출
3) 결과값을 센다.

삼항 연산자 (조건부 연산자) 

let age = 10
let accessAllowed = (age >18) ? true:false;
accessAllowed
// false
---
let age = 10
(age > 18) ? console.log('성인입니다!!') : console.log('미성년자입니다!!')
//미성년자입니다!!

5. 조건문과 반목문

5-1. 조건문

: If 안의 조건이 true일 때만 수행! false이면 수행하지 않아. 

let x = 10;

if (x<100){
    console.log('100보다 작아')
}
 100보다 작아

If 조건문이 중첩되었을 경우는 둘다 true일 때만 두개 다 출력
If 조건문이 2개가 분리 되어 있을 경우에는 따로 출력

if ( x <100) {
    console.log('100보다 작아요!')
    if (x>5) {
        console.log('5보다 커요!')
    }
}
100보다 작아요!
 5보다 커요!

----

if ( x <100) {
    console.log('100보다 작아요!') 
}
    if (x>5) {
        console.log('5보다 커요!')
    }
5보다 커요!

---

if (false) {
    console.log(1)
} else {
    console.log(2)
}
 2
undefined
if (true) {
    console.log(1)
} else { 
    console.log(2)
}
 1

Switch문 

new Date()
Mon Nov 29 2021 16:13:20 GMT+0900 (Korean Standard Time)
new Date().getDate()
29
new Date().getDay()
1  //0_일요일, 1_월요일
------

switch (new Date().getDay()) {
  case 0:
    document.write('일요일입니다.')
    break;
  case 1:
    document.write('월요일입니다.')
    break;
  case 2:
    document.write('2번째 case입니다.')
    break;
  case 3:
    document.write('3번째 case입니다.')
    break;
  default:
    break;
}
월요일입니다. //(오늘 월요일임)

5-2. 반복문

let cars = ["BMW", "Volvo", "Saab", "Ford", "Flat", "Audi"];

for (let i = 0; i < cars.length; i++){
    console.log(i);
}
0
1
2
3
4
5
---
//전체 순회 
let cars = ["BMW", "Volvo", "Saab", "Ford", "Flat", "Audi"];

for (let i = 0; i < cars.length; i++){
    console.log(cars[i]);
}
BMW 
Volvo 
Saab 
Ford 
Flat 
Audi

👩🏻‍💻 1~100까지 더하는 완뵥한 계산식 : n(n+1)/2


//반복문
for(var i=0; i<10; i++){
  document.write(i, '<br>');
}

//1부터 100까지의 짝수의 합
let s = 0;
for (var i = 0; i < 101; i+=2) {
  document.write(i, '<br>');
  s += i;
}
document.write(s, '<br>');

//구구단
for (var i = 2; i < 10; i++) {
  for (var j = 1; j < 10; j++) {
    document.write(`${i} X ${j} = ${i*j} <br>`);
  }
}
// 구구단은 꼭 외자! 
for (let i = 2; i < 10; i++) {
    for (let j = 1; j < 10; j++) {
        console.log(`${i} x ${j} = ${i*j}`)
    }
}

//100보다 작은 3의 배수와 5의 배수의 합
s = 0;
for (var i = 0; i < 101; i++) {
  if(i%3==0 || i%5==0){
    document.write(i, '<br>');
    s += i;
  }
}
document.write(s, '<br>');

⚠️ #### Google 문제 (문제확인)

👾 1부터 10000까지 8이라는 숫자가 총 몇번 나오냐?
8이라는 숫자를 모두 카운팅 (8088은 3, 8888은 4) 

let text = '';
let count = 0;

for (let i = 0; i < 10001; i++) {
    text += i;
}
// console.log(text);
for (let i = 0; i < text.length; i++) {
    if (text[i] == '8'){
        count += 1;
    }
}

console.log(count);

☝🏻 번외 필수 지식

⚠️  8bit == 1byte
⚠️ 1024byte == 1KB

⚠️ 1024KB == 1MB

⚠️ 1024MB == 1GB

⚠️ 1024GB == 1TB

(갈매기털빼 로.....외우세요)

⚠️ 진수야...

0b100 → 4 : (2^2)1+(2^1)0 +(2^0)*0

0o100 →64 : (8^2)1+(8^1)0 +(8^0)*0

0x100 →256 : (16^2)1+(16^1)0 +(16^0)*0

(10^2)2+(10^1)2 +(10^0)*5 → 225

⚠️ 부동소수점 관련

해설

MEMOIR

만만찮은 녀석이다..

앞으로는 아래 세가지를 취합해 TIL을 작성할 예정이다.

👩🏻‍💻 혼자 공부하는 자바스크립트 
👩🏻‍💻 모던 자바스크립트 딥다이브 
👩🏻‍💻 교안

스터디를 본격적으로 시작하게 되었는데,
아주 ...
기대가 된다!!

나는 지금 반복문이 헛갈린다.
반복문을 더 집중적으로 연습하자!

profile
Don't forget the code for your dream!
이전 포스트

멋사_프론트엔드스쿨_TIL_4W_3Day

다음 포스트

멋사_프론트엔드스쿨_TIL_5W_2Day

0개의 댓글