Skip to content

Commit 7e678f8

Browse files
aster-voidaster-void
authored
Merge pull request #486 from ut-code/fix-local-ans-issues
Answerタグをそろえた 1章~2章
2 parents 948f700 + 8cf7e72 commit 7e678f8

File tree

13 files changed

+177
-20
lines changed

13 files changed

+177
-20
lines changed

‎docs/1-trial-session/02-html/index.md‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: HTML
33
---
44

5+
import Answer from "@site/src/components/Answer";
56
import Term from "@site/src/components/Term";
67
import ViewSource from "@site/src/components/ViewSource";
78
import createFileVideo from "./create-file.mp4";
@@ -132,10 +133,31 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
132133

133134
箇条書きを作るときには、単に「・」と書くのではなく箇条書き用のタグを使います。「HTML 箇条書き」などと検索してみましょう。
134135

135-
### 解答例
136+
<Answer title="持ち物リスト">
137+
138+
```html
139+
<!doctype html>
140+
<html lang="ja">
141+
<head>
142+
<meta charset="utf-8" />
143+
<title>Title</title>
144+
</head>
145+
<body>
146+
<h1>遠足の持ち物</h1>
147+
<ul>
148+
<li><strong>お弁当</strong></li>
149+
<li>水筒</li>
150+
<li>タオル</li>
151+
<li>レジャーシート</li>
152+
</ul>
153+
</body>
154+
</html>
155+
```
136156

137157
<ViewSource url={import.meta.url} path="_samples/excursion" />
138158

159+
</Answer>
160+
139161
## 課題 (時間が余った場合)
140162

141163
単一の HTML ファイルのみを使用して、下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすら HTML タグを並べるのみです。
@@ -148,6 +170,35 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
148170
- テキストボックスは `input` タグで作成できます。
149171
- 最後の箇条書きには `ul` タグや `li` タグを使用しています。
150172

151-
### 解答例
173+
<Answer title="フォーム">
174+
175+
```html
176+
<!doctype html>
177+
<html lang="ja">
178+
<head>
179+
<meta charset="utf-8" />
180+
<title>課題: HTMLのみを使用してフォームを作成する</title>
181+
</head>
182+
<body>
183+
<p>新規登録</p>
184+
<table>
185+
<tr>
186+
<th>ID</th>
187+
<td><input type="text" /></td>
188+
</tr>
189+
<tr>
190+
<th>パスワード</th>
191+
<td><input type="password" /></td>
192+
</tr>
193+
</table>
194+
<ul>
195+
<li>IDは他のユーザーと重複させることはできません。</li>
196+
<li>パスワードは8文字以上です。</li>
197+
</ul>
198+
</body>
199+
</html>
200+
```
152201

153202
<ViewSource url={import.meta.url} path="_samples/form" />
203+
204+
</Answer>

‎docs/1-trial-session/07-if-statement/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const age = 20;
8888
- 18 歳以上 ～ 25 歳未満なら `投票に行けます` と表示する
8989
- 25 歳以上なら `衆議院議員に立候補できます` と表示する
9090

91-
<Answer>
91+
<Answer title="選挙権">
9292

9393
if ～ else if ～ else 構文を使うと、次のように書くことができます。
9494

‎docs/1-trial-session/08-loop/index.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -191,9 +191,7 @@ const string2 = `10から2を引くと${10 - 2}です。`;
191191
いくつにすればよいでしょうか？
192192
:::
193193

194-
### 解答例
195-
196-
<Answer>
194+
<Answer title="10の階乗">
197195

198196
```javascript
199197
let product = 1;
@@ -241,9 +239,7 @@ document.write(product);
241239
自然数`n`を`i`で割ったあまりは `n % i`で求められます。
242240
:::
243241

244-
### 解答例
245-
246-
<Answer>
242+
<Answer title="素数判定">
247243

248244
変数の、最後に代入した値のみを保持する性質を利用します。
249245

‎docs/1-trial-session/09-functions/_samples/multiply/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>2つの積 解答例</title>
6+
</head>
7+
<body>
8+
<script src="./script.js"></script>
9+
</body>
10+
</html>

‎docs/1-trial-session/09-functions/_samples/multiply/script.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
function multiply(a, b) {
2+
const result = a * b;
3+
return result;
4+
}
5+
6+
document.write(multiply(3, 4));

‎docs/1-trial-session/09-functions/index.md‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,25 @@ function tryToDrive() {
8383

8484
:::
8585

86+
### 確認課題
87+
88+
引数を 2 つとり、その積を<Term type="javascriptReturnValue">戻り値</Term>として<Term type="javascriptReturn">返す</Term><Term type="javascriptFunction">関数</Term> `multiply` を定義してください。
89+
90+
<Answer type="2つの積">
91+
92+
```javascript
93+
function multiply(a, b) {
94+
const result = a * b;
95+
return result;
96+
}
97+
98+
document.write(multiply(3, 4));
99+
```
100+
101+
<ViewSource url={import.meta.url} path="_samples/multiply" />
102+
103+
</Answer>
104+
86105
## <Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope">スコープ</Term>
87106

88107
<p><Term type="javascriptFunction">関数</Term>内で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は、<Term type="javascriptFunction">関数</Term>内でのみ有効です。<Term type="javascriptVariable">変数</Term>が有効な範囲のことを、その<Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope" strong>スコープ</Term>と呼んでいます。</p>
@@ -175,7 +194,7 @@ for (let i = 0; i < 10; i += 1) {
175194
<p><Term type="javascriptIfStatement">if 文</Term>を使って、<code>a</code> が大きい場合と <code>b</code> が大きい場合で処理を書き分けます。</p>
176195
:::
177196

178-
<Answer>
197+
<Answer title="大きい数">
179198

180199
```javascript
181200
function max(a, b) {
@@ -227,7 +246,7 @@ document.write(calculateCost(3.5));
227246
> - 月間転送量 < 5.0 (GB) のとき、携帯電話料金は 月間転送量 × 600 (円/GB)
228247
> - 月間転送量 >= 5.0 (GB) のとき、携帯電話料金は 3000 (円)
229248
230-
<Answer>
249+
<Answer title="携帯電話料金">
231250

232251
```javascript
233252
function calculateCost(monthlyDataUsage) {

‎docs/1-trial-session/10-array/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const numbers = [-3, -1, 9, -10, 3, 7, 6, 1, 0, 5];
129129

130130
:::
131131

132-
<Answer>
132+
<Answer title="配列の要素の和">
133133

134134
```javascript
135135
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@@ -190,7 +190,7 @@ const array4 = [-878, -40, -324, -410, -592, -610, -880, -65, -423, -32];
190190

191191
:::
192192

193-
<Answer>
193+
<Answer title="配列の最大値">
194194

195195
配列の最初の値を初期値に設定することで解消します。
196196

‎docs/1-trial-session/11-object/index.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: オブジェクト
33
---
44

5+
import Answer from "@site/src/components/Answer";
56
import Term from "@site/src/components/Term";
67
import ViewSource from "@site/src/components/ViewSource";
78

@@ -71,4 +72,19 @@ const nextYearTanaka = incrementAge(tanaka);
7172
document.write(nextYearTanaka.age); // 19 と表示されてほしい
7273
```
7374

75+
<Answer title="年齢を増やす">
76+
77+
```javascript
78+
function incrementAge(person) {
79+
person.age = person.age + 1;
80+
return person;
81+
}
82+
83+
const tanaka = { name: "田中", age: 18 };
84+
const nextYearTanaka = incrementAge(tanaka);
85+
document.write(nextYearTanaka.age);
86+
```
87+
7488
<ViewSource url={import.meta.url} path="_samples/incrementAge" />
89+
90+
</Answer>

‎docs/1-trial-session/12-css/index.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: ウェブサイトの見た目を整える
33
---
44

5+
import Answer from "@site/src/components/Answer";
56
import Term from "@site/src/components/Term";
67
import ViewSource from "@site/src/components/ViewSource";
78

@@ -73,4 +74,31 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
7374
- 枠線の内側にも余白があります (padding)
7475
- ボックスに影がついています (box-shadow)
7576

77+
<Answer title="シンプルなボックス">
78+
79+
```html
80+
<!doctype html>
81+
<html lang="ja">
82+
<head>
83+
<meta charset="utf-8" />
84+
<title>Title</title>
85+
</head>
86+
<body>
87+
<div
88+
style="
89+
border: 1px solid #aaa;
90+
border-radius: 10px;
91+
margin: 30px;
92+
padding: 30px;
93+
box-shadow: 0px 0px 2px 1px #aaa;
94+
"
95+
>
96+
Foo
97+
</div>
98+
</body>
99+
</html>
100+
```
101+
76102
<ViewSource url={import.meta.url} path="_samples/foo" />
103+
104+
</Answer>

‎docs/1-trial-session/13-dom/index.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: DOM
33
---
44

5+
import Answer from "@site/src/components/Answer";
56
import Term from "@site/src/components/Term";
67
import ViewSource from "@site/src/components/ViewSource";
78

@@ -55,4 +56,31 @@ element.style.backgroundColor = "red";
5556

5657
[CSS の節](../12-css/index.md)の課題を、<Term type="styleAttribute">style 属性</Term>を使用せずに JavaScript のみで実現してみましょう。
5758

59+
<Answer title="JavaScriptを用いたCSSスタイリング">
60+
61+
```html
62+
<!doctype html>
63+
<html lang="ja">
64+
<head>
65+
<meta charset="utf-8" />
66+
<title>Title</title>
67+
</head>
68+
<body>
69+
<div id="foo">Foo</div>
70+
<script src="./script.js"></script>
71+
</body>
72+
</html>
73+
```
74+
75+
```javascript
76+
const element = document.getElementById("foo");
77+
element.style.border = "1px solid #aaa";
78+
element.style.borderRadius = "10px";
79+
element.style.margin = "30px";
80+
element.style.padding = "30px";
81+
element.style.boxShadow = "0px 0px 2px 1px #aaa";
82+
```
83+
5884
<ViewSource url={import.meta.url} path="_samples/css" />
85+
86+
</Answer>

0 commit comments

Comments
 (0)