Problems encountered when doing hotel management system
When writing code, when I click search when inputting content, the main reason is that the searched content is not rendered out because my filterArr filter array is empty and cannot be looped, and I want to go to my list Query the content inside, so when I loop, I should traverse in the orderArr array to find the ones that meet the conditions and put them in the filtered array, and then render them out
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,
},
];
error code
// 点击搜索的时候
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);
});
correct code
// 点击搜索的时候
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);
});
When adding the function, the content was not rendered to the page. The reason is that the class name in the save button was obtained by mistake, and it was obtained from other places. When I first started to do it, I wrote the click event separately for adding and saving. , in fact, when I add an order, I should add a click event to the save in the new order. When I click save, I should render the content instead of rendering the page when I click the new button Content, when looking at the code, the code is mixed up, and the button for editing and saving is bound to the button for adding an order. When doing the editing function, the content is not rendered, and it is bound to the button for adding. , so the editing function has not been implemented, and finally their buttons are reacquired, and corresponding events are added to them, and the functions of the two buttons are realized.
error code
//点击新增订单的时候
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);
});
correct code
//点击新增订单保存的时候
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);
});
In addition, when writing the project, there were many logical errors. I could think of how to write it, but I didn’t know how to write it. I checked the usage on the Internet. When I wrote the login page, I didn’t get the department list ( The value in the drop-down list), resulting in that the condition has not been executed when the login page is clicked to log in.
Correct code
// 获取部门列表当前的值
let op = p_attr.value;
// 获取账号里面的值
let OusernameValue = document.getElementById("exampleInputEmail1").value;
//获取密码框里面的值
let OpassValue = document.querySelector(".j_pass").value;
What are the basic data types
object null number NaN boonlean string function undefined
What is NaN
NaN is a special value in JavaScript, which means "not a number". NaN is returned when a value cannot be represented as a number. For example, dividing 0 by 0 or performing mathematical operations on non-numeric values returns NaN. NaN is a global object, you can use the isNaN() function to detect whether a value is 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>
What will print Undefined
Declare a variable with an undefined value
Undefined is usually a value in JavaScript that represents an undefined or non-existent value. JavaScript prints Undefined when:
When you declare a variable but don't assign it a value, its value is Undefined.
JavaScript returns Undefined when you access a property that doesn't exist in an object.
JavaScript returns Undefined when you call a function with no return value.
JavaScript returns Undefined when you use the typeof operator to check a variable that is declared but not assigned a value.
When you use void operator it returns Undefined.
When you use the delete operator to delete a property that does not exist, JavaScript returns Undefined.
<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>
What is type checking and what is implicit type checking? Type checking
is a programming language feature that requires checking, at compile time or run time, that the type of a variable matches its declared type. If the types do not match, the compiler or interpreter will issue an error message to prevent the program from having type errors at runtime. This type detection can help programmers find potential type errors during the development process and improve the reliability and stability of the code.
Implicit type conversion means that in an expression, if the types of the operands are different, the type of one of the operands will be automatically converted to the type of the other operand for operation. For example, in an expression, if one operand is of integer type and the other operand is of floating-point type, the operand of integer type will be automatically converted to floating-point type for operation. This type conversion is done automatically by the compiler, and the programmer does not need to perform type conversion explicitly.
=== ,!==, +, +=, String(), Tostring(), Boonlean(), Number(), parseInt(), parseFloat() except for these mandatory type conversions, others are implicit type conversions ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
What is the difference between break and continue?
In JavaScript, both break and continue are keywords used to control the execution flow of loop statements. The difference between them is that break is used to immediately terminate the execution of the loop statement, while continue is used to skip an iteration in the current loop and continue to execute the next iteration.
Specifically, when the break keyword is executed, the loop statement will terminate immediately, and the program will jump out of the loop body and continue to execute the code behind the loop statement. When the continue keyword is executed, the remaining code in the current loop will be skipped, and the program will directly enter the next iteration and continue to execute the code in the loop body.
It should be noted that break and continue can only be used in loop statements, not in other types of statements. Also, when break and continue are used in nested loops, they only affect the current loop and not the execution of the outer loop.
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]); // 输出所有正数的值
}
The difference between while and do while
is to judge whether the initial value condition is satisfied in the loop. If it is satisfied, the loop body will be executed. If it is not satisfied, the loop body will not be executed. Do while is to execute the loop body once, and then check whether Satisfy the initial value condition
<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>
What is the difference between the array literal declaration and the New declaration
? The difference between the array literal declaration and the New declaration is that the literal declaration is to directly define the value of the array in the code, while the New declaration is to create an array by instantiating an array object. Literal declarations are usually more concise, but New declarations allow for more flexible control over the size and type of the array. In addition, literal declarations can only initialize arrays at declaration time, while New declarations can initialize arrays at any time.
Write common array methods, string methods, math methods
In JavaScript, common array methods include:
push(): Add one or more elements to the end of the array and return the new length.
pop(): Removes an element from the end of the array and returns the value of that element.
shift(): Removes an element from the beginning of the array and returns the value of that element.
unshift(): Add one or more elements to the beginning of the array and return the new length.
splice(): Remove or add elements from the array and return the removed elements.
slice(): Returns a part of the array without modifying the original array.
Common string methods include:
length: Returns the length of the string.
indexOf(): Returns the position of the first occurrence of the specified string in the original string.
lastIndexOf(): Returns the position of the last occurrence of the specified string in the original string.
substring(): Returns part of the original string.
replace(): Replace the specified string in the original string.
toUpperCase(): converts the string to uppercase.
toLowerCase(): Converts the string to lowercase.
Common mathematical methods include:
Math.abs(): Returns the absolute value of a number.
Math.ceil(): round up.
Math.floor(): round down.
Math.round(): rounding.
Math.max(): Returns the maximum value in a set of numbers.
Math.min(): Returns the minimum value in a set of numbers.
Math.random(): Returns a random number between 0 and 1.
Write common methods for obtaining elements
Common methods for obtaining elements include:
Get elements by ID: use the document.getElementById() method, and pass in the ID of the element as a parameter to get the element with the specified ID.
Get elements by tag name: Use the document.getElementsByTagName() method and pass in the tag name as a parameter to get all the elements with the specified tag name.
Get elements by class name: use the document.getElementsByClassName() method and pass in the class name as a parameter to get all the elements of the specified class name.
Get elements by selector: Use the document.querySelector() method and pass in a CSS selector as a parameter to get the first element that meets the selector conditions.
Get multiple elements through a selector: use the document.querySelectorAll() method and pass in a CSS selector as a parameter to get all elements that meet the selector criteria.
Write the methods of inserting elements, deleting elements, replacing elements, and cloning elements
Inserting elements: you can use the appendChild() method to add an element to the end of another element, or use the insertBefore() method to insert an element into another element Front.
var newDiv = document.createElement("div");
document.body.appendChild(newDiv);
Removing Elements: A child element can be removed from a parent element using the removeChild() method.
var myDiv = document.getElementById("myDiv");
myDiv.parentNode.removeChild(myDiv);
Replacing Elements: One element can be replaced by another element using the replaceChild() method.
var oldDiv = document.getElementById("oldDiv");
var newDiv = document.createElement("div");
oldDiv.parentNode.replaceChild(newDiv, oldDiv);
Cloning elements: An element can be cloned using the cloneNode() method.
var myDiv = document.getElementById("myDiv");
var clonedDiv = myDiv.cloneNode(true);
**How to manipulate the style of elements in Js
To manipulate the style between elements, you can use the style attribute in JavaScript. For example, to change the background color of an element, you can use the following code:
document.getElementById("myElement").style.backgroundColor = "red";
It is also possible to operate the class,
just need .className=''
to reassign all classes. If there is a class and you don't want to delete it, you need to add the original class.
How to operate the attribute of the element
h5js
.classList.add Add a class
.classList .remove delete a class
.classList.contains('class') whether it contains a class return true false
.classList.toggle delete if yes, add if not
3. Obtain the final style
getComputedStyle (node). Low-level browsers cannot use the style
Node.currentStyle.style is aimed at IE series browsers
在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");
Get
element.attribute through .or []
Add and modify
element.attribute='xxx';
. cannot be followed by variables.
The solution is to replace remove with [variable]
to get
element['attribute']
add and modify
element['attribute'] = attribute value
The attribute value of the string can be replaced with a variable
to delete the attribute delete element. attribute or delete element ['attribute'], which cannot be used here, and the attribute defined by the system cannot be calculated. Whether it
is .function [], the operation is the system itself Label attribute
to operate custom attributes All custom attributes of
h5js must be prefixed with data- Get element.dataset.Custom attribute Set, modify element.dataset.Custom attribute=xxx can operate both custom attribute and operating system The attribute setAttribute('attribute name','attribute value') getAttribute('attribute name') removeAttribute('attribute name') The attribute value of the operation form only needs .value because it can get the data generated by the user innerHTML innerText outerHTML difference innerHTML What is set or obtained is the HTML structure in the tag, and the InnerText containing the tag is the content in the obtained tag, not including the tag
outerHTML set or get the label itself and the HTML+ text information it contains (including itself)
outerText set or get the label itself and the text information it contains (including itself)
what is the event object, list the value of the common event object event
object It refers to the event that stores the detailed data when the event is triggered
Common values of the event object:
1. stopPropagation() prevents propagation
2. cancelBubble prevents bubbling
3. clientX xy coordinates of the clientY visual area
4. pageX pageY coordinates of the page in es5 5.
screenY screenX coordinates of the screen
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() prevents the browser's default Behavior There are several methods for copying and adding events
in the right-click menu
, and what are the differences? How
to add events
1. Clicking
cannot add events
in batches. It is not flexible to modify later when it is tied together with html
How to add html events
Cancel event oBtn.οnclick=null;
2. oDiv.οnclick=function(){}
can batch add events through loop
Disadvantage: Cannot add multiple same events on one element
Adding method of DOM0-level event
Cancel event oDiv.οnclick=null;
3. Adding method of DOM2-level event
Modern event binding method, incompatible with lower version
elements of ie.addEventListener('Event name without on', the function triggered by the event, whether the event sinks);
RemoveEventListener('The name of the event without on', the function triggered by the event);
Note: Basic test points, you cannot write the function body, you must write the function name. Even two functions that are the same are not equal.
Whether the event sinks is false by default; that is, event bubbling
Understand that
there is a writing method compatible with IE series.
Element.attachEvent('Add on event name', function triggered by event execution)
Element.detachEvent('Add on event name', Event trigger function executed)
What is event flow and how to stop it Event bubbling
When the event is triggered, the flow of the event, //e.stopPropagation(); //Cancel propagation advanced browser
e.cancelBubble=true; //Stop time bubbling can
list common events
onclick
ondblclick Double-click a double-click is equal to two clicks
onmousedown
onmouseup when the mouse is down,
contextmenu right-click events
onmouseover
onmouseout
onmousemove
trigger frequency is very high.
A large number of complex calculations cannot be placed in it. In normal use, it is generally necessary to optimize
the value entered when onkeydown is down. The value entered has not entered the input box
onkeyup
shift ctrl alt 16 17 18.
A special solution is given for the component.
shiftKey ctrlKey altKey
onkeypress
is triggered in the middle of down and up.
The root key of down and up is related to the root key of press. The root value of press is related to the ASCII code.
Write regular rules for removing phone numbers
//let reg=/^1[3-9]\d{9}$/ **
Encapsulate a function to determine whether a number is in this array
<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>