[WEB 01] HTML, CSS, JavaScript
3676 ワード
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
じっけんけっか
ハブリポジトリ
Reference
この問題について([WEB 01] HTML, CSS, JavaScript), 我々は、より多くの情報をここで見つけました
https://velog.io/@boracious/WEB-01-HTML-CSS-JavaScript
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
console.log('[로그]');
document.write('[화면에 보여주고자 하는 메시지]');
alert('[경고 메시지]');
confirm('[확인 메시지]');
prompt('[입력받고자 하는 항목]');
Math.random();
Math.floor(내림하고자 하는 숫자);
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
じっけんけっか
ハブリポジトリ
Reference
この問題について([WEB 01] HTML, CSS, JavaScript), 我々は、より多くの情報をここで見つけました
https://velog.io/@boracious/WEB-01-HTML-CSS-JavaScript
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
var、letは変数を宣言しますが、varは主にグローバル領域を使用し、letは通常スクリプト領域、ローカル領域を使用するため、letの使用を推奨します.
constは他の言語と同様に定数を宣言し、再割り当てできない以外はletと同じ動作をします.
[注]生活コードYouTube講座
Comment
久しぶりに試したHTML、CSS、JavaScriptですが、以前とは違うところも多いので、全く新しい勉強気分でついていきます.
簡単な実践で反応型ページを作成したり、ダークモード機能を直接適用したりしても構いません.
Link
じっけんけっか
ハブリポジトリ
Reference
この問題について([WEB 01] HTML, CSS, JavaScript), 我々は、より多くの情報をここで見つけました
https://velog.io/@boracious/WEB-01-HTML-CSS-JavaScript
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
じっけんけっか
ハブリポジトリ
Reference
この問題について([WEB 01] HTML, CSS, JavaScript), 我々は、より多くの情報をここで見つけました https://velog.io/@boracious/WEB-01-HTML-CSS-JavaScriptテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol