2021년 8월 26일 목요일

꼭 알아야될 10가지 JavaScript 기본 컨셉

 

1. Arrow Function


  1. Traditional functions have ‘this’ keyword but arrow functions have no ‘this’ keyword.
  2. Traditional functions have ‘arguments’ keywords but arrow functions have no ‘arguments’ keywords.
  3. Traditional functions can use as ‘constructors but arrow functions can not use as ‘constructors’.

2. Default parameters


3. IIFE Function



IIFE full meaning — Immediately Invoked Function Expression

4. Spread operator


Spread operator(…) or three dots are the es6 Features. You can concat array, object, and string by using the spread operator. It is used for array expression or string to be expanded or an object expression to be expanded in places. You can copy all the elements of an array, all the properties of an object, and all iterable of the string.



5. isNaN() Method

isNaN() Method returns true if the argument is NaN, Otherwise it returns false.


JavaScript has two types of data types. Primitive and Reference or Objects and Functions.

6. Primitive Values

There are 7 Primitive data types. They are___

  1. Number
  2. String
  3. Boolean
  4. Undefined
  5. Null
  6. Symbol
  7. BigInt

7. Reference or Objects and Functions

Without primitive data types, javaScript’s other data types are reference data types. They are ____

  1. Object
  2. Function

Arrays, regular expressions, and dates are the Object type.



8. Double Equal(==) vs Triple Equal (===)

9. Ternary Operator


10. Destructuring

There are two Destructuring, Array and Object.

Object Destructuring: We can destructure object properties in variable and the variable name and property name should be the same. We can destructure any properties in an object. In object Destructuring, we should not maintain any order which property was first or last or any position. In object destructuring, we should declare a variable with curly braces { }. In curly braces, we should write those properties that we want to destructure from an object. Then we should use the assignment operator = and on the right side, we use that object.

Array Destructuring: We can destructure array elements in variable and the variable name and the element don't need to be the same name. In array destructuring, we should maintain the order which element was first or last or any position. In array destructuring, we should declare a variable with an array symbol[]. In the array symbol, we should write elements by an order which element was first or last or any position. If we want the second element and don’t want the first element we can use only a comma. Then we should use the assignment operator = and on the right side, we use that array.

** In Array and object destructuring we can use a spread operator or three dots to destructuring another array of elements in an array variable and another object properties in an object variable.

10. Destructuring

There are two Destructuring, Array and Object.

Object Destructuring: We can destructure object properties in variable and the variable name and property name should be the same. We can destructure any properties in an object. In object Destructuring, we should not maintain any order which property was first or last or any position. In object destructuring, we should declare a variable with curly braces . In curly braces, we should write those properties that we want to destructure from an object. Then we should use the assignment operator and on the right side, we use that object.{ }=

Array Destructuring: We can destructure array elements in variable and the variable name and the element don't need to be the same name. In array destructuring, we should maintain the order which element was first or last or any position. In array destructuring, we should declare a variable with an array symbol. In the array symbol, we should write elements by an order which element was first or last or any position. If we want the second element and don’t want the first element we can use only a comma. Then we should use the assignment operator and on the right side, we use that array.[]=

** In Array and object destructuring we can use a spread operator or three dots to destructuring another array of elements in an array variable and another object properties in an object variable.

2021년 8월 5일 목요일

:where() :is()

 

:is()

Think about when you want to apply the same styling to multiple elements in your HTML. You’d probably end up with something that looks like this:

.main h1,
.main h2,
.main .heading, {
line-height: 1.2;
}
.nav li,
.nav p {
padding: 5px 10px;
}

With :is() we can write our CSS in a shorter, quicker, and more elegant way.

.main :is(h1, h2, .heading){
line-height: 1.2;
}
.nav :is(li, p) {
padding: 5px 10px;
}

Imagine all the many lines you’re saving!
This is very similar to how nesting works with preprocessors such as SCSS.

The pseudo-class function :is() (AKA “Matches Any”) takes a selector list and selects any element that can be selected by one of the selectors in that list.
It can also be chained with other selectors such as :not() , :firstchild() etc.

2021년 8월 2일 월요일

9 HTML Features

 1. The <optgroup> element

 2. The <base> element

 3. The <del> and <ins> elements

 4. The <wbr> element

 5. The <fieldset> element

 6. Opening the Device Camera

Did you know that you can use HTML to access a user’s device camera? By using the attribute, you can open either the front or back camera of a mobile device to capture images. Simply add the attribute to the file input element and specify either "user" for the front camera or "environment" for the back camera.

<input type="file" capture="user" accept="image/*">
<input type="file" capture="environment" accept="video/*" />

 7. Spellcheck Activation

<input type="text" spellcheck="true" lang="en">

8. Preventing Translation

<p translate="no">Brand name</p>

9. Customizing Form Validation Messages

<input type="text" required oninvalid="this.setCustomValidity('Please enter a valid value.')">

10. Responsive Images with srcset

<img srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg3x" src="image.jpg" alt="Responsive Image">