Devember - Learning JavaScript

Greetings,

Welcome to my blog for #devember2k18.

I’m pretty much at the start of my journey in programming so I figured I’ll set myself a sensible task of learning JavaScript. In the past I have done HTML/CSS on a website called CodeCademy which was a fun and easy way to learn. I’d like to continue that same style by taking their JavaScript course, which they reckon takes around 30 hours; ideal for Devember!

Course can be found here: https://www.codecademy.com/learn/introduction-to-javascript

Nothing overly elaborate or interesting about my Devember challenge, but It’s inspiration to start a potential career. I don’t know if there’s much feedback involved in these challenges normally, but I welcome comments and suggestions!

I, FrogE, will participate in the next Devember. My Devember will be to learn JavaScript. I promise I will program for my Devember for at least an hour, every day of the next December. I will also write a daily public devlog and will make the produced code publicly available on the internet. No matter what, I will keep my promise.

Original Devember thread: Devember 2018

6 Likes

Best of luck bro!

1 Like

Have you got to hack with anything yet? :slight_smile:

I actually started this course last year but I’ve decided to start from the beginning again starting Saturday. I don’t really remember much from it, but I’m sure it’ll come back to me.

2 Likes

Day 1

Starting off logging things in the console; simple stuff. Next is commenting in the code, either to add notes or to disable lines of code.

  • Data types; number, string, boolean, null, undefined, symbol and object. Not sure how null and undefined differ but I’ll probably find out later on.

  • Mathematical operators; add, subtract, multiply, divide, remainder. I’m curious to see how often the remainder (modulo) comes up in general use.

Doing some string concatenation. The examples given seem clunky and pointless but I imagine there’s a point to it later?

Properties, such as string length can be found using dot operators. I’ve noticed that nearly everything I’ve done so far has used “console.log()”.

Methods are actions we perform, such as .log().

  • Played with .toUpperCase() and .trim()

Some objects are built into JavaScript, such as “console” and “math.”

  • Used Math.floor() and Math.random() to find a random whole number between 0 and 100.

  • Used Math.ceil() to find lowest integer greater or equal to a number.

  • Used Number.isInteger() to find if a number is an integer.

  • Read JavaScript documentation to find methods listed under the objects Math and Number.

I feel like I didn’t get lot done in an hour but I suppose that’s to be expected when most of my time is spent reading over typing. I feel like my brain is getting suitably warmed up for my coding over the coming month!

2 Likes

I’ll check it out when I’m done with my Devember, thanks for the link!

1 Like

On with the learning!

Day 2

Camel case is when you typeLikeThis. Do this for declaring new variables.

Variables store and label data. They are not values in themselves, but do contain them. I have created some of my own variables. Finding it tricky to get used to not using “” with numbers.

  • They cannot start with numbers.
  • Are Case sensitive.
  • Cannot be the same as keywords.
  • Not assigning a value to a let variable gives it a value of undefined; this can be changed later.
  • Const variables cannot be changed, as they are constants, they must be assigned values when declared.

Using mathematical assignment moderators. Putting them in code in the context of leveling up and other video game type stats.

  • +=, -=, *= and /=.
  • Also used ++ and --.

Using string concatenation with variables and it all makes sense to me now!

Using string interpolation and at first I thought it looked confusing but using it I can understand its benefits.

Used typeof operator. Not sure I get the point of this one.

Today felt shorter but also a little more challenging. I hope that I start to build good habits over the next couple of lessons as I’ve noticed I like to put numbers in “”.

1 Like

Day 3

Chucks me into the deep end and asks me to write code based on what I have learnt so far to establish a variable for temperature in Kelvin and convert into Fahrenheit. I felt like I wouldn’t be able to write code without any example code for reference but it worked out fine!

// This variable is a constant to establish a temperature set in Kelvin.
const kelvin = 0;
// This variable is a constant that holds the value of the temperature in Celcius.
const celcius = kelvin - 273;
// This variable is a constant that displays the temperature in Fahrenheit.
let fahrenheit = Math.floor(celcius * (9/5) + 32);
// Finally we display the message along with the temperature in Fahrenheit.
console.log(The temperature is ${fahrenheit} degrees Fahrenheit.); ```

Next it asks me to write some code to find out my age in dog years.

// My current age.
const myAge = 30;
// early years
let earlyYears = 2;
earlyYears *= 10.5;
let laterYears = myAge - 2;
laterYears *= 4;
console.log(laterYears);
console.log(earlyYears);
// My age in dog years
let myAgeInDogYears = earlyYears + laterYears;
// My name, don’t know why they asked me to make it all lowercase.
const myName = “FrogE”.toLowerCase();
// Displays message which uses the variables to display the relevant information.
console.log(My name is ${myName}. I am ${myAge} years old in human years which is ${myAgeInDogYears} years old in dog years.);

Next I get a short 11 question quiz; got them all right!

Onto an article about ES6.

  • Is the 6th edition of ECMAScript; guidelines for scripting languages.
  • Adds new ways to declare variables
  • Adds new function syntax
  • Adds classes; what are those? I’ll find out I’m sure!
  • Adds other stuff that doesn;t get mentioned in the article.

Today felt a lot longer than the previous two. I’m glad though because I felt like I got a bit more stuck in and hands on. Makes me feel like I have learnt more efficiently. Looking forward to what lies ahead!

2 Likes

The temperature conversion works, but you did some funny things :slight_smile:
Now I am no javascript expert, but you might have troubles down the line and not know what’s going on.

A const is something that doesn’t change. I mean if you were doing some math code, it would make sense to do something like:
const pi = 3.14159;
Because you are never going to change what pi is, unless you are doing weird physics. If you try and change the variable pi, you’ll get an error. So using it in a function where you are converting numbers doesn’t make much sense.

Also using let might trip you up. It should be fine to use var somenumber = 42;. let means that definition only applies to that little code block. You might intentionally want to do that though.

Does that make sense? Feel free to tell me to put a sock in it :wink:

1 Like

I appreciate your input. I’m going by what the course suggests I do. I think its just to get me used to using different ones for the sake of not getting used to only using one if that makes sense, i.e. telling me to use const merely for the fact that the value won’t be changing in this particular exerise.

Interesting about how let differs from var, I wasn’t aware of that. Thanks! I don’t think I know precisely what you mean by “code block”, I assume that will be covered later when I move onto longer bits of code?

Most things I read these days say to fully ditch var in favor of let for that very reason. Var will bleed scope when hoisted where let will not and will trip up less people actually because there’s less magic behind the scenes going on.

1 Like

Code block is scope. I can a better example when I get to my desktop. I just woke up.

1 Like

Thank you, I appreciate your input.

It does help me to know about var in either case because there may be an instance where I look at legacy code and need to understand it.

1 Like

Exactly. Another way to look at it is immutable vs mutable variables/objects.

1 Like

ECMAScript 6 standards started let and const over var, I believe.

It also ditched the semi-colon as a standard rather than a practice.

AKA ECMAScript 6 made JavaScript more enjoyable to write :wink:

I actually never saw a problem with semi-colons. It also helps me maintain muscle-memory if I switch over to something like C/C++.

@FrogE here ya go.

In short, stick with >=ECMAScript 2016 specs.

1 Like

Only declarations are hoisted; good to know, but why would you ever want to declare a variable after initializing it? My gut tells me I should be declaring variables before they get used.

This makes it more mistake tolerant.

1 Like

Ah well there you go, best practice stuff.
So using Let instead of Const would be good in your first example. Only problem you may find using let, is you declare a variable in one part of your code, and you cannot access it in another.
Say if you do something dodgy like declare a variable in a IF block. Just move the deceleration to the start of the code, and assign it when you need to.