Getting started with JavaScript for complete beginners

#javascript #beginners #programming #tutorial

JavaScript is programming language that is used to create interactive websites. In this article, i will like to take you through on how to get started with JavaScript.

What is JavaScript?

JavaScript is a programming language that is used to create interactive websites, build web and mobile applications, create command line tools and for game development. It is one of the three main web development languages, alongside HTML and CSS. Learning JavaScript can be a great way to start. Here are some tips to help you get started with JavaScript.

Note: JavaScripter is not the same as Java these are two separate languages.
Knowing HTML & CSS is helpful but not necessary until much later, it is essential with DOM (Document object Module).

What you will need

1.Web browser: You will need a web browser (Chrome, Firefox, internet explorer, Microsoft edge), I will recommend that you use the latest versions of chrome and Firefox.

2.Text Editor: You can use vs code, replit.com (an online text editor or notepad but I will recommend vs code.
To download visual studio code, you can head to this urlDownload Visual Studio Code and download the latest stable version for your operating system, you can download for MacOS, Windows and Linux.
After downloading the visual Studio code and installing I will recommend you download the live server extension. What live Server does is that every time you save your js file, it will update your current web browser right away to reflex any changes, it is a very helpful development tools.

Creating a JavaScript file

Now let's create a JavaScript file, you can create a folder on your desktop named Learn JavaScript. Click on the folder and right click to open with vs code, then select vs code and the folder will open in your code editor with vs code. This is the results you should have below.

Now click on the first icon beside learn JavaScript to create a new js file.

Now you have to create two more files, that is index.html and style.css in the same folder.
We will be needing the html skeleton code to work with, so within our html file you can press shift+1(!) to get you sample html skeleton to create a webpage.
To link your html and CSS you can use the link tag (<link rel="stylesheet" href="style.css">) placed within your head tag<head></head>.
So our stylesheet is now linked to our html file, to link our JavaScript file to our html file, you can create a pair of script tag <script></script> within the body tag <body></body> and set the source attribute within the <script> to index.js, this is what I mean <script src="index.js"></script>. Then make sure to save everything.
To open with live server, you can right click and select the live server extension which will open in your window.
To access your console which we are going to use to display our output, you can right while in your web browser and select inspect at the bottom.

Click on the >> then go to console.

Any output within our js file we are going to see the results in the console.
To display an output, let's type the code.

console.log("I am learning JavaScript");

you can either use '' or "", it is optional to add a ; at the end of the sentence but in nearly all programming languages you need a ; to terminate a line of code, and now when you save your code it will update your browser and you have the following output in your console.

I am learning JavaScript.

You can type another line of code like:

console.log('JavaScript is an awesome programming language');

and you will still have the output.

JavaScript is an awesome programming language.

Now to create and alert box in JavaScript, you can use the following code.

window.alert("I love programming");

and alert will create a popup.
To create a comment in JavaScript you can do as such.

//This is a comment

Usually, comments are used as a note for yourself or for other developers who would like to read your code.
Also, you can create a multi-line comment by using /* */.

/*
This is a multi-line comment.

you 
can write.
 more
  comments

*/

Alright that's a quick introduction for JavaScript, I will be coming up with more lessons on how to understand some basic and important concepts in JavaScript.

If you are new to programming, learning JavaScript can be a great way to start. Here are some tips to help you get started with JavaScript:

Understand the basics of programming: Before you dive into JavaScript, it's important to have a basic understanding of programming concepts like variables, data types, and control structures. You can learn these concepts through online tutorials and courses.
Learn the syntax: Once you have a basic understanding of programming, you can start learning the syntax of JavaScript. The syntax of JavaScript is similar to other programming languages, but there are some unique features that you will need to learn.
Practice coding: The best way to learn JavaScript is by practicing coding. You can start by creating simple programs and gradually increase the complexity of your projects.
Use online resources: There are many online resources available for learning JavaScript. You can find tutorials, courses, and forums where you can ask questions and get help from other developers.
Build projects: As you become more comfortable with JavaScript, start building projects. This will help you apply what you have learned and give you experience working on real-world projects.
Also, I would like to add these tips I got from (ref:Fady GA)
Two words, THE BASICS

And the below steps really sums it up for me.
1- Learn your basics.
2- Progress slowly.
3- Repeat.

And avoid those pitfalls:
1- Learn a lot in a short time.
2- Bury what you don't understand.
3- Don't apply what you learn.

So again, don't rush it 😵‍💫. You can learn ANYTHING 😎! And learning is marathon not a sprint 🏃!

JavaScript is a powerful language that can help you create dynamic and responsive websites. By following these tips, you can start learning JavaScript and become a proficient programmer in no time. Adios

Top comments (6)

ahmedarain3 • Jun 14 '23

Thanks alot for sharing this kind information to us. I am a begineer and was confused that where should I start in this blog I have found out a path to make my Javascript journey more challenging and fun