JavaScript basic syntax [dom|bom|es6 new syntax|jQuery|data visualization echarts]

Introduction to computer basics

programming language

Computer Basics

Introduction to JavaScript

First introduction to JavaScript

The browser executes the js process

js consists of three parts

js three writing positions

Comment

Input and output statements

Introduction to variables

what is a variable

Use of variables

Variable case

Variable case popup username

Variable syntax expansion

Variable naming convention

Transform the values of 2 variables

Variable summary

Introduction to data types

Introduction to data types

NumericNumber

isNaN

String type

Pop up web page warning box

String length and concatenation

String splicing enhancement

show age case

boolean as well as undefined and null

typeof detects variable data type

literal

Convert to string type

Convert to numeric parseInt and parseFloat

Convert to numeric Number and implicit conversion

Calculate age case

Simple adder case

Convert to boolean

Extended reading on the difference between compiled and interpreted languages

Extended Reading: Identifier Keywords Reserved Words

after class homework

Introduction to operators

arithmetic operators

Expressions and return values

prepended increment operator

Postfix increment operator

Increment Operator Exercise

Summary of pre-increment and post-increment

comparison operator

Logical Operators

Logical operator exercises

Logical interrupt, logical AND

logical interrupt, logical or

assignment operator

operator precedence

Introduction to process control branch structure

process control

if branch statement

Enter the Internet cafe case

ifelse double branch statement

Determine leap year cases

if else if multi-branch statement

Judging grade cases

ternary expression

Digital 0 filling case

switch statement

Switch precautions

Query fruit cases

The difference between switch and ifelseif

Reading cycle

purpose of loop

for loop syntax structure

for loop execution process

Power off debugging

for loop executes the same code repeatedly

for loop repeatedly executes different codes

for loop repeats certain operations

for loop case

Case study of student performance (Part 1)

Case study of student performance (Part 2)

Print five stars in one line

Double for loop execution process

Print stars in 5 rows and 5 columns

Print stars in n rows and n columns

Print inverted triangle case

multiplication table

for loop summary

while loop

while case

do while loop

do while case

Cycle summary

continue keyword

break keyword

Naming convention and syntax format

Cycle work

Introduction to arrays

What is an array and how to create it

Access array elements

Traverse array

array length

Calculate sum and average of arrays

Find the maximum value in an array

Convert array to string

Add new element to array

Array stores 1~10 values

filter array method

Filter array method 2

Delete the specified element from the array (array deduplication)

flip array

Review Swapping Two Variable Values

Bubble sort principle

Bubble Sort

Function introduction

Why functions are needed

Function usage

Use functions to find the cumulative sum of 1~100

function parameters

Use functions to find the sum of any two numbers and the cumulative sum

Function parameter and actual parameter matching problem

function return value

Use functions to find the maximum of two numbers

Use function to find the maximum value in an array

return terminates the function and can only return one value

2 things to note about function return values

Seeing through functions through a juicer

Use of arguments

Use functions to find the maximum value of any number

Flip an array using a function

Function encapsulation bubble sort

Use function to determine leap year

A function can call another function

Output the number of days in February

Two ways to declare functions

Scope introduction

javascript scope

Global variables and local variables

javascript does not have block level scope

scope chain

Scope chain case

JavaScript pre-parsing guide

preparse

Preparation case

Object introduction

What are objects and why are they needed

Create objects using object literals

The difference between variable attribute function method

Create objects using new Object

Why do we need constructors

Constructor creates object (Part 1)

Constructor creates object (Part 2)

The difference between constructor and object

new keyword execution process

Traverse objects

Summary and assignments

Built-in object guide

What are built-in objects

Learn to query MDN documentation

Math maximum value method of mathematical object

Guess the number game

Use of Date object

Format date year month day week

Format date hours minutes seconds

Date total number of milliseconds (timestamp)

Countdown (Part 1)

Countdown (Part 2)

Two ways to create an array

Two ways to detect whether it is an array

Add array elements

Delete array elements

filter array

Array sort

Get array element index

Array deduplication case

Convert array to string

Basic packaging types

String is immutable

Return position based on character

Find the position and number of occurrences of a certain character

Return characters based on position

Count the most frequently occurring characters (Part 1)

Count the most frequently occurring characters (Part 2)

Splicing and intercepting strings

Replace strings and convert to arrays

Introduction to simple data types and complex data types

Data type memory allocation

Simple data type parameter passing

Passing parameters of complex data types

Introduction to web apis

The correlation between the two stages of js basics and web apis

api and web apis

Introduction to DOM

Introduction to DOM

getElementByid gets the element

getElementsByTagName Gets a certain type of tag element

H5 adds new way to obtain elements

Get body and html elements

three elements of event

Execute event process

Manipulate elements to modify element content

The difference between innerText and innerHTML

Manipulate elements - modify element attributes

Time-sharing greeting case

Operation element-modify form attributes

Example of imitating JD.com to display hidden passwords in clear text (Part 1)

Example of imitating JD.com to display hidden passwords in clear text (Part 2)

Manipulate elements - modify style attributes

Case of imitation Taobao closing QR code

Looping sprites

Show hidden text box content

Use className to modify style attributes

Password box verification information

Summary of operational elements and assignments

Exclusive thinking (algorithm)

Baidu skin resurfacing effect

Table alternate row color changing effect

Form Select All Cancel Select All (Part 1)

Form Select All Cancel Select All (Part 2)

Get custom attribute value

Set remove custom properties

Tab bar switching layout analysis (important)

Tab bar switching production (Part 1)

Tab bar switching production (Part 2)

H5 custom attributes

Why learn node operations and node introduction

The parent node of the node operation

child node

first child element and last child element

Sina drop down menu

Node operation's sibling node

Node operations: create and add nodes

Simple version of posting message case

Node operation-delete node

Delete message case

Node operation-copy node

Dynamically generate tables - create student data

Dynamically generate tables - create rows

Dynamically generate tables - create cells

Dynamically generate tables - fill cells with data

Dynamically generate tables - create and delete cells

Dynamically generate tables - add and delete operations

document.write creates elements (understand)

Comparison of efficiency between innerHTML and createElement

DOM key core

Advanced guide to events

Two ways to register events

attachEvent registration event

delete event

DOM event flow theory

DOM event flow code verification

What is an event object

The difference between e.target and this

Block default behavior

Prevent events from bubbling up

event delegation

Disable text selection and right-click menu

Get the coordinates of the mouse on the page

Angel following the mouse

Commonly used keyboard events

keyCode determines which key the user pressed

Case study of simulating JD key input content

Simulate Jingdong express tracking number inquiry (Part 1)

Simulate Jingdong express tracking number inquiry (Part 2)

BOM introduction

BOM overview

page load event

window resize event

Timer setTimeout

Callback function and ads that automatically close after 5 seconds

clear timer

Timer setInterval

Countdown effect

clear timer

Send SMS case

this points to the problem

Synchronous and asynchronous

Synchronous task and asynchronous task execution process

js execution mechanism

Common properties of location objects

Jump to the page after 5 seconds

Get URL parameters

Common methods of location

navigator object

history object

Introduction to web page special effects on PC

offsetLeft and offsetTop get the element offset

offsetWidth and offsetHeight get the element size

The difference between offset and style

Get the coordinates of the mouse inside the box

Drag modal box (top)

Drag modal box (middle)

Drag the modal box (below)

Building a page structure that imitates Jingdong’s magnifying glass effect

Imitation Jingdong magnifying glass effect showing hidden barriers and large boxes

Imitation Jingdong magnifying glass effect occlusion layer follows the mouse

Jingdong magnifying glass imitation effect limits the movement range of the occlusion layer

Imitation Jingdong magnifying glass effect large picture movement

client series

Execute function immediately

The core principles of Taobao flexiJS source code analysis

Taobao flexibleJS source code analysis pagesshow event

scroll series

Imitation Taobao fixed sidebar (Part 1)

Imitation Taobao fixed sidebar (below)

Summary of three major series

The difference between mouseover and mouseenter

Animation principles

Simple animation function encapsulation

The animation function records different timers for different elements

Principle of easing animation

Basic code implementation of easing animation

Easing animation to move between multiple target values

Add callback function for easing animation

Use of animation functions

Web page carousel chart structure construction

Web page carousel - display and hide the left and right buttons when the mouse passes

Web page carousel-dynamically generated small circles

Web page carousel chart-small circle exclusive thought

Web page carousel - click on the small circle to scroll through the images

Web page carousel - seamless scrolling with buttons on the right

Web page carousel - clone the first picture

The small circle of the web page carousel changes with the button on the right

Web page carousel-two small BUG solutions

Web page carousel image-left button function production

Web page carousel-auto play function

Throttle valve and logic interrupt application

Return to top with animation

Somersault cloud case

Introduction to mobile website special effects

Mobile touch event

Mobile TouchEvent touch event object

Drag elements on mobile

Mobile terminal carousel chart-structure construction

Mobile Carousel Chart-Layout Analysis

Mobile carousel-scrolling pictures

Mobile carousel-seamless scrolling

classList class name operation

Mobile carousel chart - small dots follow changes

Carousel chart on mobile terminal - drag carousel chart with finger

Mobile carousel - slide your finger to play the previous and next pictures

Mobile carousel image-rebound effect

Return to top module production

Solution to the 300ms delay problem of click events on mobile terminals

faskclick plug-in usage

Swiper plug-in use-reference related files

Mobile carousel image - used according to grammar specifications

swiper plug-in usage-parameter change

Other mobile plug-ins and usage summary

Use of video plug-in zy.media.js

bootstrap carousel

Alibaba 100 show carousel picture production

Local storage guide

Local storage sessionStorage

localStroge of local storage

Remember username case

An introduction to jQuery

JavaScript library

jQuery overview

Basic usage of jQuery-entry function

jQuery top-level object

DOM objects and jQuery objects

Convert DOM objects and jQuery objects to each other

jQuery common API guide

jQuery basic and hierarchical selectors

jQuery implicit iteration

jQuery filter selector

jQuery filter method-select parent and child elements

Sina drop down menu

jQuery other filtering methods

jQuery exclusive idea

Taobao clothing boutique case

jQuery chain programming

jQuery modify style css method

jQuery modify style operation class

Tab bar switching case

The difference between jQuery class operations and className

jQuery show and hide effects

jQuery sliding effect and event switching

jQuery stop animation queue

jQuery fade in and highlight case

jQuery custom animation animate method

Honor of Kings Accordion Case Layout Analysis

King of Glory Accordion Case Production

jQuery attribute manipulation

Shopping Cart Module-Select All (Part 1)

Shopping Cart Module-Select All (Part 2)

jQuery content text value

Shopping cart module - increase or decrease the number of items

Shopping Cart Module-Modify Product Subtotal (Part 1)

Shopping cart module-modify product subtotal (medium)

Shopping Cart Module-Modify Product Subtotal (Part 2)

jQuery iterates through objects each method

jQuery iterating through data

Shopping cart module - calculate total count and total

Create, add, delete elements

Shopping Cart Module-Clean Shopping Cart

Shopping cart module-add background color to selected items

jQuery size method

jQuery position methods

jQuery is rolled to the head method

Return to top with animation

Elevator Navigation Case-Show Hide Elevator Navigation

Elevator navigation case - click to scroll to the target location

Elevator navigation case - click on the current li to add the current class

Elevator navigation case - sliding page elevator navigation automatically adds the current class

Elevator navigation case throttle valve (mutex lock)

Introduction to jQuery events

Event processing on binds one or more events

on implements event delegation and binds events to dynamic elements

Weibo publishing case

off unbinding event

jQuery automatically triggers events

jQuery event object

Introduction to other methods of jQuery

jQuery object copyextend(optional)

jQuery multi-library coexistence

Waterfall plug-in usage

Image lazy loading technology

Full screen scrolling plug-in usage (optional)

bootstrap component

bootstrapJS plugin

Ali Baixiu

Totolist layout functional requirements analysis

todilist core ideas and local storage format

todolist press enter to read local storage data

todolist press enter to save the latest data to local storage

todolist local storage data is rendered and loaded into the page

todolist click the delete button to get the current index number

todolist click the delete button to complete the deletion operation

Click the checkbox to modify the done attribute of the corresponding data

Todolist is in progress and has been completed

todolist counts the number of ongoing and completed items

Introduction to the function of recording video

Point area layout style

Map area layout style

User area layout style

Order area layout style

Sales area layout style

Channel and quarter layout styles

Ranking area layout style-reference

Introduction to data visualization projects

What data visualization

Data Visualization Project Overview

Introduction to ECharts

Basic use of ECharts

Choose different chart types

ECharts project configuration (Part 1)

ECharts-grid configuration

ECharts related configuration (middle)

ECharts project configuration (Part 2)

Discount chart generation and configuration item summary

Data visualization project adaptation solution analysis

Data visualization project adaptation plan

Project preparation and following the auto-refresh browser plug-in

Visualization project-body and viewport production

Visualization project column container

Border picture usage scenarios and cutting principles

Border image usage syntax

Public panel style production (Part 1)

Public panel style production (Part 2)

Call font icon by class name

Data visualization project-overview area module production

Data visualization project-monitoring area layout analysis

Data visualization project-monitoring area tab bar switching analysis

Data visualization project - seamless scrolling of monitoring area

Point distribution point module-layout

Point distribution point-introduction chart

ECharts pie chart-tooltip parameter meaning

ECharts pie chart-series parameter meaning

Positioning distribution module-customized configuration (Part 1)

Positioning distribution module-customized configuration (Part 2)