DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

職業訓練学校の「伊藤さん」

Javaに入りまして
先生が日本語を話していると思えない今日このごろ
皆様いかがお過ごしでしょうか・・・
もちろん教科書も、え?これって日本語?って感じです(^^;)

突然ですが、私の通っている職業訓練学校の
同じクラスに「伊藤さん」というかたがいらっしゃいます。
先日気付いたのですが(教室内サーバーというのがありまして
それぞれの人の作ったホームページが見れるのです)
伊藤さん、私が落ちこぼれていたJavaScriptで、な、な、なんと!
ゲームを作っていたので、びっくりしてしまいましたー\(◎o◎)/

伊藤さん、スゴイ!!

私の友達にも、ぜひ遊んでもらいたい!と思って
伊藤さんにブログに掲載して良いか聞いたら、快く許可を頂けました。
ありがとうございますm(_ _)m

→伊藤さんがジャバスクリプトで作ったゲームへGO(別画面で開きます)

・・・ところで、伊藤さんってだれ?
あ、私の後ろの席の人、という以外のプロフィールを知らないので
また今度、掲載許可範囲内のことをお聞きしておきます(^^;)

ちなみにお名前は「伊藤さん」で掲載許可済みです。
「伊藤さん」いわく「世の中に伊藤さんはいっぱいいるからOK」なんだそうで
そういえば、私の友達にも学校の「伊藤さん」とは別に、4人の伊藤さんがいます(^^;)

JS落ちこぼれました(^^;)課題【フォーム】

ジャバスクリプト落ちこぼれました(^^;)
実は「フォーム」の前から落ちこぼれていています。
それまで少しずつ落ちこぼれていたのですが
文字数をなんたらかんたら~というのを習った時
先生「教科書とちょっと違うんですけど・・・」。
先生は親切心で応用を教えてくれたんですが、基礎が理解できてないので
ついに混乱の域に達してしまいました(@-@)
笑ってる場合じゃないけど、自分のアホさかげんに笑うしかないデス。

この前社長に会った時「たしなみでプログラム習うんでしょ?
どーせちょっとやったくらいではできへんねんから、プログラム部分は俺に振れ
仕事として請けてやるから。
その代わり俺が困ったとこはこはるさんに振るわ。
お互い得意分野が違うねんから、分業がえーねん」って
言われたのを思い出します・・・

・・・それはさておき、課題が出ました。【フォーム】
必須項目に見入力があった時に、エラーメッセージをまとめて出す。
もう説明についていけなくて、混乱してしまったので
↓をモトに作らせていただきましたm(_ _)m
送信フォームの必須項目が入力済みかチェックする JavaScript (←別画面で開きます)

作ったフォームはコチラ(←別画面で開きます)

どうせ違うついでに
Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版)(←別画面で開きます)
を入れてみました。先生は課題をやったものを見ることはないので、これで良しとします(^^;)

追記(参考としてコードつけておきます↓)
 (必須)

【お名前を入力して下さい】

 (必須)

【フリガナを入力して下さい】

 例:650-0025 ※半角文字でお願いします。
郵便番号を入力すると町名が自動入力されます
 例:079-123-4567
 例:079-123-4567
 (必須)

【メールアドレスを入力して下さい】

【お問い合わせ内容を入力して下さい】


※実際には送信できません

送信フォームの必須項目が入力済みかチェックする JavaScript (←別画面で開きます)
ほぼそのまんまです↓(エラー時にボックスに色を付けるのを追加しました)
function formCheck(){
    var flag = 0;

    // 入力必須項目が入力されているかチェック
    if( document . form1 . namae2 . value == "" ){ // 名前が未入力の場合
        flag = 1;
        document . getElementById( 'notice-input-text-1' ) . style . display = "block"; // 【お名前を入力して下さい】を表示
		document . form1.namae2.style.backgroundColor = '#DEF1F1'; // テキストボックスの背景に色をつける
		
    }else{ // 名前が入力済みの場合
        document . getElementById( 'notice-input-text-1' ) . style . display = "none"; // 【お名前を入力して下さい】を非表示
    }
	
	
	if( document . form1 . furigana . value == "" ){ // ふりがなが未入力の場合
        flag = 1;
        document . getElementById( 'notice-input-text-2' ) . style . display = "block"; // 【ふりがなを入力して下さい】を表示
		document . form1.furigana.style.backgroundColor = '#DEF1F1'; // テキストボックスの背景に色をつける
    }else{ // ふりがなが入力済みの場合
        document . getElementById( 'notice-input-text-2' ) . style . display = "none"; // 【ふりがなを入力して下さい】を非表示
    }
	
	
	if( document . form1 . mail . value == "" ){ // メールアドレスが未入力の場合
        flag = 1;
        document . getElementById( 'notice-input-text-3' ) . style . display = "block"; // 【メールアドレスを入力して下さい】を表示
		document . form1.mail.style.backgroundColor = '#DEF1F1'; // テキストボックスの背景に色をつける
    }else{ // メールアドレスが入力済みの場合
        document . getElementById( 'notice-input-text-3' ) . style . display = "none"; // 【メールアドレスを入力して下さい】を非表示
    }
	
	
    if( document . form1 . naiyou . value == "" ){ // お問い合わせ内容が未入力の場合
        flag = 1;
        document . getElementById( 'notice-textarea-1' ) . style . display = "block"; // 【お問い合わせ内容を入力して下さい】を表示
		document . form1.naiyou.style.backgroundColor = '#DEF1F1'; // テキストボックスの背景に色をつける
    }else{ // お問い合わせ内容が入力済みの場合
        document . getElementById( 'notice-textarea-1' ) . style . display = "none"; // 【お問い合わせ内容を入力して下さい】を非表示
    }
	
	

    if( flag ){ // 入力必須項目に未入力があった場合
        window . alert( '必須項目は全て入力して下さい。' ); // アラートを表示
        return false; // 送信中止
    }else{ // 入力必須項目が全て入力済みだった場合
        return true; // 送信実行
    }

}

//クリアボタン用
function torikesi(){
document . getElementById( 'notice-input-text-1' ) . style . display = "none"; // 【お名前を入力して下さい】を非表示
document . getElementById( 'notice-input-text-2' ) . style . display = "none"; // 【ふりがなを入力して下さい】を非表示
document . getElementById( 'notice-textarea-1' ) . style . display = "none"; // 【お問い合わせ内容を入力して下さい】を非表示
document . getElementById( 'notice-input-text-3' ) . style . display = "none"; // 【メールアドレスを入力して下さい】を非表示

document . form1.namae2.style.backgroundColor = '#fff'; // テキストボックスの背景色 白
document . form1.furigana.style.backgroundColor = '#fff'; // テキストボックスの背景色 白
document . form1.mail.style.backgroundColor = '#fff'; // テキストボックスの背景色 白
document . form1.naiyou.style.backgroundColor = '#fff'; // テキストボックスの背景色 白
}

ジャバスクリプトで九九・・・

追記…プログラマー様の友達に九九表を改造してもらいました(^^;)
→書き直してもらった九九表はコチラ(別画面で開きます)
コードは12月23日の記事(別画面で開きます)です。

-----------------------------------------------

繰り返しを習った後に「九九表」を作るという課題が出ました。
最初、意味がわからなくて、先生に聞いたら
「document.writeで九九を表示させることはできますか?」
と言われて、全部の行を書きました。
・・・(?-?)
先生「これをdocument.writeで1行ずつ書いていたら大変だから
○×○を一度に表示できるようにするには、どうしたらいいかということなんですけど」

・・・結局、その意味すらわからなくて、某専門学校の友達に聞いたら
「forの中にforが入る処理を覚えてほしいのでは」とのことでした。
さっぱり見当がつかない私に「手順を言うから紙に書いて考えてみて」と
考える順番を教えてくれましたm(_ _)m

友達に教えてもらった手順で作ったのはこんな感じ↓
九九 ※リストバージョン(別画面で開きます)
表にするにはどうやってしたらいいかわからなかったので、
CSSでリストを表っぱくしてみました
コードは友達に確認してもらっていないので、これで良いのかさだかではないです
(友達は生徒の卒業制作&来年の授業の準備で年末~3月まで忙しいそうなので
でもとりあえず、九九が表示できたので、自分のために、めも(^^;)
/* 変数の宣言 */
var objform;   /* フォーム */
var a;        /* ●の段 */
var b;       /* ×○ */
var idx1;   /* ●の段 */
var idx2;  /* ×○ */

/* 変数へ代入 */		
objform = document.form1;	
a = 12;  /* a×b用 */
b = 9; 
idx1 = 1;  /* a 繰り返し処理用 */
idx2 = 1; /* b 繰り返し処理用 */

document.write('
    '); /* 繰り返し処理 a×b   */ for(idx1=1; idx1 <= a; idx1++){ for(idx2=1; idx2 <= b; idx2++){ document.write( '
  • ' +idx1 + '×' + idx2 + ' = ' + (idx1*idx2)+'
  • '); } } document.write('
');

・・・で、昨日のこと、クラスのかたから
「先生の解答が教室内サーバーにひっそりとあったよ!ミラクル!!」
という情報を得ました。
さっそく見たら、ほんとだー。こんなに短い言葉で表ができるなんて、ミラクル☆
でも私には意味がわからない(@-@)
ほんとは、正解をどどーんとメモしたかったのですが
それは著作権上?どーなのかなぁ?と思って、先生のコードを参考に
自分のコードをあーでもない、こーでもないしてみました。
九九 ※テーブルバージョン(別画面で開きます)
/* 変数の宣言 */
var objform;   /* フォーム */
var a;        /* ●の段 */
var b;       /* ×○*/
var yoko;   /* (行) */
var tate;  /* (列) */

/* 変数へ代入 */		
objform = document.form1;	
a = 9;   /* a×b用 */
b = 14; 
yoko = 1;  /* (行) 繰り返し処理用 */
tate = 1; /* (列) 繰り返し処理用 */

document.write('<table>');

/* ↓タイトル行 ここから↓ */
document.write('<tr>');	
for(yoko=1; yoko <= a; yoko++){	
	document.write( '<th class="dan' + yoko +' ">' + yoko + 'の段' + '</th>');
}
document.write('</tr>');
/* ↑タイトル行 ここまで↑ */


/* ↓その下の部分 ここから↓<tr>~</td>の中に<td>~</td>を繰り返しで入れる */
for(yoko=1; yoko <= b; yoko++){	
	document.write('<tr>'); 
		for(tate=1; tate <= a; tate++){
		document.write( '<td class="dan' + tate +' ">' + tate + '×' + yoko + ' = ' + (tate*yoko)+'</td>');
		}
	document.write('</tr>');
}
/* ↑その下の部分 ここまで↑ */

document.write('</table>');
先生のはもっと行も少なくて、スマートでしたよ!!
私には高度すぎて、わからなかったですけど(^^;)

とはいえ、友達のおかげ&クラスのかたのおかげで、なんとか完成・・・
みなさま、ありがとうございましたm(_ _)m

ジャバスクリプト-for文 繰り返し-

処理の繰り返し「for文」を習いました。
   for(初期処理、繰り返し条件、増減処理{
      繰り返しの処理
   }
{ }内の処理を指定した回数ぶんだけ繰り返して実行します。
初期処理繰り返しの処理を実行する前に、最初に1回だけこの処理が実行されます。 通常、変数を宣言し、変数に初期の値を代入します。 変数名は任意に設定できますが「i」がよく用いられます。
繰り返し条件この条件を満たしている間、処理が繰り返し実行されます。
増減処理繰り返しの処理が1回実行されるごとに、この処理が実行されます。
通常、変数を増減する処理を記述します。

2013-12-14-js-kurikaesi-01.gif
比較演算子説明
++変数の値に1を加算した結果を返します。
「インクリメント」といいます。
--変数の値から1を減算した結果を返します。
「デクリメント」といいます。

↓このようなものを作りました。
↓手持ち▲で、毎月●円ごと、■か月貯金したら、各月いくらになるかを出す。
2013-12-14-js-kurikaesi-02.gif 実は教科書は違う問題で、解答があったのですが、先生は、その解答と違う解答を書いて、実際的なのはこちら~って感じの説明をしてくれました。が!「for文」が初めて聞くことだったので、その理解ができていない&教科書と違う説明をさらに理解できず・・・(@_@)?? ?

←これ、応用問題なのです。
毎度のことながら、さっぱりわからなかったので、周りの席の皆様方とサブの先生のご協力で完成いたしましたm(_ _)m
(メインの先生は答えを言わない主義(ヒントを伝える)なので、私がそれを理解できるレベルではないため、サブの先生にわからないところを教えてもらいました←それでもナゾは多い・・・)

手持金 

毎月の貯金額 

貯金期間 か月間




完成したファイルはコチラ(別画面で開きます)

・・・そのまた応用問題が出たのですが、すでに出題の意味が理解できず(--)
理解できない上に、また新しいことが加わって、
理解できない+理解できない=プログラムが嫌いになりました。
隣の席の人に「ダメっ、そんなことくらいで嫌いになっちゃ!」と、励まされました(^^;)
助けあい精神で問題にいどむ今日このごろ・・・クラスのかたたちの親切が身にしみます。m(_ _)m

ジャバスクリプト-if文-その2

応用問題が出ました。
わからなくて、周りの席の人に教えてもらってなんとか形にできました。
2013-12-14-js-bmi-01.gif とはいえ、メインの先生が答え合わせはしない主義なので、 これで良いかイマイチわからず・・・結局、某専門学校の先生をしている友達に 自分で作ったファイルをメールして、見てもらいました(^^;)
「ほぼ問題なしです」と返事をくれて、計算結果が123.4567890みたいに出ていたので 「このページを参照して、小数点以下を処理したら良い」と、 四捨五入・切り上げ・切り捨て を教えてくれました。

・・・他にもっと良いやり方があると思いますが、自分のをめも。

BMI指数=
体重(kg)÷(身長(m)×身長(m))

やせぎみ 20未満
普  通 20~24未満
太りぎみ 24~26.5未満
太りすぎ 26.5以上

BMI


身長 cm

体重 kg

BMI 

判定 


あなたの理想体重は
(BMI22)の場合kgです。


kg以下はやせぎみになります。

kg以上はふとりぎみになります。




出来あがりはコチラ(別画面で開きます)