Javascript Simple Actions

JavaScript Simple Actions

In JavaScript, simple actions are typically straightforward tasks such as manipulating elements, responding to events, or performing calculations. These actions form the core functionality for interactivity and behavior on websites. Below are some examples of common and simple JavaScript actions:

1️⃣ Changing Text Content

You can change the text content of an HTML element using the innerText or textContent property:

<p id="message">Hello, World!</p>
<button onclick="changeText()">Change Text</button>

<script>
  function changeText() {
    document.getElementById('message').innerText = 'Text Changed!';
  }
</script>

2️⃣ Changing Style (CSS) Dynamically

You can change the style of an element using JavaScript by modifying its style property:

<button onclick="changeColor()">Change Background Color</button>

<script>
  function changeColor() {
    document.body.style.backgroundColor = 'lightblue';
  }
</script>

This changes the background color of the page when the button is clicked.

3️⃣ Alert Message

You can display a simple alert message using the alert() function:

<button onclick="showAlert()">Click Me</button>

<script>
  function showAlert() {
    alert('Hello, this is a simple alert!');
  }
</script>

This shows a pop-up alert when the button is clicked.

4️⃣ Logging to Console

You can output information to the browser's console using console.log():

<button onclick="logMessage()">Log to Console</button>

<script>
  function logMessage() {
    console.log('Button clicked!');
  }
</script>

This logs a message to the browser console every time the button is clicked.

5️⃣ Prompting for User Input

You can ask the user for input using the prompt() function:

<button onclick="getUserInput()">Ask for Name</button>

<script>
  function getUserInput() {
    const name = prompt('What is your name?');
    alert('Hello, ' + name);
  }
</script>

The user is prompted for their name, and an alert greeting them is shown.

6️⃣ Hiding and Showing Elements

You can hide or show elements dynamically by changing their style.display property:

<button onclick="toggleVisibility()">Toggle Paragraph Visibility</button>
<p id="myParagraph">This paragraph can be shown or hidden!</p>

<script>
  function toggleVisibility() {
    const paragraph = document.getElementById('myParagraph');
    if (paragraph.style.display === 'none') {
      paragraph.style.display = 'block';
    } else {
      paragraph.style.display = 'none';
    }
  }
</script>

This toggles the visibility of the paragraph when the button is clicked.

7️⃣ Changing HTML Content

You can change the entire HTML content of an element with innerHTML:

<div id="content">Old Content</div>
<button onclick="changeContent()">Change Content</button>

<script>
  function changeContent() {
    document.getElementById('content').innerHTML = '<strong>New Content!</strong>';
  }
</script>

This changes the content of the div element when the button is clicked.

8️⃣ Performing Simple Calculations

You can perform simple arithmetic calculations directly in JavaScript:

<button onclick="calculateSum()">Calculate Sum</button>

<script>
  function calculateSum() {
    const num1 = 10;
    const num2 = 20;
    const sum = num1 + num2;
    alert('The sum is: ' + sum);
  }
</script>

This calculates the sum of two numbers and displays the result in an alert.

9️⃣ Manipulating Arrays

You can perform simple actions on arrays, such as adding, removing, or modifying elements:

<button onclick="addItem()">Add Item to Array</button>

<script>
  const fruits = ['Apple', 'Banana'];

  function addItem() {
    fruits.push('Orange');
    console.log(fruits);  // ["Apple", "Banana", "Orange"]
  }
</script>

This adds an item to the fruits array and logs the updated array.

🔟 Setting a Timer

You can use setTimeout() to execute a function after a specified delay or setInterval() to execute a function repeatedly at a given interval.

setTimeout()

<button onclick="startTimer()">Start Timer</button>

<script>
  function startTimer() {
    setTimeout(function() {
      alert('5 seconds passed!');
    }, 5000);  // 5000 milliseconds = 5 seconds
  }
</script>

setInterval()

<button onclick="startInterval()">Start Interval</button>

<script>
  function startInterval() {
    setInterval(function() {
      console.log('This message appears every 2 seconds');
    }, 2000);  // 2000 milliseconds = 2 seconds
  }
</script>

1️⃣1️⃣ Changing an Element’s Attributes

You can modify an element's attributes, such as src, href, id, etc.

<img id="myImage" src="image1.jpg" alt="Image">
<button onclick="changeImage()">Change Image</button>

<script>
  function changeImage() {
    document.getElementById('myImage').src = 'image2.jpg';
  }
</script>

This changes the src attribute of an image when the button is clicked.

1️⃣2️⃣ Animating an Element

You can animate elements using setInterval() for basic animations:

<button onclick="moveBox()">Move Box</button>
<div id="box" style="width:100px;height:100px;background-color:blue;position:absolute;"></div>

<script>
  function moveBox() {
    let position = 0;
    const box = document.getElementById('box');
    setInterval(function() {
      position += 5;
      box.style.left = position + 'px';
      if (position > window.innerWidth - 100) {
        position = 0;
      }
    }, 10);
  }
</script>

This moves a div element horizontally across the page.

Conclusion

JavaScript is incredibly versatile, and these simple actions can be used to create dynamic and interactive experiences for users on the web. By combining event handling, DOM manipulation, and basic functionality, you can build much more complex and responsive applications.

Let me know if you'd like to dive deeper into any of these actions! 😊