오늘은 아두이노를 포스팅 하려다가 주말이고 해서 이번주에 배운 기초 코딩 문법으로 다른 언어를 습득에 대해서 이야기를 하려고 합니다. C언어의 기초 문법만으로도 다른 언어를 어느정도 기초 독학이 가능합니다. 그 예로 자바계열인 자바스크립트를 소개하도록 하겠습니다. 소개한 목적은 나중에 Steem API를 연동해서 Steem 블록체인 정보를 개인적으로 활용해 볼 수 있기 때문에 간단히 기초만 소개 합니다.
[기본 HTML]
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
위의 코딩은 html 기본 구조입니다. 여기서 코딩하는 위치는 stript 태그 사이에 자바스크립트 언어로 코딩할 예정입니다.
[결과]
여기에서 자바스크립트 문법은
document.getElementById("demo").innerHTML = "Hello World!"
HTML 문서에 id "demo"의 위치를 가리키게 되는데 nnerHTML는 값을 가져오거나 설정할 수 있다. 해당 id를 가진 태그를 가리키고 거기에다 "Hello World!"를 저장한다고 생각하시면 됩니다.
<p id="demo> 저장위치 </p>
이런식으로 그냥 이해해 버리세요. 원래는 p태그 사이에 "Hello World"로 설정하는건데 쉽게 의미적으로 저 문장으로 자바스크립트에서 문자열을 html로 출력시킬 수 있구나 정도로 이해하시면 될 듯 싶네요.
document.getElementById("demo").innerHTML
이부분은 통째로 암기해놓고 계속 여기에다 출력할꺼에요. 자중에 관심있으신 분들은 정독으로 태그 관련 접근과 id 접근, 클래스 접근하는 방법을 따로 공부하셔야 합니다.
<p id="demo"></p>
아무튼, id가 "demo"인 p태그 사이에 "Hellow World"가 출력시키는 문장을 이해하셨으면 넘어 가겠습니다.
참고 : 아두이노 코딩 변수(아두이노)
[ C언어 ]
int a = 10;
char b = 'a';
int c[6] ={1,2,3,4,5,6};
char d[6] = "hello";
[자바스크립트]
var a = 10;
var b = 'a';
var c = {1,2,3,4,5,6};
var d = "hello";
C언어에서는 자료형을 선언해 줘야 했지만. 자바스크립트는 var로 통일 됩니다. 알아서 값에 대해 잡아주니깐 더 쉽죠. var의 단점은 var로 선언한 변수가 재선언 되어도 에러가 발생하지 않습니다. 그래서 지역범위 변수인 let 형을 사용하기는 하지만 처음에는 간단한 표현 var로 편하게 사용하세요.
let a =10;
const b = 10;
let 의 범위 안에서 a변수는 재선언 불가능하기 때문에 변수 선언에 대한 에러를 줄일 수 있습니다. const 형은 상수형의 의미러 상수변수라고 생각하시면 됩니다.
예제)
<p id="demo"></p>
<script>
var a ="hello World!";
document.getElementById("demo").innerHTML =a;
</script>
[결과]
var obj = {Name:"codingman", Age:"10", Address:"한국"};
변수를 위와 같은 객체 형식으로 저장할 수 있습니다. 이걸 배열로 저장하면 배열객체가 되겠죠. 제각각인 개별 요소들을 하나의 하나의 큰 묶음으로 묶어서 변수화 할 수 있는데 이걸 객체변수라고 합니다. 객체명으로 각 요소들을 쉽게 삽입, 삭제, 갱신을 할 수 있기 때문에 효율적인 코딩을 할 수 있습니다.
접근 obj.Name => "codingman"
접근자 콤마(.)로 각 요소를 쉽게 접근 할 수 있죠. 나중에 Steem API를 통해 Steem 블록체인 정보를 가져올 때 Json 형태로 만들어 놓고 접근자를 통해 쉽게 특정 데이터를 접근 할 수 있습니다. 그러니 표현하는 것을 잘 기억해 주세요.
예제)
<p id="demo"></p>
<script>
var obj = {Name:"codingman", Age:"10", Address:"한국"};
document.getElementById("demo").innerHTML = obj.Name;
</script>
[결과]
[C언어]
int A = 10;
int B = 2;
int addAB = 0;
addAB = A + B;
[자바스크립트]
var a =10;
var b = 2;
var addAB = a+b;
기본 차이가 없죠. 확실히 자바스크립트가 변수 선언이 편하죠.
예제)
<p id="demo"></p>
<script>
var a =10;
var b = 20;
var addAB = a+b;
document.getElementById("demo").innerHTML =a+'+'+b+'='+addAB;
</script>
여기서, 문자열을 합치는 기호는 '+' 입니다.
예) "hello" + "World"
var a= "hello";
var b = World";
var c = a+b;
결과 c => "helloWorld" 됩니다.
var c = a+' '+b;
결과 c =>"hello World" 됩니다.
문자열변수들 사이에 따로 문자나 공백을 넣을 수 있습니다. a,b사이에 '+'문자를 넣고 결과 '='문자를 넣어서 출력을
"10+20=30"의 값이 출력되는데 아래 결과 보시면 되겠습니다.
[결과]
참고 : 아두이노 코딩 IF문(아두이노)
[C언어]
int a = 10;
int b = 5;
if(a>b) {
참문장;
}
else {
거짓문장;
}
[자바스크립트]
var a = 10;
var b = 5;
if(a>b) {
참문장;
}
else {
거짓문장;
}
if문은 동일합니다. 조건식이 참이면 참문장이 수행되고 거짓이면 거짓문장이 수행됩니다. 따로 공부할 필요가 없겠죠.
예제)
var a = 10;
var b = 5;
if(a>b) {
document.getElementById("demo").innerHTML = "a가 보다 크다";
}
else {
document.getElementById("demo").innerHTML = "a가 b보다 크지 않다.";
}
[결과]
[C언어]
int sum=0;
for(int i=0;i<=10;i++){
sum=sum+i;
}
[자바스크립트]
var sum=0;
for(var i=0;i<=10;i++){
sum = sum + i;
}
변수 선언 부분만 var로 변경하고 나머지 동일 합니다. for문의 여러가지 표현이 있는데 초보분들은 이거 하나만 아셔도 됩니다.
예제) 0부터 10까지의 합을 구하시오.
<p id="demo"></p>
<script>
var sum=0;
for(var i=0;i<=10;i++){
sum = sum + i;
}
document.getElementById("demo").innerHTML = sum;
</script>
[결과]
[C언어]
while(조건식){
실행문;
}
[자바스크립트]
while(조건식){
실행문;
}
동일합니다. 조건식이 거짓이 될때까지 계속 실행문이 반복 수행합니다. 따로 공부할 것이 없겠죠.
예제) 1부터 10까지의 합을 구하시오.(불가피하게 For문 예제 활용)
<p id="demo"></p>
<script>
var input_val = 10;
var sum=0;
while(input_val>0){
sum=sum+input_val;
input_val--;
}
document.getElementById("demo").innerHTML = sum;
</script>
while문의 조건식 0보다 큰지를 비교하면서 반복하다가 0이 되면 빠져 나옵니다.
[결과]
[C언어]
switch(ch) {
case 1:
수행문1 ;
break;
case 2:
명령문 2;
break;
default:
불일치 명령문;
}
[자바스크립트]
switch(ch) {
case 1:
수행문1 ;
break;
case 2:
명령문 2;
break;
default:
불일치 명령문;
}
switch 문의 경우도 동일하게 사용합니다. 사실 모든 C언어에서 사용된 문법이 동일하게 적용됩니다. 변수 선언만 차이가 있을 뿐이죠. 그래서 C언어를 공부하시면 다른 언어를 어느정도 독학이 가능합니다. 단지 해당 언어에서 사용하는 일부 함수들을 찾아내는게 혼자서 독할 하실 때 어려운 점이고요. 기본 베이스는 어떤 언어라도 다 동일합니다.
예제)
<p id="demo"></p>
<script>
var ch = 'y';
switch(ch){
case 'y':
document.getElementById("demo").innerHTML = "Input : Y";
break;
case 'n':
document.getElementById("demo").innerHTML = "Input : N";
break;
default:
document.getElementById("demo").innerHTML = "잘못입력함";
}
</script>
간단히 id가 "demo"인 위치에 해당 문자열을 출력하는 예제입니다.
[결과]
[C언어]
void 함수명(인자){
명령문;
}
자료형 함수명(인자, 인자){
명령문;
}
int add(int a, int b){
return a+b;
}
자료형 char, int, float 등등을 말함. 반환값의 자료형인거 안 까먹으셨죠. void 반환되는 자료형이 없을 때 붙여주는 것이고요.
[자바스크립트]
function addAB(a, b) {
return a + b;
}
자료형은 안붙지만 앞에 function이라는 함수명을 써주고 인자의 경우는 따로 자료형을 지정할 필요가 없습니다. 그렇게 까지 차이점은 없네요.
예제)
<p id="demo"></p>
<script>
function addAB(a, b) {
return a + b;
}
document.getElementById("demo").innerHTML = addAB(10,2);
</script>
덧셈 함수를 사용자 정의 함수로 만들어 넣고 두 수를 더한 값 반환해주는 함수입니다. 그결과는 id가 "demo"인 p 태그로 출력됩니다.
[결과]
오늘은 C언어를 공부하면 다른 언어를 얼마나 쉽게 독학이 되는지를 자바스크립트의 기초 문법을 통해 살펴보았습니다. 이렇게 C언어를 공부하시고 나면 자바스크립트의 변수 선언부분과 사용자 정의 함수 표현이 바뀐 부분만 체크해주시기만 하면 나머지는 모두 동일하니깐 어렵지 않게 배울 수 있게 됩니다. for문에서 재밌는 for문 표현들이 있는데 그 부분은 거론 하지 않았지만 꼭 찾아보세요.
그리고, 자바스크립트에 사용되는 일부 함수들을 알아야 합니다. 위 소개한 것은 기초 문법이고 실제 사용하기 위해서는 사용되는 함수들을 알아야 제대로 활용 할 수 있습니다.
W3Schools.com => https://www.w3schools.com/js/default.asp
이곳에 가셔서 자바스크립트 튜토리얼을 필독을 해주세요. 충분히 하실 수 있을 꺼에요.
아두이노를 주말에 진행하려다가 간단히 어제 마무리로 쓴 글이 생각나서 자바스크립트로 포스트하게 되었네요.
이상 오늘 포스팅을 마무리 합니다.