Duration: 60–90 minutes
console.log() for debugging.[web:338][web:342]Watch this beginner‑friendly JavaScript introduction. It shows how to connect JavaScript with HTML, use script tags, and start writing simple code:
JavaScript is a programming language that runs in the browser and adds interactivity to web pages.[web:338][web:342][web:357] With JavaScript you can respond to user actions, change HTML and CSS dynamically, work with data, and communicate with servers.[web:338][web:345][web:351]
Together, HTML defines structure, CSS defines style, and JavaScript defines behavior of a web page.[web:338][web:342]
Inline script (not recommended for bigger apps):
<button onclick="alert('Button clicked!')">Click me</button>
Internal script (inside <script> tag):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Basics</title>
</head>
<body>
<h1>JavaScript Basics</h1>
<script>
console.log("Hello from JavaScript!");
</script>
</body>
</html>
External script (recommended):
<!-- index.html -->
<body>
<h1>JavaScript Basics</h1>
<script src="main.js"></script>
</body>
// main.js
console.log("Hello from main.js");
Using an external .js file keeps HTML and JavaScript separated and easier to maintain.[web:338][web:342]
The browser DevTools console is where you can see logs, errors, and run quick JavaScript snippets.[web:338][web:342] Open DevTools (usually F12 or Ctrl+Shift+I) and switch to the “Console” tab.
// in main.js
console.log("Frontend Beginner course");
console.log(2 + 3);
Whenever the page reloads, these messages appear in the console, which helps you debug your code step by step.[web:338][web:345]
<h2 id="welcome-text">Welcome to my site</h2>
<button id="change-btn">Change Message</button>
<script>
const heading = document.getElementById("welcome-text");
const button = document.getElementById("change-btn");
button.addEventListener("click", function () {
heading.textContent = "Thanks for clicking! JavaScript is now running.";
});
</script>
document.getElementById(...) finds an element in the DOM (the HTML document structure).[web:338][web:343]addEventListener("click", ...) runs a function when the button is clicked.[web:343]textContent changes the text inside the heading.Variables store values (like text or numbers) that you want to reuse or change.[web:338][web:342][web:357]
let message = "Hello JavaScript";
const pi = 3.14;
console.log(message);
console.log("Pi is", pi);
let – variable that can be reassigned.[web:338][web:342]const – value that should not be reassigned.js-basics.html and a main.js file in the same folder.main.js at the bottom of the HTML body with <script src="main.js"></script>.main.js:
console.log().studentName and log it.document.getElementById and show an alert() when it is clicked.<script> tag, or in an external .js file (recommended).[web:338][web:345]console.log() are essential tools for seeing what your code is doing.[web:338][web:342]document.getElementById) and event listeners lets you react to user actions such as button clicks.[web:338][web:343]Not a member yet? Register now
Are you a member? Login now