JavaScript 30-1 Learning Notes

Learn JavaScirpt30 's notes!

... Although English is not very good, but then came to learn something.

1-------> Javascirpt Drum Kit

The function is this, hit the keyboard above the button, play a drum music.

There are a lot of buttons in the tutorial, my demo only made 4 buttons, the implementation is OK.

Paste the code directly.

<Divclass= "Keys">            <DivData-key= " +"class= "Key">                <KBD>A</KBD>                <spanclass= "Sound">Good</span>            </Div>                        <DivData-key= "The "class= "Key">                <KBD>S</KBD>                <spanclass= "Sound">Not</span>            </Div>                        <DivData-key= "The "class= "Key">                <KBD>D</KBD>                <spanclass= "Sound">Pig</span>            </Div>                        <DivData-key= "The "class= "Key">                <KBD>F</KBD>                <spanclass= "Sound">ow</span>            </Div>        </Div>                        <AudioData-key= " +"src= "Sound/3834.wav"></Audio>        <AudioData-key= "The "src= "Sound/6300.wav"></Audio>        <AudioData-key= "The "src= "Sound/6714.wav"></Audio>                <AudioData-key= "The "src= "Sound/982.wav"></Audio>        

The audio is downloaded from the material online ....

Here is a label that has not been touched <kdb></kdb>

W3school above is explained in this way.

Definition and usage

<kbd> tags define keyboard text.

When it comes to the special style of technical concepts, it is necessary to refer to <kbd> tags. As you have guessed, it is used to indicate that the text is typed from the keyboard.

The browser typically displays the text contained in the label in a width-equal font.

There is a div tag inside the data-key, what is the value of this key? Why is 65,83 ... instead of a one-off.

In fact, he is based on the keyboard of each key keycode to fill in this data-key.

In JS, you can listen to the KeyDown event to get the keycode of each of the keys.

Window.addeventlistener (' KeyDown ',function(e) {         Console.log (e.key+ ') keycode is ' +  E.keycode);});    

We can also direct Baidu keycode comparison table, for inspection.

Now that we know keycode, we can use this keycode to do something.

function PlaySound (e) {            = document.queryselector (' audio[data-key= ' ${e.keycode} "]);             = Document.queryselector ('. key[data-key= ' ${e.keycode} ');                         if return ;             = 0 ;            Audio.play ();            Key.classList.add (' playing ');        }

First, we want to select the required elements audio and key. Audio is used to play music, and key is used to manipulate CSS styles.

In the tutorial, I used the ES6 notation.

Basic usage

constDeclares a read-only constant. Once declared, the value of the constant cannot be changed.

constThe declared variable must not change the value, which means that const once the variable is declared, it has to be initialized immediately and cannot be left to be assigned later.

　　

The first is the definition of the time with a const, and then find the element when the " (is the Keyboard tab above the ' not single quotes!!!") )

Baidu is more difficult to quickly find out what is the case, the use of Google, really useful ...

Find out in layman's ES6 series of articles, this is ES6 new template string of the wording.

anti-apostrophe (') basics

ES6 introduces a new type of string literal syntax, which we call template strings. In addition to using the anti-apostrophe character ' instead of the quotation marks ' or ' for ordinary strings, they appear to be no more than normal strings.

The template string name is rational, it provides JavaScript with a simple string interpolation function, from then on, you can in a more beautiful, more convenient way to interpolate into the string.

And we are in the above code ${e.keycode}, is actually the function of string interpolation.

Classlist is also a new thing that was not used when writing code ... (For me)

Definition and usage

The Classlist property returns the class name of the element as the Domtokenlist object.

This property is used to add, remove, and toggle CSS classes in elements.

The Classlist property is read-only, but you can modify it using the Add () and remove () methods.

In short this code is to implement the press and play, while the press key to add playing this class

But the effect we need is playing and then recovery. So we also need to remove the added playing.

thus

    Const KEYS = Document.queryselectorall ('. Key ');    　　=>key.addeventlistener (' Transitionend ', removetransition));  function  removetransition (e) {            ifreturn;             this. Classlist.remove (' playing ');         }                    

Look at this piece of code: There's something new!

　

Basic usage

ES6 allows you to define functions using the arrows ( => ).

var f = v + V;

The above arrow functions are equivalent to:

var function (v) {  return  v;};

Which means that the code above means that every element inside the keys is executed once.

Key.addeventlistener (' Transitionend ', removetransition);

Transitionend represents the end of the animation. After the animation is finished, remove the playing class yourself.

So why add such a sentence?

  if (e.propertyname!== ' transform ') return;

Because, if the E is not selected, then there are many properties in each E, because we want to operate just transform ... So add this sentence to filter out the CSS that doesn't need to be manipulated

Finally, put the complete code on it:

<! DOCTYPE html>body{Background-Color:cadetblue;        }. keys{Display:flex;            }. key{border:4px solid black; Border-radius:5px;            Margin:1rem; Font-size:1. 5rem;            Padding:1rem. 5rem; Transition:all0. 07s;            width:100px; Text-Align:center;            Color: #fff; Background-color:rgba (0,0,0,0.4); Text-shadow:0 05px Black; }. playing{Transform:scale (1.1); Border-color: #ffc600; Box-shadow:0 010px #FFC600;            } kbd{Display:block; Font-size:40px; }. sound{Font-size:1. 2rem; Text-transform:uppercase; Letter-SPACING:1PX;        Color: #FFC600; }            </style> <body> <div class= "Keys" > <div data-key= "$" class= "key" >                        <kbd>A</kbd> <span class= "sound" >good</span> </div> <div data-key= "class=" "Key" > <kbd>S</kbd> <span CL                ass= "Sound" >not</span> </div> <div data-key= "" "Class=" key ">                        <kbd>D</kbd> <span class= "sound" >pig</span> </div> <div data-key= "class=" "Key" > <kbd>F</kbd> <span CL ass= "Sound" >ow</span> </div> </div> <audio data-key= "65" "Sound/3834.wav" ></audio> <audio data-key= "src=" src= "Sound/6300.wav" ></audio> <au Dio data-key= "src=" sOund/6714.wav "></audio> <audio data-key=" src= "Sound/982.wav" ></audio>                             </body> <script>functionPlaySound (e) {const audio= Document.queryselector (' audio[data-key= "${e.keycode}"]`); Const Key= Document.queryselector ('. key[data-key= ' ${e.keycode} ']`); if(!audio)return; Audio.currenttime= 0 ;            Audio.play (); Key.classList.add (' Playing '); }                        functionRemovetransition (e) {if(E.propertyname!== ' transform ')return;  This. Classlist.remove (' playing '); } Const Keys= Document.queryselectorall ('. Key ')); Keys.foreach (Key=>key.addeventlistener (' Transitionend ', removetransition)); Window.addeventlistener (' KeyDown ', PlaySound); </script> 

Thank you...
 JavaScript 30-1 Learning notes