This is the 21st day of my participation in the August More Text Challenge

☆☆ Today’s learning content: (a simple and systematic summary of the previous learning)

< span style = “max-width: 100%; clear: both; min-height: 1em

Can serve as a beginner’s learning route, can refer to, learning progress is not particularly driven! Ongoing update

Combined with their own understanding, simple and comprehensive summary of the basic knowledge points in the process of learning JavaScript in vernacular Chinese, easy to deepen understanding!

Let’s get started! ‘Only a firm foundation can build a tall building ‘! Come on! Take it seriously!

1, the first week of knowledge comb

Data type:

typeof

Basic: Character values Boolean

Composite: object

Special: null undefined

Operator expression

  • Arithmetic:

    ++   —

    + – * / % “8” -9

  • Relational – Logical – Conditional – Assignment

  • Highest priority: () arithmetic relation logical conditional assignment (=)

  • Type conversion: parseInt() parseFloat() Number(“200px”) Boolean() toString(16)

Three major structures:

Sequential selection cycle

if(Range condition) {}else{}Copy the code
switch(fixed value condition) {case 1:
    break
}
Copy the code

Options:

Cycle:

while do.. while for for… in for( var i = 0 ; i < 10 ; i++ ) alert(i); The loop body

Break: ends the current loop

Function:

Parameters of the concept

Parameter: is a one – to – one correspondence in a variable function definition

The return value return

Variable scope:

  • The global variable
  • A local variable
var num = 90
function fn(num) {
  num = 100
  alert(num)
  100
}
fn(num)
alert(num)
90
Copy the code
alert(a)
function a() {
  console.log(19)}var a = 100
function a() {
  console.log(19)}Copy the code

Function and event relationships:

Event three elements: Event source Event handler (function)

Common events:

Recursive function calls: the function calls itself

function fac(num) {
  if (num == 1) {
    return 1
  } else {
    return num * fac(num - 1)}}Copy the code

2. Comb the knowledge points in the second week

Object: {}

Constructor: new String()

Built-in objects

Array

Sorting algorithm: bubble sort select sort

De-duplication algorithm:

New array: Take the number from the original array and determine if it exists in the new array. If not, add it to newArr

Array manipulation methods:

push() pop()   shift()   unshift()  splice()  join()….

Value passing and address passing:

var arr = [1.2.3]
var brr = arr
brr[0] = 10
arr[0] = 10
Copy the code

String

Operation method

String to array: split()

Date()

Obtain the date get….

SetDate (now.getDate() + 8)

Math:

Get integer values of any interval:

regular

BOM :         window —- location history  document   screen  event  navigator

DOM :

  • CreateElement method increases the appendChild () insertBefore () ()

  • Delete the remove removeChild () ()

  • change

    • Change the style.classname.style.color = xx.style.csstext

    • .attribute = value.setAttribute (” attribute “,” value “).getAttribute();

    • To change the content

      .value

      .innerHTML

  • check

    getElementsBy….

3, the third week of knowledge

Event object

Event object properties: pageX offsetX keyCode

Compatibility:

Event transmission mode:

  • Event bubbles propagate from child element to parent element
  • Event capture is propagated from parent to child elements

Event listeners

AddEventListener (event,function(){}, false/true);

Event delegate (agent) :

Benefits: Improved execution efficiency Dynamically created elements use delegates to add events outside the function

Get the event source:

target || srcElement
Copy the code

json

{” key “: value} for in json

Drag and drop:

Three steps: three events Offset family property: offsetLeft/Top Width/height Scroll Family property: Obtains the page roll distance

Regular:

  • Special characters: \d \ W \s +? *. |…
  • Form validation
  • Method: test() replace() search() Exec() match()

Cookies:

Set the cookie

document.cookie = 'uname=xn213'
Copy the code

To get a cookie

document.cookie
Copy the code

Delete the cookie

Set the key of cookie to' 'Or the lifetime is set to -1
Copy the code

Life cycle:

document.cookie = 'uname=xn213; expires = ' + now
Copy the code

Cookie parameters: key and value./ session tracing technique:

ES6

  • Block-level scoped let keyword
  • Constants define const
  • This refers to changing: bind apply call
  • For of and for in
  • String template:${variable function call}
  • Arrow function () => {}
  • [x,y] = [3,2] {a,b} = {b: 3, a: 9}
function fn({ b, a }) {}
fn({ a: 8.b: 9 })
Copy the code
  • Swap values:
; [x, y] = [y, x]Copy the code
  • Array.from()Converts a pseudo-array with length to an array
  • new Set()Array.from(new Set([])
  • new Map()

Symbol type

Properties of the protected object

  • "use strict"Strict mode

4. Summary of compatibility problems

4.1. Event object creation

e || event
Copy the code

4.2. Event bubbling

e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
Copy the code

4.3. Cancel the browser’s default behavior

e.preventDefault ? e.preventDefault() : (e.returnValue = false)
return false
Copy the code

4.4 Obtain the event source from the event delegate

e.target || e.srcElement
Copy the code

4.5. Obtain the keyboard key value

e.keyCode || e.which
Copy the code

4.6. Get the page rolling distance

document.documentElement.scrollTop || document.body.scrollTop
Copy the code

4.7 State of text selection when undragging (Selection)

widnow.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
Copy the code

4.8. Get non-line element style values

function getStyle(obj, attr) {
  return window.getComputedStyle
    ? window.getComputedStyle(obj, false)[attr]
    : obj.currentStyle[attr]
}
Copy the code

Preview: Come on, dream chasers

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period, consolidate the foundation, early into Dachang!

It’s not easy to keep it up, and it’s not easy to keep it up. You’re great!

Read more:

Review of previous updates

【 Relearn JS】 Learn every day to consolidate the foundation:

【day1】

Day2 various operators, DAY3 data types, DAY4 loop structures & conditional statements, DAY5 functions (emphasis), day6 scopes & events,

【 DAY7 】 object & array method summary, 【day8】 string method & partial sorting,

【 DAY9 】Math object & Wrapper Function, 【 DAY10 】BOM- Browser object model,

【 DAY11 】DOM- Document Object Model

【 DAY13 】Event Event object first known (2),

【 DAY14 】 Event delegate & Drag principle

[DAY15] drag and drop implementation & regular beginning, [DAY16] regular specific method, [DAY17] cookie,

【day18】ES6,

[DAY19] Js motion function encapsulation

More on the way… A long way to go ==-.. – = =

Calm Down & Carry On!