Friday, January 6, 2023

JavaScript DOM and Events

 Enter ! and presss enter to generate the html snippet.

DOM Reference -
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5HQnBCnnCA-SWoVeTZifIaagpZNTGIOLXjw&usqp=CAU

* DOM is not javaScript
* document.queryLocator() --> is part of web apis (libraries browser implement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Workshop</title>
<style>
  .heading {
    color:blue;
  }
  .button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }
  .elmt-color {
    color:yellow;
  }
  .elmt-font {
    font-style: italic;
  }
</style>
</head>

<body>
  <h1 class="heading">JavaScript Example</h1>
  <h2>Playing with DOM</h2>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Srinu"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
  <br/>
  <input type="button" class="button" value="Input Button"><br/>
  <ul>
    <li>Aura</li>
    <li>LWC</li>
  <ul>
  <script>
  console.log(document.querySelector('.heading').textContent);
  document.querySelector('.heading').textContent = 'JavaScript Workshop';

  console.log(document.querySelector('#fname').value);
  document.querySelector('#lname').value = 'SFDC';

  document.querySelector('.button').addEventListener('click',function() {
    console.log(`${document.querySelector('#lname').value}`);
  });

  // To change the background color 
  document.querySelector('body').style.backgroundColor = 'blue'; // background-color should be backgroundColor

  // querySelectorAll
  const liElmts = document.querySelectorAll('li');
  console.log(liElmts);

  for(let i = 0; i < liElmts.length; i++) {
    liElmts[i].textContent = liElmts[i].textContent + ' Modified';
  }

  // Playing with class list
  const h2Elmt = document.querySelector('h2');
  console.log(h2Elmt);
  h2Elmt.classList.add('elmt-font');
  h2Elmt.classList.add('elmt-color');
  h2Elmt.classList.remove('elmt-font');

  // To display or hide
  console.log(h2Elmt.style.display);
  h2Elmt.style.display = 'block'
  console.log(h2Elmt.style.display);

  // to listen to the keyboard events 
  document.addEventListener('keydown',function(e) {
    console.log(e.key);
  });
  </script>
</body>
</html>

No comments:

Post a Comment