콘텐츠로 건너뛰기

고인물 C++개발자가 자바스크립트(JavaScript) 입문을 위한 기본

변수 타입 구분이 없다, 변수명이 틀려도 NO 에러!
Java Script의 Syntax는 파이썬 만큼 추상적이진 않은 듯,
프로토 개발에 QT가 빠를까 Java Script가 빠를까? 여튼, 낫 베드,

[잉여타임즈] 똥자바, C++, 성룡의 나쁜말, 흙형들...
[잉여타임즈] 똥자바, C++, 성룡의 나쁜말, 흙형들…

필자는 C++에 익숙한 개발자이다. 틈틈이 C, JAVA, C#를 접해보긴 했지만, C++에 가장 많은 시간을 할애했다.

근래에 지인의 요청에, 무엇에 특화된 계산기를 작성해야 할 일이 있었는데, 어떤 언어로 쉽게 빠르게 개발이 가능 할까를 고민하다 JavaScript로 선택하게 됐고, C++에 익숙한 사람 입장에서 Java Script를 시작할 때 기본으로 알아야 할 사항에 대해 정리하고자 한다.


1. JavaScript 기본 코드단락은 어떻게 될까?

컴파일이 필요한 C++과는 다르게, Java Script는 인터프리터 언어이다. 다시 말해서, 컴파일 없이 Script가 실행되는 언어이다.

크게 코드 파트는 UI를 담당하는 HTML의 <body></body>영역, 그리고 <head></head>영역에 Java Script가 들어가게 된다. Java Script가 로직 영역이 되겠다.

간단하게 HTML 한 페이지에 Java Script 앱을 작성하게 된다면, 구조는 아래와 같다. 

<html>
<head>

<script type="text/javascript">
    // logic : javascript area
</script>

<body>

<!-- UI : body area -->
<table border="1" >
	<thead>
    <th>
      <td>menu</td>
    </th>
	</thead>
	<tbody>
			<tr>				
				<td>value</td>
			</tr>			
	</tbody>
</table>

</body>
</html>


2. Java Script기본 문법은 어떻게 될까?

코드를 작성할 위치는 <head> </head>사이에 <script type=”text/javascript” …. 로 시작해, </sciprt>의 사이 영역이 되겠다.


주석은 어떻게 넣을까?

C++과 동일하다. 싱글라인 은 //로 시작하고 멀티 블럭은 /* */로 감싸면 된다.

<script type="text/javascript">
  // it is sigle line comment
  /*
    here is multi block comment 
  */  
</script>


함수 어떻게 만들고 변수타입은 무엇이 있을까? 로그는?

함수는 function으로 시작하고 함수 Parameter는 타입이 없고, 이름만 넣는다. 

function func_plus_both(number1, number2)
{
  return number1 + number2;
}

function func_do_something()
{
  let number3 = func_plus_both(1, 2);

  // below can be seen on chrome developer mode, Ctrl + Shit + I
  console.log('number3: ' + number3 );

  // below will show modalless popup window ? but, disable for this example, try it, if you have time
  // alert('number3: ' + number3)
}

변수 타입은 적어도 그만 안 적어도 그만이다. 타입을 선언하지 않는다 해서 웹브라우저로 실행할 때 크롬이 죽거나 그러진 않는다. 다만 내가 원하는 동작이 일어나지 않을 뿐이다.

그래도 var, let, const 3가지의 변수 타입이 있긴 한듯하다.
const는 C++의 const 와 유사하게 한번 선언하면 변경 불가 한 타입인 듯 한다. var와 let의 차이는 아직 찾아보지 못했고, let이 인기가 좋다 어디서 본 듯 하니, 일다 let을 쓰도록 한다.

  • var
  • let
  • const


로그는 위 예제에서 보듯, console.log()나 alert()로 출력 가능하다.
크롬의 개발자 모드(Ctrl + Shit + I) console 창에서 console.log() 내용을 볼 수 있다. alert()는 팝업창이 뜬다.


얼핏 예전에 보기로는 Java Script는 변수 타입 개념이 자세하게 없어서 디버깅에 어려움이 있다 본 듯 한다. 그래서 Type Script의 대안이 있고, Type Script로 코드의 신뢰성 검증을 하고 Java Script로 export하는 개념이라 본 듯 하다. 관심이 있으면 찾아보길 바란다.

[잉여타임즈] 유튜브 – 노마드 코더 Nomad Coders – 내가 자바스크립트를 쓰지 않는 이유?


배열은 어떻게 선언하고, 루프는 어떻게 돌릴까?

문론, function안에서 배열을 선언해 사용 할 수 도 있지만, 어떤 함수에서도 접근 가능한 배열은 C++의 전역변수와 비슷한 개념으로 배열을 선언해 사용 가능하다. 

var arrSomething = [
  {
    val1: "50000",
    val2: "4500"
  },
  {
    val1: "60000",
    val2: "5000"
  }
]

function func_print_something()
{
  for(int i = 0; i < arrSomething.length; i++)
  {
    console.log('arr, ' + i + ': ' + arrSomething[0].val1);
  }  
}

C++에 익숙한 입장에서는, 구조체나 클래스를 선언하지 않고, 자료형과 배열을 한번에 선언 가능하니 편한 것 같기도 하다.


3. UI와 로직은 어떻게 바인딩 할까?

앞서 설명 했듯이, 한 HTML 페이지 안에서 UI는 <body></body> 영역, 그리고 로직은 <head></head>의 Java Script가 되겠다.


텍스트 입력(input)은 어떻게 받을까?

텍스트 입력을 받는 input을 예로 들겠다. Java Script에서 Component instance를 얻을 수 있는 매개를 id로 선언한다. 그리고 Java Script에서 텍스트 입력 변화를 감지 할 수 있는 Callback 함수는 oninput으로 선언한다.

<html>
<head>

<script type="text/javascript">

funtion oninput_something()
{
  let something = document.getElementById('id_somehting').value;
	console.log('something: ' + something );
}
</script>

</head>
<body>

<input type="number" id="id_somehting" oninput="oninput_something()" />

</body>
</html>


텍스트를 입력(input)받아 계산 값을 텍스트 박스에 업데이트 해볼까?

intput으로 텍스를 입력받아, span으로 선언한 필드에 입력된 값 +1을 해서 업데이트 하는 내용이다.

입력된 값이 숫자인지를 체크하기 위해 isNaN를 써서 필터링 하고, 값을 더할 때 parseInt를 사용해 숫자로 변환후 1을 더한다.

<html>
<head>

<script type="text/javascript">

function is_valid_number(val)
{
	return !isNaN(parseFloat(val));
}

funtion oninput_something()
{
  let something = document.getElementById('id_somehting').value;
	console.log('something: ' + something );
  
  let result = document.getElementsByClassName("id_span_cal_result")[0];
  if(is_valid_number(something ) == true)
  {    
    result.innerText = parseInt(something ) + 1;
  }
  else 
  {
    result.innerText = "please input number only! man!";
  }
}

</script>

</head>
<body>

<input type="number" id="id_somehting" oninput="oninput_something()" />
<span class="id_span_cal_result"></span>

</body>
</html>

누구를 위한 부가적인 누더기 코드인지는 모르겠지만, 타입이 없으니 변수 타입이 명확한 언어 대비 체크가 더 필요한 듯 싶다. parseInt()는 Java Script가 개발된 이후에 Needs에 의해 추가된 API가 아닐까 생각해 본다.


4. 유틸리티 함수 챙겨가세요?

여튼, 지인의 부탁으로 Java Script 코드를 작성하면서, 생긴 유틸리티 함수 공유한다. 뭐 드릴 건 없고 필요하면, 챙겨 가세요?

function is_valid_number(val)
{
	return !isNaN(parseFloat(val));
}

function toNumberComma(val)
{
  return val.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}


체크박스(checkbox) 관련 구현이 필요하면 아래도 챙겨가길 바란다.

<script type="text/javascript">
function isChecked(id_)
{
	return document.getElementById(id_).checked;
}

function setChecked(id_, checked_)
{
	document.getElementById(id_).checked = checked_;
}

function onclick_check_something()
{
  /*
  if(isChecked("id_check_something") == true)
  {
  }
  */
  // setChecked("id_check_something", false);
}
</script>

...
<input type="checkbox" id="id_check_something" onclick="onclick_check_something()" checked="checked" >


    [잉여타임즈] surplstimes@gmail.com