JavaScript 初歩知識

記事を載せるにあたり

JavaScriptを学習中で、講義を聞いて個人的にまとめた内容になります。不明な点や間違いがある場合がありますので、お気づきの方はコメントしていただけると幸いです。

JavaScriptの構図と仕組み

• 先頭は小文字、続く単語一つ一つの頭を大文字にする。

JavaScriptのプログラムが動くきっかけ

1. 組込まれた時

   <script src="js/main.js"></script>
   

2. html文書が読み込まれた後(エレメント:ボタンなどのこと)

   • onload時

   window.onload = function (){
   
   alert("ok");
   }
   

3. イベント発生時

   • クリック、キーダウン、フォーカス

   function 名前(){
       <input type="button" onClick="名前()" />
   }
   

更に詳しく解説

組込まれた時

• 変数宣言の仕方

  var 変数名[=値];
  

• 配列宣言(値を入れない場合)

  var 配列名=new Array(個数);
  

• 配列宣言(値を入れる場合)

  var 配列名=[値,値,・・・・];
  

• サンプルaという配列を10個

  var a=new Array(10);
  var a=[0,0,0,0,0,0,0,0,0,0];
  

onload時

• htmlの文書の中

  <input type="text" id="id名" />
  

• TextBoxの値の取得

  変数名=document.getElementById("id名").value;
  //valueはtextでもidでもok
  

• TextBoxに値を設定

  document.getElementById("id名").value=値;
  //値は変数でもok。文字列の囲み方は縛りがない。
  

エレメント

```js
テキストボックス     id = "t1"
テキストボックス     id = "t2"
ボタン　　　　　    id = "btn"
　　　　　　　onClick = "copy()"
変数
val
```

構文してみる

• 組込まれた時

  var val;
  

• onload時

  document.getElementById("t1").value = "";
  document.getElementById("t2").value = "";
  //F5で更新したときは、クリアはされない。
  

• 記述方法1

  function copy(){
      val=document.getElementById("t1").value;
      //t1のテキストボックスの中身がvalに代入
      document.getElementById("t2").value = val;
      //t2に代入
  }
  

• 記述方法2

  function copy(){
  document.getElementById("t2").value = document.getElementById("t1").value;
  }
  

---