JavaScript Examples
Explore interactive JavaScript examples - learn through practical implementations of digital dice, graphical animations, and more.
Introduction to JavaScript
JavaScript is a scripting language that works with HTML to enhance web pages and make them more interactive by accessing and modifying the content in a webpage. JavaScript can turn a web page into a lively interactive platform for the world wide web users!
JavaScript is a scripting language for HTML. Besides that, you can add sound, date, time, change the color of the web page according to a certain day, prevalidate data entered into a form by the user before it is sent to the server, search through a database, set options based on users preferences and much more.
Basically, JavaScript can access the content of a webpage by selecting any element, attribute or text from an HTML page. It can also modify the content of a webpage by adding elements, attributes, and text to the page.
- Access and modify webpage content
- Respond to user interactions
- Create animations and visual effects
- Validate form data before submission
- Load new content without refreshing the page
We have created these interesting JavaScript examples to illustrate the power and versatility of JavaScript. Please feel free to use and modify the JavaScript examples as long as you include the following copyright notice in your script.
// Copyright notice /* Copyright©2008 Dr.Liew Voon Kiong. All rights reserved */
Example 1: Digital Dice
A digital dice implementation that generates random numbers between 1 and 6. This example demonstrates the use of random number generation and DOM manipulation.
// Digital Dice Implementation const diceElement = document.getElementById('dice'); const rollBtn = document.getElementById('rollDice'); const diceValues = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅']; function rollDice() { // Disable button during animation rollBtn.disabled = true; // Animation effect let rolls = 0; const rollInterval = setInterval(() => { const randomIndex = Math.floor(Math.random() * diceValues.length); diceElement.textContent = diceValues[randomIndex]; diceElement.style.transform = `rotate(${rolls * 30}deg)`; rolls++; }, 100); // Stop animation and show final result setTimeout(() => { clearInterval(rollInterval); const result = Math.floor(Math.random() * 6) + 1; diceElement.textContent = diceValues[result - 1]; diceElement.style.transform = 'rotate(0deg)'; rollBtn.disabled = false; }, 1500); } rollBtn.addEventListener('click', rollDice);
Digital Dice Live Demo
Example 2: Graphical Dice
A graphical dice implementation that visually represents each dice value. This example demonstrates DOM manipulation, CSS styling, and array handling.
// Graphical Dice Implementation const graphicalDice = document.getElementById('graphicalDice'); const rollGraphicalBtn = document.getElementById('rollGraphicalDice'); // Dice dot patterns for each value const dicePatterns = [ [], // 0 (not used) [5], // 1 - center [1, 9], // 2 - top-left, bottom-right [1, 5, 9], // 3 [1, 3, 7, 9], // 4 - corners [1, 3, 5, 7, 9], // 5 [1, 3, 4, 6, 7, 9] // 6 ]; function rollGraphicalDice() { rollGraphicalBtn.disabled = true; // Animation let rolls = 0; const rollInterval = setInterval(() => { // Generate random value for animation effect const tempValue = Math.floor(Math.random() * 6) + 1; drawDice(tempValue); rolls++; }, 100); // Final result setTimeout(() => { clearInterval(rollInterval); const result = Math.floor(Math.random() * 6) + 1; drawDice(result); rollGraphicalBtn.disabled = false; }, 1500); } function drawDice(value) { graphicalDice.innerHTML = ''; const pattern = dicePatterns[value]; for (let i = 1; i <= 9; i++) { const dot = document.createElement('div'); dot.className = 'dice-dot'; if (pattern.includes(i)) { dot.style.opacity = '1'; } else { dot.style.opacity = '0'; } graphicalDice.appendChild(dot); } } rollGraphicalBtn.addEventListener('click', rollGraphicalDice); // Initialize dice drawDice(1);
Graphical Dice Live Demo
More Examples
Explore more JavaScript examples to enhance your learning experience: