Internal JavaScript (using <script> tag) - 4.2.1 | 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
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

Interactive Audio Lesson

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

Introduction to the `<script>` Tag

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Today, we're going to learn about embedding JavaScript within HTML using the `<script>` tag. Can anyone tell me what JavaScript does in a webpage?

Student 1
Student 1

It makes the webpage interactive!

Teacher
Teacher

Exactly! Now, who can guess where we should place the `<script>` tag in an HTML document?

Student 2
Student 2

We can put it in the `<head>` or `<body>` sections, right?

Teacher
Teacher

Great! Both placements are correct, but what's the difference in behavior depending on where we place it?

Student 3
Student 3

If it's in the `<head>`, it runs before the page loads, so some elements might not be ready yet.

Teacher
Teacher

Correct! Here's a mnemonic to remember: 'Head for speed, Body for the show!' This helps to remember the execution context based on placement.

Teacher
Teacher

To wrap up, embedding scripts allows us to add dynamic content, but we need to be mindful of where we place our scripts for optimal performance.

Using the `<script>` Tag Effectively

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

Now that we know about the `<script>` tag, let's look at an example. What happens if we write an alert within a script?

Student 4
Student 4

It displays a pop-up message to the user!

Teacher
Teacher

"Exactly! Such a script looks like this:

Best Practices for Using Internal JavaScript

Unlock Audio Lesson

Signup and Enroll to the course for listening the Audio Lesson

0:00
Teacher
Teacher

We've learned how to use internal JavaScript, but what are some best practices? When do you think internal scripts are the best choice?

Student 2
Student 2

When the script is small and only needed for one specific page?

Teacher
Teacher

Exactly! Internal scripts are great for small snippets specific to a page. But what about larger projects?

Student 4
Student 4

We should probably use external JavaScript files so everything is organized.

Teacher
Teacher

Correct again! Using external files helps maintain cleaner code, especially for teams. Remember, 'Less is more with scripts!' always strive for efficiency.

Teacher
Teacher

In summary, internal scripts are useful for quick interactions, while external files are better for larger scale applications. Always choose wisely!

Introduction & Overview

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

Quick Overview

This section discusses how to include JavaScript directly within HTML files using the

Detailed

Internal JavaScript (using tag)

In this section, we explore how JavaScript can be integrated within HTML files using the <script> tag, which allows developers to add interactive features to their webpages. This method is particularly useful for embedding small scripts directly into HTML, making it simple to quickly test and implement dynamic functionalities.

Key Points:

  • Placement: The <script> tag can be placed within the <head> or <body> sections of an HTML document, depending on when you want the script to be executed.
  • Syntax Example:
Code Editor - html
`, -1); codePreview3d2fc285d35f49b0a829c16832f4b525.setTheme('ace/theme/textmate'); // Attach try it yourself button listener document.getElementById(`try-it-3d2fc285d35f49b0a829c16832f4b525`).addEventListener('click', () => { switchToEditor3d2fc285d35f49b0a829c16832f4b525(); }); function switchToEditor3d2fc285d35f49b0a829c16832f4b525() { // Initialize the editor editor3d2fc285d35f49b0a829c16832f4b525 = ace.edit("3d2fc285d35f49b0a829c16832f4b525") setLanguage3d2fc285d35f49b0a829c16832f4b525(language3d2fc285d35f49b0a829c16832f4b525); editor3d2fc285d35f49b0a829c16832f4b525.setValue(` My First JavaScript

Welcome!

`, -1); initEditorSettings3d2fc285d35f49b0a829c16832f4b525(); attachEventListeners3d2fc285d35f49b0a829c16832f4b525(); document.getElementById(`editor-container-3d2fc285d35f49b0a829c16832f4b525`).classList.remove('hidden'); document.getElementById(`preview-container-3d2fc285d35f49b0a829c16832f4b525`).classList.add('hidden'); } function switchToPreview3d2fc285d35f49b0a829c16832f4b525() { // Clean up the editor instance editor3d2fc285d35f49b0a829c16832f4b525.destroy(); editor3d2fc285d35f49b0a829c16832f4b525 = null; document.getElementById(`editor-container-3d2fc285d35f49b0a829c16832f4b525`).classList.add('hidden'); document.getElementById(`preview-container-3d2fc285d35f49b0a829c16832f4b525`).classList.remove('hidden'); // Reattach the try it yourself button listener document.getElementById(`try-it-3d2fc285d35f49b0a829c16832f4b525`).addEventListener('click', () => { switchToEditor3d2fc285d35f49b0a829c16832f4b525(); }); } function initEditorSettings3d2fc285d35f49b0a829c16832f4b525() { editor3d2fc285d35f49b0a829c16832f4b525.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, }); editor3d2fc285d35f49b0a829c16832f4b525.setTheme('ace/theme/xcode'); editor3d2fc285d35f49b0a829c16832f4b525.session.setMode(`ace/mode/${language3d2fc285d35f49b0a829c16832f4b525}`); } function setLanguage3d2fc285d35f49b0a829c16832f4b525(lang) { language3d2fc285d35f49b0a829c16832f4b525 = lang; editor3d2fc285d35f49b0a829c16832f4b525.session.setMode(`ace/mode/${lang}`); } // Add method to update code programmatically function setCode3d2fc285d35f49b0a829c16832f4b525(code) { editor3d2fc285d35f49b0a829c16832f4b525.setValue(code, -1); } function toggleTheme3d2fc285d35f49b0a829c16832f4b525() { const isDarkMode = editor3d2fc285d35f49b0a829c16832f4b525.getTheme() === 'ace/theme/monokai'; const sunIcon = document.getElementById(`theme-icon-3d2fc285d35f49b0a829c16832f4b525`); const moonIcon = document.getElementById(`moon-icon-3d2fc285d35f49b0a829c16832f4b525`); if (isDarkMode) { editor3d2fc285d35f49b0a829c16832f4b525.setTheme('ace/theme/xcode'); sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); } else { editor3d2fc285d35f49b0a829c16832f4b525.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 runCode3d2fc285d35f49b0a829c16832f4b525() { const code = btoa(editor3d2fc285d35f49b0a829c16832f4b525.getValue()); const stdIn = btoa(document.getElementById("input-3d2fc285d35f49b0a829c16832f4b525").value); const loader = document.getElementById(`run-loader-3d2fc285d35f49b0a829c16832f4b525`); const output = document.getElementById(`output-3d2fc285d35f49b0a829c16832f4b525`); const outputContainer = document.getElementById(`run-output-3d2fc285d35f49b0a829c16832f4b525`); const batchOutputContainer = document.getElementById(`batch-run-output-3d2fc285d35f49b0a829c16832f4b525`); 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: language3d2fc285d35f49b0a829c16832f4b525, language_id: getLanguageId3d2fc285d35f49b0a829c16832f4b525(language3d2fc285d35f49b0a829c16832f4b525), 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 getLanguageId3d2fc285d35f49b0a829c16832f4b525(language) { const languages = { javascript: 63, python: 71, java: 62, c_cpp: 49, }; return languages[language]; } function attachEventListeners3d2fc285d35f49b0a829c16832f4b525() { document .getElementById(`theme-toggle-3d2fc285d35f49b0a829c16832f4b525`) .addEventListener('click', toggleTheme3d2fc285d35f49b0a829c16832f4b525); document .getElementById(`run-code-3d2fc285d35f49b0a829c16832f4b525`) .addEventListener('click', runCode3d2fc285d35f49b0a829c16832f4b525); document .getElementById(`view-preview-3d2fc285d35f49b0a829c16832f4b525`) .addEventListener('click', switchToPreview3d2fc285d35f49b0a829c16832f4b525); }
  • Usage: Common uses of internal scripts include form validation, content updates, event handling, and dynamic features without needing to reload the page.

Significance in Web Development:

Incorporating JavaScript with the <script> tag enhances user interaction on websites, facilitating responsiveness and engagement. However, for larger applications, using external JavaScript files is recommended to keep the code organized and maintainable.

Audio Book

Dive deep into the subject with an immersive audiobook experience.

Using the <script> Tag

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 `, -1); codePreview7e840082451c40cfa2d6e279fe9cc3e9.setTheme('ace/theme/textmate'); // Attach try it yourself button listener document.getElementById(`try-it-7e840082451c40cfa2d6e279fe9cc3e9`).addEventListener('click', () => { switchToEditor7e840082451c40cfa2d6e279fe9cc3e9(); }); function switchToEditor7e840082451c40cfa2d6e279fe9cc3e9() { // Initialize the editor editor7e840082451c40cfa2d6e279fe9cc3e9 = ace.edit("7e840082451c40cfa2d6e279fe9cc3e9") setLanguage7e840082451c40cfa2d6e279fe9cc3e9(language7e840082451c40cfa2d6e279fe9cc3e9); editor7e840082451c40cfa2d6e279fe9cc3e9.setValue(` My First JavaScript

Welcome!

`, -1); initEditorSettings7e840082451c40cfa2d6e279fe9cc3e9(); attachEventListeners7e840082451c40cfa2d6e279fe9cc3e9(); document.getElementById(`editor-container-7e840082451c40cfa2d6e279fe9cc3e9`).classList.remove('hidden'); document.getElementById(`preview-container-7e840082451c40cfa2d6e279fe9cc3e9`).classList.add('hidden'); } function switchToPreview7e840082451c40cfa2d6e279fe9cc3e9() { // Clean up the editor instance editor7e840082451c40cfa2d6e279fe9cc3e9.destroy(); editor7e840082451c40cfa2d6e279fe9cc3e9 = null; document.getElementById(`editor-container-7e840082451c40cfa2d6e279fe9cc3e9`).classList.add('hidden'); document.getElementById(`preview-container-7e840082451c40cfa2d6e279fe9cc3e9`).classList.remove('hidden'); // Reattach the try it yourself button listener document.getElementById(`try-it-7e840082451c40cfa2d6e279fe9cc3e9`).addEventListener('click', () => { switchToEditor7e840082451c40cfa2d6e279fe9cc3e9(); }); } function initEditorSettings7e840082451c40cfa2d6e279fe9cc3e9() { editor7e840082451c40cfa2d6e279fe9cc3e9.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, }); editor7e840082451c40cfa2d6e279fe9cc3e9.setTheme('ace/theme/xcode'); editor7e840082451c40cfa2d6e279fe9cc3e9.session.setMode(`ace/mode/${language7e840082451c40cfa2d6e279fe9cc3e9}`); } function setLanguage7e840082451c40cfa2d6e279fe9cc3e9(lang) { language7e840082451c40cfa2d6e279fe9cc3e9 = lang; editor7e840082451c40cfa2d6e279fe9cc3e9.session.setMode(`ace/mode/${lang}`); } // Add method to update code programmatically function setCode7e840082451c40cfa2d6e279fe9cc3e9(code) { editor7e840082451c40cfa2d6e279fe9cc3e9.setValue(code, -1); } function toggleTheme7e840082451c40cfa2d6e279fe9cc3e9() { const isDarkMode = editor7e840082451c40cfa2d6e279fe9cc3e9.getTheme() === 'ace/theme/monokai'; const sunIcon = document.getElementById(`theme-icon-7e840082451c40cfa2d6e279fe9cc3e9`); const moonIcon = document.getElementById(`moon-icon-7e840082451c40cfa2d6e279fe9cc3e9`); if (isDarkMode) { editor7e840082451c40cfa2d6e279fe9cc3e9.setTheme('ace/theme/xcode'); sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); } else { editor7e840082451c40cfa2d6e279fe9cc3e9.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 runCode7e840082451c40cfa2d6e279fe9cc3e9() { const code = btoa(editor7e840082451c40cfa2d6e279fe9cc3e9.getValue()); const stdIn = btoa(document.getElementById("input-7e840082451c40cfa2d6e279fe9cc3e9").value); const loader = document.getElementById(`run-loader-7e840082451c40cfa2d6e279fe9cc3e9`); const output = document.getElementById(`output-7e840082451c40cfa2d6e279fe9cc3e9`); const outputContainer = document.getElementById(`run-output-7e840082451c40cfa2d6e279fe9cc3e9`); const batchOutputContainer = document.getElementById(`batch-run-output-7e840082451c40cfa2d6e279fe9cc3e9`); 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: language7e840082451c40cfa2d6e279fe9cc3e9, language_id: getLanguageId7e840082451c40cfa2d6e279fe9cc3e9(language7e840082451c40cfa2d6e279fe9cc3e9), 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 getLanguageId7e840082451c40cfa2d6e279fe9cc3e9(language) { const languages = { javascript: 63, python: 71, java: 62, c_cpp: 49, }; return languages[language]; } function attachEventListeners7e840082451c40cfa2d6e279fe9cc3e9() { document .getElementById(`theme-toggle-7e840082451c40cfa2d6e279fe9cc3e9`) .addEventListener('click', toggleTheme7e840082451c40cfa2d6e279fe9cc3e9); document .getElementById(`run-code-7e840082451c40cfa2d6e279fe9cc3e9`) .addEventListener('click', runCode7e840082451c40cfa2d6e279fe9cc3e9); document .getElementById(`view-preview-7e840082451c40cfa2d6e279fe9cc3e9`) .addEventListener('click', switchToPreview7e840082451c40cfa2d6e279fe9cc3e9); }

Detailed Explanation

In this chunk, we learn how to embed JavaScript directly in an HTML document using the <script> tag. This is a simple and effective way to add interactivity to a webpage. The <script> tag can be placed in the head section or within the body of the HTML. Here, we see it inside the body, which means that the JavaScript code will run as the HTML loads. The code in the <script> section creates an alert box with the message 'Hello, welcome to JavaScript!' when the webpage is opened.

Examples & Analogies

Think of it like adding a welcoming message to your home. When guests step through the door, you greet them with a smile and a 'Welcome!' This alert works the same way, greeting visitors to your webpage with a pop-up message.

Structure of a Simple HTML with JavaScript

Unlock Audio Book

Signup and Enroll to the course for listening the Audio Book

The structure of the HTML document shows how the <script> tag fits within the overall format:

Code Editor - html
`, -1); codePreview575459728ec24c828f765b125d7eb534.setTheme('ace/theme/textmate'); // Attach try it yourself button listener document.getElementById(`try-it-575459728ec24c828f765b125d7eb534`).addEventListener('click', () => { switchToEditor575459728ec24c828f765b125d7eb534(); }); function switchToEditor575459728ec24c828f765b125d7eb534() { // Initialize the editor editor575459728ec24c828f765b125d7eb534 = ace.edit("575459728ec24c828f765b125d7eb534") setLanguage575459728ec24c828f765b125d7eb534(language575459728ec24c828f765b125d7eb534); editor575459728ec24c828f765b125d7eb534.setValue(` My First JavaScript

Welcome!

`, -1); initEditorSettings575459728ec24c828f765b125d7eb534(); attachEventListeners575459728ec24c828f765b125d7eb534(); document.getElementById(`editor-container-575459728ec24c828f765b125d7eb534`).classList.remove('hidden'); document.getElementById(`preview-container-575459728ec24c828f765b125d7eb534`).classList.add('hidden'); } function switchToPreview575459728ec24c828f765b125d7eb534() { // Clean up the editor instance editor575459728ec24c828f765b125d7eb534.destroy(); editor575459728ec24c828f765b125d7eb534 = null; document.getElementById(`editor-container-575459728ec24c828f765b125d7eb534`).classList.add('hidden'); document.getElementById(`preview-container-575459728ec24c828f765b125d7eb534`).classList.remove('hidden'); // Reattach the try it yourself button listener document.getElementById(`try-it-575459728ec24c828f765b125d7eb534`).addEventListener('click', () => { switchToEditor575459728ec24c828f765b125d7eb534(); }); } function initEditorSettings575459728ec24c828f765b125d7eb534() { editor575459728ec24c828f765b125d7eb534.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, }); editor575459728ec24c828f765b125d7eb534.setTheme('ace/theme/xcode'); editor575459728ec24c828f765b125d7eb534.session.setMode(`ace/mode/${language575459728ec24c828f765b125d7eb534}`); } function setLanguage575459728ec24c828f765b125d7eb534(lang) { language575459728ec24c828f765b125d7eb534 = lang; editor575459728ec24c828f765b125d7eb534.session.setMode(`ace/mode/${lang}`); } // Add method to update code programmatically function setCode575459728ec24c828f765b125d7eb534(code) { editor575459728ec24c828f765b125d7eb534.setValue(code, -1); } function toggleTheme575459728ec24c828f765b125d7eb534() { const isDarkMode = editor575459728ec24c828f765b125d7eb534.getTheme() === 'ace/theme/monokai'; const sunIcon = document.getElementById(`theme-icon-575459728ec24c828f765b125d7eb534`); const moonIcon = document.getElementById(`moon-icon-575459728ec24c828f765b125d7eb534`); if (isDarkMode) { editor575459728ec24c828f765b125d7eb534.setTheme('ace/theme/xcode'); sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); } else { editor575459728ec24c828f765b125d7eb534.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 runCode575459728ec24c828f765b125d7eb534() { const code = btoa(editor575459728ec24c828f765b125d7eb534.getValue()); const stdIn = btoa(document.getElementById("input-575459728ec24c828f765b125d7eb534").value); const loader = document.getElementById(`run-loader-575459728ec24c828f765b125d7eb534`); const output = document.getElementById(`output-575459728ec24c828f765b125d7eb534`); const outputContainer = document.getElementById(`run-output-575459728ec24c828f765b125d7eb534`); const batchOutputContainer = document.getElementById(`batch-run-output-575459728ec24c828f765b125d7eb534`); 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: language575459728ec24c828f765b125d7eb534, language_id: getLanguageId575459728ec24c828f765b125d7eb534(language575459728ec24c828f765b125d7eb534), 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 getLanguageId575459728ec24c828f765b125d7eb534(language) { const languages = { javascript: 63, python: 71, java: 62, c_cpp: 49, }; return languages[language]; } function attachEventListeners575459728ec24c828f765b125d7eb534() { document .getElementById(`theme-toggle-575459728ec24c828f765b125d7eb534`) .addEventListener('click', toggleTheme575459728ec24c828f765b125d7eb534); document .getElementById(`run-code-575459728ec24c828f765b125d7eb534`) .addEventListener('click', runCode575459728ec24c828f765b125d7eb534); document .getElementById(`view-preview-575459728ec24c828f765b125d7eb534`) .addEventListener('click', switchToPreview575459728ec24c828f765b125d7eb534); }

Detailed Explanation

This chunk explains the structural elements of a simple HTML document. The <!DOCTYPE html> declaration defines this document as an HTML5 document. The <html>, <head>, and <body> tags structure the document. The <head> section contains meta-information and the title, while the <body> section includes the content that is displayed on the webpage, such as headings and scripts. The placement of the <script> tag determines when the JavaScript code executes relative to the loading of the webpage. If the script is placed in the <head>, it may run before the body elements are loaded, which can cause issues unless the code is designed to handle that.

Examples & Analogies

Imagine building a house. The <!DOCTYPE html> is like laying the foundation, ensuring everything is built on solid ground. The <head> acts like the house's roof; it protects the contents of the house (your webpage) from the elements, while the <body> is your living space where all the daily activities happen, including welcoming friends with your JavaScript alerts!

Definitions & Key Concepts

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

Key Concepts

  • Script Tag: The <script> tag is essential for embedding JavaScript within HTML.

  • Dynamic Interactions: JavaScript enables dynamic interaction with users, enhancing the website experience.

  • Placement: The position of the <script> tag affects when the JavaScript code runs.

  • Usability: Using excessive alerts can hinder user experience; moderation is key.

Examples & Real-Life Applications

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

Examples

  • Example of Script Tag:

  • alert('Welcome to the site!');

  • HTML integrating JavaScript:

  • My Page

  • document.write('Hello World!');

Memory Aids

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

🎵 Rhymes Time

  • In the head, it runs first, in the body, it’s rehearsed.

📖 Fascinating Stories

  • Once, in a land of HTML, a tag called

🧠 Other Memory Gems

  • SIP - Script in Placement: Remember placement of <script>: Inside Head = fast, In Body = later!

🎯 Super Acronyms

JED - JavaScript Enhances Dynamics

  • Helps remember script enhances webpage dynamics.

Flash Cards

Review key concepts with flashcards.

Glossary of Terms

Review the Definitions for terms.

  • Term: JavaScript

    Definition:

    A scripting language used to create dynamic and interactive content in web pages.

  • Term: HTML

    Definition:

    HyperText Markup Language, used for structuring content on the web.

  • Term: DOM

    Definition:

    Document Object Model, an interface that browsers use to interpret and interact with HTML content.

  • Term: <script>

    Definition:

    An HTML tag used to embed JavaScript code within a web page.