こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、JavaScript実践として、JavaScriptの概要説明をしたいと思います。
JavaScriptは、htmlとcssに比べると少し難しいですが、覚えるとホームページをリッチにすることができて、コーディングが楽しくなるので、挑戦してみましょう！
YouTubeにもアップしていますので、見ていただけたら嬉しいです！
JavaScriptとは？
JavaScript（ジャバスクリプト）とは、Webブラウザ上で動くプログラム言語のことで、js（ジェイエス）と略して言ったりします。
Webブラウザ上で動くので、phpのようにサーバーで動くプログラムとは違い、サーバーにアップロードせず動作を確認できるので、プログラム言語の中では開発しやすいため、初心者におすすめのプログラム言語です。
JavaScriptは、Webサイトをリッチにすることができ、主に「画像クリックで拡大」や、「商品が横にスライドする」など、Webサイトを見ていると良くあるようなアニメーションを実装することができます。
しかも、こういったアニメーションはネット上にライブラリがアップロードされていて、無料でダウンロードすることができます。
ただ、htmlとcssとは違い、しっかりプログラム言語なので、ある程度の学習は必須になります。
JavaScriptとJavaの違い
ここで良く間違えやすい「JavaScript」と「Java」について解説しておきます。
JavaScriptはWebサイト制作で使用するプログラム言語で、JavaはSNSやスマホアプリ開発などに使われる言語です。
あまりWebの知識がない方がJavaScriptのことがJavaと言ったりしますが、全く別物なので注意しましょう。
JavaScriptって何ができるの？
「JavaScriptとは？」でも言いましたが、Webサイトをリッチにすることができ、ユーザーに気持ちよく閲覧してもらうことができます。
- 画像がそのままだと小さいのでクリックして拡大して見れる
- 商品が指1本の動作で色々な角度から見れる
- メニューボタンをクリックしたら見たいページが下から表示される
など、ありとあらゆるアニメーションがJavaScriptで実装することができます。
このページはあまりアニメーションは使っていないのですが、右下の「↑」ページトップボタンもJavaScriptで実装しています。
通常であればパッと一瞬でページトップに飛びますが、ぬるぬるっとページトップに飛ぶようにしています。
こうすることで、いま自分がページのどのくらいの位置にいたか、このページのボリューム感が分かるようになります。
JavaScriptを取り入れることで、単純にリッチにするだけではなく、ユーザーにとって使いやすいWebサイトにすることができます。
JavaScriptの書き方
では早速、JavaScriptの書き方について解説します。
まずは、以下のコードをテキストエディターにコピーして保存し、Webブラウザで開いてみましょう。
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello world!!");
</script>
</body>
</html>どうでしょうか？
「Hello world!!」と表示されたでしょうか？
これがJavaScriptの基本の書き方で、「<script> 〜〜〜 </script>」スクリプトタグで囲んで記述します。
上記コードは「ブラウザに Hello world!! と書き込む」例になります。
テキストを置き換えてみる
上記コードだとJavaScriptの意味があまりないので、次にテキストを置き換えてみましょう。
先ほどのファイルに上書き保存して、ブラウザを更新してみましょう。
<!DOCTYPE html>
<html>
<body>
<p id="sample">元のテキスト</p>
<script>
var elem = document.getElementById("sample");
elem.innerHTML = "置き換えたテキスト";
</script>
</body>
</html>「置き換えたテキスト」と表示されたはずです。
本来であればpタグに囲まれている「元のテキスト」が表示されるのですが、JavaScriptでテキストを置き換えています。
5秒後にテキストを置き換える
テキストを置き換えるだけではアニメーションとは言えないので、次は5秒後にテキストが置き換わるようにしてみます。
<!DOCTYPE html>
<html>
<body>
<p id="sample">元のテキスト</p>
<script>
function txtChange() {
var elem = document.getElementById("sample");
elem.innerHTML = "置き換えたテキスト";
}
setTimeout(txtChange, 5000);
</script>
</body>
</html>5秒後にテキストが置き換わったでしょうか？
少し解説すると、先ほどと同じテキストを置き換える記述を「function」で囲みました。
functionとは関数のことで、1つのまとまりにできるイメージです。
その関数を「setTimeout」で5000ミリ秒（5秒後）に実行すると言った書き方です。
このように「何秒後にこれを動かす」「何かが実行（表示）されたらこうなる」と言ったことがJavaScriptで実装することができます。
最後に
以上、JavaScriptの概要説明でした。
初心者におすすめのプログラム言語ではありますが、ある程度の学習は必要になるので、初めは「どんなことをWebサイトでやりたいか」から考えるのが良いと思います。
次回は、jQueryについて解説したいと思います。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント