So what exactly is JavaScript and how does it relate to the world of learning how to code and becoming a web developer?
Well that’s what we’re going to explore and breakdown some of the core concepts of the language.
I remember when I first started learning how to code and javascript made absolutely no sense to me.
It felt like I was never going to get it.
Usually when anyone starts getting into coding its fun and its cool, especially when you’re first learning the languages HTML and CSS.
It’s pretty easy and straight forward.
HTML is like the skeleton and the CSS is like the skin.
But if you really want the body to move you’re gonna have to add some muscle, this is where javascript comes into play.
Javascript helps to give some movement to your webpage and even some excitement, in other words the interaction, even if it’s just the simple click of a button.
One action with javascript can seem overwhelming when first attempting to code it, but when you accomplish it feels like the greatest feeling in the world.
Almost like you won the championship game…
Am I right?
But I don’t want to scare you off with how hard javascript can be…
Actually I want to show you there can be an easy and better way to approach this scripting language.
In fact, over the years of learning, and still learning btw, I have begun to see some patterns that I think can help others along the way.
Patterns I wish I knew earlier.
This will not be an in-depth tutorial on javascript, but a simple overview and introduction into this amazing language.
I will also provide some tips that you can use to help learn javascript for yourself.
If your ready then lets get started shall we?
*Disclosure: This post may contain affiliate links, which means I’ll receive a commission if you purchase through my link, at no extra cost to you.
What is Javascript?
JavaScript can be defined as many things, but I would like to explore it in its simple form.
I found it easy to understand and thus giving me more confidence in learning the language.
Before we begin defining what javascript is I want to define what a script in coding is and what all programming languages share in common.
A script is simply a set of instructions a computer can follow to complete a task.
Does that make sense?
Ok so now for JavaScript, which ironically has no relation to the programming language java.
Javascript can be defined as a set of instructions given to your web browser to complete a task.
Overall JavaScript creates interactivity to websites.
For example, when you press a button on a webpage and then an action follows after, in other words something happens…
You have just seen JavaScript at work.
But don’t think that JavaScript is only about pressing buttons.
In the examples below there are more ways to use JavaScript, and the only limit is your creativity.
These are not the only examples that you can do but its is an idea of what you can do.
Here is a simple project I created myself with Javascript.
Its a simple math quiz to test your multiplication tables up to 20.
For example whats 13 x 3 or 16 x 5.
It was fun project I wanted to test my javascript skills and at the same time creating an application with a useful purpose.
When you begin to learn the fundamentals and the nuances of coding then it can truly become fun.
It’s like you have a super power and control over the internet.
I won’t lie and say it’s all fun and games.
There are moments when your program can come into contact with an issue and it is now your job to fix it.
Why, because the computer can only do what you tell it to do.
But the feeling when you figured out the problem and what was causing it can be described as…
Amazing!!!
When you do you can consider yourself a coder because that is what I think learning to code is all about.
Finding problems and creating solutions for them.
If you don’t get anything else from this post I want you to remember this one concept.
Coding is all about solving problems… PERIOD.
If you can do that then your set.
Even learning how to code is a way of you solving a problem because the original problem is you don’t know how to code and now you want to learn…
Therefore you are taking steps to finding out how you can solve this problem.
Incase your curious about some of the benefits of learning this new skill and language then I suggest you check out this post on the benefits of learning how to code.
But as I said before I’ve discovered some patterns.
I’ve really seen 7 fundamental things that you should study and understand if you want a good grasp on the language.
Think of these 7 things as the core concepts you should master.
Why because in reality these 7 fundamentals can be transfered into learning other languages.
But Courey what do you mean?
I mean when you start to study other programming languages you are going to see similarities.
In other words the same syntax, or language, used for other coding languages.
Then it will become easier for you to comprehend and learn other languages.
Therefore with these 7 fundamentals that we are going to dive in a little more you should get to know them and study them individually.
Learn how they work together in the amazing world of code called javascript.
So what are the great 7?
7 Fundamentals of Javascript
Now onto the fundamentals of the language.
Ii I haven’t said it enough I’ll say it one more time…
There are about 7 core fundamentals that once you learn and master coding will become easier to grasp.
The 7 fundamentals are as follows:
That’s it.
Of course there are more details within each fundamental, but overall this is what JavaScript is made up of.
Once you master these basics and start practicing and creating simple projects then making more complex ones will make more sense.
Everything we do can be broken down to the simple basics.
Albert Einstein once said…
“Genius is taking the complex and making it simple”.
You can flip that statement around as well and say that genius is taking the simple and making it complex.
How many times have you come across something that looked difficult or complex and when you found out what it really was it was really simple and easy.
That’s why if you take these 7 fundamentals and learn them individually in respect to their functions, no pun intended…
Then building and coding becomes really fun and ideas for projects begin to flow in.
Does that seem simple enough?
Learn the 7 fundamentals and your well on your way to becoming a master coder.
Ok now for a brief introduction of the special 7 as well as a birds eye view of what I think they can be broken down into.
Again this is not a full breakdown of each concept but if you would like to read more on them then I definitely recommend you check out this book.
I swear by it and I use it every time I need to refresh my memory.
But let’s start with the basics…
1. Data Types and Variables
In code data types are basically the different types of information the program can understand.
For example 3 key types of data (information) javascript can understand is
- Strings (text or words)
- Numbers
- and boolean statements (simple true or false statements)
These 3 types of data types is important because you will need to understand how the code can respond to what you want with this information…
Especially when you want to use a variable.
And a variable is simply how you store that information into something else.
For example, for the data type: String, I would write a snippet of code and store it in a variable called “name” and write my first name.
var name = “Courey”;To break this down, this expression makes a reference to the String data type (“Courey”) and “stores” it with an identity of “name”.
I know that can sound confusing but all I am saying is…
I created a piece of information (my name) and I wanted to save it with another piece of information…
The name of the variable which we simply used “name”.
Therefore, if I ever want to use my name again in the program I would write the variable “name” and javascript will recognize what I am asking for “Courey”.
Does that make sense?
So, if I were to start from the beginning and learn what data types and variables were…
I would practice writing and using these simple concepts until I became familiar with them.
2. Functions
Javascript functions were probably the hardest thing for me to grasp, but with time and practice it began to make sense.
I’ll give an example of how function works in real life and I think that will help to communicate what a function can do.
Let’s say you had a favorite sandwich you loved to make everyday but then you had some work to do.
Then your friend offered to make the sandwich for you.
The only thing is you had to show them how to make it the first time.
Luckily you wrote down the instructions already so you wouldn’t have to show them how to make it every time.
All they would have to do is read the instructions and repeat what you said word for word.
Therefore the instructions acts a guide or a manual for your friend to make the sandwich as many times as they want.
All you had to do was write it down and it would show them how to make it every time.
This is how a function works.
The sandwich manual is an example of a function because you created it one time.
Now whenever you want to make the sandwich again perfectly all you have to is look at the manual.
In javascript terms you would “call the function”, which in this case is the manual, and you will have a perfectly made sandwich.
Cool right?
Can we say automation?
3. Arrays
Now Arrays are probably one of the easiest things I can describe.
Think of arrays as lists.
Plain and simple.
When you see an array that means you have a list of items or data types.
Now of course these lists can become very complex and even mixed with different types of data but just know at the heart of the array it’s a list.
The next thing you need to learn to do is how to filter through it…
but that’s another story in itself.
Again if you want to learn more about these concept and have a good book to read then definitely check out javascript and jquery.
4. Loops
Another simple concept I think are loops.
Again when writing the code and learning how to use it can seem complex but at its core a loop is how to have something repeat itself.
So for example, things might get a little complex here but let’s use the function example we made earlier.
Let’s say you and your friend thought the sandwiches you were making were amazing and you wanted to share your ideas with others by opening a restaurant.
Then you were able to build a machine that made more than one sandwich at a time.
All you needed to do was add the instructions to make the sanwich and as long as you had the ingredients you were able to make sandwiches all day.
It would continue to repeat what the sandwich manual says.
cool right?
That’s how a loop and function can work together.
You can put a function inside a loop and it will repeat the same steps of the function as many times as you specify.
One of the most common type of loops are called “for loops”.
They can actually be pretty useful when programming.
If you starting to see a pattern, even in learning how to code, then you can see that these functions and processes are made to help make things easier.
They create simple solutions for problems that occur regularly in code.
5. Objects
Objects can be difficult to understand at first but again I think I am able to see the patterns and show an easier concept.
I think of objects as another type of variable except a lttle bigger.
What this mean is objects can act as a storage container like variables except they can hold other variables and functions together.
Of course they have different names for them but at its core they are a form of a variable.
The way you can access the contents of an object is by “calling” on the name of the object along with the information you want inside.
So for an example…
If I had an object called “person” and another variable in the object, or “properties”, with a property of “name” then I can access the “name” property by writing…
person.nameThat doesn’t look to hard right?
Cool it shouldn’t be.
6. Events
Events are a form of functions that can give an action or a response to an action.
In other words when something happens on your site, aka an event, or to a specific element you created…
Creating something called an event listener is a way to build a function for the program to respond to the action a user made on an element in your site.
So if you wanted the main navigation menu to fly in when they clicked on a menu element…
An event listener would look to see if that action was performed, like a mouse click, and it would open the menu with a cool effect.
Plain and simple.
7. Conditional Statements
Last but not least are conditionals.
Not to be captain obvious but this fundamental literally has the action in its name.
In other words something only happens when a condition is met.
For example in real life…
Because I workout and sweat a lot after my workout I need to take a shower.
But when you write code or in this case writing javascript you need to form the condition in a specific way for it to check.
if I become sweaty after my work out then I need to take a shower.
A good reference for knowing if you have a conditional statement is looking for an “if” or “if else” structure.
It might look something like this
if (I become sweaty after my work out){
take a shower
} Therefore what’s in the parenthesis after the “if” is the condition and what is in the curly brackets ( {} ) is what will happen if the condition is true.
An “else” statement will come in if the statement isn’t true and you want the code to do something else.
If you don’t have an “else” section and the statement isn’t true it will skip over the code and not acknowledge it.
However, a conditional statement solely checks to see if a condition is true and if not it will either not execute the code or if you have something else you want it do you can specify it in an else statement.
So that’s it, that’s the 7 fundamentals of javascript.
It’s easy right : )?
Conclusion
I know this post may not have been an in-depth tutorial of what all of the javascript language entails but I wanted to give a short intro.
This breakdown is what I think are the important elements to learn the language.
After reading this my hope is you will have a better understanding of how to approach learning the marvelous world of javascript.
At your first attempts it may not make any sense…
And if doesn’t, that’s ok because sometimes these concepts are hard to grasp at first…
but taking the time to study the 7 basic fundamentals I can assure you that you will be writing code in no time.
Or if you want to get a head start on coding you can also check out my post on the 3 books that helped me get started in learning how to code.
This is a great place to get started.
In fact, if you want to get started writing even more code and studying the basics now…
you can download my free worksheet on data types and variables below.
I’ll walk through the different types of data types and break down the structure of an expression.
Just sign up with your email and you will receive my free worksheet.
But that’s it for now and I hope this was helpful.
Just know that you are now on your way to making amazing projects with Javascript from learning the basic ideas of these 7 fundamentals.
Other posts you may like: