Professional Courses
Industry-relevant training in Business, Technology, and Design to help professionals and graduates upskill for real-world careers.
Categories
Interactive Games
Fun, engaging games to boost memory, math fluency, typing speed, and English skills—perfect for learners of all ages.
Typing
Memory
Math
English Adventures
Knowledge
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.
Interactive Audio Lesson
Listen to a student-teacher conversation explaining the topic in a relatable way.
Introduction to JavaScript
Unlock Audio Lesson
Signup and Enroll to the course for listening the Audio Lesson
Today, we’ll explore JavaScript, a crucial technology for making your webpages interactive. Can anyone tell me what they think JavaScript is?
Is it like HTML or CSS?
Great question! While HTML structures your content and CSS styles it, JavaScript adds behavior—like making elements interactive. For instance, it allows us to validate forms without refreshing the page.
So can we run JavaScript in the browser?
Exactly! JavaScript runs in browsers like Chrome or Firefox. Let’s remember the trio: HTML for structure, CSS for style, and JavaScript for behavior—H-C-J!
What can we do with JavaScript?
We can validate forms, create animations, show/hide content, and even make games or web applications. It opens up a world of interactivity!
I see! So it's really versatile.
Exactly! So, let’s explore how we can use it in our webpages.
Implementing JavaScript
Unlock Audio Lesson
Signup and Enroll to the course for listening the Audio Lesson
We have two main ways to implement JavaScript in our webpages. Let’s start with internal JavaScript. Who remembers how we can do that?
By using the script tag?
Correct! For example, inside your HTML, you use `<script>` tags. Can anyone tell me how an external JavaScript file is linked?
We use the `src` attribute in the script tag?
Absolutely right! This is better for larger projects because it keeps our files organized. Always aim to separate concerns.
What’s the advantage of keeping JavaScript in a separate file?
Great question! It helps in maintaining code clarity, reusability, and efficiency. You can manage your code better, especially as projects grow.
Variables and Data Types
Unlock Audio Lesson
Signup and Enroll to the course for listening the Audio Lesson
Let's talk about variables! Variables in JavaScript are like containers for storing data. Can anyone tell me how we declare variables?
Using `let`, `const`, and `var`?
Exactly! Remember: `let` for changeable values, `const` for fixed values, and use `var` with caution since it’s older. What naming rules should we follow?
It must start with a letter, underscore, or dollar sign, right?
That’s correct! And don’t forget, it’s case-sensitive and can’t use reserved words. Let's summarize some data types. What are some examples?
String, number, boolean, array, and object!
Perfect! Alongside the naming rules, knowing data types is crucial for effective coding.
Functions and Control Structures
Unlock Audio Lesson
Signup and Enroll to the course for listening the Audio Lesson
Now, how about we delve into functions? What’s a function?
A block of reusable code?
That's right! Functions help streamline our code. Let’s see how we define one. What about control statements? How do we decide which code to run?
By using `if` statements?
Exactly. Conditional statements help us execute code based on conditions. Can anyone give an example?
Like checking if a student's grade is passing or failing!
Spot on! This is how making decisions in code works. Let’s also look at loop structures. Who can tell me what a loop does?
It repeats the code until a condition is met.
Exactly! Back for a quick recap on functions, conditionals, and loops now!
Events and the DOM
Unlock Audio Lesson
Signup and Enroll to the course for listening the Audio Lesson
Let’s move to events and the Document Object Model or DOM! Does anyone know what the DOM is?
Is it the tree structure of the webpage?
Yes! It represents the structure of your page. We can access HTML elements through JavaScript using DOM methods. For instance, what happens when we click a button?
Some JavaScript code runs to change the webpage?
Precisely! Let’s see it in action. We'll use events like `onclick` to trigger JavaScript functions. Can anyone show me how we change the text of a paragraph when a button is clicked?
We can use `document.getElementById` to access the paragraph and change its `innerText`!
Exactly! That's how we make our webpages interactive. We’ll wrap up this session with our mini project: building a simple calculator!
Introduction & Overview
Read a summary of the section's main ideas. Choose from Basic, Medium, or Detailed.
Quick Overview
Standard
In this section, we explore JavaScript's role in web development, its syntax and usage, including internal and external file handling, variable declaration, data types, operators, functions, control structures like loops and conditionals, event handling, and a mini-project demonstrating its application to create a simple calculator.
Detailed
JavaScript Basics – Making Webpages Interactive
JavaScript is a powerful scripting language that enhances the interactivity and dynamism of webpages. It operates primarily on the client side, allowing updates to HTML and CSS without reloading the page. Understanding how to utilize JavaScript effectively is essential for any web developer. This section covers:
- What is JavaScript? Understanding its role as part of the trio of web technologies: HTML for structure, CSS for style, and JavaScript for behavior.
- How to Use JavaScript: Learning the ways to implement JavaScript, including internal scripts embedded directly in HTML and external JavaScript files.
- Variables and Data Types: Introduction to declaring variables with
let,const, andvar, and understanding different JavaScript data types such as strings, numbers, arrays, and objects. - Operators: Familiarity with key operators in JavaScript, including arithmetic, comparison, and assignment operators.
- Functions: The definition and usage of functions, showcasing the ability to create reusable code blocks.
- Conditional Statements and Loops: Basics of flow control in JavaScript through conditional statements and loops for repetitive tasks.
- Events and the DOM: Understanding the Document Object Model (DOM) and how JavaScript can manipulate HTML elements based on events.
- Mini Project: Creation of a simple calculator demonstrating practical application and integration of the concepts discussed.
Overall, mastering these concepts lays a solid foundation for further exploration and development in JavaScript.
Audio Book
Dive deep into the subject with an immersive audiobook experience.
What is JavaScript?
Unlock Audio Book
Signup and Enroll to the course for listening the Audio Book
JavaScript is a scripting language used to make webpages dynamic and interactive.
● It runs in the browser (like Chrome, Firefox, Edge).
● It is client-side (runs on the user’s computer, not the server).
● It can update HTML and CSS without reloading the page.
● Used for:
○ Validating forms
○ Showing/hiding content
○ Making menus drop down
○ Creating animations and games
○ Building web applications
JavaScript is one of the 3 core technologies of web development:
| Technology | Purpose |
|---|---|
| HTML | Structure (what appears) |
| CSS | Style (how it looks) |
| JavaScript | Behavior (how it acts) |
Detailed Explanation
JavaScript is a programming language that is crucial for making web pages interactive. Unlike static HTML, JavaScript lets users interact with the website in dynamic ways. It runs directly in the browser, which means it doesn't require the server to execute code, enabling real-time interactions without the need to reload the page. This can include updating text, validating forms, showing or hiding content, and creating interactive features like games or animations. Moreover, JavaScript is one of the three primary technologies used in web development, along with HTML for structuring content and CSS for styling it.
Examples & Analogies
Think of a webpage like a theater. HTML is the structure of the theater—where the seats are, where the stage is, etc. CSS is the decoration—how the theater looks on the outside, what colors are used, and how everything is positioned. JavaScript is like the director who decides how the actors move and interact with the audience. Without JavaScript, the theater is merely a structure with no performance.
How to Use JavaScript in Webpages
Unlock Audio Book
Signup and Enroll to the course for listening the Audio Book
You can use JavaScript in two main ways:
Internal JavaScript (using
`, -1);
codePreviewba297e079ea84105a579de53ab6df1a5.setTheme('ace/theme/textmate');
// Attach try it yourself button listener
document.getElementById(`try-it-ba297e079ea84105a579de53ab6df1a5`).addEventListener('click', () => {
switchToEditorba297e079ea84105a579de53ab6df1a5();
});
function switchToEditorba297e079ea84105a579de53ab6df1a5() {
// Initialize the editor
editorba297e079ea84105a579de53ab6df1a5 = ace.edit("ba297e079ea84105a579de53ab6df1a5")
setLanguageba297e079ea84105a579de53ab6df1a5(languageba297e079ea84105a579de53ab6df1a5);
editorba297e079ea84105a579de53ab6df1a5.setValue(`
My First JavaScript
Welcome!
`, -1);
initEditorSettingsba297e079ea84105a579de53ab6df1a5();
attachEventListenersba297e079ea84105a579de53ab6df1a5();
document.getElementById(`editor-container-ba297e079ea84105a579de53ab6df1a5`).classList.remove('hidden');
document.getElementById(`preview-container-ba297e079ea84105a579de53ab6df1a5`).classList.add('hidden');
}
function switchToPreviewba297e079ea84105a579de53ab6df1a5() {
// Clean up the editor instance
editorba297e079ea84105a579de53ab6df1a5.destroy();
editorba297e079ea84105a579de53ab6df1a5 = null;
document.getElementById(`editor-container-ba297e079ea84105a579de53ab6df1a5`).classList.add('hidden');
document.getElementById(`preview-container-ba297e079ea84105a579de53ab6df1a5`).classList.remove('hidden');
// Reattach the try it yourself button listener
document.getElementById(`try-it-ba297e079ea84105a579de53ab6df1a5`).addEventListener('click', () => {
switchToEditorba297e079ea84105a579de53ab6df1a5();
});
}
function initEditorSettingsba297e079ea84105a579de53ab6df1a5() {
editorba297e079ea84105a579de53ab6df1a5.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
});
editorba297e079ea84105a579de53ab6df1a5.setTheme('ace/theme/xcode');
editorba297e079ea84105a579de53ab6df1a5.session.setMode(`ace/mode/${languageba297e079ea84105a579de53ab6df1a5}`);
}
function setLanguageba297e079ea84105a579de53ab6df1a5(lang) {
languageba297e079ea84105a579de53ab6df1a5 = lang;
editorba297e079ea84105a579de53ab6df1a5.session.setMode(`ace/mode/${lang}`);
}
// Add method to update code programmatically
function setCodeba297e079ea84105a579de53ab6df1a5(code) {
editorba297e079ea84105a579de53ab6df1a5.setValue(code, -1);
}
function toggleThemeba297e079ea84105a579de53ab6df1a5() {
const isDarkMode = editorba297e079ea84105a579de53ab6df1a5.getTheme() === 'ace/theme/monokai';
const sunIcon = document.getElementById(`theme-icon-ba297e079ea84105a579de53ab6df1a5`);
const moonIcon = document.getElementById(`moon-icon-ba297e079ea84105a579de53ab6df1a5`);
if (isDarkMode) {
editorba297e079ea84105a579de53ab6df1a5.setTheme('ace/theme/xcode');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
} else {
editorba297e079ea84105a579de53ab6df1a5.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 runCodeba297e079ea84105a579de53ab6df1a5() {
const code = btoa(editorba297e079ea84105a579de53ab6df1a5.getValue());
const stdIn = btoa(document.getElementById("input-ba297e079ea84105a579de53ab6df1a5").value);
const loader = document.getElementById(`run-loader-ba297e079ea84105a579de53ab6df1a5`);
const output = document.getElementById(`output-ba297e079ea84105a579de53ab6df1a5`);
const outputContainer = document.getElementById(`run-output-ba297e079ea84105a579de53ab6df1a5`);
const batchOutputContainer = document.getElementById(`batch-run-output-ba297e079ea84105a579de53ab6df1a5`);
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: languageba297e079ea84105a579de53ab6df1a5,
language_id: getLanguageIdba297e079ea84105a579de53ab6df1a5(languageba297e079ea84105a579de53ab6df1a5),
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?.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 getLanguageIdba297e079ea84105a579de53ab6df1a5(language) {
const languages = {
javascript: 63,
python: 71,
java: 62,
c_cpp: 49,
};
return languages[language];
}
function attachEventListenersba297e079ea84105a579de53ab6df1a5() {
document
.getElementById(`theme-toggle-ba297e079ea84105a579de53ab6df1a5`)
.addEventListener('click', toggleThemeba297e079ea84105a579de53ab6df1a5);
document
.getElementById(`run-code-ba297e079ea84105a579de53ab6df1a5`)
.addEventListener('click', runCodeba297e079ea84105a579de53ab6df1a5);
document
.getElementById(`view-preview-ba297e079ea84105a579de53ab6df1a5`)
.addEventListener('click', switchToPreviewba297e079ea84105a579de53ab6df1a5);
}
External JavaScript File
Hidden Test Case
${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"}
You can also write JavaScript in a separate .js file and link it in your HTML:
This is an external script
`, -1); codePreview8165135968f7483b9e920e83680d0e34.setTheme('ace/theme/textmate'); // Attach try it yourself button listener document.getElementById(`try-it-8165135968f7483b9e920e83680d0e34`).addEventListener('click', () => { switchToEditor8165135968f7483b9e920e83680d0e34(); }); function switchToEditor8165135968f7483b9e920e83680d0e34() { // Initialize the editor editor8165135968f7483b9e920e83680d0e34 = ace.edit("8165135968f7483b9e920e83680d0e34") setLanguage8165135968f7483b9e920e83680d0e34(language8165135968f7483b9e920e83680d0e34); editor8165135968f7483b9e920e83680d0e34.setValue(`This is an external script
`, -1); initEditorSettings8165135968f7483b9e920e83680d0e34(); attachEventListeners8165135968f7483b9e920e83680d0e34(); document.getElementById(`editor-container-8165135968f7483b9e920e83680d0e34`).classList.remove('hidden'); document.getElementById(`preview-container-8165135968f7483b9e920e83680d0e34`).classList.add('hidden'); } function switchToPreview8165135968f7483b9e920e83680d0e34() { // Clean up the editor instance editor8165135968f7483b9e920e83680d0e34.destroy(); editor8165135968f7483b9e920e83680d0e34 = null; document.getElementById(`editor-container-8165135968f7483b9e920e83680d0e34`).classList.add('hidden'); document.getElementById(`preview-container-8165135968f7483b9e920e83680d0e34`).classList.remove('hidden'); // Reattach the try it yourself button listener document.getElementById(`try-it-8165135968f7483b9e920e83680d0e34`).addEventListener('click', () => { switchToEditor8165135968f7483b9e920e83680d0e34(); }); } function initEditorSettings8165135968f7483b9e920e83680d0e34() { editor8165135968f7483b9e920e83680d0e34.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, }); editor8165135968f7483b9e920e83680d0e34.setTheme('ace/theme/xcode'); editor8165135968f7483b9e920e83680d0e34.session.setMode(`ace/mode/${language8165135968f7483b9e920e83680d0e34}`); } function setLanguage8165135968f7483b9e920e83680d0e34(lang) { language8165135968f7483b9e920e83680d0e34 = lang; editor8165135968f7483b9e920e83680d0e34.session.setMode(`ace/mode/${lang}`); } // Add method to update code programmatically function setCode8165135968f7483b9e920e83680d0e34(code) { editor8165135968f7483b9e920e83680d0e34.setValue(code, -1); } function toggleTheme8165135968f7483b9e920e83680d0e34() { const isDarkMode = editor8165135968f7483b9e920e83680d0e34.getTheme() === 'ace/theme/monokai'; const sunIcon = document.getElementById(`theme-icon-8165135968f7483b9e920e83680d0e34`); const moonIcon = document.getElementById(`moon-icon-8165135968f7483b9e920e83680d0e34`); if (isDarkMode) { editor8165135968f7483b9e920e83680d0e34.setTheme('ace/theme/xcode'); sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); } else { editor8165135968f7483b9e920e83680d0e34.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 runCode8165135968f7483b9e920e83680d0e34() { const code = btoa(editor8165135968f7483b9e920e83680d0e34.getValue()); const stdIn = btoa(document.getElementById("input-8165135968f7483b9e920e83680d0e34").value); const loader = document.getElementById(`run-loader-8165135968f7483b9e920e83680d0e34`); const output = document.getElementById(`output-8165135968f7483b9e920e83680d0e34`); const outputContainer = document.getElementById(`run-output-8165135968f7483b9e920e83680d0e34`); const batchOutputContainer = document.getElementById(`batch-run-output-8165135968f7483b9e920e83680d0e34`); 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: language8165135968f7483b9e920e83680d0e34, language_id: getLanguageId8165135968f7483b9e920e83680d0e34(language8165135968f7483b9e920e83680d0e34), 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 = `Hidden Test Case
${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"}
script.js:
🟡 Using external files is better for large projects.
Detailed Explanation
There are two primary ways to include JavaScript in a webpage. The first method is through Internal JavaScript, where code is placed directly within the HTML file using the <script> tag. This is straightforward for small scripts or tests. The second method is using an External JavaScript File, which involves writing the code in a separate file with a .js extension and linking it in the HTML. This method is preferred for larger projects because it helps keep HTML and JavaScript separate, making the code easier to manage and reuse.
Examples & Analogies
Imagine you're organizing a community event. If you announce everything verbally at the gathering (internal JavaScript), it can work for small groups. However, if you have many guests, it would be more efficient to send out a detailed invitation or brochure (external JavaScript) that guests can refer back to whenever needed. This keeps things organized and accessible!
Definitions & Key Concepts
Learn essential terms and foundational ideas that form the basis of the topic.
Key Concepts
-
JavaScript: A scripting language for creating interactive web content.
-
Variables: Containers to store data, declared using let, const, and var.
-
Data Types: Different classifications of data in JavaScript including strings, numbers, and objects.
-
Functions: Blocks of reusable code in JavaScript.
-
Conditional Statements: Code blocks that execute based on conditions.
-
Loops: Structures that repeat code multiple times.
-
DOM: The tree representation of HTML in JavaScript.
Examples & Real-Life Applications
See how the concepts apply in real-world scenarios to understand their practical implications.
Examples
-
Internal JavaScript Example:
-
My First JavaScript -
Welcome!
-
alert('Hello, welcome to JavaScript!');
-
External JavaScript Example:
-
This is an external script
-
script.js
-
alert('JavaScript file loaded!');
Memory Aids
Use mnemonics, acronyms, or visual cues to help remember key information more easily.
🎵 Rhymes Time
-
With JavaScript, the page can sing,
📖 Fascinating Stories
-
Once in a digital land, HTML was lonely, without any activity. Enter JavaScript, a skillful wizard, energizing webpages, making them lively and fun!
🧠 Other Memory Gems
-
Functions Are Like Recipes: Create, Execute, and Repeat!
🎯 Super Acronyms
H-C-J
- HTML for Structure
- CSS for Style
- JavaScript for Interaction!
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 on websites.
-
Term: Variable
Definition:
A container for storing data values.
-
Term: Data Type
Definition:
A classification of data into different kinds such as strings, numbers, booleans, arrays, and objects.
-
Term: Function
Definition:
A reusable block of code that performs a specific task.
-
Term: Conditional Statement
Definition:
A statement that executes code based on whether a condition is true or false.
-
Term: Loop
Definition:
A control structure that repeats a block of code multiple times.
-
Term: DOM
Definition:
Document Object Model, a programming interface for web documents.
-
Term: Event
Definition:
An action or occurrence that triggers a response in the webpage's JavaScript.
-
Term: Mini Project
Definition:
A small practical application to reinforce concepts learned, such as creating a simple calculator.