Support Asabeneh to create more educational materials
- Introduction to Data types
- Checking Data Types
- Comments Again
💻Day 1: Exercises
No prior knowledge of programming is required to follow this challenge. You need only:
- Code Editor
I believe you have the motivation and a strong desire to be a developer, computer and Internet. If you have those, then you have everything to get started.
You may not need node.js right now but you may need it for later. Install node.js.
After downloading double click and install
We can check if node is installed on our local machine by opening our device terminal or command prompt.
asabeneh $ node -v v12.14.0
When making this tutorial I was using node version 12.14.0, but now the recommended version of node.js for download is 12.17.0.
There are many browsers out there. However, I strongly recommend Google Chrome.
Installing Google Chrome
Opening Google Chrome Console
You can open Google Chrome console either by clicking three dots at the top right corner of the browser, selecting More tools -> Developer tools or using a keyboard shortcut. I prefer using shortcuts.
To open the Chrome console using a keyboard shortcut.
Mac Command+Option+J Windows/Linux: Ctl+Shift+J
Writing Code on Browser Console
Mac Command+Option+I Windows: Ctl+Shift+I
Console.log with Multiple Arguments
The console.log(param1, param2, param3), can take multiple arguments.
As you can see from the snippet code above, console.log() can take multiple arguments.
Example: Single Line Comment
// This is the first comment
// This is the second comment
// I am a single line comment
Example: Multiline Comment
/* This is a multiline comment
Multiline comments can take multiple lines
I made a deliberate mistake. As a result, the console raises a syntax error. Actually, the syntax is very informative. It informs what type of mistake we made. By reading the error feedback guideline, we can correct the syntax and fix the problem. The process of identifying and removing errors from a program is called debugging. Let us fix the errors:
console.log("Hello, World!") console.log('Hello, World!')
So far, we saw how to display text using a console.log(). If we are printing text or string using console.log(), the text has to be under the single quote, double quote, or a backtick quote. Example:
console.log("Hello, World!") console.log('Hello, World!') console.log(`Hello, World!`)
console.log(2 + 3) // Addition console.log(3 - 2) // Subtraction console.log(2 * 3) // Multiplication console.log(3 / 2) // Division console.log(3 % 2) // Modulus - finding remainder console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3
Installing Visual Studio Code
Visual studio code is a very popular open-source text editor. I would recommend to download Visual Studio Code, but if you are in favor of other editors, feel free to follow with what you have.
If you installed Visual Studio Code, let us start using it.
How to Use Visual Studio Code
Open the Visual Studio Code by double-clicking its icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons.
- Inline script
- Internal script
- External script
- Multiple External scripts
Create a folder on your desktop and call it 30DaysOfJS or in any location and create an index.html file in the project folder. Then paste the following code and open it in a browser, for example Chrome.
Now, you wrote your first inline script. We can create a pop up alert message using the built-in alert() function.
The internal script can be written in the head or the body, but it is preferred to put it on the body of the HTML document. First, let us write on the head part of the page.
Open the browser console to see the output from the console.log()
External scripts in the head:
External scripts in the body:
Open the browser console to see the output from the console.log()
Multiple External Scripts
<!DOCTYPE html> <html> <head> <title>Multiple External Scripts</title> </head> <body> <script src ="./helloworld.js"></script> <script src="./introduction.js"></script> </body> </html>
Your main.js file should be below all other scripts. It is very important to remember this.
Introduction to Data types
- Integer: Integer (negative, zero and positive) numbers Example: ... -3, -2, -1, 0, 1, 2, 3 ...
- Float: Decimal number Example ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
A collection of one or more characters under a single quote, double quote, or backtick quote. Example:
A boolean value is either True or False. Any comparisons return a boolean value, which is either true or false.
A boolean data type is either a true or false value.
true // if the light on ,the value is true false // if the light off, the value is false
let firstName; console.log(firstName); //not defined, because it is not assigned to a value yet
let emptyValue = null
Checking Data Types
To check the data type of a certain variable, we use the typeof operator. See the following example.
console.log(typeof 'Asabeneh') // string console.log(typeof 5) // number console.log(typeof true ) // boolean console.log(typeof null) // object type console.log(typeof undefined) // undefined
- Single line commenting
- Multiline commenting
// commenting the code itself with a single comment // let firstName = 'Asabeneh'; single line comment // let lastName = 'Yetayeh'; single line comment
/* let location = 'Helsinki'; let age = 100; let isMarried = true; This is a Multiple line comment */
Variables are containers of data. Variables used to store data in a memory location. When a variable is declared, a memory location is reserved. When a variable is assigned to a value (data), the memory space will be filled with that data. To declare a variable, we use var, let, or const keywords. We will talk more about var, let, and const in detail in other sections (scope). For now, the above explanation is enough.
For a variable that changes at a different time, we use let. If the data does not change at all, we use const. For example, PI, country name, gravity do no change, and we can use const. We will not use var in this challenge and I don't recommend you to use it. It is error prone way of declaring variable it has lots of leak.
firstName lastName country city capitalCity age isMarried first_name last_name is_married capital_city num1 num_1 _num_1 $num1 year2020 year_2020
first-name 1_num num_#_1
Let us declare variables with different data types. To declare a variable, we need to use let or const keyword before the variable name. Following the variable name, we write an equal sign (assignment operator), and a value.
// Syntax let nameOfVariable = value
// Declaring different variables of different data types let firstName = 'Asabeneh' // first name of a person let lastName = 'Yetayeh' // last name of a person let country = 'Finland' // country let city = 'Helsinki' // capital city let age = 100 // age in years let isMarried = true console.log(firstName, lastName, country, city, age, isMarried)
Asabeneh Yetayeh Finland Helsinki 100 True
// Declaring variables with number values let age = 100 // age in years const gravity = 9.81 // earth gravity in m/s2 const boilingPoint = 100 // water boiling point, temperature in oC const PI = 3.14 // geometrical constant console.log(gravity, boilingPoint, PI)
9.81 100 3.14
// Variables can also be declaring in one line separated by comma let name = 'Asabeneh', // name of a person job = 'teacher', live = 'Finland'; console.log(name, job, live);
Asabeneh teacher Finland
When you run the files on 01-Day folder you should get this:
Day 1: Exercises
Write a single line comment which says, comments can make code readable
Write a multiline comment which says, comments can make code readable, easy to reuse and informative
Create a variable.js file and declare variables and assign string, boolean, undefined and null data types
Declare four variables without assigning values
Declare four variables with assigning values
Declare variables to store your first name, last name, marital status, country and age in multiple lines
Declare variables to store your first name, last name, marital status, country and age in a single line
Declare two variables myAge and yourAge and assign them initial values and log to the browser console.
I am 25 years old. You are 30 years old.