이 랩에서는 참가자들이 웹 개발에 필수적인 기술인 JavaScript 에서 변수를 정의하고 사용하는 기본적인 개념을 탐구합니다. 이 랩은 학습자들이 대화형 웹 경험을 만드는 데 있어서 JavaScript 의 역할, HTML 환경 설정, 변수 선언 및 조작 기술 숙달을 안내합니다.
참가자들은 var 키워드를 사용하여 변수를 선언하고, 이러한 변수에 값을 할당하며, 웹 페이지에 동적으로 표시하는 방법을 배우게 됩니다. 단계별 지침을 따름으로써 학생들은 변수 명명 규칙 및 현대 웹 개발의 기초를 형성하는 기본적인 스크립팅 기술을 포함하여 JavaScript 의 핵심 프로그래밍 원리에 대한 실질적인 경험을 얻게 될 것입니다.
이 단계에서는 JavaScript 와 웹 개발에서 JavaScript 의 중요한 역할에 대해 배우게 됩니다. JavaScript 는 웹사이트에 상호 작용과 동적 기능을 제공하는 강력하고 다재다능한 프로그래밍 언어입니다.
JavaScript 는 주로 웹 브라우저에서 사용되는 클라이언트 측 스크립팅 언어입니다. 개발자는 JavaScript 를 사용하여 HTML 및 CSS 를 조작하고, 사용자 이벤트를 처리하며, 복잡한 계산을 실시간으로 수행하여 대화형 및 동적 웹 페이지를 만들 수 있습니다.
JavaScript 의 주요 특징은 다음과 같습니다.
다음은 JavaScript 의 기본적인 기능을 보여주는 간단한 예시입니다.
<!doctype html>
<html>
<head>
<title>JavaScript Introduction</title>
</head>
<body>
<h1 id="greeting">Hello, Web Development!</h1>
<script>
// JavaScript can dynamically change page content
document.getElementById("greeting").innerHTML = "Welcome to JavaScript!";
</script>
</body>
</html>브라우저에서의 예시 출력:
Welcome to JavaScript!이 예시는 JavaScript 가 웹 페이지 콘텐츠를 즉시 수정하여 동적 웹 경험을 만드는 데 얼마나 강력한지를 보여줍니다.
이 단계에서는 JavaScript 코드를 포함하고 실행할 수 있는 HTML 파일을 만드는 방법을 배우게 됩니다. HTML 은 웹 페이지의 구조를 제공하며, JavaScript 는 상호 작용과 동적 기능을 추가합니다.
먼저, 프로젝트 디렉토리로 이동합니다.
cd ~/projectWebIDE 를 사용하여 variables.html이라는 새 HTML 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Variables</title>
</head>
<body>
<h1>Learning JavaScript Variables</h1>
<!-- We'll add JavaScript here in the next steps -->
<script>
// JavaScript code will go here
</script>
</body>
</html>HTML 구조에 대한 주요 사항:
<!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.<script> 태그는 JavaScript 코드가 작성될 위치입니다.<script> 태그는 <head> 또는 <body> 섹션에 배치할 수 있습니다.브라우저에서 열었을 때의 예시 출력:
Learning JavaScript Variables<script> 태그를 사용하면 HTML 파일에 직접 JavaScript 를 작성하거나 외부 JavaScript 파일에 연결할 수 있습니다. 다음 단계에서는 이 파일에 변수를 사용하기 위한 JavaScript 코드를 추가할 것입니다.
이 단계에서는 var 키워드를 사용하여 JavaScript 에서 변수를 선언하는 방법을 배우게 됩니다. 변수는 코드 전체에서 사용하고 조작할 수 있는 데이터 값을 저장하는 컨테이너입니다.
WebIDE 에서 variables.html 파일을 열고 <script> 섹션을 수정하여 변수 선언을 추가합니다.
<!doctype html>
<html lang="en">
<body>
<script>
// Declaring variables using var keyword
var firstName = "John";
var age = 25;
var isStudent = true;
// You can also declare a variable without initial value
var lastName;
</script>
</body>
</html>변수 선언에 대한 주요 사항:
var는 JavaScript 에서 변수를 선언하는 데 사용됩니다."John"25true 또는 false변수가 실제로 작동하는 것을 보려면 console.log()를 사용하여 값을 표시할 수 있습니다.
<script>
var firstName = "John";
console.log(firstName); // Outputs: John
</script>브라우저의 개발자 콘솔에서의 예시 출력:
John이 단계에서는 JavaScript 에서 다양한 방법을 사용하여 변수에 값을 할당하고 표시하는 방법을 배우게 됩니다. 이전 단계를 기반으로 변수 값을 사용하는 방법을 살펴보겠습니다.
variables.html 파일을 열고 <script> 섹션을 다음 코드로 업데이트합니다.
<!doctype html>
<html lang="en">
<body>
<div id="output"></div>
<script>
// Declaring and assigning variables
var firstName = "John";
var age = 25;
var isStudent = true;
// Reassigning variable values
age = 26;
firstName = "Jane";
// Displaying values using console.log()
console.log("Name: " + firstName);
console.log("Age: " + age);
console.log("Is Student: " + isStudent);
// Displaying values on the webpage
var outputElement = document.getElementById("output");
outputElement.innerHTML =
"Name: " +
firstName +
"<br>Age: " +
age +
"<br>Is Student: " +
isStudent;
</script>
</body>
</html>변수 할당 및 표시에 대한 주요 사항:
=를 사용하여 변수에 값을 할당하거나 재할당합니다.console.log()는 브라우저의 개발자 콘솔에 값을 표시합니다.document.getElementById().innerHTML은 웹 페이지에 직접 값을 표시할 수 있습니다.+를 사용하여 문자열과 변수를 연결할 수 있습니다.브라우저의 개발자 콘솔에서의 예시 출력:
Name: Jane
Age: 26
Is Student: true웹 페이지에서의 예시 출력:
Name: Jane
Age: 26
Is Student: true이 단계에서는 JavaScript 에서 변수 이름을 지정하는 모범 사례에 대해 배우게 됩니다. 깔끔하고 읽기 쉽고 유지 관리 가능한 코드를 작성하려면 적절한 변수 명명이 중요합니다.
variables.html 파일을 열고 <script> 섹션을 다음 예제로 업데이트합니다.
<!doctype html>
<html lang="en">
<body>
<div id="output"></div>
<script>
// Good variable naming conventions
// Use camelCase for variable names
var firstName = "John";
var lastName = "Doe";
var age = 25;
var isStudent = true;
// Descriptive and meaningful names
var totalPrice = 99.99;
var discountPercentage = 10;
var calculatedDiscount = totalPrice * (discountPercentage / 100);
// Avoid single-letter variables (except in specific cases like loops)
var x = 10; // Bad
var width = 10; // Good
// Display the results
console.log("Full Name: " + firstName + " " + lastName);
console.log("Discounted Price: $" + calculatedDiscount);
var outputElement = document.getElementById("output");
outputElement.innerHTML =
"Full Name: " +
firstName +
" " +
lastName +
"<br>Age: " +
age +
"<br>Discounted Price: $" +
calculatedDiscount;
</script>
</body>
</html>주요 변수 명명 규칙:
firstName, lastName) 사용is와 같은 의미 있는 접두사 사용브라우저의 개발자 콘솔에서의 예시 출력:
Full Name: John Doe
Discounted Price: $9.999웹 페이지에서의 예시 출력:
Full Name: John Doe
Age: 25
Discounted Price: $9.999이 랩에서는 참가자들이 JavaScript 변수의 기본 개념과 웹 개발에서의 역할을 탐구합니다. 이 랩은 대화형 및 동적 웹 경험을 가능하게 하는 강력한 클라이언트 측 스크립팅 언어로서 JavaScript 를 소개하는 것으로 시작하며, HTML 및 CSS 조작, 사용자 이벤트 처리, 실시간 계산 수행 능력을 강조합니다.
단계별 접근 방식을 통해 학습자는 HTML 파일을 설정하고 var 키워드를 사용하여 변수 선언을 연습하며, 적절한 변수 명명 규칙의 중요성과 변수 값을 할당하고 표시하는 방법을 이해합니다. 실습을 통해 동적 웹 콘텐츠를 생성하는 실질적인 통찰력을 얻고, 정적 웹 페이지를 대화형 및 매력적인 사용자 경험으로 변환하는 JavaScript 의 다재다능함을 보여줍니다.
