[생활코딩][WEB2] JavaScript

1.  HTML과 JavaScript의 만남

자바스크립트는 기본적으로 HTML위에서 돌아가는 언어이다. 자바스크립트가 HTML위에서 동작하기 위해서는 해당 영역이 자바스크립트 언어라는 것을 표시해주어야 하는데, 이때 사용하는 태그가 <script> 태그이다. 이 태그 안에는 자바스크립트 언어가 들어간다.

이렇게 script태그 안에서는 자바스크립트 문법으로 코드가 작성된 것을 볼 수 있다. 하지만 위와 같은 예시로는 자바스크립트의 차별화된 점을 확인하기 어렵다. 따라서 숫자를 통해 자바스크립트의 차별점을 확인해 보았다.

1+1이라는 단순한 계산이지만 자바스크립트와 HTML의 결정적인 차이를 확인할 수 있다. HTML은 오로지 정적인데 반하여 자바스크립트는 동적인 것이다! 기존의 HTML이 정적인 데이터만을 표현할 수 있었던 것과는 엄청난 차이라고 할 수 있다. 뒤로 가며 실습을 거듭할수록 그 차이는 더 크게 느껴질 것이다.

 

2. 자바스크립트 이벤트

동적인 페이지라는 것은 달리 말해 사용자와 상호작용할 수 있음을 뜻한다. 자바스크립트가 사용자와 상호작용하기 위해서는 이벤트라는 것이 필요하다. 위에서 script태그를 통해 자바스크립트 코드로 동작하는 것외에, HTML 태그의 속성 중 반드시 자바스크립트 코드로 동작하게 하는 것이 있는데 대표적인 예가 onclick이다. 이 속성 값으로는 자바스크립트 코드가 오며, 그에 따라 동작하게 된다. 이렇게 특정 동작을 통해 자바스크립트 코드를 실행하도록 하는 것이 이벤트라고 할 수 있다. (onclick, onchange, onkeydown 등등...)

 

 

 

 

3. 변수

프로그래밍을 배운 사람에게 변수가 갖는 의미는 무궁무진하다. 그래서 그 필요성에 대해서는 언급할 필요도 없다. 다만, 자바스크립트에서 변수를 선언할 때는 앞에 var을 붙여주는 것이 좋은 습관이라고 한다. 대표적인 이유는 전역 변수와 지역변수의 차별화 전략을 쓸 수 있는 것인데, 직접 사용해보기 전까지는 잘 못 느낄 거 같다... 변수명은 서로 모두 다르게 해 주면 되지 않을까 라는 생각 때문이다. 

어쨌든 자바스크립트에서는 변수 앞에 var을 붙여주어 선언한다.

 

4. 제어할 태그 설정

css에 대한 강의를 들으면서 크게 태그 선택자, 클래스 선택자, id선택자가 있다는 것을 알았고, 각각을 어떻게 지정하는지도 알았다.(id는 #, 클래스는.) 자바스크립트를 이용하여 태그를 선택하고 속성 값을 변경시키는 문법이 있다.

위처럼 document.querySelector를 이용하는 것인데, body라는 태그 선택자를 지정할 것이므로 'body'이다. 만약 id값이 있는 태그를 선택하려면 '# ~' , class값이 있는 태그를 선택하려면 '. ~'으로 지정할 수 있다. style속성 값을 변경하기 위해선 위와 같은 형태로 작성해주면 되는데, 주의할 점은 작은따옴표 안에 값을 넣어주어야 한다는 것이다. (따옴표를 안 넣거나, 큰 따옴표면 에러)

 

5. 기본 문법

조건문이 무엇이냐, 반복문이 무엇이냐, 언제 사용하냐 등은 이미 다른 언어에서 익혀왔기 때문에 자바스크립트에서 표현되는 특징 등에 대해서만 간략히 정리하려고 한다.

 

1) 조건문 : 조건문의 종류로 동등 연산자 (==)와 부등 연산자 (!=)가 있고, 일치 연산자(===)와 불일치 연산자(!==)가 있다. 자바를 주로 사용해온 나에게 === 과!==는 굉장히 낯선 표현이었다. 자바스크립트의 경우 동등 연산자와 부등 연산자는 두 피연산자의 자료형이 다를 때, 그것을 일치시켜준 후 비교를 진행해준다. 일치 연산자와 불일치 연산자의 경우 자료형이 다르면 false를, 자료형이 같으면 비교를 진행하여 결과를 알려준다.

 

2) 배열 : 자바스크립트에서는 변수의 구체적인 자료형을 정해서 선언하지 않는다는 특징이 있다. 그냥 var를 통해 변수를 만들어 주고 들어가는 데이터에 따라 그 변수의 자료형이 결정된다. 배열의 경우 var names = ['kim', 'min', 'seob']; 이런 식으로 만들어질 수 있다.

 

3) 출력 : 자바스크립트에서 내용을 출력하는 방법은 alert(), document.write(), console.log()등이 있는데 상황에 따라 맞게 사용한다고 한다. 아직 자바스크립트를 이용한 개발을 해보지 않아서 어떤 게 어떻게 쓰일 때 좋을지는 잘 모르겠다. 다만, document.write()에서 ' '로 둘러싸인 것은 html문법으로 인식한다는 것은 신기했다.

 

4) 반복문 : 여타 언어의 반복문과 크게 다른 점이 없었다.

 

5) 함수 : 자바스크립트에서는 함수를 선언하기 위해 function 키워드를 사용한다. function makeFunction() {}!

매개변수로는 역시 자료형을 정해주지 않고 변수명만 넣어준다.

function sum(left, right){
	document.write(left+right+'<br>');
}

매개변수가 많아지면 각 변수가 어떠한 자료형인지 헷갈릴 거 같은데,,, 아직 안 해봐서 모르겠다. 

(+ 자바스크립트를 사용하던 친구한테 물어보니 매우 헷갈린다고 한다.. 이러한 것을 해결하기 위해 타입 스크립트라는 것이 나왔는데 자바처럼 자료형을 부여하는 것이다. 또한 인터페이스, 상속 등의 자바에 있던 특성들도 사용할 수 있다고 한다. 나중에 꼭 배워봐야겠다.)

 

 

6) 객체 : 객체는 쉽게 말해서 연관된 변수와 함수를 하나로 그룹핑하기 위한 도구라 할 수 있다. 자바스크립트에서 객체는 { } 중괄호를 통해 생성할 수 있다.  예시 코드를 보면 이해가 갈 것이다.

var coworker = {
	"programmer" : "kimminseob",
    	"skill" : "java"
};

이렇게 하면 programmer라는 정보와 skill정보를 가진 coworker라는 객체를 만든 것이다. 각 정보에 접근하는 방법은 coworker.programmer , coworker.skill 이런 식으로 접근할 수 있다. 

변수의 자료형을 정해주지 않고 단지, value값을 따라간다는 순서가 조금 헷갈렸지만 잘 이해하면 자바보다 훨씬 편하게 사용할 수 있을 것 같은 느낌이 들었다. 심지어, 객체에 정보를 추가하고 싶을 때는 , coworker.age = 26; 또는 coworker [hobby] = "sleep"; 이런 식으로 객체 밖에서 새로운 정보를 추가하는 것이 가능했다... 두 번째 방법으로는 key값에 띄어쓰기까지 적용할 수 있다.

 

7) for in : 객체에 있는 정보들은 배열과는 달리 순서대로 정렬되어 있지 않기 때문에,  index로 접근한다기보다는 key 값을 통해 접근한다고 볼 수 있다. 따라서, 객체 안에 있는 정보들을 반복문을 통해 접근하기 위해서는 for... in 방식으로 접근한다.

for (var key in coworker){
	console.log(key,cowoker[key]);
}

이런 식이다. 자바에서 향상된 for문 같은 느낌이다... 신기하다... 

 

자바와 자바스크립트는 많은 차이가 있지만 위의 표에 나와있는 차이만으로도 학습에 매우 혼란을 느꼈다... 겉핥기식으로 공부했다가는 헷갈려서 양쪽을 다 못 사용하게 될까 봐 두려운 마음도 생겼지만 열심히 해서 두 차이점을 완벽히 이해하고 싶다는 욕심도 생겼다. 

 

6. 파일분리

자바스크립트 코드들은. js파일로 따로 빼낼 수 있다. css파일처럼 말이다. css가 href속성을 통해 파일 위치를 지정했다면, 자바스크립트 파일은 src속성 값을 통해 파일 위치를 지정해줄 수 있다. 

 

7. jQuery

자바스크립트의 대표적인 라이브러리를 꼽으라면 당연 가장 먼저 나올 라이브러리 일 것이다. 많은 라이브러리들이 그러하듯 jQuery도 CDN을 통해 적용할 수 있다. CDN을 통해 jQuery를 적용하면 $를 통해 기능들을 사용할 수 있다. 

function linkSetColor(color){
    var alists = document.querySelectorAll('a');
    var i = 0;
    while (i < alists.length) {
        alists[i].style.color = color;
        i++;
    }
}

위와 같은 코드를 jQuery를 이용하여 변경하면

function linkSetColor(color){
 	$('a').css('color',color);
}

이렇게 간단히 표현할 수 있게 된다. 이렇게 jQuery를 이용하면 코드가 간결해질 뿐만 아니라 어떠한 동작을 의미하는지 훨씬 직관적으로 이해할 수 있게 만들어 준다. 라이브러리는 이처럼 우리가 하고 싶은 작업의 함수가 미리 만들어져 있는 것이다. 우리는 그들이 만든 form대로 사용만 하면 되는 것이다.