JS의 변수
JS에서 변수는 값을 저장하고 사용할 수 있는 메모리 공간의 이름으로 변수를 선언할 때 var, let, const 키워드를 사용할 수 있다.
- var는 함수 범위를 가지며, 변수 호이스팅이 발생한다.
- let, const는 블록 범위를 가지며, 호이스팅은 되지만 선언된 위치까지는 사용할 수 없다. const는 상수로, 값을 재할당x
*호이스팅* 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 동작을 말한다
// var, let, const 차이
var algorithmName = 'QuickSort';
algorithmName = 'MergeSort';
let timeComplexity = 'O(n log n)';
timeComplexity = 'O(n^2)';
const PI = 3.1415;위 코드는 순서대로 var, let, const의 예로 각각의 차이를 볼 수 있다.
var와 let으로 선언한 변수는 값을 재할당할 수 있지만, const로 선언한 변수는 한 번 값을 할당하면 재할당할 수 없다.
예를 들어, var와 let은 값의 변경이 가능하지만, const는 상수 값을 정의하는 데 사용되며, 재할당 시 오류가 발생한다.
데이터타입
<!DOCTYPE html>
<html>
<head>
<title>Hacker Variables and Data Types</title>
</head>
<body>
<script>
//숫자
let encryptionKey = 256;
console.log("Encryption Key:", encryptionKey);
//문자열
const secretAlias = "AgentX";
console.log("Secret Alias:", secretAlias);
//불리안
let isCompromised = false;
console.log("Is Compromised:", isCompromised);
</script>
</body>
</html>각각
숫자, 데이터, 불리안 데이터 타입의 예이다
전역변수, 지역 변수
전역변수 : 코드내의 어느곳에서나 접근할 수 있는 변수
지역변수 : 정의된 블럭내에서만 사용할 수 있는 변수
// 전역 변수
let globalIntel = "Global Intel";
// 함수 'spyMission' 안의 지역 변수 'localIntel'
function spyMission() {
let localIntel = "Local Intel";
console.log(globalIntel); //전역 접근
console.log(localIntel); //지역 접근
}
console.log(globalIntel); // "Global Intel" - 전역 변수 접근 가능
console.log(localIntel); // ReferenceError - 지역 변수 접근 XX
변수의 실행 범위 (Scope)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hacker Scope Demo</title>
</head>
<body>
<script>
let masterKey = "TopSecret123";
var hackerAlias = "Shadow";
function hackMission() {
console.log("hackMission 함수 실행 중...");
console.log("hackMission에서 masterKey:", masterKey);
let agentCode = "X9Y8Z7";
console.log("hackMission에서 agentCode:", agentCode);
window.hackLevel = "Critical";
window.missionCode = "Bravo";
}
hackMission();
console.log("masterKey:", masterKey);
console.log("외부에서 hackLevel:", hackLevel);
console.dir(window);
console.log(missionCode);
</script>
</body>
</html>전역 변수
let masterKey = "TopSecret123";와 var hackerAlias = "Shadow";는 전역 변수로, HTML 문서의 모든 스크립트에서 접근 가능하며, 함수 내부와 외부에서 모두 사용된다.
지역변수
function hackMission() { ... } 함수 내에서 선언된 let agentCode = "X9Y8Z7";는 지역 변수로, 함수 내부에서만 접근 가능하고, 함수 외부에서는 사용할 수 없다.
window 객체를 통한 전역 변수
window.hackLevel = "Critical";와 window.missionCode = "Bravo";는 window 객체를 통해 설정된 전역 변수, 스크립트의 어디서나 접근 가능
스크립트 실행 흐름
hackMission() 함수 호출 시, masterKey는 전역 변수로 접근 가능, agentCode는 지역 변수로 함수 내부에서만 접근 가능하다. 함수 호출 후, masterKey, hackLevel, missionCode를 로그에 출력하고, hackLevel과 missionCode는 전역 범위에서 접근 가능하다
for문
1 let start = 1;
2 let end = 3;
3
4 for (let i = start; i <= end; i++) {
5 console.log(i);
6 }// for문을 사용하여 1부터 3까지의 숫자 출력
while문
1 let start = 1;
2 let end = 3;
3 let i = start;
4
5 while (i <= end) {
6 console.log(i);
7 i++;
8 }// while문을 사용하여 1부터 3까지의 숫자 출력
JS 개인실습 및 과제
개인 실습 - 컴퓨터와의 가위바위보
과정 - 사용자는 가위, 바위, 보 중 하나를 선택, 컴퓨터는 랜덤으로 값을 선택해서 두 선택을 비교해 결과를 결정한다
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>가.바.보</title>
7 <style>
8 body {
9 font-family: Arial, sans-serif;
10 text-align: center;
11 margin: 0;
12 padding: 30%;
13 }
14 .result {
15 color: red;
16 }
17 </style>
18 </head>
19 <body>
20 <h1>가위.바위.보</h1>
21 <button onclick="playGame('가위')">가위</button>
22 <button onclick="playGame('바위')">바위</button>
23 <button onclick="playGame('보')">보</button>
24 <p id="result"></p>
25
26 <script>
27 function playGame(userChoice) {
28 const choices = ['바위', '보', '가위'];
29 const computerChoice = choices[Math.floor(Math.random() * 3)];
30
31 let result;
32 if (userChoice === computerChoice) {
33 result = "다시 도전";
34 } else if (
35 (userChoice === '바위' && computerChoice === '가위') ||
36 (userChoice === '보' && computerChoice === '바위') ||
37 (userChoice === '가위' && computerChoice === '보')
38 ) {
39 result = "승리";
40 } else {
41 result = "패배";
42 }
43
44 document.getElementById('result').innerHTML = `사용자: ${userChoice}<br>컴퓨터: ${computerChoice}<br><span class="result"> ${result}</span>`;
45 }
46 </script>
47 </body>
48 </html>| 28~29 | choices 배열에서 무작위로 0, 1, 2 중 하나의 인덱스를 선택하여 해당 인덱스에 해당하는 요소(가위, 바위, 보)를 computerChoice 변수에 저장한다. |
| 31~42 | if문을 사용하여 사용자와 컴퓨터의 선택을 비교하여 누가 이겼는지, 비겼는지에 따라 결과 를 result 변수에 저장한다. |
| 44 | <p id="result"> 요소에 사용자와 컴퓨터의 선택, 그리고 결과를 포함한 HTML을 삽입하여 화면에 표시한다. |
| css | 결과가 잘 보이게 결과에 color:red;를 적용했다. |
금일 과제
업다운 게임 - 컴퓨터가 정한 숫자를 사용자가 추측하고, 추측에 대해 숫자가 높은지 낮은지 힌트를 받아 맞추는 게임
1 <!DOCTYPE html>
2 <html lang="ko">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>업다운 게임</title>
7 <style>
8 button {
9 margin: 5px;
10 padding: 10px 20px;
11 font-size: 1rem;
12 cursor: pointer;
13 }
14 #status {
15 font-size: 1.2rem;
16 margin-top: 20px;
17 }
18 </style>
19 </head>
20 <body>
21
22 <p>숫자 하나를 선택하세요.</p>
23 <div id="button-container"></div>
24 <p id="status">결과: </p>
25
26 <script>
27 function getRandomInt(min, max) {
28 return Math.floor(Math.random() * (max - min + 1)) + min;
29 }
30
31 let min = 1;
32 let max = 100;
33 let targetNumber = getRandomInt(min, max);
34 let attemptsLeft = 5;
35
36 const buttonContainer = document.getElementById('button-container');
37 const statusDisplay = document.getElementById('status');
38
39 function createButtons() {
40 buttonContainer.innerHTML = '';
41 for (let i = min; i <= max; i++) {
42 const button = document.createElement('button');
43 button.textContent = i;
44 button.onclick = function() {
45 const userGuess = parseInt(button.textContent);
46 attemptsLeft--;
47
48 if (userGuess === targetNumber) {
49 statusDisplay.textContent = `정답입니다 `;
50 resetGame();
51 } else if (attemptsLeft === 0) {
52 statusDisplay.textContent = `기회가 없습니다. 숫자는 ${targetNumber}였습니다. `;
53 resetGame();
54 } else {
55 if (userGuess > targetNumber) {
56 statusDisplay.textContent = `값보다 큽니다 남은 기회: ${attemptsLeft}`;
57 max = userGuess - 1;
58 } else {
59 statusDisplay.textContent = `값보다 작습니다! 남은 기회: ${attemptsLeft}`;
60 min = userGuess + 1;
61 }
62 createButtons();
63 }
64 };
65 buttonContainer.appendChild(button);
66 }
67 }
68
69 function resetGame() {
70 min = 1;
71 max = 100;
72 targetNumber = getRandomInt(min, max);
73 attemptsLeft = 5;
74 createButtons();
75 }
76
77 createButtons();
78 </script>
79 </body>
80 </html>
JS 코드
| 27~37 | 최소 및 최대 범위, 목표 숫자, 남은 시도 횟수를 설정하고, 버튼을 담을 컨테이너와 상태 메시지를 표시할 요소를 선택해서 변수에 저장 |
| 39~67 | createButtons 함수는 버튼을 생성하고 클릭 시 사용자 추측을 확인하고 정답 여부를 확인한다. 맞추거나 기회가 없으면 게임을 다시 설정하고, 아니면 크다 or 작다의 힌트를 제공하며 버튼을 다시 생성 |
| 39~80 | 게임의 범위와 목표 숫자를 초기화하고, 남은 횟수를 다시 설정한 후 버튼을 다시 생성하여 게임을 다시 시작한다. createButtons()을 호출해서 초기 상태의 버튼을 화면에 표시한다 |
