2021. 12. 22. 21:17ㆍ2021.12 모각코 javascript
안녕하세요. brandy 입니다. 이번 모각코 Javascript 3차시에서는 HTML과 Javascript를 연결하는 방법에 대해 학습하였습니다.
1222.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="changeText()">click me</button>
<script src="./index.js"></script> <!-- <script>내에서 작성한 태그는 h1태그이다. script 태그를 가진 요소는 h1보다 밑에 있어야 한다.-->
<h1>Hello Javascript!</h1>
</body>
</html><body> 태그 내의 코드들을 이것저것 옮겨보았습니다.
<button> 태그의 경우 맨 위로 보낼 경우 brandy 화이팅 !!! 위로 오며, 맨 아래로 보낼 경우 brandy 화이팅 !!! 밑으로 버튼이 위치합니다.
html 파일 내에서 Javascript 코드를 사용하기 위해서는 어제자로 2가지 방법을 소개해드렸는데요,
1번째 방법이 <html> 태그 내에 <script> 내용 </script> 태그 삽입 or 2번째 방법이 같은 폴더 내에 JS 파일을 만들어 <script src="파일경로+이름"></script>의 방법이 있었습니다.
저는 이번 2번째 방법으로 VSCode 내 같은 폴더에다가 index.js 파일을 만들어 <script src>로 html 페이지 내에 Javascript 코드를 연결해주었습니다.
여기서 한 가지 의문이 생겼습니다. Javascript 파일 이름을 보면 'index.js'라는 파일 이름을 주로 사용하는 것을 보았는데요, 왜 index.js라는 이름을 쓰는지 궁금했습니다. 참고한 글은 React 기준으로 나와있는데 같은 JS 계열이니..! (node.js도 같은 것 같더라구요!)
부족한 부분 채우기 - 1
index.js
서치를 해보니, src 폴더에 포함되어 있으며 메인 프로그램이라고 합니다. 여기에서 HTML 템플릿 및 Javascript의 컴포넌트를 조합하여 렌더링하고 실제 HTML 페이지에 표시한다고 합니다.
app.js
src 폴더에 있으며 컴포넌트를 정의하는 프로그램. 실제로 화면에 표시되는 내용을 정의
index.html
public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로 HTML 템플릿 파일.
index.js에 의해 렌더링된 결과가 표시된다. 파일 이름 바꾸면 오류가 발생한다.
changeText() 함수를 1222.html 페이지에서 호출해주었습니다. 그렇다면 함수는 호출되었으니 함수를 정의해주어야겠죠?
함수 정의는 index.js에서 해주었습니다.
그리고 h1[1] 이라고 해주면 click me 버튼을 클릭해도 brandy 화이팅!!! 이라고 문구가 바뀌지 않습니다.
부족한 부분 채우기 - 2
그리고, HTML Element를 찾는 방법으로 3가지가 있었는데요(ID,Tag,Class) 그중에서도 Tag를 통하여 element를 찾는 방법을 구현해보았습니다.
코드를 보면서 h1[0]? 왜 배열로 접근하는거지? 했는데 찾아보니
Tag Name으로 찾을 경우 HTML Elements 배열로 리턴된다고 합니다. 그래서 h1[0]으로 접근했습니다.
<h1>안에 들어있는 문구 덩어리 자체(Hello Javascript!)를 첫번째 index로 보는것 같습니다. 인덱스 1번으로 했을때 접근이 되지 않았기 때문입니다. (이 부분에 대해서는 저도 헷갈리네요. 지적 해주시면 감사하겠습니다)
이 부분이 조금 부족하여 예제 실습을 더 해보았습니다.
부족한 부분 채우기 - 3
절대경로와 상대경로
위에서 <script src="">로 경로를 표시해주었는데요, 경로 정리를 한번 해보았습니다.
절대경로 : 웹페이지나 파일이 가지고 있는 고유한 경로 www.naver.com OR C:\users\:~
상대경로 : 파일이 위치한 곳 기준
/ 루트
./ 현재 위치 (위에서 1222.html과 index.js는 같은 폴더(디렉토리) 안에 위치해있기 때문에 ./ 현재 위치 경로를 사용하였습니다)
../ 현재 위치의 상위 폴더
React 파일들에 대해서 (index.js, App.js ,index.html)
아래내용은 이 분의 블로그에서 참조한 내용이 많다. index.jsApp.jsindex.htmlindex.jssrc 폴더에 포함되어 있다. 메인 프로그램이라고 할 수 있다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하
velog.io
'2021.12 모각코 javascript' 카테고리의 다른 글
| 21.12월 모각코) Javascript 2일차 - DOM 구조 학습 (0) | 2021.12.22 |
|---|---|
| 21.12월 모각코) Javascript 1일차 (0) | 2021.12.20 |