CSSボーダーシャドウ、JS基本構文

境界線、影

丸い境界線

プロパティ名: border-radius

一般的な値: 数値 + ピクセル、パーセンテージ (左上から時計回りに)

完全な円

箱は正方形でなければなりません

境界半径：50%

カプセルボタン

箱は長方形です

border-radius: ボックスの高さの半分

オーバーフロー

表示されるデフォルト値、オーバーフロー部分が表示される

非表示オーバーフロー部分的に非表示

スクロールオーバーフローに関係なくスクロールバーを表示します。

auto オーバーフローするかどうかに応じて自動的に表示または非表示にします

要素自体は非表示になります

可視性: 非表示 (プレースホルダーは非表示)

表示:なし (スペースを占有せず、非表示にします)

QRコードの表示・非表示

QR コードに「display:none」を追加します。

次に、マウスの状態をボタンに追加します

ボックス a: ホバー画像{

表示ブロック;

}

要素の全体的な透明度

不透明度は、内部のコンテンツ (テキスト、サブ要素など) を含む要素全体を透明にします。

スプライト

導入：

シナリオ: プロジェクトでは、複数の小さな画像が 1 つの大きな画像に結合され、この画像がスプライトになります。

利点: サーバーの送信数が減り、サーバーの負荷が軽減され、ページの読み込み速度が向上します。

使用：

ボックスを作成し、ボックスのサイズをサムネイルのサイズと同じに設定します。

スプライト画像をボックスの背景画像として設定します

背景画像の位置を変更する

PxCook を使用して、小さな画像の左上隅の座標を測定し、負の値をボックスの背景位置に設定します: xy

スプライト図のラベルはすべてインラインラベル (span、b、i...) を使用します。

インライン要素に変換する必要がある

背景画像のスタイル

背景サイズ: 幅と高さ; 値:

数値+ピクセル: シンプルで便利、よく使われます

パーセンテージ: 現在のボックス自体に対する幅と高さのパーセンテージ

contains: Contain、ボックスの最大サイズを超えなくなるまで、背景画像を比例的に拡大縮小します。

cover: カバー、空白のスペースなくボックス全体を埋めるまで、背景画像を同じ比率で拡大縮小します。

背景：カラー画像のリピート位置/サイズ；

ボックスシャドウ

プロパティ名: box-shadow

価値：

パラメータ	効果
h-シャドウ	必須、水平オフセット。負の値も許可されます
Vシャドウ	必須、垂直オフセット。負の値も許可されます
ぼかし	オプション、あいまいさ
広める	オプション、影の拡大
色	オプション、影の色
差し込み	オプションで、シャドウをインナーシャドウに変更します

遷移

機能: 要素のスタイルをゆっくりと変化させます。Web ページのインタラクティブなエクスペリエンスを向上させるためにホバーと一緒によく使用されます。

属性名: 遷移

一般的な値:

パラメータ	価値
遷移プロパティ	all: 遷移可能なすべてのプロパティが遷移されます。
移行期間	数値 + は (秒)、特定の属性名は次のようになります。 width: width のみを遷移できます。

注意点：

遷移要件: デフォルト状態とホバー状態のみが異なります

遷移属性は、遷移する必要がある要素自体に追加されます。

遷移属性は、さまざまな効果を持つさまざまな状態に設定されます。

デフォルトの状態を設定すると、マウスが移動または削除されたときに影響します。

ホバー状態を設定します。マウスが内側に移動するとトランジション効果があり、マウスが外側に移動するとトランジション効果はありません。

スケルトン構造タグ

ドキュメントタイプ宣言。ブラウザに Web ページの HTML バージョンを伝えます。

Web ページの言語

<html lang="en">Web ページで使用されている言語を識別します。

機能: 検索エンジン分類 + ブラウザ翻訳

共通言語: zh-CN 簡体字中国語/en 英語

文字コード

UTF-8: ユニコード

GB2312: 6000 以上の漢字

GBK:: 20000+ 漢字

SEO三大タグ

SEO (検索エンジン最適化): 検索エンジンの最適化

JavaScript の概要

言語の発達:

-テープマシン：機械語

- アセンブリ言語: シンボリック言語

-現代言語: 高級言語

起源：

JavaScript は 1995 年に誕生し、主に Web ページのフロントエンド検証を処理するために使用されています。

フロントエンド検証: ユーザーが入力した内容が特定のルール (ユーザー名の長さ、パスワードの長さ、メールボックスの形式) に準拠しているかどうかを確認します。

Microsoftが開発したJScriptはJavaScriptと同じ機能を持つ

ECMAScript は JavaScript の標準であるため、一般的には 1 つの意味を持つと考えられています。

実際、JavaScript はもっと大きな意味を持っています。

完全な JavaScript 実装は、次の 3 つの部分で構成されます。

ECMAScript

DOM (js による Web ページの操作)

BOM（jsでブラウザを操作）

JSの特徴

-通訳された言語

-C や Java に似た構文構造

- 動的な言語

-プロトタイプベースのオブジェクト指向

HBuilder は前のステップに戻ります Ctrl+Z

元に戻す Ctrl+Y

<!DOCTYPE html>

<html>

<頭>

<タイトル></タイトル>

// ブラウザを制御して警告ボックスをポップアップ表示します

//alert("これは警告ボックスです。Gu Wenjing に注意してください");

// コンピュータにページ（ボディ）のコンテンツを出力させます

// document.write("私の魔法の力を披露するのを見てください");

// console.log() コンテンツをコンソールに出力します

// console.log("どこから出てきたと思いますか?");

alert("これは警告ボックスです。Gu Wenjing に注意してください");

document.write("私の魔法の力を披露するのを見てください");

console.log("どこから出てきたと思いますか?");

// JS のコンパイル順序は上から下へ

</script>

</head>

<本文>

</body>

</html>

JS では大文字と小文字が厳密に区別されます

JS のすべてのステートメントはセミコロンで終わります (セミコロンを書かないと、ブラウザが自動的にセミコロンを追加しますが、システムリソースを消費し、場合によってはシステムが間違ったセミコロンを追加します)。

JS は複数のスペースと改行を無視します

リテラルと変数

リテラル: これらはすべて不変の値です (リテラルは直接使用できます)

変数: 変数はリテラルを格納するために使用できます。

変数の宣言: JS で var キーワードを使用して変数を宣言します。

識別子

-JS では、私たちが名前を付けることができるすべてのものを識別子と呼ぶことができます

- 例: 関数名、変数名、属性名はすべて識別子です

・命名規則はC/javaと同じ

JS 最下位層が識別子を保存するときに使用される実際の Unicode エンコーディング

したがって、理論的には、utf-8 に含まれるすべてのコンテンツを識別子として使用できます。

中国語も変数名として使用できます

データの種類

文字列文字列

数値

ブール値ブール値

Null ヌル値

未定義未定義

オブジェクトオブジェクト (参照データ型)

弦

--JS 内の文字列は引用符で囲む必要があります

-- 一重引用符または二重引用符を使用できます。

var str = “こんにちは”；

str = "私は言いました：\「今日は本当に天気がいいですね！」「」;

一部の特殊記号を表現する場合、\ を使用してエスケープできます。

「	」
\'	'
\n	改行を示します
\t	タブ
\\	\

番号

整数と浮動小数点数が含まれます

var a =123；

var b = “123”；

演算子 typeof を使用して変数の型を確認できます。

構文: 変数の型

文字列をチェックすると文字列が返される

数値をチェックすると数値が返されます

console.log(b の種類);

Number.MAX_VALUE を JS で使用して、数値の最大値を表すことができます

1.7976931348623157e+308

最大値を超える場合は、Infinity (リテラル、正の無限大) が返されます。

NaN は数値ではないことを意味する特別な数です

typeof を使用して NaN をチェックすると数値も返されます

Number.MIN_VALUE は 0 5e-324 を超える最小値を表します

ブール値

真/偽

ヌル

Null チェックの戻り値がオブジェクトです

未定義

変数が宣言されていても値が割り当てられていない場合、その値は未定義です。

強制的な型変換

他のデータ型を文字列に変換する

方法 1:

-- 変換されたデータ型の toString() メソッドを呼び出します。

-- このメソッドは元の変数には影響せず、変換された結果を返します。

--ただし、注意: null と unknown の 2 つの値には toString がなく、それらのメソッドが呼び出されるとエラーが報告されます。

a.toString();

方法 2:

-- String() 関数を呼び出し、変換されたデータをパラメータとして関数 a=String(a) に渡します。

--Number と Boolean の場合、実際には toString() メソッドが呼び出されますが、null と unknown の場合、toString() は呼び出されず、対応する型のままになります。

将其它数据类型转换为Number

调用Number函数将a转换为Number类型

字符串-->数字

如果是纯数字的字符串，则直接将其转化为数字

如果字符串有非数字的话，则转化为NaN

如果字符串是一个空串或者是一个全是空格的字符串则转化成0

布尔-->数字

true 转成1

false 转成0

null-->数字 0

undefined->数字 NaN

如果对非String使用parseInt（）或parseFloat（）会先将器转化成String然后再操作

a="123.456.789px";

a=parseInt(a);

a=parseFloat(a);

其他进制的数字

在JS中，如果需要表示16进制的数字，则需要以0x开头

如果需要表示8进制的数字，则需要以0开头

如果需要表示2进制的数字，则需要以0b开头

有时浏览器无法判定进制，可以用a=parseInt(a,10)

a是要被转化的数，数字是要转换的进制

JAVA 与 JS

	JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

基础语法

非布尔值进行与或运算

---对于非布尔值进行与或运算时，会先将其转化为布尔值，然后再运算，并且返回原值

如果第一个值为true，则必然返回第二个值。

如果第一个值为false，则必然返回第一个值。

如果第一个值是true，则直接返回第一个值。

如果第一个值是false，则直接返回第二个值。

赋值运算符

=、+=、-=、*+、/=、%=

关系运算符

如果关系成立则返回true，如果关系不成立则返回false

非数值会先转化为数值，再进行运算

任何值和NaN做任何比较都是false

如果符合两侧的值都是字符串，不会将其转化为数字进行比较。而会分别比较Unicode编码。比较字符编码时，是一位一位进行比较的。如果两位一样，则比较下一位，所以借用他来对英文进行排序。

Unicode编码表

在字符串中使用转义字符输入Unicode编码

\u（四位编码）

console.log("\u1C00");

在网页中使用Unicode编码

&#编码；这里的编码需要的是十进制

☠

相等运算符

用来比较两个值是否相等==

undefined衍生自null，所以两值判断是为true

NaN不和任何值相等，包括他本身。

可以通过isNaN（）函数来判断是不是NaN

===全等，不会自动做类型转换

条件运算符（三元运算符）

条件表达式？语句1：语句2；

如果条件表达式的求值结果是非bool类型，会先将其转化为bool值，true返回第二个，false返回第一个。

运算符的优先级

&&的优先级高

代码块

在JS中使用{ }来为语句进行分组

对象

对象只是带有属性和方法的特殊数据类型。

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

对象的分类

内建对象

由ES标准中定义的对象，在任何的ES中都可以实现

比如：Math String Number Boolean Function Object...

宿主对象

由JS的运行环境提供的对象，目前来讲主要由浏览器提供的对象。

比如BOM DOM

自定义对象

由开发人员自己创建的对象

对象的基本操作

创建对象

使用new关键字调用的函数，是构造函数constructor

构造函数是专门用来创建对象的函数

使用typeoof检查一个对象时，会返回object

var obj=new Object ( );

属性

在对象中保存的值称为属性

向对象添加属性

对象.属性名 = 属性值；

obj.name="孙悟空";

obj.gender="男"；

obj.age = 18 ;

读取对象中的属性

对象.属性名

如果读取对象中没有该对象，不会报错，而是会返回undefined

修改对象的属性

对象.属性名=新值；

删除对象的属性

delete 对象名.属性值；

对象的属性名不强制要求遵守标识符的规范

如果需要使用特殊的属性名，不能采用.的方式来操作

需要另一种方式：对象 ["属性名"] = "属性值"

读取时也需要采用这种方式

使用[ ]这种形式去操作属性，更加的灵活

在[ ]中可以直接传递一个变量，这样变量值是多少都会读取那个属性

obj["123"]=789;

obj["nihao "]="你好";

var n= "123";

console.log(obj[n]);

属性值

JS对象的属性值，可以是任意的数据类型

in运算符

通过该运算符可以检查一个对象中是否含有指定的属性

如果有则返回true，没有则返回false

"属性名" in 对象

例：console.log("name".obj);

基本数据类型

字符串（String）

数字(Number)

布尔(Boolean)

空（Null）

未定义（Undefined）

Symbol

注：*Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。*

引用数据类型

对象(Object)

数组(Array)

函数(Function)

正则（RegExp）

日期（Date）

JS中的变量值都保存到栈中

基本数据类型的值直接在栈内存中存储；

值与值之间是独立存在的，修改一个变量不会影响其他的变量

对象是保存堆内存中的，每创建一个新的对象，就会在对内存中开辟一个新的空间。而变量保存的是变量的内存地址（对象的引用）。

当比较两个基本数据类型的值时，比较的是值的大小。

当比较两个引用数据类型时，比较的是对象的内存地址。

对象字面量

var obj={name:"猪八戒"，

age：28，

gender：男}；

属性名和属性值是一组一组的名值对结构，名和值之间使用 :连接，多个名值对之间使用，隔开如果一个属性之后没有其他的属性了，就不要写，

函数

函数也是一个对象

函数中可以封装一些功能（代码），在需要时可以执行这些功能。

创建一个函数对象

可以将要封装的代码一字符串的形式传递给构造函数

var fun = new Function（）；

函数对象（）；

调用函数时，按照顺序执行。

使用函数声明来创建一个函数

function 函数名（[形参1，形参2，...形参n]）{ }

如果return语句后不跟任何值就相当于返回一个undefined

如果不写return，则也返回undefined

实参可以是一个对象，也可以是一个函数

返回值可以是任意的数据类型

立即执行函数

（function (){

alert("我是一个匿名函数~~~");

})();

调用函数后立即被执行，往往只会执行一次。

方法

加. 是调方法

不加.是调函数

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

实例

var person={fname:"Bill", lname:"Gates", age:56};

for (x in person)

{ txt=txt + person[x];

console.log(txt)

}

作用域

作用域是可访问变量的集合（一个变量的作用范围）。

全局作用域

a.全局变量在页面打开时创建，页面关闭后销毁。

b.在 HTML 中, 全局变量是 window 对象，所以window 对象可以调用函数内的局部变量。

c.直接编写在script标签中的JS代码，都在全局作用域。

d.在全局作用域中，

创建的变量都会作为window对象的属性保存

创建的函数都会作为window对象的方法保存

注意：所有数据变量都属于 window 对象(创建)。

变量的声明提前

使用var关键字声明的变量，会在所有的代码执行之前被声明（但不会被赋值），但是如果声明变量是不使用var关键字，则变量不会被声明提前。

函数的声明提前

使用函数声明形式创建的函数function 函数（）{ }

它会在所有代码执行之前就被创建

函数作用域

a.调用函数时，创建函数作用域，函数执行完毕后销毁

每调用一次就会创建一个新的函数作用域，他们之间相互独立

b.在函数作用域中可以访问到全局变量的作用域

在全局作用域中无法访问到函数作用域的变量

c.变量使用：就近原则。如果找不到，则会报错。

在函数作用域中也有声明提前的特性

使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。

你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。局部变量，包括 window 对象可以覆盖全局变量和函数。

this关键字

解析器在调用函数时，每次都会向函数内部传递一个隐含的参数

这个隐藏的参数就是this（请忽略我）