데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt)

프론트엔드 프로그래밍/JavaScript

데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt)

hyovvely 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(“출력 메시지”);