[JavaScript] 자바스크립트의 기본 입출력방식

자바스크립트의 기본 입출력방식에는 여러가지가 존재합니다.

아래의 내용은 JS의 기본입출력 방식에 대해 설명하겠습니다. 😊

알림창 출력하기

첫 번째로는 알림창을 출력하는 방법입니다.

알림창은 가장 많이 사용하고 간단한 대화상자입니다. 알림창은 간단한 실행결과를 표시할 때 사용합니다.

알림창 출력의 기본은 아래와 같습니다.

 

알림창 출력
alert("메세지");

알림창을 만드는 방법은 alert()를 입력하고 괄호 안에 홑따옴표 또는 쌍따옴표와 함께 출력할 메시지를 입력해주시면 됩니다.

 

한 번 실습을 해볼까요?

"안녕하세요" 라는 메시지를 출력해보겠습니다.

왼쪽은 코드값을 입력한 결과이고 오른쪽은 실행결과입니다. 메세지가 뜬 것을 볼 수 있습니다.

 

확인 창 출력하기

알림창은 단순히 메시지를 보여주는 기능을 하지만 확인 창은 사용자가 확인/취소 버튼을 직접 클릭할 수 있습니다.

그러면 선택한 결과에 맞게 프로그램이 작동합니다.

확인 창 출력하는 기본코드는 다음과 같습니다.

확인창 출력
confirm("메세지");

확인 창 출력하는 방법은 confirm("메세지"); 으로 입력합니다.

간단한 예제를 해보겠습니다.

confirm() 을 사용하여 "이미지를 변경하시겠습니까?" 라는 창을 출력해봅시다.

 

입력 창 만들기

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

아래는 프롬프트 창 생성방법 입니다.

프롬프트 창에서 입력받기
prompt(메시지) 또는 prompt(메시지, 기본값)

입력 창을 만들 때는 기본값을 지정하거나 지정하지 않을 수 있습니다. 기본값을 지정하면 텍스트 필드안에 기본값이 표시 됩니다. 기본 값을 지정하지 않으면 빈 텍스트 필드로 표시됩니다.

 

 

 

document.write() 문

documnet.write()문은 단순히 브라우저 화면에서 결과값을 확인하는 용도로 사용합니다.

documnet.write()문의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있습니다. 괄호안에서 " " 나 ' ' 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됩니다. 또한 따옴표 안에는 HTML 태그도 사용가능합니다.

그리고 웹 브라우저 화면에 표시할 내용을 변수를 섞어서 나타낼 수 있습니다. 이 때는 + 연산자를 이용하면 되는데요, 여기서 +는 더하다는 뜻이 아니라 연결한다라는 연결 연산자 입니다.

다음 실습예제는 name 변수에 저장된 값과 텍스트를 연결해서 표시하는 예제를 실습해보겠습니다.

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

console.log()문은 괄호안에 내용을 콘솔 창에 표시합니다.

콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어있습니다. 이 콘솔창에서 소스코드의 오류를 발견하거나 변수값을 확인 할 수도 있습니다.

console.log() 괄호안에는 변수가 들어갈수도, 따옴표 사이에 표시할 텍스트로 넣을 수 있습니다. 이 때 따옴표 안에는 HTML 태그는 들어갈 수 없습니다.

예제를 한 번 실습해보겠습니다. 프롬프트 창에서 이름을 입력받아 콘솔 창에 표시하는 예제를 실습해보겠습니다.