日々のメモ帳

プログラミングで学んだ事や趣味でやっている事などを記録しています。

JavaScriptの勉強 演習2(1から任意の数までの合計)

問題.

 1からNまでの数値の合計を求めるページを作ってみましょう。

 

 上の問題を考える。「1から(指定の数)までの合計は和」「数字を入力する場所」「合計を計算するボタン」を満たすコードを考えると、まずは以下のようになる。

<!DOCTYPE html>

<html>

<head>

  <meta  charset="UTF-8">

       <title>1から指定した数までの合計</title>

  <script>

    ①

       </script>

</head>

 

<body>

        <h2>1から<span  id=" "></span>の合計は<span  id=" "></span></h2>

        <input  id=" "  value=" "  />

        <button  onclick=" ">合計</button>

</body>

</html> 

  ①の部分を、今回はfor文も用いて書く事を考える。理系出身の身としては他の方法を考えたくなりますが「for文の演習だからね」に「OK、分かった(for文以外で書く)」はしません。

 入力してもらう値は最大値なのでid名を「max」「Max_value」、合計は「total」「sum」、合計を計算する関数を考えるので名前を「calcSum」と設定する。

 for文を使用するので「変数 = 0;」と定義し、変数に最大値まで加算する事を考えると①の部分は

function calcSum() {

    var max = document.getElementById("max").value;

    var total = 0; for (var i = 1 ; i <= max ; i++) {

                    total += i; 

    }

    document.getElementById("Max_value").textContent = max;

    document.getElementById("sum").textContent = total;                   

} 

 となる。これを最初に出したコードに代入してbody部分のidを書き加えれれば完成。

 

 コードはGitHubの「1からNまでの合計.html」です。

JavaScriptの勉強 演習1(BMI計算機)

 問題.

  身長と体重を入力値として受け取り、BMIを計算し、その判定結果を表示するページを作ってください。BMIは「体重kg / (身長m)**2」という計算式で求められ、18.5未満の場合には痩せすぎ、25以上は肥満気味、その中間は標準とされています。

 

 上のような問題をhtmlとJavaScriptを用いて解く事を考える。まずは土台を作ると

<!DOCTYPE html>

<html lang="ja">

    <head>

        <meta  charset="UTF-8">

        <script>

    ①

        </script>

    </head>

    <body>

    ②

    </body>

</html>  

 のようになる。次に、①の部分について考えてみる。

 

 ①に入れる関数は「BMIを計算する関数である」「問題で与えれれている条件を満たす」ので、以下のようなコードを考えた。

function calcBMI() {

 // 変数の定義

  var h = document.getElementById("i0").value;

  var w = document.getElementById("i1").value;

  var BMI = w / (h ** 2);
          

 // 条件の設定

 if(BMI < 18.5) {

  document.getElementById("result").textContent = "痩せすぎ"

 }

 else if(BMI >= 25) {

  document.getElementById("result").textContent = "太りすぎ"

 }

 else {

  document.getElementById("result").textContent = "普通"

 }

} 

 ②は「身長と体重を入力してもらい、ボタンを押すとBMIを計算した結果を返す」ので、以下のようなコードになると考えた。

<h2>BMI計算機</h2>

身長(m) : <input id="i0" value="" />

体重(kg) : <input id="i1" value="" />

<button onclick="calcBMI()">check</button>

<p id="result"></p>

  試しにブラウザに表示させてみると以下の図のようになった。

 

f:id:kouzi_prog:20180522111654p:plain

 とてもシンプルな見た目ではあるが、特に動作は問題無さそうなのでこれで良しとする。

 

 コード本体はここに置いてある「calcBMI.html」です。 

github.com

CanvasとJavaScriptの復習 その0(気温安定して)

codeprep.jp

codeprep.jp

 

 外出する用事があったので今日はのんびり勉強してました、というよりは「ひと段落したら次はどうしようか」と悩む暇があるなら手を動かして復習した方がいいですから……

 

 勉強に使ってた本の2周目(2周目は避けていた演習をやる)をしつつ、CODEPREPもしっかりやって月末には何か作ろうかと思います

Canvasを学ぶ その1(昨日の復習)

 昨日やったCODEPREPのこちらのブックの復習。

 

codeprep.jp

 

JavaScriptでID名からHTML要素を取得する

 JavaScriptで、ID名からHTML要素を取得する場合、getElementByIdを使用する。

 

 document.getElementById("sample"); // 「sample」というID名の要素を取得

 

◆エラーの回避 

 Canvasは、IE8など一部のブラウザではサポートされていません。そこで、あらかじめサポートされていないブラウザではcanvas用の処理が実行されないようにします。

 これを行うには、以下の例のような条件文で囲みます。この条件文では、「canvas要素が取得されているか」「canvas要素はgetContext(描画に必要な機能)をサポートしているか」の二つをチェックしています。

 

 var sample = getElementById("sample"); //canvas要素の取得
 if( sample && sample.getContext ) {
   // Canvasがサポートされている場合の処理を書いていく
 }

 ※ 近年ではほとんどのブラウザでCanvasがサポートされているのでこの処理は必ずしも必要ではありません。

 

◆2Dコンテキストの取得


 「2Dコンテキスト」とは、描画を行ってくれる「人」のような役割を持っています。
この2Dコンテキストに「色を変えて下さい」「四角形を書いて下さい」「円を書いて下さい」などの命令を出すことで描画が可能となります。

 2Dコンテキストの取得には getContext を以下の例のように使用します。

 

 var sample = document.getElementById("sample"); // canvas要素
 var 変数名 = sample.getContext("2d");

 

◆図形を描いてみる

 

 " fillStyle "は塗りつぶしの色を設定するため、" fillRect "は四角形を描画するための属性です。

 

◆色の指定

 

 " strokeStyle "属性で、通常の線や図形周りの枠線などの色を指定する事が出来ます。

 

◆線の太さの指定

 

 " lineWidth "属性で、線の太さを変更できます。

 

◆四角形を描く

 

 四角形を描くには「fillRect」という属性を以下の例のように使用します。

 なお、fillStyle属性で指定された色が、fillRect属性でつくられた四角形の塗りつぶし色となります。

 

 var 変数名 = canvas要素の2Dコンテキスト;
 変数名.fillStyle = "色";
 変数名.fillRect( x開始位置, y開始位置, 横幅, 高さ );

 

◆四角形の枠を描く

 

 四角形の枠を描くには「strokeRect」という属性を以下の例のように使用します。
なお、strokeStyle属性で指定された色が、strokeRect属性でつくられた四角形の枠の色となり、lineWidth属性で指定された線の太さが 四角形の枠線の太さとなります。

 

 var 変数名 = canvas要素の2Dコンテキスト;
 変数名.strokeStyle = "色";
 変数名.lineWidth = 太さ;
 変数名.strokeRect( x開始位置, y開始位置, 横幅, 高さ );

 

◆四角形に囲まれた部分の描画を消す

 

 描画を消す場合には、clearRect を以下の例に使用します。

 

 var 変数名 = canvas要素の2Dコンテキスト;
 :
 :
 変数名.fillRect( ... );
 変数名.clearRect( x開始位置, y開始位置, 横幅, 高さ );

 

◆円を描画する関数

 

 円を描くための関数は「arc」です。また、この関数も2Dコンテクストを通して操作する必要があるため、「変数名.」に続ける形で以下の例のように入力します。

 

 変数名.arc( x座標, y座標, 半径, 開始位置, 終了位置, 半時計周りかどうか );

 

▼「円の開始位置の値( 0 ~ 2π)」と「円の終了位置の値( 0 ~ 2π)」となります。なお、数学でπを表すには「Math.PI」という属性を使用します。

▼最後の引数は「true(反時計周り)」または「false(時計周り)」を指定します。 

 

◆文字を描画する

 

 文字を描画する場合はfillTextを使用します。

fillTextの一つ目の引数が表示するテキスト、二つ目・三つ目の引数がそれぞれx座標・y座標となります。

 

 var 変数名 = canvas要素の2Dコンテキスト;
 :
 :
 変数名.fillText("Sample", 10, 10);

 

▼fillStyle属性を使用した場合、指定した色が文字の色になります。

▼strokeStyle属性を使用した場合、文字の縁取りに使う色になります。縁取り文字を描画する場合はstrokeTextを使用します。縁の太さを変更するにはlineWidthを使用します。

 

◆フォントの設定をする

 

 文字のフォントを設定するには、font という属性を以下の例のように使用します。

 なお、フォントの設定は strokeStyle属性や fillStyle属性と同じように、描画の前に設定しなければ反映されません。

 

 var 変数名 = canvas要素の2Dコンテキスト;
 変数名.font = "px数 フォントの種類";

 

◆線形グラデーションの作成

 

 線形グラデーションをつくるには、「createLinearGradient」という関数を以下の例のように使用します。 

 

 var 変数名 = canvas要素の2Dコンテキスト;
 var sample = 変数名.createLinearGradient( ... );

 

▼createLinearGradient関数は四つの引数をとります。順に「グラデーションの始点(x座標)」「グラデーションの始点(y座標)」「グラデーションの終点(x座標)」「グラデーションの終点(y座標)」。

Canvasを学ぶ その0(Canvasとは)

 意外と量がありましたがメモを書きつつ修了。

 

codeprep.jp

 

 

 というわけで今日からCanvasに触れ始めました。「今日一気にやって一気にまとめる!」を出来ればよかったですが、量が割と多かった反面英単語としての意味を知っていると「多分こうじゃないかな~」と思える部分が多かったので、明日きっちりまとめようと思います。

 

 では本題の内容。Canvasについて……

 

Canvasとは、ブラウザ上に図を描くために策定された仕様です。

これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashJavaアプレットが使われてきました。

Canvasは、FlashJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。

 

  図の他にも文字を描画する事も出来ます。

 

Canvasでは、線や円といった図形を描いたり、色を塗ったりすることは可能ですが、描いた図を動かすことはできません。つまり、Canvasの仕様には、アニメーションのメソッドがありません。もしアニメーションを実現したい場合は、一コマずつ、図を描きなおすという処理を繰り返さなければいけません。

 

 アニメーションの話はCODEPREPの方でも扱っていました。無料会員でも上に貼ったブックを使って勉強できるので興味がある方は是非。

 

 

 上の2つの引用はこちらのサイト(Canvasとは - Canvas - HTML5.JP)からの引用です。

 

 JavaScriptがとりあえず(演習を除いて)ひと段落したので、Canvasと併せてコードを描きつつ5月の終盤を過ごそうと思います。

JavaScriptの勉強 9日目(関数オブジェクト その2)

◆関数オブジェクトによる配列の操作

 

 配列の要素全てを合計する処理を考えてみましょう。for文を使うと以下のようになります。

var  data  =  [1, 6, 3, 4, 3, 2, 6, 8, 5, 9, 0];

var  total  =  0;

for  (var  i  =  0  ;  i  <  data.length  ;  i++)  {

    total  +=  v;

}   

  関数オブジェクトを使うとよりシンプルに記述できます。

var  data  =  [1, 6, 3, 4, 3, 2, 6, 8, 5, 9, 0];

var  total  =  0;

data.forEach(function(v)  {  total  +=  v}); 

 forEachはArrayオブジェクトのメソッドの一つで、配列の要素を順番に取り出し、その値を引数として関数オブジェクトを実行します。

 

 ある配列から偶数の実を取り出す処理を考えてみます。for文を使って書くと、例えば以下のようになります。

var  data  =  [1, 6, 3, 4, 3, 2, 6, 8, 5, 9, 0];

var  result  =  [ ];

 for  (var  i  =  0  ;  i  <  data.length  ;  i++)  {

    if  (data[i]  %  2  ==  0)  {

        result.push(data[i]);

    }

}

  これを関数オブジェクトで描き直すと以下のようになります。

var  data  =  [1, 6, 3, 4, 3, 2, 6, 8, 5, 9, 0];

var  result  =  data.filter(function  (v)  {  return  v  %  2  ==  0});

  「function  (v)  {  return  v  %  2  ==  0}」の部分が関数オブジェクトです。filterメソッドもforEachと同じくArrayオブジェクトのメソッドで、配列の各要素をとりだし、それを引数として関数オブジェクトを実行します。ただ、forEachと異なるのは、最終的に、関数オブジェクトがtrueを返した要素のみを含む配列を返す事です。

 例えば、vに4が渡された時は「4  %  2  ==  0」がtrueとなるため、4はresultに含まれます。一方、vに5が渡された時は「5  %  2  ==  0」はfalseとなるため、5はresultに含まれなくなります。つまり、「{return  v  %  2  ==  0}」といった条件を満たす要素だけを抽出することができるのです。

 

◆関数オブジェクトを引数にとるArrayのメソッド

 

Array.prototype.forEach(関数オブジェクト)

  配列の各要素に対して関数オブジェクトを呼び出します。

 

Array.prototype.every(関数オブジェクト)

  配列のすべての要素がある条件を満たしている時にtrueを返し、ひとつでも条件 を満たさない場合はfalseを返します。forEachと同様に、配列の個々の要素に対して関数オブジェクトが呼び出されます。

 

Array.prototype.some(関数オブジェクト)

  everyとは対照的に、どれかひとつでも要素が条件を満たしている時にtrueを返し、すべての要素が条件を満たさない場合にfalseを返しますforEachと同様に、配列の個々の要素に対して関数オブジェクトが呼び出されます。

 

Array.prototype.filter(関数オブジェクト)

  条件を満たす要素のみを含む新しい配列を返します。配列の要素ごとに関数オブジェクトを呼び出し、この関数オブジェクトがtrueを返した要素のみが新しい配列に含まれます。

 

Array.prototype.sort(比較用の関数オブジェクト)

  Arrayクラスには、その設計当初から要素を並べ替えるためのsortメソッドが用意されています。

  Arrayのsortに渡す関数オブジェクトは何でもよいというわけではありません。以下のルールを満たす関数オブジェクトを渡す必要があります。

 

 ・引数を2個(aとb)を受け取る

 ・a→bの順に並べる場合、0より小さい値を返す

 ・b→aの順に並べる場合、0より大きな値を返す

 

というルールを満たす必要があります。

 

 

jQueryに触れてみる その1(イベント編)

codeprep.jp

 

 どういう風に勉強しようか悩んでましたが、悩んでいる時間が勿体ないのでとりあえず手を動かそうと思ってCODEPREPをやってました。自分のPCでjQuery使えるようにするのは後日の自分に任せます(遠い目)……

 

 このブックの自分用の復習メモ。

・イベントを試す 1-1

 jQueryのイベントは$(セレクタ).on.(イベント名、イベントハンドラ)という形式で
記載します。イベント名には扱いたいイベントの名前を文字列で指定します。
イベントハンドラには、そのイベントが発生した時に実行したい関数を指定します。


jQuery(fn)もイベントの1つ 1-2

 jQueryセレクタを理解するブックでも良く登場していた、$(document).ready(function() {})や、このチャプターで登場する$(function() {…})といった書き方は、実はイベントなのです。これらの書き方は、DOM要素にアクセスする準備が整ったら発生するDOMContentLoadedというイベントを扱います。


イベントオブジェクトの構造 1-3

イベントハンドラには、イベントの情報を表すイベントオブジェクトが引数として渡ってきます。

 

・currentTarget
 → クリックされた要素

・target
 → イベントハンドラを指定した要素

・pageX
 → ページ全体に対する、クリックしたX座標

・pageY
 → ページ全体に対する、クリックしたY座標

・altKey
 → Altキーを押しながらクリックしたか否か

 

 復習も兼ねて読んだので残しておく。

 

postd.cc


・一度しか動作しないイベントハンドラを設定する 1-4

これまでのイベントは、クリックする度にイベントハンドラが呼ばれていました。
クリックする度にではなく、一度だけイベントハンドラを実行したい場合に使える
.oneメソッドがあります。

・on
 → イベントが発生する度にイベントハンドラが呼ばれる

・one
 → イベントが発生した最初の一回だけイベントハンドラが呼ばれる


セレクタに対してイベントを設定する 1-5

jQueryのイベントは、セレクタで取得した要素だけでなく、セレクタ自体に設定することも可能です。プレビューボタンンは、クリックする度にactiveというクラスが付与/削除されます。

・要素にイベントを指定する
 → イベントハンドラを設定する時短でセレクタにマッチした要素にだけイベントハンドラが指定される。

セレクタにイベントを指定する
 → イベントハンドラを設定する時点で存在しない要素に対してもイベントハンドラを指定する。


・マウスオーバーを検知する 2-3

ボタンをマウスオーバーした時のイベントハンドラを設定してみる。マウスオーバーのイベント名はmouseenterです。


・マウスアウトを検知する 2-4

ボタンからマウスアウトした時のイベントハンドラを設定してみましょう。マウスオーバーのイベント名はmouseleaveです。


・マウスボタンが押下されたことを検知する 2-6

clickイベントとは異なり、マウスを押下した時(マウスを離す前)に発生するイベントハンドラを設定してみましょう。マウスボタンが押下された時のイベント名はmousedownです。


・マウスボタンが離されたことを検知する 2-7

マウスボタンが離された時に発生するイベントハンドラを設定してみる。マウスボタンが離された時のイベント名はmouseupです。


・要素がフォーカスされたことを検知する 4-1

要素がフォーカスされた時のイベントハンドラを指定してみましょう。要素がフォーカスされた時のイベント名はfocusです。


・要素からフォーカスが外れたことを検知する 4-2

要素からフォーカスが外れた時のイベントハンドラを設定してみましょう。要素からフォーカスが外れた時のイベント名はblurです。


イベントハンドラを解除する 5-1

設定したイベントハンドラは、offメソッドを利用して解除できます。
既に設定されているクリックのイベントハンドラを解除してみましょう。

 

イベントハンドラは、$(セレクタ).off(イベント名, イベントハンドラ)もしくは
$(セレクタ).off(イベント名)と記述することで解除できます。

イベント名のみを与えると、要素に設定されているイベント名に対応するイベントハンドラを全て解除します。イベント名とイベントハンドラを与えると、与えたイベントハンドラのみを削除します。


・ページのスクロールをキャンセルする 5-4
スクロールをキャンセルするには、windowオブジェクトのmousewheelをキャンセルします。


・画像が読み込まれたことを検知する 6-1

loadイベントを利用すると、imgタグで指定した画像が読み込まれた時のイベントハンドラを設定できます。例えば、画像のサイズを取得して処理を行う場合、画像が読み込まれてからサイズを取得すると、正しいサイズを取得できるようになります。