Skip to main content

Hello JavaScript!

Think of your favorite website. When you click a "Like" button and the heart turns red, or when you type in a search bar and suggestions pop up that is JavaScript in action.

The Big Three: A Simple Analogy​

If building a website is like building a house:

  1. HTML is the Structure (The walls, doors, and windows).
  2. CSS is the Decoration (The paint, wallpaper, and furniture).
  3. JavaScript is the Electricity & Plumbing (The lights that turn on when you flip a switch and the water that flows when you turn a tap).

What is JavaScript, Exactly?​

JavaScript is a Programming Language. It allows you to tell the browser (Chrome, Safari, Edge) to do specific tasks. It is the most popular language in the world because it is the only language that runs natively in every web browser.

What can you do with it?​

  • Make things move: Create animations or sliders.
  • Handle Data: Calculate a math problem or process a form.
  • Update Content: Change text or images without refreshing the page.
  • Listen: "Wait" for the user to click, scroll, or type.

Where Do We Write JavaScript?​

You don't need fancy software to start. You just need a text editor and a browser. There are three ways to add JS to your site:

1. The Console (The Secret Playground)​

Every browser has a hidden "Console" for developers to test code.

  • Try it: Right-click this page -> Inspect -> Click the Console tab.
  • Type alert("Hello World"); and hit Enter.

2. Internal (The Script Tag)​

You can write code directly inside your HTML file using the <script> tag.

<script>
  console.log("This code runs inside the HTML file!");
</script>

3. External (The Professional Way)​

Just like CSS, we keep our JavaScript in its own file (e.g., script.js). This keeps our project clean.

Create a file named script.js and link it at the very bottom of your HTML, just before the closing </body> tag.

In your HTML (at the very bottom of the body):

index.html
<body>
    <h1>Welcome to JS!</h1>

    <script src="script.js"></script>
</body>

Your First Tool: The Console​

Before we build complex apps, we need a way to "talk" to the computer. We use the Console. Think of it as a private chat room between you and your code.

Try This Right Now:​

  1. Open any website (like https://www.google.com).
  2. Right-click and select Inspect.
  3. Click the Console tab at the top.
  4. Type this exactly and hit Enter: alert("I am a JavaScript Developer!");

What happened? You just commanded the browser to take an action!

Interactive Playground​

Experiment with the code below. Try changing the text inside the quotes in the JS tab and see what happens when you click the button.

The "Logic" of Programming​

Learning JavaScript is like learning a Recipe. You have:

  1. Storage: Storing ingredients (Variables).
  2. Instructions: What to do with them (Functions).
  3. Choices: What to do if something happens (If/Else statements).

How JavaScript "Thinks"​

Programming is just giving a list of instructions to a computer.

When you write JS, you are creating a "Recipe" for the browser to follow:

  1. Find the button on the page.
  2. Listen for a click.
  3. Run a specific action when that click happens.

Summary Checklist​

  • I understand that JS adds interactivity (behavior).
  • I know that script.js is the standard file name for JS.
  • I learned how to open the Browser Console.
  • I triggered my first alert().
  • I know how to find the Developer Console.
  • I know that <script src="..."> links an external file.
  • I successfully ran an alert() or console.log().
Did You Know?

JavaScript was created in just 10 days back in 1995! Today, it is the most popular programming language in the world, used by 98% of all websites.

Last updated on by Ajay Dhangar