日々精進

新しく学んだことを書き留めていきます

動画サイト公開しました

IT

・動画サイトリリース
ようやく動画サイトが日の目をみる時がきました。
サークル関係者の人は是非使ってみてください。
アドレスはサークルの掲示板に書き込んであります。
ご意見・ご要望熱烈歓迎です。よろしくお願いします。


・JavaScriptの勉強

Head First JavaScript ―頭とからだで覚えるJavaScriptの基本

Head First JavaScript ―頭とからだで覚えるJavaScriptの基本

オススメ度★★★★☆
最近よく売れてるっぽいHeadFirstシリーズのJavaScript版を購入して勉強中。
このシリーズは初めて買うけど、入門用としては割と良いと思う。


特徴は
・簡単。その分突っ込んだ内容は扱っていない。
・絵が多くて親しみやすい
・サクサク進むのでモチベーションが上がる
・演習が多いので身につきやすい
・条件分岐やループの説明などプログラミング初心者向けの部分があるので他の言語でプログラミング経験のある人には冗長かも


使えそうだと思ったところを抜粋してみる


・getElementByIdが使えないところについて
HTMLの読み込みが終わるまではDOMの要素にアクセスすることは出来ないので、例えば以下のようにSCRIPTタグ内では使えない。

<body>
 <script type="text/javascript">
   //これは正しく動作しない。
   document.getElementById("im").style.height = (window.innerHeight - 100) + "px";
 </script>
</body>

正しくはonloadイベントで処理すべき。

<body>
 <script type="text/javascript">
   //これは正しく動作する。
   window.onload = function() {
     document.getElementById("im").style.height = (window.innerHeight - 100) + "px";
   }
 </script>
</body>



・onChangeとonBlurの違い
onchangeイベントはフィールドからフォーカスがなくなり、かつフィールドの値が変更されたときに起きる。
onblurイベントはフィールドからフォーカスがなくなったら起きる。


・正規表現を使った入力チェック
以下のようにscriptタグ内でonBlurイベントと正規表現で入力を検査するコードを紐付ければOK。

<body>
 <script type="text/javascript">
  window.onload = function() {
   document.getElementById("text").onblur = function validate(field){
    var regex = /\d{3}/;
    if(!regex.test(field.value)) alert("bad input");
   }
  }
 </script>
 <input type="text" id="text">
</body>



・CSSのクラスをイベントで切り替える。
クラスを変更する場合

<input type="text" id="text" onmouseover="this.className='test-hover';">

個別のプロパティを操作する場合

<input type="text" id="text" onmouseover="this.style.visibility = 'hidden';>