·금요일 오늘 하루
-아무래도 시간이 얼마 안 남은 관계로 빠른 진행을 위해서 자바 스크립트의 진도에 박차를 가했다. 그리고 이미 알고 있거나 java에서도 많이 사용해본 내용들은 실습없이 빠르게 지나갔다. 조건문이나 반복문 같은 것들은 이미 충분히 진행을 해봤기 때문에 기초적인 실습을 할 필요는 없었으니 빠르게 지나갔지만, 이미 배운 내용이라도 배열은 조금 다르기 때문에 배열은 좀 살펴봤다.
· 구구단 표
-구구단 표를 반복문을 사용해 만드는 문제를 진행했다. 사실 문제를 보기 전까지는 javascript 부분에 html 태그를 사용하는 방법이 있다는 것을 거의 잊고 있다가, 구구단 표를 보자마자 반복문 안에 반복문을 넣어서 표를 그린 것을 해봤다는 것이 생각이 났고 꽤나 빠르게 진행할 수 있었다.
<!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>Document</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>
<!--border 2-->
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<h1><span class="badge bg-primary">구구단표</span></h1>
</div>
</div>
<script>
document.write('<table border="2" style="font-weight: bold; background-color: lightblue; font-size: 20px;" width="50%">');
for(i=1;i<10;i++)
{
document.write("<tr align='center'>");
for(j=1;j<10;j++)
{
document.write("<td>"+(j*i));
document.write("</td>")
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>-그래도 그냥 진행하면 너무 밋밋하니 부트스트랩의 badge 기능까지 사용해봤다.
·자바 스크립트의 배열
-자바 스크립트의 배열은 뭔가 이상한 부분이 많다. 그 전에는 이상하다 느끼지 못했는데, 자바를 배우고 나니까 정말 너무 이상하다. 애초에 자바 스크립트의 변수는 타입을 정하지 않고 선언된다. 그래서 배열도 아무거나 막 넣을 수 있다. 공식적인 수업에는 배우지 않았지만, 혼자서 공부했던 java의 ArrayList와 차라리 더 비슷한 느낌이었다.
-자바 스크립트의 배열 선언
var arrList = [1,true,"java script"];
var arrObj = Array(1,true,"Java Script");
var arrNewObj = new Array(1,true,"JaVa Script");자바 스크립트의 배열은 위와 같은 방식으로 선언할 수 있다. 타입과 상관없이 넣을 수 있다는 것만 다르지 ArrayList와 비슷하다고 생각했었다. 그런데 delete를 해보니 확연한 차이가 있었다. java의 arrayList는 중간에 위치한 인덱스를 삭제할 경우 뒤의 인덱스가 앞으로 오면서 실제 배열의 길이가 달라진다. 만약 0부터 4까지의 인덱스를 가진 size가 5인 arrayList에서 하나를 삭제했다면, size는 4가 된다. 그러나 자바 스크립트의 배열은 다르다. 자바 스크립트의 배열은 마음대로 크기를 늘릴 수는 있지만, 다시 줄어들게 할 수는 없다. 즉, 중간의 값을 삭제해도 크기는 다시 줄어들지 않는 것!
-자바 스크립트 배열에 값 넣기
arr.push("script");
arr[arr.length] = 100;
arr[10] ="자바스크립트";위와 같은 방법으로 배열에 값을 넣을 수 있다. 기본적으로 push 메소드는 끝쪽에 붙여서 넣어주는 것이고, arr.length는 배열의 시작은 0부터지만 크기는 1부터 시작한다는 점을 이용해서 인덱스보다 하나 많은 부분에 새로 넣어준다는 뜻이다. 즉, 지금 크기의 배열에 끝에 하나를 추가한다는 것! 마지막 세번째 방법은 원래도 잘 썼던 것이여서 크게 이해가 안될 것이 없다.
·인덱스가 숫자가 아니다??
-특이하게도 자바 스크립트에는 연관배열이라고 하는 배열을 만들 수 있다. 연관배열은 배열의 인덱스 값 자체를 숫자가 아닌 문자 혹은 문자열로 바꿔서 사용할 수 있는 배열이다.
var fruits = new Array();
fruits['a'] = "사과";
fruits['b'] = "포도";
fruits['c'] = "오렌지";
document.write(fruits['a']+"<br>");
document.write(fruits['b']+"<br>");
document.write(fruits['c']+"<br>");
document.write("fruits.length: "+fruits.length+", fruits[0] : "+fruits[0]);-위처럼 배열의 1번 인덱스가 아닌, 'a'인덱스에 값을 넣을 수 있다. 그렇다면, 위의 배열의 길이를 출력하면? 연관배열은 배열의 값들이 순서대로 있는 것이 아니다. 따라서 .length가 있을 수 없고, 0의 값을 리턴하게 된다. 또한 정의되어 있지 않은 fruits[0]을 출력하면 undefined의 값을 얻게 된다.
·form형식을 연관배열처럼?
<form name="myForm">
필드1<input type="text" name="a0"><br/>
필드2<input type="text" name="a1"><br/>
필드3<input type="text" name="a2"><br/>
<button type="button" value="초기화" onclick="init();">확인</button>
</form>-위와 같은 input 박스에 버튼을 누르면 순서대로 숫자가 써지는 페이지를 반복문을 통해 만들어보았다. 사실 처음엔 도대체 어떻게 만드는지 몰라서 엄청 애썼는데, 이건 알지 못하면 만들 수 없는 수준이었다... id라도 넣었으면 몰랐을까, name만 가진 전제조건이 있었기에 혼자서는 해내지 못했다. 결론은, form의 name태그를 배열명으로, 그 form 안에 있는 input 태그의 name을 연관배열의 인덱스 값으로 생각해서 진행하면 되는 것이었다.
<script>
function init()
{
for(var i=0;i<3;i++)
{
document.myForm["a"+i].value = i;
}
}
</script>-이렇게 이용할 수 있다면 정말 편리한 연관배열인 것 같다. 물론 이렇게 하드코딩해서 숫자를 input박스에 넣을 일이 있을까 싶기는 하다.
·자바를 보고 자바스크립트
-자바 스크립트를 하고 자바를 접했을 때, 변수의 타입을 정해주는 것부터 너무 까다롭다는 생각을 했다. 그런데 자바 언어를 조금 배우고나서 스크립트 언어를 배우니 너무 너그러운 느낌이고 나쁘게 말하면 조금 제멋대로인 느낌이다. 배열도 그렇고 변수 선언도 그렇고 여러 부분에서 너무 너그러워서 당황스럽다. 물론 하자마자 결과를 확실하게 가시적으로 얻을 수 있는 html css javascript도 좋지만, 뭔가 자바가 더 재밌긴 한 것 같다. 다행히도 html과 css 등의 전체적인 부분은 디자이너의 영역이고 나는 그 html을 이용해서 기능을 만드는 개발자의 길을 가는 것이기 때문에 정말 다행이라고 느끼고 있다. 오늘은 드디어 대망의 금요일이다. 그러나 내일 또 시험을 보러 가야하니까 빨리 운동을 하고 잠을 자야지. 이번주도 수고했다. 앞으로도 파이팅!!!
