{"id":1927,"date":"2024-05-08T08:41:57","date_gmt":"2024-05-08T14:41:57","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1927"},"modified":"2024-05-08T08:41:58","modified_gmt":"2024-05-08T14:41:58","slug":"5-things-designers-can-do-with-javascript","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/5-things-designers-can-do-with-javascript\/","title":{"rendered":"Five Basic Things About JavaScript That Will Help Non JavaScript-Focused Web Designers"},"content":{"rendered":"\n

Let’s say you don’t know JavaScript. <\/p>\n\n\n\n

Like, at all. <\/p>\n\n\n\n

You haven’t needed it. You’re a web designer and you’re focused largely on UI and UX. Your skills with design tools, HTML, CSS, and team communication have served you well.<\/p>\n\n\n\n

But you know what JavaScript is<\/em>. It’s another part of the native web. It’s powerful. It can make websites do stuff<\/em> beyond what HTML and CSS can do alone. You don’t even care to deeply<\/em> learn JavaScript, you just want to get a ton of bang for the buck<\/strong> and learn things that will help you do your existing job better.<\/p>\n\n\n\n

Let’s look at some things you could learn in a day that will give you that bang for the buck.<\/p>\n\n\n\n

\n

We’re going to look at JavaScript code from here on out. But just so I don’t lose anyone, let me make clear where<\/em> you would put this JavaScript code to make it work. You’re put it at the bottom of the HTML of the page you’re working on, before the closing <\/body><\/code> tag, put a <script> \/* you're code here *\/ <\/script><\/code>. That code will run when any URL that uses that HTML loads. <\/p>\n\n\n\n

If you’re writing a lot of it, or want to apply it to multiple HTML documents, you could also do <script src=\".\/script.js\"><\/script><\/code> and put the JavaScript code in there. That references a file called script.js<\/code> that you would make and put next to the HTML. <\/p>\n\n\n\n

Also, a lot of this code will run in the DevTools console in any of the browsers, so you could copy and paste it into there and hit Enter to try it.<\/p>\n<\/div><\/div>\n\n\n\n

1) Learn to Select Things<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

In JavaScript, you often want what’s called a reference<\/em> to an element. That is, a variable that represents the element in the DOM you’re trying to do something with. <\/p>\n\n\n\n

Believe it or not, you’re at a real advantage here. Since you already know some CSS, those selectors are exactly what JavaScript can use to get it’s hands on those elements.<\/p>\n\n\n\n

Say you had HTML like:<\/p>\n\n\n

<header<\/span> id<\/span>=\"site-header\"<\/span>><\/span>\n  <h1<\/span> class<\/span>=\"logo\"<\/span>><\/span>My Website<\/h1<\/span>><\/span>\n<\/header<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
If you wanted a reference to that <header><\/code> element, do it like this:<\/p>\n\n\n
const<\/span> header = document<\/span>.querySelector(\"#site-header\"<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The \"string\"<\/code> inside that querySelector()<\/code> function is essentially the same as the CSS selector #site-header<\/code>. <\/p>\n\n\n\n
If you wanted the logo, you could do:<\/p>\n\n\n
const<\/span> logo = document<\/span>.querySelector(\".logo\"<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
You might be thinking to yourself: but CSS classes might apply to lots<\/em> of elements, how does it know which one to get? The querySelector<\/code> function will select the first<\/em> one it finds as it starts looking from the top of the HTML. If you intentionally want to look for and get a reference to a whole set of elements, look at querySelectorAll()<\/a>;<\/code><\/p>\n\n\n\n
2) Learn to Update Classes (i.e. Toggle Stuff)<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
#1 is a big concept, but it doesn’t actually do<\/em> anything, it just helps you get those element references. Now let’s enact a real change<\/em>. Let’s add a class to that header element we’ve got.<\/p>\n\n\n
header.classList.add(\"dark\"<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
That does exactly what it looks like. It adds a class to that <header><\/code> element, so now the HTML (the “DOM”, really) will be like this:<\/p>\n\n\n
<header<\/span> id<\/span>=\"site-header\"<\/span> class<\/span>=\"dark\"<\/span>><\/span>\n  <h1<\/span> class<\/span>=\"logo\"<\/span>><\/span>My Website<\/h1<\/span>><\/span>\n<\/header<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
As an HTML and CSS person, I imagine you can feel the power here. You can change any styling you want<\/em> when you’ve got a class name you can select and use.<\/p>\n\n\n\n
In fact, think about how you can change classes all the way up on the <html><\/code> element. A class there means, through the power of CSS, you can change the style for anything<\/em> on the page.<\/strong> As a neat bonus, you don’t even have to querySelector<\/code> for the <html><\/code> element. JavaScript automatically has a reference to it available.<\/p>\n\n\n
document<\/span>.documentElement.classList.add(\"paying-user\"<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
element.classList.add(\"javascript-enabled\"<\/span>);\nelement.classList.remove(\"loading\"<\/span>);\nelement.classList.replace(\"cat-lover\"<\/span>, \"dog-lover\"<\/span>);\nelement.classList.toggle(\"open\"<\/span>);\nelement.classList.toggle(\"raining\"<\/span>, weather === \"rain\"<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
3) Learn to Listen for Events (e.g. Scroll, Click, and Change)<\/h2>\n\n\n\n
Selecting elements and changing classes is powerful, but it’s very likely you’re going to want to do that when<\/em> something happens. The when<\/em> in JavaScript is often an event<\/strong>. It’s another API that allows us to “listen” for events. Events are happening all the time! It’s our job to respond to them when they happen.<\/p>\n\n\n\n
The click<\/code> event is the ultimate classic. You’ll want to attach click<\/code> events to elements that can receive focus. A <button><\/code>, for example, is perfect. You can<\/em> attach a click “handler” to a <div><\/code>, but it’s a bad choice as a <div><\/code> isn’t focusable. Many users use their keyboard only to navigate the web and may rely on screen readers to interact with it, and would be unable to “click” a <div><\/code> with a click hander.<\/p>\n\n\n\n
Imagine our header has a button in it:<\/p>\n\n\n
<header<\/span> id<\/span>=\"site-header\"<\/span>><\/span>\n  <h1<\/span> class<\/span>=\"logo\"<\/span>><\/span>My Website<\/h1<\/span>><\/span>\n  <button<\/span>><\/span>Switcheroo<\/button<\/span>><\/span>\n<\/header<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
First we get a reference to that button, then add our click handling function:<\/p>\n\n\n
const<\/span> button = document<\/span>.querySelector(\"button\"<\/span>);\n\nbutton.addEventListener(\"click\"<\/span>, () => {\n  \/* Code in here will run when the button is clicked *\/<\/span>\n  console<\/span>.log(\"Button was clicked!\"<\/span>);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Hopefully that code above is clear. We selected the button, and we added an event listener for the event type click<\/code>. Don’t worry much about the rest of the syntax for now, but just know that code within those { }<\/code> “curly braces” will run when that button is clicked. <\/p>\n\n\n\n
I slipped a little bonus in there for you: console.log()<\/code>. This little beautiful function allows you to send messages to the browser DevTools. If I have those DevTools open (Cmd\/Control – Option – J) I can see the message output there, which is a nice “sanity check” that things are working.<\/p>\n\n\n
\n
\"\"
You can send just about anything to console.log()<\/code> inside those parenthesis. Try selecting an element and putting the variable name in there.<\/figcaption><\/figure>\n<\/div>\n\n\n
Inside our new { }<\/code> in that “click handler function”, we could do the job we already know how to do: update a class.<\/p>\n\n\n\n
That classList<\/code> API<\/a> allows you to add, remove, replace, and toggle classes, as well as check to see if an element contains a certain class, so you’ve got a lot of control there. <\/p>\n\n\n