はじめてのJavaScript 入門編

今日はJavaScript初歩編です。ブラウザ上に表示されるポップアップを出したいと思って書いてみました。JavaScriptを触ったことない方でもこの記事のコードをコピペするだけで簡単に実行することが可能です。またWEBブラウザ上でJavaScriptをポップアップ表示させるためには土台となるHTMLページが必要です。HTMLから始めたい人は下記の記事もご覧ください。

はじめてのHTML 自作リンク集を作成する備忘録HTMLを作成したことない人向けにコピペで出来る自作リンク集やナレッジ集を作成するためのメモです。ウェブページを1から作成と聞くとなんだか難しく聞こえますが、覚えてしまえばWindowsのメモ帳ひとつで簡単に作成できます。①Windowsのメモ帳を開きます。...

1 はじめてのJavaScript　入門編
2 はじめてのJavaScript　入門編　まとめ
- 2.1 共有:

はじめてのJavaScript　入門編

まずはWEBページが動的に動くためのJavaScript仕組みの説明です。プログラミング言語のひとつであるJavaScriptを使用すると、ブラウザ上で画像を拡大表示して見やすくしたり、入力フォームを設置してメッセージの送付などができます。

WebブラウザはHTML文書と一緒にJavaScriptのプログラムを読み込み、実行環境で実行して結果をブラウザに表示します。どのブラウザにもJavaScriptエンジンが組み込まれておりJavaScriptを実行される環境が備わっています。

JavaScriptは「クライアントサイド・スクリプト」と呼ばれており、ブラウザなどのクライアント側のシステムで動作するスクリプトのことです。対義語としてサーバー側で処理するスクリプトを「サーバーサイド・スクリプト」と呼ばれます。代表的な言語として「Perl」「PHP」などがあげられます。

JavaScriptをHTML文書内に直接プログラムを埋め込む方法のほかに、HTML文書で指定した別のファイルでJavaScriptを記述して読み込む方法もあります。

JavaScript ポップアップ表示

それでは実際にコードを書いてJavaScriptの動きを見ていきましょう！

まずはWebページを表示したときに、ページにメッセージをポップアップさせるコードを紹介します。

下記のコードをメモ帳にコピーして拡張子.htmlにすることで表示できます。コードの<script>～</script>までの部分がポップアップ表示をするJavaScriptになります。<head></head>の間にコードを記述しています。

<html>
<head>
<title>動的WEBページ</title>
<script type=”text/javascript”>
alert(“JavaScriptアラート”);
</script>
</head>

<body>
<h1>動的WEBページ</h1>
<hr>
</body>
</html>

JavaScript　文字列の表示

JavaScriptは動的な表示だけでなく、<p>タグのような文字列表示も可能です。「こんにちは」の部分はJavaScriptで表示させています。

下記のコードをメモ帳にコピーして拡張子.htmlにすることで表示できます。コードの<script>～</script>までの部分が文字列表示をするJavaScriptになります。

<html>
<head>
<title>動的WEBページ</title>
</head>
<body>
<h1>動的WEBページ</h1>
<hr>
<script type=”text/javascript”>
document.write(“こんにちは！”);
</script>
</body>
</html>

JavaScript　文字入力を動的に表示する

お次は空欄に文字列を入力し「変更」ボタンをクリックすると、表示されている文字列を変更して表示するJavaScriptのコードです。このコードは実際に動的に動いてることを実感するかと思います。言葉にすると難しいので下記の画像で変化をご覧ください。

下記のコードをメモ帳にコピーして拡張子.htmlにすることで表示できます。コードの<input>タグで文字入力を受け付けて、<script>～</script>までの部分が文字列表示変更をするJavaScriptになります。このJavaScriptのコードはページが動的に動いていることが実感できるかと思います。

<html>
<head>
<title>動的WEBページ</title>
<script type=”text/javascript”>
function change_str(str){
var moji=document.getElementById(‘mojiretsu’);
moji.innerHTML=str;
}
</script>
</head>
<body>
<h1>動的WEBページ</h1>
<hr>
<input id=”moji” type=”text” size=”40″>
<input type=”button” value=”変更” onclick=”change_str(document.getElementById(‘moji’).value)”>
<p>入力した文字列は<b>「<span id=”mojiretsu”>SE脱出日記</span>」</b></p>
<br>
</body>
</html>