JavaScript_1강_데이터를 출력 시키는 방법(console.log(), document.write(), alert()), 외부 js파일 가져오는 법
JavaScript
목록 보기
1/37
자바스크립트에서 데이터를 출력시키는 방법
- console.log() 함수를 이용하는 방법
- document.write() 함수를 이용하는 방법
- alert() 함수를 이용하는 방법
1. console.log()
: console.log() 는 주로 디버깅 시에 필요한 정보를 출력할 때 사용함
- 디버깅 : 개발 시 문법적으로 보면 전혀 문제가 없는데도 어떠한 경우에는 정상적으로 동작을 하고, 어떠한 경우에는 동작이 제대로 안 되는 경우가 발생함, 프로그램에서는 이런 것을 논리적인 오류인 버그라고 부름.
이러한 버그를 찾아서 없애는 작업을 '디버깅' 이라고 말함 - console.log() 기능은 크롬과 사파리 브라우저에서만 사용이 가능함
2. document.write()
: HTML의 body 태그의 괄호 안에 있는 내용을 출력해 주는 함수 즉, 웹 브라우저의 화면에 내용을 출력해 주는 함수
3. alert()
: 웹 브라우저 창에서 간단한 알림 내용을 표시할 때 사용하는 함수
console.log() 예시
=============================코드=============================
<!DOCTYPE html>
// HTML 태그 밖에서 사용도 가능은 하지만 권장사항은 아님!
console.log("HTML 태그 밖에서 선언했어요!")
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 자바스크립트에서 한 줄 주석문
/*
자바스크립트에서의 여러 줄 주석문
- 주석은 프로그램 코드를 설명할 때 사용하며,
프로그램 실행에는 전혀 영향을 주지 않음
*/
console.log("HEAD 태그 안에 선언했어요!");
</script>
</head>
<body>
<!-- HTML 코드를 작성 후 자바스크립트 코드를 작성 -->
<script type="text/javascript">
console.log("BODY 태그 안에서 선언했네요!")
</script>
</body>
</html>=============================실행=============================
document.write(), alert() 예시
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 2. document.write() 함수를 이용하는 방법
document.write("<h2>반갑습니다. 자바스크립트에 오신걸 환영합니다!</h2>");
// br을 주지 않으면 바로 옆으로 출력됨!
document.write("방가방가!~</br>");
document.write("처음 뵙겠습니다.^^");
// 3. alert() 함수를 이용하는 방법
alert("Hello, JavaScript!!");
</script>
</head>
<body>
</body>
</html>=============================실행=============================
외부에 있는 자바스크립트 파일을 가져오는 방법
js 라는 이름의 folder 파일 생성 -> console 이라는 이름의 javascript 파일 생성
=============================코드=============================
/**
*
*/
console.log("외부 파일로 선언한 자바스크립트 파일!")html파일에 자바스크립트 파일을 가져와보자!
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 외부에 있는 자바스크립트 파일을 불러와서 실행하는 방법 -->
<script type="text/javascript" src="../js/console.js">
</script>
</head>
<body>
</body>
</html>=============================실행=============================
