Javascript
- 웹의 프로그래밍 언어
- 세계에서 가장 인기 있는 프로그래밍 언어이며 배우기 쉬움
- 모든 웹 개발자가 배워야 되는 3가지 언어
- HTML - 웹 페이지의 내용 정의
- CSS - 웹 페이지의 레이아웃 지정
- JS - 웹 페이지의 동작 프로그래밍
JS의 특징
- 구하거나 다운로드 받을 필요가 없음 (이미 브라우저, 태블릿, 스마트폰에 실행중)
- 누구나 무료로 사용할 수 있음
- HTML의 내용을 바꿀 수 있음 (e.g. getElementById)
- HTML의 특성 값 수정 가능
- HTML 스타일(CSS) 변경 가능
- HTML 요소를 숨기거나 표시할 수 있음
선언 방법
- 코드 삽입: HTML에서는 <script> 태그 사이에 자바스크립트 코드 삽입
- 함수 호출: JS 함수는 호출 시 실행할 수 있는 JS 코드의 블록
- 스크립트 삽입: HTML 문서에는 스크립트를 여러 개 넣을 수 있음, <head>와 <body>에 각각 혹은 둘 다 포함될 수 있음
- 외부 파일: 스크립트는 외부 파일에도 포함될 수 있음
- HTML과 코드를 분리
- HTML과 JS를 유지 보수하고 읽는 것을 쉽게 함
- 캐시된 JS 파일이 페이지의 로딩 속도를 높일 수 있음
JS의 결과
- 데이터 표시 방법
- innerHTML을 활용하여 HTML 요소에 직접 쓰임
- document.write()를 활용하여 HTML 출력에 쓰임
- window.alert()를 활용하여 경고 박스에 쓰임
- console.log()를 활용하여 브라우저 콘솔에 쓰임
JS 구성 요소
- Statements
- Comments
- Variables
- Data Types
Statements
- HTML 요소의 내부에 id="demo"를 활용하여 "Hello Dolly"라고 출력하는 문장
document.getElementById("demo").innerHTML = "Hello Dolly";- 문장의 구성
- JS 문장은 세미콜론으로 나뉨
- JS는 공백 무시
- JS 문장은 중괄호 안에 코드 블록으로 묶을 수 있음
- JS 예약어 (keywords)
- var: 변수 선언
- let: 블록 변수 선언
- const: 블록 상수 선언
- if: 조건문
- switch: 각각 다른 조건에 의해 실행
- for: 반복문
- function: 함수 선언
- return: 함수 종료
- try: 블록의 오류 처리
Comments
- 주석은 코드를 설명하고 읽기 쉽게 하거나, 대체 코드를 테스트할 때 실행을 방지하기 위해 사용
- 한 줄 주석은 //로 시작, //와 줄 끝 사이의 텍스트는 무시
- 여러 줄 주석은 /* 로 시작해 */로 끝, 그 사이의 텍스트는 무시
Variables
- 변수는 데이터(값)를 저장하기 위한 용기
- 변수 이름을 구성하기 위한 일반적인 규칙
- 이름에는 문자, 숫자, 밑줄 및 달러 기호가 포함될 수 있음
- 이름은 문자로 시작해야 함
- $와 _로도 시작할 수 있지만 추천하지 않음
- 이름은 대소문자를 구분
- JS 키워드와 같은 예약된 단어는 변수의 이름으로 사용할 수 없음
- 문자값: JS 변수들은 숫자 외에 문자도 값으로 가질 수 있음
- 프로그래밍에서 문자 값은 문자열이라고 불림
- JS는 많은 종류의 데이터를 처리할 수 있지만 숫자와 문자열을 추천
- 문자열은 큰따옴표나 작은따옴표 안에 씀
- 숫자는 따옴표 없이 사용
- 만약 숫자를 따옴표 안에 넣으면 문자열로 처리
Data Types
- 숫자, 문자열, 객체 등 다양한 데이터 유형이 포함될 수 있음
- 숫자와 문자열을 추가할 때 JS는 숫자를 문자열로 간주
- JS는 식을 왼쪽에서 오른쪽으로 평가
- 서로 다른 시퀀스는 다른 결과를 생성
- JS에는 동적 유형이 있음 (동일한 변수를 사용하여 서로 다른 데이터 유형을 보유 가능)
let x;
x = 5;
x = "John";- 값이 없는 변수는 정의되지 않은 값을 가지고 형식도 정의되지 않음
Function
- 특정 작업을 수행하도록 설계된 코드 블록
- 무언가가 호출할 때 실행
- 함수의 정의
- 함수 키워드
- 이름: 문자, 숫자, 밑줄 및 달러 기호(변수와 동일한 규칙)이 포함될 수 있음
- 소괄호: 쉼표로 구분된 매개 변수 이름이 포함될 수 있음
- 중괄호: 함수에서 실행할 코드
Objects
더보기
- 자동차(object)
- 자동차의 특성(properties)
- car.name = Fiat
- car.model = 500
- car.weight = 850kg
- 자동차의 방법(methods)
- car.start()
- car.drive()
- car.brake()
- car.stop()
- 모든 차의 특성은 동일하지만, 객체마다 값이 다름
- 모든 차의 방법은 동일하지만, 객체마다 수행되는 시간이 다름
- JS의 변수는 값을 저장하는 용기
- 객체도 변수에 포함
- 객체는 많은 값을 가질 수 있음
- const car = {type:"Fiat", model:"500", color:"white"};
- this 키워드: 함수 정의에서 this는 함수의 소유자를 가리킴
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
}