·전역변수 지역변수
-전역변수와 지역변수는 이미 다뤄본 적 있고, 익숙한 내용이지만 java와는 다른 자바스크립트만의 룰이 있었다. 자바 스크립트에선 굳이 변수를 선언할 때 var를 쓰지 않아도 되지만, 지역변수의 영역에서 전역변수를 선언할 때, var을 쓰지 않으면 전역변수로 선언된다.
<body>
<script>
function ss()
{
num = 10;
document.write("num의 값은 "+num+"입니다. <br>");
}
ss();
document.write("num의 값은 "+num+"입니다.");
</script>
</body>만약 다음과 같은 ss()함수가 있다면, 원래 함수 내에서 선언된 num 변수는 함수의 종료와 함께 없어져야한다. 그래서 밑에 ss함수를 호출하고 나서 다시 num을 출력하면 출력이 되지 않아야 정상이다. 그러나 var num으로 선언한 것이 아니라 그냥 num으로 선언했기 때문에, 전역변수화 되어 그 값이 사라지지 않고 남는다.
-java에서 썼던 this.처럼 쓸 수 있는 전역변수를 지칭하는 window.을 배웠다.
<body>
<script>
var num = 10;
function ss()
{
var num = 20;
document.write("지역 변수 num : "+num+"<br>");
document.write("전역 변수 num : "+window.num);
}
ss();
</script>
</body>·자바 스크립트에서 매개변수
-자바 스크립트는 java와 다르게 메소드 오버로딩이 불가능하다. 대신, 만약 정의된 파라미터보다 더 많은 양의 파라미터를 보내도, 더 적은 양을 보내도 정상 작동한다. 적게 보내면 뒤의 부분들은 다 undefined처리하고, 더 많이 보내면 그냥 뒤의 것들은 무시한다.
function addNum(x,y,z)
{
return x+y+z;
}
document.write("addNum(1,2,3) : "+addNum(1,2,3)+"<br>");
document.write("addNum(1,2) : "+addNum(1,2)+"<br>");
document.write("addNum(1) : "+addNum(1)+"<br>");
document.write("addNum() : "+addNum());위의 결과는 처음꺼만 6이 찍히고, 나머지는 다 NaN이 찍힌다. 그래서 이런 부분을 자바 스크립트는 따로 예외처리를 직접 작성해서 해줘야 한다.
function addNum2(x,y,z)
{
if(x === undefined)
{
x = 0;
}
if(y === undefined)
{
y = 0;
}
if(z === undefined)
{
z = 0;
}
return x+y+z;
}위처럼 addNum()을 addNum2()처럼 바꾸면 undefined라는 값을 가진 변수에 0을 대입해서 어떻게든 결과가 나오게 바꿔준다.
-Arguments를 사용해서 보낸 인수의 수와 상관없이 보낸 만큼의 매개변수를 받을 수 있는 가변인자 메소드를 정의하여 사용할 수 있다.
function addNum3()
{
var sum = 0;
for(var i = 0; i<arguments.length;i++)
{
sum += arguments[i];
}
return sum;
}-그러나 여기서 한 가지 주의할 점이 있다. arguments 가변인자는 유사배열이지 배열이 아니란 것이다. 즉, 크기와 값이 있지만 일반 배열처럼 사용할 수는 없다. 그래서 배열처럼 사용하려면 어떻게 해야하는지 나중에 따로 찾아보니, 요즘에는 spread라는 기능을 사용한다고 한다. ...을 앞에 붙이면 사용할 수 있다.
function addNum4(...args)
{
sum = 0;
//console.log(args);
for(let i = 0; i<args.length;i++)
{
sum += args[i];
}
document.write(args+"<br>");
return sum;
}
document.write(addNum4(1,2,3,4,5,6,7,8,9,10));중간에 for문이 끝나고 한번 배열 args를 출력하는 부분이 있다. 해당 부분을 보면 알 수 있듯이, 위의 args는 배열이다. 인덱스 순서도 연속되는 배열이므로 배열의 기능을 전부 사용할 수 있다.
·문자열을 사용하는 여러 메소드
-substring, substr, slice, charAt, indexOf 등 여러 문자열 관련 메소드를 배웠다.
-사실 substring은 자주 써봤기 때문에 익숙했고, substr은 괄호 뒤에 첫 숫자는 인덱스 숫자로 똑같지만 그 다음 숫자는 시작 인덱스부터 몇번째까지인지를 표시하는 것이라는 것을 배웠을 때 그냥 그렇구나 싶었다. charAt은 굳이 언급하지 않아도 그냥 읽어만 봐도 무엇을 리턴할지 알 것 같았다. indexOf는 찾으려고 하는 값이 없을 때 -1을 리턴한다는 것과, (찾으려는 값, 찾기 시작하는 인덱스)의 구조를 아니 쉽게 사용할 수 있었다.
-그러나 slice를 접하고 나서는 굳이 왜 substring이랑 똑같은 애를 또 만들어놨지? 싶었다. 게다가 인덱스의 값이 -1이 된다는 것도 뭔가 이상했다. 그러나 이건 나중에 계산기를 만들 때 확실하게 깨달았다. 아! 이래서 slice가 존재했구나라는 것을! 그건 조금 아래쪽에 서술하겠다.
·배열 관련 메소드
-배열 관련 메소드는 java의 ArrayList의 기능과 비슷했다.
- push(): 가장 끝에 값을 넣음-배열의 길이가 1 늘어남.
- pop(): 가장 끝에 있는 배열을 하나 없앰, 배열의 길이가 1 줄어듬, 이 때, 없앤 값을 리턴받을 수 있음.
- shift():배열의 앞쪽에 있는 값을 제거, 배열의 길이가 1 줄어듬
- unshift():배열의 앞쪽에 값을 추가, 하나 이상의 값을 ,로 구분하여 추가할 수 있음. 추가한 만큼 배열의 길이가 늘어남.
·계산기 만들기
-계산기 만들기는 마지막 교시에 과제처럼 주셨다. 전에도 만들어봤기 때문에, 전과 똑같이 하는 것은 뭔가 심심했다. 그래서 전보다 추가적인 기능을 하나 넣고, 좀 더 꾸며보자고 생각했다. 1. d라는 키를 만들어서, 해당 키는 delete의 역할을 할 수 있게 하자!->clear와는 다르다, 내가 입력한 값 하나만 없애는 것이다. 2.부트 스트랩의 기능을 활용해서 버튼의 색상을 좀 더 꾸며보자!
<!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>
<style>
input{text-align: right; border: none;}
input:focus{outline: none;}
tr, td{text-align: center;}
</style>
</head>
<body>
<div align="center">
<h1>계산기 만들기</h1>
<h6>아이폰 계산기를 참고</h4>
<h6>입력값을 삭제하는 del버튼 추가 | 부트스트랩의 기능 활용</h5>
</div>
<table border="2" align="center">
<tr style="border-bottom: 2px solid black;">
<td colspan="4">
<span class="badge bg-secondary">
입력값:
</span>
<input type="text" id="inputN">
</td>
</tr>
<tr>
<td colspan="4">
<span class="badge bg-secondary">
결과창:
</span>
<input type="text" id="displayR">
</td>
</tr>
<tr>
<td colspan="3">
<div class="d-grid gap-2">
<button class="btn btn-danger" onclick="reset();">Clear</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-warning" onclick="addN('/');">/</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('7');">7</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('8');">8</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('9');">9</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-warning" onclick="addN('*');">x</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('4');">4</button>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('5');">5</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('6');">6</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-warning" onclick="addN('-');">-</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('1');">1</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('2');">2</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('3');">3</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-warning" onclick="addN('+');">+</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="addN('0');">0</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-secondary" onclick="del();">d</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-success" onclick="addN('.');"> .</button>
</div>
</td>
<td>
<div class="d-grid gap-2">
<button class="btn btn-warning" onclick="calculate()">=</button>
</div>
</td>
</tr>
</table>
<script>
function addN(inN)
{
var inputN = document.getElementById("inputN");
inputN.value += inN;
}
function calculate()
{
var inputN = document.getElementById("inputN");
var result = eval(inputN.value);
document.getElementById("displayR").value = result;
clearInput();
}
function reset()
{
clearInput();
document.getElementById("displayR").value = "";
}
function clearInput()
{
document.getElementById("inputN").value = "";
}
function del()
{
var inputN = document.getElementById("inputN");
inputN.value = inputN.value.slice(0,-1);
}
</script>
</body>
</html>- 그리고 이런 계산기를 완성했다. eval()함수는 안에 있는 값들을 계산해준다는 것을 알면, 나머지는 쉽다. 여기서 중점적으로 봐야할 것은 바로 del()함수이다. del함수는 마지막에 입력된 값을 제외하고 다시 input 박스의 value에 넣어줘야 하는데, 얼마나 입력되었는지 끝인덱스를 특정할 수 없다. 그래서? substring으로 사용하면 입력한 값의 수가 바뀔 때마다 다르게 해줘야 한다. 그러나 slice는 0번째 인덱스부터 마지막 인덱스를 제외한 -1인덱스까지의 값을 다시 value에 넣어주면 되는 것이니, slice(0,-1)로 처리하면 얼마나 값을 주든 쉽게 해결할 수 있다. 이 함수를 만들면서, 아! 이래서 substring이랑 slice가 둘 다 존재하는구나~를 알 수 있었다.
·편한가? 불편하다!
-지역변수와 전역변수에 대한 구분도, 배열에 대한 부분도 너무 java에 비해 엄격하지 않아서 이게 되나? 싶은 부분들이 많은 것 같다. 철저하지 않는 느낌이라 오히려 불편함이 느껴지는 부분이 있다. 그래도 javascript까지는 개발자의 영역이라고 생각하고, 또 html과 css도 어느정도의 부분은 개발자가 다뤄야하는 부분이기 때문에 게을리 연습하지 않으려 한다. 물론 틈틈히 java의 문법도 좀 공부를 해야겠다. 점점 javascript에 익숙해서 원래의 것을 잊어버릴까 무섭다.
