[TIL]20210808

ネットワーク

今日から、ガイドコースのWeb UI講座ではなく、Webプログラミング講座を行います.

Web動作（HTTPプロトコルの理解）

HTTPは,サーバとクライアントがインターネット上でデータを交換するプロトコルである.
HTTP起動方式:
HTTPはサーバ/クライアントモデルに従う.
長所

の不特定多数のサービスに適用されます.

クライアントとサーバとの間には接続がないため、クライアントとサーバとの間の最大接続数よりも多くの要求と応答を処理することができる.

短所

接続が切断されたため、クライアントの移行状況が把握できません.

という特徴を無状態と呼ぶ.

これらの特徴により,情報を保持するためにCookieなどの技術が出現した.

URL (Uniform Resource Locator)
インターネット上のリソースの場所
特定のWebサーバ上の特定のファイルへのアクセスのパスまたはアドレス
要求方法:GET、PUT、POST、PUSH、OPTIONSなどの要求方式.
要求URI:要求リソースの場所を指定します.
HTTPプロトコルバージョン:Webブラウザで使用するプロトコルバージョン.
最初のローのリクエストメソッドは、サーバリクエストのタイプを通知するために使用されます.

各メソッド名の意味は次のとおりです.
GET:情報を要求するために使用されます.(SELECT)-このメソッドは、リクエスト本体に何も含まれていません.
POST:情報のプッシュに使用します.(INSERT)
PUT:情報の更新に使用します.(UPDATE)
DELETE:情報を削除します.(DELETE)
HEAD:(HTTP)ヘッダ情報のみを要求する.リソースが存在するか、サーバに問題がないかを判断するために使用します.
OPTIONS:Webサーバのサポートを要求するメソッドタイプ.
TRACE:クライアントの要求を返します.はい、主にechoサービスでサーバのステータスを決定するために使用されます.
気が狂った.私は知りません.もしあなたがバックエンドを勉強するなら、Javaを持っていなければなりません.

ミドルウェア

クライアント側のビジネスロジック(ビジネスロジックとは、ビジネスに必要なデータ処理を実行する一部のアプリケーションを指す).多くの場合、クライアント管理(導入など)はコストのかかる問題をもたらします.論理変更時にクライアントを変更すると、クライアントの導入に時間とコストがかかります.また、ロジックはクライアントに含まれるため、セキュリティも脆弱です.
クライアントとDBMS間のミドルウェアサーバ上でビジネスロジックを実行させることで、クライアントは入力と出力のみを担当します.これにより、容量が削減され、セキュリティと管理の問題が解消されます.また,論理を変更する場合は,中間のミドルウェアを修正するだけでよい.

WAS (Web Application Server)

WASは、Webクライアント(通常はWebブラウザ)の要求中のWebアプリケーション(動的コンテンツ)の動作をサポートするためのミドルウェアである.
WASの3つの重要な基本機能
1.プロバイダ実行環境とデータベース接続機能.
2.様々なトランザクション(論理ワークユニット)を管理します.
3.業務を処理する業務ロジックを実行する.

このように分離するのは故障処理のためです.
現在,WASが所有するWebサーバの静的コンテンツ処理における性能には大きな差はない.
規模の拡大に伴い,WebサーバとWASとの距離も大きくなっている.
WebサーバとWASを大きく分離し、リソースの効率化とトラブルシューティング能力を向上させ、導入とメンテナンスをシンプル化します.
プログラムエラーでWASを再起動する必要がある場合は、前のWebサーバでWASへのアクセスをブロックできます.この処理をトラブルシューティングと呼び,Webサーバの無停止運転に必要な機能である.

FE-idとsection

ID
唯一の属性を持つHTMLドキュメントは1つだけです.
ユニークなID値を持っている場合は、IDごとに特別な制御を行い、検索を容易にすることができます.
Class
1つのHTMLドキュメントで繰り返し使用できます.
1つのタグは、スペースに基づいて複数の異なるクラス名をリストできます.
classを使用することは、ホームページ全体のスタイルの一貫性を確保する鍵です.

FE-継承と優先度の決定

宣言に基づいて、適用されるcssルールの順序を決定します.
inline(bodyでcssを定義)>internal(headで定義)>external(外部cssファイルとして定義)
ケースの数1

    span{
      color: red;
    }
    span{
      color: blue;
    }

この場合、後のblueが適用されます.
境遇.

    body>span{
      color: red;
    }
    span{
      color: blue;
    }

この場合、具体的なredが適用される.
境遇の数3

    #a{
      color: red;
    }
    .b{
      color: blue;
    }

  <div id="a" class="b">hello</div>

優先度はid>class>elementです.

FE - CSS selector

1

<div id="jisu">
  <div>
    <span> span tag </span>
  </div>
  <span> span tag 2 </span>
</div>

要素選択(スペース):サブ要素、したがって
div(span) > div > span
div(span)>spanの2つの要素が適用されます.

#jisu span { color : red }

子の選択(>):子のみ選択します.では、一列の下にある
div(span)>spanにのみ適用されます.

#jisu > span { color : red }

2

<div id="jisu">
  <h2>단락 선택</h2>
  <p>첫번째 단락입니다</p>
  <p>두번째 단락입니다</p>
  <p>세번째 단락입니다</p>
  <p>네번째 단락입니다</p>
</div>
#jisu > p:nth-child(2) { color : red }

1からカウントダウンを開始し、2番目にpラベルがあれば赤、なければ何でもx
nth-of-type(2)を使用すると、p時のみカウントされるため、無条件に表示されます.
p:nth-chlid(n)種類を問わず
p:nth-of-type(n)はpのn番目

要素の配置方法(CSSレイアウト)

エンティティの配置方法-(display:block)
装飾はレンガのように上下に積み上げられている.
エンティティの配置方法-(display:inline)
displayプロパティがinlineの場合、右側は空です.
高さと幅は反映されません.

エンティティの配置方法(位置:静的、相対的、絶対的)

positionプロパティを使用すると、シンボルを相対的または絶対的な位置に簡単に配置できます.

positionプロパティを使用して、特別な配置を行うことができます.
positionのデフォルト属性はstaticです.
順番に置くだけです.

absoluteは基点に基づいて特殊な位置にある.
データム点を徐々に上に配置し、非静的位置(相対等)の左上隅をデータム点(0,0)として新しい座標系を作成します.絶対的な新しい座標系を作ることを連想すると、覚えやすいようです.このオプションを適用すると、absoluteプロパティが与えられると、このタグ要素が他のタグ要素とは異なるレイヤに移動したことがわかります.3 D座標系であればz軸が変化し、thirdが残りの空間を埋め尽くす.このとき(x,y)の位置は変わりません.

親戚は自分の元の位置によって移動します.
これは、a、b、cというブロックをデフォルトで配置すると、a−b−cの順に上から下へ積み上げられることを意味する.bを相対に設定すると、bの位置(a直下)に設定すべきオフセット量に移動する.
ここで注意すべき点は、aがabsoluteに設定されている場合、上記の説明に従ってz軸が異なる(aとbは同じx,y位置にある)と理解され、−c順に積み重ねられることである.ではabouteに設定されていない場合のa位置は「本来は自分の位置にあるべきだった」となる.

fixedはviewport(フルスクリーン)の左側と上部に対して動作します.

relativeもabsoluteもoffset属性を持つことができますが、absoluteの場合、offset属性基準としての位置は条件によって異なる場合があります!
また、両方の要素が移動している場合、サブ要素もそれに応じて移動します.
オフセット属性
標準の場所からどのくらいの距離があるかを確定します.
https://thrillfighter.tistory.com/480ブログの内容を参照してください.

  <div class="wrap">
    <div class="static">static(default)</div>
    <div class="relative">relative(left:10px)</div>
    <div class="absolute">absolute(left:130px;top:30px)</div>
    <div class="fixed">fixed(top:250px)</div>
  </div>

.wrap {
  position:relative;
}

.wrap > div {
  width:150px;
  height:100px;
  border:1px solid gray;
  font-size:0.7em;
  text-align:center;
  line-height:100px;
}

.relative {
  position:relative;
  left:10px;
  1top:10px;
}

.absolute {
  position:absolute;
  left:130px;
  top:30px;
}

.fixed {
  position:fixed;
  top:250px;
}

コードを表示すると、wrapが静的設定に対して設定されている場合、absoluteクラスは少し右と下に移動します.すなわち、上記の特徴の1つの相対は基準点である.wrapが静的である場合、absoluteクラスはbodyの左上隅に対してどのくらい移動しますが、wrapが相対的である場合、wrapの左上隅に対して位置が異なります.

box-sizing

  box-sizing:content-box;
  box-sizing:border-box;

同じwidth 150 px値をcontent-boxに設定した場合、box-modelでcontent領域を150 pxに調整し、余白値が異なる場合、全体の表示サイズは余白に依存します.
ただし、border-boxに設定すると、margin値までwidthに設定されます.https://www.opentutorials.org/course/2418/13405を参照してください.
8月の目標:
白準40題以上
クバーネディスの入門書の半分以上を調べる
Web UIまたはWebプログラミングコースの半分以上を完了
バリイン完毒
c/java適宜学習、、、