ソフトウェア工学実習(Java) 2025年度後期(2年

今日、やったこと JavaScriptで表を作る(改造) REST API+JavaScriptで検索サイトをつくる 今日のホワイトボード JavaScriptで表を作る(改造) 前回はJavaScriptで表を作ったが、1行分のデータの配列が前提。 配列ではない(=1件分のデータだけ）でも表を作れるように改造した。 HTMLファイルは前回のまま。 JavaScriptで配列か、否かを判定するのは　Array.isArray()　メソッド。 配列の要素を1件ずつ取得し、関数を実行するには、配列のforEach()を使う。 図　配列のforEach()、Array.isArray() REST API+JavaScriptで検索サイト作成 サーバー側は以前作ったREST APIを使って、 IDで検索 書籍名で検索 を行うサイトを作成。 [クライアント]search.html 検索条件入力用<input>タグとボタン、検索結果表示用テーブルがある。 [クライアント]search.js 上記で作成した、表形式で検索結果を表示する関数と、サーバーにリクエスト送信、レスポンス受信を行う関数がある。 次回は REST API+JavaScriptで検索サイトを作るのつづき。  

今日、やったこと JavaScripで表をつくる 今日のホワイトボード HTMLでの表は <table>タグが表全体。 <table>タグ内には <thead>タグ 、 <tbody>タグ がある。 <thead>タグはヘッダー行 。 <tbody>タグはボディ部 。 ちなみに<tfoot>タグもある。フッター行になる。 <thead>、<tbody>内では、 <tr>タグ がある。 <tr>タグは行 。 <tr>タグ内には、 <th>タグ 、 <td>タグ がある。 <th>タグは見出しセル 。 <td>タグはデータ用セル 。 図　表のためのタグ JavaScriptで表を作る <table>タグ以下の親子関係の構造をJavaScriptでつくる。 図　<tbody>タグ内のツリー構造 〇タグの生成 document.createElement(タグ名) 〇親タグに子要素として子タグを追加 親タグ.appendChild(子タグ) ソースコードは以下のとおり。 HTML JavaScript 次回は 検索結果を表形式で表示。