|03||Booleans, Operators, Date|
|09||Higher Order Functions|
|10||Sets and Maps|
|11||Destructuring and Spreading|
|13||Console Object Methods|
|20||Writing Clean Code|
|22||Manipulating DOM Object|
|24||Mini Project: Solar System|
|25||Mini Project: World Countries Data Visualization 1|
|26||Mini Project: World Countries Data Visualization 2|
|27||Mini Project: Portfolio|
|28||Mini Project: Leaderboard|
|29||Mini Project: Animating characters|
🧡🧡🧡 HAPPY CODING 🧡🧡🧡
- 📔 Day 1
- Introduction to Data types
- Checking Data Types
- Comments Again
- 💻 Day 1: Exercises
📔 Day 1
This challenge is easy to read, written in conversational English, engaging, motivating and at the same time, it is very demanding. You need to allocate much time to finish this challenge. If you are a visual learner, you may get the video lesson on Washera YouTube channel. Subscribe the channel, comment and ask questions on YouTube vides and be proactive, the author will eventually notice you.
No prior knowledge of programming is required to follow this challenge. You need only:
- A computer
- A browser
- A code editor
I believe you have the motivation and a strong desire to be a developer, a 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 v14.17.6, by the time you use this material you may have a higher Node.js version.
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
'Hello, World' as input data or argument in the console.log() function.
Console.log with Multiple Arguments
console.log() function can take multiple parameters separated by commas. The syntax looks like as follows:
console.log(param1, param2, param3)
As you can see from the snippet code above,
console.log() can take multiple arguments.
// is also a comment.
Example: Single Line Comment
// This is the first comment // This is the second comment // I am a single line comment
Example: Multiline Comment
I made a deliberate mistake. As a result, the console raises syntax errors. Actually, the syntax is very informative. It informs what type of mistake was 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 the
console.log(). If we are printing text or string using
console.log(), the text has to be inside the single quotes, double quotes, or a backtick.
console.log('Hello, World!') console.log("Hello, World!") console.log(`Hello, World!`)
console.log() on Google Chrome console for number data types.
console.log() function. However, it is included in this introduction because most of this challenge would be taking place in a text editor where the usage of the function would be mandatory. You can play around directly with instructions on the console.
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 project folder on your desktop or in any location, name it 30DaysOfJS 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 just wrote your first inline script. We can create a pop up alert message using the
alert() built-in 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
External scripts in the head:
External scripts in the body:
Open the browser console to see the output of the
Multiple External Scripts
helloworld.js file inside the 30DaysOfJS folder and write the following code.
<!DOCTYPE html> <html lang="en"> <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
- Integers: Integer (negative, zero and positive) numbers Example: ... -3, -2, -1, 0, 1, 2, 3 ...
- Float-point numbers: Decimal number Example ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
A collection of one or more characters between two single quotes, double quotes, or backticks.
A boolean value is either True or False. Any comparisons returns a boolean value, which is either true or false.
A boolean data type is either a true or false value.
true // if the light is on, the value is true false // if the light is off, the value is false
let firstName console.log(firstName) // undefined, 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 are 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.
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 not 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. We will talk more about var, let, and const in detail in other sections (scope). For now, the above explanation is enough.
firstName lastName country city capitalCity age isMarried first_name last_name is_married capital_city num1 num_1 _num_1 $num1 year2020 year_2020
Example of invalid variables:
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(assigned data).
// Syntax let nameOfVariable = value
The nameOfVriable is the name that stores different data of value. See below for detail examples.
Examples of declared variables
// 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 °C 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, however I recommend to use a seperate line to make code more readble let name = 'Asabeneh', job = 'teacher', live = 'Finland' console.log(name, job, live)
Asabeneh teacher Finland
When you run index.html file in the 01-Day folder you should get this:
🌕 You are amazing! You have just completed day 1 challenge and you are on your way to greatness. Now do some exercises for your brain and muscle.
💻 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 assigned 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.
🎉 CONGRATULATIONS ! 🎉