02. 자바스크립트 소개
자바스크립트 란
자바스크립트는 프로그래밍적 로직을 더해서 동작을 구현할 수 있는 프로그래밍 언어
HTML이 웹 콘텐츠를 정의하고 CSS가 웹 콘텐츠를 스타일링해서 웹 페이지가 어떻게 생겼는지를 나타내면 거기에 JS를 추가하여 웹 사이트의 동작이나 상호작용을 정의함
자바스크립트 사용법
- html 문서 내부에 작성: <script>라는 태그를 사용해서 작성하며 일반적으로 <body>태그 내부에 작성한다
- 새로운 JS 문서를 만들어서 html 문서에 연결하기: <body>태그 내부에 <script>를 넣고 src 속성을 이용해 문서를 연결해 준다
03. 동작원리 출력해보기
스크립트 동작 원리
명령을 내리고자 하는 대상인 '객체'에 자바스크립트 명령을 전달하면, 다음 절차대로 작업이 이루어진다
입력 -> 처리 -> 출력
객체 다루는 방법
자바스크립트가 제공하는 객체 이름 뒤에 점(.)을 붙인 다음 전달하고자 하는 명령을 적어줌
- 객체.데이터: 객체가 가지고 있는 숫자, 문자 등의 다양한 데이터(정보)을 다룸, 객체가 가지고 있는 데이터를 '속성'이라고 함
- 객체.기능(): 객체가 가지고 있는 다양한 기능을 수행할 수 있음, 객체가 가지고 있는 기능을 '메소드'라고 함
04. 콘솔출력과 자료형
웹 브라우저에 접근할 수 있게 해주는 객체 window는 console을 비롯한 다양한 하위 객체 및 데이터, 메소드 등을 포함,
사용자 편의를 위해 window.을 생략할 수 있음
window.console <=> console 같음
콘솔창 사용방법
console.log(x)는 디버깅 콘솔창에 x라고 출력해달라는 명령문
- 데이터의 자료형을 알고 싶을 때는 typeof를 쓰면 됨
console.log(typeof 3) --> number
05. 변수와 상수
변수의 선언 및 초기화
let 변수이름 = 데이터;
변수에 대입한 데이터는 바꿀 수 있음
선언과 초기화를 따로 할 수 있음
변수 이름 짓기 제약 사항
- 변수명에는 오직 문자와 숫자, 기호 $와 _만이 포함될 수 있음
- 변수명의 첫 번째 글자로 숫자가 올 수 없음
- 이미 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용할 수 없음
상수의 선언 및 초기화
const 상수이름 = 데이터;
상수는 '변하지 않는 값'으로 대입한 값을 변경할 수 없음
따라서 상수는 선언과 초기화를 동시에 해주어야 함
상수의 이름 짓기 규칙은 변수와 동일
06. 문자열 prompt
window.prompt(x)
prompt(x) 메소드는 사용자로부터 문자열을 입력받을 수 있는 다이얼로그 박스를 열어주는 메소드, x는 다이얼로그 박스에 띄울 메시지
07. 템플릿 리터럴
템플릿 리터럴은 문자열을 표현하는 또 다른 방법으로 백틱(`)을 이용해 표현
템플릿 리터럴은 반환값이 존재하는 자바스크립트 코드로 문자열 내부에 플레이스홀더(${})를 이용하여 데이터를 삽입할 수 있음
예시)
const data1 = "데이터"
const str1 = `문자열 중간에 ${data1} 삽입하기`
// --> "문자열 중간에 데이터 삽입하기"09. DOM 소개
DOM이란?
브라우저는 HTML 코드를 해석하여 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성, 이를 DOM이라 하며 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링
Document Object Model, DOM
DOM은 자바스크립트 코드가 적용이 되어 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다
DOM에 접근하기
window.document는 현재 브라우저에 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근하여 페이지의 정보를 얻거나 웹 요소를 생성 및 조작 할 수 있음
querySelector & textContent
querySelector
document의 querySelector 메소드는 CSS 선택자를 인자로 받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소를 반환한다
일치하는 요소가 없으면 null 반환
예시)
// 첫 번째 p 태그를 선택
document.querySelector("p")
// id가 text인 요소 선택
document.querySelector("#text")
// class가 text인 첫 번째 요소 선택
document.querySelector(".text")textContent
textContent는 해당 객체가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성, 요소가 포함하고 있는 텍스트를 읽거나 변경할 수 있음
예시)
// p 태그 요소를 반환받아 상수에 대입
const p = document.querySelector("p")
// p 요소의 textContent 속성을 콘솔에 출력
console.log(p.textContent)
// p 요소의 textContent 값을 변경
p.textContent = "텍스트를 이걸로 바꿔!"