Javascript #19
Labels
Comments
Design PatternsLinks
Functional instantiationFunctional instantiation is at the root of object instantiation in JavaScript. We create a function, and inside it, we can create an empty object, some scoped variables, some instance variables, and some instance methods. At the end of it all, we can return that instance, so that every time the function is called, we have access to those methods. // Set up
var Func = function () {
var someInstance = {}, a = 0, b = 1;
someInstance.method1 = function () {
// code for method1 here
}
someInstance.method2 = function () {
// code for method2 here
}
someInstance.logA = function () {
return a;
}
return someInstance;
}
// Usage
var myFunc = Func();
myFunc.logA(); // returns aPros: This pattern is the easiest to follow, as everything exists inside the function. It's instantly obvious that those methods and variables belong to that function. Cons: This pattern creates a new set of functions in memory for each instance of the function Func. If you're creating a big app, it's ultimately just not suitable in terms of memory. Rewritten: // Set up
var Func = function () {
var a = 0, b = 1;
function method1 () {
// code for method1 here
}
function method2 () {
// code for method2 here
}
function logA () {
return a;
}
return {
logA: logA
};
} |
Fetch & JSONfunction dataHandler (r) {
// Unauthorized or bad credential
if (response.status === 401) {
localStorage.removeItem('fnp');
logged = false;
console.log('401: unlogged');
}
// json parse
return response.json();
}
// Error callback
function errore (e) {
console.log('error: ' + e);
}
function serveLoginForm (event) {
event.preventDefault();
var token = document.getElementById('token_field');
return (token.value.length !== 40) ? false : fetch('https://api.github.com/user', {
headers: { Authorization: 'token ' + token.value}
}).then(dataHandler);
}Stack overflow AJAXSending and Receiving JSON Data via POST Fetch request promises initially return Response objects. These will provide response header information, but they don't directly include the response body, which may not have even loaded yet. Methods on the Response object such as .json() can be used to wait for the response body to load, then parse it. const requestData = {
method: 'getUsers'
};
const usersPromise = fetch('/api', {
method: 'POST',
body: JSON.stringify(requestData)
}).then(response => response.json()).then(responseData => {
if (!response.ok) {
throw new Error("Got non-2XX response from API server.");
}
return responseData.users;
});
usersPromise.then(users => {
console.log("Known users: ", users);
}, error => {
console.error("Failed to fetch users due to error: ", error);
});Stack overflow JSONParsing with a reviver function A reviver function can be used to filter or transform the value being parsed. var json = '[{"name":"John","score":51},{"name":"Jack","score":17}]';
var data = JSON.parse(json, function reviver(key, value) {
if (key === 'name' && typeof value === 'string') {
return value.toUpperCase();
} else {
return value;
}
}); |
WorkersLinks
Caveats
Workers cannot
Error handling var worker = new Worker('worker.js');
worker.onmessage = function (event) {
// event handling
};
worker.onerror = function (event) {
// event.hasOwnProperty('filename') always false
var result = ('filename' in evt) ? {evt.lineno, evt.message, evt.filename} : 'no file';
};Post arrays // main.js
if (window.Worker) {
var myWorker = new Worker("worker.js");
first.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}
}// worker.js
onmessage = function(e) {
console.log('Message received from main script');
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
console.log('Posting message back to main script');
postMessage(workerResult);
} |
Inject scripts var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '52ebefa5de2e264d93002020');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();var loc = window.location,
repoOwner = loc.host.split('.')[0],
repoName = loc.pathname.split('/')[1],
rawGit = 'https://rawgit.com', // cdn.rawgit for production
scriptElement = document.createElement('script');
scriptElement.src = (window.location.hostname === '127.0.0.1') ? '/js/loader.js' :
[rawGit , repoOwner, repoName, 'master', 'js', 'loader.js'].join('/');
document.body.classList.add('request');
document.getElementsByTagName('head')[0].appendChild(scriptElement); |
ArraysCheck if is array class SpecialArray extends Array {};
const specialArray = new SpecialArray();
console.log(specialArray.constructor === Array); // false
console.log(specialArray.constructor === SpecialArray); // true
console.log(specialArray instanceof Array); // true
console.log(specialArray instanceof SpecialArray); // true
const noProtoArray = [];
Object.setPrototypeOf(noProtoArray, null);
console.log(noProtoArray instanceof Array); // false
console.log(Array.isArray(noProtoArray)); // trueGet a random item from an array var randomItem = items[Math.floor(Math.random() * items.length)];Truncate an array using length myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].Use logical AND/ OR for conditions foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();Operators
Sorting arraysSort alphabetically var sortable=['ff','eg','a','z','eh']
sortable.sort(function(a, b) {
return a < b ? -1 : a > b ? 1 : 0;
});
// ["a", "eg", "eh", "ff", "z"]
[
{
"player_name": "[UJE]Niek",
"last_seen": "12h"
},
{
"player_name": "[UJE]DriVEze",
"last_seen": "4d"
}
]// FINAL AT https://pastebin.com/raw/AyyW5fCR
var request = new XMLHttpRequest();
request.open("GET", "players.json", false);
request.send(null);
var r = JSON.parse(request.responseText);
r.sort(function(a,b){
var awhat = a.last_seen.split(/\*?([a-z])$/); // any characters and capture the final letter
var bwhat = b.last_seen.split(/\*?([a-z])$/);
if(awhat[1] === "d" && bwhat[1] === "h") return 1;
if(awhat[1] === "h" && bwhat[1] === "d") return -1;
return Number(awhat[0]) - Number(bwhat[0]);
});
// Populate <main>
r.forEach(function(e,i){
document.querySelector('main').innerHTML += (i+1)+","+e.player_name+","+e.last_seen+"<br>";
});Combining JavaScript Arraysa; // [1,2,3,4,5,6,7,8,9]
b; // ["foo","bar","baz","bam","bun","fun"]
// `b` onto `a`:
a.push.apply( a, b );
// `a` into `b`:
b.unshift.apply( b, a );Example: append tile to board var board = [1,3];
var tile = ['a','b'];
var newLength = board.push.apply(board, tile);
console.log(newLength, board); // 4, [1, 3, "a", "b"] |
Template<script id="hello" type="text/template">
Hello world
</script>
<script>
alert($('#hello').html());
</script>Create & Fill var t = document.createElement('article');
t.innerHTML = '<header><h1></h1><h2></h2><p></p></header><div><ul></ul></div>';Style & Append t.querySelector('h2').innerHTML = 'titolo';
document.body.appendChild(t);
|
Append and InsertPrototype: Append an element or an array of elements to an element. Element.prototype.ac = function (input) {
if (input.constructor === Array) {
for (var i = 0; i < input.length; i++) {
if(input[i]) this.appendChild(input[i]);
}
} else {
this.appendChild(input);
}
return this;
};Prototype: Append Childs Append an array of elements to an element: Element.prototype.appendChilds = function (elementsArray) {
for (var i = 0; i < elementsArray.length; i++) {
if(elementsArray[i]) this.appendChild(elementsArray[i]);
}
return true;
};Append // slow explicit version
document.getElementById("container").innerHTML += "<p>more content</p>";
// Dom building faster than innerHTML
var p = document.createElement("p");
p.appendChild(document.createTextNode("more content");
document.getElementById("container").appendChild(p);InsertFor Internet Explorer 4 MDN element.insertAdjacentHTML(position, text);position can be <!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->Insert before: Insert <tag id="parent">
<!-- newElement inserted here -->
<tag class="reference">
</tag>
<tag class="reference">
</tag>
</tag>var newElement = document.createElement('tag');
var parent = document.getElementById('parent');
var reference = document.querySelectorAll('#parent .reference');
parent.insertBefore(newElement,reference[0]);Insert after an element Where referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);<any>
<other>
<referenceNode>
<!-- <newNode> -->
<other>
</any> |
ElementsClick Event MDN document.getElementById("test").addEventListener("click", function( event ) {
event.preventDefault();
/* event.target.innerHTML = "click count: " + event.detail; */
}, false);Create HTML Element create MDN var link = document.createElement("a");
link.innerHTML = "Inner text"; // oppure
link.appendChild( document.createTextNode("Inner text") );
link.href = "http://google.com";
document.body.appendChild(link);Create with text oneliner document.body.appendChild(
document.createElement('div').appendChild(
document.createTextNode('hello')
).parentNode
);
Attributes document.getElementById("submit").setAttribute("disabled", "true");
document.getElementById("submit").setAttribute("disabled", ""); // no value
document.getElementById("submit").removeAttribute("disabled");Classes // add
element.className += ' bold';
// remove
element.className = element.className.replace(/\b(bold)\b/, '');querySelector
// select parent node
var parent = document.querySelector("div").parentNode;
// select next node
var next = document.querySelector("div").nextSibling;
// select previous node
var previous = document.querySelector("div").previousSibling;
// select first child
var child = document.querySelector("div").children[0];
// select last child
var last = document.querySelector("div").lastElementChild;querySelectorAll document.querySelectorAll("div.note, div.alert");Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. Loop on querySelectorAll // For Demo purposes only (show hover effect on mobile devices)
[].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
} );Nano-library Microscopic but very efficient library for DOM selection. // Build the DOM selection query
function $q( selector, ctx ) {
ctx = ctx || document;
// Return methods for lazy evaluation of the query
return {
// Return array of all matches
all: function() {
var list, ary = [];
list = ctx.querySelectorAll( selector );
for ( var i = 0; i < list.length; i++ ) {
ary[ i ] = list[ i ];
}
return ary;
},
// Return first match
first: function() {
return ctx.querySelector( selector );
},
// Return last match
last: function() {
var list = ctx.querySelectorAll( selector );
return list.length > 0 ? list[ list.length - 1 ] : null;
}
};
}Usage: var query = $q(".foo .bar"); // build the query
query.first() // => first element matching the selector, or null
query.all() // => all elements matching the selector
// Or restrict the query to the descendant of an element:
var query2 = $q(".foo", elem); // elem is a DOM element
query2.first() // => first descendant of elem matching the selector
query2.all() // => all descendants of elem matching the selectorBASIC MANIPULATIONS sitepointEmpty element // Explicit
document.getElementById("container").innerHTML = null;
// Empty with a loop
var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);Remove element var c = document.getElementById("container");
c.parentNode.removeChild(c); |
CSSLink active on menù var perm = document.getElementById('permalink').getAttribute('href');
var listItems = document.querySelectorAll("header nav a");
for (var variable in listItems) {
if (listItems.hasOwnProperty(variable)) {
if( listItems[variable].getAttribute('href') == perm ){
var ele = listItems[variable];
ele.classList.add('live');
}
}
}classList Gist // add class
element.classList.add("bar");
// remove class
element.classList.remove("foo");
// check if has class
element.classList.contains("foo");
// toggle class
element.classList.toggle("active");Set css attribute MDN document.getElementById("element").setAttribute("style", "color: blue");
document.getElementById("element").style.color = "blue";.primo{ color: red; }var sheets = document.styleSheets, // array of stylesheets
first = document.styleSheets[1], // stylesheet
rules = document.styleSheets[1].cssRules; // array of rules
// document.styleSheets[1].cssRules[0].selectorText = ".primo"
// document.styleSheets[1].cssRules[0].cssText = ".primo { color: red; }"
// document.styleSheets[1].deleteRule(0);
// document.styleSheets[1].insertRule( ".primo { color: red; }", 0);Get computed style MDN var style = window.getComputedStyle( document.querySelector( '#id' ) );
console.log( style.getPropertyValue('color') );
// rgb(0, 0, 0)
|
DevToolsRedirect <meta http-equiv="refresh" content="0; url=http://example.com/" />SnippetsMain features
ConsoleCss var style = "color: yellow; font-style: italic; background-color: blue; padding: 2px";
console.log("This is %cMy stylish message", style);Group console.group();
console.log("Level 3");
console.groupEnd();Timer console.time('name');
console.timeEnd('name');
// name: 4799.905msTrace caller console.trace()
// (anonymous function) @ VM337:1Debug The script will stop as soon as it reaches the function you wrapped within Monitor Monitor the arguments passed into a specific function: Benchmark window.benchmark = (count=10) => {
console.log(`Running %c${count} %ctimes ...`, 'font-weight: bold', 'font-weight: normal');
Array(count).fill(0).forEach(x => run())
console.log(`Stateful took ${statefulTotalTime}ms`);
console.log(`Stateless Functional Mounted took ${statelessFunctionalMountedTotalTime}ms %c${Math.round((1-statelessFunctionalMountedTotalTime/statefulTotalTime)*100)}% %c`, 'color:green', 'color:black');
console.log(`Stateless Functional Direct Call took ${statelessFunctionalDirectCallTotalTime}ms %c${Math.round((1-statelessFunctionalDirectCallTotalTime/statefulTotalTime)*100)}% %c`, 'color:green', 'color:black');
console.log(`%c🎉`, 'font-size: 100px')
} |
localStorage
Polyfill gist if (!('localStorage' in window)) {
// if (!Modernizr.localstorage) {
window.localStorage = {
_data : {},
setItem : function(id, val) { return this._data[id] = String(val); },
getItem : function(id) { return this._data.hasOwnProperty(id) ? this._data[id] : undefined; },
removeItem : function(id) { return delete this._data[id]; },
clear : function() { return this._data = {}; }
};
}Example: redirect only first time reddit function openWin() {
var session = sessionStorage.getItem('session');
if (!session) {
sessionStorage.setItem('session', true);
window.open('google.com', '_blank');
}
}Storing Objects in HTML5 localStoragePlain version stackoverflow var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));Prototype version Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
// Usage
var userObject = { userId: 24, name: 'Jack Bauer' };
localStorage.setObject('user', userObject);
userObject = localStorage.getObject('user');
// "{"userId":24,"name":"Jack Bauer"}"Hash version: codepen |
Polyfills
|
Comments/**
* Update a gist.
* @see https://developer.github.com/v3/gists/#edit-a-gist
* @param {Object} gist - the new data for the gist
* @param {Requestable.callback} [cb] - the function that receives the API result
* @return {Promise} - the Promise for the http request
*/
update(gist, cb) {
return this._request('PATCH', `/gists/${this.__id}`, gist, cb);
} |
BookmarkletLinks Google Bookmarklet
javascript: document.location = 'https://www.google.com/search?hl=en&q=' + encodeURIComponent(prompt('Search term')) + ' filetype:' + encodeURIComponent(prompt('Dual')) ;
javascript: document.location = 'https://www.google.com/search?q=cache:' + encodeURIComponent(document.location.hostname + document.location.pathname);
javascript: document.location = 'https://www.google.com/search?hl=en&q=define:' + prompt('Search term') ;
javascript:location='http://translate.google.com/#en/it/' + prompt();
javascript:location='http://translate.google.com/#auto/en/' + prompt();
javascript: document.location = 'https://www.google.com/search?hl=en&q=javascript+' + prompt('Search term') ;
javascript: var host = document.location.hostname.split('.'); if (host.length > 2) { host = host[host.length-2] + '.' + host[host.length-1]; } else { host.join('.'); } document.location = 'https://www.google.com/search?hl=en&q=' + prompt('Search term') + '+site:' + host;Uglify npm install uglify-js@1 -g
uglifyjs ./src/Pull_request_template.js > Pull_request_template.min.jsReplace quotes var filter = function (content) {
return content
.replace(/"/g, "'")
.replace(/\n/g, '');
};Ramda Ramda Bookmarklet Bl.ocks codepen
Gist codepen
//javascript: (function() {})();
// var al = location.href,
var al="https://rawgit.com/serdaradali/11346541/raw/index.htm", vec = al.split(".");
console.info(vec);
if(vec[0]=="https://gist"){
//window.open("https://rawgit." + vec[2] + '/raw/index.html', "_self");
console.warn("https://rawgit." + vec[2] + '/raw/index.html', "_self");
}
if(vec[0]=="https://rawgit"){
//window.open("https://gist.github." + vec[1].slice(0,-10), "_self");
console.warn("https://gist.github." + vec[1].slice(0,-10), "_self");
}javascript:(function(){var al=location.href,vec=al.split(".");if(vec[0]=="https://gist"){window.open("https://rawgit."+vec[2]+'/raw/index.html',"_self");}if(vec[0]=="https://rawgit"){window.open("https://gist.github."+vec[1].slice(0,-10),"_self");}})();GitHub
javascript: (function() {
var al = location.href, vec = al.split(".");
if (vec[1] == 'github') {
var usr = vec[2].split('/');
if (usr[0] == 'io') {
window.open("https://github.com/" + vec[0].substr(7) + '/' + usr[1], "_self");
}
} else {
if (vec[0] == 'https://github') {
var par = vec[1].split('/');
if (par[0] == 'com') {
window.open("http://" + par[1] + ".github.io/" + par[2], "_self");
}
}
}
})();Imgur
javascript: (function() {
var al = encodeURIComponent(document.title), vec = al.split(".");
window.open("http://www.imgur.com/" + vec[0], "_self");
})();Git-Marks Post text selection to https://github.com/petrosh/gitmarks/issues with link and title. javascript: (function(s) {
try {
s = document.selection.createRange().text
} catch (_) {
s = document.getSelection()
}
location.href = "https://github.com/petrosh/gitmarks/issues/new?title=" + encodeURIComponent (document.title) + "&body=[link](" + location + ")" + String.fromCharCode(37) + "0A---" + String.fromCharCode(37) + "0A" + encodeURIComponent(s)
})()javascript:(function(s){try{s=document.selection.createRange().text}catch(_){s=document.getSelection()}location.href="https://github.com/petrosh/gitmarks/issues/new?title="+encodeURIComponent(document.title)+"&body=[link]("+location+")"+String.fromCharCode(37)+"0A---"+String.fromCharCode(37)+"0A"+encodeURIComponent(s)})()Whois CODEPEN //javascript: (function() { ... })();
var crurl;
if( window.location.href == 'data:text/html,chromewebdata' ){
url = document.title.split(" ")[0];
crurl = url.split("/")[2];
}else{
crurl = location.host;
};
window.open('http://who.is/whois/' + crurl);Parse goodreads books for Simulibrosurl: https://www.goodreads.com/book/show/51664643-guardian-outcast document.getElementById('bookTitle').textContent.trim()serie: document.getElementById('bookSeries').textContent.trim().replace(" #",", #")author: document.querySelector('.authorName span[itemprop="name"]').textContent.trim().replace(" "," ")year: document.evaluate("//div[contains(text(),'Published')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML.trim().match('[0-9]{4}')[0]link: location.hrefpublisher: document.evaluate("//div[contains(text(),'Published')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML.trim().match('by (.*?)$')[1]rating: document.querySelector('[itemprop="ratingValue"]').textContent.trim()image URL: document.getElementById('coverImage').srcBookmarklet for Goodreads > Simulibros javascript:image=document.getElementById('coverImage').src;rating=document.querySelector('[itemprop="ratingValue"]').textContent.trim();publisher=document.evaluate("//div[contains(text(),'Published')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML.trim().match('by (.*?)$')[1];year=document.evaluate("//div[contains(text(),'Published')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML.trim().match('[0-9]{4}')[0];link=location.href;serie=document.getElementById('bookSeries').textContent.trim().replace(" #",",%20#");author=document.querySelector('.authorName%20span[itemprop="name"]').textContent.trim().replace("%20%20","%20");title=document.getElementById('bookTitle').textContent.trim();hash="title="+title+"%20"+serie+"&author="+author+"&year="+year+"&link="+link+"&publisher="+publisher+"&rating="+rating+"&image_url="+image;window.location="https://petrosh.github.io/simulibros/add_book?a="+btoa(hash) |
StringsContain if (string.indexOf(substring) > -1) // string contain substringSplit variable with separator jsfiddle var str = "var1/var2/var3#ciao";
var rest = str.substring(0, str.lastIndexOf("#"));
// "var1/var2/var3"
var last = str.substring(str.lastIndexOf("#") + 1, str.length);
// "ciao"Encode HTML characters
var string = 'string with HTML code <a href="#">link</a>';
// document.createTextNode(string) = "string with HTML code <a href="#">link</a>";
// Usage
document.querySelector('body').appendChild(document.createTextNode(string));Unescape HTML css-tricks function htmlDecode(input){
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
// Usage
htmlDecode("<img src='myimage.jpg'>");
// returns "<img src='myimage.jpg'>"CaseCapitalize first letter string.charAt(0).toUpperCase() + string.slice(1);Titlecase function toTitleCase(str) {
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}Multifunction http://www.javascriptkit.com/script/script2/lowercase-online-tool.shtml
// sentenceCase: everything lowercase except the first character and "I"
function sentenceCase(str){
var str = str.toLowerCase().replace(/\si\s/g, ' I ');
str = str.charAt(0).toUpperCase() + str.slice(1);
return str; // What I do, I do for allèòàùé the people in the world!
}
// toTitleCase: first character of each word except common stop words
// reference: https://github.com/gouch/to-title-case
function toTitleCase(str){
var smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|vs?\.?|via)$/i;
var str = str.toLowerCase()
return str.replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g, function(match, index, title){
if (index > 0 && index + match.length !== title.length &&
match.search(smallWords) > -1 && title.charAt(index - 2) !== ":" &&
(title.charAt(index + match.length) !== '-' || title.charAt(index - 1) === '-') &&
title.charAt(index - 1).search(/[^\s-]/) < 0) {
return match.toLowerCase();
}
if (match.substr(1).search(/[A-Z]|\../) > -1) {
return match;
}
return match.charAt(0).toUpperCase() + match.substr(1);
}); // What I Do, I Do for Allèòàùé the People in the World!
};
// CapitalCase: first character of each word
// reference: https://medium.freecodecamp.com/three-ways-to-title-case-a-sentence-in-javascript-676a9175eb27
function CapitalCase(str){
return str.toLowerCase().split(' ').map(function(word) {
return (word.charAt(0).toUpperCase() + word.slice(1));
}).join(' '); // What I Do, I Do For Allèòàùé The People In The World!
}
function lowerCase(str){
return str.toLowerCase(); // what i do, i do for allèòàùé the people in the world!
}
function upperCase(str){
return str.toUpperCase(); // WHAT I DO, I DO FOR ALLÈÒÀÙÉ THE PEOPLE IN THE WORLD!
}Hash from stringSlow function hash(s){
return s.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
}Fast String.prototype.hashCode = function() {
var hash = 0, i, chr;
if (this.length === 0) return hash;
for (i = 0; i < this.length; i++) {
chr = this.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
};
// Usage
JSON.stringify(data).hashCode() |
Time & DatesTimezone
If your time zone is GMT+2, -120 will be returned -1 * new Date().getTimezoneOffset() / 60
// 1Parse Time
|
XHRPlease read this
|
URLsUpdate on special anchor link window.onhashchange = function() {
if (window.location.hash.substring(1,2) === '!') window.location.reload();
};
// http://petrosh.it/domtools/starsystem/#!petrosh/diarissues/14Last fragment var link = "https://github.com/petrosh/snippetrosh/issues/17#issuecomment-184627985"
var fragment = link.substr(link.lastIndexOf('/') + 1); // "17#issuecomment-184627985"window.location // https://github.com/petrosh/snippetrosh/issues/17#issuecomment-184627985
window.location = {
"hash":"#issuecomment-184627985",
"search":"",
"pathname":"/petrosh/snippetrosh/issues/17",
"port":"",
"hostname":"github.com",
"host":"github.com",
"protocol":"https:",
"origin":"https://github.com",
"href":"https://github.com/petrosh/snippetrosh/issues/17#issuecomment-184627985"
}
window.location.pathname.split( '/' ) = ["", "petrosh", "snippetrosh", "issues", "17"];
window.location.hash.substr(1) = "issuecomment-184627985";GitHub URLsReturn repository full name from API function returnFullname (u) {
return RegExp(/https:\/\/api.github.com\/repos\/(.*?)\/issue/).exec(u)[1];
}Repository NWO
function nwo (u) {
// (?:\/.*|$) non capturing group, slash and characters, or end of string
var array = RegExp(/https:\/\/(.*?).github.io\/(.*?)(?:\/.*|$)/).exec(u);
return [array[1],array[2]].join('/');
}
// nwo("https://starsystem.github.io/naledi/") = "starsystem/naledi"URL data var urlSlash = window.location.pathname.split('/'),
urlArray = window.location.host.split('.'),
urlHash = window.location.hash.substring(1),
repoName = urlSlash[1],
repoOwner = urlArray[0],
repoFullname = repoOwner + '/' + repoName,
repoAPI = 'https://api.github.com/repos/' + repoFullname,
repoHome = 'https://' + repoOwner + '.github.io/' + repoName,
rawStatic = 'https://rawgit.com/' + repoFullname,
rawCdn = 'https://cdn.rawgit.com/' + repoFullname;paradox http://codepen.io/Petrosh/pen/mPOVwX Parse Hash
|
BoilerplatesHTML<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Page title</title>
<link rel="stylesheet" href="empty.css">
<script src="empty.js"></script>
</head>
<body>
<h1 class="hello-world">Hello, world!</h1>
<p>Attribute order: class, id, name, data-*, src, for, type, href, value ,title, alt, role, aria-*</p>
<h5>Boolean Attributes</h5>
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="0">0</option>
<option value="1" selected>1</option>
</select>
<br>
<img src="http://www.hisd.com/uploads/study-abroad-guide1.jpg" alt="Company">
</body>
</html>From fetch With <!doctype html>
<title>title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<header>
<h1></h1>
<nav></nav>
</header>
<main></main>
<footer></footer>
<script src="script.js"></script>With <!doctype html>
<title>title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<h1></h1>
<nav></nav>
<section>
<h2></h2>
</section>
<footer></footer>
<script src="script.js"></script> |
BASE 64Polyfill Unicode strings MDN function utf8_to_b64(str) {
return window.btoa(escape(encodeURIComponent(str)));
}
function b64_to_utf8(str) {
return decodeURIComponent(unescape(window.atob(str)));
}For GitHub function b64e(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
}));
}
function b64d(str) {
return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
return '%' + c.charCodeAt(0).toString(16);
}).join(''));
} |
Switch, caseShorthand var cases = {
1: doX,
2: doY,
3: doN
};
if (cases[something]) {
cases[something]();
}same as switch (something) {
case 1:
doX();
break;
case 2:
doY();
break;
case 3:
doN();
break;
// And so on...
} |
jQueryDOM ready $(document).ready(function() {
// DOM ready
});Version number console.log($().jquery);
$('header h1, title').append($().jquery);Add class or classes $("button").click(function(){
$("#div1").addClass("important blue");
});Append HTML
Nested append list.append(
$('<li/>').append(
$('<a/>', {
href: e.html_url,
text: e.name
})
)
);Element create and style $('<h3/>', { text: e[0] }).appendTo('main');var span = $("<span/>");
span.text(e);
span.insertAfter(notice);for Each loop $( ".alert" ).each(function() {
var element = $( this );
array.each(function(e){
if (element.text().indexOf(e) >= 0){
element.addClass(e);
}
});
});Change page style onclick: https://github.com/tallys/color-theory $(document).ready(function () {
$('.color-swatches .swatch').click(function () {
var color = $(this).data('color');
$('#themed').remove();
$('head').append('<link rel="stylesheet" href="stylesheets/'+color+'.css" type="text/css" id="themed" />');
});
$('.partymode').click(function () {
$('body').toggleClass('party');
});
});Style <link rel="stylesheet" href="stylesheets/green.css" type="text/css" id="themed">Swatch <div class="color-swatches">
<button class= "swatch" data-color="red"></button>
</div>Parse HTML element from remote page $.ajax({
url: 'https://cors-anywhere.herokuapp.com/https://www.3bmeteo.com/meteo/giove/sintesi',
type: 'GET',
success: function(res) {
var chart = $(res).find('#chartdiv');
$('body').append(chart);
}
});Parse XML RSS Feed $.get('https://cors-anywhere.herokuapp.com/http://source.xml', function(data) {
var $xml = $(data), ul = $('<ul>');
$xml.find("item").each(function() {
var $this = $(this), item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
};
console.log(item);
});
}); |
d3.jsElement sizesFor SVG elements Using something like {
height: 5,
width: 5,
y: 50,
x: 20
}For HTML elements Use Mouse position var point = d3.mouse(this), p = {x: point[0], y: point[1] };keyboard
function keydown() {
if (!selected) return;
switch (d3.event.keyCode) {
case 8: // backspace
case 46: { // delete
var i = points.indexOf(selected);
points.splice(i, 1);
selected = points.length ? points[i > 0 ? i - 1 : 0] : null;
redraw();
break;
}
}
}Get
|
ImagesGet image size //Load image and get size.
var img = new Image();
img.src = logoUrl;
img.onload = function() {
var width = this.width;
var height = this.height; |
ObjectsDelete a property delete myObject.property;Check empty object Object.keys(obj).length === 0
// or
Object.getOwnPropertyNames(obj).length == 0Store objects in element attributes<div data-foobar='{"foo":"bar"}'></div>Access with $('div').data('foobar').foo |
NumbersString to number Number("13.4")Round with any digit only if decimal resolution = 10 ^ digits
Math.round(e.target.value*resolution)/resolution |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Articles
Exit from javascript with style
The text was updated successfully, but these errors were encountered: