なにか色々

一旦、詰まってそうな所について、どうすれば良いのか？の忘備録的なものができればよいなぁと思ってます。

変数とかの関係性

変数や配列ってデータを格納する所なのですが
一度定義した所で、どこでもいつでも使えるわけではないのですね。
ある程度のルールは存在しています。

関係性について

では、どこで使えてどこで使えないのか？
それを一度おさらいしてみようと思います。
ちなみに、変数で説明してますが、変数に限らず、です。

<script type="text/javascript">
var test = 'abc'; // これはどこでも使える。グローバルな位置
window.onload = function()
{
 // onload内でならどこでも使用できる
 var test01 = 'ああああ';

 // abc  グローバルな変数は使える
 alert(test);

 // undefined 下位に属する変数は使用できない。
 alert(test02);

 document.getElementById('contents').addEventListener('click',function()
 {
  // このonClickイベント内でならどこでも使用できる
  var test02 = 'おおおお';

  // abc  グローバルな変数は使える
  alert(test);

  // onload内定義変数は使用できる。
  alert(test01);

  // 下のイベントバインド部分で定義された内容ではない、グローバルなものが出る
  alert(test): // abc

 },false);

 document.getElementById('elem').addEventListener('click',function()
 {
  // このonClickイベント内でならどこでも使用できる
  var test03 = 'おおおお'

  // abc  グローバルな変数は使える
  alert(test);

  // onload内定義変数は使用できる。
  alert(test01);

  // 同階層であるが、別のイベント内の変数は使えない
  alert(test02);

  // グローバル変数と同名の変数を宣言した場合
  var test = 'efg';

  alert(test):

  // この場合は同名であるが、グローバルな変数とはまた別のものとして扱われる。
  // 但し、混乱を招く元になるので、使用禁止にしたほうが良い

 },false);
};
</script>

変数宣言について

var [変数名];で変数宣言となります。
つまり、これは変数として使いますよ、との意味です。
ちなみに変数宣言は必須ではありません。無くても変数として使えますが
上記の関係性のルールがありますので、変数宣言をするクセをつけましょう。

ロジックの考え方について

要件を見た時に、どうすればそれが実装できるのかを考えます。
頭の中だけで考えようとしないほうが良いです。
紙でもテキストファイル上でもなんでもよいので、日本語でまとめます。
自分はJSソース上にコメントとして書き殴りまくります。
フローチャート図を書くのもありですね。
後は最初から完璧に作ろうとは思わない事が大事。
正常に動作する所までまず持って行くのが重要です。

最終的にどう動けば正解なのか。をまず考えます
ゴールが見つかれば、次にそれに至る過程を考えます
要するに、ゴールまでの道筋を考えます。
日本語をそのままJS処理に順番に置き換えていきます。

最終的にどう動けば正解なのか分からん

仕様等をもう一度確認した上で、人にすぐ聞きましょう。

過程が分からん

では過程の考え方を。例えば以下の処理を考える事にします。

0～10のデータが入った配列を返す関数を作成してみよう。
【しばり条件】
・ループ処理仕様必須 　全ループ関数を使ったパターンを作成してください。

まず、こいつの最終ゴールですが
【0～10のデータが入った配列を返せばOK】
となります。
で、次にそれに至る過程を考えます。
【返す配列を作る】これが過程にあたります。
この情報だけだと
・ベタで配列を作ったらいいのか
・ループで作ったらいいのか
等、ゴールに至るまでのルートがいくつか存在しています。
でここで
【ループ処理仕様必須　全ループ関数を使ったパターンを作成してください。】
に着目します。
書いてある通り、ループを使う事が記載されていますので、
【ループで配列を作ればいい】
という過程になります。
返すものの作り方が分かりました。

組み立てて行く

過程が分かったので、後はそれをJS処理に置き換えて行くだけです。
何？処理が分からん？ググれ。以上

１．配列を返す関数なのよね

function myFunc1()
{
 var arr = [];
 return arr;
}

２．引数っているんやっけ？

0～10を入れるだけやろ。いらんやろ

３．ループ使って配列を返すのか

ループで配列に数字いれていくんか
とりあえずfor文使ったろ

function myFunc1()
{
 var arr = [];
 for(var i=0;i<=10;i++)
 {
   arr.push(i);
 }
 return arr;
}

４．表示させてみるで

function myFunc1()
{
 var arr = [];
 for(var i=0;i<=10;i++)
 {
   arr.push(i);
 }
 return arr;
}
alert(myFunc1());
// おわり

分からん時はじっくりと考える事も必要なわけです。
この考え方がクセついて、JSで何が出来るのか、どんな関数があるかを分かっていれば
どんどこスピードも上がっていきます。

処理の実行タイミングとか

JSの処理の実行タイミングについて説明します。
ちなみに処理は
【上から順番に実行され、遡ることは100%ありえません】

<script type="text/javascript">
  /*-----------------------------------------------------*/
    このscriptタグがブラウザで読み込まれた段階で
    処理が実行される
    この時点では、他HTML、画像、DOMツリーの変換は行われていません。
    つまりここに、イベントバインドや要素の参照等を行った所で
    ブラウザはそれらをまだ認識していない状態なので
    意味をなしません。
    また、ここでの変数宣言は原則禁止です。
    他処理に影響しますので、やめましょう。事故っても知りませんよ。
  /*-----------------------------------------------------*/

window.onload = function()
{


  /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    onloadイベントが実行する度に
    処理が実行される
    onloadはWEBページを表示した時だけしか実行されない
    (そりゃそうだ)ので、実質最初の1回だけ実行される。
    window.onloadは、JS以外の画像や動画やflash等が全てロードされた状態
    なので、ここで初めてイベントバインドや要素の参照ができるようになります。
    イベントや各関数で共通で使う変数はここで宣言しましょう。
  /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


 document.getElementById('contents').addEventListener('click',function()
 {
  /*****************************************/
    セットしたイベントが発火(実行)する度に
    処理が実行される
  /*****************************************/
 },false);

 document.getElementById('elem').addEventListener('click',function()
 {
  /*****************************************/
    セットしたイベントが発火(実行)する度に
    処理が実行される
  /*****************************************/
 },false);

 function func1()
 {
  /*****************************************/
    関数が呼び出される度に、処理が実行される
  /*****************************************/
 }

};
</script>

処理は遡らないの錯覚しがちな所

<script type="text/javascript">
window.onload = function()
{
 function test(string)
 {
  if(string == 1)
  {
   alert('あなたの前世はニラです。');
  }
  else
  {
   alert('あなたは次ニラに生まれ変わります。');
  }
 }

 document.getElementById('elem').addEventListener('click',function()
 {
   test(1);
 },false);
};
</script>

最初にtest関数を定義していて、後で呼び出していますよね
なので、これは遡っているんじゃねーか的な勘違いがまれにあるみたいなのですが
実際の処理を書くとこんなニュアンスです。

<script type="text/javascript">
window.onload = function()
{
 function test(string)
 {
  if(string == 1)
  {
   alert('あなたの前世はニラです。');
  }
  else
  {
   alert('あなたは次ニラに生まれ変わります。');
  }
 }

 document.getElementById('elem').addEventListener('click',function()
 {
  // test(1);
  string = 1;
  if(string == 1)
  {
   alert('あなたの前世はニラです。');
  }
  else
  {
   alert('あなたは次ニラに生まれ変わります。');
  }
 },false);
};
</script>

要するに、導線がtest関数に戻るのではなく
test();って呼び出している所が、まるまる処理に置換されるようなイメージに近いです。
※実際に処理が置換されているわけではないです。あくまでもイメージです。
考えるな、感じろ

後はなんだろ。大事なこと？

returnの後に処理を書かない

まぁ、そうなんですが、return xx; はそこで処理が終了になります。
つまり、その後は何があっても実行されない事になります。

<script type="text/javascript">
window.onload = function()
{
 // 勘違いしがちな所
 if(XX == ZZ)
 {
  // 分岐A
  alert('ばかめ(´・ω・｀)ここがお前の墓場だ！');
  alert('ざんねん。あなたのぼうけんは、ここで終わってしまった！');
  return false; // これは分岐Aに入った時のみ有効
 }
 else
 {
  // 分岐B
  alert('まじで。やべぇな(´・ω・｀)');
 }

 // 分岐Bに入ると処理は続く
 alert('(´・ω・｀)仕方がない。俺の進化した姿を見せてやろう');

};
</script>

兎に角まずはググれ。そして書け

実は、何が分からないのか分からないってのはもう終わりの言葉なんですよね
アドバイスするにもできないもんで。
禁句にしましょう。

で、詰まってる時は頭で考えても答えは出にくいもんです。
なので、思った事を殴り書きしていくのは凄く重要な事になります。
焦ってたりすると頭ん中ぐにゃぐにゃしますし。

分からない事は悪ではなく、知ったかすることと、分かろうとしない事、解決しようとしない事が悪です。
みんな最初はわかんねーよって感じですね。

まずググれ。いっぱいググれ
そいで考える。書き溜める。
誰かに聞く。

自分の中では、考えて考えて聞くまでのリミットはおよそ30分です。
それ以上考えても出ないもんは出ないです。時間の無駄なので、どこかで必ず人に頼りましょう。