For the first time ever in my lessons, I saw a completely different way of writing javascript code:
let parentClicks = 0;
let childClicks = 0;
document
.getElementById("parent")
.addEventListener("click", function() {
document
.getElementById("parent-count")
.innerText = (++parentClicks) + '';
});
document
.getElementById("child")
.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
document
.getElementById("child-count")
.innerText = (++childClicks) + '';
});
I was used to seeing nesting on HTML/CSS, but it's the first time ever I see it on JS.
Do these points mean this or they have a complete different meaning?
document.getElementById("parent")
document.addEventListener("click", function() {
document.getElementById("parent-count")
document.innerText = (++parentClicks) + '';
});
document.getElementById("child")
document.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
document.getElementById("child-count")
document.innerText = (++childClicks) + '';
});
JavaScript is very permissive about whitespace. For some sorts of syntactical constructs, putting a newline between them is the same as if there was no newline there. (It's possible to write any JavaScript on only a single line of code, after all - it's just that that's unreadable)
This:
document
.getElementById("parent")
.addEventListener("click", function() {
document
.getElementById("parent-count")
.innerText = (++parentClicks) + '';
});
is equivalent to
document.getElementById("parent").addEventListener("click", function() {
document.getElementById("parent-count").innerText = (++parentClicks) + '';
});
It's not the same as your document.addEventListener("click", function() { because your code adds a click listener to the document, not to the parent.
Where one decides to put newlines is often a purely stylistic choice, usually in an effort to make the code easier to understand at a glance. For example, one may well prefer to do this
let ranges = SpreadsheetApp.getActive()
.createTextFinder("Example 1")
.matchEntireCell(true)
.matchCase(true)
.matchFormulaText(false)
.ignoreDiacritics(true)
.findAll();
instead of
let ranges = SpreadsheetApp.getActive().createTextFinder("Example 1").matchEntireCell(true).matchCase(true).matchFormulaText(false).ignoreDiacritics(true).findAll();
even though they mean the exact same thing.
The indentation looks off in your first example. A few editor might throw error for this. It's always best to use period together in such scenarios. For ex- document. and not document .