[6/7일반] JavaScript 기초/ 실습 - 자바스크립트 실행 준비, 기본 문법 / 채석환 강사님

박재준·2022년 6월 7일

CSS JavaScript alert document.write html prompt variable

1. 학습한 내용

1) 필기내용

html(정적) / css(디자인) / Javascript(이벤트를 처리)(소비자가 요청하는 것에 대해 반응) : 프론트엔드 / Javascript의 nodejs : 백엔드
클라이언트 : 웹 브라우저를 통해 필요한 정보 요청 ↔ 요청을 처리해 알맞은 정보 전달 : 서버
Javascript의 기능 :
(1) 웹 요소를 제어
(2) 다양한 라이브러리를 사용할 수 있음
(3) 웹 애플리케이션을 만듦
(4) 서버를 구성하고 서버용 프로그램을 만들 수 있음((1)~(3)이 기본적 역할)
https://gs.statcounter.com/browser-market-share : Browser Market Share Worldwide 참고 할 수 있는 사이트
이 외의 내용들은 PPT 제공받은 것들 활용하기

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0607 / 01_liveserver.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글자색 바꾸기</title>
    <link rel-="stylesheet" href="css/change-color.css">
</head>
<body>
    <h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해보세요</p>
    
    <script>
        var heading = document.querySelector('#heading');
        heading.onclick = function() {
            heading.style.color = "red";
        }
    </script>
</body>
</html>

0607 / css / change-color.css

		body {
			text-align:center;
		}
		#heading {
			color:blue;
		}
		#text {
			color:gray;
			font-size:15px;
		}

→ 자바스크립트를 클릭하면 빨간색으로 변함
→ 기본적인 css 파일을 link로 불러내기

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0607 / 02_change.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글자색 바꾸기</title>
    <link rel-="stylesheet" href="js/change.js">
    
</head>
<body>
    
    <h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해보세요</p>
    <script src="js/change.js"></script>

</body>
</html>

0607 / js / change.js

var heading = document.querySelector('#heading');
heading.onclick = function() {
    heading.style.color = "red";
}

→ 위의 그림과 마찬가지의 결과를 가져옴
→ css가 아닌 js 파일의 내용을 script로 가져옴
→ body태그의 하단부분에 sciript를 불러오는 작업을... 해야함!(head 태그 X)(기존과 바뀐 부분인듯)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0607 / 03_greeting.html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Welcome</title>
	<style>
		body {
			font-size:1.3em;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>어서오세요</h1>	
	<script>
		var name = prompt("이름을 입력하세요")
		document.write("<b><big>" + name + "<b></big>님 환영합니다.")
	</script>
</body>
</html>