やっぱり。JavaScript！-ホームページを操作する仕組み。
みんな大好きホームページ。いろんな情報が公開されて見やすく工夫されていますね。いろんなギミックな表現、なんか楽しくなる画面上の仕組みはJavascriptで作られていることもたくさんあります。その仕組みを少し見ていきましょう。
まず、ホームページはHTMLという文字列で記述されています。それをブラウザで処理して画面上に、視覚的に見やすい、画像なども表示させて楽しく表現できるものとなっていて、見るだけでもなんだか楽しくなってしまうサイトも多くあります。
HTMLは文字列と言われてもちょっとわかりにくいですね。
基本の構文は
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> タイトル</title>
</head>
<body>
本文
</body>
</html>
こんな文字で構成されています。これをブラウザで見ると、
「本文」とだけ表示されてると思います。これ、ホームページです。自分で書いて自分で表示させることができました！
最初に知ったときには思ったより簡単にできるんだなと感じたことを覚えています。
これを"JavaScript"で操作することができます。操作してみましょう！
まず、今「本文」としか表示されていないので、もう少し何か書いてみましょう。例えば「こんにちは」と表示させてみましょう。
HTMLには記述のルールがあるのでそれに従って書きます。一つの段落を作るときは、
<p></p>
を使います。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> タイトル</title>
</head>
<body>
本文
<p>こんにちは</p>
</body>
</html>とします。表示を確認します。
となっていると思います。
次にJavaScriptを記述する場所ですが、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> タイトル</title>
<script>JavaScripはここに書きます。</script>
</head>
<body>
本文
<p>こんにちは</p>
</body>
</html>
そしてブラウザに表示させると同時に命令を実行するには
<script>
window.onload = function(){
ここに命令を書きます。
}
</script>
と書きます。
命令を書いてみましょう。変数に<p></p>に書いてある文字を入れて、違う文字に変更してみましょう。
<script>
window.onload = function(){
let element = document.getElementsByTagName('p');
element[0].textContent = "Hello";
}
</script>
let element = document.getElementsByTagName('p'); でまず変数elementに<p>こんにちは</p>を入れます。実は<p>タグなどは配列で取り込まれますので取り出す時は、
element[0]
という感じで最初の値を取り出します。[0]としているのは配列は0から始まるので、最初の<p>ということです。.textContent は文字を取得するという命令です。
element[0].textContent = "Hello";
これで<p></p>の文字(element[0].textContent)を"Hello"に変えて！という命令になります。
これでブラウザで読み込むと同時に"Hello"と表示されるようになります。
こんな感じで今回は<p></p>でしたが、HTMLで使われるいわゆる"タグ"を取得していろいろ操作できます。ここでは、
getElementsByTagName();
を使っていますが、id、class などを取得(.getElementById()など)する命令を使ってCSSを変えたりしてレイアウト的なものや機能自体を付け加えたりできます。(注) "id"を取得するとき、".getElementById()"を使う時は配列ではなく1つ１つ値が指定されますので[ ]は必要ありません。
より高度にいろいろやっていくのにはHTML、とCSSの知識が必要になりますね。
この記事が気に入ったらサポートをしてみませんか？