[21.09.07]

マウスイベント

onmouseover:マウスカーソルを領域の上に置くと

onmousedown:マウスを押したまま、まだ開いていません

onmouseup:マウスをクリックし、マウスをクリックします(down->up)

onmouseout:マウスが領域を離れると

イベントハンドラ

イベントハンドラ1の登録方法

element.event = function() {};

1つのイベントのみを登録する場合に使用します.

イベントハンドラ2の登録方法

element.addEventListener(event, function, useCapture);
event:イベント名(クリック、mouseover、...)
function:イベントハンドラ(リスナー)->必須
useCapture:true/false->(デフォルトはfalse)を選択します.

1つのイベントに複数のイベントハンドラを登録できます

Windowオブジェクト

ブラウザウィンドウ.HTMLオブジェクトの最上位オブジェクト

window.onload

JAvascriptはhtmlの後に実行する必要があります.headに宣言すると、html要素を作成する前に時点的な問題が発生します.window.onload=function(){};でスクリプトコードを記述し、すべてのHTMLドキュメントをロードして、画面(ウィンドウ)のロードが完了したときに関数を作成します.
すべてのJavaScriptコードはwindowです.onloadイベントリスナー、関数で作成することを推奨

長所

1)すべてのDOMオブジェクトを作成してgetElementを実行するので、安心して使用できます.
2)すべての変数がイベントリスナーの領域変数となるため、ウィンドウオブジェクトを持つグローバル変数(Property)の予期しない変更は避ける.

DOM(Document Object Model) : html, head, body, ...

BOM(Browser Object Model) : Window, Screen, Location, History,...

位置オブジェクト

window.location.href:

現在のブラウザアドレス

window.location.プロトコル:http、httpなどの現在のプロトコル

window.location.ホスト名:現在のip

window.location.assign(url):現在のウィンドウからurl

にページを移動します.

window.Open(url):urlページ

を新しいタブで開きます.

履歴オブジェクト

window.history.back:

戻る

window.history.forward():前進

Bootstrap

<!-- 모바일 디바이스에서 터치/줌 등을 지원하기 위한 meta 태그 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

モバイルUIとWeb UIは、反応型Webフレームワークをサポートします.起動バーはclassでアクセス

  <div class="container-fluid">
    <div class="row"> 
      <div class="col" style="background-color: red;">.col</div> 
      <div class="col" style="background-color: blue;">.col</div>
      <div class="col" style="background-color: green;">.col</div>
      <div class="col" style="background-color: orange;">.col</div>
    </div>
  </div>

同じサイズのdivがcolと同じになるように、領域を1行に分割します.

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4" style="background-color: lavender">.col-sm-4</div>
      <div class="col-sm-8" style="background-color: lavenderblush">.col-sm-8</div>
    </div>
  </div>

領域全体を12に分割し、寸法を指定して領域を分割することもできます.ブラウザサイズが変化すると、div領域もそれに応じてスケールが変化します.
ブラウザをcol-sm-n:578 px幅に変更すると、カラムの位置が変更されます.