JavaScript event listeners

-

Event Listeners in JavaScript

Given the following HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Drum Kit</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>

<body>

  <h1 id="title">Drum Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
  </div>


    <script src="index.js"></script>
</body>

</html>
Adding an event listener is as follows:
var drums = document.getElementsByClassName("drum");
for(var k = 0; k < drums.length; k++)
{
    drums[k].addEventListener("click", function () {
        this.style.color = "purple";
    });
}
For keyboard presses, one can register an event listener on the entire document, like so:
document.addEventListener("keydown", function (event) { 
    var key = event.key
    doWork(key);
});

Objects in JavaScript

Objects in JavaScript without a factory are as follows:
var car1 = {
  numberOfDoors: 2,
  name: 'Corvette',
  availableEngineTypes: ['v6','v8']  
};

Constructors in JavaScript

function Car(numberOfDoors, name, availableEngineTypes)
{
    this.numberOfDoors = numberOfDoors;
    this.name = name;
    this.availableEngineTypes = availableEngineTypes;
    this.drive = function() {
        alert("Drive in progress");
    }
}

Higher Order Functions

Functions such as addEventListener are higher order functions as they take functions as input. The function that is input to the higher order function in the case of the addEventListener is called a callback function.

Add delay in JS

var delayInMillis = 100; 
setTimeout(function() { 
    doWork();
},delayInMillis);

References

The Complete 2020 Web Development Bootcamp Udemy

Comments

Post a Comment

Popular posts from this blog

QTreeView and QTableView dynamic changes

-
Image
Dynamically adding items to  QTreeView  and  QTableView Create the UI as follows, with the treeview on the left hand side and the table view on the right hand side. Notes The header file contains the models and the selection models for the tree view and the table view: QStandardItemModel * treeViewModel ; QItemSelectionModel * treeViewSelectionModel ; QItemSelectionModel * tableSelectionModel ; QStandardItemModel * tableModel ; In the .cpp file, the tree view models and table view models are set as the models for the selection models. treeViewSelectionModel -> setModel ( treeViewModel ) ; tableSelectionModel -> setModel ( tableModel ) ; The following code illustrates how to dynamically add a new row to the treeview. void MainWindow :: updateTreeView ( ) { QStandardItem * newRow = new QStandardItem ( QString ( "inserted row" ) ) ; QList < QStandardItem * > newRows ; newRows . append ( newRow ) ; aut...
Read more

C++ strings and string_view

-
C-style strings C style strings should be avoided except when interfacing with C libraries. C string library functions provide no bounds checking and memory allocation support. They are represented as an array of characters. Last character of the string is the null character  \0 , so that code that uses the string knows where it ends. The space needed for a string is always one more than the number of readable characters. String Literals Strings written with quotes around them are string literals. They are stored in a read-only part of memory. Because they are stored in readonly sections, attempting to modify string literals is  undefined behavior . Example: char * str = "world" ; str [ 0 ] = 'y' ; //undefined behavior If the code respected the standard and assigned the string literal to  const char* , the compiler will catch attempts to modify string literals: const char * str = "world" ; str [ 0 ] = 'k' ; //compiler will f...
Read more