JavaScriptの基本

2014年5月18日：JavaScript

HTML/CSSでは、ページに表示する能力はありますが、計算させることはできません。

ただの表示であって、プログラムではないのです。

でも、ウェブページで計算させたりできたらいろいろと応用が広がるのではと考えてつくられたのがJavaScriptです。

 

JavaScriptはHTMLファイル上でプログラムのように動作させることができます。

そして、JavaScriptはサイトを見ている人のパソコンで動作させるため、サーバーの負担がかかりません。

サーバーはJavaScriptによるプログラムを送るだけで、動作はクライアント側が行うのです。

 

サーバー負担が減るというメリットはありますが、JavaScriptを使用できる環境にクライアント側がないと動作しないというデメリットもあります。

また、ソースを見られるので、すぐに真似されるというデメリットもあります。

 

スクリプトのかき方

 では、さっそくですが、JavaScriptを使用してみましょう。

以下のようにプログラムをつくり、sample.htmlと保存してください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
alert("Hello world!");
</script>
</head>
<body>
<h1>題名</h1>
<p>文章</p>
</body>
</html>

 

すると「Hello, world!」と表示され、

helloworld

OKをクリックすると

題名と文章

が現れます。

ソースの解説

はじめにでてくる

<!DOCTYPE html>

では、HTMLの種類がHTML５であることを示しています。

HTML5、HTML、XHTMLに応じて、スクリプトの記述が異なります。

【HTML5】

<script>
ここにスクリプト
</script>

【HTML】

<script type="text/javascript">
<!--
ここにスクリプト
//-->
</script>

【XHTML】

<script type="text/javascript">
//<![CDATA[
ここにスクリプト
//]]>
</script>

 

HTML５が一番スッキリした形になっています。

ご利用のHTMLのバージョンによって使い分けてください。

 

そして、コードでは

<script>
alert("Hello world!");
</script>

により「Hello world!」というアラート表示させています。

 

以上のようにHTMLファイルに書き込むだけで、簡単にJavaScriptは使用できます。

著者：安井 真人(やすい　まさと)

TOP