JavaScript cheat sheet: Difference between revisions
From MoodleDocs
David Mudrak (talk | contribs) mNo edit summary |
David Mudrak (talk | contribs) m (Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">") |
||
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
=== Locating DOM elements === | === Locating DOM elements === | ||
< | <syntaxhighlight lang="js"> | ||
// Get element by identifier. | // Get element by identifier. | ||
let root = document.getElementById('uniqueidentifier'); | let root = document.getElementById('uniqueidentifier'); | ||
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]'); | ||
</ | </syntaxhighlight> | ||
=== CSS classes === | === CSS classes === | ||
< | <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 30: | Line 30: | ||
e.target.classList.remove('anotherclassname'); | e.target.classList.remove('anotherclassname'); | ||
} | } | ||
</ | </syntaxhighlight> | ||
=== Custom events (core/pubsub) === | === Custom events (core/pubsub) === | ||
< | <syntaxhighlight lang="js"> | ||
import * as PubSub from 'core/pubsub'; | import * as PubSub from 'core/pubsub'; | ||
Line 47: | Line 47: | ||
let data = {}; | let data = {}; | ||
PubSub.publish(eventName, data); | PubSub.publish(eventName, data); | ||
</ | </syntaxhighlight> | ||
=== Strings (core/str) === | === Strings (core/str) === | ||
< | <syntaxhighlight lang="js"> | ||
import * as str from 'core/str'; | |||
str.get_string('identifier', 'tool_jsdemo').then((text) => { | |||
window.console.log(text); | |||
}); | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="js"> | |||
import {get_string as getString} from 'core/str'; | import {get_string as getString} from 'core/str'; | ||
const sayHello = async () => { | const sayHello = async () => { | ||
window.console.log(await getString('identifier', 'tool_jsdemo'); | window.console.log(await getString('identifier', 'tool_jsdemo')); | ||
} | } | ||
</ | </syntaxhighlight> |
Latest revision as of 08:27, 15 July 2021
Locating DOM elements
// 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]');
CSS classes
// Check if the element has a certain class.
if (e.target.classList.contains('classname')) {
// Add a new CSS class to the element.
e.target.classList.add('someclassname');
// Remove a CSS class from the element.
e.target.classList.remove('anotherclassname');
}
Custom events (core/pubsub)
import * as PubSub from 'core/pubsub';
let eventName = 'tool_jsdemo/modulename:eventname';
// Subscribe as the event handler.
PubSub.subscribe(eventName, data => {
window.console.log(data);
});
// Trigger the event with custom data passed to the subscribers.
let data = {};
PubSub.publish(eventName, data);
Strings (core/str)
import * as str from 'core/str';
str.get_string('identifier', 'tool_jsdemo').then((text) => {
window.console.log(text);
});
import {get_string as getString} from 'core/str';
const sayHello = async () => {
window.console.log(await getString('identifier', 'tool_jsdemo'));
}