JavaScript - Advanced JavaScript - The DOM and jQuery(LISTING YOUR FRIENDS WITH JQUERY(AND MAKING THEM SMELL!))

Javascript for Kids

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Node.js(V8) (JavaScript engine)

Javascript for Kids (Nick Morgan 著、Angus Croll 寄稿、Miran Lipovaca イラスト、No Starch Press)のPart 2(Advanced JavaScript)、Chapter 9(The DOM and jQuery)、PROGRAMMING CHALLENGES #1: (LISTING YOUR FRIENDS WITH JQUERY(AND MAKING THEM SMELL!)、(No. 2697)を取り組んでみる。

PROGRAMMING CHALLENGES

コード(Emacs)

<div id="myFriendNames">
    <h1 id="myFriend">My Friends</h1>
  </div>
  <button id="change0">change the h1 element</button>
  <button id="hideNames">hide</button>
  <button id="showNames">show</button>
  <button id="fadeInNames">fadeOut/fadeIn</button>
  <button id="addText">add text</button>
</div>

/*jslint         node    : true, continue : true,
  devel  : true, indent  : 2,    maxerr   : 50,
  newcap : true, nomen   : true, plusplus : true,
  regexp : true, sloppy  : true, vars     : false,
  white  : true
*/
/*global $, document*/
$(document).ready(function () {
    var names = ['js', 'scheme', 'c', 'python', 'io'],
        i,
        max;

    for (i = 0, max = names.length; i < max; i += 1) {
        $('#myFriendNames').append('<p class="friendName">' + names[i] +
                                   '</p>');
    }
    
    $('#change0').click(function () {
        $('#myFriend').text('Hello world!');
    });

    $('#hideNames').click(function () {
        $('#myFriendNames').hide();
    });

    $('#showNames').click(function () {
        $('#myFriendNames').show();
    });
    
    $('#fadeInNames').click(function () {
        $('#myFriendNames').fadeOut(1000).fadeIn(1000);
    });

    $('#addText').click(function () {
        $('.friendName').append(' smells!');
    });
});

My Friends