Home > JavaScript > 書評 JavaScript本格入門 function前の init: って何?

書評 JavaScript本格入門 function前の init: って何?



JavaScript本格入門

まず、この JavaScript本格入門 を読んで 3年以上前 の JavaScript入門書 は処分しました。
※ 基本的な JavaScript言語構文 のおさらいも解説されているので問題なし

もう1冊 パーフェクトJavaScript も手元にあり、こちらはまだ拾い読み中ですが、
ざくっと難易度をTOEIC目標スコア的に書くとこんな感じ。

一般的(?)な入門書 300-500
JavaScript本格入門 500-700
パーフェクトJavaScript 700-900

※ 実際の守備範囲はオーバラップした部分もあるので、目標スコアということで。

わたし自身のスコア(汗)は一般的な入門書を読み終えたレベル( スコア300! )で、たとえば jQueryソースコード の

jQuery.fn = jQuery.prototype = {
          constructor: jQuery,
          init: function( selector, context, rootjQuery ) {

といったコードを見ると 『 function の前の init: って何? 』 という感じです。

差し迫って困っている疑問ではなかったので、本格入門を1回読んだだけでは気づかなかったのですが…

JavaScriptにおいては、連想配列とオブジェクトは同一のものです。
  …
  配列内の個々のデータは「要素」と呼んでいたのに対して、オブジェクト内の個々のデータは
 「プロパティ」と呼びます。関数が格納されたプロパティのことは、特別にメソッドと呼びます。

この説明を読み返しつつ、解説図を眺めるうちに謎は解けた。 メソッド名ですね!

分かってしまえばなるほどという感じですが、PHPなどのスクリプト言語で実装されている
オブジェクト指向( クラスベース ) とはだいぶ違うので、こういったJavaScriptの
オブジェクト指向( プロトタイプベース ) が初めてなら、サイ本 や パーフェクトJavaScript へ
ジャンプする前の足場固めとして効果的な1冊だと思いました。

おまけ( サンプルコード・カスタマイズ )

オリジナルのソースコードが掲載されている本はこちら↓です。
“わかった気”で終わるのではなく、きちんと動くモノを作るために。JavaScript本格入門

Chapter 8 と Chapter 9 の 一部サンプルコード は Yahoo の ウェブ検索API が
2011年3月から有料
になった関係でそのままでは動きません。

そんなわけで、Chapter 9 の サンプルコード だけですが、今のところ無料で使えて JSONP対応 の
オークション検索API
で書き換えてみましたので、Yahoo! API の アプリケーションID を書き換えてお試しください。

<?php
header('Content-Type: application/json;charset=UTF-8');
$params = array(
  'appid'  => '■アプリケーションID',
  'query'  => $_REQUEST['keywd'],
  'results'=> 20
);

// $url = 'http://search.yahooapis.jp/WebSearchService/V2/webSearch?'.http_build_query($params);
   $url = 'http://auctions.yahooapis.jp/AuctionWebService/V2/search?'.http_build_query($params);

$doc = simplexml_load_string(file_get_contents($url));
print(json_encode($doc));
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Yahooオークション検索 jQuery + PHP版</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(
        function(){
                $('#btnsend').click(
                        function() {
                                $('#result').html('通信中...');
                                $.ajax({
                                        url: 'yahooJson.php',
                                        type: 'GET',
                                        //cache: false,
                                        dataType: 'json',
                                        data: $('form').serializeArray(),
                                        timeout: 5000,
                                        success: function(data){
                                                var items = data.Result.Item;
                                                $('#result').empty();
//                                              for(var i = 0; i < data.Result.length; i++){
                                                for(var i = 0; i < items.length; i++){
                                                        $('#result').append(
                                                                $('<li></li>').append(
                                                                        $('<a></a>')
//                                                                              .attr('href', data.Result[i].ClickUrl)
                                                                                .attr('href', items[i].AuctionItemUrl)
//                                                                              .html(data.Result[i].Title)
                                                                                .html(items[i].Title)
                                                                )
                                                        );
                                                }
                                        },
                                        error: function(){
                                                $('#result').html('サーバエラーが発生しました。');
                                        }
                                });
                        }
                );
        }
);
//-->
</script>
</head>
<body>
<form>
<label>キーワード:
<input type="text" name="keywd" size="15" /></label>
<input type="button" value="検索" id="btnsend" />
<hr />
<ul id="result"></ul>
</form>
</body>
</html>

※ 個人的にアプリケーションIDは一般公開するべきではないと思うので、以下の getJSON.html はローカル環境でのみお試しください。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Yahooオークション検索 jQuery + JSONP版</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
        $('#disp').click(function() {
                $.getJSON(
                        'http://auctions.yahooapis.jp/AuctionWebService/V2/json/search?callback=?',
                        {
                        appid: '■アプリケーションID',
                        query: encodeURIComponent( $('#query').val() ),
                        type : 'all',
                        category: '21600' // 本カテゴリー
                        },
                        function(data) {

                                var attributes = data.ResultSet["@attributes"]
                                var firstResultPosition   = attributes.firstResultPosition;
                                var totalResultsAvailable = attributes.totalResultsAvailable;
                                var totalResultsReturned  = attributes.totalResultsReturned;

                                var items = data.ResultSet.Result.Item;

                                $('#count_all').html( totalResultsAvailable );
                                $('#count').html( items.length );

                                for (var i = 0; i < items.length ; i++) {

                                        var item = items[i];

                                        $('#result').append(
                                                $('<li></li>').append(
                                                        $('<a></a>')
                                                                .attr('href', item.AuctionItemUrl)
                                                                .html(item.Title)
                                                )
                                        );
                                }
                        }
                );
        });
});
//-->
</script>
</head>
<body>
<form name="fm">
<label>検索キーワード : <input type="text" id="query" name="query" size="50" value="" /></label>
<input type="button" id="disp" value="検索" />
</form>
<hr />
全<span id="count_all">-</span>件中 <span id="count">-</span>件表示
<ul id="result"></ul>
</body>
</html>

Home > JavaScript > 書評 JavaScript本格入門 function前の init: って何?

Fedora 20
アーカイブ

Return to page top