[WEB 01] HTML, CSS, JavaScript


Review


HTML, CSS, JavaScript


HTMLとCSSは表記言語、JavaScriptはプログラミング言語です.
HTMLとCSSは、Webページの静的情報を担当します.
JavaScriptがユーザーと対話するときに動的な情報を提供するのは違います.
ハイパーテキストタグ言語(HTML):Webページの構造と内容を表す
積層スタイルシート(CSS):デザイン、定義スタイル
JavaScript:Webブラウザで使用されるスクリプトベースのプログラミング言語

JavaScript


ブラウザの開発者ツールコンソールでは、JavaScriptをインタラクティブなインタフェースとして使用できます.
HTMLでタグ間でコードを記述する場合はJavaScriptと解釈します.

いくつかの常用関数の実験


(1) console.log():コンソールにログ

console.log('[로그]');
開発者ツールにアクセスし、表示されるログを出力します.
コードと結果

(2) document.write():HTMLドキュメントでの合成

document.write('[화면에 보여주고자 하는 메시지]');
画面に表示するテキストやHTMLタグなどのHTMLドキュメントに含まれる内容を入力します.
コード#コード#

結果

(3)alert()、confirm()、prompt():オフセットメッセージ

alert('[경고 메시지]');
confirm('[확인 메시지]');
prompt('[입력받고자 하는 항목]');
Webブラウザの警告ウィンドウ、確認ウィンドウ、入力ウィンドウがそれぞれ表示されます.
コード#コード#

alert()結果

確認()結果

ヒント()結果

confirm()、prompt()の結果は以下の通りです.

(4) Math.random(), Math.floor():乱水、降下

Math.random();
Math.floor(내림하고자 하는 숫자);
コードと結果

Math.random()は整数、Mathを生成します.floor()は、小数点以下の整数を破棄した結果を返します.
Math.random()で生成された数字は0から1の実数であるため、100未満の整数を生成したい場合は100を乗じてMathとする.floor()を使えばいいです.

Challenge


JavaScriptによるWeb暗いモードの実装

document.querySelector('[선택자]').style.backgroundColor='배경 색상';
document.querySelector('[선택자]').style.color='글자 색상';
HTMLで2つのボタンを生成し、onclickプロパティにJavaScriptでCSSスタイルを適用するコードを入力します.
選択者はclassまたはidであってもよいが、ここでbodyラベルを選択した.
.querySelector()タグまたはclass、idの最初の要素のみを選択します.
コード#コード#

結果-Day Modeをクリックした場合

結果-Night Modeをクリックした場合

? Question


var,let,constは何が違いますか?


JavaScriptの勉強を始めたばかりの頃、変数宣言はvarだけでした.しかし今日は講師がvarよりletを使った方が良いと言っていたので、varは今は使わない傾向にあるので、関連内容を調べました.

! Answer


var、letは変数を宣言しますが、varは主にグローバル領域を使用し、letは通常スクリプト領域、ローカル領域を使用するため、letの使用を推奨します.
constは他の言語と同様に定数を宣言し、再割り当てできない以外はletと同じ動作をします.
[注]生活コードYouTube講座

Comment


久しぶりに試したHTML、CSS、JavaScriptですが、以前とは違うところも多いので、全く新しい勉強気分でついていきます.
簡単な実践で反応型ページを作成したり、ダークモード機能を直接適用したりしても構いません.

Link


じっけんけっか
ハブリポジトリ