JavaScript is a staple programming language in the world of web development. It’s known as a ‘dynamic coding language,’ which means programmers can change variables while the program is running. Conversely, HTML is not a dynamic coding language, which is why we use JavaScript with it to build interactive and useful website features. These two languages often go hand-in-hand, so it’s essential to learn both if you want to code a website. Fortunately, JavaScript is a relatively simple coding language to learn. It’s also been around for a long time, so there are plenty of online resources and books available to help you get the hang of it and solve problems.
What’s JavaScript Used For?
JavaScript offers dozens of valuable possibilities to programmers. Without this coding language, a website would be extraordinarily dull. Nothing would move, and there would be minimal ‘flash’ or useful features to speak of. Without JavaScript, the Internet would be a collection of text documents with (perhaps) a picture or two thrown in the middle. With this language, we can produce everything from moving image galleries to interactive buttons and menus. We can use databases to refresh the information in tables and even change colors on a whim. JavaScript is the bread and butter of web development, and it’s definitely a necessary stepping stone when learning how to code.
Basics JavaScript Tutorial
While JavaScript is still a basic coding language, it’s a few steps up the complexity ladder when compared to HTML or CSS. In short, it’s probably a good idea to get comfortable with HTML first. If you need a quick introduction to HTML, check out this article here.
To start, we found some practice code to show you how it all works. Before you begin, you need to find a way to run the code itself. You can’t just plug it into a text document and expect something to happen, so you’ll need to find a tool to read the code. You can use this handy tool called the TryIt HTML editor, which is a free online HTML editor. For this tutorial, we’ll show you how JavaScript works within HTML, and you’ll have a chance to create a working button!
When you migrate over to the TryIt HTML editor, focus your attention on the left side of the screen. Highlight everything in that left-hand text box and delete it all. Hit the big green ‘Run’ button and watch the pre-set example disappear. Now that we have a clean slate, it’s time to start coding!
To begin, start by typing the following into the left-hand text box of the TryIt HTML editor. You can copy and paste what we have here, but it’s best to type it out yourself to get into the rhythm of it.
<!DOCTYPE html> <html> <body>
This section of code lays the groundwork for the rest of the work you’ll do. It’s essentially telling the machine to begin and prepare for more code. Now, we’ll move on to the title of our project. We’ll lay it out in ‘heading two’ format, so it’s a reasonable size. Feel free to make it bold, italic, or colorful if you wish!
<h2>This is Career Karma's test of JavaScript in HTML</h2>
This is where the fun starts. The text you’re about to type will change when you click your new button, so pay attention. Continue by typing out the following in the next line.
<p id="test">JavaScript can alter HTML web content.</p>
The word “test” is essential here. That word identifies what will be changed when you click the button. In the next line of code, you’ll define the button and tell it what to do.
<button type="button" onclick='document.getElementById("test").innerHTML = "Now it's different!"'>Click Here</button>At this point, it should be relatively obvious what’s happening here. You use JavaScript to create the button and tell it what to do. Other attributes, such as the text displayed on the button, are also controlled through this code. Once you have that written out, don’t forget to close it all out with the following:
</body> </html>
Now, simply hit ‘Run’ and watch the box on the right side of your screen. Once the new text appears, click your button and watch what happens! Impressed? Just imagine how many other things you could code that button to do.
What to Do Next
See? That wasn’t that difficult. In fact, learning JavaScript can be really fun! Of course, this tutorial was elementary, and you’ll encounter many more challenging tasks down the road. Luckily, you don’t have to go at it alone. For more great articles and tutorials, check out the Career Karma blog and keep your coding education going strong. When you’re ready for the big leagues, or if you want to make a lucrative career from programming, be sure to click the link below and find out how!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
