Skip to content

Commit a623699

Browse files
osamu377osamu377
committed
補足資料集を別にする
1 parent 89a5f7b commit a623699

70 files changed

Lines changed: 2077 additions & 2094 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
const path_to_root = "";
3636
const default_light_theme = "light";
3737
const default_dark_theme = "navy";
38-
window.path_to_searchindex_js = "searchindex-97c29d7e.js";
38+
window.path_to_searchindex_js = "searchindex-bda876df.js";
3939
</script>
4040
<!-- Start loading toc.js asap -->
41-
<script src="toc-8186ac84.js"></script>
41+
<script src="toc-136672e9.js"></script>
4242
</head>
4343
<body>
4444
<div id="mdbook-help-container">
@@ -300,16 +300,16 @@ <h2 id="iv-オブジェクトとは"><a class="header" href="#iv-オブジェク
300300
<h3 id="1-オブジェクトとはどんなもの"><a class="header" href="#1-オブジェクトとはどんなもの">1. オブジェクトとはどんなもの？</a></h3>
301301
<p>HTMLやCSSという設計図に従って、ブラウザはそれをウェブページとして作り上げてくれます。JavaScriptは出来上がったウェブページの部品を <strong>「オブジェクト」</strong> としてとらえ、それに対して『これこれこういうことをしなさい』と命令します。</p>
302302
<p>さまざまな人が集まって会社ができているのと同じように、ウェブページももさまざまなオブジェクトから構成されています。そして、「会社に何かをしてもらう」というのは、実際には「その会社の人に何かをしてもらう」ことです。同じように、<strong>「ウェブページを動かす」というのは「ウェブページのオブジェクトに何かをしてもらう」</strong> ということです。</p>
303-
<p><img src="img/object_work.JPG" alt="働くオブジェクト"></p>
303+
<p><img src="img/object_waiting2.JPG" alt="働くオブジェクト"></p>
304304
<h3 id="2-あいまいさのない命令誰が何をする"><a class="header" href="#2-あいまいさのない命令誰が何をする">2. あいまいさのない命令：「誰が」「何をする」</a></h3>
305305
<p>JavaScripはマニュアルですから、「みんなで協力して、こういうことをやりなさい」とぼんやりした命令をするのではなく、「Aさんはこれをして」「Bさんはあれをして」と一人ひとりの作業を正確に伝えなければなりません。 <strong>「誰が」「何をする」のかを、だれが読んでもわかるように書く</strong> ことが大事です。</p>
306306
<p>この「Aさん」「Bさん」がJavaScriptでは <strong>「オブジェクト」</strong> にあたります。</p>
307307
<p>「オブジェクト」という言葉は、皆さんには聞きなれないものかもしれませんが、とりあえず、次のようなイメージを頭に思い描いてください。</p>
308308
<ul>
309309
<li><strong>ウェブページの中には、たくさんのオブジェクトと呼ばれるものがいて、JavaScriptを使って、彼らに命令すれば、仕事をしてくれるらしい</strong></li>
310310
</ul>
311+
<p><img src="img/objects_waiting2.JPG" alt="命令を待つオブジェクトたち"></p>
311312
<p>今は、それだけで十分です。「オブジェクトの中身がどうなっているのか？」や「それに仕事をしてもらうためのマニュアルをどう書けばよいのか？」については、これから少しずつ、何度かに分けて説明します。</p>
312-
<p><img src="img/objects_waiting.JPG" alt="命令を待つオブジェクトたち"></p>
313313
<h3 id="3-htmlとcss"><a class="header" href="#3-htmlとcss">3. HTMLとCSS</a></h3>
314314
<p>では、JavaScriptで扱うオブジェクトとは具体的には、どんなものでしょうか？</p>
315315
<p>ブラウザはサーバーからのレスポンスを受け取ります。そのレスポンスのうち「HTML」と「CSS」がウェブページという「家」の柱、壁、床（ゆか）、あるいはペンキ、インテリア、<ruby>壁紙<rt>かべがみ</rt></ruby>、といった部品になるのは、前に説明した通りです。</p>
@@ -319,7 +319,7 @@ <h3 id="3-htmlとcss"><a class="header" href="#3-htmlとcss">3. HTMLとCSS</a></
319319
<hr>
320320
<h2 id="まとめ-1"><a class="header" href="#まとめ-1">まとめ</a></h2>
321321
<p>JavaScriptが動く順番をイラストで描くとこんな風になります。</p>
322-
<p><img src="img/how_js_work.jpg" alt="JavaScriptが動く順番"></p>
322+
<p><img src="img/obj_working2.jpg" alt="JavaScriptが動く順番"></p>
323323
<p>つまり、JavaScriptでウェブページを動かすために</p>
324324
<ul>
325325
<li>「何が起きたら」（どのイベントに反応させるか？）</li>
@@ -359,22 +359,6 @@ <h2 id="まとめ-1"><a class="header" href="#まとめ-1">まとめ</a></h2>
359359
<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>
360360
<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>
361361

362-
<!-- Livereload script (if served using the cli tool) -->
363-
<script>
364-
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
365-
const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
366-
const socket = new WebSocket(wsAddress);
367-
socket.onmessage = function (event) {
368-
if (event.data === "reload") {
369-
socket.close();
370-
location.reload();
371-
}
372-
};
373-
374-
window.onbeforeunload = function() {
375-
socket.close();
376-
}
377-
</script>
378362

379363

380364
<script>

‎docs/01_01_HTML.html‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
const path_to_root = "";
3636
const default_light_theme = "light";
3737
const default_dark_theme = "navy";
38-
window.path_to_searchindex_js = "searchindex-97c29d7e.js";
38+
window.path_to_searchindex_js = "searchindex-bda876df.js";
3939
</script>
4040
<!-- Start loading toc.js asap -->
41-
<script src="toc-8186ac84.js"></script>
41+
<script src="toc-136672e9.js"></script>
4242
</head>
4343
<body>
4444
<div id="mdbook-help-container">
@@ -501,22 +501,6 @@ <h2 id="6-まとめ"><a class="header" href="#6-まとめ">6. まとめ</a></h2>
501501
<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>
502502
<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>
503503

504-
<!-- Livereload script (if served using the cli tool) -->
505-
<script>
506-
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
507-
const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
508-
const socket = new WebSocket(wsAddress);
509-
socket.onmessage = function (event) {
510-
if (event.data === "reload") {
511-
socket.close();
512-
location.reload();
513-
}
514-
};
515-
516-
window.onbeforeunload = function() {
517-
socket.close();
518-
}
519-
</script>
520504

521505

522506
<script>

‎docs/01_02_CSS.html‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
const path_to_root = "";
3636
const default_light_theme = "light";
3737
const default_dark_theme = "navy";
38-
window.path_to_searchindex_js = "searchindex-97c29d7e.js";
38+
window.path_to_searchindex_js = "searchindex-bda876df.js";
3939
</script>
4040
<!-- Start loading toc.js asap -->
41-
<script src="toc-8186ac84.js"></script>
41+
<script src="toc-136672e9.js"></script>
4242
</head>
4343
<body>
4444
<div id="mdbook-help-container">
@@ -370,22 +370,6 @@ <h2 id="vi-css基礎のまとめ"><a class="header" href="#vi-css基礎のまと
370370
<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>
371371
<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>
372372

373-
<!-- Livereload script (if served using the cli tool) -->
374-
<script>
375-
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
376-
const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
377-
const socket = new WebSocket(wsAddress);
378-
socket.onmessage = function (event) {
379-
if (event.data === "reload") {
380-
socket.close();
381-
location.reload();
382-
}
383-
};
384-
385-
window.onbeforeunload = function() {
386-
socket.close();
387-
}
388-
</script>
389373

390374

391375
<script>

‎docs/02_00_はじめてのJavaScript.html‎

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
const path_to_root = "";
3636
const default_light_theme = "light";
3737
const default_dark_theme = "navy";
38-
window.path_to_searchindex_js = "searchindex-97c29d7e.js";
38+
window.path_to_searchindex_js = "searchindex-bda876df.js";
3939
</script>
4040
<!-- Start loading toc.js asap -->
41-
<script src="toc-8186ac84.js"></script>
41+
<script src="toc-136672e9.js"></script>
4242
</head>
4343
<body>
4444
<div id="mdbook-help-container">
@@ -175,16 +175,19 @@ <h1 class="menu-title">留学生のためのJavaScript学習ガイド</h1>
175175
<div id="mdbook-content" class="content">
176176
<main>
177177
<h1 id="はじめてのjavascript"><a class="header" href="#はじめてのjavascript">はじめてのJavaScript</a></h1>
178-
<p><strong>留学生のためのJavaScript<ruby>入門<rt>にゅうもん</rt></ruby>：最初の<ruby>一歩<rt>いっぽ</rt></ruby>を始めよう</strong></p>
178+
<h2 id="留学生のためのjavascript入門にゅうもん最初の一歩いっぽを始めよう"><a class="header" href="#留学生のためのjavascript入門にゅうもん最初の一歩いっぽを始めよう">留学生のためのJavaScript<ruby>入門<rt>にゅうもん</rt></ruby>：最初の<ruby>一歩<rt>いっぽ</rt></ruby>を始めよう</a></h2>
179179
<p>日本でITを学ぶ留学生のみなさん、こんにちは。</p>
180180
<p>前の章ではウェブページの骨組みやデザインを決めるHTMLやCSSについて説明しました。</p>
181181
<p>この章ではいよいよ「初めてのJavaScript（ジャバスクリプト）」を書いていきます。</p>
182-
<p>皆さんは、前の章の最初に説明したイメージを覚えているでしょうか？</p>
182+
<p>JavaScriptは</p>
183183
<ul>
184-
<li><strong>ウェブページの中には、たくさんのオブジェクトと呼ばれるものがいて、JavaScriptを使って、彼らに命令すれば、仕事をしてくれるらしい</strong></li>
184+
<li>「何が起きたら」（どのイベントに反応させるか？）</li>
185+
<li>「誰に」（どのオブジェクトに仕事をさせるか？）</li>
186+
<li>「どういう仕事をさせるか？」（プログラムの内容）</li>
185187
</ul>
186-
<p>JavaScriptは「誰が」「何をするか」を指示するマニュアルです。</p>
187-
<p>ここでは、「誰が」についての詳しい説明は省略して、まず　<strong>「何をするか」を命令する方法</strong> について、IT<ruby>業界<rt>ぎょうかい</rt></ruby>の標準的な考え方と一緒に「やさしい日本語」で解説します。</p>
188+
<p>を書くものです。</p>
189+
<p>が、すべてを一度に学ぶことはできません。</p>
190+
<p>ここでは、「何が起きたら」「誰に」についての詳しい説明は省略して、まず　<strong>「どういう仕事をさせるか？」を書く方法</strong> について、IT<ruby>業界<rt>ぎょうかい</rt></ruby>の標準的な考え方と一緒に「やさしい日本語」で解説します。</p>
188191
<p>プログラミングは、最初は<ruby>難<rt>むずか</rt></ruby>しく感じるかもしれません。でも、ルールを知れば、自分の<ruby>思<rt>おも</rt></ruby>い<ruby>通<rt>どお</rt></ruby>りにウェブページを動かせる「<ruby>魔法<rt>まほう</rt></ruby>」のような技術です。</p>
189192
<hr>
190193
<h2 id="i-初めてのプログラムhello-world-とポップアップ"><a class="header" href="#i-初めてのプログラムhello-world-とポップアップ">I. 初めてのプログラム：Hello World! とポップアップ</a></h2>
@@ -397,22 +400,6 @@ <h2 id="v-まとめjavascript学習のルールと習慣"><a class="header" href
397400
<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>
398401
<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>
399402

400-
<!-- Livereload script (if served using the cli tool) -->
401-
<script>
402-
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
403-
const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
404-
const socket = new WebSocket(wsAddress);
405-
socket.onmessage = function (event) {
406-
if (event.data === "reload") {
407-
socket.close();
408-
location.reload();
409-
}
410-
};
411-
412-
window.onbeforeunload = function() {
413-
socket.close();
414-
}
415-
</script>
416403

417404

418405
<script>

‎docs/02_01_変数.html‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
const path_to_root = "";
3636
const default_light_theme = "light";
3737
const default_dark_theme = "navy";
38-
window.path_to_searchindex_js = "searchindex-97c29d7e.js";
38+
window.path_to_searchindex_js = "searchindex-bda876df.js";
3939
</script>
4040
<!-- Start loading toc.js asap -->
41-
<script src="toc-8186ac84.js"></script>
41+
<script src="toc-136672e9.js"></script>
4242
</head>
4343
<body>
4444
<div id="mdbook-help-container">
@@ -422,22 +422,6 @@ <h2 id="vii-まとめプログラミングの基礎を固かためる"><a class=
422422
<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>
423423
<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>
424424

425-
<!-- Livereload script (if served using the cli tool) -->
426-
<script>
427-
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
428-
const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
429-
const socket = new WebSocket(wsAddress);
430-
socket.onmessage = function (event) {
431-
if (event.data === "reload") {
432-
socket.close();
433-
location.reload();
434-
}
435-
};
436-
437-
window.onbeforeunload = function() {
438-
socket.close();
439-
}
440-
</script>
441425

442426

443427
<script>

0 commit comments

Comments
 (0)