Basic/Web

[JScript] 출력 관련

카고형 2022. 6. 22. 14:24
728x90

자바 스크립트는 웹프로그래밍 에서 할 수 있는일은 다양함.

웹에서는 HTML의 내용, 속성, 스타일 등을 변경 할 수있고 리액트 엑스포 등을 이용하여 휴대폰 app도 만들수 있다

 

 

자바스크립트 문법

1. 자바 스크립트는 세미크론(;)으로 구분

2. 대소문자 구분( 변수 함수의 이름 예약어 등 대소 문자 구별)

 

var x = 10;
var result = x + 5;

var aa = 10;
var AA = 20;
VAr aa = 30;

Jscript 출력

 

1.Window.alert() 메소드

2.HTML DOM 요소를 이용한 innerHTML 프로퍼티

3.document.write() 메소드

4.console.log() 메소드

 

Window.alert() 메소드

alert() 메소드는 브라우저와는 별도의 대화상자를 뛰어 사용자에게 데이터 전달 함

간단 한 메세지를 보여주고, 그에 대한 사용자의 확인을 기다림.

사용자는 대화상자의 확인 버튼을 눌러야 다른 작업 진행가능

 

더보기
JavaScript Output

Window 객체의 alert() 메소드 예제

 

HTML DOM 요소를 이용한 innerHTML 프로퍼티

우선 document 객채의 getElemetByID() 나 getElementsByTagName() 등의 메소드를 사용 HTML요소 선택

프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)이나 속성(attribute)값등을 손쉽게 변경할 수 있습니다.

 

p 테그에 이름을주고 메서드를 이용하여 값을 변경

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript Output</title>
</head>

<body>

	<h1>HTML DOM 요소를 이용한 innerHTML 프로퍼티</h1>
	<p id="text">바밥바바바바ㅏ!</p>
	
	<script>
		var str = document.getElementById("text");
		str.innerHTML = "사사사삭삭삭";
	</script>
	
</body>

</html>
더보기
JavaScript Output

HTML DOM 요소를 이용한 innerHTML 프로퍼티

바밥바바바바ㅏ!

 

document.write() 메소드

웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력합니다.

테스트하거나 디버깅을 할떄 사용 함.

주의 할점으로는 웹페이지가 모두 로드된 후에 해당 메소드를 실행하면 로드된 웹페이지를 지우고 자신의 데이터를 출력 하게 됩니다.

더보기

 

JavaScript Output

Document 객체의 write() 메소드

 

 

console.log() 메소드

웹브라우저에 콘솔을 통해 데이터 출력해 줌 

콘솔은 크롬기준  F12 또는 (ctrl + shift + i) 눌러 확인 가능함

 

더보기
JavaScript Output

console.log() 메소드

F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.

 


참고

http://www.tcpschool.com/

728x90

'Basic > Web' 카테고리의 다른 글

[JScript] function  (0) 2022.06.29
[JScript] type  (0) 2022.06.24
Maven 이란?  (0) 2020.04.28
servlet 예제2 doget dopost  (0) 2020.02.21
Servlet 예제1  (0) 2020.02.18