I created this thread for everything that has to do with Javascript, both on Frontend and Backend. Ask your Javascript related questions, drop your suggestions and tips and get help from experts.

Javascript is the most programming language used for development. Hardly will you come across website that's not built with Javascript. If you are new to Javascript or want to learn it, I advise learning HTML and CSS first. There are several videos on YouTube for learning or you can make use of Javascript.info. In my opinion, that's one of the best place to learn Javascript.

As I mentioned earlier, is advised to learn HTML and CSS before learning Javascript. the term FRONTEND simply means the user interface (UI) users interact with like the click button or the whole content of the website you see on the screen while BACKEND refers to part of the website where most logic are performed and returned back to the user. What connects this FRONTEND and BACKEND is known as API (Application Programing Interface).

The 3 basic things that make up this FRONTEND are HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and Javascript itself. Javascript also runs on the backend using Nodejs which is most common. There are other programing that's use for backend. Examples are python, java, Ruby, ASP.Net, php etc. But our interest is Javascript.

I dey follow man


Quick question: how can someone get even if it comes with very money, a job after learning frontend. Because i been wan enter school next yearand i don't want any Bleep up

Thanks

There is also a popular term known as framework. Imagine sewing a clothe with hand needle and sewing same clothes with sewing machine. Who do you think wilbw more efficient. Certainly, the sewing machine will do job much better that using hand needle. So frameworks are web tools that allows us to perform our task much faster and efficiently saving us precious time. There are several frameworks used on the Frontend. Examples are Angular, Vue, React and on the backend we have express, meteor etc.

Let me come back to what HTML, CSS and Javascript really do now we have known what makes a Frontend of a website. Imagine, you're building a house. The very first thing you think of is the land where the house will be built. That land is known as a domain name examples are Facebook.com, Google.com etc. These are addresses that shows where the website is situated same way the land gives address to where the house is located.

The next phase of the building is to get an Architect to draw the house on paper showing all the features the house should have like lighting, the kind of roofing and all that. In the web, the person responsible for this drawing is known as a User Interface designer (UI designer).

After the Architect of the this website is done with his drawing, he passes it on to the Frontend developer who then designs the website according the drawings of the Architect (UI designer). This is where the Frontend developer job starts.

Back to our house analogy, so after the designs has been done by the Architect, the building engineer supervises the bricklayer on how to lay the foundation of the house and subsequently lay blocks. Those block laying is the skeletal part of the building, that's where HTML comes in. HTML is used in building the structure of the house defining if the website will have a click button or how many text content it will have.

Once the building is ready, the next thing is to builtify it with nice roofing, plaster it and then paint it, fence the house and mount gate. That's where the job of the CSS comes in. CSS is simply used to add beauty to the website.

As a matter of fact, we have a complete building (website) but this kind of website doesn't do anything special and is known as static website because is doesn't change. A website can be built with just HTML and CSS. Imagine, the owner of the house wants a type gate that opens automatically the moment a car approaches the gate or he wants the outside light to switch on automatically once is night. That's where the idea of dynamic website comes in and we then make use of Javascript to add interactivity to our website. We can decide to program the website to open a new page after 30seconds of inactivity or another interactivity we may want.

Let's now talk the basic concepts of Javascript

following

Following boss

Like your analogy/analysis. Already

Everything about programming is all about data. For instance when we want to use our calculate figures, we can say 6*5 equals 30. In Javascript, numbers like this is a type of data. These data types are:
STRING
strings is nothing but our normal English alphabet of A-Z. When writing strings we use a very simple syntax (method) which is either single Open and close quotation (' ') or double open and close quotation (" ".

NUMBERS
As the name implies are just numbers entered in Javascript code like 5, 7, 10 etc.

BOOLEAN
boolean is simply to know if something true or false. For instance, we can ask the computer if Nigeria is a country and the computer will return because Nigeria is a country but it will return false if we ask Javascript if Nigeria is food because is not.

I will continue with other data types as we proceed

Now, before we proceed, I urge to download any code editor of your choice. There are several types of code editor but I suggest you download virtual studio code. You can download it at code.virtualstudio.com

Sheffdon:
I dey follow man


Quick question: how can someone get even if it comes with very money, a job after learning frontend. Because i been wan enter school next yearand i don't want any Bleep up

Thanks

Very simple you must have practical skill.
Can you skill be used for practical application?
Abi na just the examples you see online?

Dremca:
Let me come back to what HTML, CSS and Javascript really do now we have known what makes a Frontend of a website. Imagine, you're building a house. The very first thing you think of is the land where the house will be built. That land is known as a domain name examples are Facebook.com, Google.com etc. These are addresses that shows where the website is situated same way the land gives address to where the house is located.

The next phase of the building is to get an Architect to draw the house on paper showing all the features the house should have like lighting, the kind of roofing and all that. In the web, the person responsible for this drawing is known as a User Interface designer (UI designer).

After the Architect of the this website is done with his drawing, he passes it on to the Frontend developer who then designs the website according the drawings of the Architect (UI designer). This is where the Frontend developer job starts.

Back to our house analogy, so after the designs has been done by the Architect, the building engineer supervises the bricklayer on how to lay the foundation of the house and subsequently lay blocks. Those block laying is the skeletal part of the building, that's where HTML comes in. HTML is used in building the structure of the house defining if the website will have a click button or how many text content it will have.

Once the building is ready, the next thing is to builtify it with nice roofing, plaster it and then paint it, fence the house and mount gate. That's where the job of the CSS comes in. CSS is simply used to add beauty to the website.

As a matter of fact, we have a complete building (website) but this kind of website doesn't do anything special and is known as static website because is doesn't change. A website can be built with just HTML and CSS. Imagine, the owner of the house wants a type gate that opens automatically the moment a car approaches the gate or he wants the outside light to switch on automatically once is night. That's where the idea of dynamic website comes in and we then make use of Javascript to add interactivity to our website. We can decide to program the website to open a new page after 30seconds of inactivity or another interactivity we may want.

Fantastic analogy. Seconded.
This is good for aspiring programmers who keep asking which to start with.

The relevance of Javascript can't be overemphasized. And that lends credence to the perennial importance of HTML since Javascript is usually embedded in html files.

stanliwise:

Very simple you must have practical skill.
Can you skill be used for practical application?
Abi na just the examples you see online?

Haha the bolded made me laugh. Though it seems a bit hard as I feel the person on your mention is a newbie and may not understand your valid point.
I see many portfolios trending here and there probably based on "online examples" anyway programming is a practical job (problem solving with codes), so I doubt if people may think they can practice by "outsourcing" .
What do I know, people believe anything is possible now; "just ASK GOOGLE"

All4good:


Haha the bolded made me laugh. Though it seems a bit hard as I feel the person on your mention is a newbie and may not understand your valid point.
I see many portfolios trending here and there probably based on "online examples" anyway programming is a practical job (problem solving with codes), so I doubt if people may think they can practice by "outsourcing" .
What do I know, people believe anything is possible now; "just ASK GOOGLE"

For one to get practical skills he or she must start first by changing his/her orientation and start gearing and chasing after practicalities of everything they learn. Infact after studying a thing. Try as much as possible to create something usable even if it only for you and friends and then one will understand how things get complicated and difficult when they need to be useful.

Hello guys. Today, let's talk about what we call "variable" and "constant". The word may sound too complex but I will break it down.

Let's take our memory back to our secondary school or universities days, Our real name when we get into school could be "Ciroma Chukwuma Adekunle." This the name or in a Javascript a value assigned to you at birth but our classmates can decide to nickname us "guru" maybe because you are good in maths. Your close male friends can nickname you "wiper" maybe because you are a chronic womaniser but at the end of the day, these names still refers to same person. But remember when registering for official documents like National Identity Number or international passport, we can never use "guru" or "wiper" as your name even though it refers to same person. Simply because, Ciroma Chukwuma Adekunle is permanent (constant) name that never changes while "guru" or "wiper" are several (variable) nicknames giving to you by different people but still refers to same person.

Constant are used for storing values that will never change. For example, if I want to write in Javascript that Ciroma Chukwuma Adekunle is tall. I will simply write:
const ciromaChukwumaAdekunle = "tall";

In the above example, "const" is use to tell Javascript that the value being as "tall" will never change. If you try to change the value to "short" in Javascript, you will get error. You will also notice I wrote the name as "ciromaChukwumaAdekunle" instead of "Ciroma Chukwuma Adekunle." This way of writing in Javascript is known as camel casing where you capitalise every first letter of every second words and above. The semicolon after "tall" is similar to when using full stop to end a sentence in English language, so in Javascript, we semicolon our sentence.

For us to write our variable which we can change the value as we like. We can write something like, Ciroma Chukwuma Adekunle is also known as guru. We will write it this way:

let ciromaChukwumaAdekunle = "guru";

We can decide to nickname Ciroma Chukwuma Adekunle to be "wiper" and Javascript will recognise it. Since we have used the word "let" to tell Javascript on the first place that the value can change. If we decide to change that value to something else, we won't write "let" anymore, rather it be:

ciromaChukwumaAdekunle = "wiper";

So in the above code, Javascript will now recognise that the value is no longer "guru" but "wiper "

So this is all about variable and constant in Javascript.

The next questions will be, "what kind of values can we give to our variable or constant?" The value we can give to it are those data types we discussed earlier and I used one of them in explaining variable and constant earlier and that is string. We can write a statement like, Ciroma Chukwuma Adekunle is 40. That will be writen like this:

const ciromaChukwumaAdekunle = 40

If you notice didn't use double quotation as we used in string. Example:

const ciromaChukwumaAdekunle = "guru"

only string are written with double quotation mark (" ". So numbers are just writen like numbers. Same applies to boolean which simply means if something is true or false and we write that as:

const ciromaChukwumaAdekunle = true

You also notice that there is no quotation mark when writing boolean values.

Thank you Dremca, you're doing what these YouTube aren't doing- simplifying to the minimum. I await for more lessons.

SageX1444:
Thank you Dremca, you're doing what these YouTube aren't doing- simplifying to the minimum. I await for more lessons.

He's doing great. Those YouTubers are also doing excellently great.


Chitoma Chukwuma Adekunle is a dullard not a guru.

Karleb:


He's doing great. Those YouTubers are also doing excellently great.


Chitoma Chukwuma Adekunle is a dullard not a guru.

I said that as I can relate to how he uses examples that are relatable as a Nigeria. Maybe I haven't looked deeper but I'm yet to find a Nigerian and Non Nigerian YouTuber who's dissecting JS with what is in my primary environment that I can relate with.

U are really doing a nice and perfect job by breaking it down to the nearest minimum so that beginners can get the message u are passing across. But u would have explained about ES6 (that gave rise to let and const) because when learning JavaScript, what we first encounter is var declaration which was used for earlier version of JavaScript.

Dremca:
Hello guys. Today, let's talk about what we call "variable" and "constant". The word may sound too complex but I will break it down.

Let's take our memory back to our secondary school or universities days, Our real name when we get into school could be "Ciroma Chukwuma Adekunle." This the name or in a Javascript a value assigned to you at birth but our classmates can decide to nickname us "guru" maybe because you are good in maths. Your close male friends can nickname you "wiper" maybe because you are a chronic womaniser but at the end of the day, these names still refers to same person. But remember when registering for official documents like National Identity Number or international passport, we can never use "guru" or "wiper" as your name even though it refers to same person. Simply because, Ciroma Chukwuma Adekunle is permanent (constant) name that never changes while "guru" or "wiper" are several (variable) nicknames giving to you by different people but still refers to same person.

Constant are used for storing values that will never change. For example, if I want to write in Javascript that Ciroma Chukwuma Adekunle is tall. I will simply write:
const ciromaChukwumaAdekunle = "tall";

In the above example, "const" is use to tell Javascript that the value being as "tall" will never change. If you try to change the value to "short" in Javascript, you will get error. You will also notice I wrote the name as "ciromaChukwumaAdekunle" instead of "Ciroma Chukwuma Adekunle." This way of writing in Javascript is known as camel casing where you capitalise every first letter of every second words and above. The semicolon after "tall" is similar to when using full stop to end a sentence in English language, so in Javascript, we semicolon our sentence.

For us to write our variable which we can change the value as we like. We can write something like, Ciroma Chukwuma Adekunle is also known as guru. We will write it this way:

let ciromaChukwumaAdekunle = "guru";

We can decide to nickname Ciroma Chukwuma Adekunle to be "wiper" and Javascript will recognise it. Since we have used the word "let" to tell Javascript on the first place that the value can change. If we decide to change that value to something else, we won't write "let" anymore, rather it be:

ciromaChukwumaAdekunle = "wiper";

So in the above code, Javascript will now recognise that the value is no longer "guru" but "wiper "

So this is all about variable and constant in Javascript.

Thank you. I'm glad you found my tutorial useful.

SageX1444:
Thank you Dremca, you're doing what these YouTube aren't doing- simplifying to the minimum. I await for more lessons.

Thank you. We are all doing great so long as we passing knowledge. I never knew Ciroma Chukwuma Adekunle is a dullard

Karleb:


He's doing great. Those YouTubers are also doing excellently great.


Chitoma Chukwuma Adekunle is a dullard not a guru.

The beauty of Javascript is that we can assign any data type (string, number or boolean) to our variable or constant. That's why Javascript is "dynamically typed" language. For instance:

let ciroma = "dullard";

Remember that is a string, if I want to give it another value, I can change "dullard" to a number or boolean. We can then have something like this:

ciroma = 45;

When writing string in Javascript, we can decide to write it with single quotation or double quotation mark but we can't combine single quotation mark and double mark together. Examples are:

Writing string with double quotation mark
const adekunle = "boy";

Writing string with single quotation mark
let ciroma = 'guru';

But the two examples below will give you error in Javascript and are incorrect.
let chukwuma = 'student";
const adekunle = "dullard';

Well simplified. Thanks bros. I am currently in JavaScript and this your examples and explanations has helped me understand some of these terms.

Still on variable and data types. If you noticed, we have only been using one word word as example in our string data types. Example:

let ciroma = "guru";

Infact, we can write a long sentence as our string. We can have something like this:

let adekunle = "Adekunle is a guru who is famous in WAEC exams";

You can see we are now writing a full sentence as our string but wait a minute, what do you think will happen if we write our string with single quotation in a situation where we have apostrophe (') in our sentence, besides, we can chose to use single quotation mark in writing strings rather than double quotation mark. Take for instance:

let chukwuma = 'ciroma's brilliance has earned him international recognition'

In the above example, we now have 3 single quotation marks but what we intend to write is just 1 apostrophe in our string and 2 single quotation marks. What happens is that Javascript will assume the apostrophe to be the (second) closing quotation mark and every other characters that comes after the apostrophe will not be recognise by Javascript as a string. To avoid this situation, we can now make use of double quotation marks so that Javascript can differentiate the 2 types of quotation marks. For instance:

let chukwuma = "ciroma's brilliance has earned him international recognition";

With the above example, Javascript can now render the whole sentence as a string. But there is another problem, what if in our sentence, we want to use double quotation marks, what happened previously with the single quotation marks and the apostrophe will still happen. For instance:

const adekunle = "The president said to ciroma, "you are a genius" ";

In the above example, we now have 4 double quotation marks but what we intend to write is just 2 double quotation marks in our sentence and 2 double quotation marks for opening and closing the string. What happens is that Javascript will assume that the opening quotation mark of our sentence to be the (second) closing quotation mark of the string and every other characters that comes after it will not be recognise by Javascript as a string. To avoid this situation, we can now make use of what is known as template literal (template literal is a backtic (`) sign found at the top left corner of the keyboard) so that Javascript can now know that the opening and closing double quotation marks are for the sentence and not for the string. For instance, we will now have:

const adekunle = `The president said to ciroma, "you are a genius"`;

Dremca:
Still on variable and data types. If you noticed, we have only been using one word word as example in our string data types. Example:

let ciroma = "guru";

Infact, we can write a long sentence as our string. We can have something like this:

let adekunle = "Adekunle is a guru who is famous in WAEC exams";

You can see we are now writing a full sentence as our string but wait a minute, what do you think will happen if we write our string with single quotation in a situation where we have apostrophe (') in our sentence, besides, we can chose to use single quotation mark in writing strings rather than double quotation mark. Take for instance:

let chukwuma = 'ciroma's brilliance has earned him international recognition'

In the above example, we now have 3 single quotation marks but what we intend to write is just 1 apostrophe in our string and 2 single quotation marks. What happens is that Javascript will assume the apostrophe to be the (second) closing quotation mark and every other characters that comes after the apostrophe will not be recognise by Javascript as a string. To avoid this situation, we can now make use of double quotation marks so that Javascript can differentiate the 2 types of quotation marks. For instance:

let chukwuma = "ciroma's brilliance has earned him international recognition";

With the above example, Javascript can now render the whole sentence as a string. But there is another problem, what if in our sentence, we want to use double quotation marks, what happened previously with the single quotation marks and the apostrophe will still happen. For instance:

const adekunle = "The president said to ciroma, "you are a genius" ";

In the above example, we now have 4 double quotation marks but what we intend to write is just 2 double quotation marks in our sentence and 2 double quotation marks for opening and closing the string. What happens is that Javascript will assume that the opening quotation mark of our sentence to be the (second) closing quotation mark of the string and every other characters that comes after it will not be recognise by Javascript as a string. To avoid this situation, we can now make use of what is known as template literal (template literal is a backtic (`) sign found at the top left corner of the keyboard) so that Javascript can now know that the opening and closing double quotation marks are for the sentence and not for the string. For instance, we will now have:

const adekunle = `The president said to ciroma, "you are a genius"`;

awesome explanation. following boss

Nice one

We have learnt such about string previously. We can also use a variable name if we want to use the values in that variable. For instance:

let ciroma = "intelligent "
const adekunle = ciroma

If you notice, we didn't add double quotation marks to ciroma because we are using the variable name. Therefore, ciroma is equal intelligent and adekunle is also to intelligent. same as (const adekunle = "intelligent"

Now, the next question is, how do we use the 3 data types in a variable but for now we only make use of string and numbers along side using variable reference that we just learnt now. For instance:

let chukwuma = "wiper"
const ciroma = "the boy is a "+ chukwuma + "age "+ 30

I know you are wondering what is happening here especially with the plus sign. We use the plus sign to join data types together when defining a variable. This use of plus sign is known as concatenation in Javascript. As you observed, the string is in double quotation marks as usual and also you will notice a spacing before the second quotation mark. The necessary else, Javascript will join every data writing as the variable as one word. However, is advised to give spacing after writing the plus sign. Example:

const ciroma = "the boy is a" + chukwuma + "age" + 30