A quick clarification: In the following blog post, I talk about W3Schools and how I like their website. I mention how it has enormously helped connect my brain to what JavaScript is and how it might be used. This was written right before I fell down a Google rabbit hole solely about W3Schools and how bad it is - or rather, was (in the past, and perhaps not now).
Apparently, W3Schools is a website with a lot of history on the internet, most of it pretty bad. They managed to destroy their reputation to a great extent. In recent years, however, they seem to have updated their website and have improved enough for most people (though not everyone) to end their crusades against them.
I am only finding out about all of this now, and am still going to publish this blog post (obviously, since you're seeing it). I still appreciate their website, but I'm warier about it and will be sure to take their content with a grain of salt.
While waiting for a friend today, I hopped onto W3 Schools to try to see what JQuery was about. I'd read that it was of the commenter's opinion that people should learn it before JavaScript, because it was, essentially, "JavaScript with training wheels". Considering my recent bout of difficulties with understanding JavaScript, I decided to take a look at the JQuery section on W3 Schools to see.
I didn't notice anything about JQuery that suggested that it was "JavaScript with training wheels" (not to my JavaScript-untrained eye, anyway). And right on the JQuery Intro page, it mentions that you should have at least some knowledge in HTML, CSS, and JavaScript to start. So from there, I decided to take a look at W3 School's JavaScript tutorials.
Dude!
I don't know why I didn't do this sooner! I mean, I really like W3 Schools. That website has a ton of information about various coding languages, and I spent a lot of time on there when I was learning the more in-depth HTML and CSS elements. However, for some reason, I never tried their JavaScript tutorials.
I am so glad I did! On their JavaScript Introduction page, they explain JavaScript in a way that clears a lot up for me. I mentioned in my previous post about JavaScript (Why is JavaScript So Hard?) that one of my big issues with learning JavaScript was that I was in the dark about how it's applied. I didn't have a single clue as to how to actually use what I was learning, because none of the websites I was using to learn JavaScript seemed to explain the answer to that question (at least, not early on enough for me to have seen it by now).
Looking at W3 Schools now, I didn't even notice this when I was on the website earlier today, but it even says, and I quote:
Examples are better than 1000 words. Examples are often easier to understand than text explanations. This tutorial supplements all explanations with clarifying "Try it Yourself" examples. If you try all the examples, you will learn a lot about JavaScript, in a very short time!
And that proved to be true (for me, anyway) because, funnily enough, it was the W3Schools examples on the Introduction page that finally helped me understand some stuff about JavaScript that was severely lacking before.
You see, the first example says this:
And the source code is like so:
After taking a look at the example HTML, I was able to break it down for myself in a way that was similar to the following thought process.
Looking at the HTML, I can see that, except for the JavaScript code that I didn't know anything about, it's extremely basic. There's an H2 heading, some text via a paragraph tag that says "JavaScript can change HTML content", and a button that says "Click Me!".
And as for the JavaScript code itself:
onclick
clearly means "When this button is clicked, perform the following action(s)." This is followed by:
document.getElementById("demo").innerHTML
which links the paragraph element to the script via the ID demo. Finally:
="Hello JavaScript!"
is the text that, when clicked, the button should change the paragraph text to, going from this:
to this:
The same page has a few other examples, the next one being this:
Clearly, when you click "Turn on the light", the light is meant to turn on, like so:
Likewise, when you click "Turn off the light", the light turns back off.
This is the code that creates this effect:
Let's take a closer look at this code and see if we can't break down the JavaScript code.
Just like the previous example, we have the following snippet at the start of the code:
onclick
This makes sense since we're dealing with a button again. The next part of the code says:
."document.getElementById('myImage').src='pic_bulbon.gif'"
which, also like the last example, has the same document.getElementById bit.
The difference with this example is that instead of ending with .innerHTML, it ends with
.src = 'pic_bulbon.gif'. This clearly means something along the lines of "the element is a picture; here is the source of that picture". The image, pic_bulbon.gif, is of course the image of the light bulb turned on.
Following this, we have:
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
Again, the ID is what links the HTML to the JS script. Since this image has the ID of myImage, the script knows that this is the image to change from pic_bulboff.gif to pic_bulbon.gif.
There are a few more examples on that page.
They use JavaScript to change the styling of an HTML element with this code:
<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>
which, as you can see, has .style.fontsize = '35px'. This changes the font size of the HTML from its default sizing to 35px.
This code hides an HTML element:
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
This one is another .style code, with the .display = 'none' being what makes the element "disappear".
Finally, this last example makes an HTML element appear:
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
Within the <p> element is some inline CSS:
style="display:none"
This is clearly what makes the element hidden in the first place. Then, the JS code forces its display to change from none to block:
.display='block'
which is how it makes it seem like the element appears from nowhere! Interesting, no?
You'll have to bear with me. Again, this coding series is all about my journey through coding and all of the mishaps and triumphs along the way to getting a professional job coding. While this may seem like obvious stuff to some of you, I just wanted to share how it helped clear some of the "Wtf am I doing?" -ness about JavaScript.
Disclaimer: Although I reference them a lot and have linked to several of their pages within this post, I am not sponsored by www.w3schools.com, nor do I have any affiliation with them in any way whatsoever.
Comments