1. 변수 (Variables)
자바스크립트에서 변수를 선언할 때는 var, let, 또는 const 키워드를 사용한다.
var x = 5;
let y = 10;
const z = 15;var: 함수 범위의 변수를 선언let: 블록 범위의 변수를 선언한다. 값이 변경될 수 있다.const: 블록 범위의 상수를 선언한다. 값이 변경되지 않는다.
여기서 블록은 중괄호’{}’로 둘러 쌓인 코드 그룹을 나타낸다. 주로 조건문, 반복문 등 제어문에서 사용된다.
2. 데이터 타입 (Data Types)
Number: 숫자- JavaScript에선 Java처럼 int, long과 같은 구분은 없고 하나의 데이터 타입을 사용한다.
Number데이터 타입은 정수 및 부동 소수점 숫자를 모두 포함한다.
String: 문자열Boolean: 불리언 (참 또는 거짓)Array: 배열Object: 객체Function: 함수
데이터 타입은 위와 같으나 JavaScript는 동적 타입(dynamic typing)언어이기 때문에 변수 선언 시 데이터 타입을 명시적으로 지정할 필요가 없다. 이런 특성을 타입 추론(type inference)이라고 한다.
var x = 10; // x는 숫자형
var y = "Hello"; // y는 문자열형
var z = true; // z는 불리언형동적 타입은 코드 작성을 간편하게 만들어 주지만 잘못된 타입의 값을 할당할 경우 에러가 발생할 수 있으므로 주의가 필요하다. 최신 버전의 JavaScript에서는 코드를 더 명확하게 만들어주고 변수의 범위를 더 잘 제한하기 위해 let과 const 키워드를 사용하여 블록 범위 변수를 선언하는 것을 권장하고 있다. 만약 데이터 타입을 직접 지정하고 싶다면 const 와 ‘:’를 사용하여 데이터 타입을 명시할 수 있다. 이런 기능을 “타입 어노테이션(type annotation)”이라고 한다.
const myNumber: number = 10;3. 연산자 (Operators)
- 산술 연산자:
+, ``, ``,/,% - 할당 연산자:
=,+=,=,=,/=,%= - 비교 연산자:
==,===,!=,!==,>,<,>=,<====: 자료형과 값이 일치하는지 비교하는 연산자
- 논리 연산자:
&&(AND),||(OR),!(NOT)
4. 조건문 (Conditionals)
조건에 따라 코드의 실행을 제어한다
if (condition) {
// 조건이 참일 때 실행되는 코드
} else {
// 조건이 거짓일 때 실행되는 코드
}5. 반복문 (Loops)
반복문을 사용하여 코드를 반복 실행할 수 있다.
for반복문
for (var i = 0; i < 5; i++) {
// 반복 실행되는 코드
}while반복문
while (condition) {
// 조건이 참일 때 반복 실행되는 코드
}do...while반복문
do {
// 일단 한 번은 실행되고, 이후에 조건이 참일 때 반복 실행되는 코드
} while (condition);6. 함수 (Functions)
코드를 모듈화하여 재사용이 가능하다.
function functionName(parameter1, parameter2) {
// 함수 내부의 코드
return result; // 함수의 반환 값
}7. 객체 (Objects)
속성과 메서드의 모음.
var person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};8. 배열 (Arrays)
여러 값을 순서대로 저장하는 자료 구조
var fruits = ["Apple", "Banana", "Orange"];9. 이벤트 (Events)
웹 페이지에서 발생하는 사용자 동작이나 브라우저 동작을 의미한다. 자바스크립트를 사용하여 이벤트를 처리할 수 있다
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert("Button clicked!");
}
</script>10. 사용 예시
HTML (index.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>버튼을 클릭하여 숫자를 증가 :</h1>
<button id="incrementButton">증가</button>
<p id="counter">0</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
.container {
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
p {
font-size: 24px;
}
JavaScript (script.js)
// 버튼을 클릭할 때마다 숫자를 증가시키는 함수
function increaseCounter() { // increaseCounter 함수 정의
var counterElement = document.getElementById("counter"); // counter라는 id를 가진 요소를 가져옴
var currentCount = parseInt(counterElement.textContent); // 정수로 변환하여 저장
var newCount = currentCount + 1; // +1을 하여 새 변수에 저장
counterElement.textContent = newCount; // counterElement.textContent를 newCount로 업데이트
}
// 버튼에 이벤트 리스너 추가
document.getElementById("incrementButton").addEventListener("click", increaseCounter); //incrementButton ID를 가진 요소를 찾아 클릭 이벤트에 대한 리스너를 추가하여 클릭 시 increaseCounter 함수를 실행한다.
문제에 도전하고 성장하는 백엔드 개발자입니다.