https://davidwalsh.name/query-string-javascript
http://fahdshariff.blogspot.com/2018/04/html5-styling-progress-bar.html
http://fahdshariff.blogspot.com/2018/05/html-disabling-form-on-submit.html
HTML: Disabling a Form on Submit
<form action="http://www.google.com" method="post" onsubmit="mybutton.disabled=true;mybutton.innerHTML='PROCESSING...';myprogress.style.display='block';return true;"> <button name="mybutton" type="submit">SUBMIT</button> <progress id="myprogress" style="display:none"></progress> </form>
https://github.com/angular/angular.js/issues/2010
By default AngularJS will trim input's content before binding it to the model. Starting from
https://stackoverflow.com/questions/41678677/avoid-filtering-of-datalist-items-in-an-input-element
http://www.w3schools.com/jsref/jsref_gettimezoneoffset.asp
http://juristr.com/blog/2014/10/static-code-analyis-for-free/
Sorting an array of objects
async vs defer attributes
<script>
The HTML file will be parsed until the script file is hit, at that point parsing will stop and a request will be made to fetch the file (if it’s external). The script will then be executed before parsing is resumed.
<script async>
async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.
<script defer>
defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guarenteed to execute in the order that they appear in the document.
When should I use what?#
Typically you want to use async where possible, then defer then no attribute. Here are some general rules to follow:
If the script is modular and does not rely on any scripts then use async.
If the script relies upon or is relied upon by another script then use defer.
If the script is small and is relied upon by an async script then use an inline script with no attributes placed above the async scripts.
http://www.geeksforgeeks.org/understanding-variable-scopes-in-javascript/
What if we want to access the global variable instead of local one here. Well, the window object comes to our rescue. All the global variables are attached to window object and thus we can access the global variable name
The if block does not create a new scope in JavaScript. Only a new function creates a new scope. Always remember, JavaScript has function scope and not block scope.
http://www.xul.fr/javascript/associative.php
employees.sort(function(a, b){
return a.age-b.age
})
employees.sort(function(a, b){
var nameA=a.name.toLowerCase(), nameB=b.name.toLowerCase()
if (nameA < nameB) //sort string ascending
return -1
if (nameA > nameB)
return 1
return 0 //default return value (no sorting)
})
http://stackoverflow.com/questions/17019299/javascript-array-returns-length-as-0-always-even-there-are-elements-in-it
http://www.gbtags.com/gb/share/10058.htm
http://luopq.com/2016/02/14/js-with-keyword/
// Assuming "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
URLSearchParams also provides familiar Object methods like keys(), values(), and entries():var keys = urlParams.keys(); for(key of keys) { console.log(key); } // post // action var entries = urlParams.entries(); for(pair of entries) { console.log(pair[0], pair[1]); }
The
progress tag introduced in HTML5 can be used to represent the progress of a task.<progress value="80" max="100"></progress> |
http://fahdshariff.blogspot.com/2018/05/html-disabling-form-on-submit.html
HTML: Disabling a Form on Submit
<form action="http://www.google.com" method="post" onsubmit="mybutton.disabled=true;mybutton.innerHTML='PROCESSING...';myprogress.style.display='block';return true;"> <button name="mybutton" type="submit">SUBMIT</button> <progress id="myprogress" style="display:none"></progress> </form>
https://github.com/angular/angular.js/issues/2010
By default AngularJS will trim input's content before binding it to the model. Starting from
1.1.1(https://github.com/angular/angular.js/blob/master/CHANGELOG.md#111-pathological-kerning-2012-11-26) you can opt-out from this default trimming by using the ng-trim="false" attributehttps://stackoverflow.com/questions/41678677/avoid-filtering-of-datalist-items-in-an-input-element
If the user input does not matter I do not see the point of using the
https://www.w3schools.com/howto/howto_js_filter_lists.aspdatalist element.http://www.w3schools.com/jsref/jsref_gettimezoneoffset.asp
The getTimezoneOffset() method returns the time difference between UTC time and local time, in minutes.
For example, If your time zone is GMT+2, -120 will be returned.
My server is GMT-6 --> new Date().getTimezoneOffset() = 360.
myTZO = 360;
myNewDate=new Date(myOldDateObj.getTime() + (60000*(myOldDateObj.getTimezoneOffset()-myTZO)));
alert(myNewDate);http://juristr.com/blog/2014/10/static-code-analyis-for-free/
Plato gives you static JavaScript analysis and reporting for free. It is as simple as installing it from npm
http://www.pixelstech.net/article/1302711937-5-Reasons-Your-Javascript-StinksYou're not using a namespace.
var foospace={}; foospace.derp=function() { alert("one"); } function derp() { alert("two"); } foospace.derp();2. You're a magician, creating variables out of thin air.
3. You don't understand variable scope in Javascript.
var herp="one"; { var herp="two"; } alert(herp);
The value of herp in this case is not one, it's two. Javascript variable scope is not dependent on blocks like other languages. Javascript variable scope is function based. Each function has its own scope, Javascript is far too cool to concern its self with meaningless curly braces. In fact, Javascript is so cool that it will let you pass scope around like any other namespace or variable.
4. You think Javascript OOP is a tack on.
Javascript objects are defined as functions, and even functions themselves are objects. Javascript has a property named prototype inherent in all objects that lets you mutate the structure of objects and decorate them with more variables and functionality.
var derp; // will hold a Herp instance var Herp= function() { this.opinion="Javascript is cooler than BASIC."; } Herp.prototype.speak=function() { alert(this.opinion); } var derp= new Herp(); derp.speak();
5. You're using the new keyword like a blind guy with a cross bow.
With the exception of instantiating objects, and some rare cases where you need lazy data loading, you probably shouldn't be using the new keyword. Allocating lots of new variables is slow in Javascript, and you'll always get better performance using object literals.
var rightway= [1, 2, 3]; var wrongway= new Array(1, 2, 3);
Remember all that talk about Javascript scope being function based? Remember someone mentioning that Javascript objects are defined as functions? Not using the new keyword when instantiating an object will blow your mind as it sets the scope of the object to the global namespace. It's good habit to always instantiate objects with new.
http://stackoverflow.com/questions/3010840/loop-through-array-in-javascript
Use a sequential
for loop:var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
alert(myStringArray[i]);
//Do something
}
@zipcodeman suggests the use of the
for...in statement, but for iterating arrays for-in should be avoided, that statement is meant to enumerate object properties.
It shouldn't be used for array-like objects because:
- The order of iteration is not guaranteed, the array indexes may not be visited in numeric order.
- Inherited properties are also enumerated.
The second point is that it can give you a lot of problems, for example, if you extend the
Array.prototype object to include a method there, that property will be also enumerated.
For example:
Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];
for (var i in array) {
alert(array[i]);
}
The above code will alert, "a", "b", "c" and "foo!".
That be particularly a problem if you use some library that relies heavily on native prototypes augmention (such as MooTools for example).
http://www.javascriptkit.com/javatutors/arraysort2.shtmlSorting an array of objects
employees.sort(function(a, b){
return a.age-b.age
})
return a.age-b.age
})
employees.sort(function(a, b){
var nameA=a.name.toLowerCase(), nameB=b.name.toLowerCase()
if (nameA < nameB) //sort string ascending
return -1
if (nameA > nameB)
return 1
return 0 //default return value (no sorting)
})
var nameA=a.name.toLowerCase(), nameB=b.name.toLowerCase()
if (nameA < nameB) //sort string ascending
return -1
if (nameA > nameB)
return 1
return 0 //default return value (no sorting)
})
async vs defer attributes
<script>
The HTML file will be parsed until the script file is hit, at that point parsing will stop and a request will be made to fetch the file (if it’s external). The script will then be executed before parsing is resumed.
<script async>
async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.
<script defer>
defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guarenteed to execute in the order that they appear in the document.
When should I use what?#
Typically you want to use async where possible, then defer then no attribute. Here are some general rules to follow:
If the script is modular and does not rely on any scripts then use async.
If the script relies upon or is relied upon by another script then use defer.
If the script is small and is relied upon by an async script then use an inline script with no attributes placed above the async scripts.
http://www.geeksforgeeks.org/understanding-variable-scopes-in-javascript/
In JavaScript, there are two types of scopes
- Global Scope – Scope outside the outermost function attached to Window
- Local Scope – Inside the function being executed
What if we want to access the global variable instead of local one here. Well, the window object comes to our rescue. All the global variables are attached to window object and thus we can access the global variable name
The if block does not create a new scope in JavaScript. Only a new function creates a new scope. Always remember, JavaScript has function scope and not block scope.
http://www.xul.fr/javascript/associative.php
var a2 = { "a":1, "b":2, "c":3 }
document.write("Size=" + Object.keys(a2).lengthemployees.sort(function(a, b){
return a.age-b.age
})
employees.sort(function(a, b){
var nameA=a.name.toLowerCase(), nameB=b.name.toLowerCase()
if (nameA < nameB) //sort string ascending
return -1
if (nameA > nameB)
return 1
return 0 //default return value (no sorting)
})
http://stackoverflow.com/questions/17019299/javascript-array-returns-length-as-0-always-even-there-are-elements-in-it
The reported length is correct, because the array is empty.
When you use a string (that doesn't represent a number) with the bracket syntax, you are not putting items in the array, you are putting properties in the array object.
http://stackoverflow.com/questions/27509/detecting-an-undefined-object-propertyif (typeof something === "undefined") {
alert("something is undefined");
}
If an object variable which have some properties you can use same thing like this:
if (typeof my_obj.someproperties === "undefined"){
console.log('the property is not available...'); // print into console
}
注意: NaN,null和undefined永远不=== 其他类型. NaN 甚至不等于(===)它自己.
== 不会检查类型, === 会检测比较的两方是否类型相同. 因此, == 比较也是可以的. 但是在JS引擎下它们将转换为相同的类型进行比较.
=== 比较类型和值.因此,加入两边类型不同,答案永远是false
http://luopq.com/2016/02/14/js-with-keyword/
with语句的作用是将代码的作用域设置到一个特定的作用域中，基本语法如下
1
| with (expression) statement;
|
使用with关键字的目的是为了简化多次编写访问同一对象的工作，比如下面的例子：
1 2 3 | var qs = location.search.substring(1); var hostName = location.hostname; var url = location.href; |
这几行代码都是访问location对象中的属性，如果使用with关键字的话，可以简化代码如下：
with (location){ var qs = search.substring(1); var hostName = hostname; var url = href; }
在这段代码中，使用了with语句关联了location对象，这就以为着在with代码块内部，每个变量首先被认为是一个局部变量，如果局部变量与location对象的某个属性同名，则这个局部变量会指向location对象属性。
注意：在严格模式下不能使用with语句。
注意：在严格模式下不能使用with语句。
with关键字的弊端
前面的基本说明中，我们可以看到with的作用之一是简化代码。但是为什么不推荐使用呢？下面我们来说说with的缺点：
1、性能问题
2、语义不明，调试困难
1、性能问题
2、语义不明，调试困难
真正的原因是：使用了with关键字后，JS引擎对这段代码进行优化。
JS引擎在代码之前之前有一个编译阶段，在不使用with关键字的时候，js引擎知道a是obj上的一个属性，它就可以静态分析代码来增强标识符的解析，从而优化了代码，因此代码执行的效率就提高了。使用了with关键字后，js引擎无法分辨出a变量是局部变量还是obj的一个属性，因此，js引擎在遇到with关键字后，它就会对这段代码放弃优化，所以执行效率就降低了。
使用with关键字对性能的影响还有一点就是js压缩工具，它无法对这段代码进行压缩，这也是影响性能的一个因素。
JS引擎在代码之前之前有一个编译阶段，在不使用with关键字的时候，js引擎知道a是obj上的一个属性，它就可以静态分析代码来增强标识符的解析，从而优化了代码，因此代码执行的效率就提高了。使用了with关键字后，js引擎无法分辨出a变量是局部变量还是obj的一个属性，因此，js引擎在遇到with关键字后，它就会对这段代码放弃优化，所以执行效率就降低了。
使用with关键字对性能的影响还有一点就是js压缩工具，它无法对这段代码进行压缩，这也是影响性能的一个因素。
