자바스크립트
HTML - 마크업 언어, CSS - 스타일시트 언어
자바스크립트 - 프로그래밍 언어
자바스크립트는 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있는 언어지만, 주된 활동 분야는 '웹 개발'
웹 개발 - 인터넷을 통해 서비스되는 웹사이트를 개발 하는 일
자바스크립트의 역할
- 웹브라우저 및 하위 객체가 가진 기능을 구동
- HTML/CSS를 통해 렌더링된 화면을 조작할 수 있음
역할을 정상적으로 수행하기 위해서는, 자바스크립트 코드를 올바른 위치에 작성하는 것이 중요
자바스크립트 작성 위치
- HTML문서 내부에 작성, < script > 태그사용
- 자바스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML 문서에 연결
스크립트 동작 원리
자바스크립트는 프로그래밍 언어로써, 소프트웨어적 대상에게 명령을 내리는 역할을 수행
소프트웨어적 대상이란, 웹브라우저, 웹 요소, 웹 스타일 등을 의미
명령을 내리고싶은 대상에 자바스크립트 명령을 전달하면, 다음 절차대로 작업이 이루어짐
- 입력 -> 처리 -> 출력
자바스크립트 명령문으로 어떤 처리를 지시하고자 하는 대상을 가리켜 '객체'라 함
입력, 처리, 출력
- 입력 - 객체에게 어떤 작업을 수행하라는 명령 전달
- 처리 - 객체가 주어진 작업을 수행
- 출력 - 객체가 작업을 수행한 결과를 사용자에게 반환
객체 다루는 방법
자바스크립트가 제공하는 객체 이름을 선택하고, 뒤에 점(.)을 붙인 다음 전달하고자 하는 명력을 적어줌
그러면 입력, 처리, 출력의 절차 시작
객체 명령의 두가지 유형
객체.데이터
- 객체가 가지고 있는 숫자, 문자 등의 다양한 데이터 사용 가능
- 객체가 가지고 있는 데이터(정보)를 가리켜 일반적으로 '속성'이라 함
객체.기능()- 객체가 가지고 있는 다양한 기능을 수행할 수 있음(괄호 필수)
- 객체가 가지고 있는 기능을 가리켜 일반적으로 '메소드'라 함
예시
window.alert('warn')
웹브라우저에게 '경고창에 'warn'이라고 쓴 다음 화면에 띄워줘'라는 명령 전달
콘솔 (console)
브라우저의 디버깅 콘솔
콘솔은 브라우저 안에 내장된 브라우저의 하위 객체이므로 브라우저 객체를 통해 접근할 수 있음
window.console과console같음
-> window 생략가능
변수
'데이터에 붙이는 이름표'
변수를 이용하면 이름표를 붙여 둔 데이터를 기억해뒀다 필요할 때마다 재사용할 수 있게 됨
let 변수이름 = 데이터;// 변수 선언
변수이름 = 데이터// 변수 초기화
데이터를 기억하기 위해 변수 사용
변수는 한 번에 하나의 데이터만 기억할 수 있으며, 기억하고 있는 값을 바꿔가며 사용가능
변수 제약사항
- 오직 문자와 숫자, 그리고 기호$과 _만 포함될 수 있음
- 첫 번째 글자로 숫가 올 수 없음
- 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용할 수 없음
상수
수식에서 '변하지 않는 값'을 뜻함
변수와 반대되는 것, 상수는 '단 하나의 데이터만을 위해 사용하는 이름표'로써, 값의 변경이 불가능
const 상수이름 =데이터;
상수도 변수처럼 지정된 데이터 대신 사용 가능
상수 이름 짓기 규칙은 변수 이름 짓기와 동일
선언과 동시에 초기화 해줘야함
const 상수이름;
상수이름 = 데이터;// 에러!!!
상수는 자신이 선언될 때 지정된 데이터로 고정
선언 이후 데이터를 대입하려고 하면 에러 발생
템플릿 리터럴
문자열을 표현하는 또 다른 방법, 따옴표를 이용해 표현하는 방법에 비해 조금 늦게 추가된 문법
백틱을 이용해 표현 ``
const str1 = '작은 따옴표'
const str2 = "큰 따옴표"
const str3 = ``
표현식 삽입 방법
템플릿 리터럴은 반환값이 존재하는 자바스크립트 코드,
표현식을 내장할 수 있는 문자열 표현법
문자열 내용에 데이터를 삽입한다는 것을 의미
템플릿 리터럴로 표현한 문자열 내부에 플레이스 홀더${}를 기입하고, 그 안에 데이터를 기입하면 데이터는 문자열의 멤버가 됨
입력문
const data = "데이터"
const str = `문자열 중간에 ${data} 삽입하기`
console.log(str)출력문 - 문자열 중간에 데이터 삽입하기
undefined & null
- undefined - 아직 데이터가 정의되지 않음
- null - 의도적으로 데이터가 없음
기본 자료형 boolean
true 와 false 두가지 값만 존재
참과 거짓 여부를 나타내기 위해 사용하는 데이터
소문자로 작성해야함
DOM 관련 메소드
DOM을 다루는 명령문도 입력-처리-출력 절차 수행
| 메소드 이름 | 역할 |
|---|---|
| document.querySelector() | CSS선택자 ()를 기반으로 첫 번째 요소 선택 |
| document.querySelectorAll() | CSS선택자 ()를 기반으로 여러 요소 선택 |
| document.getElementById() | id속성 값을 기반으로 요소 선택 |
| document.getElementClassName() | class속성의 값을 기반으로 여러 요소 선택 |
| document.write() | 문서에 콘텐츠 ()를 추가 입력 |
| 메소드 이름 | 역할 |
|---|---|
| Element.textContent | 요소가 가진 텍스트 콘텐츠 반환 |
| Element.innerHTML | 요소 내에 쓰여진 HTML 코드를 텍스트 형태로 반환 |
| Element.className | 요소의 class 속성값 반환 |
| Element.style | 요소의 style 관련 속성값들을 반환 |
| Element.title | 요소의 title 속성값 반환 |
createElement & appendChild
document.createElement
지정된 이름의 HTML 요소를 만들어 반환
document.creatElement('div')
document.creatElement('p')
document.creatElement('a')
HTML 요소가 만들어지고 반환 되었다고 해서 해당 요소가 바로 웹 브라우저 화면에 추가되는 것은 아님
자바스크립트 단계에서 만들어져 있는 요소를 화면에 표시하는 작업을 추가로 해야함
요소를 추가할 때 append() / appendChild()
appendChild()
appendChild메소드 - DOM 내 개별요소 ('노드')에 자식 요소를 추가할 때 사용하는 메소드
기본 사용 법
target.appendChild(자식으로 추가할 요소)
예시const p = document.createElement('p') document.body.appendChild(p)
append()
타켓 요소에 자식 요소를 추가한다는 점에서 appendChild()와 같으나 차이점 존재
차이점
- append를 이용하면 요소에 노드 객체 또는 문자열을 자식 요소로 추가할 수 있지만, appendChild는 노드 객체만 추가 가능
- appendChild의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없음
