| Both sides previous revision Previous revision Next revision | Previous revision |
| lwc:programming:javascript [2020/11/27 20:13] – John Harrison | lwc:programming:javascript [2025/03/18 13:58] (current) – John Harrison |
|---|
| |
| | |
| | find all elements ids with class "buttonClass"| var elements = document.getElementsByClassName("buttonClass");\\ for (var i = 0, len = elements.length; i < len; i++) {\\ \\ console.log(elements[i].id);\\ \\ }\\ \\ \\| | | find all elements ids with class "buttonClass"| var elements = document.getElementsByClassName("buttonClass");\\ for (var i = 0, len = elements.length; i < len; i++) {\\ \\ console.log(elements[i].id);\\ \\ }| |
| | callback function when mouse leaves button_8 | $( document ).on( "vmouseout", "#button_8", function(){ | | | callback function when mouse leaves button_8 | $( document ).on( "vmouseout", "#button_8", function(){ | |
| | set style of myPath2 | document.getElementById("myPath2").setAttribute('style',"animation:fade 500ms infinite; -webkit-animation:fade 500ms infinite;"); | | | set style of myPath2 | document.getElementById("myPath2").setAttribute('style',"animation:fade 500ms infinite; -webkit-animation:fade 500ms infinite;"); | |
| | get caller of function | alert("caller is " + arguments.callee.caller.toString()); | | | get caller of function | alert("caller is " + arguments.callee.caller.toString()); | |
| | find all methods of an object | var methods = []; for (var m in obj) { if (typeof obj[m] == "function") { methods.push(m); } } alert(methods.join(",")); | | | find all methods of an object | var methods = []; for (var m in obj) { if (typeof obj[m] == "function") { methods.push(m); } } alert(methods.join(",")); | |
| | loop through a set of values | [1,2,3,4].map(function(item) {\\ <code>\\ alert(item);\\ })\\ </code> | | | loop through a set of values | [1,2,3,4].map(function(item) { <code> alert(item); }) </code> | |
| |
| |
| |
| * you can call Garbage Collection yourself in Chrome by [[https://www.mail-archive.com/crosswalk-help@lists.crosswalk-project.org/msg00282.html|using flags]]. Also note [[https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/flag-definitions.h|this]] and [[http://create.tpsitulsa.com/wiki/V8/Garbage_Collection|this]] | * you can call Garbage Collection yourself in Chrome by [[https://www.mail-archive.com/crosswalk-help@lists.crosswalk-project.org/msg00282.html|using flags]]. Also note [[https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/flag-definitions.h|this]] and [[http://create.tpsitulsa.com/wiki/V8/Garbage_Collection|this]] |
| | |
| | ==== Console Fun ==== |
| | * to see all the event messages flying around: ''monitorEvents(window);'' |
| | * then to unsee: ''unmonitorEvents(window);'' |
| | |
| | ==== Promises ==== |
| | Promises are always async and often used to prevent UI blocking when waiting for something like an I/O interface. If a function has a ''.then'' then it is definitely calling a promise (or a "thenable" object but yeah that doesn't happen) |
| | === Creating the promise (producing) === |
| | <code> |
| | myPromise = Promise(success, failure) { |
| | // do something that takes some time here |
| | if (succeeded) { |
| | success() { // what to return on success i.e. "3" or "hello"}; // this is not a function. It's just a return value |
| | else |
| | failure() { // what to return on failure }; // this is not a function but only a return value |
| | } |
| | </code> |
| | === Calling or running the promise (consuming) === |
| | == Using .then(onFulfilled, onRejected) == |
| | //this is the less preferred method// |
| | <code> |
| | myPromise.then( |
| | successFunction(value) { // do stuff here with value which was returned by 'success' above } |
| | failFunction(value) { // do stuff here with value returned by 'failure' above }) |
| | </code> |
| | == Using .catch == |
| | // this is best practice in general // |
| | <code> |
| | myPromise.then( |
| | successFunction(value) { // do stuff here with value returned by 'success' when declaring promise }) |
| | .catch(failFunction(value) { // do stuff here with value returned by 'failure' above. also called if an error in successFunction }) |
| | </code> |
| | ==== Arrow Notation ==== |
| | ^ Category ^ Old Skool ^ Arrow Function ^ |
| | | No Parameter | function fred() = {} | () => {} | |
| | | One Parameter | function fred(a) = {} | (a) => {} or a => {} (parens are optional when only 1 argument)| |
| | | Two Parameters | function fred(a,b) = {} | (a,b) => {} | |