※ 늦게라도 "코딩" 이란 것을 배워봐야 겠다는 사람이 있다면 혹시라도 도움이 될까 해서 나의 경험담을 적어보려 합니다.
지난 회차에 Java Script를 소개하면서 Java Script로 할 수 있는 것들에 대해서 알아봤습니다.
2022.03.22 - [50대에 코딩에 도전해 봅니다.] - 15. Java Script 란 ?
15. Java Script 란 ?
※ 늦게라도 "코딩" 이란 것을 배워봐야 겠다는 사람이 있다면 혹시라도 도움이 될까 해서 나의 경험담을 적어보려 합니다. 지난 회차에 웹서버를 내 컴퓨터에 설치하는 방법을 나름대로 적어봤
pmxsg.tistory.com
지난회차에 얘기한 바 있지만, Java Script나 CSS는 HTML과 함께 작용합니다. 그래서 Java Script나 CSS를 실행시키려면 태그를 이용해서 시작을 알려야 합니다. CSS는 <style></style> 태그를, Java Script는 <script></script>태그를 사용해야 합니다.
>>> Java Script -<script> 태그
HTML는 내용을 작성하는 정보의 역할, CSS는 디자인을 담당하고,
Java Script로는 동작을 구현한다.
JavaScript는 정적인 웹페이지를 동적으로 움직이게 할 수 있는 역할을 담당합니다. HTML 문서에서 Java Script코드를 적용하는 방법은 크게 2가지 방법이 있습니다.
1. HTML 문서 내부에서 Java Script 코드를 적용시키는 방법
2. HTML 문서 외부에서 Java Script 코드를 적용시키는 방법
1. HTML 문서 내부에서 Java Script 코드를 적용시키는 방법
HTML의 <head></head>태그 안
<script> 태그 안의 내용은 Java Script 코드이지만, <script> 태그 자체는 HTML의 한 부분입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = " Head 태그 안에 위치";
}
</script>
</head>
<body>
<h1> head 태그 내의 Java Script </h1>
<p id="demo"> script 태그 위치는 ? </p>
<button type="button" onclick="myFunction()"> 확인 </button>
</body>
</html>https://pmxsg.github.io/Web/javascript5.html
JavaScript
head 태그 내의 Java Script script 태그 위치는 ? 확인
pmxsg.github.io
많은 JavaScript HTML 메소드 중 하나는 getElementById( )입니다.
위 코드에서 HTML <p> 태그 (id="demo")를 찾아 안에 있는 내용(콘텐츠/innerHTML)을 "Head 태그 안에 위치"로 변경할 수 있습니다.
{ onclick='document.getElementById("demo").innerHTML = "Head 태그 안에 위치"' }
클릭할 때, demo안의 내용을 "Head 태그 안에 위치" 바꾸라는 코드 입니다.
script 태그가 head태그 안에 위치해 있어도 실행은 body 태그 안에서만 가능합니다.
HTML의 <body></body>태그 안
똑같은 코드를 body 태그안에 넣어봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>body 태그 내의 Java Script</h1>
<p id="demo"> script 태그 위치는 ? </p>
<button type="button" onclick="myFunction()"> 확인 </button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = " Body 태그 안에 위치";
}
</script>
</body>
</html>https://pmxsg.github.io/Web/javascript6.html
JavaScript
body 태그 내의 Java Script script 태그 위치는 ? 확인
pmxsg.github.io
위의 두 예제에서 볼 수 있듯이 Java Script코드를 <script> 태그를 감싸서 <head>태그에 삽입하나 <body>태그에 삽입하나 동작상의 차이는 없습니다.
2. HTML 문서 외부에서 Java Script 코드를 적용시키는 방법
JavaScript 파일로 생성하여 삽입하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="JavaScript,js"></script>
</head>
<body>
<h1>body 태그 내의 Java Script</h1>
<p id="demo"> script 태그 위치는 ? </p>
<button type="button" onclick="myFunction()"> 확인 </button>
</body>
</html>function myFunction() {
document.getElementById("demo").innerHTML = " 외부파일 JavaScript.js 에 위치 ";
}## 파일이름 : JavaScript.js
https://pmxsg.github.io/Web/javascript7.html
JavaScript
body 태그 내의 Java Script script 태그 위치는 ? 확인
pmxsg.github.io
외부에 작성된 Java Script 파일은 .js 확장자를 사용하여 저장합니다.
위치는 <head>,<body> 태그 어디든 상관없습니다.
다만, <script src=" " >, src 뒤에 파일명과 파일 위치를 넣어주시면 되고, </script> 태그로 닫아주시면 됩니다.
해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하면 됩니다.
CDN 이용하기
CDN (Content Delivery Network) 이란 은 곳곳에 분산되어 있는 서버 그룹을 말하며 이를 작동 시켜 인터넷 콘텐츠를 빠르게 전달 할 수 있는 서비스를 말합니다. CDN을 사용하면 HTML 페이지, 자바 스크립트 파일, 스타일 시트, 이미지 및 비디오 등 라이브러리를 이용할 수 있습니다. 특히 Java Script의 대표적 library인 Jquery를 이용할 때 사용할 수 있습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Jquery 사용시 다시 설명하도록 하겠습니다.
'50대에 코딩에 도전해 봅니다.' 카테고리의 다른 글
| 18. Java Script - 조건문 if (0) | 2022.04.18 |
|---|---|
| 17. Java Script - onclick, document.querySelector (0) | 2022.04.14 |
| 15. Java Script 란 ? (0) | 2022.03.22 |
| 14. 내 컴퓨터에 웹서버 설치하기 (0) | 2022.03.18 |
| 13. 클라이언트(Client) vs 서버( Server) (0) | 2022.03.16 |
댓글