今回は、前回の記事『今さら聞けないWeb知識「HTMLとCSSってなんだ？」』
の続きの記事です。まだ前回の記事をお読みでない方は、下記リンクからお読みください。
前回はホームページを作る上で必ずと言って良い程、重要な役割を果たしているHTMLとCSSについて説明をさせていただきましたが、今回はホームページの隠れた優秀な機能「JavaScript」についてご説明をさせていただきます。
JavaScript(ジャバスクリプト)はWebサイトに動きをつけるために開発されたプログラミング言語の一つです。当初はWebサイトのスライドショーなどの簡易な機能としてのみ利用をされてきましたが、現在ではパスワードの認証システム・アプリなど、おそらく私達が１回も使ってない日はないと思える程JavaScriptは浸透しており、Web業界ではNo.1の人気を誇る言語です。
前述したとおり、アプリの開発などのバックシステムの中でもよくJavaScriptを利用することがあるのですが、今回は理解しやすいフロントの部分のみ簡単に説明させていただきます。
サイトのフロント部分にはよくJavaScriptの中のJqueryを利用してサイトに動きを出します。JqueryはJavaScriptをより簡単に扱いやすくしたファイルの1種です。(ライブラリと呼ばれる)
※ライブラリとは、通常であればいちいち記述しなくてはいけない部分をまとめて省略してしまい、簡単に呼び出すことができるようにした機能。
JavaScriptでそのまま使おうとすると
→右足を前方に出す+左足を前方に出す+姿勢は立ったまま+前方を見る=歩く
となるものが、
Jqueryを使うと
→歩く
だけで済むようになる機能のこと。(例外もあります)
前回記述したコード
HTML
< h1 >hello!< /h1 >
CSS
h1{color : #008000 ;
font-size :20px;
}
に、例えばボタンを押すとhello!の文字色が変わるエフェクトをJavaScriptでつけた場合、
HTMLとCSSの記述ファイルに加え、JavaScriptのファイルも追加します。
HTML
< h1 >hello!< /h1 >
CSS
h1{color : #008000 ;
font-size :20px;
}
（追加）
JavaScript
function changeColor(idname){
var obj = document.getElementById(idname);
obj.style.color = ‘#ff0000’; //文字色を赤にする
}
そして、このままではHTML側でJavaScriptが読み込まれないため、HTMLにJavaScriptが読み込まれるよう記述し、押すと変わるボタンも設置します。
HTML
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<script src=”JavaScript”></script>
</head>
<body>
<h1 id=”target”>hello!</h1>
<input type=”button” value=” ボタン ” onclick=”changeColor(‘target’);” />
</body>
</html>
CSS
h1{color : #008000 ;
font-size :20px;
}
JavaScript
function changeColor(idname){
var obj = document.getElementById(idname);
obj.style.color = ‘#ff0000’; //文字色を赤にする
}
このようなコードになり、ボタンを押すと前回指定した緑色から赤色に文字色が変わるようになります。（実際にこのような機能をホームページの制作に利用することは殆どありませんが、）今回は簡単にJavaScriptを説明するために紹介させていただきました。
プログラミングの特にフロントと呼ばれる部分。実は英語が読めるとある程度意味がわかることもあるので興味がある方はぜひ触れてみてください。