고정 헤더 영역
상세 컨텐츠
본문
- 연휴 집에서 복습 겸 JavaScript 1시간 입문 정리 영상이란 걸 봄,
'개발자의 품격'이란 초보 코딩 유튜버(전투력, 아니 구독자 약 1.1만)의 영상을 봄. 소스코드 참조.
-기본 개념 설명하는 입문 영상인데 왠지 jquery가 포함되어 있고, 그 때문에 import 코드가 들어간다. 그래서 코드만 처음부터 봤다면 나도 겁 먹을 뻔 ㄷㄷ
- 여튼 이 포스팅의 중요한 점은, <script> 태그는 <body>태그 아랫쪽에 쓴다고 설명해준 부분이다. 나도 수업 때 보면 선생님께서는 코드를 자연스럽게 <body> 태그 안, 바디 내용 아래쪽에 <script>를 작성하기 시작하신 게 떠올랐다. 이 이유는 http 파일에서 페이지를 불러올 때 위에서 아래로 코드를 읽어내려오는데, css 코드 처럼 head 태그 안에 있을 경우, javascript 코드의 에러가 발생할 수 있다고 했다. 문서 안의 태그를 객체로 받아와서 동적 기능을 만드는데, 바디 태그가 없는데 작동을 먼저 시켜서 문제가 될 수 있다고 했다. 그리고 JavaScript 자체가 호이스팅(hoisting: 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어올려진 '것 같은' 현상: 밑에 선언되어 있는 변수도 위에 코드에서 먼저 실행이 됨) 기능이 있기 때문에(정확한 선생님의 논리가 기억나지 않는다...) 이 때 같이 설명해준 것이 jQuery의 document.ready 였다. 이를 통해 문서가 작성된 뒤 JavaScript 가 실행되는 것이다.
|
1
2
3
|
$( document ).ready(function() { // Handler for .ready() called.}); |
- hoising : 관련 참고 블로그:[JavaScript] 호이스팅(Hoisting)이란?
https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/ ,
- 호이스팅 관련 설명도 (내 기준) 자세하고, 관련 기술배경으로 실행 컨텍스트 살짝 다루고 있으며 댓글에는 참고자료 링크도 있는 모범적인 설명 페이지이다. - 이 블로거 HANAMON 님 완전 친절 ㅜㅜ 도둑처럼 깃허브 몰래 팔로잉한 나를 맞팔해주심 ㅜㅜ 감동..
호이스팅 참고블로그 2 https://tibetsandfox.tistory.com/23
- document.ready 관련 참고 블로그:[javascript] 페이지 로드 후 불러오기, onload, ready, DOMContentLoaded
출처: https://itun.tistory.com/510 [Bino] ,
VanillaJS 가 있으면 DOMContentLoaded 이거 쓰는 게 낫다고 하니, VanillaJS 도 공부해보자 ㅜㅜ (언제???)
이 document.ready 포스팅과 처음 유튜브에서는 바디 태그 아랫쪽에 작성하면 화면의 로딩이 빨라져서 사용자 기준에서 더 좋다고 하였다. 그런데 .js 파일로 외부 적용을 할 경우에는 그 파일에 document.ready 의 기능을 하는 내용이 전부 박혀있는 것일까?
개념 검색할 때마다 나오는 TCP SCHOOL 이라는 코딩 사이트 설명에는 웹 브라우저가 미리 읽어올 수 있어서 로딩도 빨라진다고 한다. http://tcpschool.com/javascript/js_intro_apply
여기서 웹 브라우저가 읽어오는 것과 HTTP 웹 페이지 로딩이 다른 영역일 경우 상충되는 부분은 전혀 없다. 어떻게 작동하는지는 아직 모르겠지만.
여전히 공부가 많이 필요한 부분이지만 일단 이 정도로만 보자면, 결론은
1. 내부 자바스크립트 코드로 적용
- JavaScript를 작성할 경우에 <body> 태그 아래 쪽에 화면 구성 코드가 작성된 뒷 부분에 작성을 할 것.
- 호이스팅으로 인한 에러가 발생하지 않도록 let과 const로 잘 정리할 것.
- head로 올려야 하거나 애매한 것이 있으면 onload, ready, DOMContentLoaded 등을 써볼 것
2. 외부 자바스크립트 파일로 적용
- ????
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
</head>
<body>
<div class="conteiner">
<div>이름:
<input type="text" name="name" id="name"></div>
<div>지역:
<select id="city" onchange="changeCity();">
<option value="02">seoul</option>
<option value="051">Busan</option>
</select>
<div>동네:
<select id="region_02">
<option value="">강남</option>
<option value="">서초</option>
</select>
<select id="region_051" style="display:none">
<option value="">서면</option>
<option value="">동래</option>
</select>
</div>
</div>
<button type="button" onclick="regist();">등록</button>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<script>
// 보통은 헤드 말고 바디 아래에서 스크립트 쓰는 것 권장함. (개발자의 품격) 왜냐하면 서비스적인 측면에서 사용자가 느끼는 것 중점 하는
// 것. 스크립트를 바디 안에 넣음으로써 다른 것 다 작동되고 자바 스크립트가 작동되도록. 화면 구성이 더 빠르게 되도록 함. ... 음..
// ㅋㅋ
function regist() {
alert(document.getElementById("city").value);
alert($("#name").val());
}
function changeCity() {
// let city = document.getElementById("city").value; document
// .getElementById("region_02") .style .display = "none"; document
// .getElementById("region_051") .style .display = "none"; document
// .getElementById("region_" + city) .style .display = "";
let city = $('#city').val();
$('#region_02').hide();
$('#region_051').hide();
$('#region_' + city).show();
}
function loadCity() {
let city = [
{
code: "02",
name: "서울"
}, {
code: "051",
name: "부산"
}
];
for( var i= 0; i<city.length;i++){
if(i== 0){
$("#city").append("<option value='" + city[i].code + "' seleted>"+ city[i].name +"</option>");
}else{
$("#city").append("<option value='" + city[i].code + "'>"+ city[i].name +"</option>");
}
}
// $("#city").append("<option value='064'>제주</option>");
// $("#city").append("<option value='062'>광주</option>");
}
loadCity();
</script>
</body>
</html>
|
cs |
'HTML.CSS.JavaScript' 카테고리의 다른 글
| [국비지원무료교육][빅데이터 개발자 과정] 프로젝트 중, 내 위치 좌표 가져오기: GeoLocation(2) (0) | 2022.02.28 |
|---|---|
| [국비지원무료교육][빅데이터 개발자 과정] 프로젝트 중, 내 위치 좌표 가져오기: GeoLocation (0) | 2022.02.21 |
| 랜덤 가위바위보 게임 ㅎ (0) | 2022.01.25 |
| 날짜 데이터 JavaScript: D-day : 93일 (0) | 2022.01.24 |
댓글 영역