What is the use of Javascript?

JavaScript
1

What is the relation between Javascript and web developement?

2

Hey @bedward!
I have found some links to answer your question.

Thanks and Happy Coding!

1 Like
3

Hi! How are you? It is one of the languages most used by the community, also the frameworks are based on javascript or at least most.
and frameworks, are the ones used to improve the front-end, and this is one of the most important skills in web development, unless you want to dedicate yourself to the back-end.
I’m sorry if you don’t understand me, I don’t know English.

1 Like
4

To allow you to have interactive stuff on your webpage. For example when a user clicks a button, something else on the page changes.

HTML is for telling the browser what the things on a web page are. CSS is for adding style to those things. JS is for programming interactivity (for which a programming language is necessary).

Web applications (apps that run in a browser) are normally completely interactive, so require large amounts of programming, and therefore lots of JavaScript. For example, a calculator. You could make something that looks like a calculator using just HTML and CSS. But it won’t be able to do anything useful without JS.

It’s also a general-purpose programming language, so you can do anything you need a programming language for with it.

1 Like
5

But for example, i made a code that solves a problem using Javascript, how this code is gonna interact with the page?

6

What is the problem? I can give you an example

7

for example, i made a “calculator” code, how this code is going to get inserted in the page?

8

there are many ways, window.alert(), using JSX and React etc. you can have

<script>any code in js</script>

tags like this and many more

9

Ok, so I’ve made a very simple calculator (sorry, it doesn’t work great, but it’ll do as an example):

There are three files there: index.html, styles.css and index.js (ignore package.json).

At the top of the HTML file, the CSS file is linked (<link rel="stylesheet" href="styles.css" />).

At the bottom of the HTML file, the JS file is linked (<script src="src/index.js"></script>).

The “calculator” is an HTML form. It has two inputs (both numbers), and the submit button for the form is the =. So a user types a number into each of the inputs, presses =, and they should get the sum printed.

Browsers provide an API (an Application Programming Interface) written in JavaScript. It’s basically a set of JS functions [and objects] that let you access various functionalities in the browser using JavaScript. So internally, the browser isn’t using JS, it’s written in a different language (normally C++), but the API lets you manipulate it using JS.

So the HTML script tag lets you bring some JS code into an HTML page, and the JS code is using the browser API to interact. To go through it line by line (I’ve split it up a bit):

const calculator = document.getElementById("calculator");

This finds the HTML element with the id calculator. The calculator variable in the JS is now an object with some properties I can use to manipulate it.

const result = document.getElementById("result");

This finds the HTML element with the id result. The result variable in the JS is, again, now an object with some properties I can use to manipulate it: I’m going to print the result of the sum to that element.

calculator.addEventListener("submit", runCalculation);

The addEventListener function causes the browser to listen for something happening to the element I attach it to. I’ve attached it the calculator element, which is a form, and I’m listening for the submit event. So basically, it says "whenever this form gets submitted, run the function runCalculation".

Now I want to check what the value of each of the inputs in the form are when the form gets submitted.

function getInputs(event) {
  const numberInputs = new FormData(event.target);

  const numbers = [];

  for (const [_, number] of numberInputs) {
    numbers.push(Number(number) || 0);
  }

  return numbers;
}

So:

function getInputs(event) {

This function takes an event (the event is produced by the form being submitted).

  const numberInputs = new FormData(event.target);

I use a browser API function called called FormData to grab the data produced. event.target is the element that produced the event (the form), FormData creates an object I can use to access all the useful form info. In this case, the bit I want from FormData is going to be an array that (assuming the user typed “1” and “2”) looks like [["firstNumber", "1"], ["secondNumber", "2"]]

  const numbers = [];

  for (const [_, number] of numberInputs) {
    numbers.push(Number(number) || 0);
  }

  return numbers;
}

I’m going to put the numbers from the inputs into an array, so I set up an empty array, then I loop through [["firstNumber", "1"], ["secondNumber", "2"]], grabbing the numbers. Any value that comes from an HTML input is going to be a string, so I convert them to actual numbers, and if the user left the input blank, push a 0 instead.

Then the actual function I’ll run on the submit event:

function runCalculation(event) {
  event.preventDefault();
  const [number1, number2] = getInputs(event);

  result.innerHTML = number1 + number2;
}

So:

function runCalculation(event) {

Again, this function takes an event.

  event.preventDefault();

By default, when you submit an HTML form, the page reloads. I’m using a browser API function called preventDefault to stop that default behaviour. I don’t want anything to reload because that would just start the process over again with empty inputs, the user would never be able to do anything.

  const [number1, number2] = getInputs(event);

I run my getInputs function from above to get the two numbers.

  result.innerHTML = number1 + number2;
}

Then, on the result element, I set a property called innerHTML to the result of adding the two numbers together. innerHTML says what the HTML nested inside a given element is – so like <p>Hello!</p>, the inner HTML of that <p> element is a string of text (“Hello!”). In our case, the inner HTML of <span id="result"> is nothing, it starts out empty, and I am setting it to whatever the sum of the two inputs is.

6 Likes
10

WoW, thank you for the effort :heart:, i didn’t mean to make give all that effort!

11

That is really awesome you just whipped up a calculator in no time to answer a question.

12

Yeah that was very appreciated!

13

I could have made it a little bit simpler looking at it – it uses a few things that are maybe a bit complicated (or slightly gibberish!) when you’re starting out (using a form instead of just individual inputs, FormData, destructuring). But hopefully it should give a bit of an overview of how things glue together, hopefully the code isn’t too impenetrable

14

How about this API, can you reference it the FCC curriculum?

15

Ah, so herein lies a slight issue. The curriculum does not explicitly do this: it teaches JS, and knowledge of that is necessary to be able to use the browser API (the API is basically a collection of JS functions and objects). And realistically, knowing how to use JS + looking at the documentation is all (all! heh :face_with_raised_eyebrow: ) that’s needed.

But the FCC curriculum as it stands only touches on using the Web APIs by way of a library called jQuery. This will change – this part of the curriculum was written a long while ago, and there are changes to the curriculum coming that will cover the browser Web API via small projects. But for now I would suggest working through the JS sections here alongside things like the introductory page for the Web APIs at MDN. Most of the code you write will just be JS, it’s just that little parts of it that will make use of browser-provided functions to glue things together.

2 Likes
16

That’s a lot of effort. “Very Encouraging” to beginners like me. Keep it up!.

17

Hey @pmwahlang1!
Welcome to the Forum!

18

Javascript is a programming language which is used to make web pages interactive. It is used on both client side and server side

19

Thank you very much for the clarification, so much appreciated!

20

In general, JS is one of the go-to programming languages. As a survey by Stack Overflow shows, JavaScript is even the most popular language on earth. What surprised me the most is that even back-end devs are still more likely to google JavaScript more than any other language. The main reason for that is that JavaScript is omnipresent and inescapable.

On to the use cases:

  1. Web development (creating web pages)
  2. Web applications
  3. Presentations (JS provides RevealJS and BespokeJS libraries to build a web-based slide deck)
  4. Server applications (Node JS for fast network apps)
  5. Web servers (again, NodeJS)
  6. Games (JavaScript+HTML5)
  7. Art (creating graphics for a web page)
  8. Smartwatch apps (JavaScript provides a library Pebble JS)
  9. Mobile apps (building apps without web contexts)
  10. Flying robots (Node JS)
1 Like