JavaScriptのお勉強(2)
(1)で「document.write」はサイトの描画が遅くなるので非推奨らしい」と書きました。
具体的には、PageSpeed Insightでの評価が下がってくる、と言う事のようです。
この評価が低いと、Googleの検索結果の表示順位を下げられるようになったそうで。
少しでもランキングを上げたい人には重大な関心事項だと思います。
では、「document.write」の代わりに何を使えばよいのか？
検索してみると、「innerHTML」を使え、と出てきます。
やってみたら、コレ自体は意外と簡単でした。
「innerHTML」というのは、指定した領域（タグ）の内容を別のモノに差し替える、という機能になるようです。
例、下に画像と「画像をちぇんじ！」という文字列がありますが、「画像をちぇんじ！」という文字列をクリックしてみて下さい
画像が入れ替わりますね(・∀・)
書かれているコードはこれだけ
<script type="text/javascript">
function 関数名() {
document.getElementById('領域名').innerHTML = '<img src="画像のurl">' ;
}
</script>
<span onclick="関数名()">画像をちぇんじ</span>
解説
function 関数名() {
****
}
という書き方で関数を定義しています。
関数名は好きな名前を付けられます。
****の部分にスクリプトを書くと、以降はその関数名を指定するだけで、****の内容を実行してくれるようになります。
document.getElementById('領域名')
は、領域の名前（id）を指定しています。そういう書き方のルールなのでそのまま飲み込んで下さい(笑)
上記の画像を貼った領域に「hogehoge」という id を付けていたら、document.getElementById('hogehoge')で指定できます。
「.innerHTML」の部分が、上記で指定した領域idの中身を表しています。
※この「名前.プロパティ」というようなドットをつけた書き方は、プログラミングで非常によく目にしますね。解説すると非常に長くなりそうなので、そういうものだと思って飲み込みましょう(笑)
指定した領域の中身に、「＝」で値を代入しています。
つまり、指定した領域の中身を、別の内容に書き換えてしまう、と言う事になるわけですね。
続いて、トリガーとなる文字列に、「onclick」という指定をしています。
<span onclick="関数名()">画像をちぇんじ</span>
もうおわかりと思いますが、「 onclick="関数名()" 」という書き方で、クリックすると上で定義した関数を実行する、という意味になります。
トリガーも関数も何も指定せずに、直にスクリプトを書くと、読み込まれた瞬間に実行されるようになります。
このサイトのデザインでは、上部に黒板が表示されていると思います
※この記事を書いている時点では－－－将来デザインが変わってなくなるかも知れません(笑)
※スマホなど、黒板の幅より狭いデバイスで見ている人には非表示になっていると思います。
実は、サイトの表示を少しでも速くするために、最初に領域だけ用意して、中身は空にしてあります。
その後、ページの読み込みが終わった後に、その領域の内容を変更するようにしています。
そうすると、読み込み時に余計な情報を読み込まないので表示が速くなります（と思います）。
まぁ、0.0何秒という程度の話だと思いますが。
検索エンジンに余計な情報を読み込ませないという意味もありますね。
上部の黒板領域を再度変更させるスクリプトを書いてみました。
下の「TEST」ボタン －－－ 今回はボタンぽいデザインにしてみましたが、単なる文字列です －－－ をクリックすると、上部にある看板が差し替わります(笑)
（※幅の狭いデバイスの場合は、何もなかったところに画像が現れると思います。）
※上部画像はクリックすると黒板に戻ります。
TEST
※クリックするとページ上部まで自動的にスクロールします。
☆実は、「 innerHTML 」ではなく「 outerHTML 」にしてあります。innerHTMLは指定した領域の「中身」を表しますが、outerHTMLにすると、その領域ごと入れ替える事ができます。使い方はinnerHTMLの応用で。
コメント