『Tickle the Brain』

	[ 日記(総合) - 日記 ]		カンタン！ブログをはじめよう

2007年07月21日

筆算への道のり（19）～正解数をカウントする

■今回の目標　「正解数をカウントする」

①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
          var count = 0; //正解数カウント用
          var c = 0;      //解の保管用にグローバル変数を設置
          function load(){     // loadという名前の関数
               // a + b = c について
               var a = Math.floor(Math.random()*9)+1;     //変数aを宣言し、aに1～9の乱数を代入する
               var b = Math.floor(Math.random()*9)+1;     //変数bを宣言し、bに1～9の乱数を代入する
               c = a + b;     //cにa+bの計算結果を代入する
               document.getElementById("que").innerHTML = a + "+" + b;     // queというＩＤ名のdivにhtmlとして右辺の内容を代入する（問題表示）
           }
          function sol(){
               var d = document.getElementById("ans").value;     //変数dに解答欄の数字を代入する
               if(c == d){     //解答と一致したら
                    count ++; //変数count　に1を加える
                    alert("正解です！！　正解数："+count );
                    document.getElementById("ans").value = "";     //解答欄を空白に
                    load();      //関数load()を再び呼び込んで、次の問題を提示する。
               }else{            //一致しなかったら

               }
          }
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div id="que" class="question"></div>＝
      <input id="ans" class="answer" type="text" value="" onkeypress="sol();" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・ count ++; で1加算する。

タグ: JavaScript 計算

nocs at 00:03│コメント(0)│トラックバック(0)

2007年07月18日

筆算への道のり（18）～乱数を使う

■今回の目標　「乱数を使う」

乱数をつかっていろいろな問題をつくる。
①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
          var c = 0;      //解の保管用にグローバル変数を設置
          function load(){     // loadという名前の関数
               // a + b = c について
               var a = Math.floor(Math.random()*9)+1;     //変数aを宣言し、aに1～9の乱数を代入する
               var b = Math.floor(Math.random()*9)+1;     //変数bを宣言し、bに1～9の乱数を代入する
               c = a + b;     //cにa+bの計算結果を代入する
               document.getElementById("que").innerHTML = a + "+" + b;     // queというＩＤ名のdivにhtmlとして右辺の内容を代入する（問題表示）
           }
          function sol(){
               var d = document.getElementById("ans").value;     //変数dに解答欄の数字を代入する
               if(c == d){     //解答と一致したら
                    alert("正解です！！");
                    document.getElementById("ans").value = "";     //解答欄を空白に
                    load();      //関数load()を再び呼び込んで、次の問題を提示する。
               }else{            //一致しなかったら

               }
          }
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div id="que" class="question"></div>＝
      <input id="ans" class="answer" type="text" value="" onkeypress="sol();" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・乱数の使い方

タグ: JavaScript 乱数

nocs at 00:11│コメント(0)│トラックバック(0)

2007年07月12日

筆算への道のり（17）～if文続き

■今回の目標　「if文続き」

正解のalert文の後に次の問題を出す。
①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
          var c = 0;      //解の保管用にグローバル変数を設置
          function load(){     // loadという名前の関数
               // a + b = c について
               var a = 1;     //変数aを宣言し、aに1を代入する
               var b = 2;     //変数bを宣言し、bに2を代入する
               c = a + b;     //cにa+bの計算結果を代入する
               document.getElementById("que").innerHTML = a + "+" + b;     // queというＩＤ名のdivにhtmlとして右辺の内容を代入する（問題表示）
           }
          function sol(){
               var d = document.getElementById("ans").value;     //変数dに解答欄の数字を代入する
               if(c == d){     //解答と一致したら
                    alert("正解です！！");
                    document.getElementById("ans").value = "";     //解答欄を空白に
                    load();      //関数load()を再び呼び込んで、次の問題を提示する。
               }else{            //一致しなかったら

               }
          }
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div id="que" class="question"></div>＝
      <input id="ans" class="answer" type="text" value="" onkeypress="sol();" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・今までの復習

タグ: JavaScript if

nocs at 00:28│コメント(0)│トラックバック(0)

2007年07月11日

筆算への道のり（16）～if文続き

■今回の目標　「if文続き」

正解だった場合、とりあえずalert文で表示してみる。
①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
          var c = 0;      //解の保管用にグローバル変数を設置
          function load(){     // loadという名前の関数
               // a + b = c について
               var a = 1;     //変数aを宣言し、aに1を代入する
               var b = 2;     //変数bを宣言し、bに2を代入する
               c = a + b;     //cにa+bの計算結果を代入する
               document.getElementById("que").innerHTML = a + "+" + b;     // queというＩＤ名のdivにhtmlとして右辺の内容を代入する（問題表示）
           }
          function sol(){
               var d = document.getElementById("ans").value;     //変数dに解答欄の数字を代入する
               if(c == d){     //解答と一致したら
                    alert("正解です！！");
               }else{            //一致しなかったら

               }
          }
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div id="que" class="question"></div>＝
      <input id="ans" class="answer" type="text" value="" onkeypress="sol();" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・if文を使った条件分岐処理。

タグ: JavaScript if

nocs at 00:12│コメント(0)│トラックバック(0)

2007年07月10日

筆算への道のり（15）～if文で条件分岐

■今回の目標　「if文で条件分岐」

今回は予め保管してある解答と解答欄に入力された数字を、if文を使って正解・不正解の条件分岐を考える。
①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
          var c = 0;      //解の保管用にグローバル変数を設置
          function load(){     // loadという名前の関数
               // a + b = c について
               var a = 1;     //変数aを宣言し、aに1を代入する
               var b = 2;     //変数bを宣言し、bに2を代入する
               c = a + b;     //cにa+bの計算結果を代入する
               document.getElementById("que").innerHTML = a + "+" + b;     // queというＩＤ名のdivにhtmlとして右辺の内容を代入する（問題表示）
           }
          function sol(){
               var d = document.getElementById("ans").value;     //変数dに解答欄の数字を代入する
               if(c == d){     //解答と一致したら

               }else{            //一致しなかったら

               }
          }
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div id="que" class="question"></div>＝
      <input id="ans" class="answer" type="text" value="" onkeypress="sol();" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・if文を使った条件分岐処理。

タグ: JavaScript if

nocs at 00:07│コメント(0)│トラックバック(0)

2007年07月05日

筆算への道のり（14）～valueの取得

■今回の目標　「valueの取得」

今回はdocument.getElementById()を使って、valueを取得する。
①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
          var c = 0;      //解の保管用にグローバル変数を設置
          function load(){     // loadという名前の関数
               // a + b = c について
               var a = 1;     //変数aを宣言し、aに1を代入する
               var b = 2;     //変数bを宣言し、bに2を代入する
               c = a + b;     //cにa+bの計算結果を代入する
               document.getElementById("que").innerHTML = a + "+" + b;     // queというＩＤ名のdivにhtmlとして右辺の内容を代入する。
           }
          function sol(){
               var d = document.getElementById("ans").value;     //変数dに解答欄の数字を代入する
          }
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div id="que" class="question"></div>＝
      <input id="ans" class="answer" type="text" value="" onkeypress="sol();" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・value値の取得方法。

タグ: JavaScript value 取得

nocs at 00:30│コメント(0)│トラックバック(0)

2007年07月04日

筆算への道のり（13）～onkeypress

■今回の目標　「onkeypressイベントを使う」

キー入力のイベント（onkeypress）を利用する。
①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
          var c = 0;      //解の保管用にグローバル変数を設置
          function load(){     // loadという名前の関数
               // a + b = c について
               var a = 1;     //変数aを宣言し、aに1を代入する
               var b = 2;     //変数bを宣言し、bに2を代入する
               c = a + b;     //cにa+bの計算結果を代入する
               document.getElementById("que").innerHTML = a + "+" + b;     // queというＩＤ名のdivにhtmlとして右辺の内容を代入する。
           }
          function sol(){

          }
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div id="que" class="question"></div>＝
      <input id="ans" class="answer" type="text" value="" onkeypress="sol();" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・onkeypressの使い方。

タグ: JavaScript onkeypress

nocs at 00:20│コメント(0)│トラックバック(0)

2007年07月03日

筆算への道のり（12）～グローバル変数

■今回の目標　「グローバル変数」

関数内の変数（ローカル変数）は関数実行時の間だけ値を保持する。ここでは解を保管するために変数を関数外に設置（グローバル関数）する。
①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
          var c = 0;      //解の保管用にグローバル変数を設置
          function load(){     // loadという名前の関数
               // a + b = c について
               var a = 1;     //変数aを宣言し、aに1を代入する
               var b = 2;     //変数bを宣言し、bに2を代入する
               c = a + b;     //cにa+bの計算結果を代入する
               document.getElementById("que").innerHTML = a + "+" + b;     // queというＩＤ名のdivにhtmlとして右辺の内容を代入する。
           }
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div id="que" class="question"></div>＝
      <input id="ans" class="answer" type="text" value="" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・グローバル変数とローカル変数の違いを理解する。

タグ: JavaScript グローバル変数

nocs at 00:42│コメント(0)│トラックバック(0)

2007年06月26日

筆算への道のり（11）～特定のエレメントを操作

■今回の目標　「特定のエレメントを操作する」

特定のエレメントを操作したいときは、IDをつけてgetElementById()を使う。
①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
　　
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div id="que" class="question"></div>＝
      <input id="ans" class="answer" type="text" value="" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・getElementById()を使って特定のエレメントを操作する。
・.innerHTMLを使って表示部分を操作する。

タグ: JavaScript エレメント

nocs at 00:12│コメント(0)│トラックバック(0)

2007年06月25日

筆算への道のり（10）～関数を呼び出す

■今回の目標　「関数を呼び出す」

onloadイベントを使って関数を呼び出すことで、body全体の読み込み後にjavascriptを実行することができる。
①　前回の「abc.html」ファイルを開き、赤字の部分を追加及び変更する。

<html>
<head>
　　<script type="text/javascript">
　　
     </script>
     <style type="text/css">
     
     </style>
</head>
<body onload="load();">
      <div class="question">1+2=</div><input class="answer" type="text" value="" />
</body>
</html>

javascriptの参考サイト
Core JavaScript 1.5 Guide

CSS（スタイルシート）の参考サイト
「スタイルシートの技」

HTMLの参考サイト
「初めてのホームページ講座」

■今回覚えたこと
・イベントを使って関数を呼び出す。

タグ: JavaScript 関数

nocs at 00:37│コメント(0)│トラックバック(0)

*氏より育ち* （北海道札幌市にある学習塾の塾長ブログ）

『Tickle the Brain』

2007年07月21日

筆算への道のり（19）～正解数をカウントする

2007年07月18日

筆算への道のり（18）～乱数を使う

2007年07月12日

筆算への道のり（17）～if文続き

2007年07月11日

筆算への道のり（16）～if文続き

2007年07月10日

筆算への道のり（15）～if文で条件分岐

2007年07月05日

筆算への道のり（14）～valueの取得

2007年07月04日

筆算への道のり（13）～onkeypress

2007年07月03日

筆算への道のり（12）～グローバル変数

2007年06月26日

筆算への道のり（11）～特定のエレメントを操作

2007年06月25日

筆算への道のり（10）～関数を呼び出す

氏より育ち（北海道札幌市にある学習塾の塾長ブログ）