JS(Java Script)란 - 자료형, 변수, 조건문

HTML은 한번 화면에 출력이 되면 언제나 그 모습 그대로입니다. 즉 정적입니다.

사람들은 웹 페이지를 사용자와 상호작용 가능하도록 만들고 싶어 했으며 그래서 태어난 기술이 JS, 자바스크립트입니다

JS는 HTML 위에서 동작하는 언어이며 HTML를 사용해 웹 페이지의 기본적인 틀을 만들고 나면 사용자와 상호작용 할 수 있도록 기능을 추가해주는 역할을 합니다

 

HTML과 JS는 둘다 컴퓨터 언어입니다 하지만 JS는 HTML과는 다르게 컴퓨터 프로그래밍 언어라고도 합니다

왜 그런것일까요? HTML은 웹 페이지를 묘사하는 목적의 언어이기 때문에 시간의 순서에 따라 실행되도록 하는 기능이 없습니다 하지만 반면에 JS는 사용자와 상호작용하기 위해 고안된 컴퓨터 언어이기 때문에 시간의 순서에 따라서 웹 브라우저의 여러 기능들이 실행되어야 하기 때문에 프로그래밍이라는 형태를 띄는 것입니다

 

JS를 실행할때마다 웹페이지를 만들지 않고 이미 만들어진 웹 페이지에서 자바스크립트를 사용하는 방법을 알아보겠습니다 이미 만들어진 웹 페이지에 마우스 오른쪽 버튼을 누른 뒤 검사를 클릭하면 해당 웹 페이지의 코드들을 볼 수 있습니다 (F12를 눌러도 같습니다) 

제일 첫 번째 Elements가 있고 두 번째에 Console이 있습니다 우리는 이 콘솔에서 JS 기능들을 연습 할 것입니다

콘솔 환경에서는 엔터를 누르면 명령어가 바로 실행됩니다(인터프리터 환경) 하지만 두줄 이상 명령어를 치고 싶다면

Shift + 엔터를 사용하면 됩니다(컴파일러 환경)

 

자 이제 JS에 대해 배워보도록 하겠습니다

 

1. 데이터타입(자료형)

JS 데이터타입으로는 여섯가지가 있습니다

• String
• Number
• Boolean
• Null
• Undefined
• Symbol

이번 시간에는 6가지의 자료형중 3가지만 우선 배워볼 것입니다

 

1. 문자열(String) : 문자를 표현하는데 사용하며 큰 따옴표(" ") 또는 작은 따옴표(' ')를 사용하여 표시합니다

예)"안녕하세요", '1'

문자열을 처리할때 사용할 수 있는 명령어들은 여러가지가 있습니다 그중에서 제일 기본적인 명령어들을 

사용해 보겠습니다

• length = 문자열의 길이
• toUpperCase() = 소문자를 대문자로 변환
• trim() = 문자열 공백 제거
• indexOf("문자") = 해당 문자가 몇번째에 있는지 확인

2. 숫자형(Number) : JS에서는 따로 정수와 실수를 구분 하지 않습니다

 

3. 논리형(Boolean) : 두개의 데이터값을 가지는 자료형입니다 true(참) 또는 false(거짓)

 

2. 변수

따로 자료형을 선언하지 않으며 변수에 선언되는 값에 따라 자료형이 달라집니다

변수를 선언할 때 var를 앞에 사용하여 선언하는 습관을 가지도록 합시다(없어도 선언 가능)

var 변수명 = 초기값;

var name = "keum";

var day = 21;

 

3. 조건문

다른 언어에서 사용하는 방식이랑 거의 유사합니다

if(조건){

   조건이 참일 때 실행

}

else{

   조건이 거짓을 때 실행

}

HTML에서 자바스크립트를 사용하기 위해서는 다음과 같이 <script> 태그를 사용해야 합니다