- 목차
01 자바스크립트 기본 용어와 출력 방법
02 자료형과 변수
03 조건문과 반복문
04 함수
05 객체
01. 자바스크립트 기본 용어와 출력 방법
자바스크립트는 기능과 실제 사용되는 가능 사이에의 괴리가 매우 크다.
1. 자바스크립트 기본 용어
1) 표편식과 문장
- 표현식: 값을 만들어 내는 간단한 코드
- 문장: 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위
문장 마지막에 세미콜론(;) 또는 줄 바꿈을 넣어 종결을 나타낸다.
= 표현식에 세미콜론을 찍어 문장을 만들고, 문장이 모이면 프로그램이 된다.
2) 키워드
- 키워드: 자바스크립트를 처음 만들 떄 정해진, 특별한 의미가 부여된 단어
3) 식별자
- 식별자: 자바스크립트에서 변수, 함수 등에 이름을 붙일 때 사용하는 단어
다음의 규칙에 맞게 생성한다.
(1) 키워드를 사용하면 안 된다.
(2) 특수 문자는 _와 $만 허용된다.
(3) 숫자로 시작하면 안 된다.
(4) 공백은 입력하면 안 된다.
+ 식별자 생성시 알파벳을 사용하는 것이 개발자의 관례이다.
의미를 알 수 있는 단어를 사용하면 좋다.
- 식별자의 의미를 더 명확하게 표시하기 위한 관례
(1) 클래스 외 생성자 함수 이름은 항상 대문자로 시작한다.
(2) 변수, 인스턴스, 함수, 매서드의 이름은 항상 소문자로 시작한다.
(3) 여러 단어로 된 식별자는 각 단어의 첫 글자를 대문자로 한다. (식별자 의미를 쉽게 파악하기 위해 만들어진 규칙. 공백을 넣으면 안 되기 때문에 대문자로 구별한다.)
4) 주석
- 주석: 프로그램 진행에 전혀 영향을 주지 않는 코드, 프로그램을 설명하는 데 사용
- 방법
(1) //: 한 행만 주석으로 처리
(2) /* */: 여러행을 주석으로 처리
2. 자바스크립트 출력
- 자바스크립트의 가장 기본적인 출력 방법: alert() 함수를 사용해 웹 브라우저에 경고창을 띄우는 것.
<!DOCTYPE html>
<html>
<head>
<title>Javascript Basic</title>
<script>
alert('Hello Javascript..!');
</script>
</head>
<body>
</body>
</html>
02. 자료형과 변수
1. 자료형
프로그래밍 언어는 자료를 손쉽게 다루려고 만들었다.
어떤 프로그래밍 언어를 배우든, 해당 프로그래밍 언어의 자료형(자료 형식)을 먼저 알아야 한다.
자바 스크립트는 자료형으로 숫자, 문자열, 불, 함수, 객체, 정의되지 않은 자료형(undefined)등을 제공한다.
1) 숫자
: 가장 기본적인 자료형.
- 자바스크립트는 정수와 실수를 구분하지 않는다.
- 사칙 연산자를 사용해 연산을 수행할 수 있다.
- 연산할 때는 연산자 우선순위를 고려한다.
2) 문자열
: 문자 집합.
- 두가지 방법으로 문자열을 생성: 큰따옴표, 작은따옴표 안에 문자를 넣는다.
자바스크립트에서는 문자열 내부에 큰 따옴표를 자주 넣으므로, 작은따옴표를 사용해 문자열을 생성하는 방법을 권장.
- 문자열 안에 따옴표를 넣고 싶으면: 서로 다른 따옴표로 문자열을 감싼다.
'"문자열"입니다'
"'문자열'입니다"
- 문자열 안에, 문자열을 감싼 따옴표와 동일한 따옴표를 사용하고 싶을 때는 이스케이프 문자를 사용한다.
| 이스케이프 문자 | 설명 |
| /t | 수평 탭 |
| /n | 행 바꿈 |
| // | 역 슬래시 |
| /' | 작은따옴표 |
| /" | 큰따옴표 |
- 문자열은 문자열 연결 연산자(+)를 사용해 합칠 수 있다.
'가나다' + '라마'
3) 불
: 참과 거짓을 표현할 때 사용하는 자료
(1) 비교 연산자: 두 대상을 비교할 수 있는 연산자
| 연산자 | 설명 |
| >= | 좌변이 우변보다 크거나 같음 |
| <= | 우변이 좌변보다 크거나 같음 |
| > | 좌변이 우변보다 큼 |
| < | 우변이 좌변보다 큼 |
| == | 좌변과 우변이 같음 |
| != | 좌변과 우변이 다름 |
- 비교 연산자를 사용해 숫자는 물론 문자열도 비교할 수 있다.
- 유니코드 문자를 사용해 전 세계 모든 언어를 비교할 수 있고, 비교 연산자를 사용해 불을 만들 수 있다.
(2) 논리 연산자
| 연산자 | 설명 |
| ! | 논리 부정 (참이면 거짓, 거짓이면 참) |
| && | 논리곱 (둘 다 참이면 참) |
| || | 논리합 (둘 중 하나만 참이어도 참) |
- 자바 스크립트는 세가지 논리 연산자를 제공한다.
- 불끼리는 논리 연산자를 사용해 연산한다.
4) 변수
: 값을 저장할 때 사용하는 식별자
- 숫자뿐만 아니라 모든 자료형을 저장할 수 있다.
- 두 단계를 거쳐 사용
(1) 변수 선언
= 변수를 만드는 것.
let 키워드 뒤에 식별자를 입력하는 방법으로 선언한다.
let pi;
(2) 변수 초기화
= 변수에 값을 할당하는 것
let pi = 3.14159265
- 일반적으로 변수의 선언과 초기화를 한 번에 처리한다.
let pi = 3.14159265
- 변수에 값이 저장되면 변수를 사용해 저장된 값을 활용할 수 있다.
숫자가 저장된 변수는 숫자 연산자를, 문자열이 저장된 변수는 문자열 연산자를 사용할 수 있다.
- 예제: 변수의 선언과 초기화
<!DOCTYPE html>
<html>
<head>
<title>Javascript Basic</title>
<script>
let radius = 10;
const pi = 3.14159265;
alert(2 * radius * pi);
</script>
</head>
<body>
</body>
</html>
+ const 키워드: 상수.
변수는 계속해서 값을 변경할 수 있고, 상수는 한 번 설정한 값을 변경할 수 없다.
확장성이 좋다는 것은 성능 면에서 오히려 위험할 수 있기 때문에, 상수를 적극적으로 활용하는 것이 좋다.
03. 조건문과 반복문
프로그램은 기본적으로 위에서 아래로 진행되는데, 제어문을 사용해 이 흐름을 변화할 수 있다.
대표적인 제어문이 조건문, 반복문이다.
1. 조건문
(1) if 조건문
: 가장 기본적인 조건문.
- 조건이 true라면 문장을 실행, false라면 문장을 무시.
- 조건문을 만족해 실행되는 문장이 한 행이라면 중괄호 생략 가능, 문장이 여러 행이라면 중괄호로 감싼다.
if (조건) {
문장
}
- 예제: if 조건문으로 오전과 오후 판별
<script>
let data = new Date();
let hours = data.getHours();
if (hours < 12) {
alert('오전입니다.')
}
if (hours >= 12) {
alert('오후입니다.')
}
</script>
(2) if else 조건문
: 두 가지로 분명하게 나뉘는 상황에서 편리하게 사용
if (조건) {
문장 1
} else {
문장 2
}
- 예제: if else 조건문으로 오전과 오후 판별
<script>
let data = new Date();
let hours = data.getHours();
if (hours < 12) {
alert('오전입니다.')
}
else {
alert('오후입니다.')
}
</script>
(3) 중첩 조건문과 if else if 조건문
- 조건문은 중첩해서 사용할 수 있다. 여러번 중첩해도 상관없다.
if (조건) {
if (조건) {
문장
} else {
문장
}
else {
if (조건) {
문장
} else {
문장
}
}
- if else if 조건문: 중복되지 않는 조건 세 가지 이상을 구분할 때 사용한다.
if (조건) {
문장
} else if (조건) {
문장
} else if (조건) {
문장
} else {
문장
}
- if else if 조건문으로 하루 일정 표현
<!DOCTYPE html>
<html>
<head>
<title>Javascript Basic</title>
<script>
let data = new Date();
let hours = data.getHours();
if (hours < 5) {
alert('수면')
} else if (hours < 7) {
alert('준비')
} else if (hours < 9) {
alert('출근');
} else if (hours < 12) {
alert('빈둥빈둥');
} else if (hours < 14) {
alert('식사');
} else {
alert('업무 수행');
}
</script>
</head>
<body>
</body>
</html>
2. 반복문
여러번 반복하는 일을 간편하게 처리할 수 있다.
배열과 함께 사용하면 효과적이다.
(1) 배열
: 변수 여러 개를 한꺼번에 다룰 수 있는 자료형
- 배열은 객체의 일종.
- 대괄호[ ] 를 사용해 생성.
- 대괄호 내부의 각 자료는 쉼표로 구분.
let array = [1, 2, 3, 4, 5];
- 배열 내부에 입력된 자료 하나하나를 요소라고 한다.
- 배열 내부에는 다양한 자료형을 입력할 수 있다.
<script>
let array = [273, '문자열', ture, function() {}, {}, [32, 103]];
</script>
- 배열의 각 요소에 접근하려면 배열 이름 뒤에 대괄호[ ]를 사용해 순번을 입력한다.
- 배열 요소에 접근하는 데 사용하는 대괄호 안 숫자를 인덱스라고 하며, 0부터 시작한다.
<script>
let array = [1, 2, 3, 4];
array[0] = 9;
alert(array[0]);
</script>
+ 배열 변수의 length 속성을 사용하면: 배열 요소의 개수를 간단하게 알 수 있다.
<script>
let array = [10, 20, 30, 40, 50];
alert(array.length);
</script>
(2) while 반복문
: 가장 기본적인 반복문. if 조건문과 달리, 불 표현식이 참이면 중괄호 안 문장을 계속해서 실행한다.
while (조건) {
문장
}
- 조건이 변하지 않으면 무한 반복하기 때문에, 반드시 조건을 거짓으로 만들 수 있는 문장을 포함해야 한다.
- 무한반복문
<script>
while (true) {
alert('무한 반복');
}
</script>
- while 반복문
<script>
let i = 0;
let array = [1, 2, 3];
while (i < array.length) {
alert(i + '번째 출력: ' + array[i]);
i++;
}
</srcipt>
(3) for 반복문
: 원하는 횟수만큼 반복하고 싶을 때 사용
for (초기식; 조건식; 종결식) {
문장
}
- 각 단계별
1) 초기식을 확인
2) 조건식을 비교. 조건이 거짓이면 반복문 종료
3) 문장 실행
4) 종결식 실행
5) 2단계로 이동
for (let i = 0; i < 반복횟수; i++) {
}
- while 반복문 -> for 반복문
<script>
let array = [1, 2, 3];
for (let i = 0; i < array.length; i++) {
alert(i + '번째 출력: ' + array[i]);
}
</srcipt>
+ 반복문 조건: 외부 요인으로 변경.
- for 반복문: 정해진 횟수만큼 반복해야 할 때 주로 사용.
- while 반복문: 이외의 상황에서 많이 사용. 예를 들어, 외부 조건으로 인한 조건 변경 시.
<script>
let start = new Date.getTime();
let count = 0;
while (start + 1000 > new Date.getTime()) {
count++;
}
alert(count + '만큼 반복했다.');
</script>
다음은 시간이 지나면서 외부 요인으로 조건이 변경되어 반복문을 빠져나간다.
04. 함수
1. 선언과 호출, 실행 우선순위
1) 선언과 호출
- 함수: 코드의 집합을 나타내는 자료형.
- 함수 생성
(1) 익명 함수 생성: 함수의 이름을 입력하지 않고 만든다.
function () { }
(2) 선언적 함수 생성: 함수의 이름을 입력해서 만든다.
function 함수() {
}
2) 함수 선언
(1) 익명 함수 선언
<script>
let 함수 = function () {
alert('함수_01');
alert('함수_02');
}
alert(typeof(함수) + ' : ' + 함수);
</script>
(2) 선언적 함수 선언
<script>
function 함수() {
alert('함수_01');
alert('함수_02');
}
alert(typeof(함수) + ' : ' + 함수);
</script>
(3) 함수 실행
= 함수를 호출한다.
: 함수 이름 뒤에 괄호를 사용해 실행할 수 있다.
함수();
3) 실행 우선순위
함수도 변수이므로, 가장 마지막에 입력된 값이 저장된다.
따라서 다음의 코드를 실행하면 문자열 '함수_B'가 출력된다.
<script>
함수 = function () { alert('함수_A') };
함수 = function () { alert('함수_B') };
함수();
</script>
- 하지만, 선언적 함수와 익명 함수를 함께 사용할때는 실행 순서가 다르다.
자바스크립트는 모든 코드를 읽기 전에 선언적 함수를 먼저 읽는다.
따라서 코드 순서와 관계없이 나중에 읽은 익명 함수가 실행된다 -> '함수_A' 출력
<script>
함수 = function () { alert('함수_A') };
function 함수 () { alert('함수_B') };
함수();
</script>
+ 함수를 같은 이름으로 덮어쓰는 것은 아주 위험한 일이다.
+ 또한 각각 다른 블록에 동일한 이름의 선언적 함수가 사용된 경우, 무엇이 선언될지 모른다.
=> JS의 경우 안전한 익명 함수가 더 선호된다.
2. 매개변수와 반환 값
- 매개변수: 함수의 괄호 안에 집어넣어, 함수 쪽에 추가적인 정보를 전달하는 것
alert('매개변수');
- 반환 값(리턴 값): 함수를 실행한 결과
let minutes = data.getMinutes();
단, 모든 함수가 매개변수와 반환 값을 사용해야 하는 것은 아니다. 필요할 때만 선택적으로 사용한다.
function 함수 이름 (매개변수) {
return 반환 값;
}
- 예제: 매개변수와 반환 값이 있는 함수
<script>
function f(x) {
return x * x;
}
alert(f(3));
</script>
3. 콜백 함수
: 매개변수로 전달되는 함수
- 예제: 콜백 함수
<script>
function callTenTimes(callback) {
for (let i = 0; i < 10; i++) {
callback(); //매개변수로 전달된 함수를 호출한다.
}
}
let fun = function() {
alert('함수 호출');
};
callTenTimes(fun); //매개변수로 fun 함수를 전달한다.
</script>
콜백 함수는 익명 함수로 사용할때가 더 많다.
-> 앞서 활용한 코드 변경.
<script>
function callTenTimes(callback) {
for (let i = 0; i < 10; i++) {
callback(); //매개변수로 전달된 함수를 호출한다.
}
}
callTenTimes(function() { //익명함수를 매개변수로 넣는다.
alert('함수 호출');
});
</script>
매개변수에 익명 함수를 곧바로 입력하는 경우를 기억해야 한다.
05. 객체
- 객체는 자료형 여러 개를 한 번에 저장한다.
- 배열은 인덱스를 기반으로 키를 저장하고, 객체는 키를 기반으로 자료를 저장한다.
1. 객체 개요
- 배열은 객체를 기반으로 만들어졌기 때문에, 배열과 객체는 상당히 유사하다.
- 다른 점이 있다면: 배열은 요소에 접근할 때 인덱스를 사용 <-> 객체는 키를 사용
1) 객체 생성 예
<script>
let product = {
제품명: '7D 건조 망고',
유형: '당절임',
성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소'
원산지: '필리핀'
};
</script>
2) 객체 속성 접근
(1) 객체 뒤에 대괄호를 사용해 키를 입력하는 방법
product['제품명']
(2) 객체 뒤에 '.'을 사용해 키를 입력하는 방법
product.제품명
! 식별자로 사용할 수 없는 키
식별자 생성 규칙에 어긋나는 문자를 키로 사용하는 경우, 반드시 대괄호로 감싸야만 객체 요소에 접근할 수 있다.
점을 찍을 경우, 자바스크립트 문법 오류가 발생한다.
3) for in 반복문 / for of 반복문을 사용해 객체 요소에 하나씩 접근할 수 있다.
for (let 키 in 객체) {
문장
}
- 예제: 객체 요소 출력
<script>
let product = {
제품명: '7D 건조 망고',
유형: '당절임',
성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
원산지: '필리핀'
};
for (let i in product) {
alert(i + ' : ' + product[i]);
}
</script>
2. 속성과 메서드
- 요소: 배열에 있는 값 하나하나
- 속성: 객체에 있는 값 하나하나
- 다른 프로그래밍 언어는 요소와 속성이 다르지만, 자바스크립트는 요소와 속성이 같아 구분하는 의미는 없다. 다만 관례적으로 용어를 구분해 사용한다.
1) 객체 속성에도 배열 요소처럼 다양한 자료형을 입력할 수 있다.
let object = {
number: 273,
string: 'rintianta',
boolean: true,
array: [52, 273, 103, 32],
method: function() {
}
}
2) 메서드 = 객체 속성 중, 자료형이 함수인 속성.
다음 코드에서는 person 객체의 eat 속성의 자료형이 함수이기 때문에, eat() 메서드이다.
let person = {
name : '윤인성',
eat : function (food) {
alert(food + '을/를 먹습니다.');
}
};
person.eat('밥');
3) 객체에 있는 속성을 메서드에서 사용하고 싶을 때, 자신이 가진 속성임을 분명히 표시해야 한다.
-> this 키워드 사용.
! 자바스크립트에서 this 키워드를 사용하지 않으면, 다른 프로그래밍 언어와는 달리, 오류가 발생한다.
<script>
let person = {
name: '윤인성',
eat: function(food) {
alert(this.name + '이 ' + food + '을/를 먹습니다.');
alert(`${this.name}이 ${food}을/를 먹습니다.`);
}
}
person.eat('밥');
</script>
+ 백틱 사용: ~ 있는 키보드 누르면 사용 가능.
` ` 사이에 변수를 ${ }로 감싸면 + 연산자를 사용하지 않아도 된다.
\n, \t 등을 사용하지 않아도 모양 그대로 출력된다.
'교재 정리 > HTML5' 카테고리의 다른 글
| 웹 프로그래밍 (3) HTML5 기본 태그 (0) | 2024.04.01 |
|---|---|
| 웹 프로그래밍 (2) 웹 페이지 기본 구조와 작성 방법 (0) | 2024.03.18 |
| 웹 프로그래밍 (1) 웹 개요와 실습 환경 구축 (0) | 2024.03.15 |
