21.08.08

学習内容

cssの追加説明とjsデータ型の元のタイプnullとundefinedを学習した.

◆CSSの説明を追加

- reset css

:既存のhtmlタグが持つすべてのcssを完全に初期化します.
これまでページを作成するたびにcss初期化が行われていた.しかし、予め作成された初期化操作コードはreset cssである.
https://meyerweb.com/eric/tools/css/reset/
リンクのコードをリセットします.cssファイルにコピーすればいいです.
次に、cssをhtmlにバインドすると、既存のcssファイルの上にリセットします.cssファイルをバインドする必要があります.順番が大切です.連動中にカスケードも発生します

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

写真のようにhtmlタグを作成すると、対応するcssのコードがデバッガに呼び出されます.このコードは、通常、各ブラウザが独自のcssを定義しているため、少し異なります.cssをリセットして、すべてのブラウザを同じにリセットします.
次のカスタマイズ作業は、私が作成したcssファイルで行うことができます.

- normalize css

:完全初期化ではありません.
https://necolas.github.io/normalize.css/
ファイルをダウンロードし、cssフォルダに保存

以前のresetが完全に初期化されているとすれば、normalizeは設計された形で加工されています.再定義されていない概念、設計ではありません.
どうして普通の明るいcssを使うのですか?
:resetとは異なり、設計は適用されます.しかし、この設計は、各ブラウザ間でcss設計誤差を低減し、エラーを低減する方向にスタイルを再定義するために使用される.
→resetとnormalizeのどちらを使いますか?
開発者の好み次第で、環境次第です.
設計者が作成したシェイプに基づいて作成すると、リセットされます.
しかし実務ではnormalizeがよく使われる.

-css変数

:元のcssにはない概念ですが、開発言語の発展に伴い、最近現れた概念です.絵描きではほとんど使えません.값・value・데이터:ある箱に入った内容物변수:これらのデータを入れた箱변수명:変数(ボックス)の名前は、私が欲しい名前を取ってもいいです.
トウィッチ実習では,開発者ツールで正しい値を特定することは困難である.カピケイトが隠しにくい状態.

このような青い字は変数ですその名前は変数名です

:root {
	--black: #18181a;
	--purple: #9147ff;
	--font-size-40: 40px;
}

여기서 black, purple, font-size-16이 변수고 속성값들이 데이터다.

h1 {
	background-color: var(--black);
	font-size: var(--font-size-40);
	color: var(--purple);
}

변수를 사용할 땐 var()를 쓰고 괄호 안에 변수명을 넣는다.

開発者ツールを使用してcssをチェックすると、tの場所に似た内容が表示されます.
マウスを離すと正しい数値が得られます.
変数を使用する理由
1.変数のデータを一度変更すると、残りの変数の値も同時に変更されます.ロット修正作業で便利に使用できます.
例えば、ブランドの色が変わることを想像してみてください.
紫色変数と書かれているデータを黄色に変換すると、紫色変数と書かれているすべての値が変更されます.
2.変数名を使うと、人がどんな内容なのか分かりやすい.
書く--brand-colorは9147 ffより理解しやすい.

:root {
	--black: #18181a;
	--brand-color: #9147ff;
	--font-size-40: 40px;
}

h1 {
	background-color: var(--black);
	font-size: var(--font-size-40);
	color: var(--brand-color);
}

h2 {
	color: var(--brand-color);
}

直感的なコード作業ができるので役に立ちます.

:root {
	--black: #18181a;
	--brand-color: #9147ff;
	--font-size-40: 40px;
}

:変数をルート領域に配置すると、任意の領域でインポートおよび使用できます.ただし、この変数を使用する範囲を制限します.

<header id="intro">
	<p>Header P</p>
</header>


<footer id="footer">
	<p>Footer P</p>
</footer>

まず図面をこのように作成します.

#intro {
	--font-color: blue;
	--font-size: 50px;
}

#intro p {
	font-size: var(--font-size);
	color: var(--font-color);
}

#footer p {
	font-size: var(--font-size);
	color: var(--font-color);
}

変数は指定されていますが、intro領域に書かれています.上の変数はintro領域でのみ使用できます.
従って,各pタグに変数を適用したが,結果はこうであった.

footerは変数を指定しますが、まったく適用されません.空殻です.
▶cssの選択者を利用して、私が使用する変数が影響力を発揮する範囲を指定できます.
▶あらゆる分野で私が作った変数を使いたい場合は、:root {}.

◆Javaスクリプト

▶データ型

:js等号の後ろにあるデータはいろいろあります.データの種類をデータ型と呼ぶ.英語の単語を覚えなければなりません.
典型的な8種類のデータ型
元のタイプ

문자열(String):テキストデータ

숫자(Number)

논리(Boolean):真/偽のみ

undefined:すべての変数宣言時に基本的に入る.

null

参照タイプ

배열(Array)

함수(Function)

객체(Object)

前回は論理も習いました.今日はこれからの内容を勉強します.

- null, undefined

:両方のステータスに値はありません.
多くの人が2つの概念を混同して、必ずよく理解して超えなければなりません.

var n = null;
var u;

console.log(n);
console.log(u);

결과는 null, undefined로 나타난다

変数nはnull値を指定せず、変数uは値を指定しない.

null:変数を初期化し、明確に空の値を変数内に分配し、箱に空気を注入したようなものを想像する.データはありますが、データは空です.(nullはデータを割り当て、空のデータを明示的に通知します)

undefined:変数を宣言するだけ

nullとundefinedの違い
:会社の面接でたまに聞く内容
両方の値は空ですが、nullというデータが変数に割り当てられているかどうかで、変数のみが宣言されているかどうかが異なります.
'

チップ
typeofは1段おきに書きます.ユーザーに後で入力したデータがどのタイプのキーワードなのかを教えます.直接の値を付けてもいいし、変数名を付けてもいいです.

console.log(typeof null);
console.log(typeof undefined);

このようにデータ型を出力すると、結果はobjectとundefinedとしてそれぞれ表示されます.objectはデータ型で参照タイプにあります.ただしnullは元のタイプのデータ型です.
- 왜 null의 typeof가 object로 출력될까?正式な文書の内容.nullは生まれつき버그 때문このバグは修正できません.nullはnullデータ型です.

console.log(null == undefined);
console.log(null === undefined);
-
결과는 true / false로 나뉜다.

否定する
まず、否定演算子は!

console.log(!true);
console.log(!false);
-
결과는 각각 false와 true

nullとundefinedの否定

console.log(!null);   //결과는 true
console.log(!!null);  //결과는 false
부정한 것을 다시 부정하는 법이 !!

否定を再否定し、元の状態に戻らずfalseが出現した.1回目の否定ではすでにtrueが返されているので、以下の解釈は否定trueである.

console.log(!undefined);     //결과는 true
console.log(!!undefined);    //결과는 false

nullとundefinedの加算

console.log(10 + null);  // null -> 0
결과 10

jsでは、nullと数字が出会うとnullはゼロになります.

console.log(10 + undefined);   // NaN -> (Not a Number)
결과 NaN

数字+undefined、これは加算である値が得られたものの、結果は数字ではないことを意味する.これは間違いです.

難点

今日もcssは実習ではなく概念を中心に勉強しています.概念ができてまた難しくなったjs概念はまだ基本段階にあるが,量が増えるにつれて理解しにくくなってきた.しかし、暗記を続けて何度も見ると、自然にそれを熟知すると思います.

解決策

何度も概念を見て、マスターすれば問題を解決できるようです.

に感銘を与える

コンセプトレッスンは記録しながら聞くので、進捗が悪いので少し垂れ下がっています.それも頑張ります