자바 스크립트 이론 (기초)

---

1장 (변수와 연산자)

기초 이론 부분

var test = prompt('message','placeholder')
document.querySelector("#result").innerHTML

prompt() = 입력값을 받기 위해 사용합니다.
message = 입력값 설명 하기 위한 메세지입니다.
placeholder = 입력값 창 안에 예시로 활용하는 문자입니다.
document = 현재 웹브라우저의 페이지를 나타냅니다.
querySelector("#result") = id가 result인 요소를 선택하겠다는 의미입니다.
innerHTML = 이후 나오는 값을 모두 html문서에 대체하겠다는 의미입니다.

window

1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역 객체'라고도 부릅니다.

2. 일반적으로 우리가 열고 있는 브라우저의 창(browser window)을 의미하고, 이 창을 제어하는 다양한 메서드를 제공합니다.

그래서 나는 window 관련해서 다양하게 테스트를 해봤다.

var name = "LEE"
alert(window.name)

이렇게 작성할 경우

정상적으로 변수 name의 값을 가져왔다. 하지만

let name = "Lee"
const friend = "Kim"
alert(window.name, window.friend)

이렇게 코드를 작성하면

아무것도 받아오지 못한다. 왜냐면 let과 const는 블록 스코프이기 때문에 window 객체로 받아오지 못하는 특징이 있다.
-> 단, 전역 객체로써의 window는 생략 가능한 특징이 있음.

그리고 2번인 '메서드'로서의 window는 window.open(), window.close()와 같이 활용 가능하다.

---

생략

---

코딩 진행중 발생 오류

 <script>
 //heading이라는 변수안에 heading id값을 선언
var heading = document.querySelector("#heading");
//헤딩 변수를 클릭하면 빨간색으로 변하게 수정
    heading.onclick = function () {
      heading.style.color = "red";
    };
</script>

위의 코드를

<script src="./js/text-color.js"></script>

이렇게 요약하고 실행했더니

> Uncaught TypeError: Cannot set properties of null (setting 'onclick')

이런 오류가 발생했음. 해당 오류는 결국 script의 위치로 인해 나오는 오류

script는 위에서부터 아래로 실행되기 때문에, 태그가 생성되기 전에 변수를 선언해버려서 생긴 문제.

script를 바디태그 아래로 내려서 문제 해결

---

2장 (조건문, 반복문)

기초 이론 부분

var value = window.prompt("숫자를 입력해주세요.");
if (value % 2 === 0) {
        alert(value + "는 짝수가 맞습니다.");
      } else {
        alert(value + "는 홀수 입니다.");
      }

이런식으로 코드를 작성했을 때 'value'는 number가 아니라 string임 typeof 연산자로 value를 체크하면 string으로 나옵니다.

크롬은 다행히 알아서 number로 판단하여 해당 수식을 계산해주지만 확실히 코딩하기 위해서는

value = parseInt(value)

로 string형 이었던 value를 parseInt를 통해 number로 변환해주는게 좋습니다.