// template string example
{
let word = "fig";
let n = 8;
const nSquared = n*n;
return `Template ${word} -- ${nSquared}`;
}
{
let ll = [2, 3, 4];
let a = ll.map(function (x) {
// as much as we want
return x + 1;
});
let b = [2, 3, 4].map((x) => x + 1);
// the arrow function is equivalent to returning x + 1
return [a, b];
}
<section id="exZ" style="border: 1px solid red;">
<div id="one" class="odd" data-x=1>one</div>
<div id="two" class="even" data-x=2>two</div>
<div id="three" class="odd" data-x=3>three</div>
</section>
{
// grab an element and change its inner HTML
document.getElementById("one").innerHTML = "<b>new bold text<b>";
}
// grab elements by class name and modify their style
{
for (let e of document.getElementsByClassName("odd")) {
// can set entire style
e.style = "font-weight: bold;";
// or per-property in a dictionary-like manner on .style
e.style["color"] = "green";
}
}
// example of console.log
{
let divs = document.querySelectorAll("#exZ > div"); // get all divs in example
divs.forEach(function (e) {
console.log(e);
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
