60세 어르신을 위한 코딩 쉬운 가이드 4일차

코딩 배우기: 60세 컴퓨터 초보자를 위한 쉬운 가이드 - 네 번째 날

JavaScript로 웹 페이지에 동적 기능 추가하기

네 번째 날에는 웹 페이지에 동적인 기능을 추가할 수 있는 JavaScript에 대해 배워보겠습니다. JavaScript는 웹 페이지를 더 인터랙티브하게 만들고, 사용자와의 상호작용을 가능하게 하는 프로그래밍 언어입니다. 오늘은 기본적인 JavaScript 문법과 간단한 예제를 통해 JavaScript를 배우겠습니다.

JavaScript의 기본 개념
JavaScript란 무엇인가요?
JavaScript는 웹 페이지를 동적으로 만들기 위해 사용되는 프로그래밍 언어입니다. HTML과 CSS가 웹 페이지의 구조와 스타일을 정의하는 반면, JavaScript는 웹 페이지에 생명을 불어넣어 줍니다. 예를 들어, 버튼을 클릭했을 때 경고 메시지를 띄우거나, 폼에 입력된 데이터를 검증하는 기능을 구현할 수 있습니다.

JavaScript의 기본 구문
JavaScript 코드는 <script> 태그 내에 작성하거나, 별도의 .js 파일로 분리할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>네 번째 날 학습</title>
</head>
<body>
    <h1>JavaScript 배우기</h1>
    <button onclick="showMessage()">클릭하세요</button>
    <script>
        function showMessage() {
            alert('안녕하세요! 이것은 JavaScript 예제입니다.');
        }
    </script>
</body>
</html>
위의 예제에서는 버튼을 클릭하면 '안녕하세요! 이것은 JavaScript 예제입니다.'라는 경고 메시지가 표시됩니다.

변수와 데이터 타입
변수 선언
JavaScript에서 변수를 선언하는 방법은 다음과 같습니다:

let message = "안녕하세요!";
const pi = 3.14;
var name = "홍길동";
let: 블록 범위의 변수를 선언합니다.
const: 상수를 선언합니다(값을 변경할 수 없습니다).
var: 함수 범위의 변수를 선언합니다(현재는 잘 사용되지 않습니다).
데이터 타입
JavaScript의 주요 데이터 타입에는 다음과 같은 것들이 있습니다:

문자열(String): "안녕하세요"
숫자(Number): 42, 3.14
불리언(Boolean): true, false
배열(Array): [1, 2, 3, 4]
객체(Object): { name: "홍길동", age: 30 }
기본 연산자
수리 연산자
JavaScript에서는 기본적인 수리 연산자를 사용할 수 있습니다:

let x = 10;
let y = 5;
let sum = x + y; // 더하기
let diff = x - y; // 빼기
let product = x * y; // 곱하기
let quotient = x / y; // 나누기
문자열 연산자
문자열을 연결할 때는 + 연산자를 사용합니다:

let greeting = "안녕하세요, " + "홍길동님!";

조건문과 반복문
조건문
JavaScript에서는 조건문을 사용하여 특정 조건에 따라 다른 코드를 실행할 수 있습니다:

let age = 20;

if (age >= 18) {
    console.log("성인입니다.");
} else {
    console.log("미성년자입니다.");
}
반복문
반복문을 사용하여 특정 코드를 반복해서 실행할 수 있습니다:

for (let i = 0; i < 5; i++) {
    console.log("반복문 실행: " + i);
}
함수
함수는 반복적인 작업을 미리 정의하여 필요할 때 호출할 수 있도록 합니다:

function greet(name) {
    return "안녕하세요, " + name + "님!";
}

let message = greet("홍길동");
console.log(message);

예제: 간단한 인터랙티브 웹 페이지 만들기
지금까지 배운 내용을 바탕으로 간단한 인터랙티브 웹 페이지를 만들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>네 번째 날의 웹 페이지</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #message {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>JavaScript 배우기</h1>
    <button onclick="changeText()">텍스트 변경</button>
    <p id="message">이 문장을 변경해보세요!</p>
    <script>
        function changeText() {
            document.getElementById("message").innerText = "텍스트가 변경되었습니다!";
        }
    </script>
</body>
</html>
위의 코드를 브라우저에서 열어보면, 버튼을 클릭했을 때 텍스트가 변경되는 것을 확인할 수 있습니다.

이벤트와 DOM 조작
JavaScript를 사용하면 HTML 요소와 상호작용할 수 있습니다. 이를 위해 DOM(Document Object Model)을 조작하는 방법을 배워야 합니다.

이벤트 핸들링
이벤트 핸들링은 사용자가 웹 페이지와 상호작용할 때 발생하는 이벤트를 처리하는 방법입니다. 예를 들어, 버튼 클릭, 마우스 이동, 키보드 입력 등이 있습니다.

DOM 요소 선택
JavaScript에서는 다양한 방법으로 HTML 요소를 선택할 수 있습니다:

let elementById = document.getElementById("message");
let elementsByClass = document.getElementsByClassName("myClass");
let elementsByTag = document.getElementsByTagName("p");
let elementByQuery = document.querySelector("#message");

DOM 요소 조작
선택한 요소의 속성을 변경하거나, 텍스트를 업데이트할 수 있습니다:

학습 팁

작게 시작하세요: JavaScript의 기본을 익힌 후, 점차 복잡한 기능을 구현해 보세요.
연습과 실습: 코드를 직접 작성하고 실행해 보는 것이 가장 좋습니다. 다양한 예제를 통해 연습해 보세요.
온라인 자료 활용: MDN Web Docs와 W3Schools 같은 사이트에서 다양한 예제와 설명을 찾아보세요.

추가 자료
MDN Web Docs: JavaScript에 대한 자세한 문서와 예제를 제공합니다.
W3Schools: JavaScript를 단계별로 배울 수 있는 온라인 학습 사이트입니다.
네 번째 날에는 JavaScript를 사용하여 웹 페이지에 동적인 기능을 추가하는 방법을 배웠습니다. JavaScript는 웹 개발에서 매우 중요한 역할을 하며, 이를 통해 웹 페이지를 더 인터랙티브하게 만들 수 있습니다. 다음 날에는 배운 내용을 종합하여 작은 프로젝트를 만들어 보겠습니다. 계속해서 흥미를 가지고 학습을 이어나가세요!

해피투게더

60세 어르신을 위한 코딩 쉬운 가이드 4일차

코딩 배우기: 60세 컴퓨터 초보자를 위한 쉬운 가이드 - 네 번째 날

JavaScript로 웹 페이지에 동적 기능 추가하기

학습 팁

티스토리툴바