Notice
Recent Posts
Recent Comments
Link
250x250
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Tags more
Archives
Today
Total
관리 메뉴

공부해보잠

웹 프로그래밍 언어 -JavaScript 본문

자격증/정보처리

웹 프로그래밍 언어 -JavaScript

heejk 2025. 2. 19. 22:09
JavaScript의 기본 문법

JavaScript는 객체 지향 스크립트 언어로, 주로 웹 페이지의 동작을 구현하는 데 사용된다.
C언어 문법을 기반으로 제작된 언어이므로 제어문, 반복문, 함수 사용 방식이 C언어와 유사하다.

 

JavaScript 기본 문법

 

변수 선언

  • 자료형에 관계없이 var, let, const 예약어를 사용하여 선언한다.
  • var는 과거 방식이며, 최신 문법에서는 let과 const를 사용한다.
  • let은 값이 변경될 수 있는 변수, const는 변경되지 않는 상수를 선언할 때 사용한다.
var x = 10;  // 변수 선언 (과거 방식)
let y = 20;  // 변경 가능한 변수 선언
const z = 30; // 변경할 수 없는 상수 선언
  • 세미콜론(;) 사용
    • JavaScript에서는 세미콜론(;)을 생략할 수 있지만, 명확한 코드 작성을 위해 권장된다.
  • HTML에서 JavaScript 코드 작성 방법
    • <script>...</script> 태그 사이에 코드를 직접 입력한다.
    • <script src="파일명.js"></script>를 사용하여 외부 파일(.js)과 연결할 수 있다.

 

JavaScript 기본 예제

<!DOCTYPE html>
<html>
<head>
    <script>
        var sum = 0;
        for (var i = 1; i <= 10; i++) {
            sum += i;  // 1부터 10까지 더하기
        }
        document.write(sum);  // 결과 출력
    </script>
</head>
<body>
</body>
</html>

 

sum 변수를 선언하고 0으로 초기화.

for 반복문을 사용해 1부터 10까지 증가하면서 합산.

document.write(sum);를 사용해 결과 출력.

JavaScript의 입출력

JavaScript에서 데이터를 입력받거나 출력할 수 있는 방법에는 대화상자, 콘솔 출력, 문서 출력 등이 있다.

 

대화상자(Dialog)

  • alert("내용") : 알림창을 표시한다.
  • confirm("내용") : 확인 / 취소 버튼을 제공하여 사용자의 선택을 받을 수 있다.
  • prompt("내용", "기본값") : 사용자가 입력할 수 있는 입력창을 제공한다.

예제 - 대화상자 활용

<script>
    alert("안녕하세요");  // 알림창 표시
    var userConfirm = confirm("이 사이트에 방문하시겠습니까?");
    var userInput = prompt("당신의 이름을 입력하세요.", "김군");

    document.write("사용자 이름: " + userInput);
</script>

 

JavaScript 배열(Array)

배열은 여러 개의 데이터를 하나의 변수명으로 저장하는 데이터 집합이다.
초기값 없이 선언하거나, 초기값을 지정하여 배열을 생성할 수 있다.

 

배열 선언 방법

var arr1 = [1, 2, 3, 4];  // 배열 선언 방법 1
var arr2 = Array(3.14, "JavaScript", 100);  // 배열 선언 방법 2
var arr3 = new Array(3, 6, 9);  // 배열 선언 방법 3

 

배열 조작 메서드

 

배열 요소 추가

arr1.push(5);  // 배열 끝에 추가
arr1.unshift(0);  // 배열 앞에 추가

 

배열 요소 삭제

arr1.pop();  // 마지막 요소 제거
arr1.shift();  // 첫 번째 요소 제거

 

배열 요소 수정

arr1[2] = 100;  // 인덱스 2번 값을 100으로 변경

 

배열 일부 추출

var slicedArr = arr1.slice(1, 3);  // 인덱스 1~2 요소 추출

 

JavaScript 조건문

 

if문

var score = 85;
if (score >= 90) {
    console.log("A 학점");
} else if (score >= 80) {
    console.log("B 학점");
} else {
    console.log("C 학점");
}

 

switch문

var fruit = "apple";
switch (fruit) {
    case "banana":
        console.log("바나나입니다.");
        break;
    case "apple":
        console.log("사과입니다.");
        break;
    default:
        console.log("알 수 없는 과일");
}
JavaScript 반복문

 

for문

for (var i = 1; i <= 5; i++) {
    console.log("반복: " + i);
}

 

while문

var i = 1;
while (i <= 5) {
    console.log("반복: " + i);
    i++;
}

 

do-while문

var i = 1;
do {
    console.log("반복: " + i);
    i++;
} while (i <= 5);

 

요약

  • JavaScript는 객체 지향, 함수형 프로그래밍을 지원하는 유연한 언어
  • ES6 이후 let, const 등장으로 var보다 더 안정적인 변수 선언 가능
  • console.log()를 사용해 디버깅 용이
  • document.write()는 오래된 방식이며, innerHTML을 사용하는 것이 더 권장됨

 

728x90

'자격증 > 정보처리' 카테고리의 다른 글

절차적 프로그래밍 언어  (0) 2025.02.19
웹 프로그래밍 언어 -HTML  (0) 2025.02.19
Python제어문  (0) 2025.02.17
Python의 기초  (0) 2025.02.17
Java클래스  (0) 2025.02.16
'자격증/정보처리' Related Articles more