STEMTrainingGrounds

Lesson 1

Lesson 1 of 16

JavaScript - Front-End vs Back-End

Lesson Progress: 0%

Code Example

console.log("test");

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Select a Language:

Output

Click "Run Code" to see the output here

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

JavaScript can run in two main places: the front end and the back end. The front end is what users see in the browser, while the back end works behind the scenes on a server.

The front end runs inside a web browser.
The back end runs on a server.
The front end controls what users see and click.
The back end handles data and logic.

Front-end JavaScript is used for things like:

Clicking buttons
Showing or hiding content
Form validation
Animations
Updating content without refreshing the page
Running frameworks like React

Browsers have built-in programs called JavaScript engines. These engines read and run JavaScript code.

Chrome uses the V8 engine.
Firefox uses SpiderMonkey.
Safari uses JavaScriptCore.
The engine turns JavaScript into machine code.
The browser then runs that code on your computer.

Back-end JavaScript runs on a server instead of in a browser. It focuses on handling data and processing requests. Back-end JavaScript is used for things like:

Saving data to a database
Handling user logins
Processing payments
Sending data to the front end
Running APIs
Managing server security

Node.js is a program that allows JavaScript to run outside the browser. It made it possible to use JavaScript in servers.

Node.js runs JavaScript on the server.
It uses the V8 engine from Chrome.
It can handle requests from users.
It can connect to databases.
It sends responses back to the browser.

Together, front-end JavaScript and Node.js allow developers to build full websites using one language.

The browser runs the user interface.
The server runs the data and logic.
Both can use JavaScript.
This is why JavaScript is used for full-stack development.

Code Example

<!DOCTYPE html>
<html>
  <body>

  <h1>My First Web Page</h1>
  <p>My First Paragraph</p>

  <p id="demo"></p>

  <script>
  document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";
  </script>

  </body>
</html>

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

HTML Code Editor

Select a Language:

Output

In Development
In Development
In Development
In Development

Lesson Progress: 0%

JavaScript - Front-End vs Back-End

Lesson Incomplete

Lesson 1 of 16

Next: Variables →

<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "<h2>Hello World</h2>"; </script> </body> </html>