JavaScript

はじめてのJavaScript 入門編

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

はじめてのJavaScript 入門編

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

JavaScriptの仕組み

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

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

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

JavaScript ポップアップ表示

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

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

はじめてのJavascript

下記のコードをメモ帳にコピーして拡張子.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で表示させています。

はじめての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のコードです。このコードは実際に動的に動いてることを実感するかと思います。言葉にすると難しいので下記の画像で変化をご覧ください。

はじめての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>

はじめてのJavaScript 入門編 まとめ

今回はかんたんなJavaScriptのコードを書いていきましたが、応用するともっと凄いことが実現できます。まずは、小さいコードから書いていって大きいプログラムにしていきましょう。いきなり難しいプログラミングをするとつまづくので基礎を固めていくと応用がきいてきます。

はじめてのJavaScript 入門編 まとめ
  1. JavaScriptはHTMLページを動的に動かすことが出来る
  2. 画像拡大や入力フォームを利用しメッセージ送信などが出来る
  3. クライアントサイド・スクリプト」のプログラミング言語
  4. どのブラウザにもJavaScriptエンジンが組み込まれている

本日は初歩的な内容ですが、また勉強して追記していきたいと思います。それではー!

ABOUT ME
なお
フルスタックエンジニアを目指すサラリーマン。インフラ、WEBを中心に色んなIT関連情報に手を出したいと思います。
ブログランキング

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA