diff --git a/Indonesia/02_Day_Data_types/02_day_data_types.md b/Indonesia/02_Day_Data_types/02_day_data_types.md new file mode 100644 index 000000000..1ec173a3f --- /dev/null +++ b/Indonesia/02_Day_Data_types/02_day_data_types.md @@ -0,0 +1,980 @@ +
+

30 Days Of JavaScript: Data Types

+ + + + + Twitter Follow + + + Author: + Asabeneh Yetayeh
+ January, 2020 +
+
+ + +[<< Day 1](../README.md) | [Day 3 >>](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_2.png) + +- [๐Ÿ“” Day 2](#-day-2) + - [Data Types](#data-types) + - [Primitive Data Types](#primitive-data-types) + - [Non-Primitive Data Types](#non-primitive-data-types) + - [Numbers](#numbers) + - [Declaring Number Data Types](#declaring-number-data-types) + - [Math Object](#math-object) + - [Random Number Generator](#random-number-generator) + - [Strings](#strings) + - [String Concatenation](#string-concatenation) + - [Concatenating Using Addition Operator](#concatenating-using-addition-operator) + - [Long Literal Strings](#long-literal-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-type-casting) + - [String to Int](#string-to-int) + - [String to Float](#string-to-float) + - [Float to Int](#float-to-int) + - [๐Ÿ’ป Day 2: Exercises](#-day-2-exercises) + - [Exercise: Level 1](#exercise-level-1) + - [Exercise: Level 2](#exercise-level-2) + - [Exercises: Level 3](#exercises-level-3) + +# ๐Ÿ“” Day 2 + +## 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: + +1. Primitive data types +2. Non-primitive data types(Object References) + +### Primitive Data Types + +Primitive data types in JavaScript include: + + 1. Numbers - Integers, floats + 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 + 6. Symbol - A unique value that can be generated by Symbol constructor + +Non-primitive data types in JavaScript includes: + +1. Objects +2. Arrays + +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 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 in other words immutable. +Primitive data types are compared by its values. Let us compare different data values. See the example below: + +```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 +``` + +### Non-Primitive Data Types + +*Non-primitive* data types are modifiable or mutable. We can modify the value of non-primitive data types after it gets created. +Let us see by creating an array. An array is a list of data values in a square bracket. Arrays can contain the same or different data types. Array values are referenced by their index. In JavaScript array index starts at zero. I.e., the first element of an array is found at index zero, the second element at index one, and the third element at index two, etc. + +```js +let nums = [1, 2, 3] +nums[0] = 10 + +console.log(nums) // [10, 2, 3] +``` + +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] +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 +``` + +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] +let numbers = nums + +console.log(nums == numbers) // true + +let userOne = { +name:'Asabeneh', +role:'teaching', +country:'Finland' +} + +let userTwo = userOne + +console.log(userOne == userTwo) // true +``` + +If you have a hard time understanding the difference between primitive data types and non-primitive data types, you are not the only one. Calm down and just go to the next section and try to come back after some time. Now let us start the data types by number type. + +## Numbers + +Numbers are integers and decimal values which can do all the arithmetic operations. +Let's see some examples of Numbers. + +### Declaring Number Data Types + +```js +let age = 35 +const gravity = 9.81 // we use const for non-changing values, gravitational constant in m/s2 +let mass = 72 // mass in Kilogram +const PI = 3.14 // pi a geometrical constant + +// More Examples +const boilingPoint = 100 // temperature in oC, boiling point of water which is a constant +const bodyTemp = 37 // oC average human body temperature, which is a constant + +console.log(age, gravity, mass, PI, boilingPoint, bodyTemp) +``` + +### Math Object + +In JavaScript the Math Object provides a lots of methods to work with numbers. + +```js +const PI = Math.PI + +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(9.81)) // 10 + +console.log(Math.floor(PI)) // 3 rounding down + +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.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) + +// Let us create random number between 0 to 10 + +const num = Math.floor(Math.random () * 11) // creates random number between 0 and 10 +console.log(num) + +//Absolute value +console.log(Math.abs(-10)) // 10 + +//Square root +console.log(Math.sqrt(100)) // 10 + +console.log(Math.sqrt(2)) // 1.4142135623730951 + +// Power +console.log(Math.pow(3, 2)) // 9 + +console.log(Math.E) // 2.718 + +// Logarithm +// 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 + +// Returns the natural logarithm of 2 and 10 respectively +console.log(Math.LN2) // 0.6931471805599453 +console.log(Math.LN10) // 2.302585092994046 + +// Trigonometry +Math.sin(0) +Math.sin(60) + +Math.cos(0) +Math.cos(60) +``` + +#### Random Number Generator + +The JavaScript Math Object has a random() method number generator which generates number from 0 to 0.999999999... + +```js +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: + +```js +let randomNum = Math.random() // generates 0 to 0.999 +let numBtnZeroAndTen = randomNum * 11 + +console.log(numBtnZeroAndTen) // this gives: min 0 and max 10.99 + +let randomNumRoundToFloor = Math.floor(numBtnZeroAndTen) +console.log(randomNumRoundToFloor) // this gives between 0 and 10 +``` + +## Strings + +Strings are texts, which are under **_single_** , **_double_**, **_back-tick_** 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 +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' +let language = 'JavaScript' +let job = 'teacher' +let quote = "The saying,'Seeing is Believing' is not correct in 2020." +let quotWithBackTick = `The saying,'Seeing is Believing' is not correct in 2020.` +``` + +### String Concatenation + +Connecting two or more strings together is called concatenation. +Using the strings declared in the previous String section: + +```js +let fullName = firstName + space + lastName; // concatenation, merging two string together. +console.log(fullName); +``` + +```sh +Asabeneh Yetayeh +``` + +We can concatenate strings in different ways. + +#### 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 ES6 template strings (explained later on). + +```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' +let age = 250 + + +let fullName =firstName + space + lastName +let personInfoOne = fullName + '. I am ' + age + '. I live in ' + country; // ES5 string addition + +console.log(personInfoOne) +``` + +```sh +Asabeneh Yetayeh. I am 250. I live in Finland +``` + +#### Long Literal Strings + +A string could be a single character or paragraph or a page. If the string length is too big it does not fit in one line. We can use the backslash character (\\) at the end of each line to indicate that the string will continue on the next line. +**Example:** + +```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) +``` + +#### Escape Sequences in Strings + +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 +- \\\\: Back slash +- \\': Single quote (') +- \\": Double quote (") + +```js +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 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\' 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) + +To create a template strings, we use two back-ticks. 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 +`String literal text` +`String literal text ${expression}` +``` + +**Example: 1** + +```js +console.log(`The sum of 2 and 3 is 5`) // statically writing the data +let a = 2 +let b = 3 +console.log(`The sum of ${a} and ${b} is ${a + b}`) // injecting the data dynamically +``` + +**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 - String interpolation method +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. +``` + +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 +let b = 3 +console.log(`${a} is greater than ${b}: ${a > b}`) +``` + +```sh +2 is greater than 3: false +``` + +### String Methods + +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 +``` + +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) + +Let us access different characters in 'JavaScript' string. + +```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()*: this method changes the string to uppercase letters. + +```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()*: this method changes the string to lowercase letters. + +```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()*: It takes two arguments, the starting index and number of characters to slice. + +```js +let string = 'JavaScript' +console.log(string.substr(4,6)) // Script + +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 character at the stopping index. + +```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()*: The split method splits a string at a specified place. + +```js +let string = '30 Days Of JavaScript' + +console.log(string.split()) // Changes to an array -> ["30 Days Of JavaScript"] +console.log(string.split(' ')) // Split to an array at space -> ["30", "Days", "Of", "JavaScript"] + +let firstName = 'Asabeneh' + +console.log(firstName.split()) // Change to an array - > ["Asabeneh"] +console.log(firstName.split('')) // Split to an array at each letter -> ["A", "s", "a", "b", "e", "n", "e", "h"] + +let countries = 'Finland, Sweden, Norway, Denmark, and Iceland' + +console.log(countries.split(',')) // split to any array at comma -> ["Finland", " Sweden", " Norway", " Denmark", " and Iceland"] +console.log(countries.split(', ')) // ย ["Finland", "Sweden", "Norway", "Denmark", "and Iceland"] +``` + +8. *trim()*: Removes trailing space in the beginning or the end of a string. + +```js +let string = ' 30 Days Of JavaScript ' + +console.log(string) +console.log(string.trim(' ')) + +let firstName = ' Asabeneh ' + +console.log(firstName) +console.log(firstName.trim()) // still removes spaces at the beginning and the end of the string +``` + +```sh + 30 Days Of JavasCript +30 Days Of JavasCript + Asabeneh +Asabeneh +``` + +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 - it is case sensitive! +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()*: takes as a parameter the old substring and a new substring. + +```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()*: Takes index and it returns the value at that index + +```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()*: Takes index and it returns char code (ASCII number) of the value at that index + +```js +string.charCodeAt(index) +``` + +```js +let string = '30 Days Of JavaScript' +console.log(string.charCodeAt(3)) // D ASCII number is 68 + +let lastIndex = string.length - 1 +console.log(string.charCodeAt(lastIndex)) // t ASCII is 116 + +``` + +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) +``` + +```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()*: 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 +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()*: it takes many substrings and joins them. + +```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*: 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). + +```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*: 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) +``` + +```js +let string = 'Love is the most powerful feeling in the world' + +console.log(string.endsWith('world')) // true +console.log(string.endsWith('love')) // false +console.log(string.endsWith('in the 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*: it takes a substring as an argument and it returns the index of the first match. The search value can be a string or a regular expression pattern. + +```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 +console.log(string.search(/javascript/gi)) // 7 +``` + +19. *match*: it takes a substring or regular expression pattern as an argument and it returns an array if there is match if not it returns null. Let us see how a regular expression pattern looks like. It starts with / sign and ends with / sign. + +```js +let string = 'love' +let patternOne = /love/ // with out any flag +let patternTwo = /love/gi // g-means to search in the whole text, i - case insensitive +``` + +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"] +``` + +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 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 +// + means one or more digit numbers, +// if there is g after that it means global, search everywhere. + +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()*: it takes a number as argument and it returns the repeated version of the string. + +```js +string.repeat(n) +``` + +```js +let string = 'love' +console.log(string.repeat(10)) // lovelovelovelovelovelovelovelovelovelove +``` + +## Checking Data Types and Casting + +### Checking Data Types + +To check the data type of a certain variable we use the _typeof_ method. + +**Example:** + +```js +// Different javascript data types +// Let's declare different data types + +let firstName = 'Asabeneh' // string +let lastName = 'Yetayeh' // string +let country = 'Finland' // string +let city = 'Helsinki' // string +let age = 250 // number, it is not my real age, do not worry about it +let job // undefined, because a value was not assigned + +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 +``` + +### 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 to number using the following methods: + +- 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 +``` + +#### 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 to number using the following methods: + +- 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(numFloat) // 9.81 +``` + +#### Float to Int + +We can convert float numbers to integers. +We use the following method to convert float to int: + +- parseInt() + +```js +let num = 9.81 +let numInt = parseInt(num) + +console.log(numInt) // 9 +``` + +๐ŸŒ• 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 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 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 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. +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. +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 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: + + ```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. 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." + ``` + +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 + 2 1 2 4 8 + 3 1 3 9 27 + 4 1 4 16 64 + 5 1 5 25 125 + ``` + +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 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 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 ! ๐ŸŽ‰ + +[<< Day 1](../README.md) | [Day 3 >>](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) diff --git a/Indonesia/02_Day_Data_types/02_day_starter/index.html b/Indonesia/02_Day_Data_types/02_day_starter/index.html new file mode 100644 index 000000000..8fbbe0d1b --- /dev/null +++ b/Indonesia/02_Day_Data_types/02_day_starter/index.html @@ -0,0 +1,17 @@ + + + + + 30DaysOfJavaScript + + + +

30DaysOfJavaScript:02 Day

+

Data types

+ + + + + + + \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/02_day_starter/main.js b/Indonesia/02_Day_Data_types/02_day_starter/main.js new file mode 100644 index 000000000..77629084e --- /dev/null +++ b/Indonesia/02_Day_Data_types/02_day_starter/main.js @@ -0,0 +1 @@ +// this is your main.js script \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/day_1_2.png b/Indonesia/02_Day_Data_types/day_1_2.png new file mode 100644 index 000000000..0f6eefb1d Binary files /dev/null and b/Indonesia/02_Day_Data_types/day_1_2.png differ diff --git a/Indonesia/02_Day_Data_types/math_object.js b/Indonesia/02_Day_Data_types/math_object.js new file mode 100644 index 000000000..784b2ae8e --- /dev/null +++ b/Indonesia/02_Day_Data_types/math_object.js @@ -0,0 +1,34 @@ +const PI = Math.PI +console.log(PI) // 3.141592653589793 +console.log(Math.round(PI)) // 3; to round values to the nearest number +console.log(Math.round(9.81)) // 10 +console.log(Math.floor(PI)) // 3; rounding down +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.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) +// Let create random number between 0 to 10 +const num = Math.floor(Math.random() * 11) // creates random number between 0 and 10 +console.log(num) + +//Absolute value +console.log(Math.abs(-10)) //10 +//Square root +console.log(Math.sqrt(100)) // 10 +console.log(Math.sqrt(2)) //1.4142135623730951 +// Power +console.log(Math.pow(3, 2)) // 9 +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 + +// Trigonometry +console.log(Math.sin(0)) +console.log(Math.sin(60)) +console.log(Math.cos(0)) +console.log(Math.cos(60)) diff --git a/Indonesia/02_Day_Data_types/non_primitive_data_types.js b/Indonesia/02_Day_Data_types/non_primitive_data_types.js new file mode 100644 index 000000000..23d7fa282 --- /dev/null +++ b/Indonesia/02_Day_Data_types/non_primitive_data_types.js @@ -0,0 +1,30 @@ +let nums = [1, 2, 3] +nums[0] = 10 +console.log(nums) // [10, 2, 3] + +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 + +let numbers = nums +console.log(nums == numbers) // true + +let userOne = { +name:'Asabeneh', +role:'teaching', +country:'Finland' +} +let userTwo = userOne +console.log(userOne == userTwo) // true \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/number_data_types.js b/Indonesia/02_Day_Data_types/number_data_types.js new file mode 100644 index 000000000..b850af922 --- /dev/null +++ b/Indonesia/02_Day_Data_types/number_data_types.js @@ -0,0 +1,9 @@ +let age = 35 +const gravity = 9.81 //we use const for non-changing values, gravitational constant in m/s2 +let mass = 72 // mass in Kilogram +const PI = 3.14 // pi a geometrical constant + +//More Examples +const boilingPoint = 100 // temperature in oC, boiling point of water which is a constant +const bodyTemp = 37 // oC average human body temperature, which is a constant +console.log(age, gravity, mass, PI, boilingPoint, bodyTemp) diff --git a/Indonesia/02_Day_Data_types/primitive_data_types.js b/Indonesia/02_Day_Data_types/primitive_data_types.js new file mode 100644 index 000000000..d3c298c36 --- /dev/null +++ b/Indonesia/02_Day_Data_types/primitive_data_types.js @@ -0,0 +1,14 @@ +let word = 'JavaScript' +// we dont' modify string +// we don't do like this, word[0] = 'Y' +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 \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_concatenation.js b/Indonesia/02_Day_Data_types/string_concatenation.js new file mode 100644 index 000000000..516ca1a91 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_concatenation.js @@ -0,0 +1,19 @@ +// 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' +// Concatenating using addition operator +let fullName = firstName + space + lastName // concatenation, merging two string together. +console.log(fullName) + +let personInfoOne = fullName + '. I am ' + age + '. I live in ' + country // ES5 +console.log(personInfoOne) +// Concatenation: Template Literals(Template Strings) +let personInfoTwo = `I am ${fullName}. I am ${age}. I live in ${country}.` //ES6 - String interpolation method +let personInfoThree = `I am ${fullName}. I live in ${city}, ${country}. I am a ${job}. I teach ${language}.` +console.log(personInfoTwo) +console.log(personInfoThree) \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_data_types.js b/Indonesia/02_Day_Data_types/string_data_types.js new file mode 100644 index 000000000..fd611502c --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_data_types.js @@ -0,0 +1,7 @@ +let space = ' ' // an empty space string +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' +let language = 'JavaScript' +let job = 'teacher' diff --git a/Indonesia/02_Day_Data_types/string_methods/accessing_character.js b/Indonesia/02_Day_Data_types/string_methods/accessing_character.js new file mode 100644 index 000000000..32229fb65 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/accessing_character.js @@ -0,0 +1,12 @@ +// Let us access the first character in 'JavaScript' string. + +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 diff --git a/Indonesia/02_Day_Data_types/string_methods/char_at.js b/Indonesia/02_Day_Data_types/string_methods/char_at.js new file mode 100644 index 000000000..7daaf7462 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/char_at.js @@ -0,0 +1,6 @@ +// charAt(): Takes index and it returns the value at that index +string.charAt(index) +let string = '30 Days Of JavaScript' +console.log(string.charAt(0)) // 3 +let lastIndex = string.length - 1 +console.log(string.charAt(lastIndex)) // t diff --git a/Indonesia/02_Day_Data_types/string_methods/char_code_at.js b/Indonesia/02_Day_Data_types/string_methods/char_code_at.js new file mode 100644 index 000000000..e58baaa77 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/char_code_at.js @@ -0,0 +1,7 @@ +// charCodeAt(): Takes index and it returns char code(ASCII number) of the value at that index + +string.charCodeAt(index) +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 diff --git a/Indonesia/02_Day_Data_types/string_methods/concat.js b/Indonesia/02_Day_Data_types/string_methods/concat.js new file mode 100644 index 000000000..8b8192acb --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/concat.js @@ -0,0 +1,6 @@ +// concat(): it takes many substrings and creates concatenation. +// string.concat(substring, substring, substring) +let string = '30' +console.log(string.concat("Days", "Of", "JavaScript")) // 30DaysOfJavaScript +let country = 'Fin' +console.log(country.concat("land")) // Finland diff --git a/Indonesia/02_Day_Data_types/string_methods/ends_with.js b/Indonesia/02_Day_Data_types/string_methods/ends_with.js new file mode 100644 index 000000000..0ce5f1f0e --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/ends_with.js @@ -0,0 +1,11 @@ +// 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). +// string.endsWith(substring) +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 diff --git a/Indonesia/02_Day_Data_types/string_methods/includes.js b/Indonesia/02_Day_Data_types/string_methods/includes.js new file mode 100644 index 000000000..3fbe8e069 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/includes.js @@ -0,0 +1,14 @@ +// 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. +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 \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_methods/index_of.js b/Indonesia/02_Day_Data_types/string_methods/index_of.js new file mode 100644 index 000000000..480db7c03 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/index_of.js @@ -0,0 +1,11 @@ +// indexOf(): Takes 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 + +string.indexOf(substring) +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 diff --git a/Indonesia/02_Day_Data_types/string_methods/last_index_of.js b/Indonesia/02_Day_Data_types/string_methods/last_index_of.js new file mode 100644 index 000000000..2134d227c --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/last_index_of.js @@ -0,0 +1,6 @@ +// lastIndexOf(): Takes 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 + +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 diff --git a/Indonesia/02_Day_Data_types/string_methods/length.js b/Indonesia/02_Day_Data_types/string_methods/length.js new file mode 100644 index 000000000..070476f5c --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/length.js @@ -0,0 +1,6 @@ +// length: The string length method returns the number of characters in a string included empty space. Example: + +let js = 'JavaScript' +console.log(js.length) // 10 +let firstName = 'Asabeneh' +console.log(firstName.length) // 8 \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_methods/match.js b/Indonesia/02_Day_Data_types/string_methods/match.js new file mode 100644 index 000000000..40d1ffd6e --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/match.js @@ -0,0 +1,22 @@ +// match: it takes a substring or regular expression pattern as an argument and it returns an array if there is match if not it returns null. Let us see how a regular expression pattern looks like. It starts with / sign and ends with / sign. +let string = 'love' +let patternOne = /love/ // with out any flag +let patternTwo = /love/gi // g-means to search in the whole text, i - case insensitive +string.match(substring) +let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' +console.log(string.match('love')) // +/* +output + +["love", index: 2, input: "I love JavaScript. If you do not love JavaScript what else can you love.", groups: undefined] +*/ +let pattern = /love/gi +console.log(string.match(pattern)) // ["love", "love", "love"] +// Let us extract numbers from text using regular expression. This is not regular expression section, no panic. + +let txt = 'In 2019, I run 30 Days of Python. Now, in 2020 I super exited to start this challenge' +let regEx = /\d/g // d with escape character means d not a normal d instead acts a digit +// + means one or more digit numbers, +// if there is g after that it means global, search everywhere. +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/Indonesia/02_Day_Data_types/string_methods/repeat.js b/Indonesia/02_Day_Data_types/string_methods/repeat.js new file mode 100644 index 000000000..bf8e022db --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/repeat.js @@ -0,0 +1,4 @@ +// repeat(): it takes a number argument and it returned the repeated version of the string. +// string.repeat(n) +let string = 'love' +console.log(string.repeat(10)) // lovelovelovelovelovelovelovelovelovelove \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_methods/replace.js b/Indonesia/02_Day_Data_types/string_methods/replace.js new file mode 100644 index 000000000..33f324cc1 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/replace.js @@ -0,0 +1,7 @@ +// replace(): takes to parameter the old substring and new substring. +// string.replace(oldsubstring, newsubstring) + +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 \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_methods/search.js b/Indonesia/02_Day_Data_types/string_methods/search.js new file mode 100644 index 000000000..e1ea82e9d --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/search.js @@ -0,0 +1,4 @@ +// search: it takes a substring as an argument and it returns the index of the first match. +// string.search(substring) +let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' +console.log(string.search('love')) // 2 diff --git a/Indonesia/02_Day_Data_types/string_methods/split.js b/Indonesia/02_Day_Data_types/string_methods/split.js new file mode 100644 index 000000000..f955bcc41 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/split.js @@ -0,0 +1,10 @@ +// split(): The split method splits a string at a specified place. +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"] \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_methods/starts_with.js b/Indonesia/02_Day_Data_types/string_methods/starts_with.js new file mode 100644 index 000000000..a89ee3b75 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/starts_with.js @@ -0,0 +1,11 @@ +// startsWith: 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). +// string.startsWith(substring) +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 diff --git a/Indonesia/02_Day_Data_types/string_methods/substr.js b/Indonesia/02_Day_Data_types/string_methods/substr.js new file mode 100644 index 000000000..0bea56d57 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/substr.js @@ -0,0 +1,5 @@ +//substr(): It takes two arguments,the starting index and number of characters to slice. +let string = 'JavaScript' +console.log(string.substr(4,6)) // Script +let country = 'Finland' +console.log(country.substr(3, 4)) // land \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_methods/substring.js b/Indonesia/02_Day_Data_types/string_methods/substring.js new file mode 100644 index 000000000..3fac3a162 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/substring.js @@ -0,0 +1,9 @@ +// substring(): It takes two arguments,the starting index and the stopping index but it doesn't include the stopping index. +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 \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_methods/to_lowercase.js b/Indonesia/02_Day_Data_types/string_methods/to_lowercase.js new file mode 100644 index 000000000..1a4ab5316 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/to_lowercase.js @@ -0,0 +1,7 @@ +// toLowerCase(): this method changes the string to lowercase letters. +let string = 'JavasCript' +console.log(string.toLowerCase()) // javascript +let firstName = 'Asabeneh' +console.log(firstName.toLowerCase()) // asabeneh +let country = 'Finland' +console.log(country.toLowerCase()) // finland \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_methods/to_uppercase.js b/Indonesia/02_Day_Data_types/string_methods/to_uppercase.js new file mode 100644 index 000000000..112a6d07b --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/to_uppercase.js @@ -0,0 +1,8 @@ +// toUpperCase(): this method changes the string to uppercase letters. + +let string = 'JavaScript' +console.log(string.toUpperCase()) // JAVASCRIPT +let firstName = 'Asabeneh' +console.log(firstName.toUpperCase()) // ASABENEH +let country = 'Finland' +console.log(country.toUpperCase()) // FINLAND \ No newline at end of file diff --git a/Indonesia/02_Day_Data_types/string_methods/trim.js b/Indonesia/02_Day_Data_types/string_methods/trim.js new file mode 100644 index 000000000..16785c432 --- /dev/null +++ b/Indonesia/02_Day_Data_types/string_methods/trim.js @@ -0,0 +1,7 @@ +//trim(): Removes trailing space in the beginning or the end of a string. +let string = ' 30 Days Of JavaScript ' +console.log(string) // +console.log(string.trim(' ')) // +let firstName = ' Asabeneh ' +console.log(firstName) +console.log(firstName.trim()) // \ No newline at end of file diff --git a/Indonesia/README.md b/Indonesia/README.md new file mode 100644 index 000000000..58407c001 --- /dev/null +++ b/Indonesia/README.md @@ -0,0 +1,681 @@ +# 30 Hari Javascript + +| # Hari | Topik | +| ----- | :-------------------------------------------------------------------------------------------------------------------------------------------------: | +| 01 | [Pengantar](./readMe.md) | +| 02 | [Tipe Data](./02_Day_Data_types/02_day_data_types.md) | +| 03 | [Booleans, Operators, Date](./03_Day_Booleans_operators_date/03_booleans_operators_date.md) | +| 04 | [Conditionals](./04_Day_Conditionals/04_day_conditionals.md) | +| 05 | [Arrays](./05_Day_Arrays/05_day_arrays.md) | +| 06 | [Loops](./06_Day_Loops/06_day_loops.md) | +| 07 | [Functions](./07_Day_Functions/07_day_functions.md) | +| 08 | [Objects](./08_Day_Objects/08_day_objects.md) | +| 09 | [Higher Order Functions](./09_Day_Higher_order_functions/09_day_higher_order_functions.md) | +| 10 | [Sets dan Maps](./10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) | +| 11 | [Destructuring dan Spreading](./11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) | +| 12 | [Regular Expressions](./12_Day_Regular_expressions/12_day_regular_expressions.md) | +| 13 | [Console Object Methods](./13_Day_Console_object_methods/13_day_console_object_methods.md) | +| 14 | [Error Handling](./14_Day_Error_handling/14_day_error_handling.md) | +| 15 | [Class](./15_Day_Classes/15_day_classes.md) | +| 16 | [JSON](./16_Day_JSON/16_day_json.md) | +| 17 | [Web Storages](./17_Day_Web_storages/17_day_web_storages.md) | +| 18 | [Promises](./18_Day_Promises/18_day_promises.md) | +| 19 | [Closure](./19_Day_Closures/19_day_closures.md) | +| 20 | [Menulis Clean Code](./20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | +| 21 | [DOM](./21_Day_DOM/21_day_dom.md) | +| 22 | [Manipulasi DOM Object](./22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) | +| 23 | [Event Listeners](./23_Day_Event_listeners/23_day_event_listeners.md) | +| 24 | [Mini Project: Solar System](./24_Day_Project_solar_system/24_day_project_solar_system.md) | +| 25 | [Mini Project: World Countries Data Visualization 1](./25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) | +| 26 | [Mini Project: World Countries Data Visualization 2](./26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) | +| 27 | [Mini Project: Portfolio](./27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) | +| 28 | [Mini Project: Leaderboard](./28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | +| 29 | [Mini Project: Animating characters](./29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) | +| 30 | [Final Projects](./30_Day_Mini_project_final/30_day_mini_project_final.md) | + +๐Ÿงก๐Ÿงก๐Ÿงก HAPPY CODING ๐Ÿงก๐Ÿงก๐Ÿงก + +
+Dukung author untuk membuat lebih banyak materi pembelajaran
+Paypal Logo +
+ +
+

30 Hari JavaScript: Pengantar

+ + + + + Twitter Follow + + +Author: +Asabeneh Yetayeh
+ January, 2020 +
+ +
+ +๐Ÿ‡ฌ๐Ÿ‡ง [English](./readMe.md) +๐Ÿ‡ช๐Ÿ‡ธ [Spanish](./Spanish/readme.md) +๐Ÿ‡ฎ๐Ÿ‡น [Italian](./Italian/readMe.md) +๐Ÿ‡ท๐Ÿ‡บ [Russian](./RU/README.md) +๐Ÿ‡น๐Ÿ‡ท [Turkish](./Turkish/readMe.md) +๐Ÿ‡ฆ๐Ÿ‡ฟ [Azerbaijan](./Azerbaijani/readMe.md) +๐Ÿ‡ฐ๐Ÿ‡ท [Korean](./Korea/README.md) +๐Ÿ‡ป๐Ÿ‡ณ [Vietnamese](./Vietnamese/README.md) +๐Ÿ‡ต๐Ÿ‡ฑ [Polish](./Polish/readMe.md) +๐Ÿ‡ง๐Ÿ‡ท [Portuguese](./Portuguese/readMe.md) + +
+ +
+ + +[Day 2 >>](./02_Day_Data_types/02_day_data_types.md) + +![Thirty Days Of JavaScript](../images/day_1_1.png) + +- [30 Hari Javascript](#30-days-of-javascript) +- [๐Ÿ“” Day 1](#-day-1) + - [Pengantar](#introduction) + - [Persyaratan](#requirements) + - [Setup](#setup) + - [Install Node.js](#install-nodejs) + - [Browser](#browser) + - [Menginstall Google Chrome](#installing-google-chrome) + - [Membuka Google Chrome Console](#opening-google-chrome-console) + - [Menulis kode pada Console Browser](#writing-code-on-browser-console) + - [Console.log](#consolelog) + - [Console.log dengan beberapa Argument](#consolelog-with-multiple-arguments) + - [Komentar](#comments) + - [Syntax](#syntax) + - [Arithmetics](#arithmetics) + - [Code Editor](#code-editor) + - [Menginstall Visual Studio Code](#installing-visual-studio-code) + - [Cara pakai Visual Studio Code](#how-to-use-visual-studio-code) + - [Menambahkan Javascript kedalam halaman web](#adding-javascript-to-a-web-page) + - [Inline Script](#inline-script) + - [Internal Script](#internal-script) + - [External Script](#external-script) + - [Multiple External Scripts](#multiple-external-scripts) + - [Mengenal Tipe Data](#introduction-to-data-types) + - [Numbers](#numbers) + - [Strings](#strings) + - [Booleans](#booleans) + - [Undefined](#undefined) + - [Null](#null) + - [Mengecek Tipe Data](#checking-data-types) + - [Komentar Lagi](#comments-again) + - [Variabel](#variables) +- [๐Ÿ’ป Hari 1: Latihan](#-day-1-exercises) + +# ๐Ÿ“” Hari 1 + +## Pengantar + +**Selamat** menjalankan tantangan 30 hari Javascript. Pada tantangan ini, kamu akan belajar segala hal yang dibutuhkan untuk menjadi programmer Javascript, dan konsep umum pada banyak bahasa pemrograman. Di akhir tantangan, kamu akan mendapatkan sertifikat penyelesaian 30DaysOfJavaScript programming challenge. Jika kamu membutuhkan bantuan atau ingin membantu peserta yang lainnya kamu bisa bergabung ke grup Telegram [telegram group](https://t.me/ThirtyDaysOfJavaScript). + +**30DaysOfJavaScript** challenge adalah panduan baik untuk pemula atau developer Javascript yang sudah mahir. Selamat datang di Javascript. JavaScript adalah bahasa pemrograman pada web. Saya suka menggunakan dan mengajarkan tentang Javascript, dan saya harap kamu juga. + +Setiap langkahnya, kamu akan belajar bahasa Javascript, salah satu bahasa pemrograman paling populer yang pernah ada. +JavaScript digunakan untuk **_menambhakan interaktif pada website, mengembangkan aplikasi mobile, aplikasi desktop, game_** dan hari ini JavaScript digunakan untuk **server-side programming**, **_machine learning_** dan **_AI_**. + +**_JavaScript (JS)_** telah meningkat popularitasnya pada beberapa tahun terakhir dan telah memimpin +bahasa pemrograman dalam 10 tahun terakhir dan menjadi bahasa pemrograman yang paling banyak digunakan di Github. + +Tantangan ini mudah diikuti, kamu perlu meluangkan waktu untuk mengikuti. Jika kamu lebih tertarik belajar dengan format Video, kamu dapat menonton pada channel Youtube Washera. Subscribe, komen pada kolom komentar dan Author akan membalasnya segera. + +Author akan senang mendengar pendapat kamu, ekspresikan pemikiran kamu tentang 30DaysOfJavaScript challenge. Kamu bisa meninggalkan Testimoni pada [link](https://testimonial-vdzd.onrender.com//) + +## Persyaratan + +Tidak diperlukan pengetahuan pemrograman sebelumnya untuk mengikuti tantangan ini. Kamu hanya perlu: + +1. Motivasi +2. Komputer +3. Internet +4. Browser +5. Code editor + +## Setup + +Saya percaya kamu memiliki motivasi yang kuat untuk menjadi Developer, sebuah komputer dan internet. Jika kamu punya keduanya, kamu punya semua yang dibutuhkan untuk segera memulainya. + +### Install Node.js + +Kamu mungkin tidak butuh saat ini tapi akan terpakai nanti. Install [node.js](https://nodejs.org/en/). + +![Node download](../images/download_node.png) + +Setelah mendownload dan Install + +![Install node](../images/install_node.png) + +Kita bisa mengecek apakan node berhasil terinstall di perangkat kita dengan membuka terminal atau command prompt + +```sh +asabeneh $ node -v +v12.14.0 +``` + +Ketika membuat Tutorial ini saya menggunakan versi Node 12.14.0, tapi saya merekomendasikan versi Nodejs v14.17.6, pada saat kamu membaca materi ini mungkin versinya sudah lebih tinggi. + +### Browser + +Ada banyak browser di luar sana, tapi saya merekomendasikan Google Chrome. + +#### Menginstall Google Chrome + +Install [Google Chrome](https://www.google.com/chrome/) jika kamu belum punya. Kita bisa menulis kode sederhana pada console browser, tapi kita tidak menggunakan console untuk mengembangkan aplikasi. + +![Google Chrome](../images/google_chrome.png) + +#### Membuka Google Chrome Console + +Kamu bisa membuka console pada Chrome salah satunya dengan mengklik titik tiga pada atas kanan pojok browser, pilih _More tools -> Developer tools_ atau gunakan shortcut keyboard. + +![Opening chrome](../images/opening_developer_tool.png) + +Untuk membuka console Chrome dengan shortcut keyboard. + +```sh +Mac +Command+Option+J + +Windows/Linux: +Ctl+Shift+J +``` + +![Opening console](../images/opening_chrome_console_shortcut.png) + +Setelah kamu membuka console pada Google Chrome, coba pada tombol yang ditandai. Kita akan lebih sering menggunakan Console. Console merupakan tempat di mana kode Javascript kamu ditulis. V8 engine pada Console merubah kode Javascript menjadi kode mesin. +Mari kita tulis kode Javascript pada Console: + +![write code on console](../images/js_code_on_chrome_console.png) + +#### Menulis kode pada console Browser + +Kita dapat menulis kode JavaScript di console Google atau console browser mana pun. Namun, untuk tantangan ini, kita hanya akan fokus pada console Google Chrome. Buka console dengan menggunakan perintah berikut: + +```sh +Mac +Command+Option+I + +Windows: +Ctl+Shift+I +``` + +##### Console.log + +Untuk menulis kode JavaScript pertama kita, kita menggunakan fungsi bawaan **console.log()**. Kita memasukkan argumen sebagai data masukan, dan fungsi tersebut menampilkan outputnya. Kita memasukkan `'Hello, World'` sebagai data masukan atau argumen dalam fungsi console.log(). + +```js +console.log('Hello, World!') +``` + +##### Console.log dengan Multiple Arguments + +Fungsi **`console.log()`** dapat menerima beberapa parameter yang dipisahkan oleh koma. Syntaxnya terlihat seperti berikut: **`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') +``` + +Seperti yang terlihat dari potongan kode di atas, _`console.log()`_ dapat menerima beberapa argumen. + +Selamat! kamu telah menulis kode JavaScript pertama kamu menggunakan _`console.log()`_. + +##### Comments + +Kita dapat menambahkan komentar ke dalam kode kita. Komentar sangat penting untuk membuat kode lebih mudah dibaca dan untuk memberikan catatan dalam kode kita. JavaScript tidak menjalankan bagian komentar dalam kode kita. Dalam JavaScript, setiap baris teks yang dimulai dengan // adalah komentar, dan apapun yang dibungkus seperti ini `//` juga merupakan komentar. + +**Contoh: Single Line Comment** + +```js +// This is the first comment +// This is the second comment +// I am a single line comment +``` + +**Contoh: Multiline Comment** + +```js +/* +This is a multiline comment + Multiline comments can take multiple lines + JavaScript is the language of the web + */ +``` + +##### Syntax + +Bahasa pemrograman mirip dengan bahasa manusia. Bahasa Inggris atau banyak bahasa lain menggunakan kata-kata, frasa, kalimat, kalimat majemuk, dan lainnya untuk menyampaikan pesan yang bermakna. Arti bahasa Inggris dari sintaksis adalah "pengaturan kata-kata dan frasa untuk menciptakan kalimat yang terbentuk dengan baik dalam suatu bahasa." Definisi teknis sintaksis adalah struktur pernyataan dalam bahasa komputer. Bahasa pemrograman memiliki sintaksis. JavaScript adalah bahasa pemrograman, dan seperti bahasa pemrograman lainnya, ia memiliki sintaksisnya sendiri. Jika kita tidak menulis sintaksis yang dimengerti oleh JavaScript, itu akan menampilkan berbagai jenis error. Kita akan mempelajari berbagai jenis error JavaScript nanti. Untuk saat ini, mari kita lihat syntax yang error. + +![Error](../images/raising_syntax_error.png) + +Saya membuat error dengan sengaja. Akibatnya, console menampilkan error. Sebenarnya, sintaksis sangat informatif. itu akan memberi tahu jenis error yang dibuat. Dengan membaca panduan pada error, kita dapat memperbaiki sintaksis dan memperbaiki masalahnya. Proses mengidentifikasi dan menghapus error dari program disebut debugging. Mari kita perbaiki error tersebut: + +```js +console.log('Hello, World!') +console.log('Hello, World!') +``` + +Sejauh ini, kita telah melihat cara menampilkan teks menggunakan _`console.log()`_. Jika kita mencetak teks atau string menggunakan _`console.log()`_, teks tersebut harus berada di dalam tanda kutip tunggal, tanda kutip ganda, atau tanda kutip belakang (backtick). +**Contoh:** + +```js +console.log('Hello, World!') +console.log("Hello, World!") +console.log(`Hello, World!`) +``` + +#### Aritmatika + +Sekarang, mari kita latihan lebih banyak menulis kode JavaScript menggunakan _`console.log()`_ pada console Google Chrome untuk tipe data angka. + +Selain teks, kita juga dapat melakukan perhitungan matematika menggunakan JavaScript. Mari kita lakukan beberapa perhitungan sederhana berikut. + +Kita bisa menulis kode JavaScript di console Google Chrome tanpa perlu fungsi **_`console.log()`**. Namun, ini tetap dimasukkan pada tantangan ini karena kita akan lebih banya melakukan di dalam text editor di mana penggunaan fungsi tersebut wajib. Kamu dapat mencobanya langsung dengan menulis di console. + +![Arithmetic](../images/arithmetic.png) + +```js +console.log(2 + 3) // Penambahan +console.log(3 - 2) // Pengurangan +console.log(2 * 3) // Perkalian +console.log(3 / 2) // Pembagian +console.log(3 % 2) // Modulus - mencari nilai sisa +console.log(3 ** 2) // Pangkat 3 ** 2 == 3 * 3 +``` + +### Code Editor + +Kita dapat menulis kode kita di console browser, tetapi ini tidak diperuntukan untuk project yang lebih besar. Pada tempat kerja, para pengembang menggunakan editor kode yang berbeda untuk menulis kode mereka. Dalam tantangan 30 hari JavaScript ini, kita akan menggunakan Visual Studio Code. + +#### Menginstall Visual Studio Code + +Visual Studio Code adalah text editor open-source yang sangat populer. Saya merekomendasikan [Download Visual Studio Code](https://code.visualstudio.com/), tetapi jika kamu lebih suka menggunakan editor lain, silakan gunakan apa yang kamu miliki. + +![Vscode](../images/vscode.png) + +Jika kamu sudah menginstallnya, mari kita mulai. + +#### Cara menggunakan Visual Studio Code + +Untuk membuka Visual Studio Code, cukup klik dua kali ikonnya. Ketika kamu membukanya, kamu akan mendapatkan antarmuka seperti ini. Cobalah berinteraksi dengan ikon-ikon yang diberi tanda. + +![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) + +![Installing Live Server](../images/vsc_live_server.png) + +![running script](../images/running_script.png) + +![coding running](../images/launched_on_new_tab.png) + +## Menambahkan JavaScript ke dalam halaman web + +JavaScript dapat ditambahkan kedalam halaman Web dengan 3 cara: + +- **_Inline script_** +- **_Internal script_** +- **_External script_** +- **_Multiple External scripts_** + +Berikut ini berbagai cara untuk menambahkan kode JavaScript ke halaman web kamu. + +### Inline Script + +Buat folder project di desktop kamu atau di lokasi manapun, beri nama "30DaysOfJS," dan buat file **_`index.html`_** di dalam folder project tersebut. Kemudian paste kode berikut dan buka di browser, misalnya [Chrome](https://www.google.com/chrome/). + +```html + + + + 30DaysOfScript:Inline Script + + + + + +``` + +Sekarang, kamu baru saja menulis skrip inline pertama kamu. Kita bisa membuat pesan peringatan pop-up menggunakan fungsi bawaan _`alert()`_. + +### Internal Script + +Internal script dapat ditulis di bagian _`head`_ atau di _`body`_, tetapi lebih disarankan untuk meletakkannya di dalam _`body`_ dari dokumen HTML. Pertama, mari kita tulis di bagian _`head`_ dari halaman. + +```html + + + + 30DaysOfScript:Internal Script + + + + +``` + +Inilah cara kita menulis internal script. Menulis kode JavaScript di dalam bagian _`body`_ adalah opsi yang paling disarankan. Buka console browser untuk melihat hasil keluaran dari `console.log()`. + +```html + + + + 30DaysOfScript:Internal Script + + + + + + +``` + +Buka console browser untuk melihat hasil dengan `console.log()`. + +![js code from vscode](../images/js_code_vscode.png) + +### External Script + +Sama seperti Internal script, tautan External script dapat ditempatkan di _`head`_ atau _`body`_, tetapi lebih disarankan untuk meletakkannya di dalam _`body`_. + +Pertama, kita harus membuat file JavaScript eksternal dengan ekstensi .js. Semua file yang berakhir dengan ekstensi .js adalah file JavaScript. Buat file bernama introduction.js di dalam direktori proyek kamu dan tulis kode berikut, lalu tautkan file .js ini di bagian bawah _`body`_. + +```js +console.log('Welcome to 30DaysOfJavaScript') +``` + +External scripts di _head_: + +```html + + + + 30DaysOfJavaScript:External script + + + + +``` + +External scripts di _body_: + +```html + + + + 30DaysOfJavaScript:External script + + + + + + + +``` + +Buka console browser untuk melihat hasil dengan `console.log()`. + +### Multiple External Scripts + +Kita juga bisa menghubungkan beberapa file JavaScript eksternal ke sebuah halaman web. Buat file `helloworld.js` di dalam folder 30DaysOfJS dan tulis kode berikut. + +```js +console.log('Hello, World!') +``` + +```html + + + + Multiple External Scripts + + + + + + +``` + +_File main.js kamu harus berada di bawah semua skrip lainnya_. Sangat penting untuk mengingat ini. + +![Multiple Script](../images/multiple_script.png) + +## Mengenal Tipe Data + +Dalam JavaScript, serta dalam bahasa pemrograman lainnya, terdapat berbagai jenis tipe data. Berikut adalah tipe data primitif JavaScript: _String, Number, Boolean, undefined, Null_, dan _Symbol_. + +### Numbers + +- Integers: Integer angka (negative, zero dan positive) + Contoh: + ... -3, -2, -1, 0, 1, 2, 3 ... +- Float-point numbers: Decimal number + Contoh + ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ... + +### Strings + +Kumpulan satu atau lebih karakter di antara dua tanda kutip tunggal, tanda kutip ganda, atau backtick disebut _String_. + +**Contoh:** + +```js +'a' +'Asabeneh' +"Asabeneh" +'Finland' +'JavaScript is a beautiful programming language' +'I love teaching' +`Kita juga bisa membuat string menggunakan backtick` +'Sebuah string bisa sekecil satu karakter atau sebesar banyak halaman' +'Jenis data apa pun di bawah tanda kutip tunggal, tanda kutip ganda, atau backtick adalah sebuah string' +``` + +### Booleans + +Nilai boolean adalah antara True atau False. Setiap perbandingan mengembalikan nilai boolean, yang bisa jadi benar atau salah. + +Tipe data boolean adalah nilai benar atau salah. + +**Contoh:** + +```js +true // if the light is on, the value is true +false // if the light is off, the value is false +``` + +### Undefined + +Dalam JavaScript, jika kita tidak memberikan nilai ke sebuah variabel, maka nilainya adalah _undefined_. Selain itu, jika sebuah fungsi tidak mengembalikan apapun, maka ia akan mengembalikan _undefined_. + +```js +let firstName +console.log(firstName) // undefined, because it is not assigned to a value yet +``` + +### Null + +_Null_ dalam JavaScript berarti sebuah nilai kosong atau tidak ada nilai. + +```js +let emptyValue = null +``` + +## Mengecek Tipe Data + +Untuk memeriksa tipe data dari suatu variabel, kita menggunakan operator **typeof**. Berikut contohnya. + +```js +console.log(typeof 'Asabeneh') // string +console.log(typeof 5) // number +console.log(typeof true) // boolean +console.log(typeof null) // object type +console.log(typeof undefined) // undefined +``` + +## Komentar lagi + +Ingatlah bahwa komentar dalam JavaScript mirip dengan bahasa pemrograman lainnya. Komentar penting untuk membuat kode kamu lebih mudah dibaca. Ada dua cara untuk memberi komentar: + +- _Single line comment_ +- _Multiline comment_ + +```js +// Mengomentari kode itu sendiri dengan satu komentar. +// let firstName = 'Asabeneh'; single line comment +// let lastName = 'Yetayeh'; single line comment +``` + +Multiline: + +```js +/* + let location = 'Helsinki'; + let age = 100; + let isMarried = true; + This is a Multiple line comment +*/ +``` + +## Variabel + +Variabel adalah _wadah_ untuk data. Variabel digunakan untuk _menyimpan_ data di lokasi memori. Ketika sebuah variabel dideklarasikan, lokasi memori akan disediakan. Ketika sebuah variabel diberi nilai (data), ruang memori akan diisi dengan data tersebut. Untuk mendeklarasikan variabel, kita menggunakan **keyword** _var_, _let_, atau _const_. + +Untuk variabel yang nilainya berubah dari waktu ke waktu, kita menggunakan _let_. Jika data tidak berubah sama sekali, kita menggunakan _const_. Contohnya, PI, nama negara, gravitasi tidak berubah, dan kita bisa menggunakan _const_. Kita tidak akan menggunakan _var_ dalam tantangan ini, dan saya tidak merekomendasikan kamu menggunakannya. Itu adalah cara mendeklarasikan variabel yang rentan terhadap error dan memiliki banyak masalah. Kita akan bahas lebih lanjut tentang _var_, _let_, dan _const_ secara detail di bagian lain (scope). Untuk saat ini, penjelasan di atas sudah cukup. + +Sebuah nama variabel JavaScript yang valid harus mengikuti aturan berikut: + +- Nama variabel JavaScript tidak boleh diawali dengan angka. +- Nama variabel JavaScript tidak mengizinkan karakter khusus kecuali tanda dollar ($) dan garis bawah (_). +- Nama variabel JavaScript mengikuti konvensi camelCase. +- Nama variabel JavaScript tidak boleh memiliki spasi antara kata-kata. + +Berikut adalah contoh-contoh variabel JavaScript yang valid. + +```js +firstName +lastName +country +city +capitalCity +age +isMarried + +first_name +last_name +is_married +capital_city + +num1 +num_1 +_num_1 +$num1 +year2020 +year_2020 +``` + +Variabel pertama dan kedua dari daftar mengikuti konvensi camelCase dalam mendeklarasikan variabel di JavaScript. Di materi ini, kita akan menggunakan variabel camelCase (camelWithOneHump). Kita menggunakan CamelCase (CamelDenganDuaPunggung) untuk mendeklarasikan class. Kita akan membahas tentang class dan objek di bagian lain. + +Contoh variabel yang tidak valid: + +```js + first-name + 1_num + num_#_1 +``` + +Mari kita mendeklarasikan variabel dengan berbagai jenis tipe data. Untuk mendeklarasikan variabel, kita perlu menggunakan kata kunci _let_ atau _const_ sebelum nama variabel. Setelah nama variabel, kita menulis tanda sama (operator assignment) dan sebuah nilai (data yang diberikan). + +```js +// Syntax +let nameOfVariable = value +``` + +`nameOfVariable` adalah nama yang menyimpan berbagai jenis data atau nilai. + +**Berikut adalah contoh-contoh variabel:** + +```js +// Declaring different variables of different data types +let firstName = 'Asabeneh' // first name of a person +let lastName = 'Yetayeh' // last name of a person +let country = 'Finland' // country +let city = 'Helsinki' // capital city +let age = 100 // age in years +let isMarried = true + +console.log(firstName, lastName, country, city, age, isMarried) +``` + +```sh +Asabeneh Yetayeh Finland Helsinki 100 true +``` + +```js +// Declaring variables with number values +let age = 100 // age in years +const gravity = 9.81 // earth gravity in m/s2 +const boilingPoint = 100 // water boiling point, temperature in ยฐC +const PI = 3.14 // geometrical constant +console.log(gravity, boilingPoint, PI) +``` + +```sh +9.81 100 3.14 +``` + +```js +// Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble +let name = 'Asabeneh', job = 'teacher', live = 'Finland' +console.log(name, job, live) +``` + +```sh +Asabeneh teacher Finland +``` + +Ketika kamu menjalankan file _index.html_ di folder 01-Day, kamu akan mendapatkan tampilan seperti ini: + +![Hari pertama](../images/day_1.png) + +๐ŸŒ• luar biasa! kamu baru saja menyelesaikan tantangan hari 1 dan kamu sedang dalam perjalanan menuju kesuksesan. Sekarang, lakukan beberapa latihan untuk otak dan otot tanganmu. + +# ๐Ÿ’ป Hari 1: Latihan + +1. Tulis komentar satu baris yang mengatakan, _komentar dapat membuat kode lebih mudah dibaca_ +2. Tulis komentar satu baris lain yang mengatakan, _Selamat datang di 30DaysOfJavaScript_ +3. Tulis komentar multibaris yang mengatakan, _komentar dapat membuat kode lebih mudah dibaca, mudah digunakan_ + _dan informatif_ + +4. Buat file variable.js dan deklarasikan variabel serta beri nilai tipe data string, boolean, undefined, dan null +5. Buat file datatypes.js dan gunakan operator JavaScript **_typeof_** untuk memeriksa berbagai tipe data. Periksa tipe data dari setiap variabel +6. Deklarasikan empat variabel tanpa memberikan nilai +7. Deklarasikan empat variabel dengan memberikan nilai +8. Deklarasikan variabel untuk menyimpan nama depan, nama belakang, status pernikahan, negara, dan usia kamu dalam beberapa baris +9. Deklarasikan variabel untuk menyimpan nama depan, nama belakang, status pernikahan, negara, dan usia kamu dalam satu baris +10. Deklarasikan dua variabel _myAge_ dan _yourAge_ dan berikan nilai awal pada keduanya, lalu tampilkan di console browser. + +```sh +I am 25 years old. +You are 30 years old. +``` + +๐ŸŽ‰ SELAMAT ! ๐ŸŽ‰ + +[Hari 2 >>](./02_Day_Data_types/02_day_data_types.md) diff --git a/readMe.md b/readMe.md index e58cdbdab..8349ef89b 100644 --- a/readMe.md +++ b/readMe.md @@ -66,6 +66,7 @@ ๐Ÿ‡ป๐Ÿ‡ณ [Vietnamese](./Vietnamese/README.md) ๐Ÿ‡ต๐Ÿ‡ฑ [Polish](./Polish/readMe.md) ๐Ÿ‡ง๐Ÿ‡ท [Portuguese](./Portuguese/readMe.md) +๐Ÿ‡ฎ๐Ÿ‡ฉ [Indonesia](./Indonesia/README.md)