기본 입출력 (alert / confirm / prompt / document.write / console.log)

 

 

 

 

 

 

 

 

 

 

▶▶   입출력문

–  사용자로부터 데이터를 입력받거나,  코드의 실행 결과를 웹 브라우저에 표시해야 할 때 사용.
–  만약, 화면에 실행이 안되면 웹페이지의 F12(개발자도구)  →  Console  →  빨간 에러창 확인  →  해석  →  수정

 

 

 

1.   alert

2.   confirm

3.   prompt

4.   document.write

5.   console.log

 

 

 

 

 

 

 

 

 

 

▶   alert   — 알림 창 출력

–  단순히 메세지만 보여주는 기능.

–  웹 브라우저에서 작은 알림 창을 열어 메세지를 표시할 수 있음.

     →  간단한 알림 내용을 표시하거나 사용자에게 어떤 값을 입력하게 하는 창을 대화상자(dialogue box)라고 함.

---

EX   )   알림창 출력하기

alert("안녕하세요, 알림창입니다!");

✓   실행 결과

 

 

 

 

 

 

 

 

 

 

 

▶   confirm   — 확인 창 출력

–  alert창은 단순히 메세지만 보여주지만, 

    confirm창은 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭이 가능하며, 그에 따른 결과에 맞게 프로그램이 동작함.

---

EX   )   확인 창 출력하기

confirm("정말 떡볶이를 시켜 먹겠습니까?");

✓   실행결과

 

 

 

 

 

 

 

 

 

 

▶   prompt   — 프롬프트 창 입력

–  텍스트 필드가 있는 작은 창.

–  간단한 메세지를 입력할 수 있으며, 그 내용을 가져와 프로그램에서 사용 가능

–  기본값을 지정하거나 지정하지 않을 수 있음.

---

EX1   )   기본 값 지정하기

prompt("먹고 싶은 메뉴를 입력하세요.", "떡볶이");

✓   실행결과

 

 

 

EX2   )   기본 값 지정하지 않기

prompt("먹고 싶은 메뉴를 입력하세요.");

✓   실행결과

 

 

 

 

 

 

 

 

 

 

▶   document.write( ) 문

–  단순히 브라우저 화면에서 결과값을 확인하는 용도

–  웹 문서(docment)에서 괄호 안의 내용을 표시(write)하는 명령문이라는 정도만 알아두기.

–  괄호 안에는 화면에 표시할 내용이나, 어떤 결과값이 저장된 변수를 넣을 수 있음.

–  " ", ' ' 큰,작은 따옴표를 사용하여 데이터값을 전달하거나,  HTML태그도 사용 가능함.

---

EX1   )   화면에 이름 출력하기

document.write("박보검");
document.write("잘생겼다!")

✓   실행결과

박보검잘생겼다!

→   document.write() 는 자동 줄바꿈이 기능이 없음.

→   따라서 줄바꿈이 가능한 태그( <br> )를 같이 입력해야함.  이스케이프 코드( \n )는 HTML 내에서 작동하지 않음.

document.write("박보검 <br>");
document.write("잘생겼다!");

✓   실행결과

박보검
잘생겼다!

 

 

 

EX2   )   HTML 태그 활용하기

document.write("박보검");
document.write("<h1>박보검</h1>");

✓   실행결과

→   <h1>태그를 사용함으로써 위아래로 한 줄씩 자동 줄바꿈이 적용됨.

 

 

 

EX3   )   연산자 + 와 연결자 + 사용해보기

 

•   연산자 + 는   말 그대로 산술연산자에 속하는 기능으로써, 숫자끼리의 덧셈을 의미함.

•   연결자 + 는   두개의 데이터를 하나의 문자로 연결해줌

document.write(1000+2000, "<br>");
document.write("1000+2000");
document.write("<br>");
document.write('1000+2000');
document.write("<br>");

✓   실행결과

3000
1000+2000
1000+2000

→   숫자+숫자인 1000+2000은 연산자+가 사용되어 덧셈 결과 3000의 결과값이 출력됨.

→   " " 큰따옴표로 둘러쌓인 "1000+2000"은 연결자+ 사용, 하나의 문자로 연결되어 1000+2000의 결과값이 출력됨.

→   ' ' 작은따옴표도 큰따옴표와 마찬가지로 하나의 문자열을 나타내므로,  연결자+가 사용됨.

 

 

 

EX4   )   유니코드 사용 가능

document.write("\u0041");

✓   실행결과

A

→   'A'의 Unicode number = U+0041,  출력문에 유니코드 값을 입력하기 위에 백슬래시를 앞에 추가하고 +기호를 없앰.

 

 

 

 

 

 

 

 

 

 

▶   console.log   — 콘솔창에 출력

–  개발자들의 공간  
–  화면에는 출력이 안되고  웹 페이지에서 F12  →  Console창에 가면 출력되어 있음.
–  유저가 보는 공간에 출력되지 않아서 개발하면서 테스트하는 용도로 사용됨.

–  만약, 화면에 실행이 안되면 웹페이지의 F12(개발자도구)  →  Console  →  빨간 에러창 확인  →  해석  →  수정

---

EX1   )   사용자로부터 이름을 받아 콘솔 창에 표시하기

var name = prompt("이름을 입력하세요.");
console.log(name+"님, 환영합니다.");

→   name이라는 변수에 prompt창에서 입력받은 값을 저장함.

→   콘솔창에 사용자로부터 입력받은 name값과 환영한다는 문구를 같이 출력함.

✓   실행결과

프롬프트 창에 이름을 입력함.

→   프롬프트 창에 이름 입력 후 확인 버튼을 누르면, 화면에는 아무것도 뜨지 않음.

→   F12로 개발자 도구에 들어가 console창을 확인해보면 결과값이 출력되어 있음.

 

 

 

EX2   )   콘솔창에서 오류 찾기

 

만약, 위의 코드를 실행후 ctrl + shift + j 로 콘솔창을 봤는데 아래와 같은 에러가 발생했다면 ?

→   오류 발생 위치를 보니 오류가 발생한 파일명과 라인 번호가 나타남.

→   즉,  practice.html 이라는 파일에 line15에서 오류가 발생했다는 뜻!

→   오류 내용을 대충 해석하자면,  'console은 정의할 수 없다'인데,  딱 봐도 오타가 났음을 알 수 있음.

 

→   이클립스로 돌아와 오류 발생 위치인 line15를 보니,  오류 내용과 마찬가지로 consol 이라는 단어가 오타임.

→   console로 고쳐주고 콘솔창을 다시 확인함.

 

✓   해결 완료! 에러 문구 없어짐.

 

 

 

 

 

 

 

 

 

 

---

참조 : Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석