久保清隆のブログ

ライフハック、健康、旅行など、役立つ情報を書きます。

JavaScriptの勉強2 〜基礎の基礎 JavaScript概要と基本文法

JavaScriptの勉強1 〜基礎の基礎 JavaScriptの概要とscriptタグの続き。
JavaScriptの基礎勉強。

JavaScriptの最重要原則

JavaScriptを有効にできない、あるいはしない人が、スクリプト無効のブラウザを使った場合に、サイトの重要なページを読むことができないようなJavaScriptの使用は避ける。

サンドボックス

サンドボックスとは、ブラウザを動作させているコンピュータのリソースにスクリプトからはアクセスできない、保護された環境のこと。
これは、悪意をもったJavaScriptコードが実行されてしまわないようにするために考え出された。
それでもJavaScriptは安泰ではない。
開発者は、悪意がなくてもJavaScriptが脆弱になりえるということを理解しておく必要がある。

関数の定義法

function 関数名(引数1, 引数2, ...) {
コード
}

これで、定義した関数を呼び出せば、コードの内容が実行される。

varとスコープ(有効範囲)

varで変数を定義することで、その変数は局所的に参照可能になる(ローカル変数)。
例えば関数内で変数をvarを用いて定義すれば、その変数はその関数内でのみ有効である。
varを使わなかったら、その変数はJavaScriptライブラリ内全体から参照可能になってしまう。

コードの区切り

JavaScriptでは、コードは、「;」または「改行」で区切られる。
従って同一行内で複数のコードを書く場合は、;で区切る必要がある。
しかし、一行に一つのコードしか書かない場合でも;を付けるのは好ましい習慣である。

イベントハンドラ(Event Handler)

関数を呼び出す際、イベントハンドラの属性をつけると、そのイベントと関数を結びつけ、そのイベントが起こった時のみ、関数を実行することができる。

イベントハンドラ一覧

イベントハンドラには、以下のようなものがある。

イベントハンドラ イベント内容 影響を受けるオブジェクト
onabort イメージの読み込み中止時 画像
onblur オブジェクトがフォーカスされなくなった時 select、text、textarea
onfocus オブジェクトがフォーカスされた時 select, text, textarea
onchange フォームの内容が変更され、フォーカスを失った時 select、text、textarea
onclick,ondblclick クリック、ダブルクリックした時 ほとんどのページ要素
oncontextmenu コンテキストメニューが表示された時 ウェブのドキュメント
onerror ページやイメージの読み込み失敗時 ドキュメント、画像
onkeydown,onkeyup,onkeypress キーを押した時、離した時、しばらく押したとき  
onload ページのロード時  
onmouseover マウスカーソルが重なった時 link
onmouseout マウスカーソルが離れたとき link
onmousedown マウスボタンを押した時 ほとんどの要素
onmouseup マウスボタンを離した時 ほとんどの要素
onselect フォーム内でテキストが選択された時 text、textarea
onsubmit submit(送信)された時 form
onreset reset(取り消し)された時 form
onunload ページからフォーカスがはずれた時  
コード例
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>イベントハンドラ利用</title>
<script type="text/javascript">
  function sayHello(){
    var dt = Date();
    var msg = 'Hello, World!' + dt;
    alert(msg);
  }
</script>
</head>
<body onload="sayHello()">

これで、ページがロードされた時、sayHello関数が呼び出され、実行される。



お読み頂きありがとうございます。
少しでもお役に立てたらクリックお願いします↓。
ブログランキング・にほんブログ村へにほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ プログラム・プログラマへにほんブログ村 サラリーマン日記ブログ 戦うサラリーマンへ