この翻訳は不完全です。英語から この記事を翻訳 してください。

前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。

前提知識: 基本的なコンピュータの知識、 HTML と CSS への理解、 JavaScriptの第一歩 関数 — 再利用可能なコードブロック
目的: 独自の関数を作成する練習、役に立つ関連事項についてつっこんだ説明。

Active learning: 関数を作ってみよう

これから作ってみる独自の関数を displayMessage()。これは独自のメッセージボックスをウェブページ上に表示し、ブラウザ組込みのalert()関数の特製の代替品として動作します。既に見たものですが、忘れた事にしましょう。以下をブラウザのJavaScriptコンソールから打ち込みます、どのページでも構いません:

alert('This is a message');

alert関数は引数を一つ取ります — アラートボックスに表示される文字列です。文字列を色々変えてメッセージを変化させてみて下さい。

alert関数には制限があります: メッセージを変更することはできますが、色やアイコンなど、それ以外の部分を簡単には変えられません。もっと楽しくできるやつを作りましょう。

メモ: この例題は全てのモダンブラウザ上で問題なく動くはずですが、古いブラウザではちょっとおかしな見た目になるかもしれません。この課題はFirefox、Opera、Chromeのようなモダンなブラウザ上で行なうのが推奨です。

基本的な関数

最初に、基本的な関数を組み立てていきましょう。

Note: 関数に名前を付ける方針としては、変数名に名前をつける方針と同じルールに従うべきです。問題はありません、すぐに見分けがつくからです — 関数ならすぐ後にカッコが付きますが、変数には付きません。

  1. function-start.html ファイルにアクセスして、ローカルコピーを作成するところから初めます。HTMLは単純です — bodyにはボタン一つしかありません。特製メッセージボックス用の基本的なCSSスタイルと、JavaScriptを追加していく用の空の<script>要素が含まれています。
  2. 次に、<script>要素の中に以下を追加して下さい:
    function displayMessage() {
     
    }
    キーワード function から始めますが、これは関数を定義するという意味です。この後には、関数につけたい名前、カッコの組、中括弧の組と続きます。関数に渡したい引数はカッコの中に、関数を呼び出したときに走らせたいコードは中括弧の中に書きます。
  3. 最後に、以下のコードを中括弧の中に追加します:
    var html = document.querySelector('html');
    
    var panel = document.createElement('div');
    panel.setAttribute('class', 'msgBox');
    html.appendChild(panel);
    
    var msg = document.createElement('p');
    msg.textContent = 'This is a message box';
    panel.appendChild(msg);
    
    var closeBtn = document.createElement('button');
    closeBtn.textContent = 'x';
    panel.appendChild(closeBtn);
    
    closeBtn.onclick = function() {
      panel.parentNode.removeChild(panel);
    }

これは見ていくにはそこそこの量のコードですから、いっしょに一つ一ついっしょに進んでいく事にしましょう。

最初の行では document.querySelector() と呼ばれるDOM API関数を使って<html>要素を選択し、htmlという名前の変数に要素への参照を保存したので、これを使っていろいろやっていきます:

var html = document.querySelector('html');

次の部分では別の DOM API 関数Document.createElement() を使い、<div> 要素を作成、これへの参照をpanelという変数に保存しています。この要素は我々のメッセージボックスの外枠となっていきます。

次にまた別の DOM API 関数Element.setAttribute() を使って、我々のパネルの class 属性とその値msgBoxを設定します。 これは要素のスタイルを指定しやすくするためです — ページの CSS を見ると、メッセージボックスとその中身に適用するスタイルとして.msgBox クラスセレクターがあるのがわかるでしょう。

最後に、前に保存した html 変数の DOM 関数 Node.appendChild() を呼んでいますが、この関数は一つの要素を別の要素の子として組み入れる働きをします。panelという<div>要素を子として、<html>要素の中に追加したいのです。 作成した要素は作成したページにぽんと現われたりはしません — どこに置くのかも指定しなければなりません。なのでこのようにする必要があります。

var panel = document.createElement('div');
panel.setAttribute('class', 'msgBox');
html.appendChild(panel);

The next two sections make use of the same createElement() and appendChild() functions we've already seen to create two new elements — a <p> and a <button> — and insert them in the page as children of the panel <div>. We use their Node.textContent property — which represents the text content of an element — to insert a message inside the paragraph, and an 'x' inside the button. This button will be what needs to be clicked/activated when the user wants to close the message box.

var msg = document.createElement('p');
msg.textContent = 'This is a message box';
panel.appendChild(msg);

var closeBtn = document.createElement('button');
closeBtn.textContent = 'x';
panel.appendChild(closeBtn);

Finally, we use an GlobalEventHandlers.onclick event handler to make it so that when the button is clicked, some code is run to delete the whole panel from the page — to close the message box.

Briefly, the onclick handler is a property available on the button (or in fact, any element on the page) that can be set to a function to specify what code to run when the button is clicked. You'll learn a lot more about these in our later events article. We are making the onclick handler equal to an anonymous function, which contains the code to run when the button is clicked. The line inside the function uses the Node.removeChild() DOM API function to specify that we want to remove a specific child element of the HTML element — in this case the panel <div>.

closeBtn.onclick = function() {
  panel.parentNode.removeChild(panel);
}

Basically, this whole block of code is generating a block of HTML that looks like so, and inserting it into the page:

<div class="msgBox">
  <p>This is a message box</p>
  <button>x</button>
</div>

That was a lot of code to work through — don't worry too much if you don't remember exactly how every bit of it works right now! The main part we want to focus on here is the function's structure and usage, but we wanted to show something interesting for this example.

Calling the function

You've now got your function definition written into your <script> element just fine, but it will do nothing as it stands.

  1. Try including the following line below your function to call it:
    displayMessage();
    This line invokes the function, making it run immediately. When you save your code and reload it in the browser, you'll see the little message box appear immediately, only once. We are only calling it once, after all.
  2. Now open your browser developer tools on the example page, go to the JavaScript console and type the line again there, you'll see it appear again! So this is fun — we now have a reusable function that we can call any time we like.

    But we probably want it to appear in response to user and system actions. In a real application, such a message box would probably be called in response to new data being available, or an error having occurred, or the user trying to delete their profile ("are you sure about this?"), or the user adding a new contact and the operation completing successfully ... etc.

    In this demo, we'll get the message box to appear when the user clicks the button.

  3. Delete the previous line you added.
  4. Next, we'll select the button and store a reference to it in a variable. Add the following line to your code, above the function definition:
    var btn = document.querySelector('button');
  5. Finally, add the following line below the previous one:
    btn.onclick = displayMessage;
    In a similar way to our closeBtn.onclick... line inside the function, here we are calling some code in response to a button being clicked. But in this case, instead of calling an anonymous function containing some code, we are calling our function name directly.
  6. Try saving and refreshing the page — now you should see the message box appear when you click the button.

You might be wondering why we haven't included the parentheses after the function name. This is because we don't want to call the function immediately — only after the button has been clicked. If you try changing the line to

btn.onclick = displayMessage();

and saving and reloading, you'll see that the message box appears without the button being clicked! The parentheses in this context are sometimes called the "function invocation operator". You only use them when you want to run the function immediately in the current scope. In the same respect, the code inside the anonymous function is not run immediately, as it is inside the function scope.

If you tried the last experiment, make sure to undo the last change before carrying on.

Improving the function with parameters

As it stands, the function is still not very useful — we don't want to just show the same default message every time. Let's improve our function by adding some parameters, allowing us to call it with some different options.

  1. First of all, update the first line of the function:
    function displayMessage() {
    to this:
    function displayMessage(msgText, msgType) {
    Now when we call the function, we can provide two variable values inside the parentheses to specify the message to display in the message box, and the type of message it is.
  2. To make use of the first parameter, update the following line inside your function:
    msg.textContent = 'This is a message box';
    to
    msg.textContent = msgText;
  3. Last but not least, you now need to update your function call to include some updated message text. Change the following line:
    btn.onclick = displayMessage;
    to this block:
    btn.onclick = function() {
      displayMessage('Woo, this is a different message!');
    };
    If we want to specify parameters inside parentheses for the function we are calling, then we can't call it directly — we need to put it inside an anonymous function so that it isn't in the immediate scope and therefore isn't called immediately. Now it will not be called until the button is clicked.
  4. Reload and try the code again and you'll see that it still works just fine, except that now you can also vary the message inside the parameter to get different messages displayed in the box!

A more complex parameter

On to the next parameter. This one is going to involve slightly more work — we are going to set it so that depending on what the msgType parameter is set to, the function will display a different icon and a different background color.

  1. First of all, download the icons needed for this exercise (warning and chat) from GitHub. Save them in a new folder called icons in the same location as your HTML file.
    Note: warning and chat icons found on iconfinder.com, and designed by Nazarrudin Ansyari. Thanks!
  2. Next, find the CSS inside your HTML file. We'll make a few changes to make way for the icons. First, update the .msgBox width from:
    width: 200px;
    to
    width: 242px;
  3. Next, add the following lines inside the .msgBox p { ... } rule:
    padding-left: 82px;
    background-position: 25px center;
    background-repeat: no-repeat;
  4. Now we need to add code to our displayMessage() function to handle displaying the icons. Add the following block just above the closing curly brace (}) of your function:
    if (msgType === 'warning') {
      msg.style.backgroundImage = 'url(icons/warning.png)';
      panel.style.backgroundColor = 'red';
    } else if (msgType === 'chat') {
      msg.style.backgroundImage = 'url(icons/chat.png)';
      panel.style.backgroundColor = 'aqua';
    } else {
      msg.style.paddingLeft = '20px';
    }
    Here, if the msgType parameter is set as 'warning', the warning icon is displayed and the panel's background color is set to red. If it is set to 'chat', the chat icon is displayed and the panel's background color is set to aqua blue. If the msgType parameter is not set at all (or to something different), then the else { ... } part of the code comes into play, and the paragraph is simply given default padding and no icon, with no background panel color set either. This provides a default state if no msgType parameter is provided, meaning that it is an optional parameter!
  5. Let's test out our updated function, try updating the displayMessage() call from this:
    displayMessage('Woo, this is a different message!');
    to one of these:
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
    displayMessage('Brian: Hi there, how are you today?','chat');
    You can see how useful our (now not so) little function is becoming.

Note: If you have trouble getting the example to work, feel free to check your code against the finished version on GitHub (see it running live also), or ask us for help.

Conclusion

Congratulations on reaching the end! This article took you through the entire process of building up a practical custom function, which with a bit more work could be transplanted into a real project. In the next article we'll wrap up functions by explaining another essential related concept — return values.

 

In this module

 

ドキュメントのタグと貢献者

このページの貢献者: i12o
最終更新者: i12o,