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: