ホテル管理システムを運用する際に発生する問題
コードを書くとき、コンテンツを入力するときに検索をクリックすると、主な理由は、filterArr フィルター配列が空でループできないため、検索されたコンテンツが表示されず、リストに移動して内部のコンテンツをクエリしたいためです。ループするときは、orderArr 配列を走査して条件を満たすものを見つけ、フィルターされた配列に入れてからレンダリングする必要があります。
let orderArr = [
{
orderName: "空调",
orderState: "完成",
finishTime: "上午8:20",
remark: "无",
id: 1,
},
{
orderName: "被套",
orderState: "进行中",
finishTime: "下午3:00",
remark: "无",
id: 2,
},
{
orderName: "行李柜",
orderState: "完成",
finishTime: "下午13:20",
remark: "无",
id: 3,
},
{
orderName: "小冰箱",
orderState: "未开始",
finishTime: "下午18:20",
remark: "无",
id: 4,
},
{
orderName: "电视机",
orderState: "完成",
finishTime: "上午10:20",
remark: "无",
id: 5,
},
{
orderName: "茶几",
orderState: "未开始",
finishTime: "下午17:20",
remark: "无",
id: 6,
},
];
エラーコード
// 点击搜索的时候
searchBut.addEventListener("click", function () {
let filterArr = [];
//搜索框里面的值
let str = searchCon.value;
for (let i = 0; i < filterArr.length; i++) {
if (orderArr[i].orderName.includes(str)) {
//符合条件
filterArr.push(orderArr[i]);
}
}
render(filterArr);
});
正しいコード
// 点击搜索的时候
searchBut.addEventListener("click", function () {
let filterArr = [];
let str = searchCon.value;
for (let i = 0; i < orderArr.length; i++) {
if (orderArr[i].orderName.includes(str)) {
//符合条件
filterArr.push(orderArr[i]);
}
}
render(filterArr);
});
関数を追加したときに、コンテンツがページにレンダリングされませんでした。理由は、保存ボタンのクラス名が間違って他の場所から取得されたためです。最初にそれをやり始めたとき、クリックを記述しましたイベントの追加と保存を別々に行う必要があります。実際、注文を追加するときは、新しい注文の保存にクリック イベントを追加する必要があります。保存をクリックすると、クリックしたときにページをレンダリングするのではなく、コンテンツをレンダリングする必要があります。新しいボタンの内容、コードを見るとコードがごちゃ混ぜになっていて、編集と保存のボタンが注文追加のボタンにバインドされています編集機能を実行すると内容がレンダリングされずにバインドされています追加用のボタンなので編集機能は実装されておらず、最終的にそれらのボタンを再取得し、対応するイベントを追加して２つのボタンの機能を実現する。
エラーコード
//点击新增订单的时候
saveEdit.addEventListener("click", function () {
orderArr.push({
orderName: addOrderName.value,
orderState: addOrderStatus.value,
finishTime: addFinish.value,
remark: addRemark.value,
id: ++id,
});
render(orderArr);
});
//点击保存的时候
saveEdit.addEventListener("click", function () {
let json = {
id: editID,
orderName: editOrderName.value,
orderState: editOrderStatus.value,
finishTime: editFinish.value,
remark: editRemark.value,
};
for (let i = 0; i < orderArr.length; i++) {
if (orderArr[i].id == editID) {
orderArr.splice(i, 1, json);
}
}
render(orderArr);
});
正しいコード
//点击新增订单保存的时候
saveEdit.addEventListener("click", function () {
orderArr.push({
orderName: addOrderName.value,
orderState: addOrderStatus.value,
finishTime: addFinish.value,
remark: addRemark.value,
id: ++id,
});
render(orderArr);
});
//点击编辑保存的时候
saveEdit2.addEventListener("click", function () {
let json = {
id: editID,
orderName: editOrderName.value,
orderState: editOrderStatus.value,
finishTime: editFinish.value,
remark: editRemark.value,
};
for (let i = 0; i < orderArr.length; i++) {
if (orderArr[i].id == editID) {
orderArr.splice(i, 1, json);
}
}
render(orderArr);
});
また、プロジェクトを書いていると論理的な間違いが多く、どうやって書けばいいのか思いついたのですが、やり方が分かりませんでしたので、ネットで使い方を調べてログインページを書いたところ、部門リスト (ドロップダウン リストの値) を取得できなかったため、ログイン ページをクリックしてログインしたときに条件が実行されませんでした。 正しい
コード
// 获取部门列表当前的值
let op = p_attr.value;
// 获取账号里面的值
let OusernameValue = document.getElementById("exampleInputEmail1").value;
//获取密码框里面的值
let OpassValue = document.querySelector(".j_pass").value;
基本的なデータ型とは何ですか
オブジェクト null 数値 NaN ブーンリアン 文字列関数 未定義
NaN とは
NaN は JavaScript の特別な値で、「数値ではない」という意味です。値を数値として表現できない場合は、NaN が返されます。たとえば、0 を 0 で除算したり、数値以外の値に対して数学演算を実行すると、NaN が返されます。NaN はグローバル オブジェクトなので、isNaN() 関数を使用して値が NaN かどうかを検出できます。
<script>
let a = 'cc', b = 'aa'
document.write(a / b); //结果为NaN
let a = 0, b = 0
document.write(a / b);//结果为NaN
document.write(isNaN(a / b));//结果为True
</script>
出力される内容 未定義
未定義の値を持つ変数を宣言します
。 通常、未定義とは、未定義または存在しない値を表す JavaScript の値です。JavaScript は次の場合に「未定義」を出力します。
変数を宣言しても値を割り当てなかった場合、その値は「未定義」になります。
オブジェクトに存在しないプロパティにアクセスすると、JavaScript は Unknown を返します。
戻り値のない関数を呼び出すと、JavaScript は Unknown を返します。
typeof 演算子を使用して、宣言されていても値が割り当てられていない変数をチェックすると、JavaScript は Unknown を返します。
void 演算子を使用すると、Unknown が返されます。
delete 演算子を使用して存在しないプロパティを削除すると、JavaScript は Unknown を返します。
<div>
<h2 title="zz">223</h2>
</div>
<script>
let a, b;
// document.write(a);// 结果为未定义
let json = {
a: 1, b: 2 }
// document.write(json.c) //结果为未定义
let q;
// document.write(typeof (q)) //结果为未定义
let oh2 = document.querySelector('h2')
// document.write(oh2.value) //结果为未定义
</script>
型チェックとは何ですか?また、暗黙的な型チェックとは何ですか? 型チェックは、変数の型が宣言された型と一致するかどうかをコンパイル時または実行時にチェックする必要があるプログラミング言語の機能です
。型が一致しない場合、コンパイラまたはインタプリタは、プログラムの実行時に型エラーが発生するのを防ぐためにエラー メッセージを発行します。この型検出は、プログラマーが開発プロセス中に潜在的な型エラーを発見し、コードの信頼性と安定性を向上させるのに役立ちます。
暗黙的な型変換とは、式内でオペランドの型が異なる場合、一方のオペランドの型がもう一方のオペランドの型に自動的に変換されて演算されることを意味します。たとえば、式の一方のオペランドが整数型で、もう一方のオペランドが浮動小数点型の場合、整数型のオペランドは自動的に浮動小数点型に変換されて演算されます。この型変換はコンパイラによって自動的に行われるため、プログラマが型変換を明示的に実行する必要はありません。
=== 、!==、+、+=、String()、Tostring()、Boonlean()、Number()、parseInt()、parseFloat() これらの必須の型変換を除き、その他は暗黙的な型変換です。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
Break と continue の違いは何ですか?
JavaScript では、break と continue はどちらもループ ステートメントの実行フローを制御するために使用されるキーワードです。それらの違いは、break はループ ステートメントの実行を直ちに終了するために使用されるのに対し、 continue は現在のループ内の反復をスキップして次の反復の実行を継続するために使用されることです。
具体的には、break キーワードが実行されると、ループ ステートメントは直ちに終了し、プログラムはループ本体から抜け出して、ループ ステートメントの背後でコードの実行を継続します。continue キーワードが実行されると、現在のループ内の残りのコードはスキップされ、プログラムは直接次の反復に入り、ループ本体内のコードの実行を続けます。
Break と continue はループ ステートメントでのみ使用でき、他のタイプのステートメントでは使用できないことに注意してください。また、break と continue がネストされたループで使用される場合、それらは現在のループにのみ影響し、外側のループの実行には影響しません。
let arr = [1, 2, -3, 4, -5, 6];
let index = -1;
for (let i = 0; i < arr.length; i++) {
if (arr[i] < 0) {
index = i;
break; // 找到第一个负数后立即终止循环
}
}
console.log(index); // 输出2```
```javascript
let arr = [1, 2, -3, 4, -5, 6];
for (let i = 0; i < arr.length; i++) {
if (arr[i] < 0) {
continue; // 跳过负数，继续下一次迭代
}
console.log(arr[i]); // 输出所有正数的值
}
while と do while の違いは、
ループ内で初期値条件が満たされているかどうかを判定し、満たされていればループ本体が実行され、満たされていない場合はループ本体は実行されません。ループ本体を一度実行し、初期値の条件を満たしているかどうかを確認します
<script>
var i = 0;
while (i > 5) {
i++;
console.log(i);//没有结果
}
</script>
<script>
var i = 0;
do {
console.log(i); //0
i++;
} while (i > 5);
</script>
配列リテラル宣言と New 宣言の違いは何ですか
? 配列リテラル宣言と New 宣言の違いは、リテラル宣言はコード内で配列の値を直接定義するのに対し、New 宣言は配列の値を作成することです。配列オブジェクトをインスタンス化して配列を作成します。通常、リテラル宣言はより簡潔ですが、新しい宣言を使用すると、配列のサイズと型をより柔軟に制御できます。さらに、リテラル宣言は宣言時にのみ配列を初期化できますが、新しい宣言はいつでも配列を初期化できます。
一般的な配列メソッド、文字列メソッド、数学メソッドを記述する
JavaScript では、一般的な配列メソッドには次のものがあります。
Push(): 1 つ以上の要素を配列の末尾に追加し、新しい長さを返します。
Pop(): 配列の末尾から要素を削除し、その要素の値を返します。
SHIFT(): 配列の先頭から要素を削除し、その要素の値を返します。
unshift(): 1 つ以上の要素を配列の先頭に追加し、新しい長さを返します。
splice(): 配列から要素を削除または追加し、削除された要素を返します。
lice(): 元の配列を変更せずに配列の一部を返します。
一般的な文字列メソッドには次のものがあります。
length: 文字列の長さを返します。
IndexOf(): 元の文字列内で指定された文字列が最初に出現する位置を返します。
lastIndexOf(): 元の文字列内で指定された文字列が最後に出現する位置を返します。
substring(): 元の文字列の一部を返します。
replace(): 指定された文字列を元の文字列に置き換えます。
toUpperCase(): 文字列を大文字に変換します。
toLowerCase(): 文字列を小文字に変換します。
一般的な数学的手法には次のようなものがあります。
Math.abs(): 数値の絶対値を返します。
Math.ceil(): 切り上げ。
Math.floor(): 切り捨て。
Math.round(): 丸め。
Math.max(): 一連の数値の最大値を返します。
Math.min(): 一連の数値の最小値を返します。
Math.random(): 0 から 1 までの乱数を返します。
要素を取得するための一般的なメソッドを作成
する 要素を取得するための一般的なメソッドは次のとおりです。
ID によって要素を取得する: document.getElementById() メソッドを使用し、要素の ID をパラメーターとして渡して、指定された ID を持つ要素を取得します。
タグ名で要素を取得する: document.getElementsByTagName() メソッドを使用し、タグ名をパラメーターとして渡して、指定したタグ名を持つすべての要素を取得します。
クラス名で要素を取得する: document.getElementsByClassName() メソッドを使用し、クラス名をパラメータとして渡して、指定したクラス名のすべての要素を取得します。
セレクターによる要素の取得: document.querySelector() メソッドを使用し、CSS セレクターをパラメーターとして渡して、セレクターの条件を満たす最初の要素を取得します。
セレクターを通じて複数の要素を取得します。 document.querySelectorAll() メソッドを使用し、CSS セレクターをパラメーターとして渡して、セレクターの基準を満たすすべての要素を取得します。
要素の挿入、要素の削除、要素の置換、および要素の複製のメソッドを記述します。
要素の挿入: appendChild() メソッドを使用して別の要素の末尾に要素を追加したり、insertBefore() メソッドを使用して要素を別の要素に挿入したりできます。別の要素 フロント。
var newDiv = document.createElement("div");
document.body.appendChild(newDiv);
要素の削除:removeChild() メソッドを使用して、子要素を親要素から削除できます。
var myDiv = document.getElementById("myDiv");
myDiv.parentNode.removeChild(myDiv);
要素の置換: replaceChild() メソッドを使用して、ある要素を別の要素に置き換えることができます。
var oldDiv = document.getElementById("oldDiv");
var newDiv = document.createElement("div");
oldDiv.parentNode.replaceChild(newDiv, oldDiv);
要素のクローン作成: cloneNode() メソッドを使用して要素のクローンを作成できます。
var myDiv = document.getElementById("myDiv");
var clonedDiv = myDiv.cloneNode(true);
**Js で要素のスタイルを操作する方法
要素間のスタイルを操作するには、JavaScript の style 属性を使用できます。たとえば、要素の背景色を変更するには、次のコードを使用できます。
document.getElementById("myElement").style.backgroundColor = "red";
クラスを操作することも可能ですが、
.className=''
ですべてのクラスを再割り当てするだけです。 クラスがあり、削除したくない場合は、元のクラスを追加する必要があります。 の
属性の操作方法要素
h5js
.classList.add クラスを追加します。
.classList .remove クラスを削除します。
.classList.contains('class') 特定のクラスが含まれているかどうかを返します。 true false を
返します。 .classList.toggle はいの場合は削除、そうでない場合は追加します
3. 最終的なスタイル
getComputedStyle (ノード) を取得します。低レベルのブラウザではこのスタイルを使用できません
Node.currentStyle.style は IE シリーズのブラウザを対象としています。
在Js中，可以使用以下方法操作元素的属性：
使用setAttribute()方法设置属性值，例如：
javascript
document.getElementById("myElement").setAttribute("class", "myClass");
直接修改属性值，例如：
javascript
document.getElementById("myElement").className = "myClass";
使用getAttribute()方法获取属性值，例如：
javascript
var myClass = document.getElementById("myElement").getAttribute("class");
使用removeAttribute()方法移除属性，例如：
javascript
document.getElementById("myElement").removeAttribute("class");
.or [] を介してelement.attribute を
取得します。 element.attribute='xxx'; を追加して変更します。変数を続けることはできません。解決策は、remove を [variable] に置き換えてelement['attribute']を取得し、element[を追加および変更することです。 'attribute'] = 属性値文字列の属性値を変数に置き換えて属性削除要素を削除できます。attribute または delete element ['attribute']、ここでは使用できません。システムによって定義された属性は使用できません。 .function []であっても、操作はシステム自身ですカスタム属性を操作するためのラベル属性h5jsのすべてのカスタム属性には data を付ける必要があります - Get element.dataset.Custom 属性Set、modify element.dataset.Custom 属性=xxx はカスタム属性とオペレーティング システムの両方を操作できます。 属性setAttribute('属性名','属性値') getAttribute('属性名') RemoveAttribute('属性名')操作フォームの属性値には .value のみが必要です。ユーザーが生成したデータを取得できますinnerHTML innerText innerHTML 違いinnerHTML 設定または取得されるのはタグ内の HTML 構造であり、タグを含む InnerText は取得されたタグ内のコンテンツであり、タグは含まれません
innerHTML ラベル自体とそれに含まれる HTML+ テキスト情報 (それ自体を含む) を設定または取得します
externalText ラベル自体とラベルに含まれるテキスト情報 (それ自体を含む) を設定または取得します
イベント オブジェクトとは何か、共通イベント オブジェクトの値をリストします。
オブジェクト イベントがトリガーされたときに詳細データを格納するイベントを指します
イベント オブジェクトの共通値:
1. stopPropagation() は伝播を防止します
2. cancelBubble はバブリングを防止します
3. clientX clientY 視覚領域の xy 座標
4. pageX es5 のページの pageY 座標 5.
screenY screenX 画面の座標
6. keyCode
65 a
1 49
1 97
space 32
back 8
carriage return 13
left upper right lower 37 38 39 40
7. altKey shiftKey ctrlKey
8.PreventDefault() は阻止しますブラウザのデフォルトの動作
右クリック メニューでイベントをコピーおよび追加するにはいくつかの方法があります
が、その違いは何ですか?
イベントの追加方法
1. クリックでは
イベントを
一括で追加できません。 htmlと一緒に
HTMLイベントを追加する方法
イベントをキャンセル oBtn.οnclick=null;
2. oDiv.οnclick=function(){} は
ループを通じてイベントをバッチ追加できます
欠点: 1 つの要素に複数の同じイベントを追加できません
DOM0 レベルのイベントの追加メソッド
Cancel イベント oDiv.οnclick=null;
3. DOM2 レベルのイベントの追加メソッド最新のイベント バインディング メソッド、 ie.addEventListener('Event name without on'、トリガーされる関数) の
下位バージョンの要素とは互換性がありません。
イベント、イベントが沈むかどうか）;
RemoveEventListener('on のないイベントの名前'、イベントによってトリガーされる関数);
注: 基本的なテスト ポイント、関数本体を記述することはできません。関数名を記述する必要があります。同じ 2 つの関数であっても等価ではありません。
イベントがシンクされるかどうかは、デフォルトでは false (つまり、イベント バブリング) です。
IEシリーズと互換性のある記述方法があることを理解する
Element.attachEvent('イベント名に追加', イベント実行を契機とする関数)
Element.detachEvent('イベント名に追加', イベント実行を契機とする関数)
イベントフローとは停止方法 イベント バブリング
イベントがトリガーされると、イベントの流れは、 //e.stopPropagation(); // 伝播をキャンセルする高度なブラウザ
e.cancelBubble=true; // 停止時間バブリングは
一般的なイベントをリスト
できますonclick
ondblclick Double -クリック ダブルクリックは 2 回のクリックと同じです。マウスがダウンしている場合、
onmousedown onmouseup、コンテキスト メニューの右クリック イベントonmouseover onmouseout onmousemoveのトリガー頻度は非常に高くなります。多数の複雑な計算をその中に入れることはできません。通常の使用では、通常、onkeydown が押されたときに入力された値を最適化する必要があります。入力された値は入力ボックスに入っていませんonkeyup shift ctrl alt 16 17 18。コンポーネントには特別な解決策が提供されています。ShiftKey CtrlKey altKey onkeypress は、下と上の中間でトリガーされます。下と上のルート キーは、プレスのルート キーに関連付けられます。プレスのルート値は、ASCII コードに関連付けられます。
電話番号を削除するための規則的なルールを作成します
//let reg=/^1[3-9]\d{9}$/**
番号がこの配列にあるかどうかを判断する関数をカプセル化します
<script>
function finInArr(n, array) {
for (var i = n; i < array.length; i++) {
if (n==array[i]) {
console.log(1)
}
}
console.log(2)
}
finInArr(1, [1, 2, 3])//true
finInArr(4, [1, 2, 3])//false
</script>