JavaScript를 사용하여 대화형 작업 추가
JavaScript (또는 ECMAScript)는 대화형 작업을 웹 페이지에 추가하는 데 도움이 되는 프로그래밍 언어이다. 예를 들어 JavaScript를 사용하여 사용자가 단추를 선택할 때 발생하는 이벤트 또는 동작 (팝업 창 열기 등)을 정의할 수 있다. JavaScript를 사용하면 웹 페이지에서 콘텐츠를 다시 로드하지 않고도 추가하거나 제거할 수 있다. 웹 개발자는 웹 브라우저를 사용하여 스크립트를 테스트하고 이에 대한 피드백을 얻을 수 있다.
웹앱에 대한 예제 JavaScript 파일을 설정한다. 밝은 테마와 어두운 테마 사이를 전환하는 단추를 만든 다음, 실제 테마 전환을 수행하는 JavaScript 코드에 단추를 연결한다. 이 작업이 완료되면 브라우저의 개발자 도구를 사용하여 완료된 프로젝트를 확인한다.
JavaScript에 연결
CSS와 마찬가지로 JavaScript를 HTML 파일에 직접 추가할 수 있지만 여러 웹 페이지에서 JavaScript 코드를 더 쉽게 재사용할 수 있도록 별도의 파일에 JavaScript를 저장하는 것이 가장 좋다. 예를 들어 웹 페이지의 본문 어디에나 <script>alert('Hello World')</script>를 추가하여 팝업 경고를 만들 수 있다. 그러나 사용자 지정 기능이 필요한 모든 파일에 연결할 수 있는 별도의 파일에 JavaScript 코드를 추가하는 것이 좋다. HTML 스크립트 태그 <script>를 사용하면 외부 JavaScript 파일에 연결할 수 있다. 이것이 이 연습에서 웹앱을 구성하는 방법이다.
...
<ul>
<li class="list">Add visual styles</li>
<li class="list">Add light and dark themes</li>
<li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...
<script> 요소는 <head> 내에 또는 <body>의 다른 위치에 배치할 수 있다. 그러나 <script> 요소를 <body> 섹션 끝에 배치하면 먼저 모든 페이지 콘텐츠를 화면에 표시한 다음, 스크립트를 로드할 수 있다.
내결함성 추가
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
<noscript> 요소를 추가하는 것은 ‘내결함성’ 또는 ‘점진적 저하’의 한 가지 예이다. 코드는 <noscript> 요소를 사용하여 특정 기능이 지원되지 않거나 사용할 수 없는 경우를 검색하고 계획할 수 있다.
strict 모드 설정
JavaScript를 시작하면서 처음에는 숫자, 수학, 텍스트 조작, 날짜 및 정보 저장에 집중하는 경우가 많다. 때때로 JavaScript는 입력하는 데이터 형식에 관해 가정한다. 예를 들어 할당, 수학 또는 논리적 동치 (logical equality)에서 예기치 않은 결과를 제공할 수 있다. JavaScript는 친숙하고, 코드 작업을 수행하며, 결과가 오류인 경우에도 솔루션을 제공한다. 이 동작을 재정의하려면 strict 모드 를 활성화할 수 있다. 이렇게 하면 보고되지 않는 오류가 줄고 성능이 향상되며, 경고는 늘고 안전하지 않은 기능은 줄게 된다.
# app.js 파일을 열고 JavaScript
'use strict'
단추 추가
사용자가 웹 페이지에서 밝은 테마와 어두운 테마 사이를 전환할 수 있도록 하는 방법이 필요하다. 이 연습에서는 HTML <button> 요소를 사용하여 이 기능을 구현한다.
...
<ul>
<li class="list">Add visual styles</li>
<li class="list">Add light and dark themes</li>
<li>Enable switching the theme</li>
</ul>
<div>
<button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
<button> 요소에는 CSS 스타일을 적용하는 데 사용할 class 특성이 있다.
# CSS
.btn {
color: var(--btnFontColor);
background-color: var(--btnBg);
}
CSS 파일에서 HTML 단추에 대한 클래스 선택기를 추가한다. 단추 색을 일반 밝은 테마 또는 어두운 테마 색과 다르게 만들려면 단추 선택기에서 color 및 background-color 속성을 설정한다. 이 클래스 선택기는 이 단추 전용이며 CSS 파일에서 글꼴 색을 적용하는 데 사용되는 범용 선택기(*)를 재정의한다.
# CSS
.btn {
position: absolute;
top: 20px;
left: 250px;
height: 50px;
width: 50px;
border-radius: 50%;
border: none;
color: var(--btnFontColor);
background-color: var(--btnBg);
}
클래스 선택기를 수정하여 단추의 크기, 형태, 모양 및 배치에 대한 몇 가지 규칙을 추가한다. 다음 CSS는 페이지 머리글 오른쪽에 원형 단추를 만든다.
.btn:focus { outline-style: none; } # CSS
단추의 모양을 개선하려면 단추 선택기 뒤에 의사 클래스 선택기 btn:focus를 추가한다. outline-style 규칙을 none으로 설정하면 단추가 선택된 경우(포커스를 받음) 사각형 윤곽선이 제거된다.
# CSS
.light-theme {
--bg: var(--green);
--fontColor: var(--black);
--btnBg: var(--black);
--btnFontColor: var(--white);
}
.dark-theme {
--bg: var(--black);
--fontColor: var(--green);
--btnBg: var(--white);
--btnFontColor: var(--black);
}
밝은 테마와 어두운 테마에 대한 CSS를 업데이트한다. 새로운 변수 btnBg 및 btnFontColor를 정의하여 단추 관련 배경색 및 글꼴 색을 지정한다.
이벤트 처리기 추가
단추를 선택했을 때 특정 작업을 수행하도록 하려면 JavaScript 파일에 이벤트 처리기가 필요하다. 단추의 경우 click 이벤트에 대한 이벤트 처리기가 필요하다. 이벤트 처리기 함수는 click 이벤트가 발생할 때 실행된다. 이벤트 처리기를 추가하려면 해당 단추에 대한 참조가 필요하다.
JavaScript 파일에서 document.querySelector를 사용하여 단추 참조를 가져온다.
# JavaScript
const switcher = document.querySelector('.btn');
click 이벤트에 대한 이벤트 수신기 및 이벤트 처리기를 추가한다. 다음 코드에서는 click 이벤트에 대한 수신기를 추가한다. 이벤트 수신기에 전달되는 함수는 실제 이벤트 처리기이다.
# JavaScript
switcher.addEventListener('click', function() {
document.body.classList.toggle('dark-theme')
});
toggle 메서드를 사용하여 요소를 dark-theme 클래스로 전환한다. 그러면 밝은 테마 대신 어두운 테마 스타일이 자동으로 적용된다. 그러나 올바른 테마를 표시하도록 단추 레이블도 업데이트해야 하므로 if 문을 추가하여 현재 테마를 확인하고 단추 레이블을 업데이트해야 한다.
# JavaScript
'use strict'
const switcher = document.querySelector('.btn');
switcher.addEventListener('click', function() {
document.body.classList.toggle('dark-theme')
var className = document.body.className;
if(className == "light-theme") {
this.textContent = "Dark";
}
else {
this.textContent = "Light";
}
});
둘 이상의 단어가 있는 변수 이름 (예: 변수 className)에 카멜 대소문자를 사용하는 것이 JavaScript 규칙이다.
콘솔 메시지
웹 페이지에 표시되지 않는 숨겨진 메시지를 만들 수 있다. 그러나 콘솔에 작성한 내용은 브라우저 개발자 도구에 표시된다. 콘솔 메시지를 사용하면 코드의 결과를 볼 때 실제로 도움이 될 수 있다.
# JavaScript
switcher.addEventListener('click', function() {
document.body.classList.toggle('dark-theme')
var className = document.body.className;
if(className == "light-theme") {
this.textContent = "Dark";
}
else {
this.textContent = "Light";
}
console.log('current class name: ' + className);
});
VS Code 의 JavaScript 파일에서 log를 입력하고 Enter 키를 눌러 console.log에 자동 완성을 사용할 수 있다. 텍스트 주위에 작은따옴표 또는 큰따옴표가 있는 텍스트 문자열 을 정의할 수 있다.
https://docs.microsoft.com/ko-kr/learn/modules/build-simple-website/
HTML, CSS 및 JavaScript를 사용하여 간단한 웹 사이트 빌드 - Learn
Visual Studio Code를 사용하여 HTML, CSS, JavaScript로 웹 사이트를 빌드하고, 브라우저에서 개발자 도구를 사용하여 작업을 확인함으로써 웹 개발을 시작합니다.
docs.microsoft.com
'Programming > Website' 카테고리의 다른 글
| [Website] Wix (윅스) (0) | 2022.09.03 |
|---|---|
| [Website] HTML for Webscraping (0) | 2022.05.11 |
| [Website] HTML, CSS 및 JavaScript를 사용하여 간단한 웹사이트 빌드 (2) (0) | 2022.02.06 |
| [Website] HTML, CSS 및 JavaScript를 사용하여 간단한 웹사이트 빌드 (1) (0) | 2022.02.06 |
| [Website] 구조화 질의 언어 (SQL ; STRUCTURED QUERY LANGUAGE) (0) | 2022.02.06 |
