[SW 코딩 훈련] 핵심 JavaScript 기초 01. 자바스크립트 시작하기

자바스크립트

이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어다. HTML과 CSS와 더불어 JS를 함께 사용함으로써 웹사이트에 동적 효과를 줄 수 있다. HTML이 내용, CSS가 디자인이면 JS는 동작을 담당한다. 이 세 가지가 모여서 하나의 웹사이트를 이룬다. 자바스크립트의 웹브라우저에서의 렌더링뿐만 아니라 여러 기능을 통해 IoT / 하이브리드 앱 / 서버 개발과 같은 다양한 분야에서 쓰인다.

하이브리드 앱 : 서로 다른 운영체제인 Android / ios 에서 모두 사용 가능한 앱.

자바스크립트의 변수

변수는 기본적으로 데이터를 담는 공간이다.

자바스크립트에서는 var 키워드로 변수를 선언한다. 변수 선언은 데이터를 담을 공간을 생성하는 것이고, 변수 초기화는 생성된 변수에 데이터를 전달하는 것이다.

이미 있는 데이터를 바꿀 수도 있다. 변수는 이미 선언되었으므로 데이터를 변경할 때 var를 다시 작성할 필요가 없다.

변수 안의 데이터를 확인할 때는 console.log(변수명); 명령어를 사용한다. 그리고 변수의 데이터를 웹 화면에 출력하기 위해서는 document.wrtie(변수명); 명령어를 사용하면 된다.

변수를 생성할 때, 변수명은 숫자로 시작할 수 없다. 최대한 자세하게 작성해야 하며, 불명확한 단어들의 조합은 피해야 한다. 변수명을 짓는 법은 자유지만 읽는 사람을 고려해야 한다.

 

자바스크립트 자체는 어떻게 사용할까? html에서 <script> 태그 안에 src의 속성값으로 js 파일을 입력 후, html 파일과 연동하면 된다. 우클릭 후 크롬 개발자 검사 혹은 F12를 통해 콘솔(Console) 창을 확인해보면, 자바스크립트 안에 있는 변수의 값을 확인해볼 수 있다.

 

자바스크립트 데이터 타입

8가지의 데이터 타입이 존재한다.

String(문자열)

"큰 따옴표" 또는 '작은 따옴표' 안에 작성된 데이터. 묶을 때 큰 따옴표와 작은 따옴표를 같이 쓰는 건 불가능하다.

Number(숫자)

별도의 기호 없이 숫자를 입력한 상태. 정수, 음수, 실수도 된다.

Function(함수)

함수는 기본적으로 function 키워드를 사용하여 생성한다. 함수 호출하여 함수 안에 있는 코드를 실행시킨다.

함수 소괄호 안에 매개변수가 들어가는데, 매개변수는 인자로부터 전달받은 값이 들어가는 통로다. 상황에 따라 생략이 가능하다. 인자는 함수에게 전달하는 데이터다.

 

console.log()로 다음과 같이 함수 데이터를 호출할 수 있다. 변수를 감싸거나, 함수 자체를 감싸거나.

함수 데이터 호출 방법

Array(배열)

여러 자료를 담는 자료형인데, 비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 [대괄호]로 관리한다. 데이터의 index를 활용하여 console.log()로 데이터를 추출할 수 있다. 인덱스를 사용하여 접근 후 새로운 데이터 대입도 가능하다.

Object(객체)

복잡한 자료형이며 프로퍼티, 메서드, 데이터로 구성돼있다. 변수가 갖고 있는 여러 속성을 프로퍼티라고 하고, 수행하는 동작을 메서드라고 한다.

객체 데이터 출력하기

Boolean

참 또는 거짓 데이터가 들어가 있는 상태이다. true, false 로 적어주면 된다.

undefined

변수 안에 데이터를 입력하지 않은 상태이다. 데이터가 없는 것을 의미한다.

null

개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태로, 빈 데이터를 지정한 것이다.

프로그래밍을 하다보면 undefined와 null 중 하나를 골라야 할 때가 온다.