What is JavaScript?
JavaScript is a programming language used on both the client-side and server-side that allows for interactive web pages. While HTML and CSS are languages that give structure and style to a webpage, JavaScript enables more engaging and interactive elements.
What is JavaScript used for?
- Adding interaction to webpages
- Creating web and mobile apps
- Building web servers
- Developing games
Why JavaScript?
JavaScript is the most sought-after language you can learn. For ten years, it has been ranked #1 as the most commonly used programming language, according to Stack Overflow’s Developer Survey. It is the only programming language native to the web browser. Finally, it’s a beginner-friendly language, and there’s a low threshold to get started! If JavaScript isn’t for you, find out which programming language is better suited for your career here.
Getting Started with JavaScript
The first thing any programmer learns is how to print “Hello world!” But how do we print such a greeting or anything else? You’ll first need an integrated development environment or IDE. For the purpose of this tutorial, you can use Programiz, which is an online compiler for JavaScript. If you’d like to practice JavaScript more, you can download a more comprehensive IDE, such as Visual Studio Code, Sublime Text, Brackets, or another option you find.
Once you are in your compiler, you’ll see a blank canvas or maybe some numbers and welcome text. If you’re using Programiz, you’ll see that the “main.js” file initializes when you access the webpage, which includes a description of the compiler and some code.
The description is preceded by two forward slashes, //, which denote a JavaScript comment. Commented code usually describes what the program does, what a method does, or other important information the user should know. Commenting your code is a good habit to make when you’re first starting out. Read some best practices for writing code comments here. In your program, write or replace your own comment that describes what you’re doing. For example:
// This is my first comment!
// This program is helping me learn JavaScript.
Next, you may see a line of code that starts with console.log. The console.log method outputs, or logs, a message to the web console. This is how you can print out text to the user. In your program, try printing out “Hello World!” It’ll look like this:
console.log(‘Hello World!’);
If you’ve done this successfully, you should see Hello World! printed out in the console. If you’ve received an error, you may have missed a semicolon or other important punctuation. Once you see your greeting – congratulations, you’ve written your first JavaScript program!
Data Types
| String | represents textual data | ‘hello’, etc. |
| Number | an integer or a floating-point number | 3, 3.17, etc. |
| BigInt | an integer with arbitrary precision | 234823987n, 1n, etc. |
| Boolean | any of two values: true or false | true, false |
| Undefined | a data type whose variable is not initialized | let a; |
| Null | denotes a null value | let a = null; |
| Object | key-value pairs of collection of data | let student = { }; |
Variables
JavaScript variables are containers for storing data. You can call these variables with various keywords, such as:
var – var x = 123;let – let x = 5;const price = 3;
All variables must be identified with unique names called “identifiers.” They can be short names like var x or more descriptive like const price. The identifiers can contain letters, digits, underscores, and dollar signs, but they must always begin with a letter. Identifiers are also case-sensitive.
What are the differences of the var, let, and const keywords? var has been around since the beginning and can be re-declared and updated. let has since become the preference for variable declaration, as it’s an improvement upon var. It can be updated but not re-declared. const is named as such because it maintains constant values. It cannot be updated or re-declared, which is great for data that cannot change.
Try writing your own variable. For example:
let myFirstVar = “This is my first variable!”;
And then print it out!
console.log(myFirstVar);
What do you see in the console?
Operators
Next, there are several useful operators in JavaScript, such as:
| Arithmetic operators | + - * / % ++ – ** |
| Comparison (relational) operators | == === != !== > >= < <= |
| Bitwise operators | << >> ~ & | ^ |
| Logical operators | && || ! |
| Assignment operators | = += =+ *= /= %= |
Arithmetic operators help to perform basic math with code.
| Addition | + |
| Subtraction | - |
| Multiplication | * |
| Exponentiation | ** |
| Division | / |
| Modulus/Remainder | % |
| Increment | ++ |
| Decrement | -- |
What do you think the following will print?
| Addition | let x = 50 + 50; |
= 100 |
| Multiplication | let x = 5; |
= 50 |
| Modulo/Remainder | let x = 5; |
= 1 |
| Increment | let x = 5; |
= 6 |
| Decrement | let x = 5; |
= 4 |
| Exponentiation | let x = 5 ** 2; |
= 25 |
Next week, we’ll learn about some of the other operators and how to use them.
How do you feel after your first JavaScript lesson? Do you think you have a solid beginner’s grasp of how JavaScript and programming work? How can you further this knowledge? Resources will be included below to help you on your JavaScript path.
