diff --git a/02_Day/02_day_data_types.md b/02_Day/02_day_data_types.md index 524cf38..169bbc7 100644 --- a/02_Day/02_day_data_types.md +++ b/02_Day/02_day_data_types.md @@ -23,19 +23,19 @@ - [Primitive Data Types](#primitive-data-types) - [Non-Primitive Data Types](#non-primitive-data-types) - [Numbers](#numbers) - - [Declaring number data types](#declaring-number-data-types) + - [Declaring Number Data Types](#declaring-number-data-types) - [Math Object](#math-object) - - [Random number generator](#random-number-generator) + - [Random Number Generator](#random-number-generator) - [Strings](#strings) - [String Concatenation](#string-concatenation) - - [Concatenating using addition operator](#concatenating-using-addition-operator) + - [Concatenating Using Dddition Operator](#concatenating-using-addition-operator) - [Long Literal Strings](#long-literal-strings) - - [Escape Sequences in string](#escape-sequences-in-string) - - [Template Literals(Template Strings)](#template-literalstemplate-strings) + - [Escape Sequences in Strings](#escape-sequences-in-strings) + - [Template Literals (Template Strings)](#template-literals-template-strings) - [String Methods](#string-methods) - - [Checking Data types and Casting](#checking-data-types-and-casting) - - [Checking data types](#checking-data-types) - - [Changing data type(Casting)](#changing-data-typecasting) + - [Checking Data Types and Casting](#checking-data-types-and-casting) + - [Checking Data Types](#checking-data-types) + - [Changing Data Type (Casting)](#changing-data-type-casting) - [String to Int](#string-to-int) - [String to Float](#string-to-float) - [Float to Int](#float-to-int) @@ -46,19 +46,19 @@ # 📔 Day 2 -## Data types +## Data Types -In the previous section, we mentioned a little bit about data types. Data or values have data types. Data types describe the characteristics of data. Data types can be divided into two +In the previous section, we mentioned a little bit about data types. Data or values have data types. Data types describe the characteristics of data. Data types can be divided into two: 1. Primitive data types 2. Non-primitive data types(Object References) ### Primitive Data Types -Primitive data types in JavaScript includes: +Primitive data types in JavaScript include: 1. Numbers - Integers, floats - 2. Strings - Any data under single or double quote + 2. Strings - Any data under single quote, double quote or backtick quote 3. Booleans - true or false value 4. Null - empty value or no value 5. Undefined - a declared variable without a value @@ -69,21 +69,22 @@ Non-primitive data types in JavaScript includes: 2. Functions 3. Arrays -Now, let us see what exactly mean primitive and non-primitive data types. -*Primitive* data types are immutable(non-modifiable) data types. Once a primitive data type is created we can not modify it. +Now, let us see what exactly primitive and non-primitive data types mean. +*Primitive* data types are immutable(non-modifiable) data types. Once a primitive data type is created we cannot modify it. + **Example:** ```js let word = 'JavaScript' ``` -If we try to modify the string stored in variable *word*, JavaScript will raise an error. Any data type under a single quote, double-quote, or backtick is a string data type. +If we try to modify the string stored in variable *word*, JavaScript should raise an error. Any data type under a single quote, double quote, or backtick quote is a string data type. ```js word[0] = 'Y' ``` -This expression does not change the string stored in the variable *word*. So, we can say that strings are not modifiable or immutable. +This expression does not change the string stored in the variable *word*. So, we can say that strings are not modifiable or in other words immutable. Primitive data types are compared by its values. Let us compare different data values. See the example below: ```js @@ -115,7 +116,7 @@ nums[0] = 10 console.log(nums) // [10, 2, 3] ``` -As you can see, an array in which a non-primitive data type is mutable. Non-primitive data types can not be compared by value. Even if two non-primitive data types have the same properties and values, they are not strictly equal. +As you can see, an array, which is a non-primitive data type is mutable. Non-primitive data types cannot be compared by value. Even if two non-primitive data types have the same properties and values, they are not strictly equal. ```js let nums = [1, 2, 3] @@ -138,8 +139,8 @@ country:'Finland' console.log(userOne == userTwo) // false ``` -Rule of thumb, we do not compare non-primitive data types. Do not compare array, function, or object. -Non-primitive values are referred to as reference types because they are being compared by reference instead of value. Two objects are only strictly equal if they refer to the same underlying object. +Rule of thumb, we do not compare non-primitive data types. Do not compare arrays, functions, or objects. +Non-primitive values are referred to as reference types, because they are being compared by reference instead of value. Two objects are only strictly equal if they refer to the same underlying object. ```js let nums = [1, 2, 3] @@ -163,9 +164,9 @@ If you have a hard time understanding the difference between primitive data type ## Numbers Numbers are integers and decimal values which can do all the arithmetic operations. -Lets' see some examples of Numbers. +Let's see some examples of Numbers. -### Declaring number data types +### Declaring Number Data Types ```js let age = 35 @@ -187,22 +188,22 @@ In JavaScript the Math Object provides a lots of methods to work with numbers. ```js const PI = Math.PI -console.log(PI) // 3.141592653589793 +console.log(PI) // 3.141592653589793 // Rounding to the closest number // if above .5 up if less 0.5 down rounding -console.log(Math.round(PI)) // 3 to round values to the nearest number +console.log(Math.round(PI)) // 3 to round values to the nearest number -console.log(Math.round(9.81)) // 10 +console.log(Math.round(9.81)) // 10 -console.log(Math.floor(PI)) // 3 rounding down +console.log(Math.floor(PI)) // 3 rounding down -console.log(Math.ceil(PI)) // 4 rounding up +console.log(Math.ceil(PI)) // 4 rounding up -console.log(Math.min(-5, 3, 20, 4,5, 10)) // -5, returns the minimum value +console.log(Math.min(-5, 3, 20, 4, 5, 10)) // -5, returns the minimum value -console.log(Math.max(-5, 3, 20, 4,5, 10)) // 20, returns the maximum value +console.log(Math.max(-5, 3, 20, 4, 5, 10)) // 20, returns the maximum value const randNum = Math.random() // creates random number between 0 to 0.999999 console.log(randNum) @@ -213,22 +214,22 @@ const num = Math.floor(Math.random () * 11) // creates random number between 0 a console.log(num) //Absolute value -console.log(Math.abs(-10)) //10 +console.log(Math.abs(-10)) // 10 //Square root console.log(Math.sqrt(100)) // 10 -console.log(Math.sqrt(2)) //1.4142135623730951 +console.log(Math.sqrt(2)) // 1.4142135623730951 // Power -console.log(Math.pow(3, 2)) // 9 +console.log(Math.pow(3, 2)) // 9 -console.log(Math.E) // 2.718 +console.log(Math.E) // 2.718 // Logarithm -//Returns the natural logarithm of base E of x, Math.log(x) -console.log(Math.log(2)) // 0.6931471805599453 -console.log(Math.log(10)) // 2.302585092994046 +//Returns the natural logarithm with base E of x, Math.log(x) +console.log(Math.log(2)) // 0.6931471805599453 +console.log(Math.log(10)) // 2.302585092994046 // Trigonometry Math.sin(0) @@ -238,7 +239,7 @@ Math.cos(0) Math.cos(60) ``` -#### Random number generator +#### Random Number Generator The JavaScript Math Object has a random() method number generator which generates number from 0 to 0.999999999... @@ -246,7 +247,7 @@ The JavaScript Math Object has a random() method number generator which generate let randomNum = Math.random() // generates 0 to 0.999 ``` -Now, let us see how we can use random() method to generate a random number between 0 and 10 inclusive. +Now, let us see how we can use random() method to generate a random number between 0 and 10: ```js let randomNum = Math.random() // generates 0 to 0.999 @@ -260,8 +261,8 @@ console.log(randomNumRoundToFloor) // this gives between 0 and 10 ## Strings -Strings are texts, which are under **_single_** or **_double_** quote. To declare a string, we need a variable name, assignment operator, a value under a single quote, double-quote, or backtick. -Lets' see some examples of string: +Strings are texts, which are under **_single_** or **_double_** quote. To declare a string, we need a variable name, assignment operator, a value under a single quote, double quote, or backtick quote. +Let's see some examples of strings: ```js let space = ' ' // an empty space string @@ -275,18 +276,9 @@ let job = 'teacher' ### String Concatenation -Connect two or more strings together is called concatenation. +Connecting two or more strings together is called concatenation. -```js -// Declaring different variables of different data types -let space = ' ' -let firstName = 'Asabeneh' -let lastName = 'Yetayeh' -let country = 'Finland' -let city = 'Helsinki' -let language = 'JavaScript' -let job = 'teacher' -``` +Using the strings declared in the previous String section: ```js let fullName = firstName + space + lastName; // concatenation, merging two string together. @@ -297,11 +289,11 @@ console.log(fullName); Asabeneh Yetayeh ``` -We can concatenate string in different ways. +We can concatenate strings in different ways. -#### Concatenating using addition operator +#### Concatenating Using Addition Operator -Concatenating using the addition operator is an old way. This way of concatenating is tedious and error-prone. It is good to know how to concatenate this way, but I strongly suggest to use the second way. +Concatenating using the addition operator is an old way. This way of concatenating is tedious and error-prone. It is good to know how to concatenate this way, but I strongly suggest to use the ES6 template strings (explained later on). ```js // Declaring different variables of different data types @@ -313,9 +305,9 @@ let city = 'Helsinki' let language = 'JavaScript' let job = 'teacher' let age = 250 -let fullName = firstName + space + lastName +let fullName = firstName.concat(space).concat(lastName) // concat string method -let personInfoOne = fullName + '. I am ' + age + '. I live in ' + country; // ES5 +let personInfoOne = fullName + '. I am ' + age + '. I live in ' + country; // ES5 string addition console.log(personInfoOne) ``` @@ -341,32 +333,48 @@ I hope you are enjoying too." console.log(paragraph) ``` -#### Escape Sequences in string +#### Escape Sequences in Strings -In JavaScript and other programming language \ followed by some characters is an escape sequence. Let's see the most common escape characters: +In JavaScript and other programming languages \ followed by some characters is an escape sequence. Let's see the most common escape characters: - \n: new line -- \t: Tab means(8 spaces) +- \t: Tab, means 8 spaces - \\\\: Back slash - \\': Single quote (') - \\":Double quote (") ```js -console.log('I hope every one is enjoying the 30 Days Of JavaScript challenge.\nDo you ?') // line break +console.log('I hope everyone is enjoying the 30 Days Of JavaScript challenge.\nDo you ?') // line break console.log('Days\tTopics\tExercises') console.log('Day 1\t3\t5') console.log('Day 2\t3\t5') console.log('Day 3\t3\t5') console.log('Day 4\t3\t5') -console.log('This is a back slash symbol (\\)') // To write a back slash +console.log('This is a backslash symbol (\\)') // To write a backslash console.log('In every programming language it starts with \"Hello, World!\"') console.log("In every programming language it starts with \'Hello, World!\'") -console.log('The saying \'Seeing is Believing\' is\'t correct in 2020') +console.log('The saying \'Seeing is Believing\' isn\'t correct in 2020') +``` + +Output in console: + +```sh +I hope everyone is enjoying the 30 Days Of JavaScript challenge. +Do you ? +Days Topics Exercises +Day 1 3 5 +Day 2 3 5 +Day 3 3 5 +Day 4 3 5 +This is a backslash symbol (\) +In every programming language it starts with "Hello, World!" +In every programming language it starts with 'Hello, World!' +The saying 'Seeing is Believing' isn't correct in 2020 ``` -#### Template Literals(Template Strings) +#### Template Literals (Template Strings) -To create a template string, we use two backticks. We can inject data as expression inside a template string. To inject data, we enclose the expression with a curly bracket({}) followed by a $ sign. See the syntax below. +To create a template strings, we use two backticks. We can inject data as expressions inside a template string. To inject data, we enclose the expression with a curly bracket({}) preceded by a $ sign. See the syntax below. ```js //Syntax @@ -406,7 +414,7 @@ I am Asabeneh Yetayeh. I am 250. I live in Finland. I am Asabeneh Yetayeh. I live in Helsinki, Finland. I am a teacher. I teach JavaScript. ``` -Using a string template or string interpolation method, we can add expression, which could be a value or some operations(comparison, arithmetic operations, ternary operation). +Using a string template or string interpolation method, we can add expressions, which could be a value, or some operations (comparison, arithmetic operations, ternary operation). ```js let a = 2 @@ -420,19 +428,20 @@ console.log(`${a} is greater than ${b}: ${a > b}`) ### String Methods -Everything in JavaScript is an object. A string is a primitive data type that means we can not modify once it is created. The string object has many string methods. There are different string methods that can help us to work with strings. +Everything in JavaScript is an object. A string is a primitive data type that means we can not modify it once it is created. The string object has many string methods. There are different string methods that can help us to work with strings. 1. *length*: The string *length* method returns the number of characters in a string included empty space. - **Example:** - ```js - let js = 'JavaScript' - console.log(js.length) // 10 - let firstName = 'Asabeneh' - console.log(firstName.length) // 8 - ``` +**Example:** + +```js +let js = 'JavaScript' +console.log(js.length) // 10 +let firstName = 'Asabeneh' +console.log(firstName.length) // 8 +``` -2. *Accessing characters in a string*: We can access each character in a string using its index. In programming, counting starts from 0. The first index of the string is zero, and the last index is one minus the length of the string. +2. *Accessing characters in a string*: We can access each character in a string using its index. In programming, counting starts from 0. The first index of the string is zero, and the last index is the length of the string minus one. ![Accessing sting by index](../images/string_indexes.png) @@ -456,7 +465,7 @@ console.log(lastIndex) // 9 console.log(string[lastIndex]) // t ``` -1. *toUpperCase()*: this method changes the string to uppercase letters. +3. *toUpperCase()*: this method changes the string to uppercase letters. ```js let string = 'JavaScript' @@ -498,7 +507,7 @@ let country = 'Finland' console.log(country.substr(3, 4)) // land ``` -6. *substring()*: It takes two arguments, the starting index and the stopping index but it doesn't include the stopping index. +6. *substring()*: It takes two arguments, the starting index and the stopping index but it doesn't include the character at the stopping index. ```js let string = 'JavaScript' @@ -544,7 +553,7 @@ console.log(string.trim(' ')) let firstName = ' Asabeneh ' console.log(firstName) -console.log(firstName.trim()) +console.log(firstName.trim()) // still removes spaces at the beginning and the end of the string ``` ```sh @@ -554,13 +563,13 @@ console.log(firstName.trim()) Asabeneh ``` -9. *includes()*: It takes a substring argument and it check if substring argument exists in the string. *includes()* returns a boolean. It checks if a substring exist in a string and it returns true if it exists and false if it doesn't exist. +9. *includes()*: It takes a substring argument and it checks if substring argument exists in the string. *includes()* returns a boolean. If a substring exist in a string, it returns true, otherwise it returns false. ```js let string = '30 Days Of JavaScript' console.log(string.includes('Days')) // true -console.log(string.includes('days')) // false +console.log(string.includes('days')) // false - it is case sensitive! console.log(string.includes('Script')) // true console.log(string.includes('script')) // false console.log(string.includes('java')) // false @@ -574,7 +583,7 @@ console.log(country.includes('land')) // true console.log(country.includes('Land')) // false ``` -10. *replace()*: takes to parameter the old substring and new substring. +10. *replace()*: takes as a parameter the old substring and a new substring. ```js string.replace(oldsubstring, newsubstring) @@ -602,7 +611,7 @@ let lastIndex = string.length - 1 console.log(string.charAt(lastIndex)) // t ``` -12. *charCodeAt()*: Takes index and it returns char code(ASCII number) of the value at that index +12. *charCodeAt()*: Takes index and it returns char code (ASCII number) of the value at that index ```js string.charCodeAt(index) @@ -617,7 +626,9 @@ console.log(string.charCodeAt(lastIndex)) // t ASCII is 116 ``` -1. *indexOf()*: Takes a substring and if the substring exists in a string it returns the first position of the substring if does not exist it returns -1 + +13. *indexOf()*: Takes a substring and if the substring exists in a string it returns the first position of the substring if does not exist it returns -1 + ```js string.indexOf(substring) @@ -635,7 +646,8 @@ console.log(string.indexOf('Script')) //15 console.log(string.indexOf('script')) // -1 ``` -1. *lastIndexOf()*: Takes a substring and if the substring exists in a string it returns the last position of the substring if it does not exist it returns -1 +14. *lastIndexOf()*: Takes a substring and if the substring exists in a string it returns the last position of the substring if it does not exist it returns -1 + ```js //syntax @@ -650,7 +662,7 @@ console.log(string.lastIndexOf('you')) // 63 console.log(string.lastIndexOf('JavaScript')) // 38 ``` -15. *concat()*: it takes many substrings and creates concatenation. +15. *concat()*: it takes many substrings and joins them. ```js string.concat(substring, substring, substring) @@ -685,7 +697,7 @@ console.log(country.startsWith('fin')) // false console.log(country.startsWith('land')) // false ``` -17. *endsWith*: it takes a substring as an argument and it checks if the string starts with that specified substring. It returns a boolean(true or false). +17. *endsWith*: it takes a substring as an argument and it checks if the string ends with that specified substring. It returns a boolean(true or false). ```js string.endsWith(substring) @@ -745,10 +757,10 @@ 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, we will cover regular expression in other section. +Let us extract numbers from text using a regular expression. This is not the regular expression section, do not panic! We will cover regular expressions later on. ```js -let txt = 'In 2019, I run 30 Days of Python. Now, in 2020 I super exited to start this challenge' +let txt = 'In 2019, I ran 30 Days of Python. Now, in 2020 I am super exited to start this challenge' let regEx = /\d+/ // d with escape character means d not a normal d instead acts a digit @@ -759,7 +771,7 @@ console.log(txt.match(regEx)) // ["2", "0", "1", "9", "3", "0", "2", "0", "2", console.log(txt.match(/\d+/g)) // ["2019", "30", "2020"] ``` -20. *repeat()*: it takes a number argument and it returned the repeated version of the string. +20. *repeat()*: it takes a number as argument and it returns the repeated version of the string. ```js string.repeat(n) @@ -770,12 +782,13 @@ let string = 'love' console.log(string.repeat(10)) // lovelovelovelovelovelovelovelovelovelove ``` -## Checking Data types and Casting +## Checking Data Types and Casting -### Checking data types +### Checking Data Types -- Check Data types: To check the data type of a certain data type we use the _typeof_ and we also change one data type to another. - **Example:** +To check the data type of a certain variable we use the _typeof_ method. + +**Example:** ```js // Different javascript data types @@ -800,14 +813,14 @@ console.log(typeof undefined) // undefined console.log(typeof null) // object ``` -### Changing data type(Casting) +### Changing Data Type (Casting) - Casting: Converting one data type to another data type. We use _parseInt()_, _parseFloat()_, _Number()_, _+ sign_, _str()_ When we do arithmetic operations string numbers should be first converted to integer or float if not it returns an error. #### String to Int -We can convert string number to a number. Any number inside a quote is a string number. An example of a string number: '10', '5', etc. +We can convert string number to a number. Any number inside a quote is a string number. An example of a string number: '10', '5', etc. We can convert string to number using the following methods: - parseInt() @@ -836,7 +849,7 @@ console.log(numInt) // 10 #### String to Float -We can convert string float number to a float number. Any float number inside a quote is a string float number. An example of a string float number: '9.81', '3.14', '1.44', etc. +We can convert string float number to a float number. Any float number inside a quote is a string float number. An example of a string float number: '9.81', '3.14', '1.44', etc. We can convert string float to number using the following methods: - parseFloat() @@ -878,61 +891,62 @@ let numInt = parseInt(num) console.log(numInt) // 9 ``` -🌕 You are awesome. You have just completed day 2 challenges and you are two steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. +🌕 You are awesome. You have just completed day 2 challenges and you are two steps ahead on your way to greatness. Now do some exercises for your brain and for your muscle. ## 💻 Day 2: Exercises ### Exercise: Level 1 -1. Declare a variable name challenge and assign it to an initial value **'30 Days Of JavaScript'**. +1. Declare a variable named challenge and assign it to an initial value **'30 Days Of JavaScript'**. 2. Print the string on the browser console using __console.log()__ 3. Print the __length__ of the string on the browser console using _console.log()_ -4. Change all the string to capital letters using __toUpperCase()__ method -5. Change all the string to lowercase letters using __toLowerCase()__ method -6. Cut(slice) out the first word of the string using __substr()__ or __substring()__ method +4. Change all the string characters to capital letters using __toUpperCase()__ method +5. Change all the string characters to lowercase letters using __toLowerCase()__ method +6. Cut (slice) out the first word of the string using __substr()__ or __substring()__ method 7. Slice out the phrase *Days Of JavaScript* from *30 Days Of JavaScript*. 8. Check if the string contains a word __Script__ using __includes()__ method -9. Split the __string__ into __array__ using __split()__ method +9. Split the __string__ into an __array__ using __split()__ method 10. Split the string 30 Days Of JavaScript at the space using __split()__ method 11. 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon' __split__ the string at the comma and change it to an array. 12. Change 30 Days Of JavaScript to 30 Days Of Python using __replace()__ method. -13. What is character at index 15 in '30 Days Of JavaScript' string use __charAt()__ method. +13. What is character at index 15 in '30 Days Of JavaScript' string? Use __charAt()__ method. 14. What is the character code of J in '30 Days Of JavaScript' string using __charCodeAt()__ -15. Use __indexOf__ to determine the position of the first occurrence of a in 30 Days Of JavaScript -16. Use __lastIndexOf__ to determine the position of the last occurrence of a in 30 Days Of JavaScript. +15. Use __indexOf__ to determine the position of the first occurrence of __a__ in 30 Days Of JavaScript +16. Use __lastIndexOf__ to determine the position of the last occurrence of __a__ in 30 Days Of JavaScript. 17. Use __indexOf__ to find the position of the first occurrence of the word __because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ 18. Use __lastIndexOf__ to find the position of the last occurrence of the word __because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ 19. Use __search__ to find the position of the first occurrence of the word __because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ -20. Use __trim()__ to remove if there is trailing whitespace at the beginning and the end of a string.E.g ' 30 Days Of JavaScript '. -21. Use __startsWith()__ method with the string *30 Days Of JavaScript* make the result true -22. Use __endsWith()__ method with the string *30 Days Of JavaScript* make the result true -23. Use __match()__ method to find all the a’s in 30 Days Of JavaScript +20. Use __trim()__ to remove any trailing whitespace at the beginning and the end of a string.E.g ' 30 Days Of JavaScript '. +21. Use __startsWith()__ method with the string *30 Days Of JavaScript* and make the result true +22. Use __endsWith()__ method with the string *30 Days Of JavaScript* and make the result true +23. Use __match()__ method to find all the __a__’s in 30 Days Of JavaScript 24. Use __concat()__ and merge '30 Days of' and 'JavaScript' to a single string, '30 Days Of JavaScript' 25. Use __repeat()__ method to print 30 Days Of JavaScript 2 times ### Exercise: Level 2 -1. Using console.log() print out the following statement. +1. Using console.log() print out the following statement: ```sh The quote 'There is no exercise better for the heart than reaching down and lifting people up.' by John Holmes teaches us to help one another. ``` -1. Using console.log() print out the following quote by Mother Teresa. + +2. Using console.log() print out the following quote by Mother Teresa: ```sh "Love is not patronizing and charity isn't about pity, it is about love. Charity and love are the same -- with charity you give love, so don't just give money but reach out your hand instead." ``` -1. Check if typeof '10' is exactly equal to 10. If not make it exactly equal. -1. Check if parseFloat('9.8') is equal to 10 if not make it exactly equal with 10. -2. Check if 'on' is found in both python and jargon -3. _I hope this course is not full of jargon_. Check if _jargon_ is in the sentence. -4. Generate a random number between 0 and 100 inclusive. -5. Generate a random number between 50 and 100 inclusive. -6. Generate a random number between 0 and 255 inclusive. -7. Access the 'JavaScript' string characters using a random number. -8. Use console.log() and escape characters to print the following pattern. +3. Check if typeof '10' is exactly equal to 10. If not make it exactly equal. +4. Check if parseFloat('9.8') is equal to 10 if not make it exactly equal with 10. +5. Check if 'on' is found in both python and jargon +6. _I hope this course is not full of jargon_. Check if _jargon_ is in the sentence. +7. Generate a random number between 0 and 100 inclusively. +8. Generate a random number between 50 and 100 inclusively. +9. Generate a random number between 0 and 255 inclusively. +10. Access the 'JavaScript' string characters using a random number. +11. Use console.log() and escape characters to print the following pattern. ```js 1 1 1 1 1 @@ -941,20 +955,19 @@ console.log(numInt) // 9 4 1 4 16 64 5 1 5 25 125 ``` - -9. Use __substr__ to slice out the phrase __because because because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ +12. Use __substr__ to slice out the phrase __because because because__ from the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ ### Exercises: Level 3 -1. 'Love is the best thing in this world. Some found their love and some are still looking for their love.' Count the number of word love in this sentence. -2. Use __match()__ to count the number all because's in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ -3. Clean the following text and find the most frequent word (hint, use replace and regular express). +1. 'Love is the best thing in this world. Some found their love and some are still looking for their love.' Count the number of word __love__ in this sentence. +2. Use __match()__ to count the number of all __because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ +3. Clean the following text and find the most frequent word (hint, use replace and regular expressions). ```js const sentence = '%I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching' ``` -4. Calculate the total annual income of the person by extract the numbers from the following text. 'He earns 5000 euro from salary per month, 10000 euro annual bonus, 15000 euro online courses per month.' +4. Calculate the total annual income of the person by extracting the numbers from the following text. 'He earns 5000 euro from salary per month, 10000 euro annual bonus, 15000 euro online courses per month.' 🎉 CONGRATULATIONS ! 🎉 diff --git a/02_Day/string_methods/match.js b/02_Day/string_methods/match.js index 6e28141..54e18a8 100644 --- a/02_Day/string_methods/match.js +++ b/02_Day/string_methods/match.js @@ -15,8 +15,8 @@ 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 regEx = /\d+/ // d with escape character means d not a normal d instead acts a digit +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. -console.log(text.match(regEx)) // ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"] -console.log(text.match(/\d+/g)) // ["2019", "30", "2020"] +console.log(txt.match(regEx)) // ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"] +console.log(txt.match(/\d+/g)) // ["2019", "30", "2020"] diff --git a/07_Day/07_day_functions.md b/07_Day/07_day_functions.md index db435b0..99ef7e5 100644 --- a/07_Day/07_day_functions.md +++ b/07_Day/07_day_functions.md @@ -203,7 +203,7 @@ functionName(parm1,parm2,parm3,...) // during calling or invoking three argument function sumArrayValues(arr) { let sum = 0; for (let i = 0; i < arr.length; i++) { - sum = sum + numbers[i]; + sum = sum + arr[i]; } return sum; } diff --git a/26_Day/26_day_dom_day_6.md b/26_Day/26_day_dom_day_6.md index d28ba00..6965ae2 100644 --- a/26_Day/26_day_dom_day_6.md +++ b/26_Day/26_day_dom_day_6.md @@ -14,7 +14,7 @@ -[<< Day 24](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/24_Day/24_day_dom_day_4.md) | [Day 27 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/27_Day/27_day_dom_day_7.md) +[<< Day 25](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/25_Day/25_day_dom_day_5.md) | [Day 27 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/27_Day/27_day_dom_day_7.md) ![Thirty Days Of JavaScript](../images/banners/day_1_26.png) diff --git a/28_Day/28_day_dom_day_8.md b/28_Day/28_day_dom_day_8.md index f7d210e..1f3ff02 100644 --- a/28_Day/28_day_dom_day_8.md +++ b/28_Day/28_day_dom_day_8.md @@ -14,7 +14,7 @@ -[<< Day 27](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master27_Day27_day_dom_day_7.md) | [Day 29>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/29_Day/29_day_dom_day_9.md) +[<< Day 27](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/27_Day/27_day_dom_day_7.md) | [Day 29>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/29_Day/29_day_dom_day_9.md) ![Thirty Days Of JavaScript](../images/banners/day_1_28.png) @@ -34,4 +34,4 @@ 🎉 CONGRATULATIONS ! 🎉 -[<< Day 27](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master27_Day27_day_dom_day_7.md) | [Day 29>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/29_Day/29_day_dom_day_9.md) +[<< Day 27](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/27_Day/27_day_dom_day_7.md) | [Day 29>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/29_Day/29_day_dom_day_9.md) diff --git a/29_Day/29_day_dom_day_9.md b/29_Day/29_day_dom_day_9.md index 4be2a84..c1ea12f 100644 --- a/29_Day/29_day_dom_day_9.md +++ b/29_Day/29_day_dom_day_9.md @@ -14,7 +14,7 @@ -[<< Day 27](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master27_Day27_day_dom_day_7.md) | [Day 29>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/29_Day/29_day_dom_day_9.md) +[<< Day 28](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/28_Day/28_day_dom_day_8.md) | [Day 30>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/30_Day/30_day_dom_day_10.md) ![Thirty Days Of JavaScript](../images/banners/day_1_29.png) @@ -41,4 +41,4 @@ 🎉 CONGRATULATIONS ! 🎉 -[<< Day 28](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master28_Day28_day_dom_day_8.md) | [Day 30>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/30_Day/30_day_dom_day_10.md) \ No newline at end of file +[<< Day 28](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/28_Day/28_day_dom_day_8.md) | [Day 30>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/30_Day/30_day_dom_day_10.md) diff --git a/30_Day/30_day_dom_day_10.md b/30_Day/30_day_dom_day_10.md index 41f561e..743080a 100644 --- a/30_Day/30_day_dom_day_10.md +++ b/30_Day/30_day_dom_day_10.md @@ -49,4 +49,4 @@ ~![Congratulations](./../images/projects/congratulations.gif) -[<< Day 29](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master29_Day29_day_dom_day_9.md) | [Day 30>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/30_Day/30_day_dom_day_10.md) +[<< Day 29](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/29_Day/29_day_dom_day_9.md) | [Day 30>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/30_Day/30_day_dom_day_10.md) diff --git a/RU/02_Day/02_day_data_types.md b/RU/02_Day/02_day_data_types.md new file mode 100644 index 0000000..e898f4f --- /dev/null +++ b/RU/02_Day/02_day_data_types.md @@ -0,0 +1,973 @@ +
+

30 Days Of JavaScript

+ + + + + Twitter Follow + + +Автор: +Asabeneh Yetayeh
+ Январь, 2020 +
+ +
+ +[<< День 1](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/README.md) | [День 3 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/03_Day/03_booleans_operators_date.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_2.png) + +- [📔 Day 2](#%f0%9f%93%94-day-2) + - [Типы данных](#%d0%a2%d0%b8%d0%bf%d1%8b-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85) + - [Примитивные типы данных](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b8%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d0%b5-%d1%82%d0%b8%d0%bf%d1%8b-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85) + - [Пример](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80) + - [Непримитивные типы данных](#%d0%9d%d0%b5%d0%bf%d1%80%d0%b8%d0%bc%d0%b8%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d0%b5-%d1%82%d0%b8%d0%bf%d1%8b-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85) + - [Числа](#%d0%a7%d0%b8%d1%81%d0%bb%d0%b0) + - [Объявление числовых типов данных](#%d0%9e%d0%b1%d1%8a%d1%8f%d0%b2%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d1%87%d0%b8%d1%81%d0%bb%d0%be%d0%b2%d1%8b%d1%85-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85) + - [Математический объект](#%d0%9c%d0%b0%d1%82%d0%b5%d0%bc%d0%b0%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b9-%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82) + - [Генератор случайных чисел](#%d0%93%d0%b5%d0%bd%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80-%d1%81%d0%bb%d1%83%d1%87%d0%b0%d0%b9%d0%bd%d1%8b%d1%85-%d1%87%d0%b8%d1%81%d0%b5%d0%bb) + - [Строки](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%b8) + - [Конкатенация строк](#%d0%9a%d0%be%d0%bd%d0%ba%d0%b0%d1%82%d0%b5%d0%bd%d0%b0%d1%86%d0%b8%d1%8f-%d1%81%d1%82%d1%80%d0%be%d0%ba) + - [Конкатенация с использованием оператора сложения](#%d0%9a%d0%be%d0%bd%d0%ba%d0%b0%d1%82%d0%b5%d0%bd%d0%b0%d1%86%d0%b8%d1%8f-%d1%81-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5%d0%bc-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d0%b0-%d1%81%d0%bb%d0%be%d0%b6%d0%b5%d0%bd%d0%b8%d1%8f) + - [Длинные буквенные строки](#%d0%94%d0%bb%d0%b8%d0%bd%d0%bd%d1%8b%d0%b5-%d0%b1%d1%83%d0%ba%d0%b2%d0%b5%d0%bd%d0%bd%d1%8b%d0%b5-%d1%81%d1%82%d1%80%d0%be%d0%ba%d0%b8) + - [Перенос последовательности в строке](#%d0%9f%d0%b5%d1%80%d0%b5%d0%bd%d0%be%d1%81-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%be%d0%b2%d0%b0%d1%82%d0%b5%d0%bb%d1%8c%d0%bd%d0%be%d1%81%d1%82%d0%b8-%d0%b2-%d1%81%d1%82%d1%80%d0%be%d0%ba%d0%b5) + - [Шаблонные литералы (Шаблонные строки)](#%d0%a8%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d0%bd%d1%8b%d0%b5-%d0%bb%d0%b8%d1%82%d0%b5%d1%80%d0%b0%d0%bb%d1%8b-%d0%a8%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d0%bd%d1%8b%d0%b5-%d1%81%d1%82%d1%80%d0%be%d0%ba%d0%b8) + - [Строковые Методы](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%be%d0%b2%d1%8b%d0%b5-%d0%9c%d0%b5%d1%82%d0%be%d0%b4%d1%8b) + - [Проверка типов данных и приведение](#%d0%9f%d1%80%d0%be%d0%b2%d0%b5%d1%80%d0%ba%d0%b0-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85-%d0%b8-%d0%bf%d1%80%d0%b8%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5) + - [Проверка типов данных](#%d0%9f%d1%80%d0%be%d0%b2%d0%b5%d1%80%d0%ba%d0%b0-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85) + - [Изменение типа данных (Casting)](#%d0%98%d0%b7%d0%bc%d0%b5%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d1%82%d0%b8%d0%bf%d0%b0-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85-casting) + - [Строка в число](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%b0-%d0%b2-%d1%87%d0%b8%d1%81%d0%bb%d0%be) + - [Строка в число с плавающей запятой](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%b0-%d0%b2-%d1%87%d0%b8%d1%81%d0%bb%d0%be-%d1%81-%d0%bf%d0%bb%d0%b0%d0%b2%d0%b0%d1%8e%d1%89%d0%b5%d0%b9-%d0%b7%d0%b0%d0%bf%d1%8f%d1%82%d0%be%d0%b9) + - [Числа с плавающей точкой в целые числа.](#%d0%a7%d0%b8%d1%81%d0%bb%d0%b0-%d1%81-%d0%bf%d0%bb%d0%b0%d0%b2%d0%b0%d1%8e%d1%89%d0%b5%d0%b9-%d1%82%d0%be%d1%87%d0%ba%d0%be%d0%b9-%d0%b2-%d1%86%d0%b5%d0%bb%d1%8b%d0%b5-%d1%87%d0%b8%d1%81%d0%bb%d0%b0) + - [💻 День 2: Упражнения](#%f0%9f%92%bb-%d0%94%d0%b5%d0%bd%d1%8c-2-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f) + - [Упражнение: Уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1) + - [Упражнение: уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2) + - [Упражнения: уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3) + +# 📔 Day 2 + +## Типы данных + +В предыдущем разделе мы немного упомянули о типах данных. Данные или значения имеют типы данных. Типы данных описывают характеристики данных. Типы данных можно разделить на два вида + +1. Примитивные типы данных +2. Непримитивные типы данных (ссылки на объекты) + +### Примитивные типы данных + +Примитивные типы данных в JavaScript включают в себя: + +1. Числа (Numbers) - Целые числа, числа с плавающей точкой +2. Строки (Strings) - Любые данные в одинарных или двойных кавычках +3. Булевые (boolean) - true или false значения +4. Null - пустое значение или нет значения +5. Undefined - объявленная переменная без значения + +Непримитивные типы данных в JavaScript включают в себя: + +1. Объекты +2. Функции +3. Массивы + +Теперь давайте посмотрим, что именно означают примитивные и не примитивные типы данных. + +_Примитивные_ типы данных являются неизменяемыми типами данных. Как только примитивный тип данных создан, мы не можем его изменить. + +#### Пример + +```js +let word = "JavaScript"; +``` + +Если мы попытаемся изменить строку, хранящуюся в переменной _word_, JavaScript вызовет ошибку. Любой тип данных с одинарными, двойными или обратными кавычками является строковым типом данных. + +```js +word[0] = "Y"; +``` + +Это выражение не изменяет строку, хранящуюся в переменной _word_. Таким образом, мы можем сказать, что строки не являются изменяемыми или неизменяемыми. +Примитивные типы данных сравниваются по их значениям. Давайте сравним различные значения данных. Смотрите пример ниже: + +```js +let numOne = 3; +let numTwo = 3; + +console.log(numOne == numTwo); // true + +let js = "JavaScript"; +let py = "Python"; + +console.log(js == py); //false + +let lightOn = true; +let lightOff = false; + +console.log(lightOn == lightOff); // false +``` + +### Непримитивные типы данных + +_Непримитивные_ типы данных являются изменяемыми. Мы можем изменить значение непримитивных типов данных после их создания. +Давайте посмотрим, создав массив. Массив - это список значений данных в квадратных скобках. Массивы могут содержать одинаковые или разные типы данных. На значения массива ссылается их индекс. В массиве JavaScript индекс начинается с нуля. Т.е. первый элемент массива находится с нулевым индексом, второй элемент с индексом один и третий элемент с индексом два и т.д. + +```js +let nums = [1, 2, 3]; +nums[0] = 10; + +console.log(nums); // [10, 2, 3] +``` + +Как вы можете видеть, массив, в котором непримитивный тип данных является изменяемым. Непримитивные типы данных нельзя сравнивать по значению. Даже если два непримитивных типа данных имеют одинаковые свойства и значения, они не являются строго равными. + +```js +let nums = [1, 2, 3]; +let numbers = [1, 2, 3]; + +console.log(nums == numbers); // false + +let userOne = { + name: "Asabeneh", + role: "teaching", + country: "Finland" +}; + +let userTwo = { + name: "Asabeneh", + role: "teaching", + country: "Finland" +}; + +console.log(userOne == userTwo); // false +``` + +Основное правило, мы не сравниваем непримитивные типы данных. Не сравнивайте массив, функцию или объект. +Непримитивные значения называются ссылочными типами, поскольку они сравниваются по значению, а не по значению. Два объекта строго равны, если они ссылаются на один и тот же базовый объект. + +```js +let nums = [1, 2, 3]; +let numbers = nums; + +console.log(nums == numbers); // true + +let userOne = { + name: "Asabeneh", + role: "teaching", + country: "Finland" +}; + +let userTwo = userOne; + +console.log(userOne == userTwo); // true +``` + +Если вам трудно понять разницу между примитивными типами данных и не примитивными типами данных, вы не единственный. +Успокойтесь и просто перейдите к следующему разделу и попробуйте вернуться через некоторое время. Теперь давайте начнем типы данных по типу номера. + +## Числа + +Числа представляют собой целые и десятичные значения, которые могут выполнять все арифметические операции. +Давайте посмотрим некоторые примеры чисел. + +### Объявление числовых типов данных + +```js +let age = 35; +const gravity = 9.81; //мы используем const для неизменных значений, гравитационная постоянная в m/s2 +let mass = 72; // масса в килограммах +const PI = 3.14; // ПИ геометрическая постоянная + +//Больше примеров +const boilingPoint = 100; // температура в oC, температура кипения воды которой постоянна +const bodyTemp = 37; // oC средняя температура тела человека, которая является постоянной + +console.log(age, gravity, mass, PI, boilingPoint, bodyTemp); +``` + +### Математический объект + +В JavaScript Math Object предоставляет множество методов для работы с числами. + +```js +const PI = Math.PI; + +console.log(PI); // 3.141592653589793 + +// Округление до ближайшего числа +// если выше .5 вверх, если меньше 0.5 вниз + +console.log(Math.round(PI)); // 3, чтобы округлить значения до ближайшего числа + +console.log(Math.round(9.81)); // 10 + +console.log(Math.floor(PI)); // 3 округление вниз + +console.log(Math.ceil(PI)); // 4 округление вверх + +console.log(Math.min(-5, 3, 20, 4, 5, 10)); // -5, возвращает минимальное значение + +console.log(Math.max(-5, 3, 20, 4, 5, 10)); // 20, возвращает максимальное значение + +const randNum = Math.random(); // создает случайное число от 0 до 0,999999 +console.log(randNum); + +// Давайте создадим случайное число от 0 до 10 + +const num = Math.floor(Math.random() * 11); // создает случайное число от 0 до 10 +console.log(num); + +// Абсолютное значение +console.log(Math.abs(-10)); //10 + +// Квадратный корень +console.log(Math.sqrt(100)); // 10 + +console.log(Math.sqrt(2)); //1.4142135623730951 + +// Мощность +console.log(Math.pow(3, 2)); // 9 + +console.log(Math.E); // 2.718 + +// Логарифм +// Возвращает натуральный логарифм основания E из x, Math.log(x) +console.log(Math.log(2)); // 0.6931471805599453 +console.log(Math.log(10)); // 2.302585092994046 + +// Тригонометрия +Math.sin(0); +Math.sin(60); + +Math.cos(0); +Math.cos(60); +``` + +#### Генератор случайных чисел + +JavaScript Math Object имеет генератор номеров метода `random()`, который генерирует числа от 0 до 0.999999999... + +```js +let randomNum = Math.random(); // генерирует от 0 до 0,999 +``` + +Теперь давайте посмотрим, как мы можем использовать метод `random()` для генерации случайного числа от 0 до 10 включительно. + +```js +let randomNum = Math.random(); // генерирует от 0 до 0,999 +let numBtnZeroAndTen = randomNum * 11; + +console.log(numBtnZeroAndTen); // это дает: мин 0 и макс 10.99 + +let randomNumRoundToFloor = Math.floor(numBtnZeroAndTen); +console.log(randomNumRoundToFloor); // это дает от 0 до 10 +``` + +## Строки + +Строки - это тексты, которые заключены в **_одинарную_** или **_двойную_** кавычку. Чтобы объявить строку, нам нужно имя переменной, оператор присваивания, значение в одинарных кавычках, двойные кавычки или обратные кавычки. + +Давайте посмотрим несколько примеров строки: + +```js +let space = " "; // Пусто - пробел +let firstName = "Asabeneh"; +let lastName = "Yetayeh"; +let country = "Finland"; +let city = "Helsinki"; +let language = "JavaScript"; +let job = "teacher"; +``` + +### Конкатенация строк + +Соединение двух или более строк вместе называется конкатенацией. + +```js +// Объявление разных переменных разных типов данных +let space = " "; +let firstName = "Asabeneh"; +let lastName = "Yetayeh"; +let country = "Finland"; +let city = "Helsinki"; +let language = "JavaScript"; +let job = "teacher"; +``` + +```js +let fullName = firstName + space + lastName; // конкатенация, объединение двух строк. +console.log(fullName); +``` + +```sh +Asabeneh Yetayeh +``` + +Мы можем объединять строки разными способами. + +#### Конкатенация с использованием оператора сложения + +Конкатенация с использованием оператора сложения - старый способ. Этот способ объединения утомителен и подвержен ошибкам. Полезно знать, как объединить таким способом, но я настоятельно рекомендую использовать второй способ. + +```js +// Объявление разных переменных разных типов данных +let space = " "; +let firstName = "Asabeneh"; +let lastName = "Yetayeh"; +let country = "Finland"; +let city = "Helsinki"; +let language = "JavaScript"; +let job = "teacher"; +let age = 250; +let fullName = firstName + space + lastName; + +let personInfoOne = fullName + ". I am " + age + ". I live in " + country; // ES5 + +console.log(personInfoOne); +``` + +```sh +Asabeneh Yetayeh. I am 250. I live in Finland +``` + +#### Длинные буквенные строки + +Строка может быть отдельным символом, абзацем или страницей. Если длина строки слишком велика, она не помещается в одну строку. Мы можем использовать символ обратной косой черты (\\) в конце каждой строки, чтобы указать, что строка будет продолжена на следующей строке. + +**Пример:** + +```js +const paragraph = + "My name is Asabeneh Yetayeh. I live in Finland, Helsinki.\ +I am a teacher and I love teaching. I teach HTML, CSS, JavaScript, React, Redux, \ +Node.js, Python, Data Analysis and D3.js for anyone who is interested to learn. \ +In the end of 2019, I was thinking to expand my teaching and to reach \ +to global audience and I started a Python challenge from November 20 - December 19.\ +It was one of the most rewarding and inspiring experience.\ +Now, we are in 2020. I am enjoying preparing the 30DaysOfJavaScript challenge and \ +I hope you are enjoying too."; +console.log(paragraph); +``` + +#### Перенос последовательности в строке + +В JavaScript и других языках программирования, после некоторых символов есть перенос - последовательности. Давайте посмотрим на наиболее распространенные escape-символы: + +- `\n` - Новая строка +- `\t` - Таб означает (8 пробелов) +- `\\` - Обратная косая черта +- `\'` - Одинарные кавычки (') +- `\"` - Двойные кавычки (") + +```js +console.log( + "I hope every one is enjoying the 30 Days Of JavaScript challenge.\nDo you ?" +); // line break +console.log("Days\tTopics\tExercises"); +console.log("Day 1\t3\t5"); +console.log("Day 2\t3\t5"); +console.log("Day 3\t3\t5"); +console.log("Day 4\t3\t5"); +console.log("This is a back slash symbol (\\)"); // To write a back slash +console.log('In every programming language it starts with "Hello, World!"'); +console.log("In every programming language it starts with 'Hello, World!'"); +console.log("The saying 'Seeing is Believing' is't correct in 2020"); +``` + +#### Шаблонные литералы (Шаблонные строки) + +Чтобы создать строку шаблона, мы используем два обратных ключа. Мы можем вставить данные как выражение внутри строки шаблона. Чтобы ввести данные, мы заключаем выражение в фигурную скобку (`{}`), за которой следует знак `$`. Смотрите синтаксис ниже. + +```js +// Синтаксис +`String literal text ${expression}`; +``` + +**Пример: 1** + +```js +console.log(`The sum of 2 and 3 is 5`); // статическая запись данных +let a = 2; +let b = 3; +console.log(`The sum of ${a} and ${b} is ${a + b}`); // ввод данных динамически +``` + +**Example:2** + +```js +let firstName = "Asabeneh"; +let lastName = "Yetayeh"; +let country = "Finland"; +let city = "Helsinki"; +let language = "JavaScript"; +let job = "teacher"; +let age = 250; +let fullName = firstName + " " + lastName; + +let personInfoTwo = `I am ${fullName}. I am ${age}. I live in ${country}.`; //ES6 - Метод строковой интерполяции +let personInfoThree = `I am ${fullName}. I live in ${city}, ${country}. I am a ${job}. I teach ${language}.`; +console.log(personInfoTwo); +console.log(personInfoThree); +``` + +```sh +I am Asabeneh Yetayeh. I am 250. I live in Finland. +I am Asabeneh Yetayeh. I live in Helsinki, Finland. I am a teacher. I teach JavaScript. +``` + +Используя шаблон строки или метод интерполяции строки, мы можем добавить выражение, которое может быть значением или некоторыми операциями (сравнение, арифметические операции, троичные операции). + +```js +let a = 2; +let b = 3; +console.log(`${a} is greater than ${b}: ${a > b}`); +``` + +```sh +2 is greater than 3: false +``` + +### Строковые Методы + +Все в JavaScript это объект. Строка - это примитивный тип данных, который означает, что мы не можем изменить его после создания. У строкового объекта есть много строковых методов. Существуют разные строковые методы, которые могут помочь нам работать со строками. + +1. _length_: Метод строки _length_ возвращает количество символов в строке, включая пустое пространство. + **Пример:** + + ```js + let js = "JavaScript"; + console.log(js.length); // 10 + let firstName = "Asabeneh"; + console.log(firstName.length); // 8 + ``` + +2. _Доступ к символам в строке_: мы можем получить доступ к каждому символу в строке, используя его индекс. В программировании отсчет начинается с 0. Первый индекс строки равен нулю, а последний индекс равен одному минус длина строки. + + ![Accessing sting by index](../images/string_indexes.png) + + Давайте получим доступ к различным символам в строке «JavaScript». + + ```js + let string = "JavaScript"; + let firstLetter = string[0]; + + console.log(firstLetter); // J + + let secondLetter = string[1]; // a + let thirdLetter = string[2]; + let lastLetter = string[9]; + + console.log(lastLetter); // t + + let lastIndex = string.length - 1; + + console.log(lastIndex); // 9 + console.log(string[lastIndex]); // t + ``` + +3. `toUpperCase()`: этот метод изменяет строку на заглавные буквы. + + ```js + let string = "JavaScript"; + + console.log(string.toUpperCase()); // JAVASCRIPT + + let firstName = "Asabeneh"; + + console.log(firstName.toUpperCase()); // ASABENEH + + let country = "Finland"; + + console.log(country.toUpperCase()); // FINLAND + ``` + +4. `toLowerCase()`: этот метод изменяет строку на заглавные буквы + + ```js + let string = "JavasCript"; + + console.log(string.toLowerCase()); // javascript + + let firstName = "Asabeneh"; + + console.log(firstName.toLowerCase()); // asabeneh + + let country = "Finland"; + + console.log(country.toLowerCase()); // finland + ``` + +5. `substr()`:Требуется два аргумента: начальный индекс и количество символов для нарезки. + + ```js + let string = "JavaScript"; + console.log(string.substr(4, 6)); // Script + + let country = "Finland"; + console.log(country.substr(3, 4)); // land + ``` + +6. `substring()`: Он принимает два аргумента: начальный индекс и индекс остановки, но он не включает индекс остановки. + + ```js + let string = "JavaScript"; + + console.log(string.substring(0, 4)); // Java + console.log(string.substring(4, 10)); // Script + console.log(string.substring(4)); // Script + + let country = "Finland"; + + console.log(country.substring(0, 3)); // Fin + console.log(country.substring(3, 7)); // land + console.log(country.substring(3)); // land + ``` + +7. `split()`: Метод `split()` разделяет строку в указанном месте. + + ```js + 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"; + + console.log(firstName.split()); // ["Asabeneh"] + console.log(firstName.split("")); // ["A", "s", "a", "b", "e", "n", "e", "h"] + + let countries = "Finland, Sweden, Norway, Denmark, and Iceland"; + + console.log(countries.split(",")); // ["Finland", " Sweden", " Norway", " Denmark", " and Iceland"] + console.log(countries.split(", ")); //  ["Finland", "Sweden", "Norway", "Denmark", "and Iceland"] + ``` + +8. `trim()`: Удаляет завершающий пробел в начале или конце строки. + + ```js + let string = " 30 Days Of JavaScript "; + + console.log(string); + console.log(string.trim(" ")); + + let firstName = " Asabeneh "; + + console.log(firstName); + console.log(firstName.trim()); + ``` + + ```sh + 30 Days Of JavasCript + 30 Days Of JavasCript + Asabeneh + Asabeneh + ``` + +9. `includes()`: принимает аргумент подстроки и проверяет, существует ли аргумент подстроки в строке. `includes()` возвращает логическое значение. Он проверяет, существует ли подстрока в строке, и возвращает true, если она существует, и false, если она не существует. + + ```js + let string = "30 Days Of JavaScript"; + + console.log(string.includes("Days")); // true + console.log(string.includes("days")); // false + console.log(string.includes("Script")); // true + console.log(string.includes("script")); // false + console.log(string.includes("java")); // false + console.log(string.includes("Java")); // true + + let country = "Finland"; + + console.log(country.includes("fin")); // false + console.log(country.includes("Fin")); // true + console.log(country.includes("land")); // true + console.log(country.includes("Land")); // false + ``` + +10. `replace()`: принимает к параметру старую подстроку и новую подстроку. + + ```js + string.replace(oldsubstring, newsubstring); + ``` + + ```js + let string = "30 Days Of JavaScript"; + console.log(string.replace("JavaScript", "Python")); // 30 Days Of Python + + let country = "Finland"; + console.log(country.replace("Fin", "Noman")); // Nomanland + ``` + +11. `charAt()`: принимает индекс и возвращает значение по этому индексу + + ```js + string.charAt(index); + ``` + + ```js + let string = "30 Days Of JavaScript"; + console.log(string.charAt(0)); // 3 + + let lastIndex = string.length - 1; + console.log(string.charAt(lastIndex)); // t + ``` + +12. `charCodeAt()`: Принимает индекс и возвращает код символа (номер ASCII) значения по этому индексу + + ```js + string.charCodeAt(index); + ``` + + ```js + let string = "30 Days Of JavaScript"; + console.log(string.charCodeAt(3)); // D ASCII number is 51 + + let lastIndex = string.length - 1; + console.log(string.charCodeAt(lastIndex)); // t ASCII is 116 + ``` + +13. `indexOf()`: Принимает подстроку, и если подстрока существует в строке, она возвращает первую позицию подстроки, если не существует, она возвращает -1 + + ```js + string.indexOf(substring); + ``` + + ```js + let string = "30 Days Of JavaScript"; + + console.log(string.indexOf("D")); // 3 + console.log(string.indexOf("Days")); // 3 + console.log(string.indexOf("days")); // -1 + console.log(string.indexOf("a")); // 4 + console.log(string.indexOf("JavaScript")); // 11 + console.log(string.indexOf("Script")); //15 + console.log(string.indexOf("script")); // -1 + ``` + +14. `lastIndexOf()`: Принимает подстроку, и если подстрока существует в строке, она возвращает последнюю позицию подстроки, если она не существует, она возвращает -1 + + ```js + //syntax + string.lastIndexOf(substring); + ``` + + ```js + let string = + "I love JavaScript. If you do not love JavaScript what else can you love."; + + console.log(string.lastIndexOf("love")); // 67 + console.log(string.lastIndexOf("you")); // 63 + console.log(string.lastIndexOf("JavaScript")); // 38 + ``` + +15. `concat()`: он принимает много подстрок и создает конкатенацию. + + ```js + string.concat(substring, substring, substring); + ``` + + ```js + let string = "30"; + console.log(string.concat("Days", "Of", "JavaScript")); // 30DaysOfJavaScript + + let country = "Fin"; + console.log(country.concat("land")); // Finland + ``` + +16. `startsWith`: он принимает подстроку в качестве аргумента и проверяет, начинается ли строка с указанной подстроки. Возвращает логическое значение (true или false). + + ```js + //syntax + string.startsWith(substring); + ``` + + ```js + let string = "Love is the best to in this world"; + + console.log(string.startsWith("Love")); // true + console.log(string.startsWith("love")); // false + console.log(string.startsWith("world")); // false + + let country = "Finland"; + + console.log(country.startsWith("Fin")); // true + console.log(country.startsWith("fin")); // false + console.log(country.startsWith("land")); // false + ``` + +17. `endsWith`: он принимает подстроку в качестве аргумента и проверяет, начинается ли строка с указанной подстроки. Возвращает логическое значение (true или false). + + ```js + string.endsWith(substring); + ``` + + ```js + let string = "Love is the best to in this world"; + + console.log(string.endsWith("world")); // true + console.log(string.endsWith("love")); // false + console.log(string.endsWith("in this world")); // true + + let country = "Finland"; + + console.log(country.endsWith("land")); // true + console.log(country.endsWith("fin")); // false + console.log(country.endsWith("Fin")); // false + ``` + +18. `search`: он принимает подстроку в качестве аргумента и возвращает индекс первого совпадения. + + ```js + string.search(substring); + ``` + + ```js + let string = + "I love JavaScript. If you do not love JavaScript what else can you love."; + console.log(string.search("love")); // 2 + ``` + +19. `match`: он принимает подстроку или шаблон регулярного выражения в качестве аргумента и возвращает массив, если есть совпадение, если нет, то возвращает ноль. Давайте посмотрим, как выглядит шаблон регулярного выражения. Он начинается с / знака и заканчивается / знаком. + + ```js + let string = "love"; + let patternOne = /love/; //без какого-либо флага + let patternTwo = /love/gi; // g-означает поиск по всему тексту, i - без учета регистра + ``` + + Match syntax + + ```js + // syntax + string.match(substring); + ``` + + ```js + let string = + "I love JavaScript. If you do not love JavaScript what else can you love."; + console.log(string.match("love")); + ``` + + ```sh + ["love", index: 2, input: "I love JavaScript. If you do not love JavaScript what else can you love.", groups: undefined] + ``` + + ```js + let pattern = /love/gi; + console.log(string.match(pattern)); // ["love", "love", "love"] + ``` + + Давайте извлечем числа из текста, используя регулярное выражение. Это не раздел регулярных выражений, не паникуйте, мы рассмотрим регулярные выражения в другом разделе. + + ```js + let txt = + "In 2019, I run 30 Days of Python. Now, in 2020 I super exited to start this challenge"; + let regEx = /\d+/; + + // d с перенос-символом означает, что d не является нормальным d, вместо этого действует цифра + // + означает одно или несколько цифр, + // если после этого есть g, значит глобальный, ищите везде. + + console.log(txt.match(regEx)); // ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"] + console.log(txt.match(/\d+/g)); // ["2019", "30", "2020"] + ``` + +20. `repeat()`: он принимает числовой аргумент и возвращает повторную версию строки. + + ```js + string.repeat(n); + ``` + + ```js + let string = "love"; + console.log(string.repeat(10)); // lovelovelovelovelovelovelovelovelovelove + ``` + +## Проверка типов данных и приведение + +### Проверка типов данных + +- Проверка типов данных: чтобы проверить тип данных определенного типа данных, мы используем `typeof` и также меняем один тип данных на другой. + +**Пример:** + +```js +// Различные типы данных JavaScript +// Давайте объявим разные типы данных + +let firstName = "Asabeneh"; // string +let lastName = "Yetayeh"; // string +let country = "Finland"; // string +let city = "Helsinki"; // string +let age = 250; // number, это не мой настоящий возраст, не переживай +let job; // undefined, потому что значение не было присвоено + +console.log(typeof "Asabeneh"); // string +console.log(typeof firstName); // string +console.log(typeof 10); // number +console.log(typeof 3.14); // number +console.log(typeof true); // boolean +console.log(typeof false); // boolean +console.log(typeof NaN); // number +console.log(typeof job); // undefined +console.log(typeof undefined); // undefined +console.log(typeof null); // object +``` + +### Изменение типа данных (Casting) + +- Приведение: преобразование одного типа данных в другой тип данных. Мы используем _parseInt()_, _parseFloat()_, _Number()_, _+sign_, _str()_. Когда мы выполняем арифметические операции, строковые числа должны быть сначала преобразованы в целое число или число с плавающей запятой, если нет, это возвращает ошибку. + +#### Строка в число + +Мы можем преобразовать номер строки в число. Любое число внутри кавычки является строковым числом. Пример номера строки: «10», «5» и т. Д. +Мы можем преобразовать строку в число, используя следующие методы: + +- parseInt() +- Number() +- Plus sign(+) + +```js +let num = "10"; +let numInt = parseInt(num); +console.log(numInt); // 10 +``` + +```js +let num = "10"; +let numInt = Number(num); + +console.log(numInt); // 10 +``` + +```js +let num = "10"; +let numInt = +num; + +console.log(numInt); // 10 +``` + +#### Строка в число с плавающей запятой + +Мы можем преобразовать число с плавающей запятой в число с плавающей запятой. Любое число с плавающей запятой внутри кавычки является строковым числом с плавающей запятой. Пример числа с плавающей запятой: «9,81», «3,14», «1,44» и т. Д. +Мы можем преобразовать строку с плавающей точкой в число, используя следующие методы: + +- parseFloat() +- Number() +- Plus sign(+) + +```js +let num = "9.81"; +let numFloat = parseFloat(num); + +console.log(numFloat); // 9.81 +``` + +```js +let num = "9.81"; +let numFloat = Number(num); + +console.log(numFloat); // 9.81 +``` + +```js +let num = "9.81"; +let numFloat = +num; + +console.log(numInt); // 9.81 +``` + +#### Числа с плавающей точкой в целые числа. + +Мы можем преобразовать числа с плавающей точкой в целые числа. +Мы используем следующий метод для преобразования float в int: + +- parseInt() + +```js +let num = 9.81; +let numInt = parseInt(num); + +console.log(numInt); // 9 +``` + +🌕 Ты обалденный. Вы только что завершили 2-й день испытаний, и вы в двух шагах от своего пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц. + +## 💻 День 2: Упражнения + +### Упражнение: Уровень 1 + +1. Объявите вызов имени переменной и присвойте ему начальное значение **«30 дней JavaScript»**. +2. Напечатайте строку в консоли браузера, используя `console.log()` +3. Напечатайте **length** строки в консоли браузера, используя `console.log()` +4. Измените всю строку на заглавные буквы, используя метод `toUpperCase()` +5. Измените всю строку на строчные буквы, используя метод `toLowerCase()` +6. Вырежьте (нарежьте) первое слово строки, используя метод `substr()` или `substring()` +7. Вырежьте фразу _Days Of JavaScript_ из _30 Days Of JavaScript_. +8. Проверьте, содержит ли строка слово **Script**, используя метод `includes()` +9. Разбейте **строку** на **массив**, используя метод `split()` +10. Разбить строку 30 Days Of JavaScript в пространстве с помощью метода `split()` +11. «Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon» **разбивают** строку на запятую и заменяют ее на массив. +12. Измените 30 Days Of JavaScript на 30 Days Of Python, используя метод `replace()`. +13. Что такое символ в индексе 15 в строке «30 Days Of JavaScript», используйте метод `charAt()`. +14. Что такое код символа J в строке «30 Days Of JavaScript» с использованием `charCodeAt()` +15. Используйте `indexOf`, чтобы определить позицию первого вхождения за 30 Days Of JavaScript +16. Используйте `lastIndexOf`, чтобы определить позицию последнего вхождения в 30 Days Of JavaScript. +17. Используйте `indexOf`, чтобы найти позицию первого вхождения слова **потому что** в следующем предложении: **«Вы не можете закончить предложение, потому что, потому что, потому что это соединение»** +18. Используйте `lastIndexOf`, чтобы найти позицию последнего вхождения слова **потому что** в следующем предложении: **«Вы не можете закончить предложение, потому что, потому что потому что это соединение»** +19. Используйте `search`, чтобы найти позицию первого вхождения слова **потому что** в следующем предложении: **«Вы не можете закончить предложение, потому что, потому что потому что это соединение»** +20. Используйте `trim()`, чтобы удалить, если в начале и конце строки есть конечные пробелы. Например, «30 Days Of JavaScript». +21. Используйте метод `launchWith()` со строкой _30 Days Of JavaScript_, чтобы сделать результат верным +22. Используйте метод `setsWith()` со строкой _30 Days Of JavaScript_, чтобы сделать результат верным +23. Используйте метод `match()`, чтобы найти все за 30 Days Of JavaScript +24. Используйте `concat()` и объедините «30 Days» и «JavaScript» в одну строку «30 Days Of JavaScript» +25. Используйте метод `repeat()`, чтобы напечатать 30 Days Of JavaScript 2 раза + +### Упражнение: уровень 2 + +1. Используя `console.log()`, выведите следующее утверждение. + + ```sh + The quote 'There is no exercise better for the heart than reaching down and lifting people up.' by John Holmes teaches us to help one another. + ``` + +2. Используя `console.log()` распечатайте следующую цитату Матери Терезы. + + ```sh + "Love is not patronizing and charity isn't about pity, it is about love. Charity and love are the same -- with charity you give love, so don't just give money but reach out your hand instead." + ``` + +3. Проверьте, точно ли `typeof` '10' равен 10. Если нет, сделайте его точно равным. +4. Убедитесь, что `parseFloat('9.8')` равен 10, если не равен точно 10. +5. Проверьте, найдено ли 'on' как в Python, так и в жаргоне +6. Я надеюсь, что этот курс не полон жаргона. Проверьте, находится ли _jargon_ в предложении. +7. Сгенерируйте случайное число от 0 до 100 включительно. +8. Генерация случайного числа от 50 до 100 включительно. +9. Сгенерируйте случайное число от 0 до 255 включительно. +10. Получите доступ к символам строки «JavaScript», используя случайное число. +11. Используйте `console.log()` и управляющие символы для печати следующего шаблона. + + ```js + 1 1 1 1 1 + 2 1 2 4 8 + 3 1 3 9 27 + 4 1 4 16 64 + 5 1 5 25 125 + ``` + +12. Используйте `substr`, чтобы вырезать фразу **потому что потому что** в следующем предложении: **'Вы не можете закончить предложение, потому что потому что потому что это соединение'** + +### Упражнения: уровень 3 + +1. «Любовь - лучшая вещь в этом мире. Некоторые нашли свою любовь, а некоторые все еще ищут свою любовь. Подсчитайте количество слов любви в этом предложении. +2. Используйте `match()`, чтобы сосчитать число все потому, что в следующем предложении: **«Вы не можете закончить предложение, потому что, потому что, потому что это соединение»** +3. Очистите следующий текст и найдите наиболее часто встречающееся слова (подсказка, используйте замену и регулярный экспресс). + + ```js + const sentence = + "%I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching"; + ``` + +4. Рассчитайте общий годовой доход человека, извлекая цифры из следующего текста. «Он зарабатывает 5000 евро с зарплаты в месяц, годовой бонус в 10000 евро, онлайн-курсы в 15000 евро в месяц». + +🎉 ПОЗДРАВЛЯЕМ! 🎉 + +[<< День 1](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/readMe.md) | [День 3 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/03_Day/03_booleans_operators_date.md) diff --git a/RU/02_Day/day_1_2.png b/RU/02_Day/day_1_2.png new file mode 100644 index 0000000..0f6eefb Binary files /dev/null and b/RU/02_Day/day_1_2.png differ diff --git a/RU/03_Day/03_booleans_operators_date.md b/RU/03_Day/03_booleans_operators_date.md new file mode 100644 index 0000000..06b649c --- /dev/null +++ b/RU/03_Day/03_booleans_operators_date.md @@ -0,0 +1,649 @@ +
+

30 Days Of JavaScript

+ + + + + Twitter Follow + + +Автор: +Asabeneh Yetayeh
+ Январь, 2020 +
+ +
+ +[<< День 2](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/02_Day/02_day_data_types.md) | [Day 4 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/04_Day/04_day_conditionals.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_3.png) + +- [📔 День 3](#%f0%9f%93%94-%d0%94%d0%b5%d0%bd%d1%8c-3) + - [Булевый тип (boolean)](#%d0%91%d1%83%d0%bb%d0%b5%d0%b2%d1%8b%d0%b9-%d1%82%d0%b8%d0%bf-boolean) + - [Пример: логические значения](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80-%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d1%8f) + - [Истинные значения](#%d0%98%d1%81%d1%82%d0%b8%d0%bd%d0%bd%d1%8b%d0%b5-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d1%8f) + - [Ложные значения](#%d0%9b%d0%be%d0%b6%d0%bd%d1%8b%d0%b5-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d1%8f) + - [Undefined](#undefined) + - [Null](#null) + - [Операторы](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b) + - [Операторы присваивания](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b-%d0%bf%d1%80%d0%b8%d1%81%d0%b2%d0%b0%d0%b8%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f) + - [Арифметические Операторы](#%d0%90%d1%80%d0%b8%d1%84%d0%bc%d0%b5%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b) + - [Операторы сравнения](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b-%d1%81%d1%80%d0%b0%d0%b2%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f) + - [Пример: операторы сравнения](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b-%d1%81%d1%80%d0%b0%d0%b2%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f) + - [Логические Операторы](#%d0%9b%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b) + - [Оператор инкремента](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80-%d0%b8%d0%bd%d0%ba%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0) + - [Оператор декремента](#%d0%9e%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80-%d0%b4%d0%b5%d0%ba%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0) + - [Тернарный операторы](#%d0%a2%d0%b5%d1%80%d0%bd%d0%b0%d1%80%d0%bd%d1%8b%d0%b9-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b) + - [Приоритет оператора](#%d0%9f%d1%80%d0%b8%d0%be%d1%80%d0%b8%d1%82%d0%b5%d1%82-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d0%b0) + - [Методы окна](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4%d1%8b-%d0%be%d0%ba%d0%bd%d0%b0) + - [Метод alert()](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4-alert) + - [Метод prompt()](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4-prompt) + - [Метод confirm()](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4-confirm) + - [Объект Date](#%d0%9e%d0%b1%d1%8a%d0%b5%d0%ba%d1%82-date) + - [Создание объекта времени](#%d0%a1%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82%d0%b0-%d0%b2%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%b8) + - [Получение года](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b3%d0%be%d0%b4%d0%b0) + - [Получение месяца](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%bc%d0%b5%d1%81%d1%8f%d1%86%d0%b0) + - [Получение даты](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b4%d0%b0%d1%82%d1%8b) + - [Получение дня](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b4%d0%bd%d1%8f) + - [Получение часов](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d1%87%d0%b0%d1%81%d0%be%d0%b2) + - [Получение минут](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%bc%d0%b8%d0%bd%d1%83%d1%82) + - [Получение секунд](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d1%81%d0%b5%d0%ba%d1%83%d0%bd%d0%b4) + - [Получение времени](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b2%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%b8) + - [💻 День 3: Упражнения](#%f0%9f%92%bb-%d0%94%d0%b5%d0%bd%d1%8c-3-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f) + - [Упражнения: Уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1) + - [Упражнения: уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2) + - [Упражнения: уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3) + +# 📔 День 3 + +## Булевый тип (boolean) + +Логический тип данных представляет одно из двух значений: _true_ или _false_. Логическое значение может быть истинным или ложным. Использование этих типов данных будет понятно при запуске оператора сравнения. Любые сравнения возвращают логическое значение, которое является истинным или ложным. + +### Пример: логические значения + +```js +let isLightOn = true; +let isRaining = false; +let isHungry = false; +let isMarried = true; +let truValue = 4 > 3; // true +let falseValue = 4 < 3; // false +``` + +Мы согласились с тем, что логические значения являются истинными или ложными. + +### Истинные значения + +- Все числа (положительные и отрицательные) являются правдивыми, кроме нуля +- Все строки правдивы +- boolean истинное + +### Ложные значения + +- 0 +- 0n +- null +- undefined +- NaN +- the boolean false +- '', "", ``, пустая строка + +Нужно хорощо помнить эти истинные и ложные значения. В следующем разделе мы будем использовать их с условиями для принятия решения. + +## Undefined + +Если мы объявим переменную и не назначим значение, оно будет неопределенным. В дополнение к этому, если функция не возвращает значение, оно будет неопределенным. + +```js +let firstName; +console.log(firstName); //не определено, потому что оно еще не присвоено значению +``` + +## Null + +```js +let empty = null; +console.log(empty); // -> null , не имеет значения +``` + +## Операторы + +### Операторы присваивания + +Знак равенства в JavaScript - это оператор присваивания. Используется для присвоения переменной. + +```js +let firstName = "Asabeneh"; +let country = "Finland"; +``` + +Операторы присваивания + +![Assignment operators](../images/assignment_operators.png) + +### Арифметические Операторы + +Арифметические операторы являются математическими операторами. + +- Сложение (+): `a + b` +- Вычитание (-): `a - b` +- Умножение (_): `a _ b` +- Деление (/): `a / b` +- Остаток от деления % (%): `a % b` +- Возведение в степень (**): `a ** b` + +```js +let numOne = 4; +let numTwo = 3; +let sum = numOne + numTwo; +let diff = numOne - numTwo; +let mult = numOne * numTwo; +let div = numOne / numTwo; +let remainder = numOne % numTwo; +let powerOf = numOne ** numTwo; + +console.log(sum, diff, mult, div, remainder, powerOf); // 7,1,12,1.33,1, 64 +``` + +```js +let PI = 3.14; +let radius = 100; // длина в метрах + +const gravity = 9.81; // в m/s2 +let mass = 72; // в килограммах +const boilingPoint = 100; // температура в °С, температура кипения воды +const bodyTemp = 37; // температура тела в °С + +//Рассчитаем площадь круга +const areaOfCircle = PI * radius * radius; +console.log(areaOfCircle); // 314 m + +// Давайте посчитаем вес объекта +const weight = mass * gravity; +console.log(weight); // 706.32 N (Newton) + +//Конкатенация строк с числами с использованием строковой интерполяции +/* +Температура кипения воды составляет 100 °С. +Температура тела человека составляет 37 °С. +Гравитация земли составляет 9,81 м/с2. + */ +console.log( + `The boiling point of water is ${boilingPoint} oC.\nHuman body temperature is ${bodyTemp} oC.\nThe gravity of earth is ${gravity} m / s2.` +); +``` + +### Операторы сравнения + +В программировании мы сравниваем значения, мы используем операторы сравнения для сравнения двух значений. Мы проверяем, является ли значение больше или меньше или равно другому значению. + +![Comparison Operators](../images/comparison_operators.png) + +#### Пример: операторы сравнения + +```js +console.log(3 > 2); // true, потому что 3 больше 2 +console.log(3 >= 2); // true, потому что 3 больше 2 +console.log(3 < 2); // false, потому что 3 больше 2 +console.log(2 < 3); // true, потому что 2 меньше 3 +console.log(2 <= 3); // true, потому что 2 меньше 3 +console.log(3 == 2); // false, потому что 3 не равно 2 +console.log(3 != 2); // true, потому что 3 не равно 2 +console.log(3 == "3"); // true, сравнить только значение +console.log(3 === "3"); // false, сравнить значение и тип данных +console.log(3 !== "3"); // true, сравнить значение и тип данных +console.log(3 !== "3"); // true, сравнить значение и тип данных +console.log(3 != 3); // false, сравнить только значение +console.log(3 !== 3); // false, сравнить значение и тип данных +console.log(0 == false); // true, эквивалент +console.log(0 == ""); // true, эквивалент +console.log(0 == " "); // true, эквивалент +console.log(0 === ""); // false, не совсем то же самое +console.log(0 === false); // false, не совсем то же самое +console.log(1 == true); // true, эквивалент +console.log(1 === true); // false, не совсем то же самое +console.log(undefined == null); // true +console.log(undefined === null); // false +console.log(NaN == NaN); // false, не равный +console.log(NaN === NaN); // false +console.log(typeof NaN); // число + +console.log("mango".length == "avocado".length); // false +console.log("mango".length != "avocado".length); // true +console.log("mango".length < "avocado".length); // true +console.log("milk".length != "meat".length); // false +console.log("milk".length == "meat".length); // true +console.log("tomato".length == "potato".length); // true +console.log("python".length > "dragon".length); // false +``` + +Попытайтесь понять приведенные выше сравнения с некоторой логикой. Запоминать без какой-либо логики может быть сложно. +JavaScript - это своего рода проводной язык программирования. Код JavaScript запускается и дает вам результат, но если вы не разбираетесь в нем, это может быть нежелательным результатом. + +По практическому правилу, если значение не верно с `==`, оно не будет равно `===`. Использование `===` более безопасно, чем использование `==`. Следующая [ссылка](https://dorey.github.io/JavaScript-Equality-Table/) имеет исчерпывающий список сравнения типов данных. + +### Логические Операторы + +Следующие символы являются общими логическими операторами: `&&` (амперсанд), `||` (труба) и `!` (отрицание). + +- `&&` получает значение `true`, только если два операнда имеют значение `true`. +- `||` становится истинным, любой из операндов верен. +- `!` отрицает истину на ложь, ложь на истину. + +```js +//&& Пример оператора амперсанда + +const check = 4 > 3 && 10 > 5; // true && true -> true +const check = 4 > 3 && 10 < 5; // true && false -> false +const check = 4 < 3 && 10 < 5; // false && false -> false + +//|| pipe or operator, example + +const check = 4 > 3 || 10 > 5; // true || true -> true +const check = 4 > 3 || 10 < 5; // true || false -> true +const check = 4 < 3 || 10 < 5; // false || false -> false + +//! Примеры отрицания + +let check = 4 > 3; // true +let check = !(4 > 3); // false +let isLightOn = true; +let isLightOff = !isLightOn; // false +let isMarried = !false; // true +``` + +### Оператор инкремента + +В JavaScript мы используем оператор приращения для увеличения значения, хранящегося в переменной. Приращение может быть до или после приращения. Давайте посмотрим на каждого из них: + +1. Преинкремент + + ```js + let count = 0; + console.log(++count); // 1 + console.log(count); // 1 + ``` + +2. Пост-инкремент + + ```js + let count = 0; + console.log(count++); // 0 + console.log(count); // 1 + ``` + +Мы используем большую часть времени после приращения. По крайней мере, вы должны помнить, как использовать постинкрементный оператор. + +### Оператор декремента + +В JavaScript мы используем оператор декремента для уменьшения значения, хранящегося в переменной. Декремент может быть до или после декремента. Давайте посмотрим на каждого из них: + +1. Предекремент + + ```js + let count = 0; + console.log(--count); // -1 + console.log(count); // -1 + ``` + +2. Постдекремента + + ```js + let count = 0; + console.log(count--); // 0 + console.log(count); // -1 + ``` + +### Тернарный операторы + +Тернарный оператор позволяет записать условие. +Другой способ написания условных выражений - использование Тернарных операторов. Посмотрите на следующие примеры: + +```js +let isRaining = true; +isRaining + ? console.log("You need a rain coat.") + : console.log("No need for a rain coat."); +isRaining = false; + +isRaining + ? console.log("You need a rain coat.") + : console.log("No need for a rain coat."); +``` + +```sh +You need a rain coat. +No need for a rain coat. +``` + +```js +let number = 5; +number > 0 + ? console.log(`${number} is a positive number`) + : console.log(`${number} is a negative number`); +number = -5; + +number > 0 + ? console.log(`${number} is a positive number`) + : console.log(`${number} is a negative number`); +``` + +```sh +5 is a positive number +-5 is a negative number +``` + +### Приоритет оператора + +Я хотел бы рекомендовать вам прочитать о приоритете оператора из этой [ссылки](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) + +## Методы окна + +### Метод alert() + +Как вы видели в самом начале, метод `alert()` отображает окно предупреждения с указанным сообщением и кнопкой OK. Это встроенный метод, и он принимает аргумент. + +```js +alert(message); +``` + +```js +alert("Welcome to 30DaysOfJavaScript"); +``` + +Не используйте слишком много предупреждений, потому что это раздражает, используйте его только для тестирования. + +### Метод prompt() + +Методы подсказки окна отображают окно подсказки с вводом в вашем браузере, чтобы принять входные значения, и входные данные могут быть сохранены в переменной. Метод `prompt()` принимает два аргумента. Второй аргумент является необязательным. + +```js +prompt("required text", "optional text"); +``` + +```js +let number = prompt("Enter number", "number goes here"); +console.log(number); +``` + +### Метод confirm() + +Метод `confirm()` отображает диалоговое окно с указанным сообщением, а также кнопки "ОК" и "Отмена". +Окно подтверждения часто используется, чтобы запросить у пользователя разрешение на что-либо. Окно `confirm()` принимает строку в качестве аргумента. +Нажатие "ОК" дает значение `true`, нажатие кнопки "Отмена" дает значение `false`. + +```js +const agree = confirm("Are you sure you like to delete? "); +console.log(agree); // результат будет true или false в зависимости от того, что вы нажимаете в диалоговом окне +``` + +These are not all the window methods we will have a separate section to go deep into window methods. + +## Объект Date + +Время это важная вещь. Нам нравится знать время определенного действия или события. В JavaScript текущее время и дата создаются с использованием JavaScript Date Object. Объект, который мы создаем с использованием объекта Date, предоставляет множество методов для работы с датой и временем. Методы, которые мы используем для получения информации о дате и времени из значений объекта даты, начинаются со слова _get_, поскольку они предоставляют информацию. + +- `getFullYear()`, +- `getMonths()`, +- `getDate()`, +- `getDay()`, +- `getHours()`, +- `getMinutes`, +- `getSeconds()`, +- `getMilliseconds()`, +- `getTime()`, +- `getDay()` + +![Date time Object](../images/date_time_object.png) + +### Создание объекта времени + +Однажды мы создаем объект времени. Объект времени предоставит информацию о времени. Давайте создадим объект времени + +```js +const now = new Date(); +console.log(now); // Sat Jan 04 2020 00:56:41 GMT+0200 (Eastern European Standard Time) +``` + +Мы создали объект времени, и мы можем получить доступ к любой информации о дате и времени из объекта, используя методы get, которые мы упомянули в таблице. + +### Получение года + +Давайте извлечем или получим полный объект времени. + +```js +const now = new Date(); +console.log(now.getFullYear()); // 2020 +``` + +### Получение месяца + +Давайте извлечем или получим месяц из объекта времени. + +```js +const now = new Date(); +console.log(now.getMonth()); // 0, потому, что месяц январь, month(0-11) +``` + +### Получение даты + +Давайте извлечем или получим дату месяца из объекта времени. + +```js +const now = new Date(); +console.log(now.getDate()); // 4, потому что день месяца 4th, day(0-31) +``` + +### Получение дня + +Давайте извлечем или получим день недели из объекта времени. + +```js +const now = new Date(); +console.log(now.getDay()); // 6, потому, что день Суббота, который является 5-м днем, +// Получение дня недели в виде числа (0-6) +``` + +### Получение часов + +Давайте извлекать или получать часы из объекта времени. + +```js +const now = new Date(); +console.log(now.getHours()); // 0, потому, что время 00:56:41 +``` + +### Получение минут + +Давайте извлекать или получать минуты из объекта времени. + +```js +const now = new Date(); +console.log(now.getMinutes()); // 56, потому, что время 00:56:41 +``` + +### Получение секунд + +Давайте извлекать или получать секунды из объекта времени. + +```js +const now = new Date(); +console.log(now.getSeconds()); // 41, потому, что время 00:56:41 +``` + +### Получение времени + +Этот метод дает время в миллисекундах, начиная с 1 января 1970 года. Он также известен как время Unix. Мы можем получить время Unix двумя способами: + +1. Используя `getTime()` + + ```js + const now = new Date(); // + console.log(now.getTime()); // 1578092201341, это количество секунд, прошедших с January 1, 1970 to January 4, 2020 00:56:41 + ``` + +2. Используя _Date.now()_ + +```js +const allSeconds = Date.now(); // +console.log(allSeconds); // 1578092201341, это количество секунд, прошедших с January 1, 1970 to January 4, 2020 00:56:41 + +const timeInSeconds = new Date().getTime(); +console.log(allSeconds == timeInSeconds); // true +``` + +Давайте отформатируем эти значения в удобочитаемом формате времени. + +**Пример:** + +```js +const now = new Date(); +const year = now.getFullYear(); // вернет year +const month = now.getMonth() + 1; // вернет month(0 - 11) +const date = now.getDate(); // вернет date (1 - 31) +const hours = now.getHours(); // вернет number (0 - 23) +const minutes = now.getMinutes(); // вернет number (0 -59) + +console.log(`${date}/${month}/${year} ${hours}:${minutes}`); // 4/1/2020 0:56 +``` + +🌕 У вас есть безграничная энергия! Вы только что выполнили 3-й день испытаний, и вы на три шага на пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц. + +## 💻 День 3: Упражнения + +### Упражнения: Уровень 1 + +1. Объявите переменные firstName, lastName, страну, город, возраст, isMarried, year, присвойте ей значение и используйте оператор `typeof` для проверки разных типов данных. +2. Проверьте, равен ли тип «10» 10 +3. Проверьте, равен ли `parseInt ('9.8')` 10 +4. Булево значение равно либо true, либо false. + + 1. Напишите три утверждения JavaScript, которые обеспечивают значение `true`. + 2. Напишите три оператора JavaScript, которые предоставляют значения `false`. + +5. Сначала выясните результат следующего выражения сравнения без использования `console.log()`. После того, как вы определите результат, подтвердите его, используя `console.log()`. + + 1. 4 > 3 + 2. 4 >= 3 + 3. 4 < 3 + 4. 4 <= 3 + 5. 4 == 4 + 6. 4 === 4 + 7. 4 != 4 + 8. 4 !== 4 + 9. 4 != '4' + 10. 4 == '4' + 11. 4 === '4' + 12. Найдите длину python и jargon и сделайте ложное сравнение. + +6. Сначала выясните результат следующих выражений без использования `console.log()`. После того, как вы определите результат, подтвердите его с помощью `console.log()`. + + 1. 4 > 3 && 10 < 12 + 2. 4 > 3 && 10 > 12 + 3. 4 > 3 || 10 < 12 + 4. 4 > 3 || 10 > 12 + 5. !(4 > 3) + 6. !(4 < 3) + 7. !(false) + 8. !(4 > 3 && 10 < 12) + 9. !(4 > 3 && 10 > 12) + 10. !(4 === '4') + 11. В обоих случаях нет 'on' + +7. Используйте объект Date для выполнения следующих действий +     1. Какой сегодня год? +     2. Какой сегодня месяц, как число? +     3. Какая сегодня дата? +     4. Какой сегодня день, как число? +     5. Сколько сейчас часов? +     6. Какие минуты сейчас? +     7. Узнайте количество секунд, прошедших с 1 января 1970 года по настоящее время. + +### Упражнения: уровень 2 + +1. Напишите скрипт, который предложит пользователю ввести основание и высоту треугольника и рассчитать площадь треугольника. (прлощадь = 0.5 x b x h). + + ```sh + Введите основанеи: 20 + Введите высоту: 10 + Площадь треугольника 50 + ``` + +2. Напишите скрипт, который предложит пользователю ввести сторону a, сторону b и сторону c треугольника и вычислить периметр треугольника. (периметр = a + b + c) + + ```sh + Введите сторону a: 5 + Введите сторону b: 4 + Введите сторону c: 3 + Периметр треугольника 12 + ``` + +3. Получите длину и ширину, используя подсказку, и вычислите площадь прямоугольника (площадь = длина х ширина и периметр прямоугольника (периметр = 2 х (длина + ширина)) +4. Получите радиус, используя подсказку, и вычислите площадь круга (площадь = pi x r x r) и окружность круга (c = 2 x pi x r), где pi = 3.14. +5. Рассчитайте наклон, x-пересечение и y-пересечение y = 2x -2 +6. Наклон (m = y2-y1 / x2-x1). Найти наклон между точкой (2, 2) и точкой (6,10) +7. Сравните наклон двух приведенных выше вопросов. +8. Рассчитайте значение y (y = x ^ 2 + 6x + 9). Попробуйте использовать разные значения х и выяснить, при каком значении х у 0. +9. Напишите скрипт, который побудит пользователя вводить часы и ставку за час. Рассчитать зарплату человека? + + ```sh + Введите часы: 40 + Введите ставку в час: 28 + Ваш еженедельный заработок 1120 + ``` + +10. Если длина вашего имени больше 7, скажем, ваше имя длинное, иначе скажем, ваше имя короткое. +11. Сравните длину вашего имени и длину вашей фамилии, и вы должны получить этот вывод. + + ```js + let firstName = "Asabeneh"; + let lastName = "Yetayeh"; + ``` + + ```sh + Твое имя, Asabeneh длиннее вашей фамилии, Yetayeh + ``` + +12. Объявите две переменные _myAge_ и _yourAge_ и присвойте им начальные значения, myAge и yourAge. + + ```js + let myAge = 250; + let yourAge = 25; + ``` + + ```sh + Я на 225 лет старше тебя. + ``` + +13. Используя подсказку, укажите год рождения пользователя и, если ему исполнилось 18 лет, разрешите ему ехать, если он не скажет пользователю подождать определенное количество лет. + + ```sh + Введите год рождения: 1995 + Вам 25. Вы достаточно взрослый, чтобы водить + + Введите год рождения: 2005 + Вам 15. Вам будет разрешено водить после 3 лет. + ``` + +14. Напишите скрипт, который предложит пользователю ввести количество лет. Подсчитайте, сколько секунд человек может прожить. Предположим, кто-то живет всего сто лет + + ```sh + Введите число, в котором вы живете: 100 + + Вы жили 3153600000 секунд. + ``` + +15. Создайте удобочитаемый формат времени, используя объект Date time + 1. YYY-MM-DD HH:mm + 2. DD-MM-YYYY HH:mm + 3. DD/MM/YYY HH:mm + +### Упражнения: уровень 3 + +1. Создайте удобочитаемый формат времени, используя объект Date time. Час и минута должны быть все время двузначными (7 часов должны быть 07, а 5 минут должны быть 05) + 1. YYY-MM-DD HH:mm eg. 20120-01-02 07:05 + +🎉 ПОЗДРАВЛЯЕМ! 🎉 + +[<< День 2](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/02_Day/02_day_data_types.md) | [День 4 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/04_Day/04_day_conditionals.md) diff --git a/RU/04_Day/04_day_conditionals.md b/RU/04_Day/04_day_conditionals.md new file mode 100644 index 0000000..e306cdf --- /dev/null +++ b/RU/04_Day/04_day_conditionals.md @@ -0,0 +1,351 @@ +
+

30 Days Of JavaScript

+ + + + + Twitter Follow + + +Автор: +Asabeneh Yetayeh
+ Январь, 2020 +
+ +
+ +[<< День 3](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/03_Day/03_booleans_operators_date.md) | [День 5 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/05_Day/05_day_arrays.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_4.png) + +- [📔 День 4](#%f0%9f%93%94-%d0%94%d0%b5%d0%bd%d1%8c-4) + - [Условные операторы](#%d0%a3%d1%81%d0%bb%d0%be%d0%b2%d0%bd%d1%8b%d0%b5-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80%d1%8b) + - [if](#if) + - [if else](#if-else) + - [if else if else](#if-else-if-else) + - [Switch](#switch) + - [Тернарный оператор](#%d0%a2%d0%b5%d1%80%d0%bd%d0%b0%d1%80%d0%bd%d1%8b%d0%b9-%d0%be%d0%bf%d0%b5%d1%80%d0%b0%d1%82%d0%be%d1%80) + - [💻 Упражнения](#%f0%9f%92%bb-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f) + - [Упражнения: уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1) + - [Упражнения: уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2) + - [Упражнения: уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d1%83%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3) + +# 📔 День 4 + +## Условные операторы + +Условные операторы используются для принятия решения на основе различных условий. +По умолчанию операторы в скрипте JavaScript выполняются последовательно сверху вниз. Если логика обработки требует этого, последовательный поток выполнения может быть изменен двумя способами: + +- Условное выполнение: блок из одного или нескольких операторов будет выполнен, если определенное выражение истинно +- Повторное выполнение: блок из одного или нескольких операторов будет выполняться повторно, если определенное выражение истинно. В этом разделе мы рассмотрим операторы `if`, `else`, `else if`. Здесь будут полезны сравнение и логический оператор, который мы изучили в предыдущих разделах. + +Условия могут быть реализованы следующими способами: + +- if +- if else +- if else if else +- switch +- ternary operator + +### if + +В JavaScript и других языках программирования ключевое слово `if` используется, чтобы проверить, выполняется ли условие и выполнить код блока. Чтобы создать условие `if`, нам нужно ключевое слово `if`, условие внутри скобки и блок кода внутри фигурной скобки ({}). + +```js +// синтаксис +if (condition) { + //эта часть кода работает для true состояния +} +``` + +**Пример:** + +```js +let num = 3; +if (num > 0) { + console.log(`${num} это положительное число`); +} +// 3 это положительное число +``` + +```js +let isRaining = true; +if (isRaining) { + console.log("Remember to take your rain coat."); +} +``` + +Как видно из вышеприведенного условия, 3 больше 0 и является положительным числом. Условие было выполнено, и код блока был выполнен. Однако, если условие ложно, мы не видим результат. То же самое касается второго условия, если isRaining равен `false`, блок `if` не будет выполнен, и мы не увидим вывод. Чтобы увидеть результат ложного условия, у нас должен быть еще один блок, который будет `else`. + +### if else + +Если условие истинно, первый блок будет выполнен, если нет, будет выполнено условие else. + +```js +// синтаксис +if (condition) { + // эта часть кода работает для истинного состояния +} else { + // эта часть кода выполняется для ложного условия +} +``` + +```js +let num = 3; +if (num > 0) { + console.log(`${num} это положительное число`); +} else { + console.log(`${num} отрицательное число`); +} +// 3 это положительное число + +num = -3; +if (num > 0) { + console.log(`${num} это положительное число`); +} else { + console.log(`${num} это отрицательное число`); +} +// -3 это отрицательное число +``` + +```js +let isRaining = true; +if (isRaining) { + console.log("Тебе нужен плащ от дождя.."); +} else { + console.log("Не нужно пальто от дождя."); +} +// Тебе нужен плащ от дождя. + +isRaining = false; +if (isRaining) { + console.log("Тебе нужен плащ от дождя.."); +} else { + console.log("Не нужно пальто от дождя."); +} +// Не нужно пальто от дождя. +``` + +Вышеуказанное условие ложно, поэтому был выполнен блок `else`. Как насчет, если наше условие больше двух, мы будем использовать `else if` условия. + +### if else if else + +В нашей повседневной жизни мы принимаем решения ежедневно. Мы принимаем решение не проверяя одно или два условия, а принимаем решения на основе нескольких условий. Как и в нашей повседневной жизни, программирование также полно условий. Мы используем `else if`, когда у нас есть несколько условий. + +```js +// синтаксис +if (condition) { + // код +} else if (condition) { + // код +} else { + // код +} +``` + +**Пример:** + +```js +let a = 0; +if (a > 0) { + console.log(`${a} это положительное число`); +} else if (a < 0) { + console.log(`${a} это отрицательное число`); +} else if (a == 0) { + console.log(`${a} это 0`); +} else { + console.log(`${a} это не число`); +} +``` + +```js +// if else if else +let weather = "солнечно"; +if (weather === "дождливо") { + console.log("Вам нужен плащ от дождя."); +} else if (weather === "облачно") { + console.log("Может быть холодно, тебе нужен пиджак."); +} else if (weather === "солнечно") { + console.log("Выйди свободным."); +} else { + console.log("Не нужно пальто от дождя."); +} +``` + +### Switch + +Переключатель является альтернативой для `if else if else else`. +Оператор `switch` начинается с ключевого слова `switch`, за которым следуют скобки и блок кода. Внутри блока кода у нас будут разные случаи. Case case запускается, если значение в скобках оператора `switch` совпадает с case vale. Перерыв должен закончиться, и он не снижается после того, как условие выполнено. Блок по умолчанию выполняется, если все случаи не удовлетворяют условию. + +```js +switch (caseValue) { + case 1: + // код + break; + case 2: + // код + break; + case 3: + // код + default: + // код +} +``` + +```js +let weather = "облачно"; +switch (weather) { + case "дождливо": + console.log("Вам нужен плащ от дождя."); + break; + case "облачно": + console.log("Может быть холодно, тебе нужен пиджак."); + break; + case "солнечно": + console.log("Выйди свободно."); + break; + default: + console.log("Не нужно пальто от дождя."); +} + +// Switch больше примеров +let dayUserInput = prompt("Какой сегодня день ?"); +let day = dayUserInput.toLowerCase(); + +switch (day) { + case "понедельник": + console.log("Сегодня понедельник"); + break; + case "вторник": + console.log("Сегодня вторник"); + break; + case "среда": + console.log("Сегодня среда"); + break; + case "четверг": + console.log("Сегодня четверг"); + break; + case "пятница": + console.log("Сегодня пятница"); + break; + case "суббота": + console.log("Сегодня суббота"); + break; + case "воскресенье": + console.log("Сегодня воскресенье"); + break; + default: + console.log("Это не день недели."); +} +``` + +### Тернарный оператор + +Другой способ написания условных выражений - использование тернарных операторов. Мы рассмотрели это в других разделах, но мы также должны упомянуть об этом здесь. + +```js +let isRaining = true; +isRaining + ? console.log("You need a rain coat.") + : console.log("No need for a rain coat."); +``` + +🌕 Вы необыкновенный и у вас есть замечательный потенциал. Вы только что выполнили четвертый день испытаний и прошли четыре шага на пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц. + +## 💻 Упражнения + +### Упражнения: уровень 1 + +1. Получить пользовательский ввод с помощью `prompt("Введите свой возраст:")`. Если пользователю 18 лет или больше, оставьте отзыв: вы достаточно взрослый, чтобы ездить, но если нет, то 18 - отзывайте, чтобы ждать те годы, которые он должен был ждать. + + ```sh + Введите свой возраст: 30 + Вы достаточно взрослый, чтобы водить. + + Введите свой возраст: 15 + Вам осталось 3 года до вождения. + ``` + +2. Сравните значения myAge и yourAge, используя _if… else_. На основе сравнения журнала для консоли, кто старше (я или вы). Используйте `prompt("Введите свой возраст:")`, чтобы получить возраст в качестве входных данных. + + ```sh + Введите свой возраст: 30 + Ты на 5 лет старше меня. + ``` + +3. Если a больше, чем b, вернуть «a больше, чем b», иначе «a меньше, чем b». Попробуй реализовать в пути + + - используя if else + - тернарный оператор. + + ```js + let a = 4; + let b = 3; + ``` + + ```sh + 4 больше 3 + ``` + +4. Четные числа делятся на 2, а остаток равен нулю. Как проверить, является ли число четным или нет с помощью JavaScript? + + ```sh + Введите число: 2 + 2 - четное число + + Введите число: 9 + 9 является нечетным числом. + ``` + +### Упражнения: уровень 2 + +1. Напишите код, который может дать оценку студентам в соответствии с их оценками: + - 80-100, A + - 70-89, B + - 60-69, C + - 50-59, D + - 0-49, F +2. Проверьте, является ли сезон осенью, зимой, весной или летом. + Если пользовательский ввод: + - сентябрь, октябрь или ноябрь, сезон осень. + - декабрь, январь или февраль, сезон зима. + - март, апрель или май, сезон весна + - июнь, июль или август, сезон лето +3. Проверьте, является ли день выходным или рабочим днем. Ваш сценарий примет день как вход. + + ```sh + Какой сегодня день? Суббота + Суббота - выходной день. + + Какой сегодня день? СубБоТта + Суббота - выходной день. + + Какой сегодня день? Пятница + Пятница рабочий день. + + Какой сегодня день? ПяТНИца + Пятница рабочий день. + ``` + +### Упражнения: уровень 3 + +1. Напишите программу, которая сообщает количество дней в месяце. + + ```sh + Введите месяц: январь + В январе 31 день. + + Введите месяц: ЯНВАРЬ + В январе 31 день + + Введите месяц: февраль + Февраль имеет 28 дней. + + Введите месяц: феВРаль + Февраль имеет 28 дней. + ``` + +🎉 ПОЗДРАВЛЯЕМ ! 🎉 + +[<< День 3](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/03_Day/03_booleans_operators_date.md) | [День 5 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/05_Day/05_day_arrays.md) diff --git a/RU/05_Day/05_day_arrays.md b/RU/05_Day/05_day_arrays.md new file mode 100644 index 0000000..24ccc68 --- /dev/null +++ b/RU/05_Day/05_day_arrays.md @@ -0,0 +1,788 @@ +
+

30 Days Of JavaScript

+ + + + + Twitter Follow + + +Автор: +Asabeneh Yetayeh
+ Январь, 2020 +
+ +
+ +[<< День 4](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/04_Day/04_day_conditionals.md) | [День 6 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/06_Day/06_day_loops.md) + +![День 5](../images/banners/day_1_5.png) + +- [📔 День 5](#%f0%9f%93%94-%d0%94%d0%b5%d0%bd%d1%8c-5) + - [Массивы](#%d0%9c%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d1%8b) + - [Как создать пустой массив](#%d0%9a%d0%b0%d0%ba-%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d1%82%d1%8c-%d0%bf%d1%83%d1%81%d1%82%d0%be%d0%b9-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2) + - [Как создать массив со значениями](#%d0%9a%d0%b0%d0%ba-%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d1%82%d1%8c-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2-%d1%81%d0%be-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d1%8f%d0%bc%d0%b8) + - [Создание массива с использованием split](#%d0%a1%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d1%81-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5%d0%bc-split) + - [Доступ к элементам массива по индексу](#%d0%94%d0%be%d1%81%d1%82%d1%83%d0%bf-%d0%ba-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0%d0%bc-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d0%bf%d0%be-%d0%b8%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d1%83) + - [Изменение элемента массива](#%d0%98%d0%b7%d0%bc%d0%b5%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0) + - [Методы манипулирования массивом](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4%d1%8b-%d0%bc%d0%b0%d0%bd%d0%b8%d0%bf%d1%83%d0%bb%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%be%d0%bc) + - [Конструктор массива](#%d0%9a%d0%be%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%82%d0%be%d1%80-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0) + - [Creating static values with fill](#creating-static-values-with-fill) + - [Конкатенация массива с использованием concat](#%d0%9a%d0%be%d0%bd%d0%ba%d0%b0%d1%82%d0%b5%d0%bd%d0%b0%d1%86%d0%b8%d1%8f-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d1%81-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5%d0%bc-concat) + - [Получение длины массива](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b4%d0%bb%d0%b8%d0%bd%d1%8b-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0) + - [Получение индекса элемента в массиве arr](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b8%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d0%b0-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b5-arr) + - [Получение последнего индекса элемента в массиве](#%d0%9f%d0%be%d0%bb%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%bf%d0%be%d1%81%d0%bb%d0%b5%d0%b4%d0%bd%d0%b5%d0%b3%d0%be-%d0%b8%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d0%b0-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b5) + - [Проверка массива](#%d0%9f%d1%80%d0%be%d0%b2%d0%b5%d1%80%d0%ba%d0%b0-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0) + - [Преобразование массива в строку](#%d0%9f%d1%80%d0%b5%d0%be%d0%b1%d1%80%d0%b0%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d0%b2-%d1%81%d1%82%d1%80%d0%be%d0%ba%d1%83) + - [Объединение элементов массива](#%d0%9e%d0%b1%d1%8a%d0%b5%d0%b4%d0%b8%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0) + - [Элементы массива срезов](#%d0%ad%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d1%81%d1%80%d0%b5%d0%b7%d0%be%d0%b2) + - [Метод сращивания в массиве](#%d0%9c%d0%b5%d1%82%d0%be%d0%b4-%d1%81%d1%80%d0%b0%d1%89%d0%b8%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b5) + - [Добавление элемента в массив с помощью push](#%d0%94%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-push) + - [Удаление конечного элемента с помощью pop](#%d0%a3%d0%b4%d0%b0%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d0%ba%d0%be%d0%bd%d0%b5%d1%87%d0%bd%d0%be%d0%b3%d0%be-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-pop) + - [Удаление элемента с самого начала](#%d0%a3%d0%b4%d0%b0%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%b0-%d1%81-%d1%81%d0%b0%d0%bc%d0%be%d0%b3%d0%be-%d0%bd%d0%b0%d1%87%d0%b0%d0%bb%d0%b0) + - [Добавить элемент с начала](#%d0%94%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82-%d1%81-%d0%bd%d0%b0%d1%87%d0%b0%d0%bb%d0%b0) + - [Обратный порядок массивов](#%d0%9e%d0%b1%d1%80%d0%b0%d1%82%d0%bd%d1%8b%d0%b9-%d0%bf%d0%be%d1%80%d1%8f%d0%b4%d0%be%d0%ba-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%be%d0%b2) + - [Сортировка элементов в массиве](#%d0%a1%d0%be%d1%80%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%ba%d0%b0-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b5) + - [Массив массивов](#%d0%9c%d0%b0%d1%81%d1%81%d0%b8%d0%b2-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%be%d0%b2) + - [💻 Упражнения](#%f0%9f%92%bb-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f) + - [Упражнения: Уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1) + - [Упражнения: Уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2) + - [Упражнения: Уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3) + +# 📔 День 5 + +## Массивы + +В отличие от переменных, массив может хранить _несколько значений_. Каждое значение в массиве имеет _индекс_, а каждый индекс имеет _ссылку в адресе памяти_. Каждое значение может быть доступно с помощью их _индексов_. Индекс массива начинается с _0_, а последний элемент на единицу меньше длины массива. + +Массив - это коллекция различных типов данных, которые упорядочены и изменяемы (модифицируемы). Массив позволяет хранить повторяющиеся элементы и различные типы данных. Массив может быть пустым или иметь разные значения типа данных. + +### Как создать пустой массив + +В JavaScript мы можем создать массив различными способами. Давайте по-разному создадим массив. +Очень часто используется _const_ вместо _let_ для объявления переменной массива. Если вы используете `const`, это означает, что вы больше не используете это имя. + +- Используя конструктор Array + +```js +// синтаксис +const arr = Array(); +// or +// let arr = new Array() +console.log(arr); // [] +``` + +- Используя квадратные скобки ([]) + +```js +// синтаксис +// Это наиболее рекомендуемый способ создания пустого списка +const arr = []; +console.log(arr); +``` + +### Как создать массив со значениями + +Массив с начальными значениями. Мы используем свойство _length_, чтобы найти длину массива. + +```js +const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // массив из чисел +const fruits = ["banana", "orange", "mango", "lemon"]; // массив из строк, fruits +const vegetables = ["Tomato", "Potato", "Cabbage", "Onion", "Carrot"]; // массив из строк, vegetables +const animalProducts = ["milk", "meat", "butter", "yoghurt"]; // массив из строк, products +const webTechs = ["HTML", "CSS", "JS", "React", "Redux", "Node", "MongDB"]; // массив из веб технологий +const countries = ["Finland", "Denmark", "Sweden", "Norway", "Iceland"]; // массив из строк, countries + +// Распечатать массив и его длину + +console.log("Numbers:", numbers); +console.log("Number of numbers:", numbers.length); + +console.log("Fruits:", fruits); +console.log("Number of fruits:", fruits.length); + +console.log("Vegetables:", vegetables); +console.log("Number of vegetables:", vegetables.length); + +console.log("Animal products:", animalProducts); +console.log("Number of animal products:", animalProducts.length); + +console.log("Web technologies:", webTechs); +console.log("Number of web technologies:", webTechs.length); + +console.log("Countries:", countries); +console.log("Number of countries:", countries.length); +``` + +```sh +Numbers: [0, 3.14, 9.81, 37, 98.6, 100] +Number of numbers: 6 +Fruits: ['banana', 'orange', 'mango', 'lemon'] +Number of fruits: 4 +Vegetables: ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] +Number of vegetables: 5 +Animal products: ['milk', 'meat', 'butter', 'yoghurt'] +Number of animal products: 4 +Web technologies: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] +Number of web technologies: 7 +Countries: ['Finland', 'Estonia', 'Denmark', 'Sweden', 'Norway'] +Number of countries: 5 +``` + +- Массив может иметь элементы разных типов данных + +```js +const arr = [ + "Asabeneh", + 250, + true, + { country: "Finland", city: "Helsinki" }, + { skills: ["HTML", "CSS", "JS", "React", "Python"] } +]; // arr содержит разные типы данных +console.log(arr); +``` + +### Создание массива с использованием split + +Как мы видели в предыдущем разделе, мы можем разбить строку в разных позициях и перейти в массив. Давайте посмотрим на примеры ниже. + +```js +let js = "JavaScript"; +const charsInJavaScript = js.split(""); + +console.log(charsInJavaScript); // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"] + +let companiesString = "Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon"; +const companies = companiesString.split(","); + +console.log(companies); // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"] +let txt = + "I love teaching and empowering people. I teach HTML, CSS, JS, React, Python."; +const words = txt.split(" "); + +console.log(words); +// в тексте есть специальные символы, подумайте, как можно получить только слова +// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"] +``` + +### Доступ к элементам массива по индексу + +Мы получаем доступ к каждому элементу в массиве, используя их индекс. Индекс массива начинается с 0. На рисунке ниже четко показано начало индекса. + +![arr index](../images/array_index.png) + +```js +const fruits = ["banana", "orange", "mango", "lemon"]; +let firstFruit = fruits[0]; // мы получаем доступ к первому элементу, используя его индекс + +console.log(firstFruit); // banana + +secondFruit = fruits[1]; +console.log(secondFruit); // orange + +let lastFruit = fruits[3]; +console.log(lastFruit); // lemon +// Последний индекс можно рассчитать следующим образом + +let lastIndex = fruits.length - 1; +lastFruit = fruits[lastIndex]; + +console.log(lastFruit); // lemon +``` + +```js +const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // набор чисел + +console.log(numbers.length); // => узнать размер массива, который 6 +console.log(numbers); // -> [0, 3.14, 9.81, 37, 98.6, 100] +console.log(numbers[0]); // -> 0 +console.log(numbers[5]); // -> 100 + +let lastIndex = numbers.length - 1; +console.log(numbers[lastIndex]); // -> 100 +``` + +```js +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB" +]; // Список веб-технологий + +console.log(webTechs); // все элементы массива +console.log(webTechs.length); // => узнать размер массива, который 7 +console.log(webTechs[0]); // -> HTML +console.log(webTechs[6]); // -> MongoDB + +let lastIndex = webTechs.length - 1; +console.log(webTechs[lastIndex]); // -> MongoDB +``` + +```js +const countries = [ + "Albania", + "Bolivia", + "Canada", + "Denmark", + "Ethiopia", + "Finland", + "Germany", + "Hungary", + "Ireland", + "Japan", + "Kenya" +]; // Список стран + +console.log(countries); // -> все страны в масиве +console.log(countries[0]); // -> Albania +console.log(countries[10]); // -> Kenya + +let lastIndex = countries.length - 1; +console.log(countries[lastIndex]); // -> Kenya +``` + +```js +const shoppingCart = [ + "Milk", + "Mango", + "Tomato", + "Potato", + "Avocado", + "Meat", + "Eggs", + "Sugar" +]; // Список продуктов питания + +console.log(shoppingCart); // -> все shoppingCart в массиве +console.log(shoppingCart[0]); // -> Milk +console.log(shoppingCart[7]); // -> Sugar + +let lastIndex = shoppingCart.length - 1; +console.log(shoppingCart[lastIndex]); // -> Sugar +``` + +### Изменение элемента массива + +Массив является изменяемым (модифицируемым). После создания массива мы можем изменить содержимое элементов массива. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers[0] = 10; // изменение 1 на индекс 0 до 10 +numbers[1] = 20; // изменение 2 на индекс 1 до 20 + +console.log(numbers); // [10, 20, 3, 4, 5] + +const countries = [ + "Albania", + "Bolivia", + "Canada", + "Denmark", + "Ethiopia", + "Finland", + "Germany", + "Hungary", + "Ireland", + "Japan", + "Kenya" +]; + +countries[0] = "Afghanistan"; // Замена Albania на Afghanistan +let lastIndex = countries.length - 1; +countries[lastIndex] = "Korea"; // Замена Kenya на Korea + +console.log(countries); +``` + +```sh +["Afghanistan", "Bolivia", "Canada", "Denmark", "Ethiopia", "Finland", "Germany", "Hungary", "Ireland", "Japan", "Korea"] +``` + +### Методы манипулирования массивом + +Существуют разные методы манипулирования массивом. Вот некоторые из доступных методов для работы с массивами: _Array, length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_ + +#### Конструктор массива + +Массив: для создания массива. + +```js +const arr = Array(); // создает пустой массив +console.log(arr); + +const eightEmptyValues = Array(8); // он создает восемь пустых значений +console.log(eightEmptyValues); // [empty x 8] +``` + +#### Creating static values with fill + +fill: Fill all the array elements with a static value + +```js +const arr = Array(); // создает пустой массив +console.log(arr); + +const eightXvalues = Array(8).fill("X"); // он создает восемь значений элементов, заполненных 'X' +console.log(eightXvalues); // ['X', 'X','X','X','X','X','X','X'] + +const eight0values = Array(8).fill(0); // он создает восемь значений элементов, заполненных '0' +console.log(eight0values); // [0, 0, 0, 0, 0, 0, 0, 0] + +const four4values = Array(4).fill(4); // он создает 4 значения элемента, заполненные '4' +console.log(four4values); // [4, 4, 4, 4] +``` + +#### Конкатенация массива с использованием concat + +`concat`: объединение двух массивов. + +```js +const firstList = [1, 2, 3]; +const secondList = [4, 5, 6]; +const thirdList = firstList.concat(secondList); + +console.log(thirdList); // [1, 2, 3, 4, 5, 6] +``` + +```js +const fruits = ["banana", "orange", "mango", "lemon"]; // массив из fruits +const vegetables = ["Tomato", "Potato", "Cabbage", "Onion", "Carrot"]; // массив из vegetables +const fruitsAndVegetables = fruits.concat(vegetables); // объединение двух массивов + +console.log(fruitsAndVegetables); +``` + +```sh +["banana", "orange", "mango", "lemon", "Tomato", "Potato", "Cabbage", "Onion", "Carrot"] +``` + +#### Получение длины массива + +`length`: чтобы узнать размер массива + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.length); // -> 5 это размер массива +``` + +#### Получение индекса элемента в массиве arr + +`indexOf`: проверить, существует ли элемент в массиве. Если он существует, он возвращает индекс, иначе он возвращает -1. + +```js +const numbers = [1, 2, 3, 4, 5]; + +console.log(numbers.indexOf(5)); // -> 4 +console.log(numbers.indexOf(0)); // -> -1 +console.log(numbers.indexOf(1)); // -> 0 +console.log(numbers.indexOf(6)); // -> -1 +``` + +Проверьте элемент, если он существует в массиве. + +- Проверьте элементы в списке + +```js +// давайте проверим, существует ли banana в массиве + +const fruits = ["banana", "orange", "mango", "lemon"]; +let index = fruits.indexOf("banana"); // 0 + +if (index != -1) { + console.log("Этот фрукт существует в массиве"); +} else { + console.log("Этот фрукт не существует в массиве"); +} +// Этот фрукт существует в массиве + +// мы можем использовать также тернарный оператор здесь +index != -1 + ? console.log("Этот фрукт существует в массиве") + : console.log("Этот фрукт не существует в массиве"); + +// давайте проверим, существует ли в массиве avocado +let indexOfAvocado = fruits.indexOf("avocado"); // -1, если элемент не найден, индекс -1 +if (indexOfAvocado != -1) { + console.log("Этот фрукт существует в массиве"); +} else { + console.log("Этот фрукт не существует в массиве"); +} +// Этот фрукт не существует в массиве +``` + +#### Получение последнего индекса элемента в массиве + +`lastIndexOf`: отдает позицию последнего элемента в массиве. Если он существует, он возвращает индекс, иначе он возвращает -1. + +```js +const numbers = [1, 2, 3, 4, 5, 3, 1, 2]; + +console.log(numbers.lastIndexOf(2)); // 7 +console.log(numbers.lastIndexOf(0)); // -1 +console.log(numbers.lastIndexOf(1)); // 6 +console.log(numbers.lastIndexOf(4)); // 3 +console.log(numbers.lastIndexOf(6)); // -1 +``` + +`includes` в себя: чтобы проверить, существует ли элемент в массиве. Если он существует, он возвращает истину, иначе он возвращает ложь. + +```js +const numbers = [1, 2, 3, 4, 5]; + +console.log(numbers.includes(5)); // true +console.log(numbers.includes(0)); // false +console.log(numbers.includes(1)); // true +console.log(numbers.includes(6)); // false + +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB" +]; // Список веб-технологий + +console.log(webTechs.includes("Node")); // true +console.log(webTechs.includes("C")); // false +``` + +#### Проверка массива + +`Array.isArray`: чтобы проверить, является ли тип данных массивом + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(Array.isArray(numbers)); // true + +const number = 100; +console.log(Array.isArray(number)); // false +``` + +#### Преобразование массива в строку + +`toString`: преобразовывает массив в строку + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.toString()); // 1,2,3,4,5 + +const names = ["Asabeneh", "Mathias", "Elias", "Brook"]; +console.log(names.toString()); // Asabeneh,Mathias,Elias,Brook +``` + +#### Объединение элементов массива + +`join`: используется для соединения элементов массива, аргумент, переданный в методе join, будет объединен в массив и возвращен в виде строки. По умолчанию он соединяется запятой, но мы можем передать другой строковый параметр, который можно объединить между элементами. + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.join()); // 1,2,3,4,5 + +const names = ["Asabeneh", "Mathias", "Elias", "Brook"]; + +console.log(names.join()); // Asabeneh,Mathias,Elias,Brook +console.log(names.join("")); //AsabenehMathiasEliasBrook +console.log(names.join(" ")); //Asabeneh Mathias Elias Brook +console.log(names.join(", ")); //Asabeneh, Mathias, Elias, Brook +console.log(names.join(" # ")); //Asabeneh # Mathias # Elias # Brook + +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB" +]; // Список веб-технологий + +console.log(webTechs.join()); // "HTML,CSS,JavaScript,React,Redux,Node,MongoDB" +console.log(webTechs.join(" # ")); // "HTML # CSS # JavaScript # React # Redux # Node # MongoDB" +``` + +#### Элементы массива срезов + +`slice`: вырезает несколько предметов из диапазона. +Требуется два параметра: начальная и конечная позиция. Это не включает в себя конечную позицию. + +```js +const numbers = [1, 2, 3, 4, 5]; + +console.log(numbers.slice()); // -> it copies all item +console.log(numbers.slice(0)); // -> it copies all item +console.log(numbers.slice(0, numbers.length)); // it copies all item +console.log(numbers.slice(1, 4)); // -> [2,3,4] // it doesn't include the ending position +``` + +#### Метод сращивания в массиве + +`splice`: требуется три параметра: начальная позиция, количество удалений и количество добавляемых элементов. + +```js +const numbers = [1, 2, 3, 4, 5]; + +console.log(numbers.splice()); // -> удалить все предметы +``` + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.splice(0, 1)); // удалить первый элемент +``` + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.splice(3, 3, 6, 7, 8)); // -> [1, 2, 3, 6, 7, 8] // удаляет два элемента и заменяет три +``` + +#### Добавление элемента в массив с помощью push + +`push`: добавление элемента в конце. Чтобы добавить элемент в конец существующего массива, мы используем метод `push`. + +```js +// синтаксис +const arr = ["item1", "item2", "item3"]; +arr.push("new item"); + +console.log(arr); +// ['item1', 'item2','item3','new item'] +``` + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.push(6); + +console.log(numbers); // -> [1,2,3,4,5,6] + +numbers.pop(); // -> убрать один предмет с конца +console.log(numbers); // -> [1,2,3,4,5] +``` + +```js +let fruits = ["banana", "orange", "mango", "lemon"]; +fruits.push("apple"); + +console.log(fruits); // ['banana', 'orange', 'mango', 'lemon', 'apple'] + +fruits.push("lime"); +console.log(fruits); // ['banana', 'orange', 'mango', 'lemon', 'apple', 'lime'] +``` + +#### Удаление конечного элемента с помощью pop + +`pop`: удаление элемента в конце. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.pop(); // -> убрать один предмет с конца + +console.log(numbers); // -> [1,2,3,4] +``` + +#### Удаление элемента с самого начала + +`shift`: удаление одного элемента массива в начале массива. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.shift(); // -> удаление одного элемента с начала + +console.log(numbers); // -> [2,3,4,5] +``` + +#### Добавить элемент с начала + +`unshift`: добавление элемента массива в начало массива. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.unshift(0); // -> добавить один элемент с начала + +console.log(numbers); // -> [0,1,2,3,4,5] +``` + +#### Обратный порядок массивов + +`reverse`: обратный порядок массива. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.reverse(); // -> обратный порядок массива + +console.log(numbers); // [5, 4, 3, 2, 1] + +numbers.reverse(); +console.log(numbers); // [1, 2, 3, 4, 5] +``` + +#### Сортировка элементов в массиве + +`sort`: расположить элементы массива в порядке возрастания. Сортировка принимает функцию обратного вызова, мы увидим, как мы используем сортировку с функцией обратного вызова в следующих разделах. + +```js +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB" +]; + +webTechs.sort(); +console.log(webTechs); // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"] + +webTechs.reverse(); // после сортировки мы можем изменить это +console.log(webTechs); // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"] +``` + +### Массив массивов + +Массив может хранить различные типы данных, включая сам массив. Давайте создадим массив массивов + +```js +const firstNums = [1, 2, 3]; +const secondNums = [1, 4, 9]; + +const arrayOfArray = [ + [1, 2, 3], + [1, 2, 3] +]; +console.log(arrayOfArray[0]); // [1, 2, 3] + +const frontEnd = ["HTML", "CSS", "JS", "React", "Redux"]; +const backEnd = ["Node", "Express", "MongoDB"]; +const fullStack = [frontEnd, backEnd]; +console.log(fullStack); // [["HTML", "CSS", "JS", "React", "Redux"], ["Node", "Express", "MongoDB"]] +console.log(fullStack.length); // 2 +console.log(fullStack[0]); // ["HTML", "CSS", "JS", "React", "Redux"] +console.log(fullStack[1]); // ["Node", "Express", "MongoDB"] +``` + +🌕Вы прилежны, и вы уже многого достигли. Вы только что завершили 5-й день испытаний, и вы на 5 шагов приблизились к своему пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц. + +## 💻 Упражнения + +### Упражнения: Уровень 1 + +```js +const countries = [ + "Albania", + "Bolivia", + "Canada", + "Denmark", + "Ethiopia", + "Finland", + "Germany", + "Hungary", + "Ireland", + "Japan", + "Kenya" +]; + +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB" +]; +``` + +1. Объявите массив _empty_; +2. Объявить массив с более чем 5 количеством элементов +3. Найдите длину вашего массива +4. Получить первый элемент, средний элемент и последний элемент массива +5. Объявите массив с именем _mixedDataTypes_, поместите различные типы данных в ваш массив и найдите длину массива. Вы должны быть размером больше 5 +6. Объявите имя переменной массива _itCompanies_ и присвойте начальные значения Facebook, Google, Microsoft, Apple, IBM, Oracle и Amazon +7. Напечатайте массив, используя `console.log()` +8. Распечатайте количество компаний в массиве +9. Распечатать первую компанию, среднюю и последнюю компанию +10. Распечатайте каждую компанию +11. Измените название каждой компании на заглавные по одному и напечатайте их +12. Распечатайте массив как предложение: Facebook, Google, Microsoft, Apple, IBM, Oracle и Amazon являются крупными ИТ-компаниями. +13. Проверьте, существует ли определенная компания в массиве _itCompanies_. Если она существует, верните компанию, иначе верните компанию, которая не найдена +14. Отфильтруйте компании, которые имеют более одного «o» без метода фильтра +15. Сортировать массив с помощью метода `sort()` +16. Обратный массив, используя метод `reverse()` +17. Вырежьте первые 3 компании из массива +18. Вырежьте последние 3 компании из массива +19. Вырежьте середину ИТ-компании или компаний из массива +20. Удалить первую IT-компанию из массива +21. Уберите среднюю ИТ-компанию или компании из массива +22. Удалить последнюю ИТ-компанию из массива +23. Удалить все ИТ-компании + +### Упражнения: Уровень 2 + +1. Создайте отдельный файл _country.js_ и сохраните массив стран в этот файл, создайте отдельный файл _web_techs.js_ и сохраните массив _webTechs_ в этом файле. Доступ к обоим файлам в файле _main.js_ +2. Сначала удалите все функции и измените строку на массив и посчитайте количество слов в массиве + + ```js + let text = + "I love teaching and empowering people. I teach HTML, CSS, JS, React, Python."; + console.log(words); + console.log(words.length); + ``` + + ```sh + ["I", "love", "teaching", "and", "empowering", "people", "I", "teach", "HTML", "CSS", "JS", "React", "Python"] + + 13 + ``` + +3. В следующей корзине добавить, удалить, изменить элементы + + ```js + const shoppingCart = ["Milk", "Coffee", "Tea", "Honey"]; + ``` + + - добавьте 'Meat' в начале вашей корзины, если оно еще не добавлено + - добавьте sugar в конец вашей корзины, если он еще не добавлен + - Удалить 'Honey', если у вас аллергия на мед + - изменить чай на 'Green Tea' + +4. В массиве стран проверьте, существует ли в массиве 'Ethiopia', напечатайте 'Ethiopia'. Если его нет, добавьте в список стран. +5. В массиве webTechs проверьте, существует ли в массиве Sass, и если он существует, выведите «Sass - это препроцесс CSS». Если он не существует, добавьте Sass в массив и распечатайте массив. +6. Объедините следующие две переменные и сохраните их в переменной fullStack. + + ```js + const frontEnd = ["HTML", "CSS", "JS", "React", "Redux"]; + const backEnd = ["Node", "Express", "MongoDB"]; + + console.log(fullStack); + ``` + + ```sh + ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] + ``` + +### Упражнения: Уровень 3 + +1. Ниже приведен массив из 10 студентов в возрасте: + + ```js + const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24]; + ``` + + - Отсортировать массив и найти минимальный и максимальный возраст + - Найти средний возраст (один средний или два средних, разделенные на два) + - Найти средний возраст (все предметы, поделенные на количество предметов) + - Найти диапазон возрастов (максимум минус мин) + - Сравните значения (минимум - среднее) и (максимум - среднее), используйте метод `abs()` + + 1. Разделите первые десять стран из [массива стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) + +2. Найдите среднюю страну (страны) в [массиве стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) +3. Разделите массив стран на два равных массива, если он четный. Если массив стран не является четным, еще одна страна для первой половины. + +🎉 ПОЗДРАВЛЯЕМ ! 🎉 + +[<< День 4](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/04_Day/04_day_conditionals.md) | [День 6 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/06_Day/06_day_loops.md) diff --git a/RU/06_Day/06_day_loops.md b/RU/06_Day/06_day_loops.md new file mode 100644 index 0000000..3308eb4 --- /dev/null +++ b/RU/06_Day/06_day_loops.md @@ -0,0 +1,443 @@ +
+

30 Days Of JavaScript

+ + + + + Twitter Follow + + +Автор: +Asabeneh Yetayeh
+ Январь, 2020 +
+ +
+ +[<< День 5](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/05_Day/05_day_arrays.md) | [День 7 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/07_Day/07_day_functions.md) + +![Day 5](../images/banners/day_1_6.png) + +- [📔 День 6](#%f0%9f%93%94-%d0%94%d0%b5%d0%bd%d1%8c-6) + - [Циклы](#%d0%a6%d0%b8%d0%ba%d0%bb%d1%8b) + - [Цикл for](#%d0%a6%d0%b8%d0%ba%d0%bb-for) + - [Цикл while](#%d0%a6%d0%b8%d0%ba%d0%bb-while) + - [Цикл do while](#%d0%a6%d0%b8%d0%ba%d0%bb-do-while) + - [Цикл for of](#%d0%a6%d0%b8%d0%ba%d0%bb-for-of) + - [break](#break) + - [continue](#continue) + - [💻 Упражнения: День 6](#%f0%9f%92%bb-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%94%d0%b5%d0%bd%d1%8c-6) + - [Упражнения: Уровень 1](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-1) + - [Упражнения: Уровень 2](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-2) + - [Упражнения: Уровень 3](#%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f-%d0%a3%d1%80%d0%be%d0%b2%d0%b5%d0%bd%d1%8c-3) + +# 📔 День 6 + +## Циклы + +Большинство действий, которые мы делаем в жизни, полны повторений. Представьте себе, если я попрошу вас распечатать от 0 до 100, используя `console.log()`. Для реализации этой простой задачи может потребоваться от 2 до 5 минут, такая утомительная и повторяющаяся задача может быть выполнена с помощью цикла. + +В языках программирования для выполнения повторяющихся задач мы используем разные виды циклов. Следующие примеры представляют собой наиболее часто используемые циклы. + +### Цикл for + +```js +// Структура цикла for +for(initialization, condition, increment/decrement){ + // код идет здесь +} +``` + +```js +for (let i = 0; i <= 5; i++) { + console.log(i); +} +// 0 1 2 3 4 5 +``` + +```js +for (let i = 5; i >= 0; i--) { + console.log(i); +} +// 5 4 3 2 1 0 +``` + +```js +for (let i = 0; i <= 5; i++) { + console.log(`${i} * ${i} = ${i * i}`); +} +``` + +```sh +0 * 0 = 0 +1 * 1 = 1 +2 * 2 = 4 +3 * 3 = 9 +4 * 4 = 16 +5 * 5 = 25 +``` + +```js +const countries = ["Finland", "Sweden", "Denmark", "Norway", "Iceland"]; +const newArr = []; +for (let i = 0; i < countries.length; i++) { + newArr.push(countries[i].toUpperCase()); +} +//["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"] +``` + +Добавление всех элементов в массив + +```js +const numbers = [1, 2, 3, 4, 5]; +let sum = 0; +for (let i = 0; i < numbers.length; i++) { + sum = sum + numbers[i]; // можно сократить: sum += numbers[i] +} + +console.log(sum); // 15 +``` + +Создание нового массива на основе существующего массива + +```js +const numbers = [1, 2, 3, 4, 5]; +const newArr = []; +let sum = 0; +for (let i = 0; i < numbers.length; i++) { + newArr.push(i * i); +} + +console.log(newArr); // [1, 4, 9, 16, 25] +``` + +```js +const countries = ["Finland", "Sweden", "Norway", "Denmark", "Iceland"]; +const newArr = []; +for (let i = 0; i < countries.length; i++) { + newArr.push(countries[i].toUpperCase()); +} + +console.log(newArr); // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"] +``` + +### Цикл while + +```js +let i = 0; +while (i <= 5) { + console.log(i); + i++; +} +// 0 1 2 3 4 5 +``` + +### Цикл do while + +```js +let i = 0; +do { + console.log(i); + i++; +} while (i <= 5); +// 0 1 2 3 4 5 +``` + +### Цикл for of + +Мы используем для цикла для массивов. Это очень удобный способ перебора массива, если мы не заинтересованы в индексе. + +```js +for (const element of arr) { + // код идет здесь +} +``` + +```js +const numbers = [1, 2, 3, 4, 5]; + +for (const num of numbers) { + console.log(num); //1 2 3 4 5 +} + +for (const num of numbers) { + console.log(num * num); //1 4 9 16 25 +} + +// добавление всех чисел в массиве +let sum = 0; +for (const num of numbers) { + sum += sum + num; // можно также сократить, как это: sum += num +} +console.log(sum); // 15 + +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB" +]; + +for (const tech of webTechs) { + console.log(tech.toUpperCase()); // HTML CSS JAVASCRIPT REACT NODE MONGODB +} + +for (const tech of webTechs) { + console.log(tech[0]); // получить только первую букву каждого элемента, H C J R N M +} +``` + +```js +const countries = ["Finland", "Sweden", "Norway", "Denmark", "Iceland"]; +const newArr = []; +for (const country of countries) { + newArr.push(country.toUpperCase()); +} + +console.log(newArr); // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"] +``` + +### break + +контент будет добавлен в ближайшее время + +### continue + +контент будет добавлен в ближайшее время + +🌕 Ты такой смелый, что дошел так далеко. Теперь вы получили возможность автоматизировать повторяющиеся и утомительные задачи. Вы только что завершили 6-й день испытаний, и вы на 6 ступенек на пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц. + +## 💻 Упражнения: День 6 + +### Упражнения: Уровень 1 + +```js +const countries = [ + "Albania", + "Bolivia", + "Canada", + "Denmark", + "Ethiopia", + "Finland", + "Germany", + "Hungary", + "Ireland", + "Japan", + "Kenya" +]; + +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB" +]; + +const mernStack = ["MongoDB", "Express", "React", "Node"]; +``` + +1. Выполните итерацию от 0 до 10 с помощью цикла `for`, сделайте то же самое с помощью циклов `while` и `do while` +2. Итерируйте 10 к 0, используя цикл `for`, cделайте то же самое, используя цикл `while` и `do while` +3. Итерируйте от 0 до n, используя цикл `for` +4. Напишите цикл, который создает следующий шаблон, используя `console.log()`: + + ```js + # + ## + ### + #### + ##### + ###### + ####### + ``` + +5. Используйте цикл для печати следующего шаблона: + + ```sh + 0 x 0 = 0 + 1 x 1 = 1 + 2 x 2 = 4 + 3 x 3 = 9 + 4 x 4 = 16 + 5 x 5 = 25 + 6 x 6 = 36 + 7 x 7 = 49 + 8 x 8 = 64 + 9 x 9 = 81 + 10 x 10 = 100 + ``` + +6. Используя цикл, напечатайте следующий шаблон + + ```sh + i i^2 i^3 + 0 0 0 + 1 1 1 + 2 4 8 + 3 9 27 + 4 16 64 + 5 25 125 + 6 36 216 + 7 49 343 + 8 64 512 + 9 81 729 + 10 100 1000 + ``` + +7. Используйте цикл для перебора от 0 до 100 и печати только четных чисел. +8. Используйте цикл для итерации от 0 до 100 и выведите только нечетные числа +9. Используйте цикл для итерации от 0 до 100 и печатайте только простые числа +10. Используйте цикл для итерации от 0 до 100, распечатайте и распечатайте сумму всех чисел. + + ```sh + Сумма всех чисел 5050. + ``` + +11. Используйте цикл `for` для итерации от 0 до 100 и выведите сумму всех четных чисел и сумму всех коэффициентов. + + ```sh + The sum of all evens is 2550. And the sum of all odds is 2500. + ``` + +12. Используйте цикл `for` для итерации от 0 до 100 и выведите сумму всех четных чисел и сумму всех шансов. Вывести сумму четных и сумму шансов в виде массива + + ```sh + [2550, 2500] + ``` + +13. Разработайте небольшой скрипт, который генерирует массив из 5 случайных чисел +14. Разработайте небольшой скрипт, который генерирует массив из 5 случайных чисел, числа должны быть уникальными +15. Разработайте небольшой скрипт, который генерирует случайный идентификатор из шести символов: + + ```sh + 5j2khz + ``` + +### Упражнения: Уровень 2 + +1. Разработайте небольшой скрипт, который генерирует произвольное количество символов случайного идентификатора: + + ```sh + fe3jo1gl124g + ``` + + ```sh + xkqci4utda1lmbelpkm03rba + ``` + +2. Напишите скрипт, который генерирует случайное шестнадцатеричное число + + ```sh + '#ee33df' + ``` + +3. Напишите скрипт, который генерирует случайное число цветов RGB. + + ```sh + rgb(240,180,80) + ``` + +4. Используя вышеуказанный массив стран, создайте следующий новый массив. + + ```sh + ["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"] + ``` + +5. Используя приведенный выше массив стран, создайте массив для длины стран. + + ```sh + [7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5] + ``` + +6. Используйте массив стран для создания следующего массива массивов: + + ```sh + [ + ['Albania', 'ALB', 7], + ['Bolivia', 'BOL', 7], + ['Canada', 'CAN', 6], + ['Denmark', 'DEN', 7], + ['Ethiopia', 'ETH', 8], + ['Finland', 'FIN', 7], + ['Germany', 'GER', 7], + ['Hungary', 'HUN', 7], + ['Ireland', 'IRE', 7], + ['Japan', 'JAP', 5], + ['Kenya', 'KEN', 5] + ] + ``` + +7. В приведенном выше массиве стран проверьте, существует ли страна или страны, содержащие слово 'land'. Если есть страны, содержащие 'land', выведите ее в виде массива. Если нет страны, содержащей слово 'land', выведите «All these are countries without land». + + ```sh + ['Finland', 'Iceland'] + ``` + +8. В приведенном выше массиве стран проверьте, существует ли страна или страны, заканчивающиеся на «ia». Если есть страны, оканчивающиеся на, распечатайте его, как массив. Если нет страны, содержащей слово «ai», выведите «Эти страны заканчиваются без ia». + + ```sh + ['Albania', 'Bolivia','Ethiopia'] + ``` + +9. Используя приведенный выше массив стран, найдите страну, содержащую наибольшее количество символов. + + ```sh + Ethiopia + ``` + +10. Используя приведенный выше массив стран, найдите страну, содержащую всего 5 символов. + + ```sh + ['Japan', 'Kenya'] + ``` + +11. Найдите самое длинное слово в массиве webTechs. +12. Используйте webTechs для создания следующего массива массивов: + + ```sh + [["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]] + ``` + +13. Приложение, созданное с использованием MongoDB, Express, React и Node, называется стеком MERN. Создайте аббревиатуру MERN с помощью массива mernStack. +14. Итерируйте по массиву, `["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"]`, используя цикл `for` или цикл `for of` печатайте из предметов. +15. Это массив фруктов `['banana', 'orange', 'mango', 'lemon']` измените порядок, используя цикл, без использования обратного метода. +16. Распечатайте все элементы массива, как показано ниже. + + ```js + const fullStack = [ + ["HTML", "CSS", "JS", "React"], + ["Node", "Express", "MongoDB"] + ]; + ``` + + ```sh + HTML + CSS + JS + REACT + NODE + EXPRESS + MONGODB + ``` + +### Упражнения: Уровень 3 + +1. Скопируйте массив стран (избегайте мутаций) +2. Массивы изменчивы. Создайте копию массива, которая не изменяет оригинал. Сортировать скопированный массив и сохранить в переменной _sortedCountries_ +3. Отсортируйте массив `webTechs` и массив `mernStack` +4. Извлеките все страны содержащие слово 'land' в [массив стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и распечатайте его как массив +5. Найдите страну, содержащую наибольшее количество символов в [массиве стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) +6. Извлеките все страны содержащие слово 'land' from the [массив стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и распечатайте его как массив +7. Извлеките все страны, содержащие только четыре символа из [массива стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и распечатайте его как массив +8. Извлеките все страны, содержащие два или более слов из [массив стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и распечатайте его как массив +9. Разверните [массив стран](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) и примените метод capitalize для каждой страны, храня его в виде массива + +🎉 ПОЗДРАВЛЯЕМ ! 🎉 + +[<< День 5](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/05_Day/05_day_arrays.md) | [День 7 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/07_Day/07_day_functions.md) diff --git a/RU/README.md b/RU/README.md new file mode 100644 index 0000000..ecd2a4d --- /dev/null +++ b/RU/README.md @@ -0,0 +1,623 @@ +
+

30 Days Of JavaScript

+ + + + + Twitter Follow + + +Автор: +Asabeneh Yetayeh
+ Январь, 2020 +
+ +
+ + 🇬🇧 [English](../readMe.md) + 🇪🇸 [Spanish](../Spanish/readme.md) + 🇷🇺 [Russian](./README.md) + +
+ +
+ +[День 2 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/02_Day/02_day_data_types.md) + +![Thirty Days Of JavaScript](./images/day_1_1.png) + +- [День 1](#%d0%94%d0%b5%d0%bd%d1%8c-1) + - [Вступление](#%d0%92%d1%81%d1%82%d1%83%d0%bf%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5) + - [Требования](#%d0%a2%d1%80%d0%b5%d0%b1%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f) + - [Настройка](#%d0%9d%d0%b0%d1%81%d1%82%d1%80%d0%be%d0%b9%d0%ba%d0%b0) + - [Установка Node.js](#%d0%a3%d1%81%d1%82%d0%b0%d0%bd%d0%be%d0%b2%d0%ba%d0%b0-nodejs) + - [Браузер](#%d0%91%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80) + - [Установка Google Chrome](#%d0%a3%d1%81%d1%82%d0%b0%d0%bd%d0%be%d0%b2%d0%ba%d0%b0-google-chrome) + - [Открытие Google Chrome Console](#%d0%9e%d1%82%d0%ba%d1%80%d1%8b%d1%82%d0%b8%d0%b5-google-chrome-console) + - [Написание кода на консоли браузера](#%d0%9d%d0%b0%d0%bf%d0%b8%d1%81%d0%b0%d0%bd%d0%b8%d0%b5-%d0%ba%d0%be%d0%b4%d0%b0-%d0%bd%d0%b0-%d0%ba%d0%be%d0%bd%d1%81%d0%be%d0%bb%d0%b8-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%b0) + - [Console.log](#consolelog) + - [Console.log with multiple arguments](#consolelog-with-multiple-arguments) + - [Комментарии](#%d0%9a%d0%be%d0%bc%d0%bc%d0%b5%d0%bd%d1%82%d0%b0%d1%80%d0%b8%d0%b8) + - [Синтаксис](#%d0%a1%d0%b8%d0%bd%d1%82%d0%b0%d0%ba%d1%81%d0%b8%d1%81) + - [Арифметика](#%d0%90%d1%80%d0%b8%d1%84%d0%bc%d0%b5%d1%82%d0%b8%d0%ba%d0%b0) + - [Редактор кода](#%d0%a0%d0%b5%d0%b4%d0%b0%d0%ba%d1%82%d0%be%d1%80-%d0%ba%d0%be%d0%b4%d0%b0) + - [Установка Visual Studio Code](#%d0%a3%d1%81%d1%82%d0%b0%d0%bd%d0%be%d0%b2%d0%ba%d0%b0-visual-studio-code) + - [Как использовать VS Code](#%d0%9a%d0%b0%d0%ba-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d1%82%d1%8c-vs-code) + - [Добавление JavaScript на веб-страницу](#%d0%94%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-javascript-%d0%bd%d0%b0-%d0%b2%d0%b5%d0%b1-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d1%83) + - [Встроенный скрипт](#%d0%92%d1%81%d1%82%d1%80%d0%be%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82) + - [Внутренний скрипт](#%d0%92%d0%bd%d1%83%d1%82%d1%80%d0%b5%d0%bd%d0%bd%d0%b8%d0%b9-%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82) + - [Внешний скрипт](#%d0%92%d0%bd%d0%b5%d1%88%d0%bd%d0%b8%d0%b9-%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82) + - [Несколько внешних скриптов](#%d0%9d%d0%b5%d1%81%d0%ba%d0%be%d0%bb%d1%8c%d0%ba%d0%be-%d0%b2%d0%bd%d0%b5%d1%88%d0%bd%d0%b8%d1%85-%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82%d0%be%d0%b2) + - [Введение в типы данных](#%d0%92%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b2-%d1%82%d0%b8%d0%bf%d1%8b-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85) + - [Число](#%d0%a7%d0%b8%d1%81%d0%bb%d0%be) + - [Строка](#%d0%a1%d1%82%d1%80%d0%be%d0%ba%d0%b0) + - [Пример](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80) + - [Булевый (логический) тип «boolean»](#%d0%91%d1%83%d0%bb%d0%b5%d0%b2%d1%8b%d0%b9-%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b9-%d1%82%d0%b8%d0%bf-%c2%abboolean%c2%bb) + - [Пример](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80-1) + - [Undefined](#undefined) + - [Null](#null) + - [Проверка типов данных](#%d0%9f%d1%80%d0%be%d0%b2%d0%b5%d1%80%d0%ba%d0%b0-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85) + - [Комментарии](#%d0%9a%d0%be%d0%bc%d0%bc%d0%b5%d0%bd%d1%82%d0%b0%d1%80%d0%b8%d0%b8-1) + - [Переменные](#%d0%9f%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d1%8b%d0%b5) + - [Примеры: Переменные](#%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d1%80%d1%8b-%d0%9f%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d1%8b%d0%b5) +- [💻 День 1: Упражнения](#%f0%9f%92%bb-%d0%94%d0%b5%d0%bd%d1%8c-1-%d0%a3%d0%bf%d1%80%d0%b0%d0%b6%d0%bd%d0%b5%d0%bd%d0%b8%d1%8f) + +# День 1 + +## Вступление + +**Поздравляем** с решением принять участие в 30-дневном челендже по программированию на JavaScript. В этом задании вы изучите все, что вам нужно для того, чтобы стать программистом на JavaScript, и вообще все концепции программирования. В конце конкурса вы получите сертификат 30DaysOfJavaScript. Присоединяйтесь к [группе телеграмм](https://t.me/ThirtyDaysOfJavaScript). + +**Задача 30DaysOfJavaScript** - руководство для начинающих и опытных разработчиков JavaScript. Добро пожаловать в JavaScript. Мне нравится использовать и преподавать JavaScript, и я надеюсь, что вы это сделаете. JavaScript - это язык браузера. + +В этом пошаговом руководстве вы изучите JavaScript, самый популярный язык программирования в истории человечества. +Вы используете JavaScript **_для добавления интерактивности на веб-сайты, для разработки мобильных приложений, настольных приложений, игр_**, и в настоящее время JavaScript можно использовать для **_машинного обучения_** и **_AI_**. +**_JavaScript (JS)_** вырос в популярности в последние годы и был ведущим языком программирования в течение четырех лет подряд и является наиболее используемым языком программирования на Github. + +## Требования + +Для выполнения этой задачи не требуется предварительное знание программирования. Вам нужно только: + +1. Мотивация +2. Компьютер +3. Интернет +4. Браузер +5. Редактор кода + +## Настройка + +Я считаю, что у вас есть мотивация и сильное желание быть разработчиком, компьютер и Интернет. Если у вас есть это, то у вас есть всё =). + +### Установка Node.js + +Возможно, вам это не нужно прямо сейчас, но может понадобиться позже. Устанавить [node.js](https://nodejs.org/en/). + +![Node download](images/download_node.png) + +После загрузки дважды щелкните и установите + +![Install node](images/install_node.png) + +Мы можем проверить, установлен ли узел на нашем локальном компьютере, открыв терминал устройства или командную строку. + +```sh +asabeneh $ node -v +v12.14.0 +``` + +Я использую версию node 12.14.0, которая является рекомендуемой версией узла. + +### Браузер + +Есть много браузеров там. Тем не менее, я настоятельно рекомендую Google Chrome. + +#### Установка Google Chrome + +Установите [google chrome](https://www.google.com/chrome/), если у вас его еще нет. Мы можем написать небольшой код JavaScript в консоли браузера, но мы не используем консоль браузера для разработки приложений. + +![Google Chrome](images/google_chrome.png) + +#### Открытие Google Chrome Console + +Вы можете открыть Google Chrome, нажав три точки в верхнем правом углу браузера Chrome или воспользовавшись ярлыком. Я предпочитаю использовать ярлыки. + +![Opening chrome](images/opening_developer_tool.png) + +Чтобы открыть консоль Chrome с помощью горячих клавиш. + +```sh +Mac +Command+Option+I + +Windows: +Ctl+Shift+I +``` + +![Opening console](images/opening_chrome_console_shortcut.png) + +После того, как вы откроете консоль Google Chrome, попробуйте изучить отмеченные кнопки. Мы будем проводить большую часть времени на консоли. Консоль - это место, куда идет ваш код JavaScript. Движок Google Console V8 изменяет ваш код JavaScript на машинный код. +Давайте напишем код JavaScript на консоли Google Chrome: + +![write code on console](./images/js_code_on_chrome_console.png) + +#### Написание кода на консоли браузера + +Мы можем написать любой код JavaScript на консоли Google или любой консоли браузера. Однако для решения этой проблемы мы сосредоточимся только на консоли Google Chrome. Откройте консоль, используя: + +```sh +Mac +Command+Option+I + +Windows: +Ctl+Shift+I +``` + +##### Console.log + +Чтобы написать наш первый код JavaScript, мы использовали встроенную функцию `console.log()`. Мы передали аргумент в качестве входных данных, и функция отображает вывод. Мы передали 'Hello, World' в качестве входных данных или аргумента в функцию `console.log()`. + +```js +console.log("Hello, World!"); +``` + +##### Console.log with multiple arguments + +`console.log(param1, param2, param3)`, может принимать несколько аргументов. + +![console log multiple arguments](./images/console_log_multipl_arguments.png) + +```js +console.log("Hello", "World", "!"); +console.log("HAPPY", "NEW", "YEAR", 2020); +console.log("Welcome", "to", 30, "Days", "Of", "JavaScript"); +``` + +Как вы можете видеть из приведенного выше фрагмента кода, `console.log()` может принимать несколько аргументов. + +Поздравляем! Вы написали свой первый код JavaScript, используя `console.log()`. + +##### Комментарии + +Мы добавляем комментарии к нашему коду. Комментарии очень важны, чтобы сделать код более читабельным и оставить комментарии в нашем коде. JavaScript не выполняет часть комментариев нашего кода. Любой текст, начинающийся с `//` в JavaScript, является комментарием или что-то в этом роде `/* */` является комментарием. + +**Пример: Однострочный комментарийt** + +```js +// Это первый комментарий +// Это второй комментарий +// Я однострочный комментарий +``` + +**Пример: Многострочный комментарий** + +```js +/* +Это многострочный комментарий +Многострочные комментарии могут занимать несколько строк +JavaScript - это язык Интернета +*/ +``` + +##### Синтаксис + +JavaScript это язык программирования. В результате он имеет свой синтаксис, как и другие языки программирования. Если мы не напишем синтаксис, понятный JavaScript, это вызовет различные типы ошибок. Мы рассмотрим различные виды ошибок JavaScript позже. А пока давайте посмотрим на синтаксические ошибки. + +![Error](images/raising_syntax_error.png) + +Я сделал преднамеренную ошибку. В результате консоль вызывает синтаксическую ошибку. На самом деле, синтаксис очень информативен. Он сообщает, какую ошибку мы допустили. Прочитав руководство по обратной связи об ошибках, мы можем исправить синтаксис и устранить проблему. Процесс выявления и удаления ошибок из программы называется отладкой. Давайте исправим ошибки: + +```js +console.log("Hello, World!"); +console.log("Hello, World!"); +``` + +До сих пор мы видели, как отображать текст с помощью `console.log()`. Если мы печатаем текст или строку с помощью `console.log()`, текст должен находиться в одинарных, двойных или обратных кавычках. +**Пример:** + +```js +console.log("Hello, World!"); +console.log("Hello, World!"); +console.log(`Hello, World!`); +``` + +#### Арифметика + +Теперь давайте попрактикуемся в написании кодов JavaScript с помощью `console.log()` в консоли Google Chrome для числовых типов данных. +В дополнение к тексту мы также можем выполнять математические вычисления с использованием JavaScript. Давайте сделаем следующие простые вычисления. + +![Arithmetic](images/arithmetic.png) + +```js +console.log(2 + 3); // Сложение +console.log(3 - 2); // Вычитание +console.log(2 * 3); // Умножение +console.log(3 / 2); // Разделение +console.log(3 % 2); // Модуль - поиск остатка +console.log(3 ** 2); // Экспоненциальный +``` + +### Редактор кода + +Мы можем написать наш код в консоли браузера, но это не будет работать для больших проектов. В реальной рабочей среде разработчики используют разные редакторы кода для написания своих кодов. В этом 30-дневном челендже JavaScript мы будем использовать визуальный Visual Studio Code. + +#### Установка Visual Studio Code + +VS Code - это очень популярный текстовый редактор с открытым исходным кодом. Я бы рекомендовал [скачать](https://code.visualstudio.com/) VS Code, но если вы поддерживаете другие редакторы, не стесняйтесь использовать то, что у вас есть. + +![Vscode](images/vscode.png) + +Если вы установили код VS Code, давайте начнем использовать его. + +#### Как использовать VS Code + +Откройте код VS Code, дважды щелкнув значок VS Code. Когда вы откроете его, вы получите такой интерфейс. Попробуйте взаимодействовать с помеченными значками. + +![Vscode ui](./images/vscode_ui.png) + +![Vscode add project](./images/adding_project_to_vscode.png) + +![Vscode open project](./images/opening_project_on_vscode.png) + +![script file](images/scripts_on_vscode.png) + +![running script](./images/running_script.png) + +![coding running](./images/launched_on_new_tab.png) + +## Добавление JavaScript на веб-страницу + +JavaScript можно добавить на веб-страницу тремя различными способами: + +- **_Встроенный скрипт_** +- **_Внутренний скрипт_** +- **_Внешний скрипт_** +- **_Несколько внешних скриптов_** + +В следующих разделах показаны различные способы добавления кода JavaScript на вашу веб-страницу. + +### Встроенный скрипт + +Создайте папку на рабочем столе и назовите ее `30DaysOfJS` или в любом месте и создайте файл **_index.html_** в папке проекта. Затем вставьте следующий код и откройте его в браузере, либо в [Chrome](https://www.google.com/chrome/). + +```html + + + + 30DaysOfScript: Встроенный скрипт + + + + + +``` + +Теперь вы написали свой первый встроенный скрипт. Мы можем создать всплывающее сообщение с предупреждением, используя встроенную функцию `alert()`. + +### Внутренний скрипт + +Внутренний скрипт может быть записан в `head` или `body`, но предпочтительно поместить его в `body` HTML-документа. +Во-первых, давайте напишем в верхней части страницы. + +```html + + + + 30DaysOfScript: Внутренний скрипт + + + + +``` + +Так мы пишем внутренний скрипт большую часть времени. Написание кода JavaScript в разделе `body` является наиболее предпочтительным местом. Откройте консоль браузера, чтобы увидеть вывод `console.log()` + +```html + + + + 30DaysOfScript: Внутренний скрипт + + + + + + +``` + +Откройте консоль браузера, чтобы увидеть вывод `console.log()` + +![js code from vscode](./images/js_code_vscode.png) + +### Внешний скрипт + +Подобно внутреннему сценарию, ссылка на внешний сценарий может быть в `head` или `body`, но предпочтительно помещать ее в `body`. +Во-первых, мы должны создать внешний файл JavaScript с расширением `.js`. Любой файл JavaScript заканчивается на `.js`. Создайте файл `introduction.js` внутри директории вашего проекта, напишите следующий код и подключите этот файл `.js` внизу `body`. + +```js +console.log("Добро пожаловать на 30 дней JavaScript"); +``` + +Внешние скрипты в head + +```html + + + + 30DaysOfJavaScript: Внешний скрипт + + + + +``` + +Внешние скрипты в body + +```html + + + + 30DaysOfJavaScript:External script + + + + + + +``` + +Откройте консоль браузера, чтобы увидеть вывод `console.log()`. + +### Несколько внешних скриптов + +Мы можем связать несколько внешних файлов JavaScript с веб-страницей. +Создайте файл _helloworld.js_ в папке 30DaysOfJS и напишите следующий код. + +```js +console.log("Hello, World!"); +``` + +```html + + + + Multiple External Scripts + + + + + + +``` + +Ваш файл main.js должен быть ниже всех других скриптов. Будьте внимательными, чтобы понять эту строчку. + +![Multiple Script](./images/multiple_script.png) + +## Введение в типы данных + +В JavaScript, а также в других языках программирования существуют разные типы типов данных. Ниже приведены примитивные типы данных JavaScript: _Строка, Число, Булевый (логический) тип, undefined, Null_ и _Symbol_. + +### Число + +- Integer: Целые (отрицательные, нулевые и положительные) числа + Пример: + ... -3, -2, -1, 0, 1, 2, 3 ... +- Float: десятичное число + Пример: + ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ... + +### Строка + +Строка (string) в JavaScript должна быть заключена в кавычки (одинарных, двойных или обратных кавычках). + +#### Пример + +```js +"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`; +``` + +### Булевый (логический) тип «boolean» + +Логическое значение может быть истинным или ложным. Любые сравнения возвращают логическое значение, которое является истинным или ложным. + +Логический тип данных является либо Истинным, либо Ложным значением. + +#### Пример + +```js +true; // если свет включен, значение истинно +false; // если свет выключен, значение False +``` + +### Undefined + +В JavaScript, если мы не присваиваем значение переменной, значение не определено. В дополнение к этому, если функция ничего не возвращает, она возвращает undefined. + +```js +let firstName; +console.log(firstName); // не определено, потому что оно еще не присвоено значению +``` + +### Null + +Null в JavaScript означает пустое значение. + +```js +let emptyValue = null; +``` + +## Проверка типов данных + +Чтобы проверить тип данных определенного типа данных, мы используем оператор `typeof`. Смотрите следующий пример. + +```js +console.log(typeof "Asabeneh"); // строка +console.log(typeof 5); // число +console.log(typeof true); // булевое значение +console.log(typeof null); // объект +console.log(typeof undefined); // undefined +``` + +## Комментарии + +Комментирование в JavaScript похоже на другие языки программирования. Комментарии важны для того, чтобы сделать ваш код более читабельным. + +Есть два способа комментирования: + +- _Однострочные комментарии_ +- _Многострочное комментирование_ + +```js +// комментирование самого кода одним комментарием +// let firstName = 'Asabeneh'; однострочный комментарий +// let lastName = 'Yetayeh'; однострочный комментарий +``` + +Многострочное комментирование: + +```js +/* + let location = 'Helsinki'; + let age = 100; + let isMarried = true; + This is a Multiple line comment +*/ +``` + +## Переменные + +Переменные являются _контейнером_ данных. Переменные, используются для хранения данных в ячейке памяти. Когда переменная объявлена, место в памяти зарезервировано. Когда переменной присваивается значение (данные), пространство памяти будет заполнено этими данными. Чтобы объявить переменную, мы используем ключевые слова `var`, `let` или `const`. Мы поговорим подробнее о `var`, `let` и `const` в других разделах (область действия). Пока приведенного выше объяснения достаточно. + +Для переменной, которая изменяется в другое время, мы используем `let`. Если данные не меняются вообще, мы используем `const`. Например, PI, название страны, гравитация не меняются, и мы можем использовать `const`. + +- Имя переменной JavaScript не должно начинаться с цифры. +- Имя переменной JavaScript не допускает специальных символов, кроме знака доллара и подчеркивания. +- Имя переменной JavaScript следует соглашению camelCase. +- Имя переменной JavaScript не должно содержать пробелов между словами. + +Ниже приведены допустимые примеры переменных JavaScript. + +Допустимые переменные в JavaScript: + +```js +firstName; +lastName; +country; +city; +capitalCity; +age; +isMarried; + +first_name; +last_name; +is_marreid; +capital_city; + +num1; +num_1; +_num_1; +$num1; +year2020; +year_2020; +``` + +camelCase или первый способ декларирования обычно используются в JavaScript. В этом материале мы будем использовать переменные camelCase. + +Неверное название переменных: + +```sh +first-name +1_num +num_#_1 +``` + +Давайте объявим переменные с разными типами данных. Чтобы объявить переменную, нам нужно использовать ключевое слово let или const перед именем переменной. После имени переменной мы пишем знак равенства (оператор присваивания) и значение. + +```js +// Синтаксис +let nameOfVariable = value; +``` + +### Примеры: Переменные + +```js +// Объявление разных переменных разных типов данных +let firstName = "Asabeneh"; // имя человека +let lastName = "Yetayeh"; // фамилия человека +let country = "Finland"; // страна +let city = "Helsinki"; // столица +let age = 100; // возраст в годах +let isMarried = true; + +console.log(firstName, lastName, country, city, age, isMarried); +``` + +```sh +Asabeneh Yetayeh Finland Helsinki 100 True +``` + +```js +// Объявление переменных с числовыми значениями +let age = 100; // возраст в годах +const gravity = 9.81; // сила тяжести на землю в м/с2 +const boilingPoint = 100; // температура кипения воды, температура в oC +const PI = 3.14; // геометрическая постоянная + +console.log(gravity, boilingPoint, PI); +``` + +```sh +9.81 100 3.14 +``` + +```js +// Переменные также могут быть объявлены в одну строку через запятую +let name = "Asabeneh", // Имя человека + job = "teacher", + live = "Finland"; +console.log(name, job, live); +``` + +```sh +Asabeneh teacher Finland +``` + +Когда вы запускаете файлы в папке 01-Day, вы должны получить это: + +![Day one](./images/day_1.png) + +🌕 Ты великолепен. Вы только что выполнили задание первого дня, и вы на пути к величию. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц. + +# 💻 День 1: Упражнения + +1. Написать однострочный комментарий, который говорит: _comments can make code readable_ +2. Написать еще один комментарий, который говорит: _welcome to 30DaysOfJavaScript_ +3. Написать многострочный комментарий, который говорит: _comments can make code readable, easy to use and informative_ +4. Создать файл _variable.js_, объявить переменные и назначить строковые, логические, undefined и null типы данных. +5. Создайте файл _datatypes.js_ и используйте оператор JavaScript `typeof` для проверки различных типов данных. Проверьте тип данных каждой переменной +6. Объявите четыре переменные без присвоения значений +7. Объявите четыре переменные с присвоением значений +8. Объявите переменные для хранения вашего имени, фамилии, семейного положения, страны и возраста в несколько строк +9. Объявите переменные, чтобы хранить ваши имя, фамилию, семейное положение, страну и возраст в одной строке +10. Объявите две переменные _myAge_ и _yourAge_, присвойте им начальные значения и войдите в консоль браузера. + +```sh +I am 25 years old. +You are 30 years old. +``` + +🎉 ПОЗДРАВЛЯЕМ ! 🎉 + +[День 2 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/RU/02_Day/02_day_data_types.md) diff --git a/RU/data/countries.js b/RU/data/countries.js new file mode 100644 index 0000000..e57b005 --- /dev/null +++ b/RU/data/countries.js @@ -0,0 +1,195 @@ +const countries = [ + 'Afghanistan', + 'Albania', + 'Algeria', + 'Andorra', + 'Angola', + 'Antigua and Barbuda', + 'Argentina', + 'Armenia', + 'Australia', + 'Austria', + 'Azerbaijan', + 'Bahamas', + 'Bahrain', + 'Bangladesh', + 'Barbados', + 'Belarus', + 'Belgium', + 'Belize', + 'Benin', + 'Bhutan', + 'Bolivia', + 'Bosnia and Herzegovina', + 'Botswana', + 'Brazil', + 'Brunei', + 'Bulgaria', + 'Burkina Faso', + 'Burundi', + 'Cambodia', + 'Cameroon', + 'Canada', + 'Cape Verde', + 'Central African Republic', + 'Chad', + 'Chile', + 'China', + 'Colombi', + 'Comoros', + 'Congo (Brazzaville)', + 'Congo', + 'Costa Rica', + "Cote d'Ivoire", + 'Croatia', + 'Cuba', + 'Cyprus', + 'Czech Republic', + 'Denmark', + 'Djibouti', + 'Dominica', + 'Dominican Republic', + 'East Timor (Timor Timur)', + 'Ecuador', + 'Egypt', + 'El Salvador', + 'Equatorial Guinea', + 'Eritrea', + 'Estonia', + 'Ethiopia', + 'Fiji', + 'Finland', + 'France', + 'Gabon', + 'Gambia, The', + 'Georgia', + 'Germany', + 'Ghana', + 'Greece', + 'Grenada', + 'Guatemala', + 'Guinea', + 'Guinea-Bissau', + 'Guyana', + 'Haiti', + 'Honduras', + 'Hungary', + 'Iceland', + 'India', + 'Indonesia', + 'Iran', + 'Iraq', + 'Ireland', + 'Israel', + 'Italy', + 'Jamaica', + 'Japan', + 'Jordan', + 'Kazakhstan', + 'Kenya', + 'Kiribati', + 'Korea, North', + 'Korea, South', + 'Kuwait', + 'Kyrgyzstan', + 'Laos', + 'Latvia', + 'Lebanon', + 'Lesotho', + 'Liberia', + 'Libya', + 'Liechtenstein', + 'Lithuania', + 'Luxembourg', + 'Macedonia', + 'Madagascar', + 'Malawi', + 'Malaysia', + 'Maldives', + 'Mali', + 'Malta', + 'Marshall Islands', + 'Mauritania', + 'Mauritius', + 'Mexico', + 'Micronesia', + 'Moldova', + 'Monaco', + 'Mongolia', + 'Morocco', + 'Mozambique', + 'Myanmar', + 'Namibia', + 'Nauru', + 'Nepal', + 'Netherlands', + 'New Zealand', + 'Nicaragua', + 'Niger', + 'Nigeria', + 'Norway', + 'Oman', + 'Pakistan', + 'Palau', + 'Panama', + 'Papua New Guinea', + 'Paraguay', + 'Peru', + 'Philippines', + 'Poland', + 'Portugal', + 'Qatar', + 'Romania', + 'Russia', + 'Rwanda', + 'Saint Kitts and Nevis', + 'Saint Lucia', + 'Saint Vincent', + 'Samoa', + 'San Marino', + 'Sao Tome and Principe', + 'Saudi Arabia', + 'Senegal', + 'Serbia and Montenegro', + 'Seychelles', + 'Sierra Leone', + 'Singapore', + 'Slovakia', + 'Slovenia', + 'Solomon Islands', + 'Somalia', + 'South Africa', + 'Spain', + 'Sri Lanka', + 'Sudan', + 'Suriname', + 'Swaziland', + 'Sweden', + 'Switzerland', + 'Syria', + 'Taiwan', + 'Tajikistan', + 'Tanzania', + 'Thailand', + 'Togo', + 'Tonga', + 'Trinidad and Tobago', + 'Tunisia', + 'Turkey', + 'Turkmenistan', + 'Tuvalu', + 'Uganda', + 'Ukraine', + 'United Arab Emirates', + 'United Kingdom', + 'United States', + 'Uruguay', + 'Uzbekistan', + 'Vanuatu', + 'Vatican City', + 'Venezuela', + 'Vietnam', + 'Yemen', + 'Zambia', + 'Zimbabwe' +] diff --git a/RU/images/30DaysOfJavaScript.png b/RU/images/30DaysOfJavaScript.png new file mode 100644 index 0000000..4142286 Binary files /dev/null and b/RU/images/30DaysOfJavaScript.png differ diff --git a/RU/images/adding_project_to_vscode.png b/RU/images/adding_project_to_vscode.png new file mode 100644 index 0000000..1935860 Binary files /dev/null and b/RU/images/adding_project_to_vscode.png differ diff --git a/RU/images/arithmetic.png b/RU/images/arithmetic.png new file mode 100644 index 0000000..9830916 Binary files /dev/null and b/RU/images/arithmetic.png differ diff --git a/RU/images/array_index.png b/RU/images/array_index.png new file mode 100644 index 0000000..355324e Binary files /dev/null and b/RU/images/array_index.png differ diff --git a/RU/images/assignment_operators.png b/RU/images/assignment_operators.png new file mode 100644 index 0000000..99d51d2 Binary files /dev/null and b/RU/images/assignment_operators.png differ diff --git a/RU/images/banners/Day -1 – 31.png b/RU/images/banners/Day -1 – 31.png new file mode 100644 index 0000000..d9a9639 Binary files /dev/null and b/RU/images/banners/Day -1 – 31.png differ diff --git a/RU/images/banners/day_1_1.png b/RU/images/banners/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/RU/images/banners/day_1_1.png differ diff --git a/RU/images/banners/day_1_10.png b/RU/images/banners/day_1_10.png new file mode 100644 index 0000000..e063dec Binary files /dev/null and b/RU/images/banners/day_1_10.png differ diff --git a/RU/images/banners/day_1_11.png b/RU/images/banners/day_1_11.png new file mode 100644 index 0000000..0c2d60b Binary files /dev/null and b/RU/images/banners/day_1_11.png differ diff --git a/RU/images/banners/day_1_12.png b/RU/images/banners/day_1_12.png new file mode 100644 index 0000000..232ac85 Binary files /dev/null and b/RU/images/banners/day_1_12.png differ diff --git a/RU/images/banners/day_1_13.png b/RU/images/banners/day_1_13.png new file mode 100644 index 0000000..488f522 Binary files /dev/null and b/RU/images/banners/day_1_13.png differ diff --git a/RU/images/banners/day_1_14.png b/RU/images/banners/day_1_14.png new file mode 100644 index 0000000..4c5a568 Binary files /dev/null and b/RU/images/banners/day_1_14.png differ diff --git a/RU/images/banners/day_1_15.png b/RU/images/banners/day_1_15.png new file mode 100644 index 0000000..e3013f6 Binary files /dev/null and b/RU/images/banners/day_1_15.png differ diff --git a/RU/images/banners/day_1_16.png b/RU/images/banners/day_1_16.png new file mode 100644 index 0000000..d116060 Binary files /dev/null and b/RU/images/banners/day_1_16.png differ diff --git a/RU/images/banners/day_1_17.png b/RU/images/banners/day_1_17.png new file mode 100644 index 0000000..69cf7ae Binary files /dev/null and b/RU/images/banners/day_1_17.png differ diff --git a/RU/images/banners/day_1_18.png b/RU/images/banners/day_1_18.png new file mode 100644 index 0000000..8b69340 Binary files /dev/null and b/RU/images/banners/day_1_18.png differ diff --git a/RU/images/banners/day_1_19.png b/RU/images/banners/day_1_19.png new file mode 100644 index 0000000..2a785c9 Binary files /dev/null and b/RU/images/banners/day_1_19.png differ diff --git a/RU/images/banners/day_1_2.png b/RU/images/banners/day_1_2.png new file mode 100644 index 0000000..0f6eefb Binary files /dev/null and b/RU/images/banners/day_1_2.png differ diff --git a/RU/images/banners/day_1_20.png b/RU/images/banners/day_1_20.png new file mode 100644 index 0000000..befe1fc Binary files /dev/null and b/RU/images/banners/day_1_20.png differ diff --git a/RU/images/banners/day_1_21.png b/RU/images/banners/day_1_21.png new file mode 100644 index 0000000..634d1eb Binary files /dev/null and b/RU/images/banners/day_1_21.png differ diff --git a/RU/images/banners/day_1_22.png b/RU/images/banners/day_1_22.png new file mode 100644 index 0000000..81e33d9 Binary files /dev/null and b/RU/images/banners/day_1_22.png differ diff --git a/RU/images/banners/day_1_23.png b/RU/images/banners/day_1_23.png new file mode 100644 index 0000000..ceb0321 Binary files /dev/null and b/RU/images/banners/day_1_23.png differ diff --git a/RU/images/banners/day_1_24.png b/RU/images/banners/day_1_24.png new file mode 100644 index 0000000..9c8ec46 Binary files /dev/null and b/RU/images/banners/day_1_24.png differ diff --git a/RU/images/banners/day_1_25.png b/RU/images/banners/day_1_25.png new file mode 100644 index 0000000..60a211e Binary files /dev/null and b/RU/images/banners/day_1_25.png differ diff --git a/RU/images/banners/day_1_26.png b/RU/images/banners/day_1_26.png new file mode 100644 index 0000000..f187f2c Binary files /dev/null and b/RU/images/banners/day_1_26.png differ diff --git a/RU/images/banners/day_1_27.png b/RU/images/banners/day_1_27.png new file mode 100644 index 0000000..8637069 Binary files /dev/null and b/RU/images/banners/day_1_27.png differ diff --git a/RU/images/banners/day_1_28.png b/RU/images/banners/day_1_28.png new file mode 100644 index 0000000..1858aca Binary files /dev/null and b/RU/images/banners/day_1_28.png differ diff --git a/RU/images/banners/day_1_29.png b/RU/images/banners/day_1_29.png new file mode 100644 index 0000000..959ee36 Binary files /dev/null and b/RU/images/banners/day_1_29.png differ diff --git a/RU/images/banners/day_1_3.png b/RU/images/banners/day_1_3.png new file mode 100644 index 0000000..1268d2c Binary files /dev/null and b/RU/images/banners/day_1_3.png differ diff --git a/RU/images/banners/day_1_30.png b/RU/images/banners/day_1_30.png new file mode 100644 index 0000000..18a77c4 Binary files /dev/null and b/RU/images/banners/day_1_30.png differ diff --git a/RU/images/banners/day_1_4.png b/RU/images/banners/day_1_4.png new file mode 100644 index 0000000..d5262c6 Binary files /dev/null and b/RU/images/banners/day_1_4.png differ diff --git a/RU/images/banners/day_1_5.png b/RU/images/banners/day_1_5.png new file mode 100644 index 0000000..21bc08c Binary files /dev/null and b/RU/images/banners/day_1_5.png differ diff --git a/RU/images/banners/day_1_6.png b/RU/images/banners/day_1_6.png new file mode 100644 index 0000000..dbea5fd Binary files /dev/null and b/RU/images/banners/day_1_6.png differ diff --git a/RU/images/banners/day_1_7.png b/RU/images/banners/day_1_7.png new file mode 100644 index 0000000..eff8dac Binary files /dev/null and b/RU/images/banners/day_1_7.png differ diff --git a/RU/images/banners/day_1_8.png b/RU/images/banners/day_1_8.png new file mode 100644 index 0000000..ddf9007 Binary files /dev/null and b/RU/images/banners/day_1_8.png differ diff --git a/RU/images/banners/day_1_9.png b/RU/images/banners/day_1_9.png new file mode 100644 index 0000000..1cf688b Binary files /dev/null and b/RU/images/banners/day_1_9.png differ diff --git a/RU/images/comparison_operators.png b/RU/images/comparison_operators.png new file mode 100644 index 0000000..26ccb91 Binary files /dev/null and b/RU/images/comparison_operators.png differ diff --git a/RU/images/console_log_multipl_arguments.png b/RU/images/console_log_multipl_arguments.png new file mode 100644 index 0000000..f324a90 Binary files /dev/null and b/RU/images/console_log_multipl_arguments.png differ diff --git a/RU/images/date_time_object.png b/RU/images/date_time_object.png new file mode 100644 index 0000000..c5297c7 Binary files /dev/null and b/RU/images/date_time_object.png differ diff --git a/RU/images/day_1.png b/RU/images/day_1.png new file mode 100644 index 0000000..7daf57f Binary files /dev/null and b/RU/images/day_1.png differ diff --git a/RU/images/day_1_1.png b/RU/images/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/RU/images/day_1_1.png differ diff --git a/RU/images/download_node.png b/RU/images/download_node.png new file mode 100644 index 0000000..f290b20 Binary files /dev/null and b/RU/images/download_node.png differ diff --git a/RU/images/google_chrome.png b/RU/images/google_chrome.png new file mode 100644 index 0000000..af06acd Binary files /dev/null and b/RU/images/google_chrome.png differ diff --git a/RU/images/install_node.png b/RU/images/install_node.png new file mode 100644 index 0000000..e5aecf1 Binary files /dev/null and b/RU/images/install_node.png differ diff --git a/RU/images/js_code_on_chrome_console.png b/RU/images/js_code_on_chrome_console.png new file mode 100644 index 0000000..7d6002c Binary files /dev/null and b/RU/images/js_code_on_chrome_console.png differ diff --git a/RU/images/js_code_vscode.png b/RU/images/js_code_vscode.png new file mode 100644 index 0000000..6e1a661 Binary files /dev/null and b/RU/images/js_code_vscode.png differ diff --git a/RU/images/launched_on_new_tab.png b/RU/images/launched_on_new_tab.png new file mode 100644 index 0000000..ed377dc Binary files /dev/null and b/RU/images/launched_on_new_tab.png differ diff --git a/RU/images/local_storage.png b/RU/images/local_storage.png new file mode 100644 index 0000000..0876852 Binary files /dev/null and b/RU/images/local_storage.png differ diff --git a/RU/images/multiple_script.png b/RU/images/multiple_script.png new file mode 100644 index 0000000..caa067f Binary files /dev/null and b/RU/images/multiple_script.png differ diff --git a/RU/images/opening_chrome_console_shortcut.png b/RU/images/opening_chrome_console_shortcut.png new file mode 100644 index 0000000..eace03f Binary files /dev/null and b/RU/images/opening_chrome_console_shortcut.png differ diff --git a/RU/images/opening_developer_tool.png b/RU/images/opening_developer_tool.png new file mode 100644 index 0000000..6eb33dd Binary files /dev/null and b/RU/images/opening_developer_tool.png differ diff --git a/RU/images/opening_project_on_vscode.png b/RU/images/opening_project_on_vscode.png new file mode 100644 index 0000000..908c8fd Binary files /dev/null and b/RU/images/opening_project_on_vscode.png differ diff --git a/RU/images/projects/congratulations.gif b/RU/images/projects/congratulations.gif new file mode 100644 index 0000000..cddd6c4 Binary files /dev/null and b/RU/images/projects/congratulations.gif differ diff --git a/RU/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif b/RU/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif new file mode 100644 index 0000000..c8d2f2b Binary files /dev/null and b/RU/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif differ diff --git a/RU/images/projects/dom_min_project_bar_graph_day_5.1.gif b/RU/images/projects/dom_min_project_bar_graph_day_5.1.gif new file mode 100644 index 0000000..a7d7962 Binary files /dev/null and b/RU/images/projects/dom_min_project_bar_graph_day_5.1.gif differ diff --git a/RU/images/projects/dom_min_project_bar_graph_day_5.1.png b/RU/images/projects/dom_min_project_bar_graph_day_5.1.png new file mode 100644 index 0000000..0b6ccf7 Binary files /dev/null and b/RU/images/projects/dom_min_project_bar_graph_day_5.1.png differ diff --git a/RU/images/projects/dom_min_project_challenge_info_day_1.1.gif b/RU/images/projects/dom_min_project_challenge_info_day_1.1.gif new file mode 100644 index 0000000..0551771 Binary files /dev/null and b/RU/images/projects/dom_min_project_challenge_info_day_1.1.gif differ diff --git a/RU/images/projects/dom_min_project_challenge_info_day_1.1.png b/RU/images/projects/dom_min_project_challenge_info_day_1.1.png new file mode 100644 index 0000000..01a8d4f Binary files /dev/null and b/RU/images/projects/dom_min_project_challenge_info_day_1.1.png differ diff --git a/RU/images/projects/dom_min_project_countries_aray_day_2.2.png b/RU/images/projects/dom_min_project_countries_aray_day_2.2.png new file mode 100644 index 0000000..ca0e344 Binary files /dev/null and b/RU/images/projects/dom_min_project_countries_aray_day_2.2.png differ diff --git a/RU/images/projects/dom_min_project_day_7.1.gif b/RU/images/projects/dom_min_project_day_7.1.gif new file mode 100644 index 0000000..51bdadb Binary files /dev/null and b/RU/images/projects/dom_min_project_day_7.1.gif differ diff --git a/RU/images/projects/dom_min_project_day_number_generators_2.1.png b/RU/images/projects/dom_min_project_day_number_generators_2.1.png new file mode 100644 index 0000000..d69a6c2 Binary files /dev/null and b/RU/images/projects/dom_min_project_day_number_generators_2.1.png differ diff --git a/RU/images/projects/dom_min_project_keycode_day_3.2.gif b/RU/images/projects/dom_min_project_keycode_day_3.2.gif new file mode 100644 index 0000000..7c75c14 Binary files /dev/null and b/RU/images/projects/dom_min_project_keycode_day_3.2.gif differ diff --git a/RU/images/projects/dom_min_project_number_generator_day_3.1.gif b/RU/images/projects/dom_min_project_number_generator_day_3.1.gif new file mode 100644 index 0000000..59a8dd0 Binary files /dev/null and b/RU/images/projects/dom_min_project_number_generator_day_3.1.gif differ diff --git a/RU/images/projects/dom_min_project_solar_system_day_4.1.gif b/RU/images/projects/dom_min_project_solar_system_day_4.1.gif new file mode 100644 index 0000000..d88b04b Binary files /dev/null and b/RU/images/projects/dom_min_project_solar_system_day_4.1.gif differ diff --git a/RU/images/projects/dom_min_project_solar_system_day_4.1.mkv b/RU/images/projects/dom_min_project_solar_system_day_4.1.mkv new file mode 100644 index 0000000..1ed941c Binary files /dev/null and b/RU/images/projects/dom_min_project_solar_system_day_4.1.mkv differ diff --git a/RU/images/projects/dom_min_project_solar_system_day_4.1.mp4 b/RU/images/projects/dom_min_project_solar_system_day_4.1.mp4 new file mode 100644 index 0000000..69ce936 Binary files /dev/null and b/RU/images/projects/dom_min_project_solar_system_day_4.1.mp4 differ diff --git a/RU/images/projects/dom_mini_project_challenge_info_day_2.3.gif b/RU/images/projects/dom_mini_project_challenge_info_day_2.3.gif new file mode 100644 index 0000000..571ea6f Binary files /dev/null and b/RU/images/projects/dom_mini_project_challenge_info_day_2.3.gif differ diff --git a/RU/images/projects/dom_mini_project_challenge_info_day_2.3.png b/RU/images/projects/dom_mini_project_challenge_info_day_2.3.png new file mode 100644 index 0000000..3387bea Binary files /dev/null and b/RU/images/projects/dom_mini_project_challenge_info_day_2.3.png differ diff --git a/RU/images/projects/dom_mini_project_countries_day_6.1.gif b/RU/images/projects/dom_mini_project_countries_day_6.1.gif new file mode 100644 index 0000000..8a8f09a Binary files /dev/null and b/RU/images/projects/dom_mini_project_countries_day_6.1.gif differ diff --git a/RU/images/projects/dom_mini_project_countries_object_day_10.1.gif b/RU/images/projects/dom_mini_project_countries_object_day_10.1.gif new file mode 100644 index 0000000..03b1e35 Binary files /dev/null and b/RU/images/projects/dom_mini_project_countries_object_day_10.1.gif differ diff --git a/RU/images/projects/dom_mini_project_form_validation_day_10.2.1.png b/RU/images/projects/dom_mini_project_form_validation_day_10.2.1.png new file mode 100644 index 0000000..9d2c2b3 Binary files /dev/null and b/RU/images/projects/dom_mini_project_form_validation_day_10.2.1.png differ diff --git a/RU/images/projects/dom_mini_project_form_validation_day_10.2.png b/RU/images/projects/dom_mini_project_form_validation_day_10.2.png new file mode 100644 index 0000000..ca7cdd5 Binary files /dev/null and b/RU/images/projects/dom_mini_project_form_validation_day_10.2.png differ diff --git a/RU/images/projects/dom_mini_project_leaderboard_day_8.1.gif b/RU/images/projects/dom_mini_project_leaderboard_day_8.1.gif new file mode 100644 index 0000000..789d0cb Binary files /dev/null and b/RU/images/projects/dom_mini_project_leaderboard_day_8.1.gif differ diff --git a/RU/images/projects/dom_mini_project_leaderboard_day_8.1.png b/RU/images/projects/dom_mini_project_leaderboard_day_8.1.png new file mode 100644 index 0000000..2956fa0 Binary files /dev/null and b/RU/images/projects/dom_mini_project_leaderboard_day_8.1.png differ diff --git a/RU/images/projects/dom_mini_project_slider_day_7.1.gif b/RU/images/projects/dom_mini_project_slider_day_7.1.gif new file mode 100644 index 0000000..51bdadb Binary files /dev/null and b/RU/images/projects/dom_mini_project_slider_day_7.1.gif differ diff --git a/RU/images/raising_syntax_error.png b/RU/images/raising_syntax_error.png new file mode 100644 index 0000000..81f6245 Binary files /dev/null and b/RU/images/raising_syntax_error.png differ diff --git a/RU/images/regex.png b/RU/images/regex.png new file mode 100644 index 0000000..c7116b4 Binary files /dev/null and b/RU/images/regex.png differ diff --git a/RU/images/running_script.png b/RU/images/running_script.png new file mode 100644 index 0000000..deac13d Binary files /dev/null and b/RU/images/running_script.png differ diff --git a/RU/images/scripts_on_vscode.png b/RU/images/scripts_on_vscode.png new file mode 100644 index 0000000..f6257be Binary files /dev/null and b/RU/images/scripts_on_vscode.png differ diff --git a/RU/images/string_indexes.png b/RU/images/string_indexes.png new file mode 100644 index 0000000..cc2f638 Binary files /dev/null and b/RU/images/string_indexes.png differ diff --git a/RU/images/vscode.png b/RU/images/vscode.png new file mode 100644 index 0000000..724fc10 Binary files /dev/null and b/RU/images/vscode.png differ diff --git a/RU/images/vscode_ui.png b/RU/images/vscode_ui.png new file mode 100644 index 0000000..7210a08 Binary files /dev/null and b/RU/images/vscode_ui.png differ diff --git a/RU/images/web_storage.png b/RU/images/web_storage.png new file mode 100644 index 0000000..46f9311 Binary files /dev/null and b/RU/images/web_storage.png differ diff --git a/RU/index.html b/RU/index.html new file mode 100644 index 0000000..14e41c3 --- /dev/null +++ b/RU/index.html @@ -0,0 +1,128 @@ + + + + + Document Object Model:30 Days Of JavaScript + + + + + + +
+

Asabeneh Yetayeh challenges in 2020

+

30DaysOfJavaScript Challenge

+

+ +
+ + + + + \ No newline at end of file diff --git a/Spanish/images/30DaysOfJavaScript.png b/Spanish/images/30DaysOfJavaScript.png new file mode 100644 index 0000000..4142286 Binary files /dev/null and b/Spanish/images/30DaysOfJavaScript.png differ diff --git a/Spanish/images/adding_project_to_vscode.png b/Spanish/images/adding_project_to_vscode.png new file mode 100644 index 0000000..1935860 Binary files /dev/null and b/Spanish/images/adding_project_to_vscode.png differ diff --git a/Spanish/images/arithmetic.png b/Spanish/images/arithmetic.png new file mode 100644 index 0000000..9830916 Binary files /dev/null and b/Spanish/images/arithmetic.png differ diff --git a/Spanish/images/array_index.png b/Spanish/images/array_index.png new file mode 100644 index 0000000..355324e Binary files /dev/null and b/Spanish/images/array_index.png differ diff --git a/Spanish/images/assignment_operators.png b/Spanish/images/assignment_operators.png new file mode 100644 index 0000000..99d51d2 Binary files /dev/null and b/Spanish/images/assignment_operators.png differ diff --git a/Spanish/images/banners/Day -1 – 31.png b/Spanish/images/banners/Day -1 – 31.png new file mode 100644 index 0000000..d9a9639 Binary files /dev/null and b/Spanish/images/banners/Day -1 – 31.png differ diff --git a/Spanish/images/banners/day_1_1.png b/Spanish/images/banners/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/Spanish/images/banners/day_1_1.png differ diff --git a/Spanish/images/banners/day_1_10.png b/Spanish/images/banners/day_1_10.png new file mode 100644 index 0000000..e063dec Binary files /dev/null and b/Spanish/images/banners/day_1_10.png differ diff --git a/Spanish/images/banners/day_1_11.png b/Spanish/images/banners/day_1_11.png new file mode 100644 index 0000000..0c2d60b Binary files /dev/null and b/Spanish/images/banners/day_1_11.png differ diff --git a/Spanish/images/banners/day_1_12.png b/Spanish/images/banners/day_1_12.png new file mode 100644 index 0000000..232ac85 Binary files /dev/null and b/Spanish/images/banners/day_1_12.png differ diff --git a/Spanish/images/banners/day_1_13.png b/Spanish/images/banners/day_1_13.png new file mode 100644 index 0000000..488f522 Binary files /dev/null and b/Spanish/images/banners/day_1_13.png differ diff --git a/Spanish/images/banners/day_1_14.png b/Spanish/images/banners/day_1_14.png new file mode 100644 index 0000000..4c5a568 Binary files /dev/null and b/Spanish/images/banners/day_1_14.png differ diff --git a/Spanish/images/banners/day_1_15.png b/Spanish/images/banners/day_1_15.png new file mode 100644 index 0000000..e3013f6 Binary files /dev/null and b/Spanish/images/banners/day_1_15.png differ diff --git a/Spanish/images/banners/day_1_16.png b/Spanish/images/banners/day_1_16.png new file mode 100644 index 0000000..d116060 Binary files /dev/null and b/Spanish/images/banners/day_1_16.png differ diff --git a/Spanish/images/banners/day_1_17.png b/Spanish/images/banners/day_1_17.png new file mode 100644 index 0000000..69cf7ae Binary files /dev/null and b/Spanish/images/banners/day_1_17.png differ diff --git a/Spanish/images/banners/day_1_18.png b/Spanish/images/banners/day_1_18.png new file mode 100644 index 0000000..8b69340 Binary files /dev/null and b/Spanish/images/banners/day_1_18.png differ diff --git a/Spanish/images/banners/day_1_19.png b/Spanish/images/banners/day_1_19.png new file mode 100644 index 0000000..2a785c9 Binary files /dev/null and b/Spanish/images/banners/day_1_19.png differ diff --git a/Spanish/images/banners/day_1_2.png b/Spanish/images/banners/day_1_2.png new file mode 100644 index 0000000..0f6eefb Binary files /dev/null and b/Spanish/images/banners/day_1_2.png differ diff --git a/Spanish/images/banners/day_1_20.png b/Spanish/images/banners/day_1_20.png new file mode 100644 index 0000000..befe1fc Binary files /dev/null and b/Spanish/images/banners/day_1_20.png differ diff --git a/Spanish/images/banners/day_1_21.png b/Spanish/images/banners/day_1_21.png new file mode 100644 index 0000000..634d1eb Binary files /dev/null and b/Spanish/images/banners/day_1_21.png differ diff --git a/Spanish/images/banners/day_1_22.png b/Spanish/images/banners/day_1_22.png new file mode 100644 index 0000000..81e33d9 Binary files /dev/null and b/Spanish/images/banners/day_1_22.png differ diff --git a/Spanish/images/banners/day_1_23.png b/Spanish/images/banners/day_1_23.png new file mode 100644 index 0000000..ceb0321 Binary files /dev/null and b/Spanish/images/banners/day_1_23.png differ diff --git a/Spanish/images/banners/day_1_24.png b/Spanish/images/banners/day_1_24.png new file mode 100644 index 0000000..9c8ec46 Binary files /dev/null and b/Spanish/images/banners/day_1_24.png differ diff --git a/Spanish/images/banners/day_1_25.png b/Spanish/images/banners/day_1_25.png new file mode 100644 index 0000000..60a211e Binary files /dev/null and b/Spanish/images/banners/day_1_25.png differ diff --git a/Spanish/images/banners/day_1_26.png b/Spanish/images/banners/day_1_26.png new file mode 100644 index 0000000..f187f2c Binary files /dev/null and b/Spanish/images/banners/day_1_26.png differ diff --git a/Spanish/images/banners/day_1_27.png b/Spanish/images/banners/day_1_27.png new file mode 100644 index 0000000..8637069 Binary files /dev/null and b/Spanish/images/banners/day_1_27.png differ diff --git a/Spanish/images/banners/day_1_28.png b/Spanish/images/banners/day_1_28.png new file mode 100644 index 0000000..1858aca Binary files /dev/null and b/Spanish/images/banners/day_1_28.png differ diff --git a/Spanish/images/banners/day_1_29.png b/Spanish/images/banners/day_1_29.png new file mode 100644 index 0000000..959ee36 Binary files /dev/null and b/Spanish/images/banners/day_1_29.png differ diff --git a/Spanish/images/banners/day_1_3.png b/Spanish/images/banners/day_1_3.png new file mode 100644 index 0000000..1268d2c Binary files /dev/null and b/Spanish/images/banners/day_1_3.png differ diff --git a/Spanish/images/banners/day_1_30.png b/Spanish/images/banners/day_1_30.png new file mode 100644 index 0000000..18a77c4 Binary files /dev/null and b/Spanish/images/banners/day_1_30.png differ diff --git a/Spanish/images/banners/day_1_4.png b/Spanish/images/banners/day_1_4.png new file mode 100644 index 0000000..d5262c6 Binary files /dev/null and b/Spanish/images/banners/day_1_4.png differ diff --git a/Spanish/images/banners/day_1_5.png b/Spanish/images/banners/day_1_5.png new file mode 100644 index 0000000..21bc08c Binary files /dev/null and b/Spanish/images/banners/day_1_5.png differ diff --git a/Spanish/images/banners/day_1_6.png b/Spanish/images/banners/day_1_6.png new file mode 100644 index 0000000..dbea5fd Binary files /dev/null and b/Spanish/images/banners/day_1_6.png differ diff --git a/Spanish/images/banners/day_1_7.png b/Spanish/images/banners/day_1_7.png new file mode 100644 index 0000000..eff8dac Binary files /dev/null and b/Spanish/images/banners/day_1_7.png differ diff --git a/Spanish/images/banners/day_1_8.png b/Spanish/images/banners/day_1_8.png new file mode 100644 index 0000000..ddf9007 Binary files /dev/null and b/Spanish/images/banners/day_1_8.png differ diff --git a/Spanish/images/banners/day_1_9.png b/Spanish/images/banners/day_1_9.png new file mode 100644 index 0000000..1cf688b Binary files /dev/null and b/Spanish/images/banners/day_1_9.png differ diff --git a/Spanish/images/comparison_operators.png b/Spanish/images/comparison_operators.png new file mode 100644 index 0000000..26ccb91 Binary files /dev/null and b/Spanish/images/comparison_operators.png differ diff --git a/Spanish/images/console_log_multipl_arguments.png b/Spanish/images/console_log_multipl_arguments.png new file mode 100644 index 0000000..f324a90 Binary files /dev/null and b/Spanish/images/console_log_multipl_arguments.png differ diff --git a/Spanish/images/date_time_object.png b/Spanish/images/date_time_object.png new file mode 100644 index 0000000..c5297c7 Binary files /dev/null and b/Spanish/images/date_time_object.png differ diff --git a/Spanish/images/day_1.png b/Spanish/images/day_1.png new file mode 100644 index 0000000..7daf57f Binary files /dev/null and b/Spanish/images/day_1.png differ diff --git a/Spanish/images/day_1_1.png b/Spanish/images/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/Spanish/images/day_1_1.png differ diff --git a/Spanish/images/download_node.png b/Spanish/images/download_node.png new file mode 100644 index 0000000..f290b20 Binary files /dev/null and b/Spanish/images/download_node.png differ diff --git a/Spanish/images/google_chrome.png b/Spanish/images/google_chrome.png new file mode 100644 index 0000000..af06acd Binary files /dev/null and b/Spanish/images/google_chrome.png differ diff --git a/Spanish/images/install_node.png b/Spanish/images/install_node.png new file mode 100644 index 0000000..e5aecf1 Binary files /dev/null and b/Spanish/images/install_node.png differ diff --git a/Spanish/images/js_code_on_chrome_console.png b/Spanish/images/js_code_on_chrome_console.png new file mode 100644 index 0000000..7d6002c Binary files /dev/null and b/Spanish/images/js_code_on_chrome_console.png differ diff --git a/Spanish/images/js_code_vscode.png b/Spanish/images/js_code_vscode.png new file mode 100644 index 0000000..6e1a661 Binary files /dev/null and b/Spanish/images/js_code_vscode.png differ diff --git a/Spanish/images/launched_on_new_tab.png b/Spanish/images/launched_on_new_tab.png new file mode 100644 index 0000000..ed377dc Binary files /dev/null and b/Spanish/images/launched_on_new_tab.png differ diff --git a/Spanish/images/local_storage.png b/Spanish/images/local_storage.png new file mode 100644 index 0000000..0876852 Binary files /dev/null and b/Spanish/images/local_storage.png differ diff --git a/Spanish/images/multiple_script.png b/Spanish/images/multiple_script.png new file mode 100644 index 0000000..caa067f Binary files /dev/null and b/Spanish/images/multiple_script.png differ diff --git a/Spanish/images/opening_chrome_console_shortcut.png b/Spanish/images/opening_chrome_console_shortcut.png new file mode 100644 index 0000000..eace03f Binary files /dev/null and b/Spanish/images/opening_chrome_console_shortcut.png differ diff --git a/Spanish/images/opening_developer_tool.png b/Spanish/images/opening_developer_tool.png new file mode 100644 index 0000000..6eb33dd Binary files /dev/null and b/Spanish/images/opening_developer_tool.png differ diff --git a/Spanish/images/opening_project_on_vscode.png b/Spanish/images/opening_project_on_vscode.png new file mode 100644 index 0000000..908c8fd Binary files /dev/null and b/Spanish/images/opening_project_on_vscode.png differ diff --git a/Spanish/images/projects/congratulations.gif b/Spanish/images/projects/congratulations.gif new file mode 100644 index 0000000..cddd6c4 Binary files /dev/null and b/Spanish/images/projects/congratulations.gif differ diff --git a/Spanish/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif b/Spanish/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif new file mode 100644 index 0000000..c8d2f2b Binary files /dev/null and b/Spanish/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif differ diff --git a/Spanish/images/projects/dom_min_project_bar_graph_day_5.1.gif b/Spanish/images/projects/dom_min_project_bar_graph_day_5.1.gif new file mode 100644 index 0000000..a7d7962 Binary files /dev/null and b/Spanish/images/projects/dom_min_project_bar_graph_day_5.1.gif differ diff --git a/Spanish/images/projects/dom_min_project_bar_graph_day_5.1.png b/Spanish/images/projects/dom_min_project_bar_graph_day_5.1.png new file mode 100644 index 0000000..0b6ccf7 Binary files /dev/null and b/Spanish/images/projects/dom_min_project_bar_graph_day_5.1.png differ diff --git a/Spanish/images/projects/dom_min_project_challenge_info_day_1.1.gif b/Spanish/images/projects/dom_min_project_challenge_info_day_1.1.gif new file mode 100644 index 0000000..0551771 Binary files /dev/null and b/Spanish/images/projects/dom_min_project_challenge_info_day_1.1.gif differ diff --git a/Spanish/images/projects/dom_min_project_challenge_info_day_1.1.png b/Spanish/images/projects/dom_min_project_challenge_info_day_1.1.png new file mode 100644 index 0000000..01a8d4f Binary files /dev/null and b/Spanish/images/projects/dom_min_project_challenge_info_day_1.1.png differ diff --git a/Spanish/images/projects/dom_min_project_countries_aray_day_2.2.png b/Spanish/images/projects/dom_min_project_countries_aray_day_2.2.png new file mode 100644 index 0000000..ca0e344 Binary files /dev/null and b/Spanish/images/projects/dom_min_project_countries_aray_day_2.2.png differ diff --git a/Spanish/images/projects/dom_min_project_day_7.1.gif b/Spanish/images/projects/dom_min_project_day_7.1.gif new file mode 100644 index 0000000..51bdadb Binary files /dev/null and b/Spanish/images/projects/dom_min_project_day_7.1.gif differ diff --git a/Spanish/images/projects/dom_min_project_day_number_generators_2.1.png b/Spanish/images/projects/dom_min_project_day_number_generators_2.1.png new file mode 100644 index 0000000..d69a6c2 Binary files /dev/null and b/Spanish/images/projects/dom_min_project_day_number_generators_2.1.png differ diff --git a/Spanish/images/projects/dom_min_project_keycode_day_3.2.gif b/Spanish/images/projects/dom_min_project_keycode_day_3.2.gif new file mode 100644 index 0000000..7c75c14 Binary files /dev/null and b/Spanish/images/projects/dom_min_project_keycode_day_3.2.gif differ diff --git a/Spanish/images/projects/dom_min_project_number_generator_day_3.1.gif b/Spanish/images/projects/dom_min_project_number_generator_day_3.1.gif new file mode 100644 index 0000000..59a8dd0 Binary files /dev/null and b/Spanish/images/projects/dom_min_project_number_generator_day_3.1.gif differ diff --git a/Spanish/images/projects/dom_min_project_solar_system_day_4.1.gif b/Spanish/images/projects/dom_min_project_solar_system_day_4.1.gif new file mode 100644 index 0000000..d88b04b Binary files /dev/null and b/Spanish/images/projects/dom_min_project_solar_system_day_4.1.gif differ diff --git a/Spanish/images/projects/dom_min_project_solar_system_day_4.1.mkv b/Spanish/images/projects/dom_min_project_solar_system_day_4.1.mkv new file mode 100644 index 0000000..1ed941c Binary files /dev/null and b/Spanish/images/projects/dom_min_project_solar_system_day_4.1.mkv differ diff --git a/Spanish/images/projects/dom_min_project_solar_system_day_4.1.mp4 b/Spanish/images/projects/dom_min_project_solar_system_day_4.1.mp4 new file mode 100644 index 0000000..69ce936 Binary files /dev/null and b/Spanish/images/projects/dom_min_project_solar_system_day_4.1.mp4 differ diff --git a/Spanish/images/projects/dom_mini_project_challenge_info_day_2.3.gif b/Spanish/images/projects/dom_mini_project_challenge_info_day_2.3.gif new file mode 100644 index 0000000..571ea6f Binary files /dev/null and b/Spanish/images/projects/dom_mini_project_challenge_info_day_2.3.gif differ diff --git a/Spanish/images/projects/dom_mini_project_challenge_info_day_2.3.png b/Spanish/images/projects/dom_mini_project_challenge_info_day_2.3.png new file mode 100644 index 0000000..3387bea Binary files /dev/null and b/Spanish/images/projects/dom_mini_project_challenge_info_day_2.3.png differ diff --git a/Spanish/images/projects/dom_mini_project_countries_day_6.1.gif b/Spanish/images/projects/dom_mini_project_countries_day_6.1.gif new file mode 100644 index 0000000..8a8f09a Binary files /dev/null and b/Spanish/images/projects/dom_mini_project_countries_day_6.1.gif differ diff --git a/Spanish/images/projects/dom_mini_project_countries_object_day_10.1.gif b/Spanish/images/projects/dom_mini_project_countries_object_day_10.1.gif new file mode 100644 index 0000000..03b1e35 Binary files /dev/null and b/Spanish/images/projects/dom_mini_project_countries_object_day_10.1.gif differ diff --git a/Spanish/images/projects/dom_mini_project_form_validation_day_10.2.1.png b/Spanish/images/projects/dom_mini_project_form_validation_day_10.2.1.png new file mode 100644 index 0000000..9d2c2b3 Binary files /dev/null and b/Spanish/images/projects/dom_mini_project_form_validation_day_10.2.1.png differ diff --git a/Spanish/images/projects/dom_mini_project_form_validation_day_10.2.png b/Spanish/images/projects/dom_mini_project_form_validation_day_10.2.png new file mode 100644 index 0000000..ca7cdd5 Binary files /dev/null and b/Spanish/images/projects/dom_mini_project_form_validation_day_10.2.png differ diff --git a/Spanish/images/projects/dom_mini_project_leaderboard_day_8.1.gif b/Spanish/images/projects/dom_mini_project_leaderboard_day_8.1.gif new file mode 100644 index 0000000..789d0cb Binary files /dev/null and b/Spanish/images/projects/dom_mini_project_leaderboard_day_8.1.gif differ diff --git a/Spanish/images/projects/dom_mini_project_leaderboard_day_8.1.png b/Spanish/images/projects/dom_mini_project_leaderboard_day_8.1.png new file mode 100644 index 0000000..2956fa0 Binary files /dev/null and b/Spanish/images/projects/dom_mini_project_leaderboard_day_8.1.png differ diff --git a/Spanish/images/projects/dom_mini_project_slider_day_7.1.gif b/Spanish/images/projects/dom_mini_project_slider_day_7.1.gif new file mode 100644 index 0000000..51bdadb Binary files /dev/null and b/Spanish/images/projects/dom_mini_project_slider_day_7.1.gif differ diff --git a/Spanish/images/raising_syntax_error.png b/Spanish/images/raising_syntax_error.png new file mode 100644 index 0000000..81f6245 Binary files /dev/null and b/Spanish/images/raising_syntax_error.png differ diff --git a/Spanish/images/regex.png b/Spanish/images/regex.png new file mode 100644 index 0000000..c7116b4 Binary files /dev/null and b/Spanish/images/regex.png differ diff --git a/Spanish/images/running_script.png b/Spanish/images/running_script.png new file mode 100644 index 0000000..deac13d Binary files /dev/null and b/Spanish/images/running_script.png differ diff --git a/Spanish/images/scripts_on_vscode.png b/Spanish/images/scripts_on_vscode.png new file mode 100644 index 0000000..f6257be Binary files /dev/null and b/Spanish/images/scripts_on_vscode.png differ diff --git a/Spanish/images/string_indexes.png b/Spanish/images/string_indexes.png new file mode 100644 index 0000000..cc2f638 Binary files /dev/null and b/Spanish/images/string_indexes.png differ diff --git a/Spanish/images/vscode.png b/Spanish/images/vscode.png new file mode 100644 index 0000000..724fc10 Binary files /dev/null and b/Spanish/images/vscode.png differ diff --git a/Spanish/images/vscode_ui.png b/Spanish/images/vscode_ui.png new file mode 100644 index 0000000..7210a08 Binary files /dev/null and b/Spanish/images/vscode_ui.png differ diff --git a/Spanish/images/web_storage.png b/Spanish/images/web_storage.png new file mode 100644 index 0000000..46f9311 Binary files /dev/null and b/Spanish/images/web_storage.png differ diff --git a/Spanish/readme.md b/Spanish/readme.md new file mode 100644 index 0000000..7df9958 --- /dev/null +++ b/Spanish/readme.md @@ -0,0 +1,550 @@ + +
+

30 Días de JavaScript

+ + + + + Twitter Follow + + + Autor: + Asabeneh Yetayeh
+ Enero de 2020 +
+ +
+ + 🇬🇧 [English](../readMe.md) + 🇪🇸 [Spanish](./readme.md) + 🇷🇺 [Russian](../RU/README.md) + +
+
+ + +![Thirty Days Of JavaScript](./images/day_1_1.png) + + +[📔Día 1](#día-1) +- [📔Día 1](#día-1) + - [Introducción](#introducción) + - [Requerimientos](#requerimientos) + - [Preparación](#preparación) + - [Instala Node.js](#instala-nodejs) + - [Navegador](#navegador) + - [Instalando Google Chrome](#instalando-google-chrome) + - [Abriendo la consola de Google Chrome](#abriendo-la-consola-de-google-chrome) + - [Escribiendo el código en la consola del navegador](#escribiendo-el-código-en-la-consola-del-navegador) + - [Console.log](#consolelog) + - [Console.log con múltiples argumentos](#consolelog-con-múltiples-argumentos) + - [Comentario](#comentario) + - [Sintaxis](#sintaxis) + - [Aritmética](#aritmética) + - [Editor de código](#editor-de-código) + - [Instalando Visual Studio](#instalando-visual-studio) + - [Cómo usar Visual Studio Code](#cómo-usar-visual-studio-code) + - [Añadiendo JavaScript a una página web](#añadiendo-javascript-a-una-página-web) + - [Script en línea](#script-en-línea) + - [Script interno](#script-interno) + - [Script externo](#script-externo) + - [Múltiples Scripts externos](#múltiples-scripts-externos) + - [Introducción a los tipos de datos](#introducción-a-los-tipos-de-datos) + - [Números](#números) + - [Cadenas de texto](#cadenas-de-texto) + - [Booleanos](#booleanos) + - [Undefined](#undefined) + - [Null](#null) + - [Comprobando los tipos de datos](#comprobando-los-tipos-de-datos) + - [Comentarios](#comentarios) + - [Variables](#variables) +- [💻 Día 1: Ejercicios](#-día-1-ejercicios) + +# 📔Día 1 + +## Introducción + +**Felicidades** por decidir participar en el desafío de 30 días de JavaScript. En este desafío aprenderás todo lo que necesitas para ser un programador de JavaScript y los conceptos generales de la programación. Al final obtendrás un certificado de 30 días de JavaScript. Únete al [grupo de telegram](https://t.me/ThirtyDaysOfJavaScript). + +**30 días de JavaScript** es una guía tanto para principiantes como para desarrolladores avanzados. Bienvenido a JavaScript. Disfruto de usarlo y enseñarlo y espero que tú también. JavaScript es el lenguaje del navegador. + +En este tutorial de paso a paso, aprenderás JavaScript, el leguaje de programación más popular de la historia de la humanidad. Se usa para **agregar interactividad a las páginas web, para desarrollar aplicaciones móbiles, aplicaciones de desktop, juegos** y ahora también puede ser usado para el **aprendizaje automático** (machine learning) e **inteligencia artificial** (AI). Su popularidad ha incrementado en años recientes, siendo el lenguaje predominante por cuatro años consecutivos y el más usado en GitHub. + +## Requerimientos + +Ningún conocimiento previo es requerido para el siguiente desafío. Solo necesitarás: + +1. Motivación +2. Una computadora +3. Internet +4. Un navegador +5. Un editor de texto + +## Preparación + +Asumo que tienes motivación, un fuerte deseo de convertirte en un desarrollador, una computadora e internet. Si tienes todo esto, entonces lo tienes todo. + +### Instala Node.js + +Tal vez no lo necesites ahora pero si más adelante. Asi que instala [node.js](https://nodejs.org/en/) + +![Node download](./images/download_node.png) + +Luego de que se descargue, haz doble click e instálalo + + ![Install node](./images/install_node.png) + +Puedes comprobar si se ha instalado correctamente abriendo la terminal del ordenador + + asabeneh $ node -v + v12.14.0 + +Para el desafío estaremos utilizando la versión 12.14.0, la cual es la recomendada por node. + +### Navegador + +Existen muchos navegadores disponibles. Sin embargo, recomiendo especialmente Google Chrome. + +#### Instalando Google Chrome + +Instala [Google Chrome](https://www.google.com/chrome/) si aún no lo tienes. Podemos escribir un pequeño código JavaScript en la consola del navegador, pero no utilizamos la consola para desarrollar aplicaciones. + +![Google Chrome](./images/google_chrome.png) + +#### Abriendo la consola de Google Chrome + +Puedes abrir la consola de Google Chrome haciendo click en los tres puntos de la esquina superior derecha del navegador Chrome o utilizando un acceso directo. Yo prefiero usar los atajos. + +![Opening chrome](./images/opening_developer_tool.png) + +Para abrir la consola Chrome usando un atajo. + + Mac + Command+Option+I + + Windows: + Ctl+Shift+I + +![Opening console](./images/opening_chrome_console_shortcut.png) + +Después de abrir la consola de Google Chrome, intenta explorar los botones marcados. Pasaremos la mayor parte del tiempo aquí. La consola es el lugar donde va el código de JavaScript. El motor de la Consola de Google V8 cambia tu código JavaScript a código de máquina. Escribamos un código JavaScript en la consola de Google Chrome: + +![write code on console](./images/js_code_on_chrome_console.png) + +#### Escribiendo el código en la consola del navegador + +Podemos escribir cualquier código de JavaScript en la consola de Google o en la de cualquier navegador. Sin embargo, para este desafío, sólo nos centramos en la consola de Google Chrome. Abre la consola usando: + + Mac + Comando+Opción+I + + Windows: + Ctl+Mayúsculas+I + +##### Console.log + +Para escribir nuestro primer código de JavaScript, usamos una función incorporada, **console.log()**. Pasamos un argumento como datos de entrada, y la función muestra la salida. Pasamos 'Hola, Mundo' como datos de entrada o argumento en la función console.log(). + + console.log('¡Hola, Mundo!') + +##### Console.log con múltiples argumentos + +El console.log(param1, param2, param3), puede tomar múltiples argumentos. + +![console log multiple arguments](./images/console_log_multipl_arguments.png) + + console.log('Hola', 'Mundo', '!') + console.log('FELIZ', 'AÑO', 'NUEVO', 2020) + console.log('Bienvenido', 'a', 30, 'Días', 'de', 'JavaScript') + +Como pueden ver, en el código del fragmento de arriba, console.log() puede tomar múltiples argumentos. + +¡Felicidades! Escribiste tu primer código JavaScript usando _console.log()_. + +##### Comentario + +Podemos añadir comentarios a nuestro código. Los comentarios son muy importantes para hacer el código más legible y para dejar recordatorios en nuestro código. JavaScript no ejecuta la parte de comentarios de nuestro código. Cualquier hay texto que empiece con // en JavaScript es un comentario o cualquier cosa que encierre como esta /\* \*/ es un comentario. + +**Ejemplo: Comentario en una sola línea** + + // Este es el primer comentario + // Este es el segundo comentario + // Soy un comentario de una sola línea + +**Ejemplo: Comentario multilínea** + + /* Este es un comentario de varias líneas. + + Los comentarios multilínea pueden tomar múltiples líneas. + + JavaScript es el lenguaje de la web + */ + +##### Sintaxis + +JavaScript es un lenguaje de programación. Como resultado, tiene su sintaxis como otros lenguajes. Si no escribimos una sintaxis que JavaScript entienda, se producirán diferentes tipos de errores. Exploraremos diferentes tipos de errores de JavaScript más adelante. Por ahora, veamos los errores de sintaxis. + +![Error](./images/raising_syntax_error.png) + +Cometí un error deliberado. Como resultado, la consola produce un error de sintaxis. En realidad, la sintaxis es muy informativa. Informa sobre el tipo de error que cometimos. Leyendo la guía de retroalimentación de errores, podemos corregir la sintaxis y arreglar el problema. El proceso de identificar y eliminar errores de un programa se llama 'debugging'. Corrijamos los errores: + + console.log("¡Hola, Mundo!") + console.log('¡Hola, Mundo!') + +Hasta ahora, hemos visto cómo mostrar el texto usando un console.log(). Si imprimimos texto o cadena usando console.log(), el texto tiene que estar entre comillas simples, dobles o 'backtick' (``). **Ejemplo:** + + console.log("¡Hola, Mundo!") + console.log('¡Hola, Mundo!') + console.log(`Hola, Mundo!`) + +#### Aritmética + +Ahora, practiquemos más la escritura de códigos JavaScript usando console.log() en la consola de Google Chrome para los tipos de datos numéricos. Además del texto, también podemos hacer cálculos matemáticos usando JavaScript. Hagamos los siguientes cálculos sencillos. + +![Arithmetic](./images/arithmetic.png) + + console.log(2 + 3) // Adición + console.log(3 - 2) // Sustracción + console.log(2 * 3) // Multiplicación + console.log(3 / 2) // División + console.log(3 % 2) // Módulo - encontrar el resto + console.log(3 ** 2) // Exponencial + +### Editor de código + +Podemos escribir nuestros códigos en la consola del navegador, pero no será para proyectos más grandes. En un entorno de trabajo real, los desarrolladores utilizan diferentes editores para escribir sus códigos. En este desafío de 30 días de JavaScript, usaremos Visual Studio Code. + +#### Instalando Visual Studio + +Visual Studio es un editor de texto de código abierto muy popular. Recomendaría descargarlo, pero si estás a favor de otros editores, siéntete libre de seguir con lo que tienes. + +![Vscode](./images/vscode.png) + +Si ya instalaste Visual Studio Code, empezaremos a usarlo. + +#### Cómo usar Visual Studio Code + +Abre Visual Studio Code haciendo doble clic en el ícono de Visual Studio. Cuando lo abras, obtendrás este tipo de interfaz. Intenta interactuar con los iconos etiquetados. + +![Vscode ui](./images/vscode_ui.png) + +![Vscode add project](./images/adding_project_to_vscode.png) + +![Vscode open project](./images/opening_project_on_vscode.png) + +![script file](./images/scripts_on_vscode.png) + +![running script](./images/running_script.png) + +![coding running](./images/launched_on_new_tab.png) + +## Añadiendo JavaScript a una página web + +JavaScript puede ser añadido a una página web de tres maneras diferentes: + +- **_Script en línea ('Inline script')_** +- **_Script interno_** +- **_Script externo_** +- **_Múltiples scripts_** + +Las siguientes secciones muestran diferentes formas de añadir código JavaScript a nuestra página web. + +### Script en línea + +Crea una carpeta en tu escritorio y llámala 30DíasDeJS o en cualquier lugar y crea un archivo **_index.html_** en la carpeta del proyecto. Luego pega el siguiente código y ábrelo en un navegador, ya sea en [Chrome](https://www.google.com/chrome/). + + + + + 30DíasDeJS:Inline Script + + + + + + + +Ahora, escribiste tu primer inline script. Podemos crear un mensaje de alerta emergente usando la función integrada _alert()_. + +### Script interno + +El Script interno puede ser escrito en la cabecera del código _('head')_ o en el cuerpo _('body')_, pero es preferible ponerlo en el cuerpo del documento HTML. Primero, escribamos en la parte de la cabeza de la página. + + + + + 30DíasDeJS:Scripts Internos + + + + + + +Así es como escribimos el guión interno la mayor parte del tiempo. Escribir el código de JavaScript en la sección del body es el lugar más recomendado. Abre la consola del navegador para ver la respuesta del console.log() + + + + + 30DíasDeJS:Scripts Internos + + + + + + + +Abre la consola del navegador para ver la respuesta del console.log() + +![js code from vscode](./images/js_code_vscode.png) + +### Script externo + +Al igual que el script interno, el enlace del script externo puede estar en la cabecera del código ('head') o en el cuerpo ('body'), pero igualmente es recomendado ponerlo en el 'body'. Primero, debemos crear un archivo JavaScript externo con extensión .js. Cualquier archivo JavaScript termina con .js. Crea un archivo introduccion.js dentro del directorio del proyecto y escribe el siguiente código y enlaza este archivo .js en la parte inferior del cuerpo. + + console.log('Bienvenido a 30DaysOfJavaScript') + +**Script externo en la cabecera** + + + + + 30DíasDeJS:Scripts Externos + + + + + + +**Script externo en el cuerpo** + + + + + 30DíasDeJS:Scripts Externos + + + //Podría estar en la cabecera o en el cuerpo... + // Aquí está el lugar recomendado para poner el script externo + + + + +Abre la consola del navegador para ver la respuesta del console.log() + +### Múltiples Scripts externos + +Podemos enlazar múltiples archivos externos de JavaScript a una página web. Crea un archivo holamundo.js dentro de la carpeta 30DiasDeJS y escribe el siguiente código. + + console.log('¡Hola, Mundo!') + + + + + + Múltiples guiones externos + + + + + + + + +Tu archivo main.js debería estar por debajo de todos los otros scripts. Ten cuidado con tu ejercicio para entender esta línea. + +![Multiple Script](./images/multiple_script.png) + +## Introducción a los tipos de datos + +En JavaScript y también en otros lenguajes de programación, hay diferentes tipos de datos. Los siguientes son los tipos de datos primitivos de JavaScript: _Cadenas de texto ('string'), Números, Booleanos, undefined, Null_ y _Symbol_. + +### Números + +- Enteros: Números enteros (negativos, cero y positivos) Ejemplo: ... -3, -2, -1, 0, 1, 2, 3 ... +- Float: Números decimales Ejemplo ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ... + +### Cadenas de texto + +Una colección de uno o más carácteres entre comillas. **Ejemplo:** + + "Asabeneh + "Finlandia + 'JavaScript es un hermoso lenguaje de programación'. + "Me encanta enseñar" + "Espero que estés disfrutando del primer día" + `También podemos crear una cadena usando un backtick` + +### Booleanos + +Un valor booleano es verdadero o falso. Cualquier comparación devuelve un valor booleano, que es verdadero o falso. + +Un tipo de datos booleano es un valor Verdadero o Falso. + +**Ejemplo:** + + true // si la luz está encendida, el valor es true + falso // si la luz está apagada, el valor es Falso + +### Undefined + +En JavaScript, si no asignamos un valor a una variable, el valor es indefinido. Además, si una función no devuelve nada, devuelve undefined. + + let nombre; + console.log(nombre); //no está definida, porque no está asignada a un valor todavía + +### Null + +Null en JavaScript significa un valor vacío/nulo. + + let valorVacio = null + +## Comprobando los tipos de datos + +Para comprobar el tipo de datos de un determinado valor, utilizamos el operador **'typeof'**. Véase el siguiente ejemplo. + + console.log(typeof 'Asabeneh') // string + console.log(typeof 5) // número + console.log(typeof true ) // boolean + console.log(typeof null) // tipo de objeto + console.log(typeof undefined) // undefined + +## Comentarios + +Los comentarios en JavaScript son similares a los de otros lenguajes de programación. Los comentarios son importantes para hacer tu código más legible. Hay dos maneras de comentar: + +- _Comentario en una sola línea_ +- _Comentario multilineal_ + + // comentando el código mismo con un solo comentario + // let nombre = 'Asabeneh'; comentario de una sola línea + // let apellido = 'Yetayeh'; comentario de una sola línea + +Comentario multilineal: + + /* + let ubicación = 'Helsinki'; + let edad = 100; + let casado = verdadero; + Este es un comentario de varias líneas + */ + +### Variables + +Las variables son contenedores de datos. Las variables se utilizan para almacenar datos en una ubicación de memoria. Cuando se declara una variable, se reserva una ubicación de memoria. Cuando se asigna una variable a un valor (data), el espacio de memoria se llena con esos datos. Para declarar una variable, usamos palabras clave _var_, _let_ o _const_. Hablaremos más sobre var, let y const en detalle en otras secciones (ámbito). Por ahora, la explicación anterior es suficiente. + +Para una variable que cambia en un momento diferente, usamos _let_. Si los datos no cambian en absoluto, usamos _const_. Por ejemplo, PI, nombre del país, gravedad no cambian, y podemos usar _const._ + +- El nombre de una variable en JavaScript no debe comenzar con un número. +- Un nombre de variable JavaScript no permite caracteres especiales excepto el signo de dólar y el guión bajo. +- Los nombres de las variables en JavaScript siguen una convención 'CamelCase'. +- El nombre de una variable no debe tener espacio entre palabras. + +Los siguientes son ejemplos válidos de variables JavaScript. + +Variables válidas en JavaScript: + + primerNombre + apellido + país + ciudadCapital + capital + edad + estaCasado + + nombre_de_pila + apellido + esta_casado + ciudad_capital + + num1 + num_1 + _num_1 + $num1 + año2020 + año_2020 + +camelCase es convencional en JavaScript. En este material, usaremos variables de CamelCase. + +Variables inválidas: + + primer-nombre + 1_numero + num_#_1 + +Declaremos las variables con diferentes tipos de datos. Para declarar una variable, necesitamos usar la palabra clave let o const antes del nombre de la variable. Después del nombre de la variable, escribimos un signo igual (operador de asignación), y un valor. + + # Sintaxis + let nombreDeLaVariable = valor + +**Ejemplos: Variables** + + // Declarando diferentes variables de diferentes tipos de datos + let nombre = 'Asabeneh' // nombre de una persona + let apellido = 'Yetayeh' // apellido de una persona + let pais = 'Finland' // país + let ciudad = 'Helsinki' // ciudad capital + let edad = 100 // edad en años + let estaCasado = true + + console.log(nombre, apellido, país, ciudad, edad, estáCasado) + + + Asabeneh Yetayeh Finlandia Helsinki 100 True + + // Declarando variables con valores numéricos + let edad = 100 // edad en años + const constante = 9,81 // gravedad terrestre en m/s2 + const puntoDeEbullición = 100 // punto de ebullición del agua, temperatura en oC + const PI = 3.14 // constante geométrica + + console.log(gravedad, punto de ebullición, PI) + + + 9.81 100 3.14 + + + // Las variables también pueden ser declaradas en una línea separada por una coma + let nombre = 'Asabeneh', // nombre de una persona + trabajo = 'profesor', + viveEn = 'Finlandia'; + console.log(nombre, trabajo, viveEn); + + + Asabeneh profesor de Finlandia + +Cuando ejecutas los archivos en la carpeta Día_1 deberías obtener esto: + +![Day one](./images/day_1.png) + +🌕 Eres increíble. Acabas de completar el desafío del día 1 y estás en camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos. + +# 💻 Día 1: Ejercicios + +1. Escribe un comentario de una sola línea que diga _"los comentarios pueden hacer que el código sea legible"_ + +2. Escribe otro comentario que diga, _"Bienvenido a 30DaysOfJavaScript"_ + +3. Escribe un comentario multilínea que diga, _"Los comentarios pueden hacer el código legible, fácil de usar e informativo"_ + +4. Crea un archivo variable.js y declarar variables y asignar tipos de datos string, booleanos, indefinidos y nulos + +5. Crea el archivo datatypes.js y utilizar el operador **_"typeof"_** de JavaScript para comprobar los diferentes tipos de datos. Comprueba el tipo de datos de cada variable + +6. Declara cuatro variables sin asignar valores + +7. Declara cuatro variables con valores asignados + +8. Declara variables para almacenar su nombre, apellido, estado civil, país y edad en múltiples líneas + +9. Declara variables para almacenar su nombre, apellido, estado civil, país y edad en una sola línea + +10. Declara dos variables _miEdad_ y _tuEdad_ y asígneles valores iniciales y regístrese en la consola del navegador. + + Tengo 25 años. + Tú tienes 30 años. + + 🎉 ¡FELICIDADES! 🎉 diff --git a/images/vsc_live_server.png b/images/vsc_live_server.png new file mode 100644 index 0000000..75509f2 Binary files /dev/null and b/images/vsc_live_server.png differ diff --git a/readMe.md b/readMe.md index cef53b0..da20081 100644 --- a/readMe.md +++ b/readMe.md @@ -11,13 +11,20 @@ Asabeneh Yetayeh
January, 2020 +
+ + 🇬🇧 [English](./readMe.md) + 🇪🇸 [Spanish](./Spanish/readme.md) + 🇷🇺 [Russian](./RU/README.md) + +
[Day 2 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/02_Day/02_day_data_types.md) ![Thirty Days Of JavaScript](./images/day_1_1.png) -- [📔Day 1](#%f0%9f%93%94day-1) +- [📔Day 1](#day-1) - [Introduction](#introduction) - [Requirements](#requirements) - [Setup](#setup) @@ -25,38 +32,38 @@ - [Browser](#browser) - [Installing Google Chrome](#installing-google-chrome) - [Opening Google Chrome Console](#opening-google-chrome-console) - - [Writing Code on browser Console](#writing-code-on-browser-console) + - [Writing Code on Browser Console](#writing-code-on-browser-console) - [Console.log](#consolelog) - - [Console.log with multiple arguments](#consolelog-with-multiple-arguments) + - [Console.log with Multiple Arguments](#consolelog-with-multiple-arguments) - [Comment](#comment) - [Syntax](#syntax) - [Arithmetics](#arithmetics) - [Code Editor](#code-editor) - [Installing Visual Studio Code](#installing-visual-studio-code) - - [How to use visual studio code](#how-to-use-visual-studio-code) - - [Adding JavaScript to a web page](#adding-javascript-to-a-web-page) + - [How to Use Visual Studio Code](#how-to-use-visual-studio-code) + - [Adding JavaScript to a Web Page](#adding-javascript-to-a-web-page) - [Inline Script](#inline-script) - - [Internal script](#internal-script) - - [External script](#external-script) - - [Multiple External scripts](#multiple-external-scripts) + - [Internal Script](#internal-script) + - [External Script](#external-script) + - [Multiple External Scripts](#multiple-external-scripts) - [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) +- [💻 Day 1: Exercises](#-day-1-exercises) # 📔Day 1 ## 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 +95,14 @@ After downloading double click and install ![Install node](images/install_node.png) -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 +116,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. ![Opening chrome](images/opening_developer_tool.png) -To open the Chrome console using a short cut. +To open the Chrome console using a keyboard shortcut. ```sh Mac -Command+Option+I +Command+Option+J -Windows: -Ctl+Shift+I +Windows/Linux: +Ctl+Shift+J ``` ![Opening console](images/opening_chrome_console_shortcut.png) @@ -130,7 +137,7 @@ Let us write a JavaScript code on the Google Chrome console: ![write code on console](./images/js_code_on_chrome_console.png) -#### 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 +151,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. @@ -162,13 +169,13 @@ console.log('HAPPY', 'NEW', 'YEAR', 2020) console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript') ``` -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 +204,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. **Example:** ```js @@ -219,24 +226,24 @@ 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) // Exponential +console.log(3 ** 2) // Exponentiation ``` ### Code Editor -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. ![Vscode](images/vscode.png) -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. ![Vscode ui](./images/vscode_ui.png) @@ -246,11 +253,13 @@ Open the visual studio code by double-clicking the visual studio icon. When you ![script file](images/scripts_on_vscode.png) +![Installing Live Server](images/vsc_live_server.png) + ![running script](./images/running_script.png) ![coding running](./images/launched_on_new_tab.png) -## Adding JavaScript to a web page +## Adding JavaScript to a Web Page JavaScript can be added to a web page in three different ways: - **_Inline script_** @@ -262,7 +271,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 @@ -278,7 +287,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 +306,7 @@ First, let us write on the head part of the page. ``` -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 @@ -318,16 +327,16 @@ Open the browser console to see the output from the console.log() ![js code from vscode](./images/js_code_vscode.png) -### 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 @@ -341,7 +350,7 @@ External scripts in the head ``` -External scripts in the body +External scripts in the _body_: ```html @@ -359,7 +368,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 +391,7 @@ console.log('Hello, World!') ``` -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. ![Multiple Script](./images/multiple_script.png) @@ -392,7 +401,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 +410,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 +424,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 +452,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 +464,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 +526,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 +589,7 @@ When you run the files on 01-Day folder you should get this: ![Day one](./images/day_1.png) -🌕 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. # 💻 Day 1: Exercises