JavaScriptテクニック集

2022.10.10更新

JavaScriptでプログラミング入門のタイトル画像になります

ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

おまけ２　JavaScriptテクニック集

「JavaScriptでプログラミング入門」を終えた方へ、応用編の「JavaScriptでタイピングゲーム」に必要なJavaScriptのテクニックをご紹介します。

「html」、「css」の知識も少し必要になりますので、さっぱりわからないという方は

おまけ１　超簡単ホームページ入門

こちらを先にお読みください。

それではいってみましょう！

注意

だいぶ説明を省略しながら駆け足で無理矢理に説明していきます！

よくわからないトコロもたくさんあると思いますので、「こんな技術があるのか」程度に流し読みしていって頂ければと思います。

JavaScript起動ボタンを作る

入門編ではファイルを開くと同時にプログラムも起動していたと思いますが、起動ボタンのようなものでプログラムを動作させる事もできます。

■おまけ２　プログラム１■


<!DOCTYPE html>
<html>
<head>
<script>

function test(){
	alert("プログラム起動！");
}

</script>
<title>おまけ２　プログラム１</title>
</head>
<body>
	<p>ボタンを押すとプログラムが起動します。</p>
	<input type="button" value="起動ボタン" onclick="test()">
</body>
</html>

■実行結果■

■説明■

「html」の「input」というタグを使って関数を実行するボタンを作ってみました。

使い方は


<input type="button" value="起動ボタン" onclick="test()">

「value」のトコロにボタンに表示されるメッセージを入れて、「onclick」のトコロに起動したい関数名を入れるだけです。

これでボタンを押したらプログラムが動き出すみたいな事ができるようになります。

<a>タグを使った起動ボタン

<a>タグを使った起動ボタンも紹介します。

■おまけ２　プログラム２■


<!DOCTYPE html>
<html>
<head>
<script>

function test(){
	alert("プログラム起動！");
}

</script>
<title>おまけ２　プログラム２</title>
</head>
<body>
	<p>ボタンを押すとプログラムが起動します。</p>
	<p><a href="javascript:test();">起動ボタン<a></p>
</body>
</html>

■実行結果■

■説明■

こちらが<a>タグを使ったやり方です。

「html」の内容を書き換える「DOM」

それではいよいよタグの書き換えをリアルタイムに行う「DOM」という技術を紹介します。

これと後ほど紹介する一定時間ごとにプログラムを動かすタイマーという機能を使えばホームページにアニメーションなどの動きをつける事ができます。

■おまけ２　プログラム３■


<!DOCTYPE html>
<html>
<head>
<script>

function test(){
	document.getElementById("a_block").innerHTML = "<h1>書き換えられました！</h1>";
}

</script>
<title>おまけ２　プログラム３</title>
</head>
<body>
	<input type="button" value="起動ボタン" onclick="test()">
	<div id="a_block">
		<p>ここが書き換えられます。</p>
	</div>
</body>
</html>

■実行結果■

■説明■

「a_block」という名前をつけた「div」ブロックの中身を書き換えてみました。


<div id="a_block">
	<p>ここが書き換えられます。</p>
</div>

こちらのブロックですね！

「javascript」の部分はと言いますと・・・、


document.getElementById("idの名前").innerHTML = "内容";

ちょっと長いですが、「document.getElementById」というものを使って書き換えます。

最初はそのまま覚えるしかないと思いますが、意味としては「idが～の部分の中のHTMLを次の内容にしてください」みたいな意味になります。

このプログラムの場合は「html」をまるごと書き換えましたが、一部分だけ書き換える事もできます。

■おまけ２　プログラム４■


<!DOCTYPE html>
<html>
<head>
<style>

#a_block{
	width: 400px;
	height: 200px;
	background-color: yellow;
}

</style>
<script>

function test(){
	document.getElementById("a_block").style.backgroundColor = "green";
}

</script>
<title>おまけ２　プログラム４</title>
</head>
<body>
	<input type="button" value="起動ボタン" onclick="test()">
	<div id="a_block">
			<p>背景色を変化させます！</p>
	</div>
</body>
</html>

■実行結果■

■説明■

「div id=a_block」の背景色「background-color」を黄色から緑色に変化させてみました。

このように「css」の一部分だけ変化させる事も可能です。

一部分だけ変える時は「document.getElementById」のお尻の部分が


.style.backgroundColor = "green";

「.style.変えたいcss」みたいになります。

たとえば横の大きさ「width」を変えたい場合は


document.getElementById("a_block").style.width = "100px";

のようにします。

「css」と「javascript」で少し書き方が変わったりするので注意です。

「css」・・・background-color

「javascript」・・・backgroundColor

タイマー

一定時間ごとに指定した関数を実行するタイマーになります。

さきほどの「DOM」と組み合わせれば自動的にタグの内容を書き換える事ができます。

■おまけ２　プログラム５■


<!DOCTYPE html>
<html>
<head>
<script>

var timer;
var count;

function init(){
	document.getElementById("startbutton_block").style.visibility = "hidden";

	count = 0;
	timer = setInterval("count_up()",1000);
}

function count_up(){
	count++;

	document.getElementById("count_block").innerHTML = 
		"<p>" + count + "</p>";

	if(count == 10){
		clearInterval(timer);
	}
}

</script>
<title>おまけ２　プログラム５</title>
</head>
<body>
	<p>１０までカウントアップします！</p>
	<div id="count_block">
		<p>0</p>
	</div>
	<div id="startbutton_block">
		<input type="button" value="起動ボタン" onclick="init()">
	</div>
</body>
</html>

■実行結果■

■説明■

少しややこしいプログラムになってしまいましたので一つ一つ分解して説明します。

タイマー部分からいきます。

まずタイマー用の変数をグローバル変数として適当に用意します。


var timer;

今回はこちらの変数を用意しました。

そしてタイマーを動かします。


function init(){

	timer = setInterval("count_up()",1000);

}

関数「init」の中の「setInterval」というのがタイマーを起動させる関数になります。

この関数を書いた時点でタイマーが動き始めます。

使い方は


タイマー用の変数 = setInterval("一定時間ごとに実行したい関数",時間をミリ秒で指定);

こんな感じで使います。

ミリ秒っていうのは1000分の1秒の事です。

1000ミリ秒で1秒です。

これだけで一定時間ごとに指定した関数を実行させる事ができます。

そしてページを閉じない限り永遠にタイマーは動き続けるのでタイマーを止める為の関数が


clearInterval(timer);

この「clearInterval」という関数になります。

タイマーを起動させる時・・・setInterval

タイマーを止める時・・・clearInterval

セットで覚えておきましょう！

残りの部分の説明に入ります。

関数「count_up」を1秒ごとに実行してその中で変数「count」を一つずつカウントアップ、その結果で「div id="count_block"」の内容を書き換えるみたいな処理をしております。


document.getElementById("count_block").innerHTML = 
		"<p>" + count + "</p>";

ここが書き換え部分ですね！

書き換え部分にタグと変数の両方が入る場合はタグ部分は「"」で囲み、変数部分は別にして「+」などでつなげます。

では残りの


document.getElementById("startbutton_block").style.visibility = "hidden";

こちらの部分ですが、これは「起動ボタン」部分を隠すみたいな事をしております。

「visibility」っていうのが表示するかしないかの「css」で今回は「hidden」表示しない処理をしております。

なんでわざわざ隠すかと言いますとタイマーが起動している間にさらに起動ボタンを押してしまうと同じ変数を使ってタイマーを重ねて動作させる事になり思わぬエラーなどを引き起こすので、それをさせないような対策になります。

再び表示したい時は「hidden」のトコロを「visible」にします。

リアルタイムに入力を受け取る

キーボードを押すたびにリアルタイムに入力したキーの文字コードを表示したいと思います。

これを使ってプログラムの動作中にリアルタイムに押されたキーの情報を受け取っていきます。

文字コードの説明はのちほどいたします。

■おまけ２　プログラム６■


<!DOCTYPE html>
<html>
<head>
<script>

document.onkeydown = func;

function func(){
	var keycode = event.keyCode;
	alert(keycode);
}

</script>
<title>おまけ２　プログラム６</title>
</head>
<body>
	<p>キーコードを表示します！</p>
	<p>何かキーを押してください。</p>
	<p>(alertを閉じた後も繰り返し表示する事ができます)</p>
</body>
</html>

■実行結果■

■説明■

キーボードを押すたびにその押した場所のキーコードを表示するプログラムになります。

少し難しいのでこれはそのままカタチで覚えてしましましょう！

まずは先頭の


document.onkeydown = 関数名;

これを書く事によりキーが押されるたびにそこで指定した関数が起動されます。

ではその関数の内容ですが


function func(){
	var keycode = event.keyCode;
	alert(keycode);
}

「event.keyCode」というものでその押されたキーコードを取得する事ができるのでそれを「keycode」という変数に一度保存してさらにalert関数でそれを表示しております。

文字コード(キーコード)っていうのは一つ一つの文字に割り当てられた番号で「A→65」「B→66」「C→67」・・・「X→88」「Y→89」「Z→90」のような番号になります。

もちろんこれ以外にもそれぞれのキーに番号が割り振られております。(これ以外に知りたい時は文字コード表などでインターネット検索してみてください)

ちなみにアルファベットの大文字と小文字でもキーコードは異なります。(a→97,b→98,c→99・・・のようになります)

上のプログラムでは大文字入力、小文字入力関係なく「a」なら「65」、「b」なら「66」のようにキーコードを受け取ります。

乱数

これは文字どおり乱れた適当な数を出すものでゲームなどでいわゆるランダムに何かをしたい時などに使います。

■おまけ２　プログラム７■


<!DOCTYPE html>
<html>
<head>
<script>

function test(){
	var ransu = Math.floor(Math.random() * 26);
	alert(ransu);
}

</script>
<title>おまけ２　プログラム７</title>
</head>
<body>
	<p>乱数を表示します！</p>
	<input type="button" value="起動ボタン" onclick="test()">
</body>
</html>

■実行結果■

■説明■

alertを閉じて起動をしばらく繰り返してみてください。

起動するたびに違った数が表示されると思います。

こちらもきちんと説明するとけっこう難しいのでカタチで覚えてしまいましょう！

まず乱数を保存する為の適当な変数を用意して


var ransu = Math.floor(Math.random() * 乱数の範囲);

のように使います。

乱数の範囲に指定した数マイナス１(26だったら0～25、100だったら0～99)の数が用意した変数に保存されます。

ページを開いた時に関数を実行する

最後にページを開いたと同時に関数を実行する「body onload」というものをご紹介します。

■おまけ２　プログラム８■


<!DOCTYPE html>
<html>
<head>
<script>

function test(){
	alert("実行！！！");
}

</script>
<title>おまけ２　プログラム８</title>
</head>
<body onload="test()">
	<p>ページを開いたと同時に関数を実行！</p>
</body>
</html>

■実行結果■

■説明■

ページを開いたと同時に関数を実行する「body onload」になります！

使い方は「body」の部分に


<body onload="実行したい関数名()">

これだけでページを開いたと同時に関数を実行する事ができます。

それでは！

大変長らくお待たせいたしました。

今回で当講座のjavascript入門はすべて終了いたしましたので、よろしければ応用編の

JavaScriptでタイピングゲーム

こちらに挑戦してみてください！

CONTENTS

はじめての
プログラミング
HOME

～はじめに～

プログラミングを
始める前に

～基本編～

～応用編～

■INDEX■

JavaScriptテクニック集
起動ボタンを作る
「DOM」
タイマー
リアルタイム入力
乱数
ページを開いた時に実行

JavaScriptテクニック集

おまけ２ JavaScriptテクニック集

注意

JavaScript起動ボタンを作る

■おまけ２ プログラム１■

■実行結果■

■説明■

<a>タグを使った起動ボタン

■おまけ２ プログラム２■

■実行結果■

■説明■

「html」の内容を書き換える「DOM」

■おまけ２ プログラム３■

■実行結果■

■説明■

■おまけ２ プログラム４■

■実行結果■

■説明■

タイマー

■おまけ２ プログラム５■

■実行結果■

■説明■

リアルタイムに入力を受け取る

■おまけ２ プログラム６■

■実行結果■

■説明■

乱数

■おまけ２ プログラム７■

■実行結果■

■説明■

ページを開いた時に関数を実行する

■おまけ２ プログラム８■

■実行結果■

■説明■

それでは！

おまけ２　JavaScriptテクニック集

■おまけ２　プログラム１■

■おまけ２　プログラム２■

■おまけ２　プログラム３■

■おまけ２　プログラム４■

■おまけ２　プログラム５■

■おまけ２　プログラム６■

■おまけ２　プログラム７■

■おまけ２　プログラム８■