- [Introduction to Data Types](#introduction-to-data-types)
- [Number](#number)
- [String](#string)
- [Booleans](#booleans)
- [Undefined](#undefined)
- [Null](#null)
- [Checking Data types](#checking-data-types)
- [Comments](#comments)
- [Checking Data Types](#checking-data-types)
- [Comments Again](#comments-again)
- [Variables](#variables)
- [💻 Day 1: Exercises](#%f0%9f%92%bb-day-1-exercises)
@ -54,9 +54,9 @@
## Introduction
**Congratulations** for deciding to participate in a 30 days of JavaScript programming challenge. In this challenge you will learn everything you need to be a JavaScript programmer and in general the whole concepts of programming. In the end of the challenge you will get a 30DaysOfJavaScript programming challenge certificate. Join the [telegram group](https://t.me/ThirtyDaysOfJavaScript).
**Congratulations** for deciding to participate in 30 days of JavaScript programming challenge. In this challenge you will learn everything you need to be a JavaScript programmer, and in general, the whole concept of programming. In the end of the challenge you will get a 30DaysOfJavaScript programming challenge certificate. Join the [telegram group](https://t.me/ThirtyDaysOfJavaScript).
**A 30DaysOfJavaScript** challenge is a guide for both beginners and advanced JavaScript developers. Welcome to JavaScript. I enjoy using and teaching JavaScript and I hope you will do so. JavaScript is the language of the browser.
**A 30DaysOfJavaScript** challenge is a guide for both beginners and advanced JavaScript developers. Welcome to JavaScript. I enjoy using and teaching JavaScript and I hope you will do so too. JavaScript is the language of the web browser.
In this step by step tutorial, you will learn JavaScript, the most popular programming language in the history of mankind.
You use JavaScript **_to add interactivity to websites, to develop mobile apps, desktop applications, games_** and nowadays JavaScript can be used for **_machine learning_** and **_AI_**.
@ -88,14 +88,14 @@ After downloading double click and install
We can check if node is installed in our local machine by opening our device terminal or command prompt.
We can check if node is installed on our local machine by opening our device terminal or command prompt.
```sh
asabeneh $ node -v
v12.14.0
```
I am using node version 12.14.0, which is the recommended version of node.
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.
### Browser
@ -109,18 +109,18 @@ Install [google chrome](https://www.google.com/chrome/) if you do not have one y
#### Opening Google Chrome Console
You can open Google Chrome either by clicking three dots at the top right corner of the Chrome browser or using a shortcut. I prefer using shortcuts.
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.
@ -130,7 +130,7 @@ Let us write a JavaScript code on the Google Chrome console:
#### Writing Code on browser Console
#### Writing Code on Browser Console
We can write any JavaScript code on the Google console or any browser console. However, for this challenge, we only focus on Google Chrome console. Open the console using:
@ -144,13 +144,13 @@ Ctl+Shift+I
##### Console.log
To write our first JavaScript code, we used a builtin function **console.log()**. We passed an argument as input data, and the function displays the output. We passed 'Hello, World' as input data or argument in the console.log() function.
To write our first JavaScript code, we used a built-in function **console.log()**. We passed an argument as input data, and the function displays the output. We passed 'Hello, World' as input data or argument in the console.log() function.
```js
console.log('Hello, World!')
```
##### Console.log with multiple arguments
##### Console.log with Multiple Arguments
The console.log(param1, param2, param3), can take multiple arguments.
As you can see from the above snippet code, *console.log()* can take multiple arguments.
As you can see from the snippet code above, *console.log()* can take multiple arguments.
Congratulations! You wrote your first JavaScript code using *console.log()*.
##### Comment
We add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code. Any text starts with // in JavaScript is a comment or anything enclose like this /* */ is a comment.
We add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code. Any text line starting with // in JavaScript is a comment or anything enclosed like this /* */ is a comment.
**Example: Single Line Comment**
@ -197,7 +197,7 @@ 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, double, or backtick.
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.
We can write our codes on the browser console, but it won't be for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days python JavaScript challenge, we will use visual studio code.
We can write our codes on the browser console, but it won't do for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days python JavaScript challenge, we will use Visual Studio Code.
#### Installing Visual Studio Code
VVisual studio code is a very popular open-source text editor. I would recommend to [download](https://code.visualstudio.com/) visual studio code, but if you are in favor of other editors, feel free to follow with what you have.
VVisual studio code is a very popular open-source text editor. I would recommend to [download Visual Studio Code](https://code.visualstudio.com/), 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.
If you installed Visual Studio Code, let us start using it.
#### How to use visual studio code
#### How to Use Visual Studio Code
Open the visual studio code by double-clicking the visual studio icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons.
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.
@ -246,11 +246,13 @@ Open the visual studio code by double-clicking the visual studio icon. When you
JavaScript can be added to a web page in three different ways:
- **_Inline script_**
@ -262,7 +264,7 @@ The following sections show different ways of adding JavaScript code to your web
### Inline Script
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, either in [Chrome](https://www.google.com/chrome/).
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](https://www.google.com/chrome/).
```html
<!DOCTYPE html>
@ -278,7 +280,7 @@ Create a folder on your desktop and call it 30DaysOfJS or in any location and c
Now, you wrote your first inline script. We can create a pop up alert message using the built-in *alert()* function.
### Internal script
### Internal Script
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.
@ -297,7 +299,7 @@ First, let us write on the head part of the page.
</html>
```
This is how we write the internal script most of the time. Writing the JavaScript code in the body section is the most preferred place. Open the browser console to see the output from the console.log()
This is how we write an internal script most of the time. Writing the JavaScript code in the body section is the most preferred option. Open the browser console to see the output from the console.log()
```html
<!DOCTYPE html>
@ -318,16 +320,16 @@ Open the browser console to see the output from the console.log()
### External script
### External Script
Similar to the internal script, the external script link can be on the header or body, but it is preferred to put it in the body.
First, we should create an external JavaScript file with .js extension. Any JavaScript file ends with .js. Create a file introduction.js inside your project directory and write the following code and link this .js file at the bottom of the body.
First, we should create an external JavaScript file with .js extension. All files ending with .js extension are JavaScript files. Create a file introduction.js inside your project directory and write the following code and link this .js file at the bottom of the body.
```js
console.log('Welcome to 30DaysOfJavaScript')
```
External scripts in the head
External scripts in the _head_:
```html
<!DOCTYPE html>
@ -341,7 +343,7 @@ External scripts in the head
</html>
```
External scripts in the body
External scripts in the _body_:
```html
<!DOCTYPE html>
@ -359,7 +361,7 @@ External scripts in the body
Open the browser console to see the output from the console.log()
### Multiple External scripts
### Multiple External Scripts
We can link multiple external JavaScript files to a web page.
Create a helloworld.js file inside the 30DaysOfJS folder and write the following code.
@ -382,7 +384,7 @@ console.log('Hello, World!')
</html>
```
Your main.js file should be below all other scripts. Watch out your exercise needs to understand this line.
*Your main.js file should be below all other scripts*. It is very important to remember this.
@ -392,7 +394,7 @@ In JavaScript and also other programming languages, there are different kinds of
### Number
- Integer: Integer(negative, zero and positive) numbers
- Integer: Integer(negative, zero and positive) numbers
Example:
... -3, -2, -1, 0, 1, 2, 3 ...
- Float: Decimal number
@ -401,7 +403,7 @@ In JavaScript and also other programming languages, there are different kinds of
### String
A collection of one or more characters under a single quote, double-quote, or backtick.
A collection of one or more characters under a single quote, double quote, or backtick quote.
**Example:**
```js
@ -415,7 +417,7 @@ A collection of one or more characters under a single quote, double-quote, or ba
### Booleans
A boolean value is either true or false. Any comparisons return a boolean value, which is either true or false.
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.
@ -443,9 +445,9 @@ Null in JavaScript means an empty value.
let emptyValue = null
```
## Checking Data types
## Checking Data Types
To check the data type of a certain data type, we use the **typeof** operator. See the following example.
To check the data type of a certain variable, we use the **typeof** operator. See the following example.
```js
console.log(typeof 'Asabeneh') // string
@ -455,9 +457,9 @@ console.log(typeof null) // object type
console.log(typeof undefined) // undefined
```
## Comments
## Comments Again
Commenting in JavaScript is similar to other programming languages. Comments are important in making your make code more readable.
Reminding, that commenting in JavaScript is similar to other programming languages. Comments are important in making your make code more readable.
There are two ways of commenting:
- _Single line commenting_
@ -517,7 +519,7 @@ Valid variables in JavaScript:
```
camelCase or the first way of declaring is conventional in JavaScript. In this material, we will use camelCase variables.
Invalid variable:
Invalid variables:
```sh
first-name
@ -580,7 +582,7 @@ When you run the files on 01-Day folder you should get this:
🌕 You are amazing. You have just completed day 1 challenge and you are in your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 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 for your muscle.
Asabeneh
5 years ago
committed by
GitHub
