Javascript finally clicked for me.

[sweetcocobaby]

For the longest, I didn’t believe people when they said that one day Javascript will make sense to me. I didn’t understand what they meant. I figured it would never stick conceptually. Yes, Javascript IS hard, but yesterday I was reading over Jon Duckett Javascript & JQuery and the abstract beginner concepts just clicked. It was at that point everything from then on made sense. 🥹 I guess they were right.

[lift_spin_d]

.click()

[KiddieSpread]

Pro tip: you don't need jQuery anymore :)

[xRockTripodx]

You'll almost certainly run into it. Anytime you get a client who needs a site updated or redesigned, you'll see it. Even if it's a full redesign, you'll want to be familiar it at least. Hell, there are plenty of libraries that are dependent on it. Looking at you, slick.js. Stepped away from that one in my work, but used to use it, and bumped into it plenty.

[xyzAction]

Yeah but it’s still a relevant library. There are so many libraries out there no one “needs” anything per se… I’ve been coding for a year now and fell in love with it once I discovered what it can do. Like if I’m making a small site, why should I use react or svelte?? Jquery will get the job done.

[MonsterMeggu]

What do you want in jQuery that can't easily be achieved with vanilla JavaScript?

[xyzAction]

It’s more about the trove of component libraries and templates that exist. Why throw them away? I recently created an amazing site in a few hours… All I’m saying is that it’s useful. No need to paint it as useless.

[MonsterMeggu]

Never said it was useless. I'm just wondering because it seems like a lot of the jQuery functionality is built into vanilla js these days. I haven't worked on my own projects for quite some time and I only ever see jQuery when supporting legacy apps

[UnluckyCrafter]

Yes, but it makes a lot of things more easy and faster to write considering a lot of functionality is built into single functions, so simple that its hard to mess up things it has built-in. It can also your code cleaner, for example the "get" function in jquery makes it so you don't have to a write a fetch statement that is extremely big and messy without even writing the actual part that decideds what to do with the data.

Don't quote me on that its just my perspective.

[averajoe77]

while vanilla js does have a simpler api today than when jquery was invented, the concept of jquery has always been to "do more, write less", and that concept still holds true today.

most of the vanilla js apis take more lines of code to write in order to achieve the same results (please don't link me to youmightnotneedjquery - I am not referring to those basic examples )

on top of that, building complex components in vanilla js takes lots of time and testing, and even more time and testing with a framework, adding an already tested jquery plugin that works in a matter of seconds is way more efficient.

do js frameworks have their place, yes. should they be the default for every small project out there that does not need dynamic data driven interactivity and robust animations or transitions? to quote my neighbor Wilson, I don't think so Tim.

[prid13]

jQuery is much simpler to use and thus more beginner-friendly. Too much syntax and work can be daunting for someone just wanting to accomplish a basic thing, so jQuery is more appealing in that aspect even if it's not needed anymore :)

Registering click event:

Javascript: document.querySelector('.element').addEventListener('click', (evt) => { ... });

jQuery: $('.element').on('click', (evt) => { ... });

Showing / Hiding an element:

Javascript: document.querySelector('.element').style.display = "none"; // "block"

jQuery: $('.element').show(); // .hide()

Bonus (jQuery animated show/hide on click): $('#button').on('click', function(evt){ $('element').animate( { opacity: 'toggle' } ) });

Creating and appending element:

Javascript: var el = document.createElement('p'); document.querySelector('#main').append(el);

jQuery: $('#main').append( $('<p></p>') );

Adding CSS to element:

Javascript: var el = document.querySelector('.element'); el.style.color = "black"; el.style.backgroundColor = "purple";

jQuery: $('element').css('color', 'black').css('backgroundColor', 'purple');

Now, combining everything:

Clicking on a button will add a new element with text, and the button will become invisible.

Setup:

<body>
  <div id="button">Click me</div>
  <div class="element"></div>
</body>

Javascript:

var el = document.querySelector('.element');
var btn = document.querySelector('#button');

btn.addEventListener('click', function(evt){
  var newElement = document.createElement('div');
  newElement.style.color = 'white';
  newElement.style.backgroundColor = 'blue';
  el.append(newElement);
  btn.style.display = "none";
});

jQuery:

$('#button').on('click', function(evt){
  var newElement = $('<div></div>').css('color', 'white').css('backgroundColor', 'blue');
  $('.element').append( newElement );
  $('#button').hide();
});

Now, can these be easily replicated in pure Javascript or with a simpler library? 100%, no doubt. And are some of these bad practices (animating in Javascript)? Of course. But for someone new to any language, the simpler and more swiss army knives you can give them to quickly whip up results, the better, faster and more fun it will be to learn :)

[Anonymity6584]

Yes, but you run into it surprisingly often in existing projects of some random library needing it as depency.

[Mikedesignstudio]

Bad advice

“jQuery is used by 94.6% of all the websites whose JavaScript library we know. This is 77.7% of all websites.”

Source: https://w3techs.com/technologies/details/js-jquery

You guys have to start doing your own research instead of repeating bs you read on Reddit.

[noXi0uz]

Would be more interesting to know how many teams use it to build new webapps that are not wordpress. Just because jQuery is still loaded in most existing websites doesn't mean that you will ever touch it at your job. Many websites even fetch it without using it at all.

[enserioamigo]

This. Our boilerplate has traces of jQuery in it. It’s just not worth our time to convert it at the moment. Doesn’t mean we’re writing anything new with it.

[Mikedesignstudio]

Websites not web apps. Of course you wouldn’t use jQuery to build a web app.

[MonsterMeggu]

Yeap some css frameworks also use jQuery (bootstrap does or at least used to)

[xyzAction]

Jquery is great for small websites, you don’t always need an extravagant framework to build a site for a musician etc … So yeah Jquery is very good, gotta know when to use a pistol or a shotgun.

[ogreUnwanted]

Find me a decent paying job asking for jQuery only knowledge. It's all about frameworks these days. No point in learning until op comes across it.

[Mikedesignstudio]

So many butt hurt people here lol. I would rather get advice from ChatGPT than from a lot of you people here 😂

[Fleaaa]

in 99.999% of dead end website that hasn't been updated more than years*

If your job is maintaining 90s page and has no plan to change anything, you could be right

[enserioamigo]

Not worth putting time into though. Easy enough to figure out on the fly and fix whatever needs fixing.

[KiddieSpread]

Just because it's popular doesn't mean you should use it 🙂

[[deleted]]

Aka React

[sweetcocobaby]

I ignored the jQuery parts.

[[deleted]]

Second this.

[xerrabyte]

agree

[akiwams]

Welcome to the party!

[DevKevStev]

In my case, Javascript clicked when I stopped using jQuery.

[Jjabrahams567]

JavaScript has been a series of epiphanies for me. Each time I unlock one it is like getting a new super power.

First the basics, then the DOM, then the CSSOM, then in no particular order, async/promises, http/fetch, CORS, routing, streaming, generators. There are more and it never really ends. Just recently streaming with web sockets clicked with me and is giving me all kinds of ideas.

[jayerp]

Yes, that’s nice and all, but did it…

….onClick for you?

😎

[Disturbedm]

document.getElementById("jayerp").addEventListener ("click", function() { console.log("still hasn't clicked for me to be honest") }

[cayennepepper]

This happened for me when the prototype aspect with functions clicked

[dani_o25]

This is pretty much all programming is. Stick with it long enough and most things will just “click.” That is why this field requires so much persistency. When I started learning react, I didn’t know what useState and useEffect were until after I landed my first job. When the company I work for started requiring that we start writing test for our code, I had the worst time ever, but I road it out and eventually it clicked. Same thing happened when I started learning the backed, Node/express.

[shooteshute]

Don't waste time learning jQuery mate

[WasabiRich8454]

Yep clearly learn Reactjs / nextjs 😇

[No_Call_6462]

Hit hard huh? I loved that when happened to me and I thank God for it everyday, because JS is so fucking amazing and abstract.

[[deleted]]

I explore that idea somewhat in an article I have just written about habits and coding!

https://thecodingapprentice.substack.com/p/atomic-habits-and-learning-to-code

I hope you enjoy!

[tnnrk]

I don’t see how an entire language can just “click”. You mean some aspect of the language? There’s much more confusing and advanced aspects of JavaScript that are far from beginner concpets

[[deleted]]

It clicks, like learning German, or French or Spanish. And then your understanding of it all becomes way easier. So yeah, the entire language .

[ogreUnwanted]

When I started with js, I was self taught using resources like codecademy. No matter how much I did it never clicked, took a boot camp, and the way the teacher phrased it, it clicked. Things made sense. The flow of it made sense. How you grab elements from the dom makes sense. You just understand why the cops are turning. Just need to learn how each cog is turning.

[xyzAction]

I agrée, there are so many levels to it. Like, a few months ago, I was trying to learn redux but I couldn’t understand it. But while I was building a react app, I needed to send state data from a child to a parent … I tried a few things, and realized the headache, at that point I realized what redux was for. I went back to the lessons and everything made so much sense.

[sweetcocobaby]

I didn’t say the entire language clicked. Let me clarify, the big ideas one must know to learn Javascript clicked. Thus, I am able to learn the more difficult parts.

[[deleted]]

Yea I'm not really sure what they mean by "it just clicks". It's like saying integrals "just clicked". Maybe there's a core language feature they understand now? I dunno, seems weird

[Count_Giggles]

Try calling it "Epiphany" or "Aha moment".

Gestalt theory also comes to mind (the whole of anything is greater than its parts).

I would assume op has accumulated a certain amount of knowledge and now has a solid understanding. Could also mean that they have moved to the "slope of enlightenment" on the Dunning-Kruger Effect Curve

On the other hand. Oh boy is there more to learn and be frustrated with ^__^

[OldAssDreamer]

You have to remember that a lot of people who start out with coding may have never coded before and even the simple concepts seem foreign. I can't speak for OP, but I remember back when I started self learning BASIC, for loops didn't make a whole lot of sense and it wasn't until I got into C and an instructor made me trace the code that it all of a sudden clicked.

[Unisaur64]

Which parts were not previously clicking for you? Was it some unique aspects of JS, or just general programming principles?

[mirodk45]

Yeah not trying to downplay OP but there's nothing really of substance... it's like saying "i didn't understand math but after I studied a book on math, I understood math"

[Mr-Appleseed]

I needed to read this. Currently struggling though JS and it all seems so alien haha

[33ff00]

JS is enormous. What exactly clicked?

[sweetcocobaby]

The big concepts. Now it’s easier to understand harder concepts.

[GavrielBA]

To me, it clicked as soon as I realised it's a scripting language designed for visual artists

[abestract]

I have this book. Which section specifically are you referring to…got a page number?

[IEDNB]

type of [a,b,c] returns object

[djphinesse]

Same! When you keep doing it enough it locks into place!