How to Use JavaScript in Webpages - 4.2 | Chapter 4: JavaScript Basics – Making Webpages Interactive | Full Stack Web Development Basics
K12 Students

Academics

AI-Powered learning for Grades 8–12, aligned with major Indian and international curricula.

Academics

Grades

Grade 8 Grade 9 Grade 10 Grade 11 Grade 12

Curriculum

CBSE ICSE IB
Professionals

Professional Courses

Industry-relevant training in Business, Technology, and Design to help professionals and graduates upskill for real-world careers.

Professional Courses
Games

Interactive Games

Fun, engaging games to boost memory, math fluency, typing speed, and English skills—perfect for learners of all ages.

games
Typing
Memory
Math
English Adventures
Knowledge

4.2 - How to Use JavaScript in Webpages

Enroll to start learning

You’ve not yet enrolled in this course. Please enroll for free to listen to audio lessons, classroom podcasts and take mock test.

Practice

Interactive Audio Lesson

Listen to a student-teacher conversation explaining the topic in a relatable way.

Embedding Internal JavaScript

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Today, we'll explore how to embed JavaScript in our HTML files. This is done using the `<script>` tag. Can anyone tell me what this tag does?

Student 1
Student 1

Does it allow us to write JavaScript code?

Teacher
Teacher

"Exactly! Here's an example:

Using External JavaScript Files

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Now let's talk about external JavaScript files. This is done by linking a separate .js file using `<script src='script.js'></script>`. Why do we want to do this?

Student 2
Student 2

To keep our HTML clean and organized!

Teacher
Teacher

Exactly! Plus, what are some benefits of keeping JavaScript in a separate file?

Student 3
Student 3

We can reuse the same script across multiple HTML pages!

Student 1
Student 1

And it's easier to manage changes!

Teacher
Teacher

Great insights! By maintaining separate files, we not only promote organized code but also enhance collaboration in larger projects.

Student 4
Student 4

That makes a lot of sense!

Introduction & Overview

Read a summary of the section's main ideas. Choose from Basic, Medium, or Detailed.

Quick Overview

This section explains how to incorporate JavaScript into webpages using internal and external methods.

Standard

In this section, we explore two key methods to use JavaScript in webpages: embedding it directly within HTML using the

Detailed

How to Use JavaScript in Webpages

JavaScript can enhance user interactivity on webpages, and this section focuses on two primary ways to include JavaScript code:

  1. Internal JavaScript: This involves writing JavaScript directly in your HTML document enclosed within <script> tags. For example:
Code Editor - html
`, -1); codePreview0d6666d0864c4118924e0fe2caa9e60b.setTheme('ace/theme/textmate'); // Attach try it yourself button listener document.getElementById(`try-it-0d6666d0864c4118924e0fe2caa9e60b`).addEventListener('click', () => { switchToEditor0d6666d0864c4118924e0fe2caa9e60b(); }); function switchToEditor0d6666d0864c4118924e0fe2caa9e60b() { // Initialize the editor editor0d6666d0864c4118924e0fe2caa9e60b = ace.edit("0d6666d0864c4118924e0fe2caa9e60b") setLanguage0d6666d0864c4118924e0fe2caa9e60b(language0d6666d0864c4118924e0fe2caa9e60b); editor0d6666d0864c4118924e0fe2caa9e60b.setValue(` My First JavaScript

Welcome!

`, -1); initEditorSettings0d6666d0864c4118924e0fe2caa9e60b(); attachEventListeners0d6666d0864c4118924e0fe2caa9e60b(); document.getElementById(`editor-container-0d6666d0864c4118924e0fe2caa9e60b`).classList.remove('hidden'); document.getElementById(`preview-container-0d6666d0864c4118924e0fe2caa9e60b`).classList.add('hidden'); } function switchToPreview0d6666d0864c4118924e0fe2caa9e60b() { // Clean up the editor instance editor0d6666d0864c4118924e0fe2caa9e60b.destroy(); editor0d6666d0864c4118924e0fe2caa9e60b = null; document.getElementById(`editor-container-0d6666d0864c4118924e0fe2caa9e60b`).classList.add('hidden'); document.getElementById(`preview-container-0d6666d0864c4118924e0fe2caa9e60b`).classList.remove('hidden'); // Reattach the try it yourself button listener document.getElementById(`try-it-0d6666d0864c4118924e0fe2caa9e60b`).addEventListener('click', () => { switchToEditor0d6666d0864c4118924e0fe2caa9e60b(); }); } function initEditorSettings0d6666d0864c4118924e0fe2caa9e60b() { editor0d6666d0864c4118924e0fe2caa9e60b.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, }); editor0d6666d0864c4118924e0fe2caa9e60b.setTheme('ace/theme/xcode'); editor0d6666d0864c4118924e0fe2caa9e60b.session.setMode(`ace/mode/${language0d6666d0864c4118924e0fe2caa9e60b}`); } function setLanguage0d6666d0864c4118924e0fe2caa9e60b(lang) { language0d6666d0864c4118924e0fe2caa9e60b = lang; editor0d6666d0864c4118924e0fe2caa9e60b.session.setMode(`ace/mode/${lang}`); } // Add method to update code programmatically function setCode0d6666d0864c4118924e0fe2caa9e60b(code) { editor0d6666d0864c4118924e0fe2caa9e60b.setValue(code, -1); } function toggleTheme0d6666d0864c4118924e0fe2caa9e60b() { const isDarkMode = editor0d6666d0864c4118924e0fe2caa9e60b.getTheme() === 'ace/theme/monokai'; const sunIcon = document.getElementById(`theme-icon-0d6666d0864c4118924e0fe2caa9e60b`); const moonIcon = document.getElementById(`moon-icon-0d6666d0864c4118924e0fe2caa9e60b`); if (isDarkMode) { editor0d6666d0864c4118924e0fe2caa9e60b.setTheme('ace/theme/xcode'); sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); } else { editor0d6666d0864c4118924e0fe2caa9e60b.setTheme('ace/theme/monokai'); sunIcon.classList.add('hidden'); moonIcon.classList.remove('hidden'); } } function removeTrailingSpaces(base64String) { // Trim the string to remove any trailing newline characters return btoa(atob(base64String).trim()); } async function runCode0d6666d0864c4118924e0fe2caa9e60b() { const code = btoa(editor0d6666d0864c4118924e0fe2caa9e60b.getValue()); const stdIn = btoa(document.getElementById("input-0d6666d0864c4118924e0fe2caa9e60b").value); const loader = document.getElementById(`run-loader-0d6666d0864c4118924e0fe2caa9e60b`); const output = document.getElementById(`output-0d6666d0864c4118924e0fe2caa9e60b`); const outputContainer = document.getElementById(`run-output-0d6666d0864c4118924e0fe2caa9e60b`); const batchOutputContainer = document.getElementById(`batch-run-output-0d6666d0864c4118924e0fe2caa9e60b`); loader.classList.remove('hidden'); outputContainer.classList.remove('hidden'); output.innerHTML = ''; try { const response = await fetch('/code/api/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ language: language0d6666d0864c4118924e0fe2caa9e60b, language_id: getLanguageId0d6666d0864c4118924e0fe2caa9e60b(language0d6666d0864c4118924e0fe2caa9e60b), source_code: code, std_in: stdIn, submission_type: 'run', test_cases: [] || [], }), }); const codeResult = await response.json(); if (Array.isArray(codeResult)) { outputContainer.classList.add("hidden"); batchOutputContainer.classList.remove("hidden"); batchOutputContainer.innerHTML = `
${codeResult?.map((result, index) => { const testCaseStatus = result.is_public ? removeTrailingSpaces(result.stdout) === result.expected_output : result.status; return `
${testCaseStatus ? `` : ``} Test Case ${index + 1} ${!result.is_public ? `` : ``}
`; }) .join("")} 
${codeResult && codeResult[0] ? atob(codeResult[0].stdin) : "No input available"}
${codeResult && codeResult[0] ? atob(codeResult[0].expected_output) : "No expected output available"}
${codeResult?.[0]?.stderr || codeResult[0].compile_output ? atob(codeResult[0].stderr || codeResult[0].compile_output) : codeResult?.[0] ? (codeResult[0].stdout == null ? "" : atob(codeResult[0].stdout)) : "No output available"}
`; codeResult?.forEach((result, index) => { const codeResult = result; document.getElementById(`testCase-${index}`).addEventListener("click", () => { Array.from(document.querySelectorAll('[id*="testCase"]'))?.map(testCase => { if (testCase.id === `testCase-${index}`) { testCase.classList.add("lg:scale-105", "border", "border-gray-200"); testCase.classList.remove("scale-100", "border-none"); } else { testCase.classList.add("scale-100", "border-none"); testCase.classList.remove("lg:scale-105", "border", "border-gray-200"); } }) if (!result.is_public) { document.getElementById("test-result").innerHTML = `

Hidden Test Case

` return; } document.getElementById("test-result").innerHTML = ` 
${codeResult ? atob(codeResult.stdin) : "No input available"}
${codeResult ? atob(codeResult.expected_output) : "No expected output available"}
${codeResult ? (codeResult.stderr || codeResult.compile_output ? atob(codeResult.stderr || codeResult.compile_output) : codeResult.stdout == null ? "" : atob(codeResult.stdout)) : "No output available"}
`; }); }); } else { batchOutputContainer.classList.add("hidden") outputContainer.classList.remove('hidden') output.textContent = codeResult.stderr ? atob(codeResult.stderr) : atob(codeResult.stdout || ''); } } catch (error) { console.error(error); } finally { loader.classList.add('hidden'); } } function getLanguageId0d6666d0864c4118924e0fe2caa9e60b(language) { const languages = { javascript: 63, python: 71, java: 62, c_cpp: 49, }; return languages[language]; } function attachEventListeners0d6666d0864c4118924e0fe2caa9e60b() { document .getElementById(`theme-toggle-0d6666d0864c4118924e0fe2caa9e60b`) .addEventListener('click', toggleTheme0d6666d0864c4118924e0fe2caa9e60b); document .getElementById(`run-code-0d6666d0864c4118924e0fe2caa9e60b`) .addEventListener('click', runCode0d6666d0864c4118924e0fe2caa9e60b); document .getElementById(`view-preview-0d6666d0864c4118924e0fe2caa9e60b`) .addEventListener('click', switchToPreview0d6666d0864c4118924e0fe2caa9e60b); }

This method is straightforward but can cause clutter in larger documents.

  1. External JavaScript File: Here, you create a separate JavaScript file (e.g., script.js) and link it to your HTML document.
Code Editor - html

This is an external script

`, -1); codePreviewf7a2fd534df14fbdb5a1f2b92b02c190.setTheme('ace/theme/textmate'); // Attach try it yourself button listener document.getElementById(`try-it-f7a2fd534df14fbdb5a1f2b92b02c190`).addEventListener('click', () => { switchToEditorf7a2fd534df14fbdb5a1f2b92b02c190(); }); function switchToEditorf7a2fd534df14fbdb5a1f2b92b02c190() { // Initialize the editor editorf7a2fd534df14fbdb5a1f2b92b02c190 = ace.edit("f7a2fd534df14fbdb5a1f2b92b02c190") setLanguagef7a2fd534df14fbdb5a1f2b92b02c190(languagef7a2fd534df14fbdb5a1f2b92b02c190); editorf7a2fd534df14fbdb5a1f2b92b02c190.setValue(`

This is an external script

`, -1); initEditorSettingsf7a2fd534df14fbdb5a1f2b92b02c190(); attachEventListenersf7a2fd534df14fbdb5a1f2b92b02c190(); document.getElementById(`editor-container-f7a2fd534df14fbdb5a1f2b92b02c190`).classList.remove('hidden'); document.getElementById(`preview-container-f7a2fd534df14fbdb5a1f2b92b02c190`).classList.add('hidden'); } function switchToPreviewf7a2fd534df14fbdb5a1f2b92b02c190() { // Clean up the editor instance editorf7a2fd534df14fbdb5a1f2b92b02c190.destroy(); editorf7a2fd534df14fbdb5a1f2b92b02c190 = null; document.getElementById(`editor-container-f7a2fd534df14fbdb5a1f2b92b02c190`).classList.add('hidden'); document.getElementById(`preview-container-f7a2fd534df14fbdb5a1f2b92b02c190`).classList.remove('hidden'); // Reattach the try it yourself button listener document.getElementById(`try-it-f7a2fd534df14fbdb5a1f2b92b02c190`).addEventListener('click', () => { switchToEditorf7a2fd534df14fbdb5a1f2b92b02c190(); }); } function initEditorSettingsf7a2fd534df14fbdb5a1f2b92b02c190() { editorf7a2fd534df14fbdb5a1f2b92b02c190.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, }); editorf7a2fd534df14fbdb5a1f2b92b02c190.setTheme('ace/theme/xcode'); editorf7a2fd534df14fbdb5a1f2b92b02c190.session.setMode(`ace/mode/${languagef7a2fd534df14fbdb5a1f2b92b02c190}`); } function setLanguagef7a2fd534df14fbdb5a1f2b92b02c190(lang) { languagef7a2fd534df14fbdb5a1f2b92b02c190 = lang; editorf7a2fd534df14fbdb5a1f2b92b02c190.session.setMode(`ace/mode/${lang}`); } // Add method to update code programmatically function setCodef7a2fd534df14fbdb5a1f2b92b02c190(code) { editorf7a2fd534df14fbdb5a1f2b92b02c190.setValue(code, -1); } function toggleThemef7a2fd534df14fbdb5a1f2b92b02c190() { const isDarkMode = editorf7a2fd534df14fbdb5a1f2b92b02c190.getTheme() === 'ace/theme/monokai'; const sunIcon = document.getElementById(`theme-icon-f7a2fd534df14fbdb5a1f2b92b02c190`); const moonIcon = document.getElementById(`moon-icon-f7a2fd534df14fbdb5a1f2b92b02c190`); if (isDarkMode) { editorf7a2fd534df14fbdb5a1f2b92b02c190.setTheme('ace/theme/xcode'); sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); } else { editorf7a2fd534df14fbdb5a1f2b92b02c190.setTheme('ace/theme/monokai'); sunIcon.classList.add('hidden'); moonIcon.classList.remove('hidden'); } } function removeTrailingSpaces(base64String) { // Trim the string to remove any trailing newline characters return btoa(atob(base64String).trim()); } async function runCodef7a2fd534df14fbdb5a1f2b92b02c190() { const code = btoa(editorf7a2fd534df14fbdb5a1f2b92b02c190.getValue()); const stdIn = btoa(document.getElementById("input-f7a2fd534df14fbdb5a1f2b92b02c190").value); const loader = document.getElementById(`run-loader-f7a2fd534df14fbdb5a1f2b92b02c190`); const output = document.getElementById(`output-f7a2fd534df14fbdb5a1f2b92b02c190`); const outputContainer = document.getElementById(`run-output-f7a2fd534df14fbdb5a1f2b92b02c190`); const batchOutputContainer = document.getElementById(`batch-run-output-f7a2fd534df14fbdb5a1f2b92b02c190`); loader.classList.remove('hidden'); outputContainer.classList.remove('hidden'); output.innerHTML = ''; try { const response = await fetch('/code/api/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ language: languagef7a2fd534df14fbdb5a1f2b92b02c190, language_id: getLanguageIdf7a2fd534df14fbdb5a1f2b92b02c190(languagef7a2fd534df14fbdb5a1f2b92b02c190), source_code: code, std_in: stdIn, submission_type: 'run', test_cases: [] || [], }), }); const codeResult = await response.json(); if (Array.isArray(codeResult)) { outputContainer.classList.add("hidden"); batchOutputContainer.classList.remove("hidden"); batchOutputContainer.innerHTML = `
${codeResult?.map((result, index) => { const testCaseStatus = result.is_public ? removeTrailingSpaces(result.stdout) === result.expected_output : result.status; return `
${testCaseStatus ? `` : ``} Test Case ${index + 1} ${!result.is_public ? `` : ``}
`; }) .join("")} 
${codeResult && codeResult[0] ? atob(codeResult[0].stdin) : "No input available"}
${codeResult && codeResult[0] ? atob(codeResult[0].expected_output) : "No expected output available"}
${codeResult?.[0]?.stderr || codeResult[0].compile_output ? atob(codeResult[0].stderr || codeResult[0].compile_output) : codeResult?.[0] ? (codeResult[0].stdout == null ? "" : atob(codeResult[0].stdout)) : "No output available"}
`; codeResult?.forEach((result, index) => { const codeResult = result; document.getElementById(`testCase-${index}`).addEventListener("click", () => { Array.from(document.querySelectorAll('[id*="testCase"]'))?.map(testCase => { if (testCase.id === `testCase-${index}`) { testCase.classList.add("lg:scale-105", "border", "border-gray-200"); testCase.classList.remove("scale-100", "border-none"); } else { testCase.classList.add("scale-100", "border-none"); testCase.classList.remove("lg:scale-105", "border", "border-gray-200"); } }) if (!result.is_public) { document.getElementById("test-result").innerHTML = `

Hidden Test Case

` return; } document.getElementById("test-result").innerHTML = ` 
${codeResult ? atob(codeResult.stdin) : "No input available"}
${codeResult ? atob(codeResult.expected_output) : "No expected output available"}
${codeResult ? (codeResult.stderr || codeResult.compile_output ? atob(codeResult.stderr || codeResult.compile_output) : codeResult.stdout == null ? "" : atob(codeResult.stdout)) : "No output available"}
`; }); }); } else { batchOutputContainer.classList.add("hidden") outputContainer.classList.remove('hidden') output.textContent = codeResult.stderr ? atob(codeResult.stderr) : atob(codeResult.stdout || ''); } } catch (error) { console.error(error); } finally { loader.classList.add('hidden'); } } function getLanguageIdf7a2fd534df14fbdb5a1f2b92b02c190(language) { const languages = { javascript: 63, python: 71, java: 62, c_cpp: 49, }; return languages[language]; } function attachEventListenersf7a2fd534df14fbdb5a1f2b92b02c190() { document .getElementById(`theme-toggle-f7a2fd534df14fbdb5a1f2b92b02c190`) .addEventListener('click', toggleThemef7a2fd534df14fbdb5a1f2b92b02c190); document .getElementById(`run-code-f7a2fd534df14fbdb5a1f2b92b02c190`) .addEventListener('click', runCodef7a2fd534df14fbdb5a1f2b92b02c190); document .getElementById(`view-preview-f7a2fd534df14fbdb5a1f2b92b02c190`) .addEventListener('click', switchToPreviewf7a2fd534df14fbdb5a1f2b92b02c190); }

Using external files is generally better for large projects as it keeps the code organized and separates content from behavior. The linking method promotes clean code structure and reusability across different HTML files.

Audio Book

Dive deep into the subject with an immersive audiobook experience.

Using Internal JavaScript

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

You can write JavaScript directly inside an HTML file using the <script> tag:

Code Editor - html
`, -1); codePreview4cbe3852e3e742f7baa986d55dcec687.setTheme('ace/theme/textmate'); // Attach try it yourself button listener document.getElementById(`try-it-4cbe3852e3e742f7baa986d55dcec687`).addEventListener('click', () => { switchToEditor4cbe3852e3e742f7baa986d55dcec687(); }); function switchToEditor4cbe3852e3e742f7baa986d55dcec687() { // Initialize the editor editor4cbe3852e3e742f7baa986d55dcec687 = ace.edit("4cbe3852e3e742f7baa986d55dcec687") setLanguage4cbe3852e3e742f7baa986d55dcec687(language4cbe3852e3e742f7baa986d55dcec687); editor4cbe3852e3e742f7baa986d55dcec687.setValue(` My First JavaScript

Welcome!

`, -1); initEditorSettings4cbe3852e3e742f7baa986d55dcec687(); attachEventListeners4cbe3852e3e742f7baa986d55dcec687(); document.getElementById(`editor-container-4cbe3852e3e742f7baa986d55dcec687`).classList.remove('hidden'); document.getElementById(`preview-container-4cbe3852e3e742f7baa986d55dcec687`).classList.add('hidden'); } function switchToPreview4cbe3852e3e742f7baa986d55dcec687() { // Clean up the editor instance editor4cbe3852e3e742f7baa986d55dcec687.destroy(); editor4cbe3852e3e742f7baa986d55dcec687 = null; document.getElementById(`editor-container-4cbe3852e3e742f7baa986d55dcec687`).classList.add('hidden'); document.getElementById(`preview-container-4cbe3852e3e742f7baa986d55dcec687`).classList.remove('hidden'); // Reattach the try it yourself button listener document.getElementById(`try-it-4cbe3852e3e742f7baa986d55dcec687`).addEventListener('click', () => { switchToEditor4cbe3852e3e742f7baa986d55dcec687(); }); } function initEditorSettings4cbe3852e3e742f7baa986d55dcec687() { editor4cbe3852e3e742f7baa986d55dcec687.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, }); editor4cbe3852e3e742f7baa986d55dcec687.setTheme('ace/theme/xcode'); editor4cbe3852e3e742f7baa986d55dcec687.session.setMode(`ace/mode/${language4cbe3852e3e742f7baa986d55dcec687}`); } function setLanguage4cbe3852e3e742f7baa986d55dcec687(lang) { language4cbe3852e3e742f7baa986d55dcec687 = lang; editor4cbe3852e3e742f7baa986d55dcec687.session.setMode(`ace/mode/${lang}`); } // Add method to update code programmatically function setCode4cbe3852e3e742f7baa986d55dcec687(code) { editor4cbe3852e3e742f7baa986d55dcec687.setValue(code, -1); } function toggleTheme4cbe3852e3e742f7baa986d55dcec687() { const isDarkMode = editor4cbe3852e3e742f7baa986d55dcec687.getTheme() === 'ace/theme/monokai'; const sunIcon = document.getElementById(`theme-icon-4cbe3852e3e742f7baa986d55dcec687`); const moonIcon = document.getElementById(`moon-icon-4cbe3852e3e742f7baa986d55dcec687`); if (isDarkMode) { editor4cbe3852e3e742f7baa986d55dcec687.setTheme('ace/theme/xcode'); sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); } else { editor4cbe3852e3e742f7baa986d55dcec687.setTheme('ace/theme/monokai'); sunIcon.classList.add('hidden'); moonIcon.classList.remove('hidden'); } } function removeTrailingSpaces(base64String) { // Trim the string to remove any trailing newline characters return btoa(atob(base64String).trim()); } async function runCode4cbe3852e3e742f7baa986d55dcec687() { const code = btoa(editor4cbe3852e3e742f7baa986d55dcec687.getValue()); const stdIn = btoa(document.getElementById("input-4cbe3852e3e742f7baa986d55dcec687").value); const loader = document.getElementById(`run-loader-4cbe3852e3e742f7baa986d55dcec687`); const output = document.getElementById(`output-4cbe3852e3e742f7baa986d55dcec687`); const outputContainer = document.getElementById(`run-output-4cbe3852e3e742f7baa986d55dcec687`); const batchOutputContainer = document.getElementById(`batch-run-output-4cbe3852e3e742f7baa986d55dcec687`); loader.classList.remove('hidden'); outputContainer.classList.remove('hidden'); output.innerHTML = ''; try { const response = await fetch('/code/api/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ language: language4cbe3852e3e742f7baa986d55dcec687, language_id: getLanguageId4cbe3852e3e742f7baa986d55dcec687(language4cbe3852e3e742f7baa986d55dcec687), source_code: code, std_in: stdIn, submission_type: 'run', test_cases: [] || [], }), }); const codeResult = await response.json(); if (Array.isArray(codeResult)) { outputContainer.classList.add("hidden"); batchOutputContainer.classList.remove("hidden"); batchOutputContainer.innerHTML = `
${codeResult?.map((result, index) => { const testCaseStatus = result.is_public ? removeTrailingSpaces(result.stdout) === result.expected_output : result.status; return `
${testCaseStatus ? `` : ``} Test Case ${index + 1} ${!result.is_public ? `` : ``}
`; }) .join("")} 
${codeResult && codeResult[0] ? atob(codeResult[0].stdin) : "No input available"}
${codeResult && codeResult[0] ? atob(codeResult[0].expected_output) : "No expected output available"}
${codeResult?.[0]?.stderr || codeResult[0].compile_output ? atob(codeResult[0].stderr || codeResult[0].compile_output) : codeResult?.[0] ? (codeResult[0].stdout == null ? "" : atob(codeResult[0].stdout)) : "No output available"}
`; codeResult?.forEach((result, index) => { const codeResult = result; document.getElementById(`testCase-${index}`).addEventListener("click", () => { Array.from(document.querySelectorAll('[id*="testCase"]'))?.map(testCase => { if (testCase.id === `testCase-${index}`) { testCase.classList.add("lg:scale-105", "border", "border-gray-200"); testCase.classList.remove("scale-100", "border-none"); } else { testCase.classList.add("scale-100", "border-none"); testCase.classList.remove("lg:scale-105", "border", "border-gray-200"); } }) if (!result.is_public) { document.getElementById("test-result").innerHTML = `

Hidden Test Case

` return; } document.getElementById("test-result").innerHTML = ` 
${codeResult ? atob(codeResult.stdin) : "No input available"}
${codeResult ? atob(codeResult.expected_output) : "No expected output available"}
${codeResult ? (codeResult.stderr || codeResult.compile_output ? atob(codeResult.stderr || codeResult.compile_output) : codeResult.stdout == null ? "" : atob(codeResult.stdout)) : "No output available"}
`; }); }); } else { batchOutputContainer.classList.add("hidden") outputContainer.classList.remove('hidden') output.textContent = codeResult.stderr ? atob(codeResult.stderr) : atob(codeResult.stdout || ''); } } catch (error) { console.error(error); } finally { loader.classList.add('hidden'); } } function getLanguageId4cbe3852e3e742f7baa986d55dcec687(language) { const languages = { javascript: 63, python: 71, java: 62, c_cpp: 49, }; return languages[language]; } function attachEventListeners4cbe3852e3e742f7baa986d55dcec687() { document .getElementById(`theme-toggle-4cbe3852e3e742f7baa986d55dcec687`) .addEventListener('click', toggleTheme4cbe3852e3e742f7baa986d55dcec687); document .getElementById(`run-code-4cbe3852e3e742f7baa986d55dcec687`) .addEventListener('click', runCode4cbe3852e3e742f7baa986d55dcec687); document .getElementById(`view-preview-4cbe3852e3e742f7baa986d55dcec687`) .addEventListener('click', switchToPreview4cbe3852e3e742f7baa986d55dcec687); }

Detailed Explanation

Internal JavaScript is used when you want to include JavaScript code directly within your HTML file. This is done using the <script> tag. When the HTML page is loaded, the browser will execute the JavaScript code inside the <script> tag. For example, in the provided code, when a user visits the webpage, an alert box pops up displaying the message "Hello, welcome to JavaScript!"

Examples & Analogies

Think of internal JavaScript like notes written directly in a recipe book. When you open the book to read the recipe, you can see the notes right there. Similarly, when a browser opens an HTML file, it sees the JavaScript code immediately and runs it without needing to look elsewhere.

Using External JavaScript Files

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

You can also write JavaScript in a separate .js file and link it in your HTML:

HTML:

Code Editor - html

This is an external script

`, -1); codePreview6150f228184f4bb9a641e31081818192.setTheme('ace/theme/textmate'); // Attach try it yourself button listener document.getElementById(`try-it-6150f228184f4bb9a641e31081818192`).addEventListener('click', () => { switchToEditor6150f228184f4bb9a641e31081818192(); }); function switchToEditor6150f228184f4bb9a641e31081818192() { // Initialize the editor editor6150f228184f4bb9a641e31081818192 = ace.edit("6150f228184f4bb9a641e31081818192") setLanguage6150f228184f4bb9a641e31081818192(language6150f228184f4bb9a641e31081818192); editor6150f228184f4bb9a641e31081818192.setValue(`

This is an external script

`, -1); initEditorSettings6150f228184f4bb9a641e31081818192(); attachEventListeners6150f228184f4bb9a641e31081818192(); document.getElementById(`editor-container-6150f228184f4bb9a641e31081818192`).classList.remove('hidden'); document.getElementById(`preview-container-6150f228184f4bb9a641e31081818192`).classList.add('hidden'); } function switchToPreview6150f228184f4bb9a641e31081818192() { // Clean up the editor instance editor6150f228184f4bb9a641e31081818192.destroy(); editor6150f228184f4bb9a641e31081818192 = null; document.getElementById(`editor-container-6150f228184f4bb9a641e31081818192`).classList.add('hidden'); document.getElementById(`preview-container-6150f228184f4bb9a641e31081818192`).classList.remove('hidden'); // Reattach the try it yourself button listener document.getElementById(`try-it-6150f228184f4bb9a641e31081818192`).addEventListener('click', () => { switchToEditor6150f228184f4bb9a641e31081818192(); }); } function initEditorSettings6150f228184f4bb9a641e31081818192() { editor6150f228184f4bb9a641e31081818192.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, }); editor6150f228184f4bb9a641e31081818192.setTheme('ace/theme/xcode'); editor6150f228184f4bb9a641e31081818192.session.setMode(`ace/mode/${language6150f228184f4bb9a641e31081818192}`); } function setLanguage6150f228184f4bb9a641e31081818192(lang) { language6150f228184f4bb9a641e31081818192 = lang; editor6150f228184f4bb9a641e31081818192.session.setMode(`ace/mode/${lang}`); } // Add method to update code programmatically function setCode6150f228184f4bb9a641e31081818192(code) { editor6150f228184f4bb9a641e31081818192.setValue(code, -1); } function toggleTheme6150f228184f4bb9a641e31081818192() { const isDarkMode = editor6150f228184f4bb9a641e31081818192.getTheme() === 'ace/theme/monokai'; const sunIcon = document.getElementById(`theme-icon-6150f228184f4bb9a641e31081818192`); const moonIcon = document.getElementById(`moon-icon-6150f228184f4bb9a641e31081818192`); if (isDarkMode) { editor6150f228184f4bb9a641e31081818192.setTheme('ace/theme/xcode'); sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); } else { editor6150f228184f4bb9a641e31081818192.setTheme('ace/theme/monokai'); sunIcon.classList.add('hidden'); moonIcon.classList.remove('hidden'); } } function removeTrailingSpaces(base64String) { // Trim the string to remove any trailing newline characters return btoa(atob(base64String).trim()); } async function runCode6150f228184f4bb9a641e31081818192() { const code = btoa(editor6150f228184f4bb9a641e31081818192.getValue()); const stdIn = btoa(document.getElementById("input-6150f228184f4bb9a641e31081818192").value); const loader = document.getElementById(`run-loader-6150f228184f4bb9a641e31081818192`); const output = document.getElementById(`output-6150f228184f4bb9a641e31081818192`); const outputContainer = document.getElementById(`run-output-6150f228184f4bb9a641e31081818192`); const batchOutputContainer = document.getElementById(`batch-run-output-6150f228184f4bb9a641e31081818192`); loader.classList.remove('hidden'); outputContainer.classList.remove('hidden'); output.innerHTML = ''; try { const response = await fetch('/code/api/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ language: language6150f228184f4bb9a641e31081818192, language_id: getLanguageId6150f228184f4bb9a641e31081818192(language6150f228184f4bb9a641e31081818192), source_code: code, std_in: stdIn, submission_type: 'run', test_cases: [] || [], }), }); const codeResult = await response.json(); if (Array.isArray(codeResult)) { outputContainer.classList.add("hidden"); batchOutputContainer.classList.remove("hidden"); batchOutputContainer.innerHTML = `
${codeResult?.map((result, index) => { const testCaseStatus = result.is_public ? removeTrailingSpaces(result.stdout) === result.expected_output : result.status; return `
${testCaseStatus ? `` : ``} Test Case ${index + 1} ${!result.is_public ? `` : ``}
`; }) .join("")} 
${codeResult && codeResult[0] ? atob(codeResult[0].stdin) : "No input available"}
${codeResult && codeResult[0] ? atob(codeResult[0].expected_output) : "No expected output available"}
${codeResult?.[0]?.stderr || codeResult[0].compile_output ? atob(codeResult[0].stderr || codeResult[0].compile_output) : codeResult?.[0] ? (codeResult[0].stdout == null ? "" : atob(codeResult[0].stdout)) : "No output available"}
`; codeResult?.forEach((result, index) => { const codeResult = result; document.getElementById(`testCase-${index}`).addEventListener("click", () => { Array.from(document.querySelectorAll('[id*="testCase"]'))?.map(testCase => { if (testCase.id === `testCase-${index}`) { testCase.classList.add("lg:scale-105", "border", "border-gray-200"); testCase.classList.remove("scale-100", "border-none"); } else { testCase.classList.add("scale-100", "border-none"); testCase.classList.remove("lg:scale-105", "border", "border-gray-200"); } }) if (!result.is_public) { document.getElementById("test-result").innerHTML = `

Hidden Test Case

` return; } document.getElementById("test-result").innerHTML = ` 
${codeResult ? atob(codeResult.stdin) : "No input available"}
${codeResult ? atob(codeResult.expected_output) : "No expected output available"}
${codeResult ? (codeResult.stderr || codeResult.compile_output ? atob(codeResult.stderr || codeResult.compile_output) : codeResult.stdout == null ? "" : atob(codeResult.stdout)) : "No output available"}
`; }); }); } else { batchOutputContainer.classList.add("hidden") outputContainer.classList.remove('hidden') output.textContent = codeResult.stderr ? atob(codeResult.stderr) : atob(codeResult.stdout || ''); } } catch (error) { console.error(error); } finally { loader.classList.add('hidden'); } } function getLanguageId6150f228184f4bb9a641e31081818192(language) { const languages = { javascript: 63, python: 71, java: 62, c_cpp: 49, }; return languages[language]; } function attachEventListeners6150f228184f4bb9a641e31081818192() { document .getElementById(`theme-toggle-6150f228184f4bb9a641e31081818192`) .addEventListener('click', toggleTheme6150f228184f4bb9a641e31081818192); document .getElementById(`run-code-6150f228184f4bb9a641e31081818192`) .addEventListener('click', runCode6150f228184f4bb9a641e31081818192); document .getElementById(`view-preview-6150f228184f4bb9a641e31081818192`) .addEventListener('click', switchToPreview6150f228184f4bb9a641e31081818192); }

script.js:

Code Editor - javascript

Detailed Explanation

Using external JavaScript files is particularly beneficial for larger web projects. This means you can keep your JavaScript code separate from your HTML, which makes your code cleaner and easier to manage. To link an external JavaScript file, you use the <script> tag with the src attribute pointing to the JavaScript file. In the example, when the webpage loads, it will execute the JavaScript code in the script.js file, showing an alert that says "JavaScript file loaded!".

Examples & Analogies

Imagine you have a library where all books (JavaScript code) are stored separately, rather than scattered throughout your home (HTML file). You can just refer to the library and pull out any book you need, making it easier to find and update your information without cluttering your living space.

Advantages of External JavaScript

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

🟡 Using external files is better for large projects.

Detailed Explanation

When working on larger projects, separating JavaScript code into external files helps keep the code organized. It allows multiple HTML files to reference the same JavaScript file without duplicating the code, making it more efficient. Any changes made to the external JavaScript file will automatically update across all HTML files using it, thus simplifying maintenance and updates.

Examples & Analogies

Consider a car factory where each model has shared parts. If all models use the same engine design stored in one location, it is easy to improve or fix. This is like having an external JavaScript file: you can enhance one piece of code, and all projects that use it benefit from the upgrades without needing to change every single car model.

Definitions & Key Concepts

Learn essential terms and foundational ideas that form the basis of the topic.

Key Concepts

  • Internal JavaScript: Code that is written inside HTML documents using the

  • External JavaScript: A design choice to write JavaScript in external files that are linked to HTML documents.

Examples & Real-Life Applications

See how the concepts apply in real-world scenarios to understand their practical implications.

Examples

  • Internal JavaScript example that uses an alert box to greet users.

  • An HTML document that links to an external JavaScript file named script.js.

Memory Aids

Use mnemonics, acronyms, or visual cues to help remember key information more easily.

🎵 Rhymes Time

  • If you want your web page to be peppy, include JavaScript; it makes it zippy.

📖 Fascinating Stories

  • Imagine you are a chef. If you put all your ingredients in one dish (internal), it can get messy. But when you organize them in the fridge (external files), everything is tidy and fresh!

🧠 Other Memory Gems

  • Remember: JS in HTML = 'Julia Sees Internal' for internal and 'Harry's Home' for external where H links to html.

🎯 Super Acronyms

Use SCE

  • Script Tag for Internal
  • Clean for External.

Flash Cards

Review key concepts with flashcards.

Glossary of Terms

Review the Definitions for terms.

  • Term: Internal JavaScript

    Definition:

    JavaScript code written directly within an HTML document using the

  • Term: External JavaScript file

    Definition:

    A separate JavaScript file that can be linked to an HTML document for better organization.

  • Term: <script>

    Definition:

    An HTML tag used to include JavaScript code in HTML documents.