Home 〉 JavaScript Tutorials 〉 JavaScript Tutorial for Beginners - Learn JavaScript with Examples !

JavaScript Tutorial for Beginners - Learn JavaScript with Examples !

JavaScript Tutorial for Beginners - Learn JavaScript with Examples !

Introduction: Role of HTML in JavaScript

Before you learn JavaScript, you should understand the role of HTML.

HTML (HyperText Markup Language) is the ''foundation of every web page''. It defines the ''structure'' of content — such as text, images, and links — using tags.

JavaScript works with HTML by ''adding behavior'' to the structure. You can use JavaScript to create dynamic elements, respond to user actions (like clicks), and control how the page behaves.

Introduction: Role of CSS in JavaScript

CSS (Cascading Style Sheets) is used to ''style'' your HTML content — for example, to change colors, fonts, and layout.

While HTML creates the structure and CSS styles it, JavaScript brings ''interactivity''.

You can use JavaScript to:

  • Show/hide elements
  • Animate content
  • Change styles dynamically

What is JavaScript?

JavaScript is a ''programming language'' used to create interactive and dynamic web pages. It runs directly in the browser and allows websites to respond to user input, update content without reloading, and perform many tasks.

JavaScript is supported by all modern web browsers and is one of the ''core technologies of web development'' — along with HTML and CSS.

JavaScript Syntax (with Meaning)

JavaScript syntax is the ''set of rules'' that defines how code should be written. It includes variables, functions, loops, conditions, and more.

Here's a simple JavaScript syntax example:

JavaScript Syntax ✍

let message = "Hello, World!";
alert(message);

Meaning:

  • 'let' is a keyword used to declare a variable.
  • 'message' is the variable name.
  • '"Hello, World!"' is the value assigned to the variable.
  • 'alert(message);' displays the value in a popup alert box.

This code declares a variable and shows its value to the user.

JavaScript Code is Written Inside '<script>' Tags

In HTML files, all JavaScript code is placed between '<script>' and '</script>' tags.

Syntax:

html syntax ✍

<script>
// JavaScript code goes here
</script>

Example

Example 📄

<!DOCTYPE html>
<html>
<head>
<title>Script Tag Example</title>
</head>
<body>
<script>
let name = "John";
document.write("Welcome, " + name);
</script>
</body>
</html>

Meaning:

  • The '<script>' tag starts the JavaScript code block.
  • 'let name = "John";' declares a variable named 'name'.
  • 'document.write(...)' writes the welcome message on the web page.
  • The '</script>' tag closes the JavaScript code block.

JavaScript can be written:

  • Inline: directly in the HTML file using `<script>` tags.
  • External file: by linking to a `.js` file using `<script src="filename.js"></script>`.

JavaScript Example

Here's one basic example of JavaScript in action:

Example 📄

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("You clicked the button!");
}
</script>
</body>
</html>

Meaning:

  • * A button is added using HTML.
  • * When the button is clicked, the JavaScript function `showMessage()` runs.
  • * This function shows a popup message: "You clicked the button!"

History and Versions of JavaScript

JavaScript has evolved a lot since it was created in 1995 by Brendan Eich. Here's a short history:

  • 1995: JavaScript was created at Netscape and called Mocha, then renamed to LiveScript, and finally to JavaScript.
  • ECMAScript 1 (1997): First official standard of JavaScript.
  • ES5 (2009): Introduced 'strict mode', 'JSON', and more.
  • ES6 / ES2015 (2015): Major update with 'let', 'const', arrow functions, classes, and modules.
  • Later Versions (ES2016-ES2023): Added async/await, optional chaining, nullish coalescing, and many new features.

JavaScript continues to improve every year with new ECMAScript updates.

Key JavaScript Features (with Short Descriptions)

Client-side Execution

JavaScript runs in the user's browser without the need for a server.

Dynamic Behavior

You can change HTML and CSS in real time based on user interaction.

Event Handling

Responds to user actions like clicks, keyboard input, and mouse movements.

Form Validation

Checks user input in forms before sending data to the server.

DOM Manipulation

Allows access and updates to HTML content using JavaScript.

Asynchronous Programming

Supports 'Promises', 'async/await', and AJAX to fetch data without reloading the page.

Browser Compatibility

Works on all modern browsers without plugins.

Lightweight and Fast

Loads quickly and is optimized for web performance.

Other Related JavaScript Topics to Explore

  • Variables and Data Types
  • Functions and Scope
  • Conditional Statements
  • Loops ('for', 'while')
  • Arrays and Objects
  • DOM (Document Object Model)
  • Events ('click', 'submit', 'keyup', etc.)
  • Error Handling
  • JavaScript in HTML ('<script>' tag)
  • ES6+ Features
  • JavaScript Frameworks (React, Vue, Angular - later stages)

Conclusion

JavaScript is the most important programming language for web development. It allows websites to be interactive, responsive, and user-friendly.

By learning JavaScript step by step, you'll be able to build smart and engaging websites that react to user actions. This tutorial gives you a solid starting point. Practice often, try small projects, and build your skills as you go.

Javascript Tutorials Next Post