負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) | Edit
目次
  1. スタイル
  2. 画像
  3. 配列
  4. DOM
  5. 関数
  6. フォーム
  7. リンク
  8. 文字・文章
  9. ウィンドウ
  10. フレーム
  11. 時間
  12. 環境変数
  13. 計算
  14. その他
  15. できないこと
  16. バグ
  17. 応用編
その他の小技

必ず1回以上繰り返しをする(do~while文)
do { n = Mydata; } while(n == 10);
do { 処理 } while(条件); … 最低1度は処理が実行される繰り返しの命令です。

オブジェクトを削除する
delete myObject;
delete … 指定したオブジェクトを削除します。

繰り返し処理の先頭に戻る
continue;
continue … 繰り返し処理の先頭に戻ります。
          繰り返し処理の内部でさらに繰り返し処理が行われていた場合には、一番内側の繰り返し処理の先頭に戻ります。

ループを抜ける
for ( n-0; n < 100; n++ ) { check = false; break; }
break … ループを抜けます。

お気に入りに追加ボタン
<INPUT TYPE="button" VALUE="お気に入りに追加" ONCLICK="window.external.AddFavorite('http://hp.xrea.jp/','HTML小技集')">

印刷ボタン
<INPUT TYPE="button" VALUE="印刷" ONCLICK="print()">

ソースを表示するボタン
<INPUT TYPE="button" VALUE="ソース" ONCLICK="location.href='view-source:'+window.location;">

背景色をボタンで変更する
<INPUT TYPE="button" VALUE="" ONCLICK="document.bgColor='#FFEEEE'">
<INPUT TYPE="button" VALUE="" ONCLICK="document.bgColor='#EEFFEE'">
<INPUT TYPE="button" VALUE="" ONCLICK="document.bgColor='#EEEEFF'">

背景画像を画像で変更
IMG SRC="back.gif" ONCLICK="document.body.style.backgroundImage='URL(back.gif)';" STYLE="cursor:hand;">

ウイルスメール対策
A HREF="#" ONCLICK="var a=('lto:'+'lll');var b='s21.xrea.com';location.href=('mai'+a+'@'+b);">メールを送る</A>

関数を複数呼び出すには?
onLoad="A();B();"

【解説】
;(セミコロン)で区切って呼び出します。

リンクをクリックで処理を実行させる
<a href="javascript:subWin()">サブウィンドウを開く</a>
javascript:処理 … JavaScriptを実行できます。処理の部分には関数などを書きます。

右クリック禁止
BODY oncontextmenu="alert('右クリック禁止');return false;">

TOP以外の直リンを禁止
if (!document.referrer){top.location.href="http://hp.xrea.jp/";}

オブジェクトにプロパティを加える
Object.prototype.mySite = "Web for begginer";
addObject = new Object();
document.write(addObject.mySite); //実行結果:Web for begginer
オブジェクト名.prototype.プロパティ名 = 値 … オブジェクトにプロパティを加えます。

何も値を返さない
<a href="javascript:void(0)"">
void(メソッドまたは数式) … 何も値を返さない命令です。引数に指定した関数やメソッド、あるいは数式などは実行されますが、それによって返される値は何もありません。例えば、void(0); とした場合、0 は評価されますがスクリプトにはまったく影響を与えません。


JavaScriptで実現できないこと

自分のコンピューターのファイルを読み出したい
基本的にできません。

アプリケーションを起動させたい
できません。

外部テキストの読み込み
Cookieファイル以外読み込めません。


バグ関係

HEAD内に</SCRIPT>を書く
document.write('</SCRIPT>');とHEAD内で書いたら、この後の命令が表示されて、何かおかしくなってしまいました。なぜでしょうか?

HEAD内に</SCRIPT>を書くと、なぜかそこでJavaScriptの定義が終わりとみなされてしまいます。 document.write('</SCRIP','T>');のように分割して記述すれば直ります。間抜けな仕様というかバグです (^^;

document.writeln使用のとき、自動改行されない
呼び出す前後に<PRE>~</PRE>を入れるようにNetscape社のドキュメントには書いてあります。
つまりPREタグを記述しないと駄目だという事です。


スポンサーサイト
整列処理
  • データが規則的に並んでいたほうがプログラムが簡単になるので、データは並び替えて操作することが多いです。
  • データを大きい順、小さい順に並び替えることを整列(ソート)といいます。
  • たとえば、会社であれば、お給料の高い順に並べる。また、学校であれば、出席番号順に並べる、テストの成績順に並べる、といったことに使います。

クイックソートとは?



ランダム配列数のクイックソートの例
  • クイックソートは整列処理のアルゴリズムの一つ
  • いくつかに小さく分割して並び替えする方式(分割統治法
  • 1960年にアントニー・ホーアが開発した
  • 2008年3月現在、一番効率の良いソート方法として知られている
  • 多くのプログラムで利用されている

アルゴリズム:クイックソート
  • まず適当な数(ピボットという)を選択します。
  • ピボットを基準に、左右に分割します。
  • たとえば、ピボットより小さい数は左側、大きい数は右側に2分割していきます。
  • 分割した部分に 1~3 を適用していき、ソートが完了するまで繰り返す。(再帰という)

図解アルゴリズム:クイックソート



左端を親要素(ピボット)とする、
leftにピボットよりも小さい数、r4ightに大きい数を入れる。入れる方法はleft、erightを交換していく。
sっして、ピボットの左側の要素(left)と右側の要素(right)で再帰処理を行いソートを完了させる


整列処理
  • データが規則的に並んでいたほうがプログラムが簡単になるので、データは並び替えて操作することが多い
  • データを大きい順、小さい順に並び替えることを整列(ソート)という
  • たとえば、会社であれば、お給料の高い順に並べる。また、学校であれば、出席番号順に並べる、テストの成績順にならべる、といったことに使う

バブルソートとは?



ランダム配列数のバブルソートの例
  • バブルソートは整列処理のアルゴリズムの一つ
  • 基本交換法ともいう
  • 計算時間が遅いことで有名(非効率)
  • 最小値がだんだんと先頭に移動しながら整列する。この動きが水の泡(バブル)が水面に向かっていくように見えることから、バブルソートと呼ばれる

アルゴリズム:バブルソート
  • データ同士を比較する
  • 1番目と2番目を比較、順番が逆であれば入れ替える
  • 次に2番目と3番目を比較して入れ替える
  • これを最後まで行うと、最後の数だけが最小または最大の数として確定する
  • この操作を全ての数が確定するまで繰り返す

図解バブルソート ステップ1~3



図解:バブルソート step1

↓↓↓↓↓↓↓↓↓


図解:バブルソート step2

↓↓↓↓↓↓↓↓↓


図解:バブルソート step3


ソースコード:JavaScript

  • まずはスクリプトを宣言します。
    • <script type="text/javascript"></script>
  • 次に、その中にソートする配列を作ります。
    • java = [12,1243,4,3463,...]
  • 次に、ボタンを作ります。クリックした時に関数を実行するように設定します。
    • <form><input type="button" onclick="kansu()" value="バブルソート"></form>
<script type="text/javascript">

java = [
12,1243,4,
3463,85,45,
43,87,67,
253,645,95
];


</script>

<form><input type="button" onclick="kansu()" value="バブルソート"></form>

  • ソートの効果をわかりやすくするため、シャッフル前の配列の中身を表示します。
  • 3つごとに改行を入れます。
    • if((s+1)%3 == 0) document.write("<br>");
for(s=0; s<java.length-1; s++){
        document.write(java[s] + " , ");
        if((s+1)%3 == 0) document.write("<br>");
}

  • 関数 kansu() を作ります。
  • ボタンをクリックしたときに実行されます。
function kansu(){

}//function kansu()

  • 関数 kansu() の中に繰り返し(for文)を作ります。
  • ここでは、「親フォー」と呼びます。
  • ソートされる配列の要素数だけ繰り返します。
    • 0~java.length - 1
function kansu(){

        for(i=0; i<java.length-1; i++) { //親フォー
 
        }//for
        
}//function kansu()

  • for文の中にfor文を作ります。
  • ここでは、「子フォー」と呼びます。
  • こちらは、配列の要素数の最後から、変数 i  まで繰り返します。
  • j>i
  • 親フォーが配列の最初から繰り返すのに対して、子フォーは配列の最後から繰り返します。
  • 親フォーを繰り返すほど、子フォーの繰り返しの範囲は短くなります。
  • j>i
function kansu(){
        for(i=0; i<java.length-1; i++) { //親フォー

                for(j=java.length-1; j>i; j--){ //子フォー
            
                }//for

        }//for
}//function kansu()

  • 子フォー内にデータ同士を比較する if文を作ります。
  • 隣りあう2つの要素を比較します。
  • もし下の要素が、上の要素より数が小さければ、 java[j] < java[j-1]
  • 下の要素と上の要素の値を並び替えます。 java[j] = java[j-1]; java[j-1] = taihi;
  • このとき、java[j]の値を退避させる変数 taihi を最初に作っておくのがポイント
  • これで、バブルソートは完了しました。
function kansu(){
        for(i=0; i<java.length-1; i++) {
                for(j=java.length-1; j>i; j--){
                        
            if(java[j] < java[j-1]){
                                var taihi = java[j];
                                java[j] = java[j-1];
                                java[j-1] = taihi;
                        }//if
              
        }//for
        }//for
}//function kansu()

  • 本当にソートできたか確認するため、配列 java の全ての値を表示します。
  • document.write(java[s] + " , ");
function kansu(){
        
for(s=0; s<java.length-1; s++){
        document.write(java[s] + " , ");
        if((s+1)%3 == 0) document.write("<br>");
}//for
        
}//function kansu()

  • 全体のソースコードです。
  • ちょっとわかりにくい??
<script type="text/javascript">

java = [
12,1243,4,
3463,85,45,
43,87,67,
253,645,95
];


function kansu(){

        for(i=0; i<java.length-1; i++) {
                for(j=java.length-1; j>i; j--){
                        if(java[j] < java[j-1]){
                                var taihi = java[j];
                                java[j] = java[j-1];
                                java[j-1] = taihi;
                        }//if
                }//for
        }//for
        
for(s=0; s<java.length-1; s++){
        document.write(java[s] + " , ");
        if((s+1)%3 == 0) document.write("<br>");
}//for
        
}//function kansu()

</script>

<form><input type="button" onclick="kansu()" value="バブルソート"></form>
"何のデータも代入されていない状態"を指します。つまりは、宣言されたときは
 var foo;
 document.write( foo );  //"undefined"が表示される 
となります。

undefined型での判定には (typeof x == 'undefined') を使うべし

変数、プロパティが定義されていない(undefined)かの判定をするときに、いろいろな書き方があります。
よく使う、見かけるのは下記の3つです。

  • (!x)
  • (x == undefined)
  • (typeof x == 'undefined')

この3つの書き方はそれぞれ条件が異なり、下記のような条件になります。

(!x) 変数 x が存在しないならば…

(x == undefined) 変数 x が undefined 型または null 型ならば…

(typeof x == 'undefined') 変数 x が undefined 型ならば…

(!x) 変数 x が存在しないならば…

コードが一番短くて済むので多用するのですが、、
!xが成立するのは、xがundefinedの場合だけじゃなくて、多岐にわかるので使用時に注意が必要だと思います。

!xがtrueになるようなものには下記があります。

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""(空文字)

(x == undefined) 変数 x が undefined 型または null 型ならば…

(x == undefined)がtrueになるものは下記があります。

  • undefined
  • null


(typeof x == 'undefined') 変数 x が undefined 型ならば…

(typeof x == 'undefined')がtrueになるものは下記があります。

  • undefined

x == undefined の際と、nullの扱いが異なるとこrが、注意点でしょうか。

まとめ

undefinedだけを判定したいときは、(typeof x == 'undefined')または(x === undefined)と書くのが良い。

(typeof x == 'undefined') または (x === undefined)

参考サイト

本ページを作成するにあたって、以下のサイトを大変参考にさせてもらいました。本当に感謝の気持ちでいっぱいです。ありがとうございました。


ノードとは何ですか?

ノードとは、DOMでアクセス・変更できるブロック単位です。

HTMLタグ全てがノードで作られています。


<p>これは段落です</p>


 <p>タグ … 要素ノード

 「これは段落です」 … テキストノード



<p>タグの要素ノードと、「これは段落です」のテキストノード、2つのノードを作ったことになります。

<p>タグ 要素ノード

これは段落です テキストノード



要素ノードとテキストノードの関係

要素ノードとテキストノードの関係は「親と子供」に似ています。
要素ノードは「親ノード」、テキストノードは「子ノード」と区別されます。

<p>これは段落です</p>

<要素ノード>テキストノード</要素ノード>

<親ノード>子ノード</親ノード>



属性ノード

要素ノードとテキストノードの他に、属性ノードと呼ばれるものがあります。

<p align="left">これは段落です</p>

<要素ノード 属性ノードテキストノード</要素ノード>

<親ノード 属性ノード子ノード</親ノード>


属性ノードは、要素ノードの中にありますが、子ノードではありません。

要素ノードとテキストノードの関係を「親と子供」だとすると、属性ノードは「親が身につけているネックレス」のようなものです。

カレンダー

04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。