<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- script 태그를 사용하여 자바스크립트를 작성할 영역을 표시(선언문) -->
<!-- script 태그는 head 태그 또는 body 태그 내의 어디서든 선언 가능하며, type 속성은 생략이 가능함 -->
<!-- 자바스크립트도 HTML 태그와 함께 순차적으로 실행됨 -->
<script type="text/javascript">
// 자바스크립트 내에서 한 줄 주석 사용법(= 자바와 동일함)
/*
자바스크립트 내에서 범위 주석 사용법(= 자바와 동일함)
*/
// 이 위치에 자바스크립트 코드가 기술됨
// alert("자바스크립트 실행됨!");
// alert("alert() 함수 호출됨!");
/*
자바스크립트에서의 변수 사용법
< 기본 문법 > 데이터타입 변수명 = 값;
=> 단, 자바의 데이터타입과 동일한 데이터타입을 사용하지 않음(동일한 타입도 존재함)
=> 문자(String), 숫자(Number), 논리(Boolean), 특수값(Null) 등 사용
다만, 별도로 타입을 지정하지 않고 일반적인 공통 타입으로 변수 선언 가능하며
저장되는 데이터에 따라 해당 변수의 타입이 자동으로 결정됨
=> 일반적으로 변수 선언 시 데이터타입 대신 var 또는 let 또는 const 중 하나를 타입처럼 사용
=> 변수명 지정 시 자바의 식별자 작성 규칙과 거의 동일한 규칙 적용됨
*/
var str = "자바스크립트"; // 문자 데이터를 저장하는 string 타입으로 취급됨("" 또는 '' 사용)
// alert(str);
// 특정 변수 또는 데이터의 타입 확인 방법 : typeof 키워드 사용
// => 기본 문법 : typeof 변수명 또는 typeof 데이터
// typeof(변수명) 또는 typeof(데이터)
// alert("str 변수값 = " + str + ", str 변수 타입 = " + typeof(str));
// => 실행결과 : str 변수값 = 자바스크립트, str 변수 타입 = string
var num = 100; // 숫자 데이터를 저장하는 number 타입으로 취급됨
// alert("num 변수값 = " + num + ", num 변수 타입 = " + typeof(num));
// => 실행결과 : num 변수값 = 100, num 변수 타입 = number
num = 3.14; // 실수 데이터와 정수 데이터 구분 없이 number 타입으로 취급됨
// alert("num 변수값 = " + num + ", num 변수 타입 = " + typeof(num));
var b = true; // 논리 데이터는 boolean 타입으로 취급됨(true 또는 false 값 사용)
// alert("b 변수값 = " + b + ", b 변수 타입 = " + typeof(b));
// 주의! 특수한 타입
var v1; // 변수에 아무 데이터도 저장하지 않을 경우 undefined 타입으로 취급됨(undefined 값 저장)
// alert("v1 변수값 = " + v1 + ", v1 변수 타입 = " + typeof(v1));
// => 실행 결과 : v1 변수값 = undefined, v1 변수 타입 = undefined
var v2 = null; // 변수에 특수값인 null 저장 시 object 타입으로 취급됨(소문자 null)
// alert("v2 변수값 = " + v2 + ", v2 변수 타입 = " + typeof(v2));
// => 실행 결과 : v2 변수값 = null, v2 변수 타입 = object
// ================================== 변수 사용 연습 ========================================
// document.write() 함수를 호출하여 웹페이지에 출력할 데이터를 전달하면 해당 페이지에 출력됨
var data = 100;
document.write(data); // data 변수값을 웹페이지에 표시(출력)
// document.write() 함수 내에는 HTML 태그를 그대로 사용 가능
document.write("<h3>data = " + data + "</h3>"); // data 변수값을 웹페이지에 표시(출력)
// 기존 변수에 다른 데이터를 저장할 경우 기존 값은 제거됨
data = 200;
document.write(data);
// data2 변수 선언하고 "Hello, World!" 문자 데이터 저장 및 출력
var data2 = "Hello, World!";
document.write("<br>" + data3);
</script>
</head>
<body>
<hr>
<script>
// alert("body 태그 내의 자바스크립트!");
document.write("이 곳은 body 영역의 h1 태그 앞입니다.");
</script>
<h1>이 곳은 body 태그 영역입니다.</h1>
<script type="text/javascript">
document.write("이 곳은 body 영역의 h1 태그 뒤입니다.");
</script>
</body>
</html>
Hello, Velog!