Today we learned series 1 season (HTML/JavScript/CSS knowledge points)

Since the end of October 2019, I’ve been Posting a boiling point every weekday titled “Today I learned”. So the bit by bit accumulation, to now has accumulated enough enough amount, so gather out and share with everyone.

The reason why I did such a thing at the beginning, on the one hand, is to urge myself to study every day; On the other hand, I find that sometimes the knowledge points I have learned are rather trivial, which can be finished in one sentence, but is not enough for an article. I have to find a place to record them, otherwise I may forget them later. I found boiling point to be a good place to go, so I started my journey of sharing.

In the process of sharing, there will be some “the problem you mentioned is nothing new”, “Did you just know…”. , “… “I don’t really care. To list these words is no other than to say: I posted these boiling points, I must be useful to me, is let me learn, if you already know, then I congratulate you; If you don’t know, I hope you can learn it after I learn it, and we can make progress together.

Well, to say more is nonsense. Let’s begin the body:

JavaScript

1. STR. The replace method

The result of ‘2019.12.13’.replace(‘.’, ‘-‘) is “2019-12.13”. By default, only the first matching. Is replaced.

2. Mapping function of array. from method

The array.from () method converts an iterable into an Array while doing a map operation.

3. Range of numbers displayed using scientific notation

The following four ranges of numbers in JavaScript are displayed using scientific notation:

(- up, 1 e + 21]
[-1e-7, 0)
(0, 1e-7]
[1 e + 21 + up)

4. Symbol.toStringTag

Object. The prototype. The toString () can be used to check the Object type.

var toString = Object.prototype.toString;
toString.call('foo');     // "[object String]"
toString.call([1, 2]);    // "[object Array]"
toString.call(3);         // "[object Number]"
toString.call(true);      // "[object Boolean]"
toString.call(undefined); // "[object Undefined]"
toString.call(null);      // "[object Null]"
Copy the code

Starting with ES2015, you can customize the type values returned by objects using the built-in symbol.toStringTag.

let Obj = {
  get [Symbol.toStringTag]() { return 'Wow' }
}
Object.prototype.toString.call(obj) // "[object Wow]"
Copy the code

What you may not know is that some built-in objects already define their own types using symbol.toStringTag.

Object.prototype.toString.call(new Map());       // "[object Map]"
Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]"
Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
Copy the code

Reference link: developer.mozilla.org/en-US/docs/…

5. Attribute description of the location object

6. Essence of the export default command

The JavaScript export default command essentially prints out a variable called default.

// module.js
const apple = '🍏', banana = '🍌'
export default apple
export { banana }
// import.js
import apple, { banana } from 'm.js'

/ / is equivalent to

// module.js
const apple = '🍏', banana = '🍌'
export {
    apple as default,
    banana
}
// import.js
import { default as apple, banana } from 'm.js'
Copy the code

That is to say:

export default xx 是 export { xx as default }Another way of writing it
import xx 是 import { default as xx }Another way of writing it

7. Alternative use of template strings

In addition to providing the usual interpolation syntax (${}), the template string (‘ ‘) provides a special call form for functions called func ‘x’.

Simply put: alert ‘123’ equals alert(123)

When variables are included, the template string is split into multiple arguments and the function is called:

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
/ / is equivalent to
tag(['Hello '.' world '.' '].15.50);
Copy the code

That is, the actual call argument is:

The first argument is an array of the rest of the string after the template string excludes the variable part.
Starting with the second argument, a list of “variables in the template string.”

Reference link: es6.ruanyifeng.com/#docs/strin…”

8. Process emoji strings with array. from

The.length attribute or.charat () method of a string is wrong to check for characters with Unicode code points greater than 0xFFFF such as 😃. We can use the array. from method introduced in ES6 to get the correct result.

const str = '😎'// The.length attribute or.charat () method is wrong str.charat (0) // for characters with Unicode code points greater than 0xFFFF"�"Str.length // 2 // Use the array. from method introduced in ES6 to get the correct resultfunction charAt(str, index) {
  return Array.from(str)[index] || ' '
}
function strLength(str) {
  return Array.from(str).length
}
charAt('😎'/ /, 0)"😎"
strLength('😎'/ / 1Copy the code

9. Statistics the length of the string in bytes

JavaScript can count the length of a string in bytes in one of two ways:

New TextEncoder().encode(‘👀⛰️’).bytelength // 10, or
The new Blob ([‘ 👀 ⛰ ️ ‘]). The size / / 10

10. Introduce the Lodash ES module build

The well-known JS library Lodash provides a build introduced using the ES module syntax — LoDash-es. So we can also use it like this:

<script type="module">
import { uniq } from 'https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js'
uniq([1.1.2]) / / [1, 2]
</script>
Copy the code

11. Fullscreen API

Simple use of the Fullscreen API:

Enable full screen:elem.requestFullscreen()
Exit full screen:document.exitFullscreen()

IO /zhangbao/ PE…

12. Native solution for smooth scrolling of web pages

There are four native ways to achieve smooth Scroll:

html { scroll-behavior: smooth; }
window.scroll({ behavior: ‘smooth’ })
window.scrollBy({ behavior: ‘smooth’ })
elem.scrollIntoView({ behavior: ‘smooth’ })

IO /zhangbao/ PE…

13. Description of prototype chain inheritance

Prototype chain inheritance in JavaScript:

Using constructorsAnimalGenerated instance object (new Animal()), its interior[[Prototype]]Chain (i.e.__proto__Attribute) point toAnimal.prototype.
ES6 class inheritance syntaxclass Rabbit extends Animal { ... }It actually did two things:Rabbit.prototypeThe inside of the[[Prototype]]Chain toAnimal.prototypeAnd at the same timeRabbitThe inside of the[[Prototype]]Chain toAnimal

The inheritance details are shown below.

Send custom events

CustomEvent dispatch on DOM elements can be implemented using the new CustomEvent() and target.dispatchevent (event) apis.

function fireEvent(name, target, detail) {
  const event = new CustomEvent(name, {
    bubbles: true,
    detail,
  });
  target.dispatchEvent(event);
};
Copy the code

IO /zhangbao/ PE…

15. Conversion between integers and different bases

We can use the Numobj.toString (radix) method to convert integers into different base strings; Also, you can use parseInt(String, radix) to convert strings of different bases to decimal numbers.

16. Calling a method on an integer causes an error

Calling a method directly on an integer in JavaScript causes an error

1.toString() // Uncaught SyntaxError: Invalid or unexpected token
Copy the code

There are three ways to avoid errors:

withStringFunction is explicitly converted to a string
There is a space between the number and the dot
Two consecutive dots after the number
Surround the number with parentheses

Copy text

Copying text with JavaScript consists of three steps:

Select text (input.select())
Copy text (document.execCommand('copy'))
Remove text selection (window.getSelection().removeAllRanges())

IO /zhangbao/ PE…

18. Check for empty objects

There are two ways to check for empty objects in JavaScript:

19. Select all text in the input box

To achieve full text selection function in the input box, there are two apis to choose from:

HTMLInputElement.select()
HTMLInputElement.setSelectionRange()

<input onClick="this.select();" value="via select()" />
<input onClick="this.setSelectionRange(0, this.value.length)" value="via setSelectionRange()" />
Copy the code

IO /zhangbao/ PE…

20. A deconstruction assignment knowledge point

What you may not know about deconstructing assignment:

Destructuring assignments of extended operators can only copy the target object’s own properties
Purely destructively assigned, you can copy properties inherited by the target object

21. URLSearchParams API

The URLSearchParams API can be used to manipulate URL parameters in the browser address bar.

In order to “example.com/?q=URLUtils…” As an example. Let’s initialize:

var searchParams = new URLSearchParams(location.search)
Copy the code

To operate again:

Get parameters:searchParams.get('topic') // 'api'
Add/update parameters:searchParams.set('topic', 'More webdev')
Current parameters:searchParams.toString() // "q=URLUtils.searchParams&topic=More+webdev"
Delete parameters:searchParams.delete('topic')
Whether to include parameters:searchParams.has('topic') // false
searchParams.toString() // "q=URLUtils.searchParams"

Reference link: developer.mozilla.org/en-US/docs/…

CSS

22. Responsive font Settings

You can use VW and @media queries for responsive web site font sizes.

html {
    font-size: 1.6666666666666667 vw;
}

@media (max-width: 600px) {
    html {
        font-size: 14px; }} @media (max-width: 400px) {
    html {
        font-size: 17px; }}Copy the code

23. Attr () function function

We can use the attr() function in the content attribute of pseudo-elements (such as ::after) to get element attribute values, and we also support string concatenation using Spaces.

IO/Zhangbao/PE…

24. What does background-clip do?

The CSS background-clip is used to limit the area in which the background is visible. The value can be border-box, padding-box, content-box, or interesting text.

The padding-box value indicates that only the background within the padding-box area is visible. Border-box (default) is similar to content-box. When set to text, only the background within the text area is visible, or “the text is filled with the background”, but you need to set the text color to transparent to see the effect.

IO /zhangbao/fu…

25. `auto-fit` 与 `auto-fill`The difference between

The difference between auto-fit and auto-fill keywords in Grid layout.

1frSituation:auto-fillAllocate as many Grid Item pits as possible in the available space;auto-fitStretch the current Grid Item as far as possible to fill the available space.
Solid width:auto-fillExtra Grid Item pits are allocated if space is sufficient;auto-fitDo not.

IO /zhangbao/ PE…

26. Calculation basis of percentage padding

The CSS percentage padding is calculated based on the width of the parent element. As shown below, the padding-top of the Child is 25%, which translates to 400 * 0.25 (100px).

IO /zhangbao/ PE…

27. text-decoration-skip-ink

The CSS text-decoration-skip-ink property is used to set whether an underscore is automatically skipped or directly passed through the upper and lower edges of character highlights.

28. text-decoration-style

The five possible values of the text-decoration style are solid, double, dotted field, bounding field and wavy. Render the result as follows:

IO /zhangbao/ PE…

29. Flip scaleX(-1)/scaleY(-1)

ScaleX (-1)/scaleY(-1) flips elements in the X /Y direction.

IO /zhangbao/ PE…

30. :placeholder-shown

:placeholder-shown; while placeholder attribute Matches the input box when placeholder text in the input box is displayed. There are several edge cases to be aware of:

IO /zhangbao/ PE…

31. Logical attributes: Inline-size, block-size

The meanings of the inline-size and block-size attributes are related to the writing mode of the web page. Take typesetting as an example:

The direction in which text is written is called the X /inline axis, and the size the element occupies on this axis is called inline size.
The direction in which the text folds is called the Y /block axis, and the size the element occupies on this axis is called block size.

So these two attributes correspond to width and height:

In default writing mode (writing-mode: horizontal-tb;Width = inline-size, height = block-size
Whereas in vertical writing (e.gwriting-mode: vertical-rl;Width = block-size, height = inline-size

IO /zhangbao/ PE…

32. clip-path

There are two ways to crop elements using the clip-path attribute:

IO /zhangbao/fu…

33. Difference between :nth-child and :nth-of-type

Difference between :nth-child(1) and :nth-of-type(1) :nth-child(1)

Span :nth-child(1) ; 2. Is the first child of the parent element. The judgment conditions expressed in JS are as follows:

if (parent.children[0] && parent.children[0].tagName === 'SPAN') {/* Apply styles to elements... * /}Copy the code

A :nth-of-type(1) matches the first occurrence of in the parent element. The lookup logic expressed in JS looks like this:

if (document.querySelectorAll('.nav > a')[0]) {/* Apply styles to elements... * /}Copy the code

IO /zhangbao/ PE…

34. Flex project content dimensions & base dimensions

The final render size of the Flex project is based on the content size/base size:

When the Flex project is set upflex-basis 或 width(At the same time,flex-basisPriority overwidth), it is based on this base size reduction/growth.
When the Flex project is not setflex-basis 或 width, is based on the content size (max-content(Shrinking/growing.

Demo address (open and observe in Firefox) : codepen. IO /zhangbao/fu…

35. Distinguish between mouse focus and Tab index focus

The :focus-visible pseudo class can distinguish whether an element is focused by mouse click or by Tab key index.

This gives you the interaction that

IO /zhangbao/ PE…

36. writing-mode

Performance of text typesetting (document flow) direction under different writing-mode values:

IO /zhangbao/fu…

37. Final render size of Grid project

Using grid-template-columns: 1fr 1fr is it possible to ensure that both grid columns are the same width? Not necessarily.

If a Grid project’s min-content is greater than the final calculated value of 1FR, then the Grid project’s final render size is min-content.

IO /zhangbao/fu…

38. The visibility properties

The CSS visibility property has an interesting aspect — the parent element visibility: hidden, and the child element visibility: visible. The final rendering effect is that the parent element is not visible, but the child element is visible.

IO /zhangbao/fu…

39. Text-decoration is a composite property

The TEXT-decoration property in the CSS is a compound property. The syntax is as follows:

text-decoration: <‘text-decoration-line’> || <‘text-decoration-style’> || <‘text-decoration-color’>

Where the initial values for each individual attribute are as follows:

text-decoration-line: none
text-decoration-style: solid
text-decoration-color: currentcolor

When we use text-decoration: underline, we will use text-decoration: underline solid currentcolor.

Link: developer.mozilla.org/en-US/docs/…

HTML

40. rel=”nofollow”

Some personal websites will appear some spam comments outside the chain, some outside the chain is to improve their site’s search engine ranking.

In order to inform the search engine in addition to the chain is not trusted by the site, do not need to count in the search ranking. It can be done like this:

<a rel="nofollow" target="_blank">
Copy the code

Further, add a code to avoid this page being linked to the web page operation:

<a rel="nofollow noopener noreferrer" target="_blank">
Copy the code

Reference link: ahrefs.com/blog/zh/nof…

41. rel=”noopener noreferrer”

If you use or window.open() on the current page to open a new page, you can use window.opener to access the window object of the current page if no special treatment is done.

The effect is to reset the current page url in the new page: window.opener. Location = ‘evil.com’

To avoid this kind of thing, we can use the following approach.

Reference links: mathiasbynens. Making. IO/rel – noopene…

(after)

Today we learned series 1 season (HTML/JavScript/CSS knowledge points)

JavaScript

1. STR. The replace method

2. Mapping function of array. from method

3. Range of numbers displayed using scientific notation

4. Symbol.toStringTag

5. Attribute description of the location object

6. Essence of the export default command

7. Alternative use of template strings

8. Process emoji strings with array. from

9. Statistics the length of the string in bytes

10. Introduce the Lodash ES module build

11. Fullscreen API

12. Native solution for smooth scrolling of web pages

13. Description of prototype chain inheritance

Send custom events

15. Conversion between integers and different bases

16. Calling a method on an integer causes an error

Copy text

18. Check for empty objects

19. Select all text in the input box

20. A deconstruction assignment knowledge point

21. URLSearchParams API

CSS

22. Responsive font Settings

23. Attr () function function

24. What does background-clip do?

25. auto-fit 与 auto-fillThe difference between

26. Calculation basis of percentage padding

27. text-decoration-skip-ink

28. text-decoration-style

29. Flip scaleX(-1)/scaleY(-1)

30. :placeholder-shown

31. Logical attributes: Inline-size, block-size

32. clip-path

33. Difference between :nth-child and :nth-of-type

34. Flex project content dimensions & base dimensions

35. Distinguish between mouse focus and Tab index focus

36. writing-mode

37. Final render size of Grid project

38. The visibility properties

39. Text-decoration is a composite property

HTML

40. rel=”nofollow”

41. rel=”noopener noreferrer”

Related Posts

OpenResty Dynamic proxy Generic domain name resolution

Vue family barrel imitation of a fish part of the layout and functional realization

This in the Vue instance points to the problem

25. `auto-fit` 与 `auto-fill`The difference between