WEB.JS/01.BASIC_JS

chapter01 : basic_js

GAWON 2023. 5. 19. 09:16 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 개요</title>
<style type="text/css"></style>
<script type="text/javascript">
	//	single comment
	/*
		multiline comment
	*/

	// 프론트 엔드 개발 언어
	//	1. HTML : 웹 페이지의 컨텐트(내용)을 작성
	//  2. CSS : 웹 페이지의 스타일(레이아웃)을 작성
	//  3. JavaScript : 웹 페이지의 동적인 동작(기능)을 프로그램

	// HTML 파일에서 자바스크립트를 사용하는 방법
	//	1. script 태그 안에서 자바스크립트 코드를 작성
	//		1) head 태그 안에서 script 태그를 포함
	//		2) body 태그 안에서 script 태그를 포함
	//	2. 자바스크립트 코드만을 포함한 .js 파일을 HTML 파일에서 링크
	//		=> 자바스크립트 코드가 있는 위치에서 실행


	/*
		본래 명칭 : ECMAScript
		<script> 태그에 작성
		<script> 태그는 <head>와 <body>태그에 모두 작성 가능
	*/
	// 1. 출력1. 경고창에 출력하기
	window.alert("Hello! Javascript!");
	alert("Hello! ECAMScript!");			// window 생략가능! 추천!

	// 2. 출력2. 콘솔창에 출력하기
	console.log("Hello! javascript World!");

	// 3. 출력3. 브라우저 화면에 출력하기
	document.write("Hello!");
	document.write("<h1>");
	document.write("Javascript");
	document.write("</h1>");
	document.write("<h3>ECMAScript</h3>");

	/*
	   4. 선택 메소드 : DOM 이용
		   1) document.getElementById(아이디) : id 속성을 가진 문서 객체(DOM) 선택
		   2) document.getElementsByTagName(태그) : 태그를 가진 여러 문서 객체들 선택
		   3) document.querySelector(선택자) : 선택자를 사용해서 문서 객체 선택
		   4) document.querySelectorAll(선택자) : 선택자를 사용해서 여러 문서 객체 선택

	   5. 속성
		   1) 선택.innerHTML = new content 		내부 글자 변경
		   2) 선택.style.property = new style	스타일 변경
		   3) 선택.attribute = new value			속성에 새 값 설정
	*/
</script>

</head>
<body>
	<h1>자바스크립트</h1>
	<p>대한민국의 수도는?</p>
	<p>정답은 <span id="answer"></span>입니다.</p>
	<script type="text/javascript">		/* 순서대로 사용되므로 자바스크립트의 사용 개수는 상관없다.  */
		document.getElementById("answer").innerHTML ="서울";
	</script>
</body>
</html>