JavaScriptの出始めはNetScapeなどのブラウザで少し遊んでいましたが最近はすっかりご無沙汰。久しぶりにブログで自作のスクリプトを試して見よう思ったのですが、最新の環境に慣れていないせいか、上手く使えませんでした。
私の備忘録としてJavaScriptをブログでどうやって利用するかなどの基本的な「機能と使い方」を初心者の視点でまとめてあります。なので、JavaSciptコードの書き方などは参考程度にして下さい。動く事を基本にしてますので決してスマートにはなってないかも！！
JavaScriptの準備
JavaScriptコードの置き場所
初心者には何処に作成したコードを置いたら良いかも最初はわかりませんでした。ネットの参考コードの支持通りに最初は組み込んでいました。
下記のようにHTMLの「head」「body」それぞれにscriptタグを挿入するか、外部からJavaScriptファイルを読み込んで動作させます。
JavaScriptは読み込み始めると一時的にHTMLソースの読み込みがストップするので、「bodyタグ」の最後にscriptタグを挿入するらしいですが、短いコードなら気にしないで良いと思います。
<html>
<head>
<script>
//ここにJavaScriptを記述
</script>
</head>
<body>
<script>
//ここにJavaScriptを記述
</script>
</body>
</html>
ブログでJavaScriptを使うことを前提にする場合は、ページ毎の「body」に挿入するのが簡単なような気がします。
ブログに載せる前の動作確認
「メモ帳」などで上記のようなJavaScriptを埋め込んだソースコードを作成し、拡張子を「html」にして保存し、そのファイルをブラウザで開けば動作確認ができます。
動作はブラウザによって微妙に違うことがあるので、できれば2種類以上のブラウザで試してみると失敗が少ない。私は「Chrome」「Firefox」「Opera」「Vivaldi」で確認しています。
JavaScriptコード
入力した数値を計算して表示
ブログ画面記事で、税金関連などで複雑な計算をしないといけない時など、自分が経験した計算式を人に伝えるときに利用できます。この例では半角で入力した数値を基に計算したと時の書き方をまとめてあります。
「入力A」は半角以外でも入力できてしまいますが、結果が計算結果がおかしくなります。プログラム的に半角のみ入力に制限をすればいいのですが複雑になるので、簡単に対応したい場合は「入力B」ように設定します。
こうすると半角数値以外は入力できなくなります。HTML5に対応してないと使えませんが今のブラウザは基本的にはOKだと思います。
<html>
<head>
<title>JavaScript計算機</title>
</head>
<body>
<script type="text/javascript">
function Calc() {
var a = document.sample1.txtA.value; // 入力A
var b = document.sample1.txtB.value; // 入力B
var c = parseInt(a)+parseInt(b); // 足し算
var d = parseInt(a)-parseInt(b); // 引き算
document.sample1.txtC.value = c; // 出力
document.sample1.txtD.value = d; // 出力
}
</script>
<form name="sample1">
<INPUT TYPE="text" NAME="txtA" style="width:100px;">
入力A(半角)<br>
<INPUT TYPE="number" NAME="txtB" style="width:100px;">
入力B(HTML5限定)<br>
<INPUT TYPE="button" name="cmdCalc" value="計算開始"
onclick="Calc()"><br>
<INPUT TYPE="text" NAME="txtC" style="width:100px;"> 足し算<br>
<INPUT TYPE="text" NAME="txtD" style="width:100px;"> 引き算<br>
</form>
</body>
</html>
元々ある組み込み関数としては以下のようなものがあるので色々なことが計算できます。数学の関数なら『Mathクラス』、日付関連なら『Dateクラス』といろいろあります。
JavaScriptでは、このコードでの使い方が基本のような気がします。
図形(三角関数)を描画表示
図形が描けると簡易的な地図などは画像にしないでも表示する事ができていいかもしれません。ここの例では図形ではなくてMathクラスを使って三角関数の曲線を描いています。
HTML5で導入された「canvas」機能を使った描画表示ですが作画部分を任意の図形に変更すれば色々な絵が簡単にかけます。
<html>
<head>
<title>JavaScriptでSIN曲線</title>
</head>
<body>
<div style="width:320px; margin:0 auto;;"><!-- 作画エリアを中央に配置 --!>
<canvas id="sample2" width="320" height="120"></canvas>
</div>
<script type="text/javascript">
var cvs = document.getElementById("sample2");
if (cvs.getContext){ // if文はcanvas非対応ブラウザ対策
var ctx = cvs.getContext("2d");
var width = 300; // 時間
var att = 50; // 振り幅
var cycle = 2*Math.PI/width*3 //
ctx.translate(10,60); // 描画基準点を移動
for (var i = 0; i < width; i++) {
var x0 = i;
var y0 = att * Math.sin(cycle*x0);
var x1 = i + 1;
var y1 = att * Math.sin(cycle*x1);
ctx.beginPath(); // Pathで描画を開始
ctx.moveTo(x0,y0); // 描画する位置を指定
ctx.lineTo(x1,y1); // 指定座標まで線を引く
ctx.stroke(); // Canvas上に描画
}
}
</script>
</body>
</html>
ランダムに文字を表示
アクセスする度に表示が変わるので占いなどに使えます。この例ではランダム関数で表示を選んでいますが、日付関数に置き換えて応用すれば日毎に表示内容を更新できます。
下のコードは表示の仕方が自動で表示する場合と、訪問者がクリックしてポップアップ画面で表示する場合の2種類を少し違った表現でコード化してあります。
<html>
<head>
<title>ランダム表示</title>
</head>
<body>
<script type="text/javascript">
rand = Math.floor(Math.random()*3); // クリック無し
if (rand == 0) msg = "一番目が選ばれました";
if (rand == 1) msg = "二番目が選ばれました";
if (rand == 2) msg = "三番目が選ばれました";
document.write(msg);
function w_news() { // クリックで表示
rand = Math.floor(Math.random()*3);
if (rand == 0) msg = "快晴です";
else if (rand == 1) msg = "雷雨です";
else msg = "大雨です";
alert(msg);
}
</script>
<br><br>
<form><input type="button" value="天気予報" onClick="w_news()"></form>
</body>
</html>
動的なコンテンツ表示
ページに特徴を出すには派手な色使いか、動くコンテンツで見た目の印象が変わります。取り合えずブログの個別ページだけで簡単に動かすコードをまとめてみました。
動的制御は色々な方法があると思いますが、『yoppa org &ndash』のページを参考にさせてもらっています。
<html>
<head>
<title>自動で動くコンテンツ</title>
</head>
<body>
<script type="text/javascript">
var speedX = 5.0; // X軸移動距離
var speedY = 4.0; // Y軸移動距離
var locX = 50; // 開始座標
var locY = 50; // 開始座標
var ctx;
function init(){
var canvas = document.getElementById("ballgame");
if (canvas.getContext){
ctx = canvas.getContext('2d');
setInterval(draw,50);
}
}
function draw(){
ctx.globalCompositeOperation = "destination-atop";
locX += speedX;
locY += speedY;
if(locX < 15 || locX > 385){
speedX *= -1;
}
if(locY < 15 || locY > 85){
speedY *= -1;
}
ctx.beginPath(); // 青色の円を描く
ctx.fillStyle = '#0000FF';
ctx.arc(locX, locY, 10, 0, Math.PI*2.0, true);
ctx.fill();
}
window.onload = init; // 自動で処理を開始
</script>
<div style="width:400px; margin:0 auto;;"> <!-- 作画エリアを中央に配置 --!>
<canvas id="ballgame" width="400" height="100"></canvas>
</div>
</body>
</html>
ブログで飛行機を飛ばす
基本的な動くコンテンツを作ってみましたが、もう少し本格的にブログのアクセサリ的な動くシルエット動画コンテンツです。コード内のコメント文を参考にいろいろ変更して楽しんで下さい。
ブログで音をならす
ブログページをアクセスしたときにBGM的な音楽が流れると楽しくなります。基本動作だけのコードです。ブログで音楽を鳴らすときに一番困るのは音楽ファイルを何処かに置かないと再生できないことです。
ブログ自体のディレクトリにファイルを置けないときは「GoogleDrive」等に共有ファイルとして音楽ファイルを置いておきます。
JavaScriptソースを短縮化する
ここで書いてあるJavaScriptを見ればわかるように、ちょっとコードを書くとずいぶん長くなりますし、素人的なコードの記述はそのまま見せるのも恥ずかしいこともあります。
コードは不要なスペースや文字が沢山ありますが、圧縮する事が可能です。変換後、JavaScriptとして貼り付ければどのまま動くので長くなり過ぎたコードは変換して使いましょう。使い方は以下のリンク先で確認できます。
外部の呼込み関数ライブラリを利用する
有名なライブラリとして、jQuery(ジェイクエリー)はウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリが公開されています。これを読み込む事により複雑な動作を簡単にJavaScriptで書くことができます。
ここの最初の「目次」機能はこのライブラリを利用して表示しています。以下のページにここで使用しているJavaScriptの使用例を載せています。
ブログのHTML画面は共通画面と個別ページ画面がありますが、今回は個別ページ画面にJavaScriptを埋め込む方法を試しています。すべての画面に対応したいなら共通画面の<head><body>タグに埋め込んでください。
JavaScriptが少しでも使えると、ちょっとだけ周りの人と違ったページができるので楽しいですね(笑)
