Published in


JavaScript for Beginners

JavaScript is NOT Java. Please make an effort and remember this. They may have similar names but they are leagues away.
JavaScript is originally a language for the web, used to add interactions to your website so the the users don’t feel bored, it is mostly used for making web apps or classy animations in websites.
You can find examples of what you can do with JavaScript in this link.

Neat! So what is JavaScript?

JavaScript is a scripting language, like python, which means that it is made for small tasks and to automate redundant actions. The most common usages for JavaScript are web apps and Browser Extensions (like Ad-block).

JavaScript is also an interpreted language, which means that unlike C, C# or Java, you do not need to build, run and compile your code into an .exe file for it to run. You just write it, and the browser will take care of everything for you.

That’s the theory behind it, but coding is practical so let’s get hands-on experience.
We will do that by creating a fake drum kit.
This fake drum kit will do the following : you choose a song, and then whenever you press a keyboard key the song will play and pause after a certain amount of time that we choose.
To add some effects we will also make it so that on each press the number of times we press will be displayed as a score.

Let’s begin.

First thing to do is create a new folder, call it whatever you want.
Then inside it create a file called “index.html”.
Next step is to find a song you like, copy it inside the folder and name it “song.mp3”

Then open the index.html file with any Text Editor you have, I like to use Sublime Text 3 because it is lightweight and fast, but use whatever.

Our page should be empty, so let’s write some boilerplate code :

Boilerplate code is code that should always be written no matter the project, it is fundamental, so if you’re new to this and don’t know what the above means, no problem just copy it and wait for my next article on HTML. But basically that is the structure, without it there is no website.

Since we’re going to work with audio we’re gonna add a <audio> tag with an src of “song.mp3” (the one in the folder), we’re also going to give it an id attribute of song (for later use).

We’re gonna then go after the <body></body> tags and write :

<script type=”text/javascript”></script>

This means that we are going to write some JavaScript code inside of it. We then expand the tags.

Now if we were to open this page nothing happens, and it’s normal, we have an audio tag without an autoplay attribute, which means that it will not begin playing immediately, and therefore our code doesn’t do anything, so let’s make it.

We want our song to play for a certain time after each key press before pausing, so the algorithm should be something like this :

Get the song and put it in a variable.
on each key press, play the song.
after a certain amount , pause the song.

To begin, let’s get the song and put it in a variable.
To do this we use following code :

var song = document.getElementById(“song”);

this is why we gave the song and id of song earlier, so that we can get it by it.

We then create 2 functions, one for playing and one for pausing the song. We do this so that we can manipulate our song using only 4 letters instead of 8, talk about laziness.

function play(){ song.play(); }
function pause(){ song.pause(); }

As you can see it is pretty easy to control the song.

We now have to tell the browser to only call the play function IF the user presses a key, to do this we have a little trick called “onkeypress” that we can add to whatever element and tell it to execute a function. In our case, we want to add it to the body because it is the main element in our app.

You can try this now, but it’ll only play it, so let’s add the pause functionality.

To make it simple, we’re gonna tell the browser to pause the song each 3 seconds.
We’ll use the setInterval() function, this function takes 2 parameters.
Parameters are additional informations you give so that a certain function can use them.

For exemple, to add 2 numbers, you would say a+b.
A sum function usually looks like this :

function sum(a,b){ return a+b; }

this means that this function needs the 2 parameters a & b to work.

In our example, setInterval takes 2 parameters too, the first one is the name of the function to call and the second one the number of milliseconds to wait before calling that same function, and it will keep looping infinitely.

so we add this :

setInterval(pause, 3000);

// this means each 3 seconds, pause the damn song, CJ.

Our drum kit is now functional, try it.

Now as an exercice for you, try to get the H1 tag with the score id into a variable, and change it’s value using “.innerHTML” to the number of times you press a key, it’s simple and a great way for you to practice what you learnt.

Once you do that, you can check the final result on this link

and the source code in this one.




GoMyCode Community.

Recommended from Medium

Create a Spreadsheet with React Components and Share them with Bit

Introducing dORM: bringing SQL ORM and query building to Deno

Candy Crush Saga level 31

Quick optimization of arrays iteration

CRUD via JSON — Enjoy Fullstack Development Like a Piece of Cake

How to create your portfolio website using React.js

Loops in javascript

Tasker and Fitbit Integration: tasks overview

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Elyes Manai

Elyes Manai

Google Developer Expert in Machine Learning & Nvidia AI Instructor

More from Medium

JavaScript ES7: A crash course on modern JS

Exploring ECMAScript6

My First JS Application

PokeDex Application

JavaScript Fundamentals