2011/06/01

symfonyの環境でjavascript

5/30の作業

・授業もあと1週間です。
・symfonyの環境でjavascriptの練習
Webのテキスト(おまけ/Javascript基礎)を参照

・javascriptを書くところはhtml(symfonyではテンプレートファイル)
scriptタグに書く

<準備>
一般ユーザにて作業
・symfonyのプロジェクトjavascriptを作る。
$ mkdir javascript
$ cd javascript/
$ symfony init-proj javascript
・アプリケーションはfront
$ symfony init-app  front
・モジュールはdefault
$ symfony init-module front default
・apacheのvhost設定(ここはrootユーザ)
# vi /etc/httpd/conf/httpd.conf
<VirtualHost *:80>
    DocumentRoot /home/user/javascript/web
    ServerName www.javascript.local
    ErrorLog logs/www.js.local-error_log
    CustomLog logs/www.js.local-access_log common
    alias  /sf /usr/share/pear/data/symfony/web/sf
    <Directory "/home/user/javascript/web">
      Allowoverride All
      Options -Includes -ExecCGI
    </Directory>
</VirtualHost>
・設定後は、apacheの再起動
# /etc/rc.d/init.d/httpd restart
ロ-カルのhostsファイル変更も忘れずに

・アクションとテンプレートの修正

・「javascript練習」の文字をブラウザで表示出来ることを確認する

<内容>
(1)javascriptでアラート表示
・テンプレートにjavascriptを記述
<script type="text/javascript">
alert("Hello Fujisawa");
</script>

・実行して、アラートが表示されることを確認する。

(2)javascriptのコードを外部へ
・テンプレートの修正
<script type="text/javascript" src="/js/main.js">
</script>

・外部ファイル作成
/web/js/main.jsファイルを作成し、内容を記述。
alert("Hello Fujisawa");
(SEO対策として、CSS同様javascriptも外部ファイルにすることを推奨されているらしい)

・実行して(1)と同様アラートが表示されることを確認する。


(3)javascriptの記述場所による違い
(A)aタグ(アンカータグ)への埋め込み
・テンプレートの修正
<a href="javascript:alert('Hello');">ポップアップ</a>
・ポップアップをクリックしてアラートが表示されることを確認

(B)「イベントハンドラ」としてスクリプトを埋め込む
・テンプレートの修正
<input type="button" value="クリック" onclick="btnOnClick()">
・javascriptは関数として(layout.phpの)headタグに
<script type="text/javascript">
function btnOnClick() {
    alert("クリックされました");
}
</script>
・クリックボタンを押してアラートが表示されることを確認

・javascriptは致命的なエラー以外、軽いものはエラーがわかりずらい。
Firebugのコンソールにjavascriptのエラーが表示されるので、動きがおかしいときはここのメッセージを確認する。

<その他のイベント
・on + イベント名
<body onload="alert('load');">
(これはlayout.phpのbodyタグ)
・Webのリフレッシュでアラート表示

・selectタグを使って、変更されたときのイベント
テンプレートの変更
<select id="pref" name='pref' onchange="checkPref(this.value);">
<option value='1'>北海道</option>
<option value='2'>青森</option>
</select>

・関数
(前記の例ではheadタグに関数を置いたが、javascriptの関数記述は呼び出された後でも良い)
<script type="text/javascript">
function checkPref(pref) {
    if (pref == 1) {
        alert("北海道が選択されました");
    } else if (pref == 2) {
        alert("青森が選択されました");
    }
}
</script>
・selectを切り替えてアラートが表示されるのを確認

<javascriptの使われ方>
・Webの画面で、項目入力中にバリデーションをかけ、右側にエラーを表示。
・しかし、入力中のエラーチェックは、ブラウザ側でjavascriptを無効にすると、
動かないので、最終的にはサーバ側(php,perl)でチェックする。

<変数>
・varを付ける。

<ループ>
・ループ(文字の連結は+)
<script type="text/javascript">
for (var i=0; i < 10; i++) {
      document.writeln("iの値は" + i + "<br>");
    }
</script>
・表示を確認

<配列>
<script type="text/javascript">
var ary = ['鈴木', '佐藤', '田中'];
for(var i = 0; i < ary.length; i++) {
      document.writeln(ary[i] + "<br>");
}
</script>
・表示を確認
・javascriptでは、オブジェクトの関数呼び出しは「.」でつなぐ。

・関数の練習:三角形の面積を求める関数を作る
<script type="text/javascript">
document.writeln('三角形の面積(5,2):' + triangle(5,2));

function triangle( base, height) {
    return base * height /2 ;
}
</script>
・表示を確認

<関数リテラル>
javascriptは、関数を引数として使うことが出来る。
関数リテラルは、実行時に評価されるため、呼び出し元のコードよりも先に
記述する必要がある。
・ここは大切、復習しておいて
・関数リテラルを使う目的は部品化。
<script type="text/javascript">
 triangle = function(base, height) {
      return base * height / 2;
    }

document.writeln('三角形の面積は' + triangle(5, 2));
</script>


<スコープ>
(1)変数がスクリプト全体から参照できるグローバルスコープ
(2)その変数が定義された関数の中でのみ参照できるローカルスコープ

(1)関数内でvarの記述がない場合、グローバルスコープ
<script type="text/javascript">
scope = 'グローバル';
function getValue() {
  scope = 'ローカル';
  return scope;
}
document.writeln(getValue() + "<br>");
document.writeln(scope + "<br>");
</script>

(2)関数内でvarを付けるとローカルスコープ
<script type="text/javascript">
var scope = 'グローバル';
function getValue() {
  var scope = 'ローカル';
  return scope;
}
document.writeln(getValue() + "<br>");
document.writeln(scope + "<br>");
</script>
・結果を表示して違いを確認する。


<DOM>
DOM(Document Object Model)とは、HTMLやXMLで書かれたドキュメントに
アクセスするための標準的な仕組み。

属性 widthなど
要素 pタグなど
テキスト 

・サンプル、ID値をキーにノードを取得する
<script type="text/javascript">
function btn_click() {
    var result = document.getElementById("result");
    result.innerHTML = "こんにちは" + document.fm.name.value + 'さん';
}
</script>

<form name="fm">
<input type="text" name="nname" id="name">
<input type="submit" value="送信" onclick="btn_click(); return false;">
<div id="result"></div>
</form>
・表示されるinputタグに名前を入れて、名前が表示されることを確認する。

・サンプル、その2、pタグのタグ名をキーにノードを取得し、アラート表示
<p>Hello!</p>
<p>Good night!</p>

<script type="text/javascript">
function btn_click() {
    var result = [] ;
    var list   = document.getElementsByTagName('p');
    for ( var i=0; i <list.length; i ++) {
        result.push(list.item(i).innerHTML);
    }
    alert(result.join(","));
}
</script>

<form name="fm">
<input type="submit" value="確認" onclick="btn_click(); return false;">
</form>
・確認ボタンを押すと、pタグのテキストがアラートに表示されるのを確認する。

・相対的な位置関係でノードを取得する
<script type="text/javascript">
window.onload = function() {
    var result = [] ;
    var food   = document.getElementById("food");
    var options = food, childNodes;

    for (var i=0; i<options.length; i++) {
        var option = options.item(i);
        if (option.nodeType ==1) {
            result.push(options.item(i).value);
        }
    }
    alert(result.join(','));
}
</script>

<select name="food" id="food">
<option value="ラーメン">ラーメン</option>
<option value="餃子">餃子</option>
<option value="シュウマイ">シュウマイ</option>
</select>
・画面のリフレッシュで、selectタグのテキストがアラートに表示されるのを確認する。
・「window.onload」は読み込んだときに関数が実行される。


<javascriptのフレームワーク:jquery
・テキストとしてダウンロードして、symfonyプロジェクトのディレクトリ/web/js/jquery.jsで保存
・jqueryを使うと記述が簡単になる。
・documentationのGetting Started から読んで
・ドキュメントの日本語版は古い場合があるので英語で読む

・layout.phpのheadタグで読み込むように修正
<script type="text/javascript" src="/js/jquery.js"></script>

・jquery、サンプル
<h1>javascript練習</h1>
<script type="text/javascript">
alert($("h1").html()) ;
</script>
・h1タグのテキストが、アラートのメッセージに表示されることを確認する。

0 件のコメント:

コメントを投稿