Welcome, Guest: Join Nairaland / LOGIN! / Trending / Recent / New
Stats: 2,861,668 members, 6,865,253 topics. Date: Monday, 16 May 2022 at 02:05 PM

Everything Javascript: Frontend And Backend - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Everything Javascript: Frontend And Backend (1774 Views)

Omo! See My MERN Full Stack Diamon Web App (frontend And Backend) / Why Are Backend Developers Paid More Than Frontend Developers? / Learn How To Be A Good Frontend And Backend Programmer (2) (3) (4)

(1) (2) (Reply) (Go Down)

Everything Javascript: Frontend And Backend by Dremca(m): 1:47pm On May 10, 2021
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.

1 Like 1 Share

Re: Everything Javascript: Frontend And Backend by Dremca(m): 1:54pm On May 10, 2021
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.

2 Likes 1 Share

Re: Everything Javascript: Frontend And Backend by Dremca(m): 2:02pm On May 10, 2021
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).

3 Likes 1 Share

Re: Everything Javascript: Frontend And Backend by Dremca(m): 2:08pm On May 10, 2021
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.

3 Likes 1 Share

Re: Everything Javascript: Frontend And Backend by Sheffdon: 2:19pm On May 10, 2021
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
Re: Everything Javascript: Frontend And Backend by Dremca(m): 2:20pm On May 10, 2021
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.

6 Likes 1 Share

Re: Everything Javascript: Frontend And Backend by Dremca(m): 2:49pm On May 10, 2021
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.

6 Likes 1 Share

Re: Everything Javascript: Frontend And Backend by Dremca(m): 2:51pm On May 10, 2021
Let's now talk the basic concepts of Javascript

1 Like 1 Share

Re: Everything Javascript: Frontend And Backend by T0BY(m): 6:13pm On May 10, 2021
following
Re: Everything Javascript: Frontend And Backend by Sheffdon: 6:35pm On May 10, 2021
Following boss

Like your analogy/analysis. Already
Re: Everything Javascript: Frontend And Backend by Dremca(m): 7:34pm On May 10, 2021
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 (" "wink.

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

3 Likes 1 Share

Re: Everything Javascript: Frontend And Backend by Dremca(m): 7:39pm On May 10, 2021
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

2 Likes 1 Share

Re: Everything Javascript: Frontend And Backend by stanliwise(m): 11:34pm On May 10, 2021
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?
Re: Everything Javascript: Frontend And Backend by All4good: 9:53am On May 11, 2021
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.

2 Likes

Re: Everything Javascript: Frontend And Backend by All4good: 10:10am On May 11, 2021
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"

1 Like

Re: Everything Javascript: Frontend And Backend by stanliwise(m): 11:16am On May 11, 2021
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.

3 Likes

Re: Everything Javascript: Frontend And Backend by Dremca(m): 11:10pm On May 11, 2021
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.

5 Likes

Re: Everything Javascript: Frontend And Backend by Dremca(m): 11:38pm On May 11, 2021
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 (" "wink. 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.

1 Like

Re: Everything Javascript: Frontend And Backend by Nobody: 10:27am On May 12, 2021
Thank you Dremca, you're doing what these YouTube aren't doing- simplifying to the minimum. I await for more lessons. wink
Re: Everything Javascript: Frontend And Backend by Karleb(m): 10:47am On May 12, 2021
SageX1444:
Thank you Dremca, you're doing what these YouTube aren't doing- simplifying to the minimum. I await for more lessons. wink

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


Chitoma Chukwuma Adekunle is a dullard not a guru.

2 Likes

Re: Everything Javascript: Frontend And Backend by Nobody: 11:04am On May 12, 2021
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. grin
Re: Everything Javascript: Frontend And Backend by akus6060(m): 11:08am On May 12, 2021
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.
Re: Everything Javascript: Frontend And Backend by Dremca(m): 11:26am On May 12, 2021
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. wink

1 Like

Re: Everything Javascript: Frontend And Backend by Dremca(m): 11:28am On May 12, 2021
Thank you. We are all doing great so long as we passing knowledge. I never knew Ciroma Chukwuma Adekunle is a dullard grin grin
Karleb:


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


Chitoma Chukwuma Adekunle is a dullard not a guru.

1 Like

Re: Everything Javascript: Frontend And Backend by Dremca(m): 11:37am On May 12, 2021
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;
Re: Everything Javascript: Frontend And Backend by Dremca(m): 11:44am On May 12, 2021
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';

3 Likes

Re: Everything Javascript: Frontend And Backend by ClixMaster(m): 12:51pm On May 12, 2021
Well simplified. Thanks bros. I am currently in JavaScript and this your examples and explanations has helped me understand some of these terms.

1 Like

Re: Everything Javascript: Frontend And Backend by Dremca(m): 8:33pm On May 12, 2021
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"`;

1 Like

Re: Everything Javascript: Frontend And Backend by Sheffdon: 12:25pm On May 13, 2021
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
Re: Everything Javascript: Frontend And Backend by Nobody: 11:54pm On May 13, 2021
Nice one
Re: Everything Javascript: Frontend And Backend by Dremca(m): 1:58am On May 16, 2021
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"wink

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

3 Likes

(1) (2) (Reply)

Digital Signature - An Image Utility Software / Why It's Important To Be Very Well-rounded Today / Download My First Android App Free

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2022 Oluwaseun Osewa. All rights reserved. See How To Advertise. 251
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.