안녕하세요! 이번에는 JavaScript의 기본적인 개념을 알아보고, 코드를 실행하고 출력하는 방법에 대해 알려드릴게요. JavaScript는 웹 개발에서 많이 사용되는 프로그래밍 언어로, 다양한 기능을 수행할 수 있습니다. 자, 그럼 바로 시작해볼까요? 🚀
1. JavaScript와 HTML 💻
JavaScript 코드를 실행하기 위해서는 HTML 문서 내에 <script> 태그를 사용해야 합니다. <script> 태그는 HTML 문서의 <head> 태그 내에 추가할 수도 있고, <body> 태그 내에서도 사용할 수 있습니다. 코드를 실행해보기 위해 간단한 예제를 살펴보겠습니다.
<html>
<head>
<title>JavaScript 코드 실행 예제</title>
<script>
console.log("안녕하세요! JavaScript 코드 실행 중입니다. 👋");
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
위의 예제에서 <script> 태그 내에 작성된 코드가 JavaScript 코드입니다. console.log() 함수는 괄호 안에 있는 메시지를 콘솔에 출력합니다. 따라서 위의 코드를 실행하면 "안녕하세요! JavaScript 코드 실행 중입니다. 👋"라는 메시지가 콘솔에 출력됩니다.
2. console.log()로 출력하는 법 🖨️
console.log() 함수는 변수, 문자열, 숫자 등 다양한 데이터를 출력할 수 있습니다. 아래 예제를 통해 자세히 알아보겠습니다.
<script>
var name = "John Doe";
var age = 25;
console.log("이름: " + name);
console.log("나이: " + age);
</script>
위의 코드에서는 name 변수에 "John Doe"라는 문자열을, age 변수에 25라는 숫자를 할당했습니다. console.log() 함수를 사용하여 변수의 값을 출력하고 있습니다. 실행 결과는 다음과 같습니다.
이름: John Doe
나이: 25
3. 코드의 실행 순서📚
JavaScript 코드를 작성할 때, 코드의 실행 순서를 고려해야 합니다. JavaScript 엔진은 코드를 위에서 아래로 순차적으로 읽어가면서 실행합니다. 이를 이해하기 위해 아래 예제를 살펴봅시다.
<script>
var x = 5;
var y = 10;
console.log(x + y);
</script>
위의 코드에서는 x 변수에 5를, y 변수에 10을 할당하고 있습니다. 그리고 console.log() 함수를 사용하여 x와 y의 합을 출력하고 있습니다. 코드는 위에서 아래로 읽기 때문에 변수에 값을 할당한 후에 합을 출력하는 순서로 작성되어야 합니다. 실행 결과는 15가 됩니다.
4. 주석 💬
주석은 코드에 대한 설명이나 메모를 작성할 때 사용됩니다. 주석은 JavaScript 엔진에 의해 무시되므로 코드의 실행에 영향을 주지 않습니다. JavaScript에서는 주석을 // 또는 /* */ 형태로 작성할 수 있습니다.
<script>
var x = 5;
var y = 10;
// 변수 x와 y의 합을 출력
console.log(x + y);
</script>
위의 예제에서 주석은 //을 사용하여 작성되었습니다. 주석은 코드를 이해하기 쉽게 설명하는 역할을 합니다.
5. 연산자 ➕
JavaScript에서는 값과 연산자를 구분하여 사용합니다. 값은 데이터의 종류를 나타내며, 연산자는 값을 조작하거나 다른 값과 연산하는 역할을 합니다. 아래 예제를 통해 자세히 알아보겠습니다.
<script>
var x = 5;
var y = 10;
console.log(x + y); // 덧셈 연산
console.log(x - y); // 뺄셈 연산
console.log(x * y); // 곱셈 연산
console.log(x / y); // 나눗셈 연산
</script>
위의 코드에서는 x와 y 변수를 사용하여 덧셈, 뺄셈, 곱셈, 나눗셈 연산을 수행하고 있습니다. console.log() 함수를 통해 각 연산의 결과를 출력합니다.
6. console.log()로 구구단을 출력할 수 있다. 🔢
JavaScript를 사용하여 구구단을 출력해보겠습니다. 아래 예제를 확인해주세요.
<script>
for (var i = 2; i <= 9; i++) {
console.log("== " + i + "단 ==");
for (var j = 1; j <= 9; j++) {
console.log(i + " x " + j + " = " + (i * j));
}
console.log("\n");
}
</script>
위의 코드는 중첩된 반복문을 사용하여 구구단을 출력합니다. 바깥쪽 반복문은 2단부터 9단까지 반복하고, 안쪽 반복문은 1부터 9까지 반복하여 각 단의 곱셈을 출력합니다. 코드 실행 결과는 다음과 같습니다.
== 2단 ==
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
...
2 x 9 = 18
== 3단 ==
3 x 1 = 3
3 x 2 = 6
3 x 3 = 9
...
3 x 9 = 27
...
이상으로 JavaScript 코드 실행과 console.log() 함수를 통한 데이터 출력에 대해 알아보았습니다. 기본적인 개념을 이해하고 여러 가지 예제를 통해 실습해보면 JavaScript를 더욱 잘 활용할 수 있을 것입니다. 추가적인 내용은 아래 링크를 참고해주세요.
관련 링크: - MDN 웹 문서: JavaScript 기본 - W3Schools JavaScript Tutorial
코드와 함께 자세한 설명을 드렸습니다. JavaScript에 대한 기초적인 개념을 익히고 코드 실행과 출력에 대한 이해를 높이셨다면, 더 복잡한 기능과 응용을 다룰 수 있을 것입니다. 재미있고 유용한 JavaScript 프로그래밍을 즐기시기 바랍니다! 😊🎉
'Front-end > JavaScript' 카테고리의 다른 글
| JavaScript 함수: 코드의 재사용성과 모듈화를 위한 도구 (0) | 2023.05.31 |
|---|---|
| JavaScript 반복문: 반복 작업을 효율적으로 처리하는 도구들 (0) | 2023.05.30 |
| JavaScript 조건문: 프로그램의 흐름을 제어하는 도구들 (0) | 2023.05.29 |
| JavaScript 변수: 데이터 저장과 활용 (0) | 2023.05.28 |
| JavaScript의 데이터 타입과 Math 메서드 (0) | 2023.05.28 |