JavaScript cheat sheet - Revision history

Mudrd8mz: Text replacement - "`" to ""`


2021-07-15T08:27:04Z
Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">"

				
				
				
				
				
				← Older revision
				Revision as of 08:27, 15 July 2021
				
Line 1:
Line 1:
=== Locating DOM elements === === Locating DOM elements ===



<code js> <syntaxhighlight lang="js">
// Get element by identifier. // Get element by identifier.
let root = document.getElementById('uniqueidentifier'); let root = document.getElementById('uniqueidentifier');
Line 20:
Line 20:
=== CSS classes === === CSS classes ===



<code js> <syntaxhighlight lang="js">
// Check if the element has a certain class. // Check if the element has a certain class.
if (e.target.classList.contains('classname')) { if (e.target.classList.contains('classname')) {
Line 34:
Line 34:
=== Custom events (core/pubsub) === === Custom events (core/pubsub) ===



<code js> <syntaxhighlight lang="js">
import * as PubSub from 'core/pubsub'; import * as PubSub from 'core/pubsub';



Line 51:
Line 51:
=== Strings (core/str) === === Strings (core/str) ===



<code js> <syntaxhighlight lang="js">
import * as str from 'core/str'; import * as str from 'core/str';



Line 59:
Line 59:
</syntaxhighlight> </syntaxhighlight>



<code js> <syntaxhighlight lang="js">
import {get_string as getString} from 'core/str'; import {get_string as getString} from 'core/str';

`Mudrd8mz: Text replacement - "`" to ""

2021-07-14T13:04:17Z

Text replacement - "</code>" to "</syntaxhighlight>"

← Older revision		Revision as of 13:04, 14 July 2021
Line 16:		Line 16:
	// Find the closest parent element matching the selector.		// Find the closest parent element matching the selector.
	let region = widget.closest('[data-region]');		let region = widget.closest('[data-region]');
	</~~code~~>		</syntaxhighlight>

	=== CSS classes ===		=== CSS classes ===
Line 30:		Line 30:
	e.target.classList.remove('anotherclassname');		e.target.classList.remove('anotherclassname');
	}		}
	</~~code~~>		</syntaxhighlight>

	=== Custom events (core/pubsub) ===		=== Custom events (core/pubsub) ===
Line 47:		Line 47:
	let data = {};		let data = {};
	PubSub.publish(eventName, data);		PubSub.publish(eventName, data);
	</~~code~~>		</syntaxhighlight>

	=== Strings (core/str) ===		=== Strings (core/str) ===
Line 57:		Line 57:
	window.console.log(text);		window.console.log(text);
	});		});
	</~~code~~>		</syntaxhighlight>

	<code js>		<code js>
Line 65:		Line 65:
	window.console.log(await getString('identifier', 'tool_jsdemo'));		window.console.log(await getString('identifier', 'tool_jsdemo'));
	}		}
	</~~code~~>		</syntaxhighlight>

Mudrd8mz: /* Strings (core/str) */

2020-12-09T09:41:41Z

Strings (core/str)

← Older revision		Revision as of 09:41, 9 December 2020
Line 52:		Line 52:

	<code js>		<code js>
	import * as str from 'core/~~string~~';		import * as str from 'core/str';

	str.get_string('identifier', 'tool_jsdemo').then((text) => {		str.get_string('identifier', 'tool_jsdemo').then((text) => {

Mudrd8mz: /* Strings (core/str) */

2020-12-09T09:41:23Z

Strings (core/str)

← Older revision		Revision as of 09:41, 9 December 2020
Line 50:		Line 50:

	=== Strings (core/str) ===		=== Strings (core/str) ===

			<code js>
			import * as str from 'core/string';

			str.get_string('identifier', 'tool_jsdemo').then((text) => {
			window.console.log(text);
			});
			</code>

	<code js>		<code js>

Mudrd8mz: /* Strings (core/str) */

2020-10-29T21:23:56Z

Strings (core/str)

← Older revision		Revision as of 21:23, 29 October 2020
Line 55:		Line 55:

	const sayHello = async () => {		const sayHello = async () => {
	window.console.log(await getString('identifier', 'tool_jsdemo');		window.console.log(await getString('identifier', 'tool_jsdemo'));
	}		}
	</code>		</code>

Mudrd8mz at 21:23, 29 October 2020

2020-10-29T21:23:38Z

@@ Line 47: / Line 47: @@
 let data = {};
 PubSub.publish(eventName, data);
 </code>

Mudrd8mz at 15:11, 29 October 2020

2020-10-29T15:11:25Z

@@ Line 30: / Line 30: @@
      e.target.classList.remove('anotherclassname');
+}
 </code>

Mudrd8mz: /* CSS classes */

2020-10-29T15:01:43Z

CSS classes

← Older revision		Revision as of 15:01, 29 October 2020
Line 21:		Line 21:

	<code js>		<code js>
			// Check if the element has a certain class.
	if (e.target.classList.contains('classname')) {		if (e.target.classList.contains('classname')) {

			// Add a new CSS class to the element.
	e.target.classList.add('someclassname');		e.target.classList.add('someclassname');

			// Remove a CSS class from the element.
	e.target.classList.remove('anotherclassname');		e.target.classList.remove('anotherclassname');
	}		}
	</code>		</code>

Mudrd8mz at 15:00, 29 October 2020

2020-10-29T15:00:29Z

@@ Line 16: / Line 16: @@
 // Find the closest parent element matching the selector.
 let region = widget.closest('[data-region]');
 </code>

Mudrd8mz: Starting this page as kind of personal cheat sheet of useful snippets as I am getting familiar with ES6 and un-learning YUI and jQuery style of doing things.

2020-10-29T14:56:25Z

Starting this page as kind of personal cheat sheet of useful snippets as I am getting familiar with ES6 and un-learning YUI and jQuery style of doing things.

New page

=== Locating DOM elements ===

<code js>
// Get element by identifier.
let root = document.getElementById('uniqueidentifier');

// Get element within another element by attribute.
let widget = querySelector('[data-widget="widgetname"]');

// Find all elements within another element and do something with them.
let missingItems = root.querySelectorAll(':scope [data-region="itemname"].missing');
missingItems.forEach(item => {
window.console.log(item);
});

// Find the closest parent element matching the selector.
let region = widget.closest('[data-region]');
</code>

← Older revision		Revision as of 08:27, 15 July 2021
Line 1:		Line 1:
	=== Locating DOM elements ===		=== Locating DOM elements ===

	<~~code~~ js>		<syntaxhighlight lang="js">
	// Get element by identifier.		// Get element by identifier.
	let root = document.getElementById('uniqueidentifier');		let root = document.getElementById('uniqueidentifier');
Line 20:		Line 20:
	=== CSS classes ===		=== CSS classes ===

	<~~code~~ js>		<syntaxhighlight lang="js">
	// Check if the element has a certain class.		// Check if the element has a certain class.
	if (e.target.classList.contains('classname')) {		if (e.target.classList.contains('classname')) {
Line 34:		Line 34:
	=== Custom events (core/pubsub) ===		=== Custom events (core/pubsub) ===

	<~~code~~ js>		<syntaxhighlight lang="js">
	import * as PubSub from 'core/pubsub';		import * as PubSub from 'core/pubsub';

Line 51:		Line 51:
	=== Strings (core/str) ===		=== Strings (core/str) ===

	<~~code~~ js>		<syntaxhighlight lang="js">
	import * as str from 'core/str';		import * as str from 'core/str';

Line 59:		Line 59:
	</syntaxhighlight>		</syntaxhighlight>

	<~~code~~ js>		<syntaxhighlight lang="js">
	import {get_string as getString} from 'core/str';		import {get_string as getString} from 'core/str';

JavaScript cheat sheet - Revision history

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: /* Strings (core/str) */

Mudrd8mz: /* Strings (core/str) */

Mudrd8mz: /* Strings (core/str) */

Mudrd8mz at 21:23, 29 October 2020

Mudrd8mz at 15:11, 29 October 2020

Mudrd8mz: /* CSS classes */

Mudrd8mz at 15:00, 29 October 2020

Mudrd8mz: Starting this page as kind of personal cheat sheet of useful snippets as I am getting familiar with ES6 and un-learning YUI and jQuery style of doing things.

Mudrd8mz: Text replacement - "`" to ""`

`Mudrd8mz: Text replacement - "`" to ""