·자바 스크립트
-오늘은 드디어 대망의 자바스크립트 복습에 들어갔다. 사실 새로운 것을 굉장히 많이 배워서 이게 복습인지 새로 배우는 것인지 분간이 안 갈 정도였다. 그전에는 조건문과 반복문을 주로 사용했고, 오늘은 조금 더 javascript로 반응형 html을 만든 느낌이었다.
·innerHTML
-html의 요소를 직접 바꿀 수 있는 방법을 배웠다. 사실 그 전부터 버튼을 누르면 화면에 뭐가 뜨거나 , 값을 바꾸는 등의 기능을 할 수 있으면 좋겠다고 생각은 했었는데, 실제로 이렇게 쉽게 바꿀 수 있다니 놀라웠다.
<body>
<h1>예제</h1>
<p id="change">바꿀 문장</p>
<br>
<button type="button" onclick="change()">바꾸기</button>
<script>
function change()
{
document.getElementById("change").innerHTML = "<p>======바뀐 문장======</p>";
}
</script>
</body>바꾸고 싶은 태그의 id를 설정하고, getElementById로 원하는 id의 html태그를 다르게 바꿀 수 있다. 이 방법을 사용하면, 아무런 영역도 차지하지 않는 div나 p, span 등등을 사용해서 새로운 창이 만들어지는 느낌으로도 만들 수 있다.
<body>
<button type="button" onclick="change2()">바꾸기</button>
<p>
<div id="newC">
</div>
</p>
<script>
function change2()
{
document.getElementById("newC").innerHTML = '<div id="newD">새로운 창</div>'
}
</script>
</body>위와 같이 이미 사실 id가 newC인 div가 있지만, 눈에는 보이지 않는 상태인데, 버튼을 누르면 해당 div가 id가 newD인 div로 바뀐다. 위의 상태에서 css를
<style>
#newD{background-color: cadetblue; text-align: center; width: 400px;}
</style>이런식으로 준다면, 변한 div의 id가 newD이기 때문에, css가 적용이 되면서 가시적으로 바뀌게 된다. 페이지를 접하는 입장에서는 아무것도 없던 공간에 새로운 오브젝트가 생긴 느낌을 받게 되는 것이다.
·변수 선언의 다른 방식
-조금 생소하지만 변수를 다음과 같은 방식으로 선언할 수 있다.
<p id="happy"></p>
<script>
var dog = {name : "해피", age : 3};
document.getElementById("happy").innerHTML = "강아지의 이름은 "+dog.name+"이고 나이는 "+dog.age+"살 입니다.";
</script>dog.으로 해당 변수들의 이름을 넣어주면 해당 변수에 접근할 수 있다. 조금 낯설긴 했지만, java에서 인스턴스 변수를 생각하니 쉽게 이해가 되었다. 다만 선언의 방식이 조금 달라서 어색할 뿐이었다.
·그 밖에
-그 밖에 연산자라든지, for, if 등등에 대해 다시 복습했다. 물론, 이미 너무 익숙하고 많이 다뤄본 내용들이라서 빨리빨리 넘어가기도 했다.
·오후의 숫자 맞추기 문제
-오후에는 숫자를 맞추는 html파일을 만들었다. 페이지만 보여주시고 직접 만들라고 하셨다. 그런데 사실 조건이 조금 이상했다. 브라우저가 새로운 페이지를 불러올 때마다, 랜덤값의 숫자를 컴퓨터가 가지고 있어야 하는데 그냥 53으로 고정하고 진행하라고 하셨다. 그래서 그 부분을 random값을 주는 것으로 코드를 진행했다. 그리고 추가적으로 다른 사람들은 꾸미는 것에 신경을 안쓰고 진행했는데, 나는 부트스트랩을 찬찬히 보면서 연습하고 있었기 때문에 부트스트랩의 여러 요소들을 사용해서 더 보기 좋은 숫자 맞추기 문제를 작성해봤다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자 맞추기 게임</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8" style="background-color: lightcyan;">
<h1 align="center">[숫자 맞추기 게임]</h1><br>
<p align="center">
<div class="d-grid gap-2">
<button type="button" class="btn btn-success btn-lg">
추측횟수
<span class="badge bg-danger" id="ss">0</span>
</button>
</div>
</p>
<h4 align="center">이 게임은 컴퓨터가 생성한 숫자를 맞추는 게임입니다. <span class="badge bg-info">랜덤 숫자 범위 1~100</span></h4>
<table>
<tr>
<th>숫자:</th>
<td>
<input type="text" id="user" value="">
<button type="button" class="btn btn-primary" onclick="guess()" >확인</button>
</td>
</tr>
<tr>
<th>추측횟수:</th>
<td>
<input type="text" id="guesses">
<button type="button" class="btn btn-secondary disabled">힌트</button>
<input type="text" id="result">
</td>
</tr>
</table>
</div>
<div class="col-lg-2"></div>
</div>
<script>
var computerNumber = parseInt(Math.floor(Math.random() * 100));
var nGuesses = 0;
function guess()
{
var num = document.getElementById("user").value;
var result = "";
if(num == ""){
alert("숫자를 입력해주세요.");
}else{
nGuesses++;
if(num > computerNumber){
result = "숫자가 큽니다.";
}else if(num < computerNumber){
result = "숫자가 작습니다.";
}else if(num == computerNumber)
{
result = "정답입니다.";
}
}
document.getElementById("guesses").value = nGuesses;
document.getElementById("result").value = result;
document.getElementById("ss").innerHTML = '<span class="badge bg-danger">'+nGuesses+"</span>";
}
</script>
</body>
</html>-사실 더 많은 부분을 꾸미고 싶었지만, 생각보다 마음대로 적용이 안되는 것들이 많아서 좀 더 공부해야겠다는 생각을 했다. 부트스트랩은 아직 너무 복잡한 것 같다. 그래도 이 정도라도 운용할 수 있다는 게 다행인지... 좀 더 열심히 연습해봐야겠다.
·팀 식사
-오늘은 드디어 새로운 팀원들과 점심 식사를 하는 자리를 갖게 되었다. 물론 한 분은 안나오셨고 대답도 없으셨지만, 다른 분들을 다 자리하셨다. 추가적으로 오늘 나오는 다른 팀원 두 분까지 같이 밥을 먹는 자릴 만들었고 굉장히 좋은 시간을 보냈다. 나만 어려운게 아니었고 나만 흥미가 있는게 아니었다. 이렇게 뭔가를 나누니까 더 힘이되고 더 자신감도 생기는 것 같다. 정말 다행이다.
·내일
-내일도 자바스크립트 수업을 진행할 것 같다. javascript도 굉장히 재미있긴 하지만, 뭔가 힘들다... java는 굉장히 재밌었는데, html과는 뭔가 친숙해지지 않는 느낌이다. 그래도 열심히 해야지. 프로젝트에서는 당장 우리가 직접 html을 작성해서 페이지를 구성해야하니까 반드시 필요한 과정이다!! 파이팅!!! 부트스트랩 더 열심히 공부하자!!
