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.

JavaScript capabilities:
  • 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:

Email Validation

Validate email formats using regular expressions

View Example

Counter Timer

Create a countdown timer with JavaScript

View Example

Slide Show

Image slideshow with transition effects

View Example

Math Drill

Interactive math practice for kids

View Example