-
데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt)프론트엔드 프로그래밍/JavaScript 2022. 1. 26. 22:40
데이터를 출력하는 방법
- window.alert(내용) : 내용을 알림창(경고창)으로 출력
- console.log(내용)
- document.write(내용) : 화면(문서)에 내용 출력
- DOM(문서 객체 모델) 사용 : 예: body
- 예제
- write.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 데이터 출력</title> <script type="text/javascript"> document.write("hello"); document.write("<h2>제목</h2>"); /* <h2> 태그 효과 적용 */ </script> </head> <body> <h1>body 본문에서 출력</h1> </body> </html>- console.html
- console.log 는 option+command+I 눌러야 내용 뜨는거고 document.write는 바로 웹에 출력, alert는 경고 메시지 출력
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 데이터 출력 : console</title> <script type="text/javascript"> console.log("hello"); console.log("<h2>태그 출력</h2>"); document.write("<h2>제목</h2>"); document.body.innerHTML += "DOM 객체 innerHTML 속성 사용해서 출력"; </script> </head> <body> </body> </html>자바스크립트 코드 입력 시 주의 점
- 대소문자 구별
- 문장 끝에 세미콜론(;) 사용
- 문자열에 따옴표 겹침 오류 주의
- 문자열 큰 따옴표, 작은 따옴표 모두 사용 가능
- document.write(“이름은 홍길동입니다”);
- document.write(‘이름은 홍길동입니다’);
- document.write(“이름은 ‘홍길동’입니다”);
- document.write(‘이름은 “홍길동”입니다’);
- 큰 따옴표 안에 큰 따옴표 사용 불가
- 작은 따옴표 안에 작은 따옴표 사용 불가
- 겉에 큰 따옴표 사용했으면 안에는 작은 따옴표 사용
- 겉에 작은 따옴표 사용했으면 안에는 큰 따옴표 사용
- 괄호 짝이 맞아야 함
- ()
- { } : 중첩 사용 시 주의
데이터 입력 방법
- confirm() 함수로 입력 받기
- prompt() 함수로 입력 받기
- getElementsByTagName() : 태그 이름 사용
- <input> 태그의 value 속성 사용
- DOM (문서 객체 모델) 사용
confirm() 함수로 입력 받기
- 자바스크립트 내장 함수
- [확인]/[취소] 버튼이 있는 대화상자를 출력하고
- [확인] 버튼을 누르면 true 값 반환
- [취소] 버튼을 누르면 false 값 반환
- 예제 : confirmInput.html
- 연습문제 : confirmInputEx.html
- [확인] 버튼을 누르면 다음과 같이 출력
- 결과 : 학생입니다
- 할인율 : 50%
- [취소] 버튼을 누르면 다음과 같이 출력
- 결과 : 학생이 아닙니다
- 할인율 : 없음
- if(){
- }else{
- }
- Confirm은 “당신은 학생입니까?” 라는 경고창과 함께 확인 취소 , 즉 true false가 출력된다.
if(isStudent==true) / if(isStudent) / if(confirm("당신은 학생입니까?")) isStudent==true 조건의 결과는 true 반환 입력 받을 때 [확인] 버튼 누르면 반환되는 true if(조건이 참이면) { 참일 때 수행 문장 }else { //거짓이면 거짓일 때 수행 문장 }prompt() 함수
- 자바스크립트 내장 함수
- 사용자로부터 입력 받은 값을 반환
- 예제 : promptInput.html
- prompt(“출력 메시지”);
- prompt(“출력 메시지”, “기본값”);
prompt() 연습문제 : promptEx.html
- [확인] 버튼 누르면 카드 번호 입력 받아서 출력하는 프로그램 작성
주석
- //한 줄 주석
- /*
여러 줄 주석
Java와 동일
*/
'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글
브라우저 객체 모델 (window, history, location, navigator) (0) 2022.01.27 자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String) (0) 2022.01.27 제어문 (if, switch, for, while...) (0) 2022.01.27 변수 (var, let, const) + 연산자 + 데이터 타입 (0) 2022.01.27 자바 스크립트 (JavaScript)란? + 기본구조 및 사용법 (0) 2022.01.26