.Net実習 2021年度前期(2年)

投稿

4月, 2021の投稿を表示しています

4月27日(火)1、2コマ目

4月 27, 2021

今日、やったこと HTMLのフォームの演習 ASP.NET Razorページ導入今日のホワイトボード HTMLは静的 HTMLには繰り返しや条件分岐がないため、表示毎に内容を変える動的なページをHTMLだけで作成することはできない。また、DBアクセスなんてできないので、なんらかのプログラミング言語の助けが必要。図　静的なHTMLで動的Webページを作成したい JavaやC#のプログラミング要素を使った動的なページ作成のためにいろいろと用意されている仕組みがあるため、これらを使えば動的なWebページ作成はできる。 ASP.NET マイクロソフトが用意したWebアプリケーション作成のためのフレームワーク。ちなみに去年使ったADO.NETはDBアクセスのためのフレームワーク。これを使えば、C#+HTMLで動的Webページ作成ができる。図　ASP.NET WebアプリケーションこれからC#とHTMLが混在したWebページを作成するが、C#はサーバー側で実行される点に注意。クライアント側はWebブラウザ。WebブラウザはサーバーにWebページをリクエストレスポンス(HTML)を表示するだけが仕事。図　Webアプリケーション今後、Javaを使ったWebアプリケーション作成も行うが、Javaが実行されるのはサーバー側。同じ。 Razorページは2ファイルで1ペア Razorページは～.cshtml ～.cshtml.cs の2つがペアになっている。また、プロジェクト内でRazorページ配置場所はPagesフォルダ内と決まっている。図　Razorページの特徴、配置フォルダおわび今回、Razorページ用プロジェクトを作る際にテンプレート「 ASP.NET Core Webアプリ」を選択しましたが、これは余分なモノも含まれるため今後は使いません。これからは「 ASP.NET Core (空) 」を使います。

4月22日（木）3、4コマ目

4月 22, 2021

今日、やったこと余白、ボーダーの課題（ペンギン）フォーム今日のホワイトボードフォーム HTMLシリーズも最終回。しかし、ここからが一番使う内容。ユーザーにデータ入力や選択をしてもらうためのテキストボックス、選択リストといった部品や、サーバー送信のトリガーになるボタンをWebページに作成するためのタグ(<input>や<select>、<button>など）がある。図　<input>、<select>、<button>タグボタン（submitボタン）をクリックすると <form>～</form>内のsubmitボタン（<button type="submit")をクリックすると、同じ<form>～</form>内のテキストボックス（<input type="text">）入力値や選択リスト（<select>～</select>）選択値がサーバーに送信される。どのサーバーに送信される <form>のaction属性で指定したURLへ、method属性で指定したHTTPのメソッド（postまたはget)で送信される。どんな形で送信される入力値や選択値は　名前=入力値または選択値で送信される。名前は<input>タグや<select>タグのname属性指定値。選択値はvalue属性指定値。次回はフォームの演習をやったあと、いよいよこの授業の本丸であるC#+ASP.NETでWebアプリケーション作成に入ります。

4月20日（火）3、4コマ目

4月 21, 2021

今日、やったことスタイルシートファイル HTMLの表余白（ボックスモデル）今日のホワイトボードデザイン設定部は別ファイルへ複数のHTMLファイルで１つのサイトを構成する場合、おなじデザインにするために各HTMLファイル中の<style>～</style>が重複することなる。これはあまりいい状態ではない。一般的にデザイン設定はスタイルシートファイル(拡張子.css)に設定し、HTMLはこのファイルを読み込むことでデザインを設定する。図　HTMLファイルとスタイルシートファイル表テーブルとも呼ぶ。今更だけど、行と列の違いを把握しておいてください。また、タグがいっぱい出てきます。ご注意を。図　HTMLの表のタグ表のセル結合横方向の結合にはcolspan属性を、縦方向の結合にはrowspan属性を使って、結合するセル数を指定する（属性指定セルもカウントする）。図　表のセルを結合する（colspan属性、rowspan属性）表のタグヘッダー行(タイトル行)を表す<thead>、ボディー部を表す<tbody>、フッター行を表す<tfoot>もある。図　表のヘッダー行、ボディー部、フッター行を表すタグ余白各タグ表示エリアの境界の外側、内側で余白には2種類ある。図　2種類の余白と境界線境界の外側の余白はmargin属性。境界の内側の余白はpadding属性。境界線の指定にはborder属性。 margin、paddingは上下左右４つの余白を設定するが、1か所（上だけ、右だけ）だけ指定するための属性もある。図　1か所だけ余白指定おまけ

4月15日(木)3、4コマ目

4月 08, 2021

予習以下の資料を使います。 Web開発を学ぶ（HTML、CSS）今日、やったこと WebとHTML HTMLのタグフォントの色、サイズを変える <style>でデザインを一括設定今日のホワイトボードホームページはHTMLで記述されているホームページを見る際、 ①クライアント側のWebブラウザがWebサーバーへHTMLページをリクエストする ②WebサーバーはリクエストされたHTMLページの中身をWebブラウザへ返信する ③Webブラウザは受信したHTMLを表示するの流れで処理される。 Webブラウザは Webサーバーにリクエストする HTMLを表示するのが仕事。図　ホームページを見るには HTML HTML(Hyper Text Markup Language)にはあらかじめ役割が決められたタグを定義している。たとえば、<p>タグは段落を指定するためのタグ。ホームページを作る際、このタグを組み合わせて作る。図　HTMLのタグ①（開始タグと終了タグのペア）図　HTMLのタグ②（タグはネスト構造OK）図　タグには属性が設定できるタグの構造 1つのHTMLファイルは<HTML>タグで始まり、</HTML>で終了する。 <HTML>～</HTML>内に、ヘッダー部（ブラウザには表示されない）を<HEAD>～</HEAD>に、ボディ部（ブラウザに表示される）を<BODY>～</BODY>に記述する。このように、タグによっては記述する位置が決まっているモノもある。図　タグの構造タグの紹介タグは大量にあるが、とりあえずこれをおさえてください。図　タグの紹介（最低限）フォントの色、サイズを変える style属性で指定する。 style属性で指定できる設定項目名は大量にある。図　style属性で"設定項目名:設定値;"のフォーマットで指定する段落全体の設定をしたい場合は<p style="・・">と<p>タグで指定すればいいが、段落の一部分を指定した場合は<span>タグを使って領域を作り、<span style="・・...