In this topic, you will learn how to create your first JS script. These programs are pretty simple yet functional, showing that programming in JavaScript is easy and enjoyable. However, some challenges and pitfalls come with programming, so we will examine some common errors and how to avoid them.
Hello, World!
When learning any programming language, it is a kind of a tradition to start with writing a program that displays a message Hello, World! on the screen or another device. Who are we to break the traditions?
console.log("Hello, World!");To run this code directly in your browser, follow these steps: copy the code, then open the browser's console using the correct shortcut for your operating system:
On Windows or Linux, press
Ctrl+Shift+JorCtrl+Shift+I. (Note: In Firefox,Ctrl+Shift+Kalso works specifically to open the console.)On Mac, press
Cmd+Option+JorCmd+Option+I.
After opening the console, paste the code into the input area and press Enter. You should then see the following result:
Hello, World!As you can see, the script consists of one line and prints the text passed in brackets. Note that the quotes are also ignored when outputting the result. This code is straightforward but deserves a detailed review.
Explanation
Here console.log is a function, a block of code that performs work for you, such as text printing. In a way, a function is a subroutine that can be reused in your programs. When parentheses follow a function name, it has been called to get the result. console.log allows you to output information to the console, so this function is often used to find errors in the code.
Hello, World! is a string. All strings in JavaScript are enclosed in single or double quotes, so 'Hello, World!' would also be valid. See for yourself; try to run the following code:
console.log('JavaScript');The program will print:
JavaScriptPrinting quotes
If you want to include quotes in a string, there are two ways to avoid confusion and successfully print them:
You can quote this line in other types of quotes, for example:
console.log("Yes, I'm ready to learn JS.");Or put a backslash (
\) before the quotation marks:
console.log('Yes, I\'m ready to learn JS.');The result of both will be as follows:
Yes, I'm ready to learn JS.It'll work with other types of quotation marks, too. You can try running all the examples to familiarize yourself with JS better.
Possible errors
Errors happen even in simple code lines. The most common errors are:
Improper function naming
consle.log("Hello, World!");This line contains consle.log instead of console.log. This code will not work because of the incorrect spelling.
Using the wrong letter case in function names
CONSOLE.LOG("Hello, World!");This code will also fail because JavaScript is case-sensitive. The correct form of the function name is console.log() in lowercase.
Missing one or both quotation marks for a string
console.log("JavaScript);This does not work because of missing closing quotes.
Missing parentheses
console.log("Hello, World!";The code won't run properly due to a missing closing parenthesis. Make sure that all function calls have matching parentheses.
JavaScript can often run without semicolons, but it's recommended to always use them at the end of statements, such as console.log("Hello, World!");. This practice helps ensure the code is read correctly and avoids potential errors.
Conclusion
In this topic, we have learned how to create a simple JavaScript program that displays a message on the screen. We have also explored some common programming errors and learned how to avoid them. With this basic knowledge, you can start exploring the world of JavaScript and building more complex programs. Remember to practice and experiment with different code examples to improve your skills. Good luck!