I’ve Cracked The Code, Please Call Tech Support- Episode 8, The Far From Last JavaScript

Whew! After a week off of class between units, we’re right back into it. It feels good, actually. I spent the last week learning as much about JavaScript as I possibly could in order to prepare, and I feel like I’m finally getting a handle on this. Obviously that is subject to change, but I’m getting the fundamentals down, which is nice.

  1. Describe one thing that you’re learning in class today.

One thing that we’re digging into is how to manipulate our website elements with JavaScript. JavaScript can be a little brain-breaky to figure out, but it’s also a powerful tool when wielded correctly.

For instance. say that you’re programming a game, and want to have the user type something in in order to get a result. Users type fast. This means typos. This means that, without a method of correction, you’re trying to program for every single possible misclick. Not good.

Alternatively, you can set your element to use methods such as .toLowerCase() and .trim(). As it’s name implies, .toLowerCase let’s us take all of that information in and convert it all to lowercase. So, hEllo becomes hello. .trim() let’s us remove spaces from around a string, so “ hello “ becomes “hello”. Much, much more manageable.

2. What is the difference between == and ===?

This was one of the things that was hard for me to remember when I was first starting to learn JavaScript, and it still trips me up on occasion. The first one (==) means “equal to”. Fair enough. BUT, we often need more specificity in coding. What does that mean?

Let’s say that you’ve got a variable, x (don’t worry, the math is easy here). Let’s also say that x = 5. Cool. x is 5, got it.

That’s basically what == tells us in coding. If we’ve got x == 5, or x ==”5", the computer goes “True”.

That is also part of the problem, though. See, in coding, 5 and “5” are different things. Weird, right?

5 is a number. That’s easy. The computer knows that it’s a number and that 5 + 5 = 10. Done-zo.

However, the computer reads “5” as something called a “string”. The computer sees this as a kind of object, rather than a number, and treats it in the same way that it would if you gave it “word”. So, in the same way that “word” + 5 = “word5”, 5 + “5” = “55”.

This is where === comes in. == Can’t tell the difference between a number and an object, whereas === knows that a number isn’t the same as a string. So, 5 === “5” would return “false”.

3. What is the vale of foo? var foo = 10 + ‘20’;

Okay! This is what we just spoke about. We know that 10 is a number, and ‘20’ is a string. So, foo = ‘1020’

4. Describe what a terminal application is.

A terminal application does what it says on the tin: it is an application that can run in the terminal. For example, recently we completed a homework assignment that required us to make a game of Rock Paper Scissors. By writing a program that compared two values (hand1 and hand2), you can tell the computer how to compare them, and which hand beats which hand. Easy to understand.

But with this, you can also play the game just by using something called the terminal. The terminal is an interface window that we use in order to display the command line of the computer, and tell it what to do. It’s all text.

Therefore, a terminal application is a program that can run entirely within the terminal. In the case of Rock Paper Scissors, the program will ask “What does hand1 do?” then “What does hand2 do?”. It will then compare the input and give you the result of the game.

5. What is the ternary operator?

A ternary operator is a shorthand way of writing out a comparative program. So, let’s say you want a program to run only when a certain condition is met, and if it isn’t, do something else. We can write this two ways:

for (wantApple === true) {

if (haveApple === true) {

eatApple();

} else {

getApple();

}

};

For this example, we want an apple. So, we set up the conditions. If I have an apple, I run the eatApple() program. If I don’t, I run getApple().

We can do this another way, with ternary operators:

for (I === want apple) {

return haveApple === true ? eatApple() : getApple();

This is the same program as before, but it uses the “?” for “if”, and “:” for else. It is also much harder to read. You kind of have to sit with it in order to know what’s going on. For me, if/else is the way to go. People will understand the code more easily, and be able to make edits far more effectively.

6. What are some ways to ensure that your website design or web application is accessible and user-friendly?

We spoke of using methods like .toLowerCase() and .trim(). This makes life a lot simpler on the user by not requiring their input to be perfect. If we can ever make it easier on someone to enter their info, that’s what we want to do.

Another option, if possible, is to remove as many chances for mistakes as possible. If it’s a set number of options, and you already know what that entails, use a dropdown list or checkboxes rather than a text box. Methods like this make people much more willing to engage with your content, and you get cleaner data back.

7. What are your favorite features of HTML5, and how have you implemented them in your front-end development projects?

Even with all of my complaints about them, one of my favorite features of HTML5 is the forms element. These inputs, when used correctly, can help to get the exact information that you need, in the exact format you need it in.

For example, we recently created a portfolio page. Within that is a “Contact Me” segment. So, I set up inputs that were easy to understand, and prevented the user from having to enter info a bunch of times. For email, the input required the “@ website.com” choice (without the space.) For phone number, this required a (***) ***-**** format. So, the system will the the user know what is required, and nobody gets confused.

8. How do you structure your CSS and JavaScript to make it easier for other developers to work with?

Comments, comments, comments. It’s so important to annotate your work to let people know what does what. By doing this, when you’re coding the section in question, it makes life so much easier both on other people and your future self. “Oh no! Something broke in this section!” You can just go to the code, find that section, and see what’s wrong. It’s the best.

9. What’s your process for addressing browser-specific rendering problems? Do you find that a certain browser is more challenging to work with than others?

This is something that I haven’t dealt with much (so far). However, I have ran into issues when I go from Google Chrome to Safari. This is a work in progress, as I am still learning, but by going back and forth between the browsers and comparing and contrasting changes I can find a happy medium between the two.