Javascript review day 12

This is the 16th day of my participation in Gwen Challenge

arguments

Arguments is an array-like object built-in to a function. This saves the actual arguments to the function as it executes

function fun(a,b,c) {
	// Internal object of function
	console.log(arguments);
}
Copy the code

The data type is object: object

It reads data in the same way as an array

Read: [index]

arguments[0]
Copy the code

Set: = assign

arguments[0] = 100;
Copy the code

Length can also be used

arguments.length
Copy the code

Arguments can only force an array to be stretched by the length property, not by an index value

// The array cannot be stretched by index values
arguments[10] = 10;
console.log(arguments.length);
Copy the code

arguments.length = 10;
console.log(arguments.length);
console.log(arguments);
Copy the code

Arguments are not arrays and cannot use certain methods of arrays

All other languages have function overloading. The same function name and different parameters indicate different functions.

But there is no overloaded js phenomenon, the function name is the same, the number of parameters is different, indicating the same function, the back layer of the previous.

// The function name is the same
// Different number of parameters
function fun(a) {
	console.log(1);
}

function fun(a,b,c) {
	console.log(2);
}
/ / call
fun();
Copy the code

Use Arguments to simulate function overloading. The same function, different number of parameters to achieve different functions.

When the number of parameters is 2, the parameters are added; When the number of parameters is 3, you need to add the larger values of the first two parameters to the third parameter. The output of other parameters is incorrect.

// Use the switch statement
function sum(a,b,c) {
	switch(arguments.length) {
		// If it is two arguments
		case 2: 
			return a + b;
			break;
		case 3: 
			return (a < b ? b : a) + c;
			break;
		// None of the above
	default:
			throw new Error("Wrong parameters"); }}/ / call
console.log(sum(2.3));
console.log(sum(2.3.9));
console.log(sum());
Copy the code

IIFE

IIFE is an abbreviation, immediate-Invoked Function expression. Call the function expression immediately.

IIFE means that when a function is defined, it is executed immediately.

// Declare the function
function fun() {
	console.log(1);
}
/ / call
fun();
Copy the code

Function name + () call

Error: The parentheses must be written after the function name or function expression to indicate a call

41function fun() {
42	console.log(1); } ();Copy the code

// () can be written directly after a function expression to indicate a call
var fun = function() {
	console.log(1); } ();/ / 1
Copy the code

You can turn mathematical operators such as the function keyword into functional expressions. For example, +, -,! (a)

+function fun1() {
	console.log(1); } ();/ / the brackets
(function fun2() {
	console.log(1); }) ();Copy the code

Usually we actually use an anonymous function written in parentheses and called immediately.

// The actual use of IIFE is to convert anonymous functions into function expressions and then write the call parentheses
(function() {
	console.log(2); }) ();Copy the code

IIFE scope: This function can only be used in IIFE and cannot be accessed externally. (IIFE can also close the scope of variables and functions)

(function fun4(){
	var a = 10;
	console.log(a); }) ();// Variable scope
// console.log(a);
Copy the code

(function fun4(){
	var a = 10;
	console.log(a); }) ();// The scope of the function
fun4();
Copy the code

IIFE, the actual arguments are written in the call parentheses.

(function (a,b){
	console.log(a + b); }) (1.2.43.4);
Copy the code

The IIFE function writes the return inside as a concrete piece of data.

// IIFE can also use return as a concrete value for other calculations
function sum(a,b,c) {
	// a,b is the sum of c
	// select a from b
	return c + (function(){
		returna > b ? a : b; }) (); }/ / call
console.log(sum(1.5.9));
Copy the code

Observe closures with arrays

Closures: Functions have inherent properties that remember the external environment and internal statements in which they were declared.

Array: [], which can hold any data type. Each item in the array is stored in a function that can be numbered internally

var arr = [];
console.log(typeof arr);

for(var i = 0; i <10 ; i ++) {
	// I indicates the array index value
	// arr[i] = i;
	arr[i] = function() {
		return i;
	};
}
console.log(arr);
// Read any item in the array
console.log(arr[3]);
// Function call ()
console.log(arr[3] ());console.log(arr[1] ());Copy the code

Because of closures, any function I is memorized 10.

Functions are inherently closed remember I, remember the internal statement return I, when the function is called I has become 10 so all functions return 10

Solve the problem through IIFE

// Declare an array
var arr = [];
// Write assignments by iterating
for(var i = 0 ; i < 10 ; i ++) {
	// I indicates the index value
	(function(a) {
		// User enters a
		arr[a] = function() {
			return a;
		};
	})(i);
}
console.log(arr);
console.log(arr[1]);
console.log(arr[1] ());console.log(arr[8] ());console.log(i);
Copy the code

DOM

Summary of the DOM

JS is the core part of the language, which is ECMAscript. This is usually done in the console, in the output statement, and JS includes DOM and BOM.

The DOM (Document Object Model) represents a hierarchical tree of nodes that allows developers to add, remove, and modify portions of a page. This allows JavaScript to manipulate HTML, not strings, but nodes, making it much easier to program.

DOM abstracts a lot of things and provides rich apis: fetching elements, CSS styles, events, movements, element dimensions and positions, node operations.

HTML operation

Document: represents the entire document object. Document has a number of methods or attributes that are invoked using dot syntax

Document. title The title of the page

document.title
Copy the code

= indicates assignment

document.title = "HTML operation";
Copy the code

The body object can be obtained by clicking.

document.body
Copy the code

We usually start by getting the element object

getElementById():

Call object: document

Parameter: id name, be careful not to write #

Return value: element object

The ID is unique, and fetching the element object by id cannot change the ID name. (The ID attribute is read-only and cannot be changed)

var oBox = document.getElementById("box");
console.log(oBox);
Copy the code

Properties can be invoked via point syntax

// Use point syntax to read the attribute value of the element.
console.log(oBox.id);
Copy the code

// Get the element object
var oPic = document.getElementById("pic");
// Attribute values can be set using =
oPic.src = "images/xiaoming.png";
Copy the code

InnerHTML reads the inner text of an element

//.innerhtml reads the inner text
console.log(oBox.innerHTML);
oBox.innerHTML = "The box";
Copy the code

Value: Gets the form element text

// Get the element
var oTxt = document.getElementById("txt");
/ / get the value
console.log(oTxt.value);
Copy the code

To get the value of the class attribute, change the name to className

oBox.className
Copy the code

Get element attribute values:

GetAttribute (): You can read the attribute values of the element and the attribute values of the element

Call object: element object

Parameter: Attribute name

Return value: property value

oBox.getAttribute("data-ming")
Copy the code

SetAttribute () : Sets the attribute value

Call object: element object

Parameter: first parameter: attribute name Second parameter attribute value

oBox.setAttribute("data-ming"."hezi");
Copy the code

The difference between point syntax and getAttribute() and setAttribute is as follows: 1. Point syntax can only read and set the inherent attribute value of an element.

// The dot syntax can only read the values of the attributes that come with the Settings
console.log(oBox.dataMing);
Copy the code

// get,setAttribute You can set native or custom attributes
console.log(oBox.getAttribute("id"));
Copy the code

2, the dot syntax may need to change the name of the property value, get,set do not need to change the name

The class to the className

For htmlFor instead

Colspan colspan instead

Rowspan rowspan instead

console.log(oBox.className);
console.log(oBox.getAttribute("class"));
Copy the code

3, The dot syntax reads the style to retrieve the object, returns a collection of all styles.

GetAttribute () reads the style and gets the string.

4. The point of the syntax is that the style object can continue to call other properties

GetAttribute () cannot continue

CSS operation

Element objects can get all the style collection objects through style, and can continue to call the inline style of the attribute name to the element, rather than the computed style.

// Only inline styles can be read, not post-computed styles
console.log(oBox.style.width);
console.log(typeof oBox.style.width);

// Set =, add the property value on the right side of the line, write the same as the CSS property value
oBox.style.color = "# 000";
// Single attributes need to be changed to a hump nomenclature
oBox.style.backgroundColor = "red";
Copy the code

The event

Event monitoring: When our computer parses our JS code, it looks to see if events have been added to certain elements. Listen for these events at any time to see if they are triggered, and perform the corresponding behavior immediately if they are triggered.

Onclick Ondblclick Double-click onMouseEnter enter onMouseleave mouse away onMouseDown mousedown onMouseUp mouseup onFocus get focus onblur lose focus Once the onload is loadedCopy the code

Add event listener method: by adding to an object. Event, assignment is an anonymous function.

This function executes immediately when the event is triggered.

Summary: One more way to execute a function is to bind a function to an event that will execute the function immediately.

The js statement should be written at the end of all tags and executed after the tag has been loaded.

If the js statement is written before the tag, the JS is loaded first, and the HTML tag is not loaded, we can’t get the element.

If the onload event is written, it means that js does not execute the statement inside the event until all tags have been loaded.

The call object is only window.

For example:

window.onload = function() {
// The element uses dot syntax to bind the event name and then assign an anonymous function element with =. Function (){}

	// Get the element object
	var oBtn = document.getElementById("btn");
	var oBtn2 = document.getElementById("btn2");
	var oPic = document.getElementById("pic");
	var oTxt = document.getElementById("txt");
	var oBd = document.getElementById("bd");
	var oBox = document.getElementById("box");


	console.log(oBtn);



	// Click onclick and click BTN to pop up the internal text
	The function executes immediately without adding the call parentheses
	oBtn.onclick = function() {
		// Set uses dot syntax except get for custom attributes
		alert(oBtn.value);
	};
}
Copy the code