JavaScript_02) 함수와 기본 문법
jaemeon's note
HTMLCSSJavaScript
JavaScript_02) 함수와 기본 문법
2025. 9. 26. 17:14

 

학습 목표

  • 자바스크립트의 개념과 특징을 이해한다
  • 웹에서 자바스크립트를 사용하는 3가지 방법을 파악한다
  • 데이터 입출력 방법을 학습한다
  • 함수 정의와 호출 방법을 익힌다
  • DOM 조작의 기본 개념을 이해한다

<자바스크립트 개요>

- 스크립트 언어의 정의

스크립트 언어란 프로그램의 동작을 사용자의 요구사항에 맞게 수행되도록 해주는 용도로 사용된다. 비교적 유연하게 동작하여 쉽게 사용이 가능하다는 특징이 있다.

- 자바스크립트의 특징

자바스크립트는 웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어로 브라우저에 엔진(V8)이 탑재되어 있다.

인터프리터 방식은 코드를 한 줄씩 읽어가며 바로 실행하는 방식이다. 실시간으로 텍스트를 분석해서 실행되므로 코드에 문법 오류가 있다면 런타임 시점에 알려준다.

- 웹 구성 요소와 자바스크립트의 역할

웹은 크게 3요소로 구성된다:

  • HTML: 웹문서의 큰 틀을 잡을 때 사용(DOM Tree 구성)
  • CSS: HTML로 구성된 DOM에 다양한 스타일 속성을 부여할 때 사용
  • JavaScript: 웹문서에서 이벤트가 발생했을 때 실행할 기능을 정의한다. HTML로 구성된 DOM을 편집하는 역할을 한다.

<자바스크립트 사용 방법>

웹에서 자바스크립트를 사용하는 방법은 3가지가 있다.

- Inline(인라인) 방식

태그 내에서 간단한 소스 코드를 작성해서 실행되게 하는 방법이다.

표현법: <태그> on이벤트명="해당 요소의 이벤트 발생 시 실행할 코드"

<button onclick="window.alert('알림창 출력!!')">알림창 출력</button>
<button onclick="window.console.log('콘솔 창 출력!!')">콘솔창 출력</button>

- Internal(내부) 방식

HTML 문서 내에 <script> 태그를 사용하여 소스코드를 작성해서 실행되게 하는 방법이다. script 태그는 head 태그, body 태그 어디에서든 사용 가능하다.

<button id="btn">알림창 출력</button>
<button onclick="btnClick()">콘솔창 출력</button>  

<script>
    // 선택자를 통해서 DOM의 Element요소(태그)를 가져온다
    let btn = document.querySelector("#btn");
    btn.onclick = function(){
        alert("알림창 출력!!!");
    }

    function btnClick(){
        console.log("콘솔창 출력!!!");
    }
</script>

- External(외부) 방식

별도의 .js 파일로 소스코드를 작성해서 가져다가 실행되게 하는 방법이다.

<head>
    <script src="./resources/js/sample.js"></script>
</head>

<데이터 입출력>

- 전역 객체의 이해

자바스크립트에서 window와 document 객체를 이해하는 것이 중요하다.

  • window 객체: 브라우저 창이 열릴 때마다 생성되는 전역 객체(Global Object)로, 브라우저 환경에서 모든 전역변수, 함수, 타이머 등이 window에 소속된다. 최상위 객체이므로 window 생략이 가능하다.
  • document 객체: window.document 객체를 말하며, 현재 열려있는 HTML 문서(DOM)을 표현하는 객체다. DOM API를 통해 요소 탐색/수정/추가가 가능하다.

- 데이터 출력 방법

자바스크립트에서 데이터를 출력하는 4가지 방법이 있다:

// 1) 알림창 출력
window.alert("출력하고싶은 문구");

// 2) 콘솔창 출력
window.console.log("콘솔창에 출력하고싶은 문구");

// 3) 화면상에 출력
document.write("화면상에 출력하고자 하는 문구");

// 4) 선택한 요소에 출력
선택한요소.innerHTML = "HTML코드";
선택한요소.innerText = "텍스트";

- DOM 요소 조작 예제

function changeText(){
    // ID가 area1인 요소를 가져온다
    let divEl = document.querySelector("#area1");
    
    // 선택한 요소의 속성에 접근 가능
    console.log(divEl.id);
    console.log(divEl.className);
    
    // 선택한 요소의 속성 변경 가능
    divEl.className = "wrap";
    
    // 요소의 컨텐츠 가져오기
    console.log(divEl.innerHTML);  // HTML 코드 포함
    console.log(divEl.innerText);  // 텍스트만 포함
    
    // 요소의 컨텐츠 변경
    divEl.innerHTML = "<h3>내부 컨텐츠 변경</h3>";
    divEl.style.color = "blue";
}

- 데이터 입력 방법

function testPrompt(){
    // prompt를 통한 입력
    let name = prompt("이름을 입력하세요.");
    let age = prompt("나이를 입력하세요.");
    
    let divEl = document.querySelector("#area3");
    divEl.innerHTML = `이름: ${name} <br> 나이: ${age}`;
}

function testInput(){
    // input 요소를 통한 입력
    let idInput = document.querySelector("#userId");
    let pwdInput = document.querySelector("#userPwd");
    
    let resultInput = document.querySelector("#result");
    resultInput.value = `아이디: ${idInput.value}, 비밀번호: ${pwdInput.value}`;
}

<함수 정의와 활용>

- 함수 정의 방법

자바스크립트에서 함수를 정의하는 기본 방법이다:

function 함수명(매개변수...){
    실행코드...
}

- 함수의 특징과 다양한 정의 방법

자바스크립트에서 함수는 일급 객체다. 이는 함수를 변수에 할당할 수 있고, 함수의 인자로 전달이 가능하며, 함수의 결과로 반환할 수 있다는 의미다.

// 일반적인 함수 정의
function test1() { 
    console.log("test1 함수 실행");
}

// 함수를 변수에 할당
const test2 = function(){
    console.log("test2 함수 실행");
}

// 화살표 함수
let test4 = () => 200;

// 함수 호출
test1();        
test2();        
console.log(test4());  // 200

실행 결과:

test1 함수 실행
test2 함수 실행
200

- 매개변수와 arguments 객체

자바스크립트는 오버로딩을 지원하지 않는다. 매개변수의 개수가 달라도 동일한 함수로 인식한다. 자바스크립트의 함수는 기본적으로 arguments 객체를 가지고 있어서 전달받은 모든 인자값이 배열 형태로 들어있다.

let test3 = function(name){ 
    console.log(arguments);  // 전달받은 모든 인자값 출력
    console.log("test3 함수 실행");
    console.log(name);
}

test3();  // arguments: []
test3("jaemeon");  // arguments: ["jaemeon"]
test3("jaemeon", 55, "경기도 고양시");  // arguments: ["jaemeon", 55, "경기도 고양시"]

실행 결과:

[]
test3 함수 실행
undefined
["jaemeon"]
test3 함수 실행
jaemeon
["jaemeon", 55, "경기도 고양시"]
test3 함수 실행
jaemeon

정리 및 요약

이번 포스팅에서는 자바스크립트의 기본 개념부터 실제 사용 방법까지 전반적으로 학습했다.

핵심 내용:

  • 자바스크립트는 인터프리터 방식의 스크립트 언어로 DOM 조작을 담당한다
  • inline, internal, external 방식으로 웹에서 사용할 수 있다
  • window와 document 객체를 통해 브라우저와 DOM을 조작한다
  • 다양한 방법으로 데이터 입출력이 가능하다
  • 함수는 일급 객체로서 유연한 사용이 가능하다

'HTMLCSSJavaScript' 카테고리의 다른 글

JavaScript_01) 변수  (0) 2025.09.22
HTML_05) 하이퍼링크 태그, 입력 양식 및 Form 태그  (0) 2025.09.22
HTML_04) 미디어, 영역 태그  (0) 2025.09.22
HTML_03) 표 태그  (0) 2025.09.20
HTML_02) 목록 태그  (0) 2025.09.19

티스토리툴바