Steve Carroll
2025-01-23 21:14:19 UTC
Reference: <vmekhl$74sp$***@fretwizzer.eternal-september.org>
Setup info: <vmgi9e$u5m6$***@fretwizzer.eternal-september.org>
Variables: <vmh41h$u5m6$***@fretwizzer.eternal-september.org>
Functions: <vmh7ln$u5m6$***@fretwizzer.eternal-september.org>
Looping: <vmmi7n$3edp3$***@fretwizzer.eternal-september.org>
Your browser has a dirty secret! It holds one of the most notorious
aspects of working with JavaScript. This thing is so heinous it causes
seasoned developers to run screaming from the room! We're not going to
scream, at least, not today... not even a whimper. If you know anything
about HTML...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
... and how to open your browser's 'dev tools', then you're ready to
brave these waters. Navigate to this URL in your browser: 'about:blank'
Right click on the blank screen and choose 'Inspect' (or similar),
you'll see the bottom of the screen 'open up' and several tabs will be
visible. You want the 'Elements' tab for now. You should see something
like this:
<html>
<head></head>
<body>
</body>
</html>
Put your cursor over the opening '<body>' tag, right click and choose
'Edit as HTML' (or similar). You'll be given some kind of visual
indication (a box, perhaps) that you're in edit mode. Place your cursor
in between the opening and closing (</body>) body tags and type 'Hello
World', click somewhere outside of the editing box. You should see what
you typed on what was previously a blank screen at the top of your
window.
Now let's switch to the 'Console' tab and click to the right of the
cursor in the bottom half of the screen (it often uses this character:
'>'). Type in 'body' and hit return. You're likely to get an error:
"Uncaught ReferenceError: body is not defined"
If it's not defined, it's easy to do so, just paste this in and hit
return:
let body = document.querySelector('body')
What did that do? If you've read the References page you'll know that
"let: Declares a block-scoped variable (can be reassigned)". It's a
variable, and it's useful to you now because you have a way to
programmatically refer to the body element. So what's "document"? Type
it in at the cursor and hit return, you'll see it's similar to what you
saw in the Elements tab (there are differences but don't worry about
them now). Then you see that dot ('.') and another term following it:
.querySelector('body')
The dot ('.') and the term 'querySelector()' work in tandem to help you
locate elements on the page from within your JS program. You can see
that 'querySelector()' contains parens, just like a function. It
actually is a function, one that belongs to an object, in the case, the
'document' object. When you typed in 'document' earlier you hit return,
now type it in and don't hit return... just put a dot at the end. Those
are the properties and methods (AKA: functions) that belong to the
document object. The bottom line here is, when you write...
document.querySelector('body')
... you're 'calling' (running) the querySelector method (function) that
belongs to the document object and you're telling it to 'find' ('query'
for) the 'body' element in the document. So why did we precede it with:
let body =
As I alluded to above, you'll have a way to easily make subsequent,
programmatic references to it in your program. It's a lot easier to type
'body' than it is 'document.querySelector('body')' every time you want
to mess with the body (and it's faster from a computing viewpoint, too)!
Go get a cup of coffee...
Let's mess with the body element now, try this:
body.innerText += '!'
You just told the 'body' element to '=+' (that means: keep what is there
but add to it) the '!' character. That "innerText" is a property that
the body has and properties have values. You just added to the previous
value, which was, 'Hello World', and the new value is now: 'Hello
World!'
If you want to see an element's value, ask for it explicitly at the
cursor: 'body.innerText'
Here's a way to ask for it from within a function:
function getBodyElValue() {
console.log(body.innerText)
}
And run it in the console like this: getBodyElValue()
Now that you know what 'body.innerText' does, try this and hit return:
body.innerText = 'put whatever you want here'
All the text that was there has been replaced... but why? Because you
didn't add to it ('+='), you used the '=' sign and that means you
assigned it a value (whatever you typed in).
Let's try it with a function, copy and paste this to your console and
hit return:
function setBodyElValue(someText) {
console.log(body.innerText = someText)
}
Run it like this:
setBodyElValue('Will this work?')
While there's a lot more to it, this is the essence of working with JS
and the DOM, you use methods and properties to change values and 'do
things' (like 'query' for an element on the page).
Setup info: <vmgi9e$u5m6$***@fretwizzer.eternal-september.org>
Variables: <vmh41h$u5m6$***@fretwizzer.eternal-september.org>
Functions: <vmh7ln$u5m6$***@fretwizzer.eternal-september.org>
Looping: <vmmi7n$3edp3$***@fretwizzer.eternal-september.org>
Your browser has a dirty secret! It holds one of the most notorious
aspects of working with JavaScript. This thing is so heinous it causes
seasoned developers to run screaming from the room! We're not going to
scream, at least, not today... not even a whimper. If you know anything
about HTML...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
... and how to open your browser's 'dev tools', then you're ready to
brave these waters. Navigate to this URL in your browser: 'about:blank'
Right click on the blank screen and choose 'Inspect' (or similar),
you'll see the bottom of the screen 'open up' and several tabs will be
visible. You want the 'Elements' tab for now. You should see something
like this:
<html>
<head></head>
<body>
</body>
</html>
Put your cursor over the opening '<body>' tag, right click and choose
'Edit as HTML' (or similar). You'll be given some kind of visual
indication (a box, perhaps) that you're in edit mode. Place your cursor
in between the opening and closing (</body>) body tags and type 'Hello
World', click somewhere outside of the editing box. You should see what
you typed on what was previously a blank screen at the top of your
window.
Now let's switch to the 'Console' tab and click to the right of the
cursor in the bottom half of the screen (it often uses this character:
'>'). Type in 'body' and hit return. You're likely to get an error:
"Uncaught ReferenceError: body is not defined"
If it's not defined, it's easy to do so, just paste this in and hit
return:
let body = document.querySelector('body')
What did that do? If you've read the References page you'll know that
"let: Declares a block-scoped variable (can be reassigned)". It's a
variable, and it's useful to you now because you have a way to
programmatically refer to the body element. So what's "document"? Type
it in at the cursor and hit return, you'll see it's similar to what you
saw in the Elements tab (there are differences but don't worry about
them now). Then you see that dot ('.') and another term following it:
.querySelector('body')
The dot ('.') and the term 'querySelector()' work in tandem to help you
locate elements on the page from within your JS program. You can see
that 'querySelector()' contains parens, just like a function. It
actually is a function, one that belongs to an object, in the case, the
'document' object. When you typed in 'document' earlier you hit return,
now type it in and don't hit return... just put a dot at the end. Those
are the properties and methods (AKA: functions) that belong to the
document object. The bottom line here is, when you write...
document.querySelector('body')
... you're 'calling' (running) the querySelector method (function) that
belongs to the document object and you're telling it to 'find' ('query'
for) the 'body' element in the document. So why did we precede it with:
let body =
As I alluded to above, you'll have a way to easily make subsequent,
programmatic references to it in your program. It's a lot easier to type
'body' than it is 'document.querySelector('body')' every time you want
to mess with the body (and it's faster from a computing viewpoint, too)!
Go get a cup of coffee...
Let's mess with the body element now, try this:
body.innerText += '!'
You just told the 'body' element to '=+' (that means: keep what is there
but add to it) the '!' character. That "innerText" is a property that
the body has and properties have values. You just added to the previous
value, which was, 'Hello World', and the new value is now: 'Hello
World!'
If you want to see an element's value, ask for it explicitly at the
cursor: 'body.innerText'
Here's a way to ask for it from within a function:
function getBodyElValue() {
console.log(body.innerText)
}
And run it in the console like this: getBodyElValue()
Now that you know what 'body.innerText' does, try this and hit return:
body.innerText = 'put whatever you want here'
All the text that was there has been replaced... but why? Because you
didn't add to it ('+='), you used the '=' sign and that means you
assigned it a value (whatever you typed in).
Let's try it with a function, copy and paste this to your console and
hit return:
function setBodyElValue(someText) {
console.log(body.innerText = someText)
}
Run it like this:
setBodyElValue('Will this work?')
While there's a lot more to it, this is the essence of working with JS
and the DOM, you use methods and properties to change values and 'do
things' (like 'query' for an element on the page).