少しのブラッシュアップ

Author: osamu377

docs/01_00_JavaScriptを始める前に.html

@@ -35,7 +35,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-fdbc96e0.js";
+            window.path_to_searchindex_js = "searchindex-06227269.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-bc46d24f.js"></script>
@@ -253,26 +253,7 @@ <h2 id="ii-webページを作る3つの力htmlcssjavascriptの役割"><a class="
 <p>HTMLとCSSだけでは、家は完成しても「電気が通っていない」状態です。HTMLとCSSだけのWebページは、ただ情報を表示するだけの、動きのない「紙のポスター」のようなものです。</p>
 <p>JavaScriptという電気が通ることで、スイッチを押せばライトがつき、自動ドアが開き、エレベーターが動くようになります。Webページはユーザーと「対話（たいわ）」ができる便利な道具に変わるのです。</p>
 <hr>
-<h2 id="iii-オブジェクトとは"><a class="header" href="#iii-オブジェクトとは">III. オブジェクトとは</a></h2>
-<p>皆さんがこれから学ぶのは、<strong>自分でWebページを動かす方法</strong> です。Webページを動かすためには、<strong>Webページを表示しているブラウザに「これこれこういうことをしなさい」と命令する</strong> ことが必要です。</p>
-<p>たとえば飲食店でアルバイトをする場合も、わかりやすく書かれたマニュアルを見れば、ミスをすることなく作業することができます。マニュアルは、誰が読んでも同じ意味にとれるように、あいまいさのない、はっきり書かれたものでなければなりません。</p>
-<h3 id="1-オブジェクトとはどんなもの"><a class="header" href="#1-オブジェクトとはどんなもの">1. オブジェクトとはどんなもの？</a></h3>
-<p>HTMLやCSSという設計図に従って、ブラウザはそれをWebページとして作り上げてくれます。JavaScriptは出来上がったWebページの部品を <strong>「オブジェクト」</strong> としてとらえ、それに対して『これこれこういうことをしなさい』と命令します。</p>
-<p>さまざまな人が集まって会社ができているのと同じように、Webページももさまざまな部品から構成されています。そして、「会社に何かをしてもらう」というのは、実際には「その会社の人に何かをしてもらう」ことです。同じように、「Webページを動かす」というのは「Webページを作っている部品たちに何かをしてもらう」ということです。</p>
-<h3 id="2-あいまいさのない命令誰が何をする"><a class="header" href="#2-あいまいさのない命令誰が何をする">2. あいまいさのない命令：「誰が」「何をする」</a></h3>
-<p>JavaScripはマニュアルですから、「みんなで協力して、こういうことをやりなさい」とぼんやりした命令をするのではなく、「Aさんはこれをして」「Bさんはあれをして」と一人ひとりの作業を正確に伝えなければなりません。 <strong>「誰が」「何をする」のかを、だれが読んでもわかるように書く</strong> ことが大事です。</p>
-<p>この「Aさん」「Bさん」がJavaScriptでは <strong>「オブジェクト」</strong> にあたります。この言葉は、皆さんには聞きなれないものかもしれません。まず、次のようなイメージを頭に思い描いてください。</p>
-<ul>
-<li><strong>Webページの中には、たくさんのオブジェクトと呼ばれるものがいて、JavaScriptを使って、彼らに命令すれば、仕事をしてくれるらしい</strong></li>
-</ul>
-<p>今は、それだけで十分です。「オブジェクトの中身がどうなっているのか？」や「それに仕事をしてもらうためのマニュアルをどう書けばよいのか？」については、これから少しずつ、何度かに分けて説明します。</p>
-<p><img src="./img/obj_vba_03.jpg" alt="働くオブジェクト"></p>
-<h3 id="3-htmlとcss"><a class="header" href="#3-htmlとcss">3. HTMLとCSS</a></h3>
-<p>では、JavaScriptで扱うオブジェクトとは具体的には、どんなものでしょうか？</p>
-<p>ブラウザはサーバーからのレスポンスを受け取ります。そのレスポンスのうち「HTML」と「CSS」がWebページという「家」の柱（はしら）、壁（かべ）、床（ゆか）、あるいはペンキ、インテリア、壁紙、といった部品になるのは、前に説明した通りです。</p>
-<p>実は、この「Webページの部品」こそが、JavaScriptの <strong>オブジェクト</strong> です。</p>
-<p>したがって、JavaScriptでWebページを操るためには、まずWebページの部品そのものについて、理解しなければなりません。そのため、次のステップでは、Webページの設計図である <strong>HTML</strong> と <strong>CSS</strong> について説明します。</p>
-<h2 id="iv-イベントとは"><a class="header" href="#iv-イベントとは">IV. イベントとは</a></h2>
+<h2 id="iii-イベントとは"><a class="header" href="#iii-イベントとは">III. イベントとは</a></h2>
 <h3 id="1-きっかけを待っているコンピューター"><a class="header" href="#1-きっかけを待っているコンピューター">1. 「きっかけ」を待っているコンピューター</a></h3>
 <p>ふだん、Webページはただじっとしているだけに見えますが、実はあなたの操作を <strong>「今か今かと待っている」</strong> 状態です。</p>
 <p>例えば、あなたがこんな動きをしたとき、それがすべて「イベント」になります。</p>
@@ -295,7 +276,7 @@ <h3 id="2-もししたらするという約束"><a class="header" href="#2-も
 <h3 id="3-留学生への導入メッセージ"><a class="header" href="#3-留学生への導入メッセージ">3. 留学生への導入メッセージ</a></h3>
 <blockquote>
 <p>「今はまだ、難しい呪文（じゅもん）を覚える必要はありません。
-画面の中で起きる**『クリック』や『入力』などの変化の一つひとつに、名前（イベント）がついているんだな**、ということだけ覚えておいてください。
+画面の中で起きる <strong>『クリック』や『入力』などの変化の一つひとつに、名前（イベント）がついているんだな</strong> 、ということだけ覚えておいてください。
 皆さんが『何か』をしたときに、サイトが『反応（はんのう）』するのは、このイベントのおかげなんですよ！」</p>
 </blockquote>
 <hr>
@@ -314,6 +295,35 @@ <h3 id="まとめ"><a class="header" href="#まとめ">まとめ</a></h3>
 </div>
 <hr>
 <p>「ウェブページを生きているように動かすための『スイッチ』」。それがイベントです。</p>
+<h2 id="iv-オブジェクトとは"><a class="header" href="#iv-オブジェクトとは">IV. オブジェクトとは</a></h2>
+<p>皆さんがこれから学ぶのは、<strong>自分でWebページを動かす方法</strong> です。Webページを動かすためには、<strong>Webページを表示しているブラウザに「これこれこういうことをしなさい」と命令する</strong> ことが必要です。</p>
+<p>たとえば飲食店でアルバイトをする場合も、わかりやすく書かれたマニュアルを見れば、ミスをすることなく作業することができます。マニュアルは、誰が読んでも同じ意味にとれるように、あいまいさのない、はっきり書かれたものでなければなりません。</p>
+<h3 id="1-オブジェクトとはどんなもの"><a class="header" href="#1-オブジェクトとはどんなもの">1. オブジェクトとはどんなもの？</a></h3>
+<p>HTMLやCSSという設計図に従って、ブラウザはそれをWebページとして作り上げてくれます。JavaScriptは出来上がったWebページの部品を <strong>「オブジェクト」</strong> としてとらえ、それに対して『これこれこういうことをしなさい』と命令します。</p>
+<p>さまざまな人が集まって会社ができているのと同じように、Webページももさまざまなオブジェクトから構成されています。そして、「会社に何かをしてもらう」というのは、実際には「その会社の人に何かをしてもらう」ことです。同じように、<strong>「Webページを動かす」というのは「Webページのオブジェクトに何かをしてもらう」</strong> ということです。</p>
+<h3 id="2-あいまいさのない命令誰が何をする"><a class="header" href="#2-あいまいさのない命令誰が何をする">2. あいまいさのない命令：「誰が」「何をする」</a></h3>
+<p>JavaScripはマニュアルですから、「みんなで協力して、こういうことをやりなさい」とぼんやりした命令をするのではなく、「Aさんはこれをして」「Bさんはあれをして」と一人ひとりの作業を正確に伝えなければなりません。 <strong>「誰が」「何をする」のかを、だれが読んでもわかるように書く</strong> ことが大事です。</p>
+<p>この「Aさん」「Bさん」がJavaScriptでは <strong>「オブジェクト」</strong> にあたります。この言葉は、皆さんには聞きなれないものかもしれません。まず、次のようなイメージを頭に思い描いてください。</p>
+<ul>
+<li><strong>Webページの中には、たくさんのオブジェクトと呼ばれるものがいて、JavaScriptを使って、彼らに命令すれば、仕事をしてくれるらしい</strong></li>
+</ul>
+<p>今は、それだけで十分です。「オブジェクトの中身がどうなっているのか？」や「それに仕事をしてもらうためのマニュアルをどう書けばよいのか？」については、これから少しずつ、何度かに分けて説明します。</p>
+<p><img src="./img/obj_vba_03.jpg" alt="働くオブジェクト"></p>
+<h3 id="3-htmlとcss"><a class="header" href="#3-htmlとcss">3. HTMLとCSS</a></h3>
+<p>では、JavaScriptで扱うオブジェクトとは具体的には、どんなものでしょうか？</p>
+<p>ブラウザはサーバーからのレスポンスを受け取ります。そのレスポンスのうち「HTML」と「CSS」がWebページという「家」の柱（はしら）、壁（かべ）、床（ゆか）、あるいはペンキ、インテリア、壁紙、といった部品になるのは、前に説明した通りです。</p>
+<p>実は、この「Webページの部品」こそが、JavaScriptの <strong>オブジェクト</strong> です。</p>
+<p>したがって、JavaScriptでWebページを操るためには、まずWebページの部品そのものについて、理解しなければなりません。</p>
+<p>次のステップでは、Webページの設計図である <strong>HTML</strong> と <strong>CSS</strong> について説明します。</p>
+<hr>
+<h2 id="まとめ-1"><a class="header" href="#まとめ-1">まとめ</a></h2>
+<p>JavaScriptを書くときは、</p>
+<ul>
+<li>「何が起きたら」（イベント）</li>
+<li>「誰が」（オブジェクト）</li>
+<li>「何をする」（プログラムの内容）</li>
+</ul>
+<p>を考えておく必要があります。</p>
 
                     </main>
 
@@ -344,22 +354,6 @@ <h3 id="まとめ"><a class="header" href="#まとめ">まとめ</a></h3>
         <template id=fa-play><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg></span></template>
         <template id=fa-clock-rotate-left><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z"/></svg></span></template>
 
-        <!-- Livereload script (if served using the cli tool) -->
-        <script>
-            const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-            const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
-            const socket = new WebSocket(wsAddress);
-            socket.onmessage = function (event) {
-                if (event.data === "reload") {
-                    socket.close();
-                    location.reload();
-                }
-            };
-
-            window.onbeforeunload = function() {
-                socket.close();
-            }
-        </script>
 
 
         <script>

docs/01_01_HTML.html

@@ -35,7 +35,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-fdbc96e0.js";
+            window.path_to_searchindex_js = "searchindex-06227269.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-bc46d24f.js"></script>
@@ -501,22 +501,6 @@ <h2 id="6-まとめ"><a class="header" href="#6-まとめ">6. まとめ</a></h2>
         <template id=fa-play><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg></span></template>
         <template id=fa-clock-rotate-left><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z"/></svg></span></template>
 
-        <!-- Livereload script (if served using the cli tool) -->
-        <script>
-            const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-            const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
-            const socket = new WebSocket(wsAddress);
-            socket.onmessage = function (event) {
-                if (event.data === "reload") {
-                    socket.close();
-                    location.reload();
-                }
-            };
-
-            window.onbeforeunload = function() {
-                socket.close();
-            }
-        </script>
 
 
         <script>