Learning JavaScript, Day 1 – Starting Over
Yesterday, I gave up on the terrible Mammoth Club JavaScript course I was taking, because I kept crashing JSBin, and none of it made sense.
Matthew Pennell talked me through the problem I was having, and made it work, which is exactly what I needed, someone I've known for mumblemumblemumble years who showed where I went wrong, but the course...the course was not working for me.
But I still want to learn this accursed language.
So I signed up for good old W3Schools. It turns out that one of the paid tiers is only, like, £27 for the year, and I get piles of stuff for that, and lord knows I keep on using them as reference, so, yeah.
I went for my Animal Crossing: New Horizons name, because, hell, it's not like anyone else is going to be a combination of a sloth and Mothra, are they.
And I'm going to learn JavaScript. There's a hell of a lot of other stuff I can learn too, so wish me luck!
Test Your Typing
Oh shoot, before I begin I have just discovered they have a Test Your Typing exercise. I cannot resist those.
75 words a minute with 1 error (because I didn't bother going back and fixing that one).
Hell yeah.
JavaScript Introduction
As a start, even though it's getElementById, I really actually like their little introduction.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById
("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>
That is a nice little way to show what innerHTML can do. Clicky clicky click.
And it's a great little way to have very stupid jokes.
<p id="demo">What's brown and sticky?</p>
<button type="button" onclick='document.getElementById
("demo").innerHTML = "A Stick!"'>Click for the answer</button>
I will say, though, because JavaScript doesn't mind if you use " " or ' ', as long as they match up, that is going to be a pain for me. Because I'll want to keep using " " in all my work, due to my pedantic HTML ways, and then there'll be bits where there'll be two quotes next to each other, and that'll break.
Like, they have this adorable "turn the light bulb on and off" example to show how to switch images.
And, like, when I'm typing it out, I would totally go:
<button onclick="document.getElementById("myImage").src="pic_bulbon.gif"">
Turn On The Light
</button>
And that breaks, because of that "" at the end.
So, instead, it has to be
<button onclick='document.getElementById("myImage").src="pic_bulbon.gif"'>
Turn On The Light
</button>
Or
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">
Turn On The Light
</button>
Just so it behaves.
That is going to throw me so many times, I can feel it.
I also like style, but I'm going to have to learn all the different name conventions for changing styles. And what if I want to change multiple styles?
Like, I get that this
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById
('demo').style.fontSize='35px'">Click Me!</button>
will change the text to being 35px, but what if I also want to make the background red and the font monospace?
I worked out how to do both separately...
<button type="button" onclick="document.getElementById
('demo').style.background='#ff0000'">Click Me!</button>
<button type="button" onclick="document.getElementById
('demo').style.fontFamily='monospace'">Click Me!</button>
I suppose what you could do would be to have all your changes be in a separate class, and then assign that class to the ID. But I'd have to figure out a bit more with that.
I do end up going clicky clicky click again though, when they show me that I can do style.display:
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById
('demo').style.display='none'">Click Me!</button>
<button type="button" onclick="document.getElementById
('demo').style.display='block'">Click Me!</button>
It goes away, it comes back. It goes away, it comes back. It goes away, it comes back.
And we finish off with a quiz, which I ace. Yay!
JavaScript Where To
My only complaint about W3Schools, and this is a tiny complaint, is that the "Try It Yourself" bits are each in their own separate page, so I have to keep on opening new windows in order to have my set-up the way I want it to be. It would be better they just had me open up one window and then gave me the code to try out in the tutorial page, but, like I said, tiny complaint.
This is where I learn where all this JavaScript goes. Unsurprisingly, they say it goes into < script >.
There is one bit I take a bit of an issue with.
Old JavaScript examples may use a type attribute: <script type="text/javascript">. The type attribute is not required. JavaScript is the default scripting language in HTML.
Not my precious type! How will I know what is what?
It's all pretty much about how you can have your < script > in the <head>, you can have it in the <body>, you can have it in an external link, you can have it in the HTML page, whatever, it's all good.
For external links, you use < script src="URL" >< /script >. And, woo, is that going to throw me, because I am so used to using <link href="URL"> for everything, and I just know that I'll keep doing <link href="something.js"> over and over and then going "Why is none of this working I am a failure".
(As an aside? I have discovered that I have to put spaces in < script > to get it to load right in the preview of this blog. Otherwise it doesn't load. Which is good, I dig it, but, wow, okay.
Also, y'all know I put in line breaks on my code for aesthetic purposes, right? Because I hate horizontal scrolling? So no, I'm not typing it that way into the actual page – just the examples I'm giving here.)
JavaScript Output
This is all about how to get things displayed using JavaScript.
There's the innerHTML, which I know. There's innerText which I like a lot better because it's not tweaking HTML (stop touching my precious HTML stop it stop it). There's document.write() which goes into the page. There's window.alert() which brings up a popup (boo). There's console.log() which you have to look at the console to see, and half of the time your browser is like "Oh, we aren't showing you that because it's just generic stuff you have to click another button to see it."
I wish I had known a bit more JavaScript ages ago when I was doing this artist's website. She wanted the text to be in both English and Portuguese, and I did it via a stylesheet switcher and a lot of display: none; and display: block;. Which, to be fair, was still a great way to do it. But I could've used innerText for the menu and that would've been so good.
I like seeing what happens when you throw in document.write() after you've loaded the page. They do a very basic bit of mathematics...
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
But, man, a nuclear option for a page you're looking at is always a delight.
<h1>Welcome to my home page!</h1>
<p>This is where I live.</p>
<button type="button" onclick="document.write
('Oh no you killed me.')">Click This</button>
They also say you can skip the window part of window.alert(), but I'm a little wary of that. Mostly because of something they mention down a bit later – window.print().
I use window.print() on my knitting pattern pages, because people like to print out knitting patterns, and also, for pure vanity reasons. I have a pretty neat print stylesheet, thank you very much. You should print out things.
So, yeah, I'm keeping window in my window.alert(). For now.
Day 1 — Results
- My typing score is still pretty darn good.
- W3Schools makes so much more sense.
- JavaScript likes
" "or' ', but does not like""or''next to each other, so you'll have to alternate them. innerHTMLchanges the HTML inside whatever tag has the id you specify ingetElementById.src='URL'changes the image in whateverimghas the id.style.changes the style of whatever tag has the id.style.displaylets you change how the tag is displayed, includingnoneandblock.- You apparently don't need to include
type="text/javascript"in your< script >tag any more. - You do need to use
< script >< /script >though. Yes, even when you're linking to an external one. innerTextchanges the text inside the tag that has the id. Just the text, no changes to the HTML.document.write()changes the entire document. If you include it in the<body>, it just adds to whatever is above it. If you activate it after you load the page, it changes the page to whatever you put in there.window.alert()makes a pop-up window.console.log()puts a message in the console.window.print()will print the page it's on.- Stick spaces in your
< script >if you want the example to show up on your blog when you're including it inline. When it's a block, it's fine.
That's the Basic JavaScript section done. I'm only 1% of the way through their JavaScript stuff, but, dang, I've already picked up some nice things.
Yeah, W3Schools for me, man. This is where I'm at, and I get to listen to Stardew Valley - Festival of Seasons rather than someone droning on in a video, so, really, I'm so much happier.
Today's Sticker
kicks in the door Did someone say Stardew Valley?
I honestly don't know who I bought this sticker from. I have a feeling it was just a random booth at EM-Con where they bought a pile of stickers from Wish and just went "Here you go, 3 for £5, what's copyright?".
Google Images says the art is from Jon Kay at Fangamer, so I feel like maybe I should buy the t-shirt to make up for the sticker. But, oh no, THE SCARF! THE BENTO BOX! THE SOCCCKKKKKSSSSSSS.
Yeah, okay, maybe I need to play some Stardew and calm down.