Techie BabajiLearn to Code. Build Real Skills.
JavaScript · Getting Started

JavaScript Setup

Before building anything, you need to know where JavaScript code goes and how to run it. There are three easy ways.

Beginner 5 min Lesson 2 of 49 Runnable examples
Before you start:Introduction to JavaScript
0/49 in JavaScript
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 27, 2026

Related tutorials

Interview questions

Learning objectives#

  • Add JavaScript to a page with <script>
  • Link an external file with defer
  • Use the browser DevTools console
  • Run JavaScript with Node.js

Explanation#

Inline: put code inside <script>…</script> in your HTML. Good for tiny demos.

External file: put code in app.js and load it with <script src="app.js" defer></script>. defer waits until the HTML is ready, so your code can find elements on the page. This is the recommended way.

Console: press F12 (or Ctrl+Shift+J) in any browser to open DevTools and type JavaScript directly. With Node.js installed, run node app.js in a terminal.

Syntax#

HTML Illustrative
<!-- in <head> -->
<script src="app.js" defer></script>

Code example: JavaScript on a page#

HTMLJavaScript on a page Runnable
<button id="btn">Say hi</button>
<p id="msg"></p>


<script>
  document.querySelector('#btn').addEventListener('click', () => {
    document.querySelector('#msg').textContent = 'Hi from JavaScript!';
    console.log('Button clicked');
  });
</script>
Expected output
Clicking the button shows “Hi from JavaScript!” and logs “Button clicked”.
Opens this example in the full playground

Step-by-step explanation#

  1. The HTML creates a button and an empty paragraph.
  2. The script finds the button with document.querySelector.
  3. addEventListener runs the code every time the button is clicked.
  4. textContent puts the message into the paragraph.

Real-world use case#

Real projects keep JavaScript in separate .js files loaded with defer, and use DevTools to debug while building.

Common mistakes#

Script runs before the HTML exists

A <script> in <head> without defer runs before the button is created, so querySelector returns null. Use defer or put the script at the end of <body>.

Wrong file path

If app.js is in a js folder, use src="js/app.js". Check the Network tab in DevTools for 404 errors.

Best practices#

  • Keep JavaScript in external files
  • Load scripts with defer
  • Keep DevTools open while you code
  • Use VS Code with a live-server extension for instant reloads

Remember this#

defer = “wait for the HTML, then run”.

F12 opens DevTools — the Console tab is your playground.

null from querySelector usually means “the element doesn’t exist yet” or “the selector is wrong”.

Practice exercise#

Your task: Create a page with a button that logs the current time to the console when clicked.

Show solution
HTML Runnable
<button id="t">What time is it?</button>
<script>
  document.querySelector('#t').addEventListener('click', () => console.log(new Date().toLocaleTimeString()));
</script>
Opens this example in the full playground

Mini quiz#

JavaScript Setup quizMultiple choice Question 1 of 1

What does the defer attribute do?

Score so far: 0/0

Want more? Practise all JavaScript MCQs · JavaScript interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.