All language subtitles for 167 How to Use Switch Statements in Javascript.en_US

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,420 --> 00:00:08,310 So now that we know which key was pressed and how we can get its innerHTML, how can we play a different 2 00:00:08,310 --> 00:00:10,850 sound depending on which key was pressed? 3 00:00:11,280 --> 00:00:18,300 Well you might think to the if else statements that we learned in our introduction to Javascript modules, 4 00:00:18,960 --> 00:00:22,480 but there's actually seven keys in total, 5 00:00:22,500 --> 00:00:26,380 so we would have to write quite a few if else statements. 6 00:00:26,460 --> 00:00:32,610 Now in this area it would actually be easier to write what's called a switch statement which, just like 7 00:00:32,640 --> 00:00:34,170 a railroad switch, 8 00:00:34,340 --> 00:00:39,820 it will take the code down a different track depending on the value of a variable. 9 00:00:39,840 --> 00:00:44,140 So let's delete this line of code and let's start writing our switch statements. 10 00:00:44,130 --> 00:00:50,280 Now inside Atom, as soon as you start writing the word switch, then our auto suggest will helpfully give 11 00:00:50,280 --> 00:00:53,570 you the skeleton of a Javascript switch statement. 12 00:00:53,760 --> 00:00:58,850 So if you hit enter then it'll give you the bare bones of what it should look like. 13 00:00:59,580 --> 00:01:03,760 So you can see the keyword here, instead of if, is switch. 14 00:01:04,050 --> 00:01:10,110 And then afterwards we have a set of parentheses which includes the expression or the thing that we're 15 00:01:10,110 --> 00:01:11,690 going to switch on. 16 00:01:11,790 --> 00:01:18,480 And in our case, we're going to switch on the letter that is inside the innerHTML of each of these 17 00:01:18,480 --> 00:01:19,210 buttons. 18 00:01:19,260 --> 00:01:22,190 So let's create a variable that holds that value. 19 00:01:22,260 --> 00:01:29,490 So we'll call it buttonInnerHTML, and we'll set it to equal this, 20 00:01:29,490 --> 00:01:34,420 so remember that's the button that triggered the event, .innerHTML. 21 00:01:34,710 --> 00:01:43,300 So now let's switch the button's innerHTML, and, depending on the case, we'll tell it to do something different. 22 00:01:43,590 --> 00:01:48,030 So the first case is if that was equal to w. 23 00:01:48,300 --> 00:01:54,400 So remember our first button has an innerHTML of the letter w. 24 00:01:54,750 --> 00:01:57,190 So if it was the letter w, 25 00:01:57,300 --> 00:02:01,500 then we're going to tell it to play the tom 1 drum. 26 00:02:01,620 --> 00:02:06,870 So I'm going to take that code that I commented out and then put it in here so that it will play the 27 00:02:06,870 --> 00:02:08,830 first drum. 28 00:02:08,910 --> 00:02:16,710 Now after the first case is done, then there is a break statement, which tells the code to exit the switch 29 00:02:16,710 --> 00:02:20,250 statement and continue with the rest of the code. 30 00:02:20,250 --> 00:02:25,990 Now if buttonInnerHTML didn't happen to be equal to w, then it could be equal to something else. 31 00:02:26,190 --> 00:02:33,360 So in that case we would have to specify the next likely scenario, which is what if the innerHTML was 32 00:02:33,510 --> 00:02:36,610 a, i.e. the second button got clicked. 33 00:02:36,780 --> 00:02:44,740 Well, in this case, we're going to play the next sound instead, and we're going to play the tom-2.mp3. 34 00:02:44,910 --> 00:02:48,700 And once again we have to end our case with a break. 35 00:02:48,720 --> 00:02:55,380 So the switch statement looks a little bit weird, because instead of having, say for example, an open parentheses 36 00:02:55,380 --> 00:03:04,580 here and a closing parentheses here, it actually has a colon and a break keyword instead. 37 00:03:04,740 --> 00:03:09,780 But just know that it's basically the same thing. Between the colon and the break keyword are 38 00:03:09,820 --> 00:03:16,770 all the things we want the web site to carry out if the buttonInnerHTML was equal to this particular 39 00:03:16,770 --> 00:03:17,540 case. 40 00:03:17,610 --> 00:03:19,560 Now in this case, 41 00:03:19,560 --> 00:03:21,710 instead of calling both of our sounds 42 00:03:21,840 --> 00:03:27,770 audio, we should really give it a different name. 43 00:03:27,870 --> 00:03:31,520 So why don't we call our first one the sound that it's going to make, 44 00:03:31,590 --> 00:03:38,870 so tom1, and our second one tom2, after the sound file that's going to be played? 45 00:03:38,940 --> 00:03:44,070 And remember if you're going to change it here then you have to change it here as well so that you know 46 00:03:44,100 --> 00:03:47,230 that you're playing tom1 and you're playing tom2. 47 00:03:47,250 --> 00:03:54,600 Now I've just gone in and added all of the remaining cases for the key s, d, j, k and l. 48 00:03:54,620 --> 00:04:00,660 So now I've gone in and I've added all of the other remaining cases so that our web site knows what 49 00:04:00,660 --> 00:04:05,460 to do if the s key was pressed or the d or the j, k, l. 50 00:04:05,540 --> 00:04:09,890 Now the final case that we've got is actually the default case. 51 00:04:10,230 --> 00:04:16,980 Now the default is kind of like the else statement at the end of an if. It covers all of the other scenarios 52 00:04:16,980 --> 00:04:18,730 that we haven't specified. 53 00:04:18,960 --> 00:04:27,590 What if the buttonInnerHTML wasn't w, a, s, d, and instead it was something like 1 or comma? 54 00:04:28,020 --> 00:04:30,600 Well that's when the default will trigger. 55 00:04:30,630 --> 00:04:35,730 Now even though in most cases the default will likely never be triggered, 56 00:04:35,850 --> 00:04:41,400 it's still good practice to include it, as you can't always predict ahead of time what might go wrong 57 00:04:41,400 --> 00:04:42,030 in the future, 58 00:04:42,030 --> 00:04:42,580 right? 59 00:04:42,840 --> 00:04:45,890 And the value could always be something that you didn't expect. 60 00:04:46,080 --> 00:04:51,540 So let's just go ahead and add a console.log that logs the buttonInnerHTML 61 00:04:51,570 --> 00:04:53,580 that triggered the default case. 62 00:04:53,790 --> 00:05:00,510 So let's save, refresh our web site, and you can see now if I click on any of these buttons 63 00:05:03,700 --> 00:05:07,450 you can see that we get a different sound for each button click. 64 00:05:07,570 --> 00:05:08,990 That's pretty cool, right? Now 65 00:05:09,000 --> 00:05:15,820 in the next lesson we're going to dig into keyboard events and see how we can use the keyboard to trigger 66 00:05:15,820 --> 00:05:19,280 these sounds instead of having to press on the buttons. 67 00:05:19,380 --> 00:05:22,020 So for all of that and more, I'll see you on the next lesson. 6766

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.