JavaScript (JS) is an incredibly widespread and popular programming language that is used in most of the websites you have ever visited. JS allows for greater interactivity with the user of a website, including things we take for granted in websites today, like playing video, animating certain elements, changing elements of the html page according to the actions of the user, like clicking on a button, and even drop-down menus! The language is easy to get started with and is used in both front and back-end development professionally.
This course will focus on the fundemental aspects of JavaScript to get you a basic understanding of the language. The end project is a simple game that you can run in your browser.
Requirements:
To develop code more easily, most developers use a program called an Integrated Development Environment (IDE), which has many useful features, like a debugger and syntax highlighting. An IDE is not necessary for learning the basics of JS, but it is very convenient. This course will make use of the Visual Studio Code, text editor because it is free and versatile. If you like, you could use any other editor or IDE suitable for developing JavaScript, like Atom or Sublime Text. For the purposes of learning, you could even use an online tool, like https://jsfiddle.net, to run simple JS code. Search something like “run js online” for more options. You could even write code in a simple text document, if you wanted to.
Throughout this course, you will see code snippets like the example below. Highlighted code will be used to represent code that will be added in that step. Ellipses will be used to show that there is code not shown between the shown code snippets. You can scroll horizontally if you can't see all the code. You can copy and paste the code, but I recommend writing all of it out. Remember: The best way to learn to code is by coding and trying things out yourself.
let playerScore = 0;
let opponentScore = 0;
...
function drawScore() {
context.font = "64px Courier New";
context.textAlign = "center";
context.fillStyle = "#e0e0e0";
context.fillText(`${playerScore} ${opponentScore}`, canvas.width / 2, 60);
}