[2주차] 20220411 엘리스 TIL (JavaScript)

* 자바스크립트 = 프로그래밍 언어

• 어떤 순서대로 진행되는 과정을 정의하는 것 = program
• 이걸 만드는 것 = programming
• 만드는 사람 = programmer

** 프로그래밍 처음 배울 때 먼저 익히면 좋은 것

• 이 언어는 어떤 데이터 타입을 가지고 있는가(데이터 타입별로 연산 방법이 달라짐)
• 리터럴 표기법

** console 창

• JavaScript를 실행하는 창

* console.log로 JS 간단한 실습 해봤던 것

• alert('안녕!')
• prompt('아이디?')
• confirm('진짜?')
• document.querySelector('body')
• speechSynthrsis.speak(newSpeechSynthrsisUtterance('꼭이요'))

*** 자바스크립트 실행방법 3가지

1. console 창에서 실행
2. script 태그 안에 JS 코드 넣는 것
3. onclick(onclick = 약속된 값)이라는 속성의 값으로 JS 코드를 넣는 것 => 이벤트 프로그래밍 = 사용자와 상호작용하는것의 핵심적인 매커니즘

🥞 반찬1 🥞 vscode SOURCE CONTROL

• 메시지 입력하고 메시지 칸 위의 ✅ 누르면 커밋됨

** document.write(Math.random());

• document = 객체
• Math = 객체
• random() = 함수의 개념

** 문제가 생겼을 땐 console 창을 열어서 확인할 수 있다.

** 문자열 작성 방법

1. 따옴표 안에 작성
2. 작은 따옴표는 작은 따옴표, 큰 따옴표는 큰 따옴표 끼리 작성
3. 백틱(템플릿 리터럴)으로 작성 가능

** 좌항, 우항을 더해서 새로운 값이 도출되는 것? = 이항 연산자

** 팁 : 에디터 공간이 안돼서 중간에 엔터 한 다음 JS 코드를 치고 싶을 때 에러가 안나도록 하는 법

1. 역슬래시를 줄바꿈 전에 넣어주기
2. 백틱으로 감싸서 작성해주기

🥞 반찬2 🥞 에디터 화면에 맞게 자동 줄바꿈 해주는 단축키 = " alt + z "

 

** 변수

• 변수를 작성할 땐 var 보단 let 으로
• let a 를 한번 선언하고 또 let a 를 선언 = 에러 => a라는 변수가 이미 존재함. 사람의 실수로 이미 존재하는 변수를 또 생성할 수 있기 때문에 JS에서 let 으로 선언은 한번만 가능하게 함
• 재할당 할 땐 앞에 let 빼고 a=3 하기
• 변수를 선언하는 이유 = 코드 가독성을 위하여(이 코드는 뭘하는 코드인지... 주석으로 표시하기보단 변수에 이름을 붙여 표시하는 것이 낫다)
• 변수는 데이터에 이름을 붙인 것

🥞 반찬3 🥞 git extension - " git graph " 시간여행

• git graph 창 열어서 branch 가지들중에 하나 우클릭 - checkout
• 원상복구 = master로 다시 checkout (master 더블클릭해도 됨)

** 이벤트(사건) 프로그래밍

** 개발자도구 network 탭 = 브라우저와 서버가 통신하는 걸 감청할 수 있음

** 웹 브라우저를 JS로 컨트롤 할 때 가장 중요한 것

• " CSS 선택자 " 와 비슷한 개념 - document.querySelector = 대상을 지칭하는 주어같은 역할을 해줌

** JS에서 코드를 작성할 땐 슬래시를 쓰지 않는다

• ex> background-color ❌
• backgroundColor ⭕
• 거진 이런식으로 표기되어있다고 보는게 편함

** flow-control

• 조건문
• 반복문

=> 이 둘을 알기 전에 먼저 알아야 할 것 - boolean(true, false)

=> boolean을 알았을 때 알아야 할 것 - 비교연산자

• prompt = 사용자로부터 정보를 입력받는 창. 확인을 누르면 입력한 값이 함수의 결과값이 된다

** this

• 스크립트 태그 내에서 this = 문서 전체를 가리킴
• (예시)버튼 태그 내에서의 this = 그 버튼 전체를 가리킴

=> this의 값은 맥락적으로 달라지는 약속된, 내장된 변수다. 그래서 this가 어디에 있느냐에 따라 값이 달라진다.

 

---

 

실습강의

 

** undefined =/= is not defined

• undefined = 변수가 없음
• is not defined = 변수가 애초에 선언되지 않았음

** ES6 화살표 함수는 IE와 호환되지 않는다!! => babel로 교체해줘야 함