Still working on my opening sentence…. eventually it will draw you in.
As mentioned in my first article (shameless plug), I purchased a Udemy course on learning JavaScript from scratch. I am roughly a week into this new JavaScript hobby which equates to eight or nine hours of course content. This includes lectures, assignments, and code challenges.
The purpose of this post is a few things:
- Convey (for my own benefit) what I have learned so far
- Hold myself accountable on the goal of posting on this website
- Show the internet it is easy to get started
JavaScript Basics
I will try to convey some basic concepts of JavaScript. With no prior coding experience or any technical background, this will likely read like a children’s book to any experienced programmer. My intent is to describe it in a way that allows people unfamiliar with JavaScript, to understand it. By the way, I have been using web developer, programmer, and coder interchangeably. What is the right term????
Anyway, back to JavaScript. JavaScript is a programming language that is widely used in the world of web and mobile applications. Typically (I think), it is used with HTML and CSS (two other programming languages). Basically, if you ripped the face off of this website, you would see a bunch of text and symbols which bring this website to life. The way I understand it is that HTML is the format and layout of the page. I do not know the language yet but you would write some code to say things like “header goes here” or “paragraph starts here”. CSS is what provides the page with some style. You may write some code to say “paint this page blue”. Lastly, JavaScript is the code that produces action. “When you push this button, this happens”. Apparently, that's all the internet and applications are! Who knew, so easy!
So what does this all look like? If you want a hint, right click the page and select “inspect”. This brings up the guts of the page. This is HTML, CSS, and JavaScript (again, I am pretty sure…). Someone slammed on their keyboard for hours to make all that.
Creative transition sentence (lol)
I am going to dive into some basic JavaScript basics from the Udemy course. This is the course (https://www.udemy.com/course/the-complete-javascript-course/). Highly recommend it so far.
JavaScript is made up of all these different “things” for lack of a better term. These things are numbers, strings, booleans, variables, functions, if else statements, arrays, and loops. I am only scratching the surface of JavaScript with these “things” but I attempt to describe each below. After the description, I hope to tie it all together.
Numbers — this is straight forward. These are numbers… 17, 38, 54.32 etc.
Strings — strings are a group of characters used as text. You always put these in single quotes. ‘Kevin’, ‘Pineapple on pizza’, ‘cars’, ‘17 38, hey’, etc.
Booleans — booleans are statements that are either true or false. They are used to make decisions.
Variables — variables are kind of a container or storage for some type of value. When you are typing code you define a variable similar to math. I can have the variable “favoritePizza” and make the value of that ‘pineapple pizza’.
Functions — functions are these little snippets of code that do something. This can be useful in the sense you code a function once, then you can reuse it throughout your code. For example, you can create a tip calculator. Then whenever you need to calculate a tip, you call on your tip calculator function instead of doing math again and again and again.
If else statements — these are statements in code that will execute code IF a value is met. And if it is NOT met, you can have a secondary piece of code that executes.
Arrays — arrays are a container for strings. For example, I could have an array called myPizzas which could store ‘pepperoni’, ‘cheese’, ‘buffalo chicken’. I can call on myPizzas to see all of those values later on. These containers can also be constantly modified.
Loops — I do not really know how to describe loops but loops can be used to run through arrays. Hopefully my example helps below.
Those are the major pieces I have learned so far. Let’s see if I can tie some of it together in an example.
Exciting Coding Example
What I am going to do is create some variables and a function to figure out how many miles we can drive before we run out of gas. First I am going to define a variable ‘mpg’ (miles per gallon):
Next, I will define my car as a string:
Next, I am going to write a function called milesUntilEmpty:
What you see here is me defining a function milesUntilEmpty. The parentheses hold what you put into the function. Inside of the brackets is what the function does. So what I am doing here is entering a gallon amount into the equation and inside the brackets you will see that the function will return mpg * the gallons you input. We know the value of mpg because we defined it above as 35. Whatever we input as a gallon amount will multiply it by 35.
Lets say I went to the gas station and got 5.4 gallons. I input that into my function (the console.log thing you see lets us see the output):
There is our first function working before our eyes 5.4 * our 35-mpg car = 189 miles until empty. Shake my hand, you’re a programmer now.
I am going to take it a bit further and touch on some of the other concepts from above.
Every time we log a calculation, I want to store it for my records. So I will create an array titled gasChecks. This looks like:
The info we collect will get input into those brackets. It is empty right now.
I took the code a bit further and created a little pop up that asks how many gallons you have left in your tank. This references the myCar variable we created earlier. The answer to the question is stored in a value which gets put into the function we created. We then use an if else statement to decide the response.
Here is in action:
Lastly, I am going to push some fake values into the empty gasChecks array and use a for loop to run through the values. The for loop runs through the array to tell us the values in it:
The .push() function is pushing those values into our array for storage. Then we say console.log to print out a statement ‘Here are your previous gas checks:’. Following that, the for loop is basically saying, go through the gasCheck array and print out each value in it with ‘Gas check number’ before each one. When run, this looks like:
That was a high-level explanation and would not expect any non-programmers to fully understand it. But guess what? You could grasp it in ONLY a couple hours a day over the course of a week.
Follow for more!
Follow me on twitter Medium Jevin (@medjev) / Twitter.
Prior article:
Learning JavaScript — a beginner’s journey | by Med Jev | Mar, 2023 | Medium
