WEB 初心者向け

【初心者向け】JavaScript無料学習(後編)

はじめに

前編に続いて短時間で読めるようにJavaScriptで出来ることを広く浅くご紹介します。

前編ではJavaScriptの歴史の紹介、カンタンな実行方法、基本的な文法についてご説明しました。

後編はDOM操作とイベント処理、JQuery、Ajax(紹介のみ)についてご説明します。

この記事を読んで欲しい方

  • WEBプログラミングを始めてみたい方
  • JavaScript初心者

DOM操作とイベント処理の基本

DOMとは、Document Object Modelの頭文字を取った略語です。HTMLやXMLのようなツリー構造を持つ文書をオブジェクトとしてメモリ上に展開し、プログラムから扱えるようにします。

DOM操作の例

dom.htmldom.jsいうファイルを作成しエディタで以下の内容を入力し保存。dom.htmlをブラウザで開くとブラウザに「JavaScriptからテキストを書き込みました」という文字列が表示されます。

どういう仕組みかと言うと、HTMLドキュメントに空のパラグラフ<p>を作成し、idに"elem"という名前を付けました。JavaScriptからvar elem = document.getElementById('elem')というメソッドを呼び出し、パラグラフ<p>のエレメントを取り出します。パラグラフのエレメントのプロパティinnerHTMLに文字列を代入することで、パラグラフ<p>に動的に文字列を設定できました。

 dom.html
<!DOCTYPE html>
<html lang="Ja">
<head>
</head>
<body>
<p id="elem"></p><!-- 何も書かれていないパラグラフ -->
<script type="text/javascript" src="./dom.js"></script>

</body>
</html>

 dom.js
var elem = document.getElementById('elem');
elem.innerHTML = "JavaScriptからテキストを書き込みました";

 

次にWEBブラウザ上のイベントについてご説明します。WEBブラウザ上でユーザがボタンをクリックしたりマウスを通過させるなどの操作を行うことをユーザイベントと呼びます。

ボタンのクリックイベント

event1.htmlbutton_event.jsいうファイルを作成しエディタで以下の内容を入力し同じフォルダに保存。event1.htmlをブラウザで開き「ポップアップメッセージ」というボタンを押すと「ボタンが押されました」というポップアップメッセージが出ます。

どういう仕組みかと言うと、HTMLドキュメントにボタンを作成し、idに"button_event"という名前を付けました。JavaScriptからvar elem = document.getElementById('button_event')というメソッドを呼び出し、ボタンのエレメントを取り出します。そのエレメントのメソッドaddEventListenerにイベント名( 'click' )とイベントが発生したときに実行したい関数( function(){ alert("ボタンが押されました") } )を渡すことで、ボタンを押したときにポップアップメッセージが表示されるようになりました。

 event1.html
<!DOCTYPE html>
<html lang="Ja">
<head>
</head>
<body>
<button id="button_event">ポップアップメッセージ</button>
<script type="text/javascript" src="./button_event.js"></script>

</body>
</html>
 button_event.js
var elem = document.getElementById('button_event');
elem.addEventListener('click', function(){ alert("ボタンが押されました") } );
タイマーによる非同期イベント

JavaScriptではタイマーによる非同期イベントも扱えます。以下の例に示しましたが1秒毎に時計を更新するみたいな使い方ができます。

event2.htmltimer_event.jsいうファイルを作成しエディタで以下の内容を入力し同じフォルダに保存。event2.htmlをブラウザで開くと現在時刻が表示されます。

どういう仕組みかと言うと、HTMLドキュメントに空のパラグラフ<p>を作成し、idに"clock"という名前を付けました。JavaScriptからvar elem = document.getElementById('clock')というメソッドを呼び出し、パラグラフ<p>のエレメントを取り出します。1秒(1000msec)に1回、Dateオブジェクトで時・分・秒を取得。パラグラフのエレメントのプロパティinnerHTMLに時・分・秒の文字列を代入することで、パラグラフ<p>に時計を表示することが出来ました。

 event2.html
<!DOCTYPE html>
<html lang="Ja">
<head>
</head>
<body>
<p id="clock"></p>
<script type="text/javascript" src="./timer_event.js"></script>

</body>
</html>
 timer_event.js
var elem = document.getElementById('clock');
setInterval( function() {
var date = new Date();
var hour= date.getHours();
var min= date.getMinutes();
var sec= date.getSeconds();

elem.innerHTML = hour + ":" + min + ":" + sec;
}, 1000 );
余談

JavaScriptのデバッグに便利なツールを1つご紹介します。

例えば私はFirefoxを使っているのですが、ブラウザに搭載されたJavaScriptデバッグ環境の開き方と

①メニューからWEB開発を選びます

②次にウェブコンソールをクリックします

③以下のように【コンソール】というタブが開きます

>>に続いてalert("Firefoxって便利")と入力しエンターを押すと、ポップアップウィンドウが表示されます。④JavaScriptコードからデバッグ情報を出力できます。

このHTMLを開くと以下のようにコンソールにデバッグメッセージが表示されます。※本記事ではいろいろ端折っておりエンコード(UTF-8)をHTMLに書かなかったためコンソール画面に警告メッセージが出てますが、今回はあまり気にしなくて良いです。逆にこういうエラーも検出できるのでコンソール画面は非常に便利です。

 console.html
<!DOCTYPE html>
<html lang="Ja">
<head>
</head>
<body>
<script type="text/javascript">console.log("コンソールに文字を出します")</script>
</body>
</html>

次のページへ >

  • この記事を書いた人
  • 最新記事

ペイヴメント

【名前】ペイヴメント 【職業】技術系サラリーマン 【住まい】東京 【好きなもの】プログラミング全般、デジタルガジェット、レトロゲーム、ライフハック、文房具、読書、家庭菜園、バンド演奏、お酒 【自己紹介】奥さん・息子2人とお気楽に暮らしています。

-WEB, 初心者向け

Copyright© ペイヴメントのエンジニア塾 , 2020 All Rights Reserved.