CodeNewbie Community 🌱

Discussion on: From Front Desk to Front End p5 Beginning Javascript

Collapse
 
dennistobar profile image
Dennis Tobar

Wow wow... javascript is in the house!

I see you script and seems fine for your first week. A little note: document.querySelector is not null-safe: the function could return null or undefined and the innerHTML could be a function error, or just use .? to be a safe null use (see Optional Chaining)

wop wop, error...

Another piece of advice, is create a small library of functions: I see a lot of calls of document.querySelector, you could use

function qs(selector) => document.querySelector(selector)

qs(".food")?.style.backgroundImage = "url('../img/victoria-shes-unsplash.jpg')";
Enter fullscreen mode Exit fullscreen mode

Javascript isn't hard, but needs to study, especially to resolve problems or using functions to become your life a bit easier :)

See you next week :)

Collapse
 
taurist profile image
Tauri StClaire

@dennistobar Wow, again thank you so much for taking time to look at my code and give me some pointers!!!

I can see how optional chaining would help, sometimes I unexpectedly get 'nulls' and that may be why. Am I correct in understanding that the syntax for querySelector would be var title = document.querySelector.?("h1");

I'm not really understanding at all what you mean by libraries! Would you be down to break down for me what's happening in that function? I am very intrigued, it looks like you could plug "qs" and whatever class you wanted right in to that style property manipulation which would def save me time once set!

Collapse
 
dennistobar profile image
Dennis Tobar

The querySelector could return null, but you could use ?. when the next function or parameter is not expected to be null (and it's ok with that). A full descriptive article is here

Libraries?... I suggest if you use the same functions every time, everywhere, you can write a few functions as helpers to make the development in Javascript easier -and friendly.

For example, I said qs as a shortcut to document.querySelector, you would create another function as qsa as a shortcut to document.querySelectorAll, and so on...

let qs = (selector) => document.querySelector(selector);
let qsa = (selector) => document.querySelectorAll(selector)
Enter fullscreen mode Exit fullscreen mode

If you feel lost, don't be afraid; in the next chapters or parts of your course, you will learn about functions and how to improve the readability of your javascript :)

Image description

Thread Thread
 
taurist profile image
Tauri StClaire

Thank you for elaborating @dennistobar! We're still going over functions a lot, so I'm going to focus on my lessons first then certainly come back to what you're saying bc I'm all for saving time!