できる気になっているJSを改めてチュートリアルからやってみる 10日目

すけさん

～～ 独自関数 ～～

最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。

実施するのは、この記事

MDN - Javascript

完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。

JavaScript の構成要素 をやってます。

独自の関数を作ってみよう

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Function start</title>
   <style>
     .msgBox {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       width: 200px;
       background: #eee;
     }

     .msgBox p {
       line-height: 1.5;
       padding: 10px 20px;
       color: #333;
     }

     .msgBox button {
       background: none;
       border: none;
       position: absolute;
       top: 0;
       right: 0;
       font-size: 1.1rem;
       color: #aaa;
     }

   </style>
 </head>
 <body>
   <button>Display message box</button>

   <script>
     function displayMessage(){
       console.log("hogefuga");
       const html = document.querySelector('html');

       // panelになるものを作成し、htmlに挿入
       const panel = document.createElement('div');
       panel.setAttribute('class', 'msgBox');
       html.appendChild(panel);

       // panelに入れる本文を作成し、挿入
       const msg = document.createElement('p');
       msg.textContent = 'This is a message box';
       panel.appendChild(msg);

       // 閉じるボタンを作成し挿入
       const closeBtn = document.createElement('button');
       closeBtn.textContent = 'x';
       panel.appendChild(closeBtn);

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

     const btn = document.querySelector('button');
     btn.onclick = displayMessage; // () はいれないよ。押されたときに実行するためだから。
   
   </script>
 </body>
</html>

onclick に関数を埋めるときに () をつけない。なお、この文脈においての()は「関数呼び出し演算子」と呼ばれるそうです。

btn.onclick = displayMessage;
btn.onclick = displayMessage(); //関数呼び出し演算子

パラメータ（引数）を使用して関数を改善する

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Function start</title>
   <style>
     .msgBox {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       width: 242px;
       background: #eee;
     }

     .msgBox p {
       line-height: 1.5;
       padding: 10px 20px;
       color: #333;
       padding-left: 82px;
       background-position: 25px center;
       background-repeat: no-repeat;
     }

     .msgBox button {
       background: none;
       border: none;
       position: absolute;
       top: 0;
       right: 0;
       font-size: 1.1rem;
       color: #aaa;
     }

   </style>
 </head>
 <body>
   <button>Display message box</button>

   <script>
     function displayMessage(msgText,msgType){
       const html = document.querySelector('html');

       // panelになるものを作成し、htmlに挿入
       const panel = document.createElement('div');
       panel.setAttribute('class', 'msgBox');
       html.appendChild(panel);

       // panelに入れる本文を作成し、挿入
       const msg = document.createElement('p');
       msg.textContent = msgText;
       panel.appendChild(msg);

       // 閉じるボタンを作成し挿入
       const closeBtn = document.createElement('button');
       closeBtn.textContent = 'x';
       panel.appendChild(closeBtn);

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

       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';
       }
     }

     const btn = document.querySelector('button');
     btn.onclick = function(){
       displayMessage('Your inbox is almost full — delete some mails', 'warning');
       displayMessage('Brian: Hi there, how are you today?','chat');
     };
   
   </script>
 </body>
</html>

みたいなかんじ。関数作るのはいいですねぇ。関数の戻り値の話がありましたが、これは大丈夫そうなので読むだけでした。

この記事が気に入ったらサポートをしてみませんか？