About js
We know full js includes three aspects ECMAScript, DOM (Document Object Model), BOM (Browser Object Model).
ECMAScript defines the basis prophecy has nothing to do with the host, such as: grammar (includes regular grammar), the type of statements, keywords, reserved words, operators, Object
DOM is for HTML (XML-based but after expansion) of api. Lord integral part of the main DOM Core (mapping based on the document structure of XML), DOM HTML (expand DOM Core, increased for HTML objects and methods), DOM view (track different view of the document interface), DOM events, DOM style ( based css style applied to the interface element), DOM traversal and scope, DOM load and save, DOM verification
BOM is api access and manipulate the browser window. Generally for js expand the browser are considered part of the BOM, such as: a new pop-up window, close the window function, access the browser attributes. Is the typical window object, navigator objects, location object. Where the window object is rather special, he promptly core BOM, and also js global object.
About variables
1. Do not modify the recommended type variable stored value
2. operator variable var local variables defined in the variable scope. Var defined variables rather than global variables. Such as
function a(){ var t = 1; } function b(){ m = 2; } a(); Alert (T); // error B (); alert(m)//2
However recommended var or es6 grammar let / const define variables and define global variables local scope is difficult to maintain.
3. Comparison of non-object variable using the "===", so are less likely to convert. Use "==", and if a character string which, may involve comparing the digital converted into digital or string.
4.undefined indicates unassigned variables, null is represented by a null object pointer. Use "==" both more likely to be true, undefined derived to null, when comparing converted from the operands. To save the object to the variable assignment of future null is a good practice, but also to further distinguish between null and undefined.
5. When performing arithmetic calculations, all of octal and hexadecimal are converted to decimal calculation, the result is a decimal.
6.es5 not block-level scope, such as
IF (1 ) { where tt = 1 ; } alert(tt);//1
es6 added block-level scope using let / const defined.
7. A direct variable in a scope (including general functions and variables) will be the first statement when parsing the scope, such as
function m(){alert(a); var a = 2;} m (); // "undefind", a variable declaration to the beginning (but need to be performed by the assignment order of the code assigned to respective positions only) when the function m parsing function S () {Alert (a); IF (. 1) { var A = 2 ;}} S (); // "undefined", refer to item 6. function n-() {Alert (B);} the n-(); // browser error, not declared variable b
8. strongly recommended not to instantiate the data type, in particular substantially corresponding to the type of the object instance;
var T = new new Number The ( '. 1'); // not recommended typeof T; // "Object" var m = Number The ( '. 1'); // recommended typeof m; // "Number" var Q =. 1 ; // If the variable value is defined directly, no need to use superfluous Number typeof Q; // "Number"
NaN
The results have any involvement NaN is NaN; NaN with any value not equal, including his own.
valueOf和toString
JS data types have valueOf and toString these two methods.
valueOf Returns the specified object's original value. For the number / string / boolean / object / array / function Needless to say, it is the return of its own. date type return to their time value in milliseconds.
toString specified element into a string. But where the Date / Array / Object / Function somewhat different.
There num = 1 , str = 'sour' , It was = true . Fun = function () {Alert (. 1 )}, // und = undefined, NUL = null, // these two properties without toString and valueOf obj = {}, arr = [1,2,3], that = new Date (); dat.toString();//"Thu Jul 21 2016 20:37:34 GMT+0800 (中国标准时间)" arr.toString();//"1,2,3" obj.toString();//"[object Object]" fun.toString();//"function (){alert(1)}" bol.toString();//"true"
Of course, somewhat different objects, such as new Number (1); the same result new Boolean (1), these special objects using toString obtained results and 1 / '1' / true use of toString; new String (1)
And operators operator + -
Special attention is required: the number string will be converted to digital sum string concatenation; digital subtraction string, then the string is converted into a digital subtraction;
Comparison Operators
Compare two character strings corresponding to positions corresponding to the coding size comparison operator when comparing strings. So any capital letters is always less than a lowercase letter.
So in order to get the result ( "B"> "a") then you need to be both converted to lowercase we want.
Note also that the "123"> "23" result is false, because the two strings are compared to the corresponding character position is obtained such a result. If any one is digital it would not be a problem
"A" <3 returns false, because "a" converted NaN; "a"> = 3 also returns false
"==" comparison is conversion type, "===" does not convert type. Object comparison "==" returns true need is a reference to the same object will
About delete
Modern browsers (IE9 +) global variables can not be deleted, you can delete the global properties
The rendering process on page load
Whether css or js are downloaded in parallel, we see chrome can understand the network time (time overlap)
Information: page load history Detailed http://www.educity.cn/wenda/143254.html
Gets the window object of the iframe
<body> <iframe id="frame1" name="frame2" class="frame1" frameborder="0" scrolling="no" width="500px" height="500px" src="v_components.html"></iframe> <iframe id="frame2" name="frame3" class="frame2" frameborder="0" scrolling="no" width="400px" height="400px" src="v_components.html"></iframe> </body>
1. css query nodes: $ ( '# frame1') [0] .contentWindow; $ ( '# frame2') [0] .contentWindow;
2. window.frames [0]
Location.hash anchor part of the page
hash property is a readable and writable string that is the URL anchor portion (a portion from the start number #).
# Represents a position of a Web page, such as
http://www.cnblogs.com/chuaWeb/p/gulp.html#!comments
On behalf of the page! Comments location. After the browser reads this URL, will automatically scroll to the label name = "! Comments" or id = "! Comments" position .
Just change the part after the #, the browser will scroll to the appropriate location, will not reload the page . Such as
HTTP: // www.cnblogs.com/chuaWeb/p/gulp.html#blog-comments-placeholder // modify HTTP: // www.cnblogs.com/chuaWeb/p/gulp.html#!comments
Url change properties such as location. (Href / hash / search / host / hostname / port / pathname) will be changed according to the new value url
# Change will change the browser access history
Google also specified , if you want to browse Ajax engine-generated content is read, the URL can be used "#!", Google will automatically transfer the contents of its back to the value of the query string _escaped_fragment_.
For example, Google found a new version of twitter URL is as follows:
http://twitter.com/#!/username
Equivalent to
http://twitter.com/?_escaped_fragment_=/username
Through this mechanism, Google can index dynamic Ajax content.
location.replace (url) method replaces the current url, but no browsing history (before the user can not return to a page of)
setTimeout/setInterval
Please do not give the first parameter of these two functions pass a string, this will lead to loss of performance, the transfer function best.
The code delay calls are executed in the global scope, so the function of this in a non-strict mode means that the next window , in strict mode is undefined.
Use delay calls to simulate intermittent call (the setInterval) is a preferred embodiment because a previous batch queued call when the call (because the front there is a need to consume a lot of time is calculated End has not been performed) after a call has entered intermittently call queuing, the result is two intermittent calls continuously.
alert/comfirm/prompt
Browser dialog box are executed synchronously, which means that the pop-up dialog box when the code stops executing, close dialog code execution resumes.
innerHTML
innerHTML to insert script node will not be implemented (IE8- is the only script to run inside a browser, and must meet defer attribute must be specified for the <script> element and the <script> element must be located (Microsoft's so-called) "There scope elements "(scoped element) later.)
document.getElementById('form').innerHTML = '<script defer="defer" >alert(1)</script>';
innerHTML insert style browser node IE9 + will work but which does not work in the IE8-
label
label statement can add tags in the code for future use. Typically used with for multilayer loop out ( Caution: Avoid excessive cyclical layer)
There num = 0 ; start: for (var i = 0 ; i < 10 ; i++){ for (var j = 0 ; j < 10 ; j++){ if( i == 5 && j == 5 ){ break start; } a ++ ; } } Alert (NUM); // cycle i is 5, when J is a two-cycle out of 5, returns to continue outPoint layer, 55 output
Avoid using switch [reference] strict mode
Compared to many other languages he flexible rear case can be an expression, value as long as the value of the expression can be passed and switch the congruent will enter this branch
var num = 25; switch(true){ case num == '25': alert(0); break; case num < 25: alert(1); break; detault: alert(2); }
Obviously, ture and num == '25' value congruent, the pop-up "0"
arguments
Function arguments can obtain parameters, change the values of the arguments (sync to the corresponding transmission parameters)
function a(tt,mm){arguments[1] = 10;alert(mm)} A ( . 1); // 'undefined', because there is no second parameter A (1,2); // 10, the second parameter is modified, the synchronization mm
js parameters are passed by value, the case can not pass a reference value. Objects can be seen as a reference type, only one copy of the same object data space, if you pass the object, then modify the object inside the function actually changed this unique piece of data space
var a = {name: 'chua'} function tt(b){ b.name = 'yyqing'; alert(a.name); } tt (a); // 'yyqing', only a copy of the object space, and a function b tt pointing in a same space
function a(){}; a.tname = 'chua'; function tt(c){ c.tname = 'yyqing'; alert(a.tname); } tt (a); // 'yyqing', only a copy of the object space, and a function b tt pointing in a same space
arguments.callee and function.caller Avoid Using reference strict mode]
function a(){
alert(arguments.callee);
}
a();/*function a(){
alert(arguments.callee);
}*/
function a(){
b();
}
function b(){
alert(b.caller);
}
a();/*function a(){
b();
}
*/
Array
length property of the array is not read-only attribute, the assignment may be to add or reduce the length of the array length property.
sort array sort method, receives a comparison function, if the first entry in the previous second term, the negative number; behind the second term of the first term, returns a positive number;
var tar = [1,8,2,4,10]; function compare(v1,v2){ if(v1 < v2){ return -1; }else if(v1 > v2){ return 1; }else{ return 0; } } tar.sort(compare); //[1, 2, 4, 8, 10]
concat method
was cor = [1,2,3 ]; cor.concat(4,[5,6]);//[1, 2, 3, 4, 5, 6] cor.concat(4,[[5,6]]);//[1, 2, 3, 4, Array[2]]
5 array traversal methods every / filter / forEach / map / some
reduceRight reduce the array and iterate over all the items, and then build a final return value
this
This is the outermost layer of the window object, this function is to call that object scope of the function (or scope)
var t = 1; function a(){ this.m = 2; alert(this.t); } a();//1 alert(m);//2;
As above, a part of window functions, so in this refers to a window object.
var v = { o: function(){ this.p = 2; alert(this.p); } } in (); // 2 alert (vp); // 2
The above example of a function o this refers to an object v.
Arrows point to this function when this function is defined.
Function.prototype.bind
Role is to create a function instance and use this parameter as this instance.
function a(){ alert(this.b); } There are t = {b 1 }; There c = a.bind (t); c();
This and other than self preservation this more professional
was myObj = { tname: 'sour' , getAsyncData: function(fn){ fn(); }, render: function () { var self = this; this.getAsyncData(function () { console.log(self.tname); }); } }; myObj.render();//'chua'
You can change
was myObj = { tname: 'sour' , getAsyncData: function(fn){ fn(); }, render: function () { this.getAsyncData(function () { console.log(this.tname); }.bind(this)); } }; myObj.render();//'chua'
However, note that, IE9 + only supports this method.
document dowload
Under normal circumstances, the use of
<a href='xxx.png'>download</a>
Click the tab under normal circumstances is to show the picture, rather than the pop-up prompts to download. Attachments can be downloaded through the background to set the protocol Content-Disposition header as attachment to force property as a resource.
Read and set the text cursor location field
/** * To obtain a cursor position compatible IE / FF * Example: var obj = document.getElementById("tx1"); where pos = getCaretPosition (obj); alert("--"+pos); */ function getCaretPosition(obj) { var result = 0; if (obj.selectionStart) { //IE以外 result = obj.selectionStart; } else { //IE try{ var rng; if (obj.tagName == "textarea") { //TEXTAREA rng = event.srcElement.createTextRange(); rng.moveToPoint(event.x, event.y); } else { //Text rng = document.selection.createRange(); } rng.moveStart("character", -event.srcElement.value.length); result = rng.text.length; }catch (e){ throw new Error(10,"asdasdasd") } } return result; } /** * Set the cursor position compatible IE / FF * @Param TObj * @param sPos * Example: var obj =document.getElementById("tx1"); var sPos = obj.value.length-1; setCaretPosition(obj, sPos); */ function setCaretPosition(tObj, sPos){ if(tObj && sPos){ if(tObj.setSelectionRange){ setTimeout(function(){ tObj.setSelectionRange(sPos, sPos); tObj.focus(); }, 0); }else if(tObj.createTextRange){ var rng = tObj.createTextRange(); rng.move('character', sPos); rng.select(); } } }
JSON
JSON object attributes will be ignored cases functions, such as
There obj = { fn: function(){}, name: 'chua' }; JSON.stringify(obj);//"{"name":"chua"}"
=======================================================
postscript:
2019.12.20 notes before finishing mostly long, long time, mainly related to es5, the subsequent opening of es6