englishextra englishextra

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle Functions on Resize
Create DOM Elements	Conditionals

What

An updated guide/collection of guides on how to access JSON data with JavaScript

Original Question on Stack Exchange.

Example 1

For reading the external Local JSON file (data.json) using java script

This article has been given a more permanent home on my blog. Also, since it was first written, the development of the Promises/A+ specification has made the original emphasis on Promises/A seem somewhat outdated.

You're Missing the Point of Promises

Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style:

getTweetsFor("domenic", function (err, results) {
 // the rest of your code goes here.

	/**
	* Loads javascript file by url and saves reference to it by name, so it's not loaded again
	* @param {string} name Name of js library
	* @param {string} url Url to js library
	* @return {promise} Resolves when library is loaded
	*
	* Based on example by Brad Berger: https://bradb.net/blog/promise-based-js-script-loader/
	* Extended w/ global variable to keep track of previously loaded scripts.
	* Removed support for loading several independent scripts at once via Promise.all()
	*

	function test_jQuery() { jQuery(""); }
	function success_jQuery() { alert("jQuery is loaded!");

	var successfully_loaded = false;
	function loadOrFallback(scripts,idx) {
	function testAndFallback() {
	clearTimeout(fallback_timeout);
	if (successfully_loaded) return; // already loaded successfully, so just bail
	try {
	scripts[idx].test();

	/**
	* Return a timestamp with the format "m/d/yy h:MM:ss TT"
	* @type {Date}
	*/

	function timeStamp() {
	// Create a date object with the current time
	var now = new Date();

	// Create an array with the current month, day and time

	var parser = document.createElement('a');
	parser.href = "http://example.com:3000/pathname/?search=test#hash";

	parser.protocol; // => "http:"
	parser.hostname; // => "example.com"
	parser.port; // => "3000"
	parser.pathname; // => "/pathname/"
	parser.search; // => "?search=test"
	parser.hash; // => "#hash"
	parser.host; // => "example.com:3000"

	'use strict';

	// Add ECMA262-5 method binding if not supported natively
	//
	if (!('bind' in Function.prototype)) {
	Function.prototype.bind= function(owner) {
	var that= this;
	if (arguments.length<=1) {
	return function() {
	return that.apply(owner, arguments);

	// document.ready
	document.addEventListener("DOMContentLoaded", function() {
	// your code
	}, false);



	// select div
	var element = document.querySelector("div");