Teamlog - JS수업

JavaScript

인도네시아와 인도가 다른 나라인 것 처럼 JAVA와 JavaScript는 전혀 다른 언어이다. 처음 이름은 LiveScript였지만,

당시 JAVA의 인기가 아주 높았기에 JavaScript를 JAVA의 동생격인 언어로 홍보하면 좋을 것이라고 생각해서
이름은 JavaScript로 바꿨다고 한다.  

JavaScript 기초 알아보기

자바스크립트는 웹 페이지를 동적으로 동작하게 만드는 프로그래밍 언어이며, HTML과 함께 자주 사용된다.

---

1. JavaScript의 특징

자바스크립트(JavaScript)는 웹 페이지에 다양한 기능을 추가할 수 있는 언어이다.

대표적인 특징은 다음과 같다.

특징설명

동적 기능 제공	버튼 클릭, 팝업창 등 구현 가능
인터프리터 언어	코드를 한 줄씩 실행
HTML/CSS와 함께 사용	웹 개발의 핵심 요소
브라우저에서 실행 가능	별도 설치 없이 사용 가능

---

2. 웹페이지에 JavaScript 삽입하기

자바스크립트는 <script> 태그를 사용하여 HTML 문서에 삽입한다.

 

<script>
    alert("Hello JavaScript");
</script>

 

또는 외부 파일을 연결할 수도 있다.

 

<script src="script.js"></script>

---

3. 세미콜론(;)

세미콜론은 문장의 끝을 나타낸다.

 

let num = 10;
console.log(num);

 

자바스크립트에서는 생략 가능한 경우도 있지만, 코드의 가독성을 위해 사용하는 것이 좋다.

---

4. 변수 생성

변수는 데이터를 저장하는 공간이다.

 

let name = "Tom";
const age = 17;

 

키워드특징

let	값 변경 가능
const	값 변경 불가능

---

5. 변수 이름 짓는 규칙

변수 이름에는 규칙이 존재한다.

• 숫자로 시작할 수 없다.
• 특수문자는 _, $만 사용 가능하다.
• 예약어는 사용할 수 없다.
• 의미 있는 이름을 사용하는 것이 좋다.

예시:

 

let userName;
let score1;

 

---

6. 스코프(Scope)

스코프는 변수의 사용 범위를 의미한다.

 

{
    let num = 5;
    console.log(num);
}

 

중괄호 밖에서는 해당 변수를 사용할 수 없다.

---

7. 숫자형 자료형

숫자를 저장하는 자료형이다.

 

let num1 = 10;
let num2 = 3.14;

 

정수와 실수를 모두 표현할 수 있다.

---

8. 문자형 자료형

문자를 저장하는 자료형이다.

 

let text = "Hello";

 

문자열은 작은따옴표 또는 큰따옴표를 사용한다.

---

9. 불린형 자료형

참(True)과 거짓(False)을 나타낸다.

 

let isOpen = true;
let isClose = false;

 

조건문에서 자주 사용된다.

---

10. 자료형 확인

typeof를 사용하면 자료형을 확인할 수 있다.

 

let num = 10;

console.log(typeof num);

 

출력 결과:

 

number

 

---

11. 상호작용

사용자와 상호작용할 수 있는 기능이다.

 

alert("안녕하세요");
prompt("이름을 입력하세요");
confirm("삭제하시겠습니까?");

 

함수기능

alert	알림창 출력
prompt	입력창 출력
confirm	확인/취소 창 출력

---

12. 명시적 형변환

자료형을 직접 변환하는 방법이다.

 

let num = "10";

console.log(Number(num));

 

문자열 "10"이 숫자 10으로 변환된다.

---

13. 연산자

연산자는 값을 계산할 때 사용한다.

 

let result = 10 + 5;

 

---

14. 거듭제곱 연산자

**를 사용한다.

 

console.log(2 ** 3);

 

출력 결과:

 

8

 

---

15. + 연산자

숫자끼리 더할 수 있다.

 

console.log(10 + 5);

 

---

16. 문자형 + 문자형

문자열끼리 연결된다.

 

console.log("Hello" + " World");

 

출력 결과:

 

Hello World

 

---

17. 할당 연산자

값을 저장할 때 사용한다.

 

let num = 10;

 

---

18. 복합 할당 연산자

연산과 저장을 동시에 수행한다.

 

let num = 10;

num += 5;

 

출력 결과는 15가 된다.

---

19. 증감 연산자

값을 1 증가 또는 감소시킨다.

 

let num = 1;

num++;
console.log(num);

 

---

20. 비교 연산자

값을 비교하여 참 또는 거짓을 반환한다.

 

console.log(10 > 5);

 

---

21. 일치 연산자

값과 자료형까지 비교한다.

 

console.log(10 === "10");

 

출력 결과:

 

false

 

---

22. 논리 연산자

논리 계산에 사용한다.

연산자의미

&&	AND
||	OR
!	NOT

예시:

 

console.log(true && false);

 

---

23. 물음표 연산자

조건에 따라 값을 선택하는 연산자이다.

 

let age = 20;

let result = age >= 19 ? "성인" : "미성년자";

console.log(result);

 

---

마무리

이번 활동을 통해 자바스크립트의 기본 문법과 다양한 연산자, 자료형 등을 학습하였다.
특히 변수와 자료형, 연산자의 개념은 이후 프로그래밍 학습에서도 매우 중요한 내용이라는 것을 알 수 있었다.