티스토리 뷰

*0주 차 Pre-Onboarding B반 4조 언어 스터디
📌 자바스크립트 튜토리얼 하루에 한 페이지씩만 읽어보기 by 리액트 세션 임민영 튜터님
https://javascript.info/

 

The Modern JavaScript Tutorial

We want to make this open-source project available for people all around the world. Help to translate the content of this tutorial to your language!

javascript.info


📌 자바스크립트 문법 뽀개기
2022.10.24 - [⛵ 부트캠프, 항해99/JavaScript 문법 뽀개기] - JavaScript 문법 뽀개기

 

JavaScript 문법 뽀개기

1-4. 변수 * let 변수이름=값 변수 을 선언했고 해당 변수에 을 할당했다고 함. ㅇ 자바스크립트에서는 변수를 선언하는 const 라는 키워드도 있어요! const 변수이름 = 값 const는 let과 달리 변수에 값

choisoobin96.tistory.com


📗 [혼자 공부하는 자바스크립트] Ch 1

<body>
    <script>
        document.body.innerHTML = "<h1>안녕하세요</h1>"
    </script>
</body>


innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져온다!
https://hianna.tistory.com/480

 

[Javascript] innerText와 innerHTML의 차이점

innerText와 innerHTML은 단순한 텍스트만 다룰 경우에는 차이가 없어 보입니다. 이 두 속성은 다루는 값이 text element인지, html element인지에 따라 차이가 납니다. 값 가져오기 (innerText vs innerHTML) A B funct

hianna.tistory.com

innerHTML : 문서 객체 생성
https://gangzzang.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8JavaScript-%EB%AC%B8%EC%84%9C-%EA%B0%9D%EC%B2%B4-%EB%AA%A8%EB%8D%B8DOM-Document-Object-Model

 

자바스크립트(JavaScript) 문서 객체 모델(DOM : Document Object Model)

* 문서 객체 모델(DOM : Document Object Model) - 웹 브라우저가 HTML 페이지를 인식하는 방식(document 객체와 관련된 객체의 집합) 1. 문서 객체 모델과 관련된 용어 정리 - 태그(Tag) : HTML 페이지에 존재하는

gangzzang.tistory.com


- 72p 식별자 종류

구분 단독 사용 다른 식별자와 사용
식별자 뒤 괄호 없음 변수 속성
식별자 다 괄호 있음 함수 메소드

 

📗 [혼자 공부하는 자바스크립트] Ch 2

String

ㅇ 이스케이프 문자
\n 줄 바꿈 \t Tab \\ 역슬래시(\) 그 자체

        console.log("".length)
		//0

//빈 문자열도 문자열이다~
//" "하면 공백 인식해서 1 나옴

 

Boolean

=== 같다 !== 다르다 ! 서로 true ↔ false 바꿈

연산자는 '피연산자'의 개수에 따라서 단항, 이항, 삼항 연산자로 구분한다.

자료형 검사

typeof(자료) 문자열과 비교해서 자료형 확인할 때 씀

        console.log(typeof 10 === 'number')
		//True

 

# 오답

        console.log(2+2-2*2/2*2) //0
        console.log(2-2+2/2*2+2) //4

나는 2*2 하고 2*2해서 4/4=1이라고 생각했는데, 2*2하고 4/2=2 그리고 2*2=4 이렇게 계산하는 것임!
나는 2*2하고 2/4 해서 1/2인 줄 알았는데, 2/2=1이고 1*2=2 이렇게 계산하는 것임!
Why? 왜 틀렸나?

수식에 우선순위가 같은 연산자가 여러 개 들어 있으면,
즉 곱하기 연산자와 나누기 연산자가 모두 들어 있으면
왼쪽에 있는 것이 오른쪽에 있는 것보다 먼저 계산됩니다.

이걸 몰랐음!

📌 후위 : 해당 문장을 실행한 후 값을 더하라!

alert(number++) 는 alert(number) 를 실행한 후 1 더함

        let number = 10

        console.log(number++) //10
        console.log(++number) //12
        console.log(number--) //12
        console.log(--number) //10

 

✔ 증가 ++ 증감 -- 연산자는 상수에 적용할 수 없다!!

Why? 내부적으로 할당하므로 by 교재
그러면, 내부적으로 할당한다는 게 무슨 말일까?

a = b++ 라는 식이 있다면 b 가 1 증가되기 전의 값을 a 에게 넘겨주죠!
(b 의 초기값이 2 였다면 a 는 2 가 되고 b 는 3 이 될 것입니다.)

b++ 같은 후위증감연산자가 동작되는 원리는
1️⃣시스템 내부적으로 "임시 객체"가 만들어지고 이 곳에 1 증가되기 전의 기존 값을 복사해 할당합니다.
즉 b와는 별개인, b 가 1 증가되기 전의 값을 가진 "사본"이 만들어지는 것이죠.
그리고 기존 값을 가지고 있는 이 사본을 반환합니다.
2️⃣ 그리고 나서 원본인 b 를 1 증가시킵니다.이와 같은 원리로 진행이 됩니다.
즉, b가 원래 가지고 있던 값인 2가 어떤 임시 객체에 복사되고 이 임시 객체를 반환하게 되므로
이 임시 객체가 a 에 할당되는 셈입니다. 그래서 a 가 b 의 증가되기 전의 값을 할당 받게 되는 것이에요.
원본 b 는 1 증가되구요!

이와 달리 ++b 전위증감 연산자는 기존값을 사본으로 만들어 이를 반환하고 뭐 이런 과정 없이 그냥 원본을 바로 1 증가시켜버리고 이 원본을 리턴하기 때문에 여전히 원본 b 그 자체입니다.

https://nibble1492.tistory.com/7

 

[C 언어] for문에서 증감 연산자

WHY? for문의 증감식에서 증감 연산자를 사용할 때 전위 증감 연산자를 사용하든 후위 증감 연산자를 사용하든 for문의 결과값에는 차이점이 없었다. 결과값에 차이가 없으면 for문의 증감식에 전

nibble1492.tistory.com


< 자료형 변환 문제 >
ㅇ 내가 푼 방법

        const dInput = prompt('달러 단위의 금액을 입력해주세요')

        const d = Number(dInput)
        const w = d*1207

        document.write(`원화: ${w} 입니다`)


ㅁ 책 해설: 비어있는 output을 변수로 선언하고 달러, 원화 값을 할당함

        let output = ' '
        output += `달러 : ${dollar}\n`
        output += `원화 : ${dollar*1207}`
        alret(output)

→ 이 해설처럼 쓰면 뭐가 더 좋을까?
(내 생각엔) const 상수와 달리 let 변수로 선언하면 output 하나에 여러가지 값들을 할당할 수 있다.
so 여러 키워드를 정의할 필요도 없고, 결과값을 도출할 때 키워드 output 하나만 쓰면 된다.(구구절절 안적어도 됨)


 

😲 오늘 느낀 점

학원에서는 냅다 코딩부터 했는데 지금은 차근차근 개념을 기초부터 쌓는 느낌이다. 그런데 책만 보니 지루했다. 사람들과 얘기하며 바로 뭔가를 만들고 싶었다. 그렇지만 나는 아직 레벨 0.000001 쪼렙이므로 열심히 하겠다^^ 최소한 1인분의 몫은 할 수 있도록 노력하자! 👊🏻

👍 칭찬해

책 chapter 1부터 2까지 다 풀었음. TIL/WIL 특강 내용도 적었음. 오늘 TIL썼음. 운동도 했음.

⛵ 오늘 아쉬운 점 - 내일 일어나서 30분만 시간 내자!

입력 - prompt( ), confirm( ) / 변환 - Number( ) , String( ), Boolean( ) 함수들 감 잡기