Question

柏　満南

分からないので教えてください。

課題1. Lecture 2-3 p131.html に下の2つの機能を追加した JavaSeript プログラムを作
成せよ。
1. ツールが開いているときには「タイトルバーツールを閉じるには,タイトルバーをクリ
ックしてください」とメッセージを表示する。
2. ツールが閉じているときには「タイトルバーツールを開くには,タイトルバーをクリッ
クしてください」とメッセージを表示する。
「ファイル」メニューを何回クリックしても,上に書いたメッセージが交互に表示されるよ
うにすること.この課題については,下の青枠で囲まれた部分に関係する HTML と
11
JavaScript プログラム,下のような画面コピーを提出せよ。
(20 点)
G クリックすると開くツールボックスを作:x
O ファイル || S/2021/Webページ作成応
*ャ*
show,slideDown
開閉できるツールボックスを作る
ツールを開く上は、 タイトルバーをクリックしてください
ファイル
ロ
D クリックすると開くツールボックスを作る ×
O ファイル || C:/Users/takura/ ☆
show,slideDown
|開閉できるツールボックスを作る
ツールを閉じるには, タイトルバーをクリックしてください
ファイル
新規
上書き保存
名前を付けて保存
とじる

この課題では次の3つの理解が必要である。
* ID 属性とタグの組み合わせで, html 内の場所を指定する方法(Lecture 2-1 の復習)。
* ID属性の追加。
「html」メソッドを使った内容の書き換え(Lecture 2-1 の復習)。
12
<div id="contents">… </div>で囲まれた部分には,<p>… </p>が複数
【ヒント1)
(下の黄色い蛍光ペン塗りつぶしの通り2個)あるので,$(#contents p)では,メッセー
ジ表示部分「ツールを…」を特定できない。しかも,書き換えを行いたい<p> … </p>に
はidがついていない。
<div id="contents">
<div class="inner">
<p>ツールを開くには、タイトルパーをクリックしてください</p>
<div id="toolBox">
<p id="tool'Title"><a href="#toolContent">ファイル</a></p>
<div id="toolContent">
<ul>
<li>新規<li>
<li>上書き保存<li>
<li>名前を付けて保存</i>
<li>とじる</li>
</ul>
</div>
</div>
<!… inner -></div>
<!…… contents…></div>
下の(idの追加法】により,p要素を識別するidの追加が必要である。
<p>ツールを開くには、タイトルバーをクリックしてくださいく/p>
【id の追加法と html 文の書き換え対象】
方法1:
タグ<p>に直接 d を付与する。
<p id="xxx">ツールを開くには、タイトルバーをクリックしてください<p>
書き換え対象:ツールを開くには、タイトルバーをクリックしてください
方法2:
対象となるタグ付き HTML 文全体を<div> </div>で囲んで idを付与する。

<div id="xxx"> <p>ツールを開くには、タイトルバーをクリックしてください</p> </div>
書き換え対象:<p>ツールを開くには、タイトルバーをクリックしてください</p>
【ヒント2)
る。メソッドhtml(書き換え後文字列)により,セレクタで指定された部分を書き換え後文
字列に書き換える。
HTMLの書き換えは,Lecture 2-1で学習した通り,メソッドhtmlを用い

プログラミング言語 javascript