diff --git a/02_Day_Data_types/02_day_data_types.md b/02_Day_Data_types/02_day_data_types.md index 1d7908c8..70e56d45 100644 --- a/02_Day_Data_types/02_day_data_types.md +++ b/02_Day_Data_types/02_day_data_types.md @@ -231,6 +231,10 @@ console.log(Math.E) // 2.718 console.log(Math.log(2)) // 0.6931471805599453 console.log(Math.log(10)) // 2.302585092994046 +// Returns the natural logarithm of 2 and 10 respectively +console.log(Math.LN2) // 0.6931471805599453 +console.log(Math.LN10) // 2.302585092994046 + // Trigonometry Math.sin(0) Math.sin(60) diff --git a/02_Day_Data_types/string_methods/match.js b/02_Day_Data_types/string_methods/match.js index 54e18a83..40d1ffd6 100644 --- a/02_Day_Data_types/string_methods/match.js +++ b/02_Day_Data_types/string_methods/match.js @@ -14,7 +14,7 @@ let pattern = /love/gi console.log(string.match(pattern)) // ["love", "love", "love"] // Let us extract numbers from text using regular expression. This is not regular expression section, no panic. -let txt = 'In 2019, I run 30 Days of Pyhton. Now, in 2020 I super exited to start this challenge' +let txt = 'In 2019, I run 30 Days of Python. Now, in 2020 I super exited to start this challenge' let regEx = /\d/g // d with escape character means d not a normal d instead acts a digit // + means one or more digit numbers, // if there is g after that it means global, search everywhere. diff --git a/02_Day_Data_types/string_methods/split.js b/02_Day_Data_types/string_methods/split.js index 6b0ce6e7..f955bcc4 100644 --- a/02_Day_Data_types/string_methods/split.js +++ b/02_Day_Data_types/string_methods/split.js @@ -1,5 +1,5 @@ // split(): The split method splits a string at a specified place. -let string = '30 Days Of JavaScipt' +let string = '30 Days Of JavaScript' console.log(string.split()) // ["30 Days Of JavaScript"] console.log(string.split(' ')) // ["30", "Days", "Of", "JavaScript"] let firstName = 'Asabeneh' diff --git a/03_Day_Booleans_operators_date/03_booleans_operators_date.md b/03_Day_Booleans_operators_date/03_booleans_operators_date.md index 72f61011..bb376ae4 100644 --- a/03_Day_Booleans_operators_date/03_booleans_operators_date.md +++ b/03_Day_Booleans_operators_date/03_booleans_operators_date.md @@ -31,7 +31,7 @@ - [Increment Operator](#increment-operator) - [Decrement Operator](#decrement-operator) - [Ternary Operators](#ternary-operators) - - [Operator Precendence](#operator-precendence) + - [Operator Precedence](#operator-precedence) - [Window Methods](#window-methods) - [Window alert() method](#window-alert-method) - [Window prompt() method](#window-prompt-method) @@ -333,9 +333,9 @@ number > 0 -5 is a negative number ``` -### Operator Precendence +### Operator Precedence -I would like to recommend you to read about operator precendence from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) +I would like to recommend you to read about operator precedence from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) ## Window Methods @@ -568,9 +568,9 @@ console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56 1. Get length and width using prompt and calculate an area of rectangle (area = length x width and the perimeter of rectangle (perimeter = 2 x (length + width)) 1. Get radius using prompt and calculate the area of a circle (area = pi x r x r) and circumference of a circle(c = 2 x pi x r) where pi = 3.14. 1. Calculate the slope, x-intercept and y-intercept of y = 2x -2 -1. Slope is (m = y2-y1/x2-x1). Find the slope between point (2, 2) and point(6,10) +1. Slope is m = (y2-y1)/(x2-x1). Find the slope between point (2, 2) and point(6,10) 1. Compare the slope of above two questions. -1. Calculate the value of y (y = x^2 + 6x + 9). Try to use different x values and figure out at what x value y is 0. +1. Calculate the value of y (y = x2 + 6x + 9). Try to use different x values and figure out at what x value y is 0. 1. Writ a script that prompt a user to enter hours and rate per hour. Calculate pay of the person? ```sh diff --git a/04_Day_Conditionals/04_day_conditionals.md b/04_Day_Conditionals/04_day_conditionals.md index 93ca3eaf..01008449 100644 --- a/04_Day_Conditionals/04_day_conditionals.md +++ b/04_Day_Conditionals/04_day_conditionals.md @@ -280,7 +280,7 @@ isRaining ### Exercises: Level 1 -1. Get user input using prompt(β€œEnter your age:”). If user is 18 or older , give feedback:'You are old enough to drive' but if not 18 give another feedback stating to wait for the number of years he neds to turn 18. +1. Get user input using prompt(β€œEnter your age:”). If user is 18 or older , give feedback:'You are old enough to drive' but if not 18 give another feedback stating to wait for the number of years he needs to turn 18. ```sh Enter your age: 30 diff --git a/05_Day_Arrays/05_day_arrays.md b/05_Day_Arrays/05_day_arrays.md index d73eb4ce..d0a8307c 100644 --- a/05_Day_Arrays/05_day_arrays.md +++ b/05_Day_Arrays/05_day_arrays.md @@ -18,35 +18,35 @@ ![Day 5](../images/banners/day_1_5.png) - [πŸ“” Day 5](#-day-5) - - [Arrays](#arrays) - - [How to create an empty array](#how-to-create-an-empty-array) - - [How to create an array with values](#how-to-create-an-array-with-values) - - [Creating an array using split](#creating-an-array-using-split) - - [Accessing array items using index](#accessing-array-items-using-index) - - [Modifying array element](#modifying-array-element) - - [Methods to manipulate array](#methods-to-manipulate-array) - - [Array Constructor](#array-constructor) - - [Creating static values with fill](#creating-static-values-with-fill) - - [Concatenating array using concat](#concatenating-array-using-concat) - - [Getting array length](#getting-array-length) - - [Getting index an element in arr array](#getting-index-an-element-in-arr-array) - - [Getting last index of an element in array](#getting-last-index-of-an-element-in-array) - - [Checking array](#checking-array) - - [Converting array to string](#converting-array-to-string) - - [Joining array elements](#joining-array-elements) - - [Slice array elements](#slice-array-elements) - - [Splice method in array](#splice-method-in-array) - - [Adding item to an array using push](#adding-item-to-an-array-using-push) - - [Removing the end element using pop](#removing-the-end-element-using-pop) - - [Removing an element from the beginning](#removing-an-element-from-the-beginning) - - [Add an element from the beginning](#add-an-element-from-the-beginning) - - [Reversing array order](#reversing-array-order) - - [Sorting elements in array](#sorting-elements-in-array) - - [Array of arrays](#array-of-arrays) - - [πŸ’» Exercise](#-exercise) - - [Exercise: Level 1](#exercise-level-1) - - [Exercise: Level 2](#exercise-level-2) - - [Exercise: Level 3](#exercise-level-3) + - [Arrays](#arrays) + - [How to create an empty array](#how-to-create-an-empty-array) + - [How to create an array with values](#how-to-create-an-array-with-values) + - [Creating an array using split](#creating-an-array-using-split) + - [Accessing array items using index](#accessing-array-items-using-index) + - [Modifying array element](#modifying-array-element) + - [Methods to manipulate array](#methods-to-manipulate-array) + - [Array Constructor](#array-constructor) + - [Creating static values with fill](#creating-static-values-with-fill) + - [Concatenating array using concat](#concatenating-array-using-concat) + - [Getting array length](#getting-array-length) + - [Getting index an element in arr array](#getting-index-an-element-in-arr-array) + - [Getting last index of an element in array](#getting-last-index-of-an-element-in-array) + - [Checking array](#checking-array) + - [Converting array to string](#converting-array-to-string) + - [Joining array elements](#joining-array-elements) + - [Slice array elements](#slice-array-elements) + - [Splice method in array](#splice-method-in-array) + - [Adding item to an array using push](#adding-item-to-an-array-using-push) + - [Removing the end element using pop](#removing-the-end-element-using-pop) + - [Removing an element from the beginning](#removing-an-element-from-the-beginning) + - [Add an element from the beginning](#add-an-element-from-the-beginning) + - [Reversing array order](#reversing-array-order) + - [Sorting elements in array](#sorting-elements-in-array) + - [Array of arrays](#array-of-arrays) + - [πŸ’» Exercise](#-exercise) + - [Exercise: Level 1](#exercise-level-1) + - [Exercise: Level 2](#exercise-level-2) + - [Exercise: Level 3](#exercise-level-3) # πŸ“” Day 5 @@ -390,22 +390,22 @@ Check an element if it exist in an array. const fruits = ['banana', 'orange', 'mango', 'lemon'] let index = fruits.indexOf('banana') // 0 -if(index != -1){ - console.log('This fruit does exist in the array') +if(index === -1){ + console.log('This fruit does not exist in the array') } else { - console.log('This fruit does not exist in the array') + console.log('This fruit does exist in the array') } // This fruit does exist in the array // we can use also ternary here -index != -1 ? console.log('This fruit does exist in the array'): console.log('This fruit does not exist in the array') +index === -1 ? console.log('This fruit does not exist in the array'): console.log('This fruit does exist in the array') // let us check if a avocado exist in the array let indexOfAvocado = fruits.indexOf('avocado') // -1, if the element not found index is -1 -if(indexOfAvocado!= -1){ - console.log('This fruit does exist in the array') +if(indexOfAvocado === -1){ + console.log('This fruit does not exist in the array') } else { - console.log('This fruit does not exist in the array') + console.log('This fruit does exist in the array') } // This fruit does not exist in the array ``` diff --git a/06_Day_Loops/06_day_loops.md b/06_Day_Loops/06_day_loops.md index 711b1def..c0934956 100644 --- a/06_Day_Loops/06_day_loops.md +++ b/06_Day_Loops/06_day_loops.md @@ -18,17 +18,17 @@ ![Day 5](../images/banners/day_1_6.png) - [πŸ“” Day 6](#-day-6) - - [Loops](#loops) - - [for Loop](#for-loop) - - [while loop](#while-loop) - - [do while loop](#do-while-loop) - - [for of loop](#for-of-loop) - - [break](#break) - - [continue](#continue) - - [πŸ’» Exercises:Day 6](#-exercisesday-6) - - [Exercises: Level 1](#exercises-level-1) - - [Exercises: Level 2](#exercises-level-2) - - [Exercises: Level 3](#exercises-level-3) + - [Loops](#loops) + - [for Loop](#for-loop) + - [while loop](#while-loop) + - [do while loop](#do-while-loop) + - [for of loop](#for-of-loop) + - [break](#break) + - [continue](#continue) + - [πŸ’» Exercises:Day 6](#-exercisesday-6) + - [Exercises: Level 1](#exercises-level-1) + - [Exercises: Level 2](#exercises-level-2) + - [Exercises: Level 3](#exercises-level-3) # πŸ“” Day 6 @@ -178,7 +178,9 @@ for (const num of numbers) { // adding all the numbers in the array let sum = 0 for (const num of numbers) { - sum = sum + num // can be also shorten like this, sum += num + sum = sum + num + // can be also shorten like this, sum += num + // after this we will use the shorter synthax(+=, -=, *=, /= etc) } console.log(sum) // 15 diff --git a/07_Day_Functions/07_day_functions.md b/07_Day_Functions/07_day_functions.md index 353fab09..983c72a3 100644 --- a/07_Day_Functions/07_day_functions.md +++ b/07_Day_Functions/07_day_functions.md @@ -239,7 +239,7 @@ function sumAllNums() { console.log(arguments) } -sumAllNums(1, 2, 3, 4)) +sumAllNums(1, 2, 3, 4) // Arguments(4)Β [1, 2, 3, 4, callee: Ζ’, Symbol(Symbol.iterator): Ζ’] ``` @@ -269,7 +269,7 @@ console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173 ​ const sumAllNums = (...args) => { // console.log(arguments), arguments object not found in arrow function - // instead we use an a parameter followed by spread operator + // instead we use a parameter followed by spread operator (...) console.log(args) } @@ -523,7 +523,7 @@ It Will be covered in other section. 9. Density of a substance is calculated as follows:_density= mass/volume_. Write a function which calculates _density_. 10. Speed is calculated by dividing the total distance covered by a moving object divided by the total amount of time taken. Write a function which calculates a speed of a moving object, _speed_. 11. Weight of a substance is calculated as follows: _weight = mass x gravity_. Write a function which calculates _weight_. -12. Temperature in oC can be converted to oF using this formula: _oF = (oC x 9/5) + 32_. Write a function which convert oC to oF _convertCelciusToFahrenheit_. +12. Temperature in oC can be converted to oF using this formula: _oF = (oC x 9/5) + 32_. Write a function which convert oC to oF _convertCelsiusToFahrenheit_. 13. Body mass index(BMI) is calculated as follows: _bmi = weight in Kg / (height x height) in m2_. Write a function which calculates _bmi_. BMI is used to broadly define different weight groups in adults 20 years old or older.Check if a person is _underweight, normal, overweight_ or _obese_ based the information given below. - The same groups apply to both men and women. diff --git a/08_Day_Objects/08_day_objects.md b/08_Day_Objects/08_day_objects.md index 653f9db4..ed7e8013 100644 --- a/08_Day_Objects/08_day_objects.md +++ b/08_Day_Objects/08_day_objects.md @@ -18,50 +18,49 @@ ![Thirty Days Of JavaScript](../images/banners/day_1_8.png) - [πŸ“” Day 8](#-day-8) - - [Scope](#scope) - - [Window Scope](#window-scope) - - [Global scope](#global-scope) - - [Local scope](#local-scope) - - [πŸ“” Object](#-object) - - [Creating an empty object](#creating-an-empty-object) - - [Creating an objecting with values](#creating-an-objecting-with-values) - - [Getting values from an object](#getting-values-from-an-object) - - [Creating object methods](#creating-object-methods) - - [Setting new key for an object](#setting-new-key-for-an-object) - - [Object Methods](#object-methods) - - [Getting object keys using Object.keys()](#getting-object-keys-using-objectkeys) - - [Getting object values using Object.values()](#getting-object-values-using-objectvalues) - - [Getting object keys and values using Object.entries()](#getting-object-keys-and-values-using-objectentries) - - [Checking properties using hasOwnProperty()](#checking-properties-using-hasownproperty) - - [πŸ’» Exercises](#-exercises) - - [Exercises: Level 1](#exercises-level-1) - - [Exercises: Level 2](#exercises-level-2) - - [Exercises: Level 3](#exercises-level-3) + - [Scope](#scope) + - [Window Global Object](#window-global-object) + - [Global scope](#global-scope) + - [Local scope](#local-scope) + - [πŸ“” Object](#-object) + - [Creating an empty object](#creating-an-empty-object) + - [Creating an objecting with values](#creating-an-objecting-with-values) + - [Getting values from an object](#getting-values-from-an-object) + - [Creating object methods](#creating-object-methods) + - [Setting new key for an object](#setting-new-key-for-an-object) + - [Object Methods](#object-methods) + - [Getting object keys using Object.keys()](#getting-object-keys-using-objectkeys) + - [Getting object values using Object.values()](#getting-object-values-using-objectvalues) + - [Getting object keys and values using Object.entries()](#getting-object-keys-and-values-using-objectentries) + - [Checking properties using hasOwnProperty()](#checking-properties-using-hasownproperty) + - [πŸ’» Exercises](#-exercises) + - [Exercises: Level 1](#exercises-level-1) + - [Exercises: Level 2](#exercises-level-2) + - [Exercises: Level 3](#exercises-level-3) # πŸ“” Day 8 ## Scope -Variable is the fundamental part in programming. We declare variable to store different data types. To declare a variable we use the key word _var_, _let_ and _const_. A variable can declared at different scope. In this section we will see the scope, scope of variables when we use var or let. +Variable is the fundamental part in programming. We declare variable to store different data types. To declare a variable we use the key word _var_, _let_ and _const_. A variable can be declared at different scope. In this section, we will see the scope variables, scope of variables when we use var or let. Variables scopes can be: -- Window - Global - Local -Variable can be declared globally or locally or window scope. We will see both global and local scope. -Anything declared without let, var or const is scoped at window level. +Variable can be declared globally or locally scope. We will see both global and local scope. +Anything declared without let, var or const is scoped at global level. Let us imagine that we have a scope.js file. -### Window Scope +### Window Global Object Without using console.log() open your browser and check, you will see the value of a and b if you write a or b on the browser. That means a and b are already available in the window. ```js //scope.js -a = 'JavaScript' // is a window scope this found anywhere -b = 10 // this is a window scope variable +a = 'JavaScript' // declaring a variable without let or const make it available in window object and this found anywhere +b = 10 // this is a global scope variable and found in the window object function letsLearnScope() { console.log(a, b) if (true) { @@ -96,13 +95,18 @@ console.log(a, b) // JavaScript 10, accessible A variable declared as local can be accessed only in certain block code. +- Block Scope +- Function Scope + ```js //scope.js let a = 'JavaScript' // is a global scope it will be found anywhere in this file let b = 10 // is a global scope it will be found anywhere in this file +// Function scope function letsLearnScope() { console.log(a, b) // JavaScript 10, accessible let value = false +// block scope if (true) { // we can access from the function and outside the function but // variables declared inside the if will not be accessed outside the if block @@ -111,7 +115,7 @@ function letsLearnScope() { let c = 30 let d = 40 value = !value - console.log(a, b, c) // Python 20 30 + console.log(a, b, c, value) // Python 20 30 true } // we can not access c because c's scope is only the if block console.log(a, b, value) // JavaScript 10 true @@ -138,9 +142,9 @@ if (true){ console.log(gravity) // 9.81 for(var i = 0; i < 3; i++){ - console.log(i) // 1, 2, 3 + console.log(i) // 0, 1, 2 } -console.log(i) +console.log(i) // 3 ``` @@ -163,13 +167,13 @@ if (true){ // console.log(gravity), Uncaught ReferenceError: gravity is not defined for(let i = 0; i < 3; i++){ - console.log(i) // 1, 2, 3 + console.log(i) // 0, 1, 2 } // console.log(i), Uncaught ReferenceError: i is not defined ``` -The scope *let* and *const* is the same. The difference is only reassigning. We can not change or reassign the value of const variable. I would strongly suggest you to use *let* and *const*, by using *let* and *const* you will writ clean code and avoid hard to debug mistakes. As a rule of thumb, you can use *let* for any value which change, *const* for any constant value, and for array, object, arrow function and function expression. +The scope *let* and *const* are the same. The difference is only reassigning. We can not change or reassign the value of the `const` variable. I would strongly suggest you to use *let* and *const*, by using *let* and *const* you will write clean code and avoid hard to debug mistakes. As a rule of thumb, you can use *let* for any value which change, *const* for any constant value, and for an array, object, arrow function and function expression. ## πŸ“” Object @@ -252,14 +256,14 @@ const person = { console.log(person.firstName) console.log(person.lastName) console.log(person.age) -console.log(person.location) +console.log(person.location) // undefined // value can be accessed using square bracket and key name console.log(person['firstName']) console.log(person['lastName']) console.log(person['age']) console.log(person['age']) -console.log(person['location']) +console.log(person['location']) // undefined // for instance to access the phone number we only use the square bracket method console.log(person['phone number']) diff --git a/09_Day_Higher_order_functions/09_day_higher_order_functions.md b/09_Day_Higher_order_functions/09_day_higher_order_functions.md index 3526916c..677e7b49 100644 --- a/09_Day_Higher_order_functions/09_day_higher_order_functions.md +++ b/09_Day_Higher_order_functions/09_day_higher_order_functions.md @@ -23,7 +23,7 @@ - [Callback](#callback) - [Returning function](#returning-function) - [Setting time](#setting-time) - - [Setting Interaval using a setInterval function](#setting-interaval-using-a-setinterval-function) + - [Setting Interval using a setInterval function](#setting-interval-using-a-setinterval-function) - [Setting a time using a setTimeout](#setting-a-time-using-a-settimeout) - [Functional Programming](#functional-programming) - [forEach](#foreach) @@ -132,7 +132,7 @@ In JavaScript we can execute some activities in a certain interval of time or we - setInterval - setTimeout -#### Setting Interaval using a setInterval function +#### Setting Interval using a setInterval function In JavaScript, we use setInterval higher order function to do some activity continuously with in some interval of time. The setInterval global method take a callback function and a duration as a parameter. The duration is in milliseconds and the callback will be always called in that interval of time. @@ -571,7 +571,7 @@ const products = [ ``` 1. Explain the difference between **_forEach, map, filter, and reduce_**. -2. Define a call function before you them in forEach, map, filter or reduce. +2. Define a callback function before you use it in forEach, map, filter or reduce. 3. Use **_forEach_** to console.log each country in the countries array. 4. Use **_forEach_** to console.log each name in the names array. 5. Use **_forEach_** to console.log each number in the numbers array. diff --git a/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md b/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md index 95fc3331..c888bb54 100644 --- a/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md +++ b/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md @@ -19,26 +19,26 @@ ![Day 10](../images/banners/day_1_10.png) - [Day 10](#day-10) - - [Set](#set) - - [Creating an empty set](#creating-an-empty-set) - - [Creating set from array](#creating-set-from-array) - - [Adding an element to a set](#adding-an-element-to-a-set) - - [Deleting an element a set](#deleting-an-element-a-set) - - [Checking an element in the set](#checking-an-element-in-the-set) - - [Clearing the set](#clearing-the-set) - - [Union of sets](#union-of-sets) - - [Intersection of sets](#intersection-of-sets) - - [Difference of sets](#difference-of-sets) - - [Map](#map) - - [Creating an empty Map](#creating-an-empty-map) - - [Creating an Map from array](#creating-an-map-from-array) - - [Adding values to the Map](#adding-values-to-the-map) - - [Getting a value from Map](#getting-a-value-from-map) - - [Checking key in Map](#checking-key-in-map) - - [Exercises](#exercises) - - [Exercises:Level 1](#exerciseslevel-1) - - [Exercises:Level 2](#exerciseslevel-2) - - [Exercises:Level 3](#exerciseslevel-3) + - [Set](#set) + - [Creating an empty set](#creating-an-empty-set) + - [Creating set from array](#creating-set-from-array) + - [Adding an element to a set](#adding-an-element-to-a-set) + - [Deleting an element a set](#deleting-an-element-a-set) + - [Checking an element in the set](#checking-an-element-in-the-set) + - [Clearing the set](#clearing-the-set) + - [Union of sets](#union-of-sets) + - [Intersection of sets](#intersection-of-sets) + - [Difference of sets](#difference-of-sets) + - [Map](#map) + - [Creating an empty Map](#creating-an-empty-map) + - [Creating an Map from array](#creating-an-map-from-array) + - [Adding values to the Map](#adding-values-to-the-map) + - [Getting a value from Map](#getting-a-value-from-map) + - [Checking key in Map](#checking-key-in-map) + - [Exercises](#exercises) + - [Exercises:Level 1](#exerciseslevel-1) + - [Exercises:Level 2](#exerciseslevel-2) + - [Exercises:Level 3](#exerciseslevel-3) # Day 10 @@ -71,8 +71,8 @@ const languages = [ 'French', ] -const setOfLangauges = new Set(languages) -console.log(setOfLangauges) +const setOfLanguages = new Set(languages) +console.log(setOfLanguages) ``` ```sh @@ -92,9 +92,9 @@ const languages = [ 'French', ] -const setOfLangauges = new Set(languages) +const setOfLanguages = new Set(languages) -for (const language of setOfLangauges) { +for (const language of setOfLanguages) { console.log(language) } ``` diff --git a/14_Day_Error_handling/14_day_error_handling.md b/14_Day_Error_handling/14_day_error_handling.md index 69cb0c02..bc17c5d6 100644 --- a/14_Day_Error_handling/14_day_error_handling.md +++ b/14_Day_Error_handling/14_day_error_handling.md @@ -19,12 +19,12 @@ ![Thirty Days Of JavaScript](../images/banners/day_1_14.png) - [Day 14](#day-14) - - [Error Handling](#error-handling) - - [Error Types](#error-types) - - [Exercises](#exercises) - - [Exercises:Level 1](#exerciseslevel-1) - - [Exercises: Level 2](#exercises-level-2) - - [Exercises:Level](#exerciseslevel) + - [Error Handling](#error-handling) + - [Error Types](#error-types) + - [Exercises](#exercises) + - [Exercises:Level 1](#exerciseslevel-1) + - [Exercises: Level 2](#exercises-level-2) + - [Exercises:Level](#exerciseslevel) # Day 14 @@ -113,7 +113,7 @@ throw new Error('Required') // generates an error object with the message of Req ``` ```js -const throwErroExampleFun = () => { +const throwErrorExampleFun = () => { let message let x = prompt('Enter a number: ') try { @@ -126,7 +126,7 @@ const throwErroExampleFun = () => { console.log(err) } } -throwErroExampleFun() +throwErrorExampleFun() ``` ### Error Types diff --git a/15_Day_Classes/15_day_classes.md b/15_Day_Classes/15_day_classes.md index 7d469bf2..3088dcb9 100644 --- a/15_Day_Classes/15_day_classes.md +++ b/15_Day_Classes/15_day_classes.md @@ -305,7 +305,7 @@ class Person { const fullName = this.firstName + ' ' + this.lastName return fullName } - get getscore() { + get getScore() { return this.score } get getSkills() { diff --git a/16_Day_JSON/16_day_json.md b/16_Day_JSON/16_day_json.md index 3cdfb406..33336dce 100644 --- a/16_Day_JSON/16_day_json.md +++ b/16_Day_JSON/16_day_json.md @@ -19,16 +19,16 @@ ![Thirty Days Of JavaScript](../images/banners/day_1_16.png) - [Day 16](#day-16) - - [JSON](#json) - - [Converting JSON to JavaScript Object](#converting-json-to-javascript-object) - - [JSON.parse()](#jsonparse) - - [Using a reviver function with JSON.parse()](#using-a-reviver-function-with-jsonparse) - - [Converting Object to JSON](#converting-object-to-json) - - [Using a Filter Array with JSON.stringify](#using-a-filter-array-with-jsonstringify) - - [Exercises](#exercises) - - [Exercises Level 1](#exercises-level-1) - - [Exercises Level 2](#exercises-level-2) - - [Exercises Level 3](#exercises-level-3) + - [JSON](#json) + - [Converting JSON to JavaScript Object](#converting-json-to-javascript-object) + - [JSON.parse()](#jsonparse) + - [Using a reviver function with JSON.parse()](#using-a-reviver-function-with-jsonparse) + - [Converting Object to JSON](#converting-object-to-json) + - [Using a Filter Array with JSON.stringify](#using-a-filter-array-with-jsonstringify) + - [Exercises](#exercises) + - [Exercises Level 1](#exercises-level-1) + - [Exercises Level 2](#exercises-level-2) + - [Exercises Level 3](#exercises-level-3) # Day 16 @@ -63,7 +63,7 @@ JSON stands for JavaScript Object Notation. The JSON syntax is derived from Java } ``` -The above JSON example is not much different for a normal object. Then, what is the difference ? The difference is the key of a JSON object should be with double quotes or it should be a string. JavaScript Object and JSON are very similar that we can change JSON to Object and Object to JSON. +The above JSON example is not much different from a normal object. Then, what is the difference ? The difference is the key of a JSON object should be with double quotes or it should be a string. JavaScript Object and JSON are very similar that we can change JSON to Object and Object to JSON. Let us see the above example in more detail, it starts with a curly bracket. Inside the curly bracket, there is "users" key which has a value array. Inside the array we have different objects and each objects has keys, each keys has to have double quotes. For instance, we use "firstNaMe" instead of just firstName, however in object we use keys without double quotes. This is the major difference between an object and a JSON. Let's see more examples about JSON. @@ -177,6 +177,10 @@ Mostly we fetch JSON data from HTTP response or from a file, but we can store th JSON.parse(json[, reviver]) // json or text , the data // reviver is an optional callback function +/* JSON.parse(json, (key, value) => { + +}) +*/ ``` ```js @@ -440,7 +444,7 @@ const user = { country: 'Finland', city: 'Helsinki', email: 'alex@alex.com', - skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Pyhton'], + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Python'], age: 250, isLoggedIn: false, points: 30 @@ -576,11 +580,8 @@ const txt = `{ ### Exercises Level 1 1. Change skills array to JSON using JSON.stringify() - 1. Stringify the age variable - 1. Stringify the isMarried variable - 1. Stringify the student object ### Exercises Level 2 @@ -590,7 +591,7 @@ const txt = `{ ### Exercises Level 3 1. Parse the *txt* JSON to object. -2. Find the the user who has many skills from the variable stored in *txt*. +2. Find the user who has many skills from the variable stored in *txt*. πŸŽ‰ CONGRATULATIONS ! πŸŽ‰ diff --git a/17_Day_Web_storages/17_day_web_storages.md b/17_Day_Web_storages/17_day_web_storages.md index d7356ada..34812323 100644 --- a/17_Day_Web_storages/17_day_web_storages.md +++ b/17_Day_Web_storages/17_day_web_storages.md @@ -19,18 +19,18 @@ ![Thirty Days Of JavaScript](../images/banners/day_1_17.png) - [Day 17](#day-17) - - [HTML5 Web Storage](#html5-web-storage) - - [sessionStorage](#sessionstorage) - - [localStorage](#localstorage) - - [Use case of Web Storages](#use-case-of-web-storages) - - [HTML5 Web Storage Objects](#html5-web-storage-objects) - - [Setting item to the localStorage](#setting-item-to-the-localstorage) - - [Getting item from localStorage](#getting-item-from-localstorage) - - [Clearing the localStorage](#clearing-the-localstorage) - - [Exercises](#exercises) - - [Exercises: Level 1](#exercises-level-1) - - [Exercises: Level 2](#exercises-level-2) - - [Exercises: Level 3](#exercises-level-3) + - [HTML5 Web Storage](#html5-web-storage) + - [sessionStorage](#sessionstorage) + - [localStorage](#localstorage) + - [Use case of Web Storages](#use-case-of-web-storages) + - [HTML5 Web Storage Objects](#html5-web-storage-objects) + - [Setting item to the localStorage](#setting-item-to-the-localstorage) + - [Getting item from localStorage](#getting-item-from-localstorage) + - [Clearing the localStorage](#clearing-the-localstorage) + - [Exercises](#exercises) + - [Exercises: Level 1](#exercises-level-1) + - [Exercises: Level 2](#exercises-level-2) + - [Exercises: Level 3](#exercises-level-3) # Day 17 @@ -77,7 +77,7 @@ For the examples mentioned above, it makes sense to use localStorage. You may be In cases, we want to to get rid of the data as soon as the window is closed. Or, perhaps, if we do not want the application to interfere with the same application that’s open in another window. These scenarios are served best with sessionStorage. -Now, let use how use make use of these Web Storage APIs. +Now, let us see how make use of these Web Storage APIs. ## HTML5 Web Storage Objects @@ -90,7 +90,7 @@ Web Storage objects: - _localStorage_ - to display the localStorage object - _localStorage.clear()_ - to remove everything in the local storage -- _localStorage.setItem()_ - to storage data in the localStorage. It takes a key and a value parameters. +- _localStorage.setItem()_ - to store data in the localStorage. It takes a key and a value parameters. - _localStorage.getItem()_ - to display data stored in the localStorage. It takes a key as a parameter. - _localStorage.removeItem()_ - to remove stored item form a localStorage. It takes key as a parameter. - _localStorage.key()_ - to display a data stored in a localStorage. It takes index as a parameter. diff --git a/18_Day_Promises/18_day_promises.md b/18_Day_Promises/18_day_promises.md index bfe5b39d..22b0c67c 100644 --- a/18_Day_Promises/18_day_promises.md +++ b/18_Day_Promises/18_day_promises.md @@ -105,7 +105,7 @@ doSomething((err, result) => { ### Promise constructor -We can create a promise using the Promise constructor. We can create a new promise using the key word new followed by the word Promise and followed by a parenthesis. Inside the parenthesis it it takes a callback function. The promise callback function has two parameters which are the _resolve_ and _reject_ functions. +We can create a promise using the Promise constructor. We can create a new promise using the key word `new` followed by the word `Promise` and followed by a parenthesis. Inside the parenthesis, it takes a `callback` function. The promise callback function has two parameters which are the _`resolve`_ and _`reject`_ functions. ```js // syntax @@ -244,7 +244,7 @@ console.log('===== async and await') fetchData() ``` -πŸŒ• You are real and you kept your promise and your reached to day 18. Keep your promise and settle the challenge with resolve. You are 18 steps a head to your way to greatness. Now do some exercises for your brain and for your muscle. +πŸŒ• You are real and you kept your promise and you reached to day 18. Keep your promise and settle the challenge with resolve. You are 18 steps ahead to your way to greatness. Now do some exercises for your brain and muscles. ## Exercises diff --git a/19_Day_Closures/19_day_closures.md b/19_Day_Closures/19_day_closures.md index 4c960168..653c185d 100644 --- a/19_Day_Closures/19_day_closures.md +++ b/19_Day_Closures/19_day_closures.md @@ -14,15 +14,15 @@ -[<< Day 18](../18_Day_Promises/18_day_promise.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) +[<< Day 18](../18_Day_Promises/18_day_promises.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) ![Thirty Days Of JavaScript](../images/banners/day_1_19.png) - [Day 19](#day-19) - - [Closure](#closure) - - [Exercises](#exercises) - - [Exercises: Level 1](#exercises-level-1) - - [Exercises: Level 2](#exercises-level-2) - - [Exercises: Level 3](#exercises-level-3) + - [Closure](#closure) + - [Exercises](#exercises) + - [Exercises: Level 1](#exercises-level-1) + - [Exercises: Level 2](#exercises-level-2) + - [Exercises: Level 3](#exercises-level-3) # Day 19 @@ -80,7 +80,7 @@ console.log(innerFuncs.minusOne) ```sh 1 -1 +0 ``` πŸŒ• You are making progress. Maintain your momentum, keep the good work. Now do some exercises for your brain and for your muscle. @@ -101,4 +101,4 @@ console.log(innerFuncs.minusOne) πŸŽ‰ CONGRATULATIONS ! πŸŽ‰ -[<< Day 18](../18_Day_Promises/18_day_promise.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) \ No newline at end of file +[<< Day 18](../18_Day_Promises/18_day_promises.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) \ No newline at end of file diff --git a/20_Day_Writing_clean_codes/20_day_writing_clean_codes.md b/20_Day_Writing_clean_codes/20_day_writing_clean_codes.md index 4028bdbf..8579b6b6 100644 --- a/20_Day_Writing_clean_codes/20_day_writing_clean_codes.md +++ b/20_Day_Writing_clean_codes/20_day_writing_clean_codes.md @@ -18,21 +18,21 @@ ![Thirty Days Of JavaScript](../images/banners/day_1_20.png) - [Day 20](#day-20) - - [Writing clean code](#writing-clean-code) - - [JavaScript Style Guide](#javascript-style-guide) - - [Why we need style guide](#why-we-need-style-guide) - - [Airbnb JavaScript Style Guide](#airbnb-javascript-style-guide) - - [Standard JavaScript Style Guide](#standard-javascript-style-guide) - - [Google JavaScript Style Guide](#google-javascript-style-guide) - - [JavaScript Coding Conventions](#javascript-coding-conventions) - - [Conventions use in 30DaysOfJavaScript](#conventions-use-in-30daysofjavascript) - - [Variables](#variables) - - [Arrays](#arrays) - - [Functions](#functions) - - [Loops](#loops) - - [Objects](#objects) - - [Conditional](#conditional) - - [Classes](#classes) + - [Writing clean code](#writing-clean-code) + - [JavaScript Style Guide](#javascript-style-guide) + - [Why we need style guide](#why-we-need-style-guide) + - [Airbnb JavaScript Style Guide](#airbnb-javascript-style-guide) + - [Standard JavaScript Style Guide](#standard-javascript-style-guide) + - [Google JavaScript Style Guide](#google-javascript-style-guide) + - [JavaScript Coding Conventions](#javascript-coding-conventions) + - [Conventions use in 30DaysOfJavaScript](#conventions-use-in-30daysofjavascript) + - [Variables](#variables) + - [Arrays](#arrays) + - [Functions](#functions) + - [Loops](#loops) + - [Objects](#objects) + - [Conditional](#conditional) + - [Classes](#classes) # Day 20 @@ -140,10 +140,10 @@ const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] By now you are very familiar function declaration, expression function, arrow function and anonymous function. In this challenge we tend to use arrow function instead of other functions. Arrow function is not a replacement for other functions. In addition, arrow functions and function declarations are not exactly the same. So you should know when to use and when not. I will cover the difference in detail in other sections. We will use explicit return instead of implicit return if the function is one liner ```js -// function which prints full name of a person +// function which return full name of a person const printFullName = (firstName, lastName) => firstName + ' ' + lastName -// function which calculate a square of a number +// function which calculates a square of a number const square = (n) => n * n // a function which generate random hexa colors @@ -180,6 +180,8 @@ const showDateTime = () => { } ``` +The `new Dat().toLocaleString()` can also be used to display current date time. The `toLocaleString()` methods takes different arguments. You may learn more about date and time from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString). + #### Loops We coverer many types of loops in this challenges. The regular for loop, while loop, do while loop, for of loop, forEach loop and for in loop. @@ -202,7 +204,7 @@ for(let i = 0; i < len; i++){ // iterating an array using for of for( const name of names) { - console.log(name.toUpperCasee()) + console.log(name.toUpperCase()) } // iterating array using forEach @@ -218,7 +220,7 @@ const person = { skills: ['HTML','CSS','JavaScript','React','Node','MongoDB','Python','D3.js'], isMarried: true } -for(const key in user) { +for(const key in person) { console.log(key) } @@ -236,7 +238,7 @@ const person = { age: 250, country: 'Finland', city: 'Helsinki', - skills: ['HTML','CSS','JavaScript','React','Node','MongoDB','Python','D3.js'], + skills: ['HTML','CSS','JavaScript','TypeScript', 'React','Node','MongoDB','Python','D3.js'], isMarried: true } // iterating through object keys @@ -244,7 +246,6 @@ for(const key in person) { console.log(key, person[key]) } - ``` #### Conditional diff --git a/21_Day_DOM/21_day_dom.md b/21_Day_DOM/21_day_dom.md index 84c95d4f..5955c519 100644 --- a/21_Day_DOM/21_day_dom.md +++ b/21_Day_DOM/21_day_dom.md @@ -84,7 +84,7 @@ document.getElementsByTagName('tagname') ```js const allTitles = document.getElementsByTagName('h1') -console.log(allTitles) //HTMCollections +console.log(allTitles) //HTMLCollections console.log(allTitles.length) // 4 for (let i = 0; i < allTitles.length; i++) { @@ -104,7 +104,7 @@ document.getElementsByClassName('classname') ```js const allTitles = document.getElementsByClassName('title') -console.log(allTitles) //HTMCollections +console.log(allTitles) //HTMLCollections console.log(allTitles.length) // 4 for (let i = 0; i < allTitles.length; i++) { @@ -133,9 +133,9 @@ The _document.querySelector_ method can select an HTML or HTML elements by tag n **_querySelector_**: can be used to select HTML element by its tag name, id or class. If the tag name is used it selects only the first element. ```js -let firstTitle = document.querySelector('h1') // select the first available h2 element +let firstTitle = document.querySelector('h1') // select the first available h1 element let firstTitle = document.querySelector('#first-title') // select id with first-title -let firstTitle = document.querySelector('.title') // select the first available h2 element with class title +let firstTitle = document.querySelector('.title') // select the first available h1 element with class title ``` **_querySelectorAll_**: can be used to select html element by its tag name or class. It return a nodeList which is an array like object which support array methods. We can use **_for loop_** or **_forEach_** to loop through each nodeList elements. @@ -158,7 +158,7 @@ An attribute is added in the opening tag of HTML which gives additional informat ```js const titles = document.querySelectorAll('h1') -titles[3].class = 'title' +titles[3].className = 'title' titles[3].id = 'fourth-title' ``` diff --git a/23_Day_Event_listeners/23_day_event_listeners.md b/23_Day_Event_listeners/23_day_event_listeners.md index 1100593d..8929480a 100644 --- a/23_Day_Event_listeners/23_day_event_listeners.md +++ b/23_Day_Event_listeners/23_day_event_listeners.md @@ -19,18 +19,18 @@ ![Thirty Days Of JavaScript](../images/banners/day_1_23.png) - [Day 22](#day-22) - - [DOM(Document Object Model)-Day 3](#domdocument-object-model-day-3) - - [Event Listeners](#event-listeners) - - [Click](#click) - - [Double Click](#double-click) - - [Mouse enter](#mouse-enter) - - [Getting value from an input element](#getting-value-from-an-input-element) - - [input value](#input-value) - - [input event and change](#input-event-and-change) - - [blur event](#blur-event) - - [keypress, keydow and keyup](#keypress-keydow-and-keyup) - - [Exercises](#exercises) - - [Exercise: Level 1](#exercise-level-1) + - [DOM(Document Object Model)-Day 3](#domdocument-object-model-day-3) + - [Event Listeners](#event-listeners) + - [Click](#click) + - [Double Click](#double-click) + - [Mouse enter](#mouse-enter) + - [Getting value from an input element](#getting-value-from-an-input-element) + - [input value](#input-value) + - [input event and change](#input-event-and-change) + - [blur event](#blur-event) + - [keypress, keydow and keyup](#keypress-keydow-and-keyup) + - [Exercises](#exercises) + - [Exercise: Level 1](#exercise-level-1) # Day 22 @@ -174,7 +174,7 @@ By now you are familiar with addEventListen method and how to attach event liste List of events: - click - when the element clicked -- dbclick - when the element double clicked +- dblclick - when the element double clicked - mouseenter - when the mouse point enter to the element - mouseleave - when the mouse pointer leave the element - mousemove - when the mouse pointer move on the element diff --git a/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md b/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md index f9234967..e0c74a5d 100644 --- a/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md +++ b/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md @@ -1,5 +1,5 @@
-

30 Days Of JavaScript: World Countrires Data Visualization

+

30 Days Of JavaScript: World Countries Data Visualization

@@ -14,13 +14,13 @@
-[<< Day 24](../24_Day_Project_soloar_system/24_day_project_soloar_system.md) | [Day 26 >>](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) +[<< Day 24](../24_Day_Project_solar_system/24_day_project_solar_system.md) | [Day 26 >>](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) ![Thirty Days Of JavaScript](../images/banners/day_1_25.png) - [Day 25](#day-25) - - [Exercises](#exercises) - - [Exercise: Level 1](#exercise-level-1) + - [Exercises](#exercises) + - [Exercise: Level 1](#exercise-level-1) # Day 25 diff --git a/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md b/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md index 72d4b37e..880b9b66 100644 --- a/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md +++ b/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md @@ -14,15 +14,15 @@ -[<< Day 28](../28_Day_Mini_project_animating_characters/28_day_mini_project_animating_characters.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md) +[<< Day 28](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md) ![Thirty Days Of JavaScript](../images/banners/day_1_29.png) - [Day 29](#day-29) - - [Exercises](#exercises) - - [Exercise: Level 1](#exercise-level-1) - - [Exercise: Level 2](#exercise-level-2) - - [Exercise: Level 3](#exercise-level-3) + - [Exercises](#exercises) + - [Exercise: Level 1](#exercise-level-1) + - [Exercise: Level 2](#exercise-level-2) + - [Exercise: Level 3](#exercise-level-3) # Day 29 @@ -41,4 +41,4 @@ πŸŽ‰ CONGRATULATIONS ! πŸŽ‰ -[<< Day 28](../28_Day_Mini_project_animating_characters/28_day_mini_project_animating_characters.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md) \ No newline at end of file +[<< Day 28](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md) \ No newline at end of file diff --git a/30_Day_Mini_project_final/30_day_mini_project_final.md b/30_Day_Mini_project_final/30_day_mini_project_final.md index 566c7fcd..e6fce3ef 100644 --- a/30_Day_Mini_project_final/30_day_mini_project_final.md +++ b/30_Day_Mini_project_final/30_day_mini_project_final.md @@ -40,7 +40,7 @@ 1. Create the following animation using (HTML, CSS, JS) -![Countries daata](./../images/projects/dom_mini_project_countries_object_day_10.1.gif) +![Countries data](./../images/projects/dom_mini_project_countries_object_day_10.1.gif) 2. Validate the following form using regex. @@ -56,6 +56,7 @@ πŸŒ• Your journey to greatness completed successfully. You reached high level of greatness. Now, you are much greater than ever before. I knew what it takes to reach to this level and you made to this point. You are a real hero. Now, it is time to celebrate your success with a friend or with a family. I am looking forward to seeing you in an other challenge. ## Testimony + Now it is time to express your thoughts about the Author and 30DaysOfJavaScript. You can leave your testimonial on this [link](https://testimonify.herokuapp.com/) ~![Congratulations](./../images/projects/congratulations.gif) diff --git a/readMe.md b/readMe.md index c7020782..88c7e997 100644 --- a/readMe.md +++ b/readMe.md @@ -149,7 +149,7 @@ 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. +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. ### Browser @@ -198,7 +198,7 @@ Ctl+Shift+I ##### Console.log -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. +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!') @@ -206,7 +206,7 @@ console.log('Hello, World!') ##### Console.log with Multiple Arguments -The **console.log()** function can take multiple parameters separated by commas. The syntax looks like as follows:**console.log(param1, param2, param3)** +The **`console.log()`** function can take multiple parameters separated by commas. The syntax looks like as follows:**`console.log(param1, param2, param3)`** ![console log multiple arguments](./images/console_log_multipl_arguments.png) @@ -216,27 +216,31 @@ console.log('HAPPY', 'NEW', 'YEAR', 2020) console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript') ``` -As you can see from the snippet code above, _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()_. +Congratulations! You wrote your first JavaScript code using _`console.log()`_. ##### Comments -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.In JavaScript, any text line starting with // in JavaScript is a comment, and anything enclosed like this /\* \*/ is also a comment. +We can 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. In JavaScript, any text line starting with // in JavaScript is a comment, and anything enclosed like this `//` is also a comment. **Example: Single Line Comment** +```js // This is the first comment - // This is the second comment - // I am a single line comment +// This is the second comment +// I am a single line comment +``` **Example: Multiline Comment** +```js /* This is a multiline comment Multiline comments can take multiple lines JavaScript is the language of the web */ +``` ##### Syntax @@ -251,7 +255,7 @@ 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 quotes. +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. **Example:** ```js @@ -262,9 +266,9 @@ console.log(`Hello, World!`) #### Arithmetics -Now, let us practice more writing JavaScript codes using _console.log()_ on google chrome console for number data types. +Now, let us practice more writing JavaScript codes using _`console.log()`_ on Google Chrome console for number data types. In addition to the text, we can also do mathematical calculations using JavaScript. Let us do the following simple calculations. -The console can directly take arguments without the **_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. +It is possible to write JavaScript code on Google Chrome console can directly without the **_`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. ![Arithmetic](images/arithmetic.png) @@ -279,11 +283,11 @@ console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3 ### Code Editor -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 JavaScript challenge, we will be using Visual Studio Code. +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 of JavaScript challenge, we will be using Visual Studio Code. #### Installing Visual Studio Code -Visual 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. +Visual 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. ![Vscode](images/vscode.png) @@ -320,7 +324,7 @@ The following sections show different ways of adding JavaScript code to your web ### Inline Script -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](https://www.google.com/chrome/). +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](https://www.google.com/chrome/). ```html @@ -334,11 +338,11 @@ Create a project folder on your desktop or in any location, name it 30DaysOfJS a ``` -Now, you just wrote your first inline script. We can create a pop up alert message using the _alert()_ built-in function. +Now, you just wrote your first inline script. We can create a pop up alert message using the _`alert()`_ built-in function. ### 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. +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. ```html @@ -354,7 +358,7 @@ First, let us write on the head part of the page. ``` -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() +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 @@ -371,7 +375,7 @@ This is how we write an internal script most of the time. Writing the JavaScript ``` -Open the browser console to see the output from the console.log() +Open the browser console to see the output from the `console.log()`. ![js code from vscode](./images/js_code_vscode.png) @@ -406,19 +410,19 @@ External scripts in the _body_: 30DaysOfJavaScript:External script - - + + ``` -Open the browser console to see the output of the console.log() +Open the browser console to see the output of the `console.log()`. ### Multiple External Scripts We can also link multiple external JavaScript files to a web page. -Create a helloworld.js file inside the 30DaysOfJS folder and write the following code. +Create a `helloworld.js` file inside the 30DaysOfJS folder and write the following code. ```js console.log('Hello, World!') @@ -443,7 +447,7 @@ _Your main.js file should be below all other scripts_. It is very important to r ## Introduction to Data types -In JavaScript and also other programming languages, there are different kinds of data types. The following are JavaScript primitive data types:_String, Number, Boolean, undefined, Null_, and _Symbol_. +In JavaScript and also other programming languages, there are different types of data types. The following are JavaScript primitive data types: _String, Number, Boolean, undefined, Null_, and _Symbol_. ### Numbers @@ -457,16 +461,20 @@ In JavaScript and also other programming languages, there are different kinds of ### Strings A collection of one or more characters between two single quotes, double quotes, or backticks. + **Example:** ```js +'a' 'Asabeneh' +"Asabeneh" 'Finland' 'JavaScript is a beautiful programming language' 'I love teaching' 'I hope you are enjoying the first day' `We can also create a string using a backtick` -'A string could be just as small as one character as big as many pages' +'A string could be just as small as one character or as big as many pages' +'Any data type under a single quote, double quote or backtick is a string' ``` ### Booleans @@ -533,7 +541,6 @@ Multiline commenting: let age = 100; let isMarried = true; This is a Multiple line comment - */ ``` @@ -574,11 +581,11 @@ year2020 year_2020 ``` -The first and second variables on the list follows the camelCase convention of declaring in JavaScript. In this material, we will use camelCase variables. +The first and second variables on the list follows the camelCase convention of declaring in JavaScript. In this material, we will use camelCase variables(camelWithOneHump). We use CamelCase(CamelWithTwoHump) to declare classes, we will discuss about classes and objects in other section. Example of invalid variables: -```sh +```js first-name 1_num num_#_1 @@ -591,6 +598,8 @@ Let us declare variables with different data types. To declare a variable, we ne let nameOfVariable = value ``` +The nameOfVriable is the name that stores different data of value. See below for detail examples. + **Examples of declared variables** ```js @@ -623,10 +632,8 @@ console.log(gravity, boilingPoint, PI) ``` ```js -// Variables can also be declaring in one line separated by comma -let name = 'Asabeneh', // name of a person -job = 'teacher', -live = 'Finland' +// 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) ```