Embedding JavaScript in HTML

Objectives: Embedding JavaScript in HTML

JavaScript Basics - Embedding JavaScript in HTML

1. Basics

Embedding JavaScript in HTML

JavaScript is a programming language that runs inside your web browser and lets you add interactive behavior to web pages. To make your web page dynamic, you need to embed JavaScript code inside your HTML. This means placing JavaScript in certain parts of your HTML document so the browser can run it.

What does "embedding JavaScript in HTML" mean?

It means putting JavaScript code directly into your HTML file, so when the browser loads the page, it executes that JavaScript code.

Ways to embed JavaScript in HTML

  1. Inline JavaScript with the <script> tag inside HTML
    This is the most common way — you write your JavaScript code inside <script> tags anywhere in your HTML.
  2. External JavaScript file linked with <script src="file.js"></script>
    You can keep your JavaScript in a separate file and link it in your HTML.
  3. Inline JavaScript inside HTML attributes (not recommended for complex code)
    For example, in button click handlers like <button onclick="alert('Hi!')">.

Example 1: Inline JavaScript using <script> tag

This example shows how you embed JavaScript directly inside your HTML page.


<!DOCTYPE html>
<html>
  <head>
    <title>My First JavaScript</title>
  </head>
  <body>
    <h1>Hello, World!</h1>

    <script>
      // This code runs when the page loads
      alert('Welcome to JavaScript!');
      console.log('JavaScript is running');
    </script>
  </body>
</html>

Example 2: JavaScript in the <head> vs <body>

JavaScript inside the <head> runs before the page content loads, while inside the <body> it runs as the page loads. Sometimes placing scripts at the end of <body> helps to avoid errors if JavaScript tries to access elements not yet loaded. 


<!DOCTYPE html>
<html>
  <head>
    <script>
      console.log('Script in the head');
    </script>
  </head>
  <body>
    <h1>Page Content</h1>
    <script>
      console.log('Script in the body');
    </script>
  </body>
</html>

Example 3: External JavaScript File

Instead of writing JavaScript inside HTML, you can write it in a separate file and link it with <script src="filename.js"></script>. This helps keep your code organized.

Example HTML:


<!DOCTYPE html>
<html>
  <head>
    <title>External JS Example</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Check console for message</h1>
  </body>
</html>

Example external JavaScript file (script.js):


// This is script.js
console.log('Hello from external script!');
alert('External JavaScript loaded!');

Note: In this live demo page, you cannot load external files, but in real projects you save the JS code above in a separate file named script.js.

Example 4: Inline JavaScript in HTML attributes (simple cases)

You can add JavaScript directly in HTML element attributes like onclick.


<button onclick="alert('Button clicked!')" class="btn btn-success">Click Me</button>

Summary of Embedding JavaScript in HTML

  • Use <script> tags to write JavaScript inside HTML.
  • You can put JavaScript in the <head> or <body>, but placing scripts just before </body> is often best.
  • External JS files help keep code clean and reusable.
  • Inline event handlers (like onclick) are easy for small scripts but not recommended for complex code.
  • JavaScript runs when the browser loads the script or when triggered by events.

Common Questions

Q: Can I put multiple <script> tags?
A: Yes! You can add as many as you want. They run in the order they appear.
Q: Why put JavaScript at the bottom of the <body>?
A: It makes sure all HTML elements are loaded before JavaScript runs, avoiding errors when accessing elements.
Q: What happens if I put JavaScript in the <head>?
A: The browser runs it immediately, but if it tries to access page elements that aren’t loaded yet, it may cause errors.
Q: Can JavaScript change the HTML page content?
A: Yes! JavaScript can select elements and modify their content, styles, or structure.
Introduction to JavaScript - 35 Q&A

Introduction to JavaScript: 35 Questions & Answers

1. What is JavaScript?
JavaScript is a programming language used to make web pages interactive and dynamic. It runs inside web browsers and can change webpage content, respond to user actions, and communicate with servers.
2. Where does JavaScript run?
JavaScript primarily runs inside web browsers like Chrome, Firefox, Safari, and Edge. It can also run on servers using environments like Node.js.
3. How is JavaScript different from HTML and CSS?
HTML structures the content of the webpage (headings, paragraphs, images). CSS styles the webpage (colors, fonts, layouts). JavaScript makes the webpage interactive by adding behavior (click events, animations, data updates).
4. How do you include JavaScript code in an HTML page?
Using the <script> tag inside your HTML file. You can write JavaScript directly inside this tag or link to an external JavaScript file using the src attribute.
5. What is the syntax to show an alert message in JavaScript?
You use the alert() function. For example: alert('Hello!'); This will show a popup alert box with the message “Hello!”.
6. What are variables in JavaScript?
Variables store data values. They are like labeled boxes where you can keep information that your program uses. You declare variables with var, let, or const.
7. What is the difference between var, let, and const?
var declares variables with function scope and allows redeclaration. let declares block-scoped variables and doesn’t allow redeclaration in the same scope. const declares block-scoped constants whose value cannot be changed after assignment.
8. What data types does JavaScript support?
JavaScript has several data types including: Number, String, Boolean (true or false), null, undefined, Symbol, and BigInt.
9. What is the difference between null and undefined?
null is an assigned value meaning "no value". undefined means a variable has been declared but not assigned any value yet.
10. How do you write comments in JavaScript?
For single-line comments, use // comment here. For multi-line comments, use /* comment here */.
11. What are functions in JavaScript?
Functions are blocks of code designed to perform a particular task. They can be called multiple times. You define functions using the function keyword or arrow syntax.
12. Can you give a simple function example?
Yes!
function greet() {
  alert('Hello, welcome!');
}
greet(); This function shows an alert when called.
13. What is an event in JavaScript?
An event is something that happens in the browser, like a click, keypress, or mouse movement. JavaScript can respond to these events to make pages interactive.
14. How do you make a button respond to a click event?
By adding an event listener or using the onclick attribute:
<button onclick="alert('Clicked!')">Click Me</button>
15. What is the Document Object Model (DOM)?
The DOM is a tree-like structure that represents all the elements on a web page. JavaScript uses the DOM to read and change the content, structure, and styles of the page.
16. How do you select an HTML element using JavaScript?
Using methods like document.getElementById('id'), document.querySelector('selector'), or document.getElementsByClassName('class').
17. What does console.log() do?
It prints messages to the browser's console, which helps developers debug and see outputs without disturbing the user.
18. What is a loop in JavaScript?
A loop runs the same block of code multiple times. Common loops are for, while, and do...while.
19. Can you show a simple for loop example?
for (let i = 0; i < 5; i++) {
  console.log(i);
} This prints numbers 0 to 4 in the console.
20. What are conditionals?
Conditionals let your program make decisions. The most common are if, else if, and else, which run code blocks only when certain conditions are true.
21. What is the difference between == and ===?
== compares values after converting types (loose equality). === compares values and types strictly. Example: 5 == '5' is true, but 5 === '5' is false.
22. What is a string?
A string is a sequence of characters used to represent text, enclosed in single quotes (' '), double quotes (" "), or backticks (` `).
23. How do you concatenate strings?
Using the plus operator (+). Example:
let fullName = 'John' + ' ' + 'Doe';
24. What is an array in JavaScript?
An array is a list that can hold multiple values in an ordered manner, like let fruits = ['apple', 'banana', 'cherry'];.
25. How do you access array elements?
By their index (position), starting at 0. For example, fruits[0] is 'apple'.
26. What is an object in JavaScript?
An object stores data as key-value pairs. It is like a dictionary or a map.
Example: let person = { name: 'Alice', age: 30 };
27. How do you access object properties?
Using dot notation (person.name) or bracket notation (person['name']).
28. What is debugging?
Debugging is finding and fixing errors or bugs in your JavaScript code using tools like browser developer consoles.
29. What are some common JavaScript errors?
Syntax errors (typos), runtime errors (code crashes while running), and logical errors (code runs but gives wrong results).
30. What is the console in browsers?
The console is a developer tool where you can see logs, errors, and run JavaScript commands interactively.
31. Can JavaScript change the content of a web page?
Yes, JavaScript can change text, images, styles, and structure of a web page dynamically using the DOM.
32. What does "interpreted language" mean for JavaScript?
JavaScript is run by the browser line-by-line at runtime, not compiled before running. This allows quick development and testing.
33. Can JavaScript work without HTML?
JavaScript on its own is just code, but for web pages it needs HTML to interact with. However, JavaScript can also run outside browsers, for example on servers (Node.js).
34. What is an IDE or code editor?
An IDE (Integrated Development Environment) or code editor (like VS Code, Sublime Text) helps write and manage JavaScript code efficiently with features like syntax highlighting.
35. How do you run JavaScript code?
You can run JavaScript inside a browser console, embed it in an HTML page using <script> tags, or run it on the server with Node.js.

Reference Book: “JavaScript: The Definitive Guide” by David Flanagan — Comprehensive source on JavaScript history, syntax, and evolution. “Code: The Hidden Language of Computer Hardware and Software” by Charles Petzold — Explains computing fundamentals from binary and assembly to high-level languages. “ECMAScript Language Specification” (ECMA-262) — The official standard document defining JavaScript’s syntax and features over time

Author name: SIR H.A.Mwala Work email: biasharaboraofficials@gmail.com
#MWALA_LEARN Powered by MwalaJS #https://mwalajs.biasharabora.com
#https://educenter.biasharabora.com

:: 2.2::

⬅ ➡