자바스크립트와 첫 만남 6 - 자바 스크립트 용어와 기본 입출력 방법

이어서 자바스크립트 기초 공부를 시작해 보겠다. 조금 전에 손목이 아파 스트레칭도 5분 정도 해주었다. 이렇게 틈틈이 스트레칭을 해야 지치지 않고 공부할 수 있다. 이제 1시간 반 정도만 공부하고 새벽 공부를 마치려고 한다.

자바스크립트를 본격적으로 공부하기 전에 프로그램을 실행하는 데 필요한 자료를 입력하고 결과를 출력하는 간단한 방법을 알아볼 것이다.

---

 

 

 

자바스크립트 용어와 기본 입출력 방법

 

1. 식과 문

자바스크립트 언어의 큰 줄기는 식과 문이다. 자바스크립트에서 식은 표현식이라고 하는데, 연산식뿐만 아니라 실제 값도 함수를 실행하는 것도 식이 된다. 즉 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있으며 식은 변수에 저장된다.

다음은 자바스크립트의 여러 가지 식을 나타내는 예제이다.

 

자바스크립트의 다양한 식 나타내기

inch * 2.54		// 연산식은 식이다
"안녕하세요?";	     // 문자열도 식이다
5			// 숫자도 식이다

 

이에 비해 문은 명령이라고 생각할 수 있다. 문의 끝에는 세미콜론을 불여 구분한다. 앞으로 배울 조건문이나 제어문을 예로 들 수 있다.

---

 

 

 

 

2. 간단한 입출력 방법

자바스크립트의 기본 입출력 방법은 다음과 같다.

 

 

1. 알림창 출력하기

알림 창은 가장 많이 사용하는 간단한 대화 상자이다. 웹 브라우저에서는 작은 알림 창을 열어 메시지를 표시할 수 있다.

alert(메시지)

 

알림 창을 만드는 방법은 다음과 같이 alert()를 입력하고 괄호 안에 따옴표와 함께 메시지를 넣어주면 된다.

 

알림 창 만들기

 

---

 

 

 

2. 확인 창 출력하기

알림 창은 단순히 메시지를 보여 주는 기능만 하지만 확인 창은 사용자가 확인이나 취소 버튼 중에서 직접 클릭할 수 있다. 그러면 선택한 결과에 맞게 프로그램이 동작한다.

confirm(메시지)

 

확인 창은 다음의 예시처럼 버튼이 2개 있다. 사용자가 어떤 버튼을 눌렀는지 결과를 변수에 저장한 후 그 값에 따라 프로그램에서 처리한다.

 

확인 창 만들기

 

---

 

 

 

3. 프롬프트 창에서 입력받기

프롬프트 창은 텍스트 필드가 있는 작은 창이다. 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있다.

prompt(메시지) 또는 prompt(메시지, 기본값)

 

 

프롬프트 창을 만들 때는 기본값을 지정하거나 지정하지 않을 수 있다. 기본값을 지정하면 아래 그림과 같이 텍스트 필드 안에 기본값이 표시된다. 기본값을 지정하지 않으면 빈 텍스트로 표시된다.

 

프롬프트 창의 기본값 지정하기

 

---

 

 

 

프롬프트 창의 기본값 지정하지 않기

 

 

지정하지 않은 경우에는 아무런 메시지가 뜨지 않는다.

---

 

 

 

4. 웹 브라우저 화면에 출력을 담당하는 document.write() 문

자바스크립트의 실행 결과는 텍스트나 이미지로 출력하거나, 따로 지정한 영역에 내용을 표시하는 경우가 많다. 하지만 단순히 브라우저 화면에서 결과값을 확인하는 용도로는 document.write()를 많이 사용한다.

이것을 완전히 이해하려면 document 객체를 알아야 한다. 하지만 지금은 아직 배우지 않았으므로 웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문이라는 정도로 알아두면 된다.

 

이 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있다. 괄호 안에서 따옴표 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시한다. 물론 따옴표 안에는 HTML 태그도 함께 사용할 수 있다.

다음은 document.write() 문에 <h1> 태그와 출력할 내용을 입력해서 웹 브라우저에 제목을 표시하는 예제이다.

 

document.write() 문으로 제목 표시하기

 

 

웹 브라우저 화면에 표시할 내용과 변수를 섞어서 나타낼 수도 있다. 이때 + 연산자를 사용해서 연결해 준다. 여기에서 + 연산자는 더하기 기호가 아니라 연결 연산자이다.

다음은 name 변수에 저장된 값과 텍스트를 연결해서 표시하는 예제이다. 여기서도 <big> 태그와 <b> 태그를 함께 사용하고 있다.

 

 

이름 받아서 화면에 표시하기

 

 

 

이렇게 입력하는 대로 웹페이지에 출력이 잘되었다.

---

 

 

 

5. 콘솔창에 출력하는 console.log() 문

이것은 괄호 안의 내용을 콘솔 창에 표시한다. 콘살 창은 웹 브라우저의 개발자도구 창에 포함되어 있는 공간이다. 소스 코드의 오류를 발견하거나 변수값을 확인할 수 있다. console.log() 문의 괄호 안에는 변수가 들어갈 수도 있고 따옴표 사이에 표시할 텍스트를 넣을 수도 있다. 이때 따옴표 안에 HTML 태그는 사용할 수 없다.

다음은 프롬프트 창에서 이름을 입력받아 콘솔 창에 표시하는 예제이다.

 

이름 받아서 콘솔 창에 표시하기

 

 

 

앞의 예시와 비슷하지만 여기서 다른 점은 입력한 이름이 웹페이지에 표시되지는 않는다. 이제 프롬프트 창을 확인해 보겠다.

 

 

콘솔창에 메시지가 잘 뜨는 것을 확인할 수 있다.

---

 

 

 

 

DO IT 실습 - 콘솔 창에서 오류 찾고 수정하기

자바스크립트 소스를 작성한 후 웹 브라우저에서 실행하면 원하는 결과가 나오지 않거나 나예 실행되지 않는 경우가 있다. 이런 경우는 대부분 오타 때문에 발생할 확률이 높다. 아무리 들여다봐도 찾지 못했던 오타를 콘솔 창에서 쉽게 찾아보는 방법을 알아보겠다.

 

1단계 : 웹 브라우저에서 콘솔 창 열어서 확인하기

 

이 코드를 실행하여 웹페이지에 띄워보자.

 

 

 

현재 시간이 표시되어야 하는데 아무것도 표시되지 않는다. 그럼 이제 콘솔 창에서 한번 확인해 보자.

 

 

 

 

오른쪽 위에 보면 오류 개수가 표시되고 이와 같은 내용이 출력된다. 그리고 오른쪽에 보면 오류 발생 위치도 표시해 준다.

---

 

 

 

 

2단계 : 오류 발생 위치를 클릭해 소스 오류 찾기

콘솔 창에서 오류 발생 위치를 클릭하면 [Console]이 [Sources] 탭으로 바뀌고 오류가 발생한 파일과 행이 바로 표시된다.

 

 

여기서 오류를 보니 wirte에서 e를 빠뜨렸다. 이제 비주얼 코드를 열어서 소스 코드를 수정하면 된다.

---

 

 

 

 

3단계 : 비주얼 스튜디오 코드에서 HTML 파일 수정하기

아까 콘솔 창에서 오류를 찾았던 18행으로 이동한다. 그리고 이를 수정해 보자.

 

 

이제 날짜가 제대로 표시되는 것을 확인할 수 있다.

---

 

 

 

학습을 마치고

이렇게 직접 실습하고 내용을 정리하면서 정말 많은 것들을 알게 되었다. 특히 마지막에 실습 문제에서 오류를 확인하는 방법은 정말 유용한 기능이니 다음에도 자주 사용해 볼 것이다.

이제 이 단원의 학습도 얼마 남지 않았다. 30분만 더 공부하고 아침 루틴을 실시해 볼 것이다.