Javascript - Revision history

M: /* Libraries */

2023-02-24T19:45:45Z

Libraries

← Older revision		Revision as of 19:45, 24 February 2023
Line 453:		Line 453:
	\| You have to know your display size (range) and the min and max of your data (domain), on each axis. From [https://bost.ocks.org/mike/bar/ Mike's docs]:		\| You have to know your display size (range) and the min and max of your data (domain), on each axis. From [https://bost.ocks.org/mike/bar/ Mike's docs]:

	D3’s scales specify a mapping from data space (domain) to display space (range).		D3’s scales specify a mapping from data space (domain) to display space (range).
	D3’s scales can also be used to interpolate many other		D3’s scales can also be used to interpolate many other
	types of display-space values, such as paths, color spaces		types of display-space values, such as paths, color spaces

M: /* Libraries */

2023-02-24T19:32:39Z

Libraries

← Older revision		Revision as of 19:32, 24 February 2023
Line 62:		Line 62:

	=== Libraries ===		=== Libraries ===
			{\| class="mw-collapsible mw-collapsed wikitable"
			! Javascript and JQuery
			\|-
			\|
			{\| class="mw-collapsible mw-collapsed wikitable"
			! Formatting examples (numbers dates etc.)
			\|-
			\|
			// Javascript sucks at dates.
			// d3 to the rescue!
			var parseInitDate = d3.utcParse("%Y-%m-%dT%H:%M:%SZ");
			var initDate = parseInitDate(initial_managed_value_date);
			var initDateString =
			initDate.getUTCFullYear()
			+"/"+ (initDate.getUTCMonth()+1)
			+"/"+ initDate.getUTCDate()
			+ " " + initDate.getUTCHours()
			+ ":" + initDate.getUTCMinutes()
			+ ":" + initDate.getUTCSeconds();

			var rightNow = new Date;
			var initToNow_DecimalDays = parseFloat(rightNow - initDate) / 864e5; // 86,400,000 ms/day
			var initToNow_PercentOfYear = initToNow_DecimalDays / 365.0;
			var change_in_value = (parseFloat(total_managed_value) - parseFloat(initial_managed_value))/parseFloat(initial_managed_value);

			$('#initial_managed_value').val(initial_managed_value.toFixed(2));
			$('#initial_managed_value_date').val(initDateString);
			$('#change_in_value').val((change_in_value*100.0).toFixed(1)+ "%");
			$('#equivalent_apr').val((change_in_value/initToNow_PercentOfYear*100.0).toFixed(1)+ "%");
			$('#total_managed_value_readonly').val(total_managed_value.toFixed(2));
			\|}
			{\| class="mw-collapsible mw-collapsed wikitable"
			! Array vs Object lifetime
			\|-
			\|
			// If the JSON data were an array, we would need to slice-to-clone to keep it around:
			// var dataCopy = data.slice();
			// updateStockData(run,dataCopy);
			// We have an object so we can pass a reference, and it will keep the object around.
			\|}
			{\| class="mw-collapsible mw-collapsed wikitable"
			! Event handlers
			\|-
			\| Three basic methods:
			* Attach a function to an event of a specific element; charts.js example:
			var label = jQuery('<label class="btn btn-sm btn-'+color+'"></label>').appendTo(action_button_bar);
			var input = jQuery('<input class="run-'+cmd+'" type="checkbox" autocomplete="off" value="'+cycle.run+'">').appendTo(label)
			.on('change', cycle.owned? function(){
			patchPick(this.value,'{ "action" : "run-hold" }');
			} : function() {
			patchPick(this.value,'{ "action" : "run-buy" }');
			});
			var text = jQuery('<span class="glyphicon glyphicon-'+glyph+'"></span> <span class="hidden-xs">'+cmd+'</span>').appendTo(label);

			* Add a function handler once, for a class of elements; picks.js example:
			$("input[type='checkbox'][class='run-top' ]").change(function() { patchPick(this.value,'{ "action" : "run-move-top" }'); });
			* Event delegation: Javascript takes events and "bubbles them up" through the chain of parents; set up a handler on a parent to listen for these bubbles.
			* At end of handler, prevent further bubbling with stopPropagation() - still finishes the current event (eg following the href of an <a>):
			<pre>
			var datepicker = jQuery(
			'<div class="input-group date form-inline pull-left" data-provide="datepicker" id="datepicker'+cycle.run+'">'+
			'<input type="text" class="input-sm form-control">'+
			'<div class="input-group-addon">'+
			'<span class="glyphicon glyphicon-th"></span>'+
			'</div>'+
			'</div>'
			)
			.on('changeDate', function(e){
			alert('next '+cycle.run);
			e.stopPropagation();
			})
			;
			</pre>
			* Or use preventDefault() to stop completely:
			<pre>
			var datepicker_next = jQuery(
			'<a href="">My javascript action</a>'
			)
			.on('click', function(e){
			alert('next '+cycle.run);
			e.preventDefault();
			})
			;
			</pre>
			\|}
			{\| class="mw-collapsible mw-collapsed wikitable"
			! Debug clicks on ANY PAGE
			\|-
			\|
			* Press F12 => Sources => Event Listener Breakpoints righthand pane => Mouse => [x] click
			B O O M we have it captured and can step into ANYTHING.
			\|}
			{\| class="mw-collapsible mw-collapsed wikitable"
			! JWT flow
			\|-
			\| Client is easy!
			<pre>
			Client application API
			-------- -----------
			\| \|
			\| GET /api/employees \|
			\|----------------------------------------------------->\|
			\| 403 Forbidden \|
			\|<-----------------------------------------------------\|
			\| \|
			\| \|
			\| POST /api/authenticate \|
			\| { login: "john.doe", password: "password" } \|
			\|----------------------------------------------------->\|
			\| 200 Success \|
			\| { token: "my.personal.token" } \|
			\|<-----------------------------------------------------\|
			\| \|
			\| \|
			\| GET /api/employees \|
			\| Header { "Authorization: Token "my.personal.token" } \|
			\|----------------------------------------------------->\|
			\| 200 Success \|
			\|<-----------------------------------------------------\|
			\| \|
			</pre>
			\|}
			\|}
			<!--


			===========================================================================================================================================================================================================================================================================================


			-->

	{\| class="wikitable"		{\| class="wikitable"

M: /* Promises */

2023-02-24T19:32:19Z

Promises

Show changes

M at 16:24, 13 December 2022

2022-12-13T16:24:31Z

← Older revision		Revision as of 16:24, 13 December 2022
Line 14:		Line 14:
	let myblockvar = 3; // block scope		let myblockvar = 3; // block scope
	const myconst = 4; // const, has block scope		const myconst = 4; // const, has block scope

			==== Sorting ====
			You'd think the sort() call's comparison function would be a "less than" check, like in C++. NOPE. You MUST return -1 or 1, not a boolean result. Wtf were they thinking... Working example:
			data.sort(( a, b ) => {
			// DO NOT SIMPLY RETURN a.value < b.value, you will gnash and cry bitter tears...
			return ( a.value < b.value ) ? 1 : -1;
			});

	==== Array find-or-fail ====		==== Array find-or-fail ====

M: /* ES6 */

2020-09-20T13:30:43Z

ES6

@@ Line 4: / Line 4: @@
   ~/development/Reusable/JavaScript/scrap
-==== ES6 ====
+==== [[ES6]] ====
-* Arrow functions - simple things that have no this pointer.  People love them.  Whatever.
+[[ES6]] is required learning!
 ==== Scope ====

M: /* ES6 */

2020-09-11T19:51:42Z

ES6

← Older revision		Revision as of 19:51, 11 September 2020
Line 16:		Line 16:

	// One liners are simple, no curly braces or return statement needed:		// One liners are simple, no curly braces or return statement needed:
	const ~~myfunc~~ = onevar => onevar * 2;		const doubleIt = onevar => onevar * 2;

	* Destructure internal variables with curly braces on left side:		* Destructure internal variables with curly braces on left side:

M: /* ES6 */

2020-09-11T19:51:17Z

ES6

← Older revision		Revision as of 19:51, 11 September 2020
Line 6:		Line 6:
	==== ES6 ====		==== ES6 ====

	* Arrow functions		* Arrow functions - simple things that have no this pointer. People love them. Whatever.
	const myfunc = onevar => {		const myfunc = onevar => {
	console.log( onevar );		console.log( onevar );

M: /* Scope */

2020-09-11T19:17:22Z

Scope

← Older revision		Revision as of 19:17, 11 September 2020
Line 31:		Line 31:

	myglobal = 1; // global scope, defined outside of any scope		myglobal = 1; // global scope, defined outside of any scope
	var myvar = 1; // local scope, cacades into closures and blocks		var myvar = 1; // local scope, cacades into closures and blocks; OLDSKOOL, avoid
	let myblockvar = 3; // block scope		let myblockvar = 3; // block scope
	const myconst = 4; // const, has block scope		const myconst = 4; // const, has block scope

M at 19:16, 11 September 2020

2020-09-11T19:16:34Z

@@ Line 3: / Line 3: @@
 See [https://github.com/moodboom/Reusable/tree/master/JavaScript/scrap scraps] scripts:
   ~/development/Reusable/JavaScript/scrap
 ==== Scope ====

M at 19:48, 14 June 2020

2020-06-14T19:48:01Z

← Older revision		Revision as of 19:48, 14 June 2020
Line 10:		Line 10:
	let myblockvar = 3; // block scope		let myblockvar = 3; // block scope
	const myconst = 4; // const, has block scope		const myconst = 4; // const, has block scope

			==== Array find-or-fail ====

			The old stupid anti-pattern that far too many rookies jump right in to:
			if find then find else fail.

			There are a couple ways to properly find-or-fail, here's one, I have a better one that I can't remember atm, doh...
			const targetType = "selected";
			myArray.find( item => item.type === targetType )?.description \|\| 'unknown'

	==== Immutability ====		==== Immutability ====