バニラ JavaScript
- Vanilla JavaScript を Web ページに設定する
- バニラ JavaScript セレクター
- 配列を使用したバニラ JavaScript
- 要素のクラスを追加、削除、切り替え、チェックする
- バニラ JavaScript を使用した CSS スタイル
- まとめ
JavaScript は、HTML および CSS テクノロジーを使用した Web デザインで最も人気のある言語です。 この記事には、プレーンな JavaScript を参照する Vanilla JS が含まれています。
つまり、追加のライブラリなしで JavaScript を使用できます。 誰もが Vanilla JavaScript を最も軽量なフレームワークの 1つとして初期化します。
バニラ JavaScript を簡単に学習できます。 Vanilla JavaScript は重要で影響力のある Web アプリケーションを作成し、現在、ほとんどの有名な Web サイトは Web サイトに Vanilla JS を使用しています。
Facebook、Google、YouTube、Yahoo、Wikipedia、LinkedIn、Microsoft、Apple などは、ホームページで Vanilla スクリプトについて言及している Web サイトです。 Vanilla JavaScript の設定方法を見てみましょう。
Vanilla JavaScript を Web ページに設定する
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> を挿入します。 また、JavaScript ファイルを HTML ファイルに追加する別の方法もあります。
HTML ドキュメントの <head> タグ内に JavaScript ソース ファイルを追加できます。
<head>
<script src="script.js"></script>
</head>
src タグを使用して、ソース JavaScript ファイルのパスに <script> タグを追加します。
バニラ JavaScript セレクター
セレクターは、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 は、命名 demo として作成されました。
スクリプト内で、document.getElementById("demo") を呼び出して、ID でデモ要素を取得しました。
したがって、この JavaScript 関数は 2つの数値を加算し、id を呼び出して結果を出力します。
出力：
配列を使用したバニラ JavaScript
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++ を実行する必要があります。 これは、反復ごとにカウンターに 1つ追加する必要があることを意味します。
出力：
要素のクラスを追加、削除、切り替え、チェックする
Vanilla JavaScript は、jQuery クラス操作 API に似た classList API を提供します。 classList は読み取り専用ですが、クラスに対して add、remove、toggle、および check を実行します。
<!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> に対して add、remove、および toggle DOM 要素を実行します。 ボタンをクリックすると、<p> 要素の外観が変更されます。
<script> の中には、add、remove、toggle の 3つの関数が作成されています。 addFunc() 関数は、<p> 要素に CSS スタイルを追加します。
これを行うには、変数を classlist の getElementByID に割り当てることができます。
その後、宣言された変数 (list.add()) に対して add メソッドを呼び出すことができます。これにより、背景色とパディング プロパティが <p> 要素に追加されます。
したがって、removeFunc は <p> 要素からスタイル プロパティを削除し、toggle ボタンをクリックすると toggleFunc が myStyle のオンとオフを切り替えます。 次のように出力を取得できます。
追加：
削除：
トグル：
classList プロパティは Internet Explorer 9 バージョンの以前のバージョンをサポートしていないことに注意してください。
バニラ 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 には、これら以外にもメソッドや関数があります。 バニラ 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.