바닐라 자바스크립트
- Vanilla JavaScript를 웹 페이지로 설정
- 바닐라 자바스크립트 선택자
- 배열이 있는 바닐라 자바스크립트
- 요소의 클래스 추가, 제거, 전환 및 확인
- Vanilla JavaScript를 사용한 CSS 스타일
- 결론
JavaScript는 HTML 및 CSS 기술을 사용한 웹 디자인에 가장 널리 사용되는 언어입니다. 이 문서에는 일반 JavaScript를 참조하는 Vanilla JS가 포함되어 있습니다.
즉, 추가 라이브러리 없이 JavaScript를 사용할 수 있습니다. 누구나 Vanilla JavaScript를 가장 가벼운 프레임워크 중 하나로 초기화합니다.
Vanilla JavaScript를 쉽게 배울 수 있습니다. Vanilla JavaScript는 중요하고 영향력 있는 웹 애플리케이션을 생성하며 대부분의 유명 웹사이트는 현재 웹사이트에 Vanilla JS를 사용합니다.
Facebook, Google, YouTube, Yahoo, Wikipedia, LinkedIn, Microsoft, Apple 등은 홈페이지에 Vanilla 스크립트를 언급하는 웹사이트입니다. Vanilla JavaScript를 설정하는 방법을 살펴보겠습니다.
Vanilla JavaScript를 웹 페이지로 설정
JavaScript는 CSS와 HTML로 실행됩니다. 따라서 JavaScript 기능이 작동하려면 HTML 문서 내부에 있거나 HTML 문서와 연결되어 있어야 합니다.
<!DOCTYPE html>
<html>
<title>Vanilla JavaScript</title>
</html>
<body>
<script>
var myName = "Rashmi";
alert(myName);
</script>
</body>
<body> 태그 사이 아무 곳에나 <script>를 삽입합니다. 또한 HTML 파일에 JavaScript 파일을 추가하는 또 다른 방법이 있습니다.
HTML 문서의 <head> 태그 내에 JavaScript 소스 파일을 추가할 수 있습니다.
<head>
<script src="script.js"></script>
</head>
src 태그가 있는 소스 JavaScript 파일의 경로에 <script> 태그를 추가합니다.
바닐라 자바스크립트 선택자
선택기는 DOM에서 요소를 가져오는 데 사용됩니다. 그 중 일부는 getElementById, getElementByClassName, getElementByTagName 등을 포함합니다.
getElementById() 를 사용하여 ID로 요소를 가져올 수 있습니다. HTML은 필요한 각 구성 요소에 대해 ID를 사용합니다.
해당 요소에 JavaScript 함수를 추가할 때 getElementById 함수를 사용하여 스크립트 파일에서 해당 요소를 호출할 수 있습니다.
다음 사례를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<title>Vanilla JavaScript</title>
<body>
<h3>Hello Vanilla Javascript</h3>
<p id="demo">vanilla javascript</p>
<script>
document.getElementById("demo").innerHTML= 5+6;
console.log('no errors');
</script>
</body>
</html>
주요 목표는 ID를 생성하고 getElementById 함수를 호출하여 가져오는 것입니다. ID는 데모라는 이름으로 생성되었습니다.
스크립트 내에서 document.getElementById("demo")를 호출하여 ID로 데모 요소를 가져왔습니다.
따라서 이 JavaScript 함수는 두 개의 숫자를 더하고 해당 id를 호출하여 결과를 출력합니다.
출력:
배열이 있는 바닐라 자바스크립트
JavaScript Vanilla는 배열 및 노드 목록 항목 내의 값을 반복하고 액세스하는 for 루프를 제공합니다.
<!DOCTYPE html>
<html>
<title>Vanilla JavaScript</title>
<body>
<h3>My javascript</h3>
<p id="demo">vanilla javascript</p>
<script>
var countries = ["Netherlands","Canada","USA"];
for(var i=0;i<countries.length;i++)
console.log(i)
</script>
</body>
</html>
위의 코드는 국가 문자열 배열을 반복하기 위해 for 루프를 사용했습니다.
for 루프 내에서 배열의 현재 값을 나타내는 카운터 변수를 선언했습니다. 값 0을 할당했습니다.
for 루프는 length 키워드를 사용하여 배열의 요소 끝에서 반복됩니다.
반복할 때마다 i++가 실행되어야 합니다. 이는 각 반복 후 카운터에 하나를 추가해야 함을 의미합니다.
출력:
요소의 클래스 추가, 제거, 전환 및 확인
Vanilla JavaScript는 jQuery 클래스 조작 API와 유사한 classList API를 제공합니다. classList는 읽기 전용이지만 클래스에 대해 추가, 제거, 토글 및 확인을 수행합니다.
<!DOCTYPE html>
<html>
<head>
<title>class list</title>
</head>
<style>
.myStyle {
background-color: cornflowerblue;
padding: 16px;
}
</style>
<body>
<button onclick="addFunc()">Add</button>
<button onclick="removeFunc()">Remove</button>
<button onclick="toggleFunc()">Toggle</button>
<div id="classlist" class="myStyle">
<p>Classlist perform</p>
</div>
<script>
function addFunc() {
const list = document.getElementById("classlist").classList;
list.add("myStyle");
}
function removeFunc() {
const listRemove = document.getElementById("classlist").classList;
listRemove.remove("myStyle");
}
function toggleFunc() {
const listToggle = document.getElementById("classlist").classList;
listToggle.toggle("myStyle");
}
</script>
</body>
</html>
위의 코드를 보면 단락 요소 <p>Classlist perform</p>에 DOM 요소 추가, 제거, 토글을 수행합니다. 버튼을 클릭하면 <p> 요소의 모양이 변경됩니다.
<script> 내부에는 add, remove 및 toggle을 위해 생성된 세 가지 기능이 있습니다. addFunc() 함수는 <p> 요소에 CSS 스타일을 추가합니다.
이를 위해 classlist에 대한 getElementByID에 변수를 할당할 수 있습니다.
그런 다음 선언된 변수 (list.add())에 add 메서드를 호출할 수 있습니다. 그러면 <p> 요소에 배경색과 패딩 속성이 추가됩니다.
따라서 removeFunc는 <p> 요소에서 스타일 속성을 제거하고 toggleFunc는 toggle 버튼을 클릭할 때 myStyle을 켜고 끕니다. 다음과 같이 출력을 얻을 수 있습니다.
추가하다:
제거하다:
비녀장:
classList 속성은 이전 버전의 Internet Explorer 9 버전을 지원하지 않습니다.
Vanilla JavaScript를 사용한 CSS 스타일
<style> 요소를 사용하여 CSS 스타일을 HTML 요소로 설정합니다. 따라서 Vanilla JavaScript는 CSS 스타일을 추가하기 위해 Camel 케이스 버전을 제공합니다.
.style을 사용하여 HTML 요소의 인라인 스타일을 가져오고 설정합니다. 다음 예를 보십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Set Inline Styles Demo</title>
</head>
<body>
<p id="intro">Inline style setting with Vanilla Javascript</p>
<script>
const phara = document.getElementById("intro");
// Appling inline styles on element
phara.style.color = "blue";
phara.style.fontSize = "30px";
phara.style.backgroundColor = "yellow";
</script>
</body>
</html>
이 예제는 .style 속성을 추가하여 Vanilla JavaScript를 사용하여 인라인 스타일을 설정합니다. 다음과 같이 출력을 얻을 수 있습니다.
결론
이 기사에서는 일부 Vanilla JavaScript 속성 및 메소드를 살펴보았습니다.
Vanilla JavaScript에는 이 외에도 더 많은 메서드와 함수가 있습니다. Vanilla JavaScript는 다른 언어보다 빠릅니다.
JS 프레임워크를 공부하기 전에 Vanilla JavaScript를 배우는 것이 좋습니다. 따라서 Vanilla JavaScript는 초보자를 위한 고급 개요입니다.
Vanilla JavaScript를 사용하면 몇 가지 장점이 있습니다. 풍부한 인터페이스를 생성하고 클라이언트 측에서 실행 및 실행 속도를 높일 수 있으므로 서버 개입을 줄일 수 있습니다.
또한 소규모 애플리케이션에는 서버가 전혀 필요하지 않습니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.