Learning JavaScript requires great focus and enthusiasm for technical challenges. When I think back to the first time I learned the popular coding language, I remember having trouble being excited about the various tutorials and books I had to read. It almost felt like I was back in elementary school, slogging through Algebra.

Thinking back on that time, from where I now stand as a veteran coder, I thought about what I would have wanted as a learning resource to make JavaScript easier and more fun. I decided the best option would be to incorporate a fun game that already existed into one about learning coding.

The first step was to think of a game that had a lot in common with coding. That sport was soccer, or as they call back in the UK, football.

I’ve been following football since I was very young – I even got my mum to sew a number 7 on my Liverpool shirt so I could pretend I was Kenny Dalglish! It was accidental how I connected the two: it just kind of clicked one day and just knew that it would be a really unique and fun way to learn coding. It turns out I could use loops for timing the game, variables for team names, arrays for substitutions!

So I set out to make a comparison that would provide potential young readers a more fun way to learn. I called it JavaScript Soccer!

Over the next few graphs, I will help teach readers about how to get started with a rudimentary version of a soccer game made only with JavaScript. It will require a bit of imagination and a couple of big technical leaps. But I think it’s doable for most people getting started learning about the language.

I’d like to add that I’m learning about how to create a tutorial of this type for the first time, so if I make the odd mistake, I’ll make sure it’s not so bad and easily explainable. If one of the commenters has a better idea about to improve the post, please let me know and talk soon.

Are you ready for kick off? Let’s do it!

Strings and Values

NOTE: Where you see this arrow in green, like this:
–> Barcelona  
or  
–> 3
this shows you the code output.
In other words, this shows you what the code does!

We’re going to start by understanding strings and values. Strings are values which can hold almost kind of character, such as letters. For the purposes of our game, we’re going to have a match between two teams, my hometown LA Galaxy and the formerly best team in the world, Barcelona FC. First, we’ll store their names in two separate variables, teamOne for the LA Galaxy, and teamTwo for Barcelona. Variables are great – they can store information, so they’re like containers, and the information can be changed (hence their name).

We’ve set up two variables here, which in our soccer example will hold team names. But we could create as many variables as we need – and with all kinds of different variable names. We just need to make sure that they all have different names. We’re the manager here so we get to choose!

Variables should be one word long, but without spaces. But how do you write Queens Park Rangers as a variable? You’d use camel case, where you capitalise the initials of the 2nd, 3rd, etc words.

NOTE: To make long words easier to read, JavaScript uses camel case, which is TK. So, instead of queensparkrangers, we would write queensParkRangers.

Also, as the team names contain letters, they go inside quotes, making them strings. The quotes store information, so we can change the information later on if needs be. By the way, strings are values which can hold almost any kind of character, such as letters:

iLoveSoccer”

And also numbers