Introduction to Javascript (and jQuery) for webmasters

Javascript sounds intimidating – and sometimes it genuinely is. But the type of Javascript that I want to go over is only the tip of the iceberg as far as what JS is capable of.

The main thing I use JS for is something called DOM Manipulation. DOM stands for Document Object Model, which refers to the items we see on a webpage.

This kind of JS allows us to create interactivity on a website, and one of the easiest ways to make a static site just a little bit more interesting.

There is very little to no math or hardcore ‘programming’ involved.

Javascript is a tool that lets us make changes to a page on top of its existing HTML and CSS

Most of the changes we can make to a website with JS is actually just ‘using’ JS as a tool to manipulate the HTML and CSS that is on the screen. One might use Javascript to hide an element using display:none; and then show it again with display:block; or to add a new HTML element (like a <div></div>) to the page.

You can use JS to assign classes and ids to elements, or to capture user input in text fields, and then do something with that data. It can execute code on an interval.

jQuery is some extra code that allows us to use Javascript for DOM manipulation more easily

I learned DOM manipulation with Javascript before I learned it with jQuery. Even though I was learning how to do things I’ve always wanted to do, it was very difficult for someone who was new to coding to understand.

I gave up for a while, and the next time I revisited JS, I wanted to try out jQuery. Everything made so much more sense. It was more intuitive, so I made less beginner mistakes. It required less actual code to do the same things, which meant I spent less time being frustrated at my PC and more time actually making stuff.

The Problem(s) with jQuery

Most static webhosts like Neocities don’t have jQuery installed on their webserver. When it isn’t installed, we need to include a link to the script that lets jQuery actually ‘work’. It might look something like this:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Code language: JavaScript (javascript)

If you don’t include this script before the jQuery you actually write, your script won’t work.

This isn’t the problem though – the problem is that, since you must load the original jQuery script, it loads with your page, and could impact your page’s loading time.

That’s why jQuery is offered in different sizes: uncompressed (readable), minified (no line breaks or spaces), slim (no ajax, readable), slim minified (no ajax, no line breaks).

We don’t need to worry about needing AJAX right now, but we’ll need it in the future. I usually pick the minimal version of jQuery.

That said, once you get the hang of jQuery, it will be much easier for you to ‘transition’ to doing things with vanilla JS. I like to think of jQuery as ‘programming training wheels’.

Depending on if you use jQuery, you’ll still encounter some simple ‘programming’ that needs to be done with Javascript itself, but nothing too intense! jQuery code syntax begins with a $.

So in summary, the main things to know about jQuery are:

  • It’s something you use with JS, it doesn’t replace it.
  • You need to include the jQuery script before any JS you write that uses jQuery.
  • Probably want to avoid using jQuery once you get good enough to not ‘need’ it anymore, since it is kind of bloaty.
  • jQuery syntax begins with $.

If you’re interested in learning JS to spice up your website, I recommend starting with the basics – Javascript arrays!



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.

Leave a Comment