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

• Chapter1 Computer Basics
• 1-1 Introduction to computer basics
• 1-2 programming language
• 1-3 Computer Basics
• Chapter2 Introduction to JavaScript
• 2-1 Introduction to JavaScript
• 2-2 First introduction to JavaScript
• 2-3 The browser executes the js process
• 2-4 js consists of three parts
• 2-5 js three writing positions
• Chapter3 Comments and variables
• 3-1 Comment
• 3-2 Input and output statements
• 3-3 Introduction to variables
• 3-4 what is a variable
• 3-5 Use of variables
• 3-6 Variable case
• 3-7 Variable case popup username
• 3-8 Variable syntax expansion
• 3-9 Variable naming convention
• 3-10 Transform the values of 2 variables
• 3-11 Variable summary
• Chapter4 type of data
• 4-1 Introduction to data types
• 4-2 Introduction to data types
• 4-3 NumericNumber
• 4-4 isNaN
• 4-5 String type
• 4-6 Pop up web page warning box
• 4-7 String length and concatenation
• 4-8 String splicing enhancement
• 4-9 show age case
• 4-10 boolean as well as undefined and null
• 4-11 typeof detects variable data type
• 4-12 literal
• 4-13 Convert to string type
• 4-14 Convert to numeric parseInt and parseFloat
• 4-15 Convert to numeric Number and implicit conversion
• 4-16 Calculate age case
• 4-17 Simple adder case
• 4-18 Convert to boolean
• 4-19 Extended reading on the difference between compiled and interpreted languages
• 4-20 Extended Reading: Identifier Keywords Reserved Words
• 4-21 after class homework
• Chapter5 operator
• 5-1 Introduction to operators
• 5-2 arithmetic operators
• 5-3 Expressions and return values
• 5-4 prepended increment operator
• 5-5 Postfix increment operator
• 5-6 Increment Operator Exercise
• 5-7 Summary of pre-increment and post-increment
• 5-8 comparison operator
• 5-9 Logical Operators
• 5-10 Logical operator exercises
• 5-11 Logical interrupt, logical AND
• 5-12 logical interrupt, logical or
• 5-13 assignment operator
• 5-14 operator precedence
• Chapter6 process control
• 6-1 Introduction to process control branch structure
• 6-2 process control
• 6-3 if branch statement
• 6-4 Enter the Internet cafe case
• 6-5 ifelse double branch statement
• 6-6 Determine leap year cases
• 6-7 if else if multi-branch statement
• 6-8 Judging grade cases
• 6-9 ternary expression
• 6-10 Digital 0 filling case
• 6-11 switch statement
• 6-12 Switch precautions
• 6-13 Query fruit cases
• 6-14 The difference between switch and ifelseif
• Chapter7 cycle
• 7-1 Reading cycle
• 7-2 purpose of loop
• 7-3 for loop syntax structure
• 7-4 for loop execution process
• 7-5 Power off debugging
• 7-6 for loop executes the same code repeatedly
• 7-7 for loop repeatedly executes different codes
• 7-8 for loop repeats certain operations
• 7-9 for loop case
• 7-10 Case study of student performance (Part 1)
• 7-11 Case study of student performance (Part 2)
• 7-12 Print five stars in one line
• 7-13 Double for loop execution process
• 7-14 Print stars in 5 rows and 5 columns
• 7-15 Print stars in n rows and n columns
• 7-16 Print inverted triangle case
• 7-17 multiplication table
• 7-18 for loop summary
• 7-19 while loop
• 7-20 while case
• 7-21 do while loop
• 7-22 do while case
• 7-23 Cycle summary
• 7-24 continue keyword
• 7-25 break keyword
• 7-26 Naming convention and syntax format
• 7-27 Cycle work
• Chapter8 array
• 8-1 Introduction to arrays
• 8-2 What is an array and how to create it
• 8-3 Access array elements
• 8-4 Traverse array
• 8-5 array length
• 8-6 Calculate sum and average of arrays
• 8-7 Find the maximum value in an array
• 8-8 Convert array to string
• 8-9 Add new element to array
• 8-10 Array stores 1~10 values
• 8-11 filter array method
• 8-12 Filter array method 2
• 8-13 Delete the specified element from the array (array deduplication)
• 8-14 flip array
• 8-15 Review Swapping Two Variable Values
• 8-16 Bubble sort principle
• 8-17 Bubble Sort
• Chapter9 function
• 9-1 Function introduction
• 9-2 Why functions are needed
• 9-3 Function usage
• 9-4 Use functions to find the cumulative sum of 1~100
• 9-5 function parameters
• 9-6 Use functions to find the sum of any two numbers and the cumulative sum
• 9-7 Function parameter and actual parameter matching problem
• 9-8 function return value
• 9-9 Use functions to find the maximum of two numbers
• 9-10 Use function to find the maximum value in an array
• 9-11 return terminates the function and can only return one value
• 9-12 2 things to note about function return values
• 9-13 Seeing through functions through a juicer
• 9-14 Use of arguments
• 9-15 Use functions to find the maximum value of any number
• 9-16 Flip an array using a function
• 9-17 Function encapsulation bubble sort
• 9-18 Use function to determine leap year
• 9-19 A function can call another function
• 9-20 Output the number of days in February
• 9-21 Two ways to declare functions
• 9-22 Scope introduction
• 9-23 javascript scope
• 9-24 Global variables and local variables
• 9-25 javascript does not have block level scope
• 9-26 scope chain
• 9-27 Scope chain case
• Chapter10 preparse
• 10-1 JavaScript pre-parsing guide
• 10-2 preparse
• 10-3 Preparation case
• Chapter11 object
• 11-1 Object introduction
• 11-2 What are objects and why are they needed
• 11-3 Create objects using object literals
• 11-4 The difference between variable attribute function method
• 11-5 Create objects using new Object
• 11-6 Why do we need constructors
• 11-7 Constructor creates object (Part 1)
• 11-8 Constructor creates object (Part 2)
• 11-9 The difference between constructor and object
• 11-10 new keyword execution process
• 11-11 Traverse objects
• 11-12 Summary and assignments
• Chapter12 built-in objects
• 12-1 Built-in object guide
• 12-2 What are built-in objects
• 12-3 Learn to query MDN documentation
• 12-4 Math maximum value method of mathematical object
• 12-5 Guess the number game
• 12-6 Use of Date object
• 12-7 Format date year month day week
• 12-8 Format date hours minutes seconds
• 12-9 Date total number of milliseconds (timestamp)
• 12-10 Countdown (Part 1)
• 12-11 Countdown (Part 2)
• 12-12 Two ways to create an array
• 12-13 Two ways to detect whether it is an array
• 12-14 Add array elements
• 12-15 Delete array elements
• 12-16 filter array
• 12-17 Array sort
• 12-18 Get array element index
• 12-19 Array deduplication case
• 12-20 Convert array to string
• 12-21 Basic packaging types
• 12-22 String is immutable
• 12-23 Return position based on character
• 12-24 Find the position and number of occurrences of a certain character
• 12-25 Return characters based on position
• 12-26 Count the most frequently occurring characters (Part 1)
• 12-27 Count the most frequently occurring characters (Part 2)
• 12-28 Splicing and intercepting strings
• 12-29 Replace strings and convert to arrays
• 12-30 Introduction to simple data types and complex data types
• 12-31 Data type memory allocation
• 12-32 Simple data type parameter passing
• 12-33 Passing parameters of complex data types
• Chapter13 web apis
• 13-1 Introduction to web apis
• 13-2 The correlation between the two stages of js basics and web apis
• 13-3 api and web apis
• Chapter14 DOM
• 14-1 Introduction to DOM
• 14-2 Introduction to DOM
• 14-3 getElementByid gets the element
• 14-4 getElementsByTagName Gets a certain type of tag element
• 14-5 H5 adds new way to obtain elements
• 14-6 Get body and html elements
• 14-7 three elements of event
• 14-8 Execute event process
• 14-9 Manipulate elements to modify element content
• 14-10 The difference between innerText and innerHTML
• 14-11 Manipulate elements - modify element attributes
• 14-12 Time-sharing greeting case
• 14-13 Operation element-modify form attributes
• 14-14 Example of imitating JD.com to display hidden passwords in clear text (Part 1)
• 14-15 Example of imitating JD.com to display hidden passwords in clear text (Part 2)
• 14-16 Manipulate elements - modify style attributes
• 14-17 Case of imitation Taobao closing QR code
• 14-18 Looping sprites
• 14-19 Show hidden text box content
• 14-20 Use className to modify style attributes
• 14-21 Password box verification information
• 14-22 Summary of operational elements and assignments
• Chapter15 Skin resurfacing and discoloration effects
• 15-1 Exclusive thinking (algorithm)
• 15-2 Baidu skin resurfacing effect
• 15-3 Table alternate row color changing effect
• 15-4 Form Select All Cancel Select All (Part 1)
• 15-5 Form Select All Cancel Select All (Part 2)
• 15-6 Get custom attribute value
• 15-7 Set remove custom properties
• 15-8 Tab bar switching layout analysis (important)
• 15-9 Tab bar switching production (Part 1)
• 15-10 Tab bar switching production (Part 2)
• 15-11 H5 custom attributes
• Chapter16 Node operations
• 16-1 Why learn node operations and node introduction
• 16-2 The parent node of the node operation
• 16-3 child node
• 16-4 first child element and last child element
• 16-5 Sina drop down menu
• 16-6 Node operation's sibling node
• 16-7 Node operations: create and add nodes
• 16-8 Simple version of posting message case
• 16-9 Node operation-delete node
• 16-10 Delete message case
• 16-11 Node operation-copy node
• 16-12 Dynamically generate tables - create student data
• 16-13 Dynamically generate tables - create rows
• 16-14 Dynamically generate tables - create cells
• 16-15 Dynamically generate tables - fill cells with data
• 16-16 Dynamically generate tables - create and delete cells
• 16-17 Dynamically generate tables - add and delete operations
• 16-18 document.write creates elements (understand)
• 16-19 Comparison of efficiency between innerHTML and createElement
• Chapter17 event
• 17-1 DOM key core
• 17-2 Advanced guide to events
• 17-3 Two ways to register events
• 17-4 attachEvent registration event
• 17-5 delete event
• 17-6 DOM event flow theory
• 17-7 DOM event flow code verification
• 17-8 What is an event object
• 17-9 The difference between e.target and this
• 17-10 Block default behavior
• 17-11 Prevent events from bubbling up
• 17-12 event delegation
• 17-13 Disable text selection and right-click menu
• 17-14 Get the coordinates of the mouse on the page
• 17-15 Angel following the mouse
• 17-16 Commonly used keyboard events
• 17-17 keyCode determines which key the user pressed
• 17-18 Case study of simulating JD key input content
• 17-19 Simulate Jingdong express tracking number inquiry (Part 1)
• 17-20 Simulate Jingdong express tracking number inquiry (Part 2)
• Chapter18 BOM
• 18-1 BOM introduction
• 18-2 BOM overview
• 18-3 page load event
• 18-4 window resize event
• 18-5 Timer setTimeout
• 18-6 Callback function and ads that automatically close after 5 seconds
• 18-7 clear timer
• 18-8 Timer setInterval
• 18-9 Countdown effect
• 18-10 clear timer
• 18-11 Send SMS case
• 18-12 this points to the problem
• Chapter19 js sync and asynchronous
• 19-1 Synchronous and asynchronous
• 19-2 Synchronous task and asynchronous task execution process
• 19-3 js execution mechanism
• 19-4 Common properties of location objects
• 19-5 Jump to the page after 5 seconds
• 19-6 Get URL parameters
• 19-7 Common methods of location
• 19-8 navigator object
• 19-9 history object
• 19-10 Introduction to web page special effects on PC
• Chapter20 Get mouse coordinates
• 20-1 offsetLeft and offsetTop get the element offset
• 20-2 offsetWidth and offsetHeight get the element size
• 20-3 The difference between offset and style
• 20-4 Get the coordinates of the mouse inside the box
• Chapter21 Drag modal box
• 21-1 Drag modal box (top)
• 21-2 Drag modal box (middle)
• 21-3 Drag the modal box (below)
• Chapter22 Imitation Jingdong magnifying glass effect
• 22-1 Building a page structure that imitates Jingdong’s magnifying glass effect
• 22-2 Imitation Jingdong magnifying glass effect showing hidden barriers and large boxes
• 22-3 Imitation Jingdong magnifying glass effect occlusion layer follows the mouse
• 22-4 Jingdong magnifying glass imitation effect limits the movement range of the occlusion layer
• 22-5 Imitation Jingdong magnifying glass effect large picture movement
• Chapter23 Imitation Taobao effect
• 23-1 client series
• 23-2 Execute function immediately
• 23-3 The core principles of Taobao flexiJS source code analysis
• 23-4 Taobao flexibleJS source code analysis pagesshow event
• 23-5 scroll series
• 23-6 Imitation Taobao fixed sidebar (Part 1)
• 23-7 Imitation Taobao fixed sidebar (below)
• 23-8 Summary of three major series
• Chapter24 Ease animation
• 24-1 The difference between mouseover and mouseenter
• 24-2 Animation principles
• 24-3 Simple animation function encapsulation
• 24-4 The animation function records different timers for different elements
• 24-5 Principle of easing animation
• 24-6 Basic code implementation of easing animation
• 24-7 Easing animation to move between multiple target values
• 24-8 Add callback function for easing animation
• 24-9 Use of animation functions
• Chapter25 Web page carousel
• 25-1 Web page carousel chart structure construction
• 25-2 Web page carousel - display and hide the left and right buttons when the mouse passes
• 25-3 Web page carousel-dynamically generated small circles
• 25-4 Web page carousel chart-small circle exclusive thought
• 25-5 Web page carousel - click on the small circle to scroll through the images
• 25-6 Web page carousel - seamless scrolling with buttons on the right
• 25-7 Web page carousel - clone the first picture
• 25-8 The small circle of the web page carousel changes with the button on the right
• 25-9 Web page carousel-two small BUG solutions
• 25-10 Web page carousel image-left button function production
• 25-11 Web page carousel-auto play function
• Chapter26 Mobile web page special effects
• 26-1 Throttle valve and logic interrupt application
• 26-2 Return to top with animation
• 26-3 Somersault cloud case
• 26-4 Introduction to mobile website special effects
• 26-5 Mobile touch event
• 26-6 Mobile TouchEvent touch event object
• 26-7 Drag elements on mobile
• 26-8 Mobile terminal carousel chart-structure construction
• 26-9 Mobile Carousel Chart-Layout Analysis
• 26-10 Mobile carousel-scrolling pictures
• 26-11 Mobile carousel-seamless scrolling
• 26-12 classList class name operation
• 26-13 Mobile carousel chart - small dots follow changes
• 26-14 Carousel chart on mobile terminal - drag carousel chart with finger
• 26-15 Mobile carousel - slide your finger to play the previous and next pictures
• 26-16 Mobile carousel image-rebound effect
• 26-17 Return to top module production
• 26-18 Solution to the 300ms delay problem of click events on mobile terminals
• 26-19 faskclick plug-in usage
• 26-20 Swiper plug-in use-reference related files
• 26-21 Mobile carousel image - used according to grammar specifications
• 26-22 swiper plug-in usage-parameter change
• 26-23 Other mobile plug-ins and usage summary
• 26-24 Use of video plug-in zy.media.js
• 26-25 bootstrap carousel
• 26-26 Alibaba 100 show carousel picture production
• Chapter27 local storage
• 27-1 Local storage guide
• 27-2 Local storage sessionStorage
• 27-3 localStroge of local storage
• 27-4 Remember username case
• Chapter28 jQuery
• 28-1 An introduction to jQuery
• 28-2 JavaScript library
• 28-3 jQuery overview
• 28-4 Basic usage of jQuery-entry function
• 28-5 jQuery top-level object
• Chapter29 DOM object|jQuery object
• 29-1 DOM objects and jQuery objects
• 29-2 Convert DOM objects and jQuery objects to each other
• Chapter30 jQuery basics
• 30-1 jQuery common API guide
• 30-2 jQuery basic and hierarchical selectors
• 30-3 jQuery implicit iteration
• 30-4 jQuery filter selector
• 30-5 jQuery filter method-select parent and child elements
• 30-6 Sina drop down menu
• 30-7 jQuery other filtering methods
• 30-8 jQuery exclusive idea
• 30-9 Taobao clothing boutique case
• 30-10 jQuery chain programming
• 30-11 jQuery modify style css method
• 30-12 jQuery modify style operation class
• 30-13 Tab bar switching case
• 30-14 The difference between jQuery class operations and className
• 30-15 jQuery show and hide effects
• 30-16 jQuery sliding effect and event switching
• 30-17 jQuery stop animation queue
• 30-18 jQuery fade in and highlight case
• 30-19 jQuery custom animation animate method
• 30-20 Honor of Kings Accordion Case Layout Analysis
• 30-21 King of Glory Accordion Case Production
• Chapter31 shopping cart
• 31-1 jQuery attribute manipulation
• 31-2 Shopping Cart Module-Select All (Part 1)
• 31-3 Shopping Cart Module-Select All (Part 2)
• 31-4 jQuery content text value
• 31-5 Shopping cart module - increase or decrease the number of items
• 31-6 Shopping Cart Module-Modify Product Subtotal (Part 1)
• 31-7 Shopping cart module-modify product subtotal (medium)
• 31-8 Shopping Cart Module-Modify Product Subtotal (Part 2)
• 31-9 jQuery iterates through objects each method
• 31-10 jQuery iterating through data
• 31-11 Shopping cart module - calculate total count and total
• 31-12 Create, add, delete elements
• 31-13 Shopping Cart Module-Clean Shopping Cart
• 31-14 Shopping cart module-add background color to selected items
• 31-15 jQuery size method
• 31-16 jQuery position methods
• 31-17 jQuery is rolled to the head method
• 31-18 Return to top with animation
• 31-19 Elevator Navigation Case-Show Hide Elevator Navigation
• 31-20 Elevator navigation case - click to scroll to the target location
• 31-21 Elevator navigation case - click on the current li to add the current class
• 31-22 Elevator navigation case - sliding page elevator navigation automatically adds the current class
• 31-23 Elevator navigation case throttle valve (mutex lock)
• Chapter32 jQuery events
• 32-1 Introduction to jQuery events
• 32-2 Event processing on binds one or more events
• 32-3 on implements event delegation and binds events to dynamic elements
• 32-4 Weibo publishing case
• 32-5 off unbinding event
• 32-6 jQuery automatically triggers events
• 32-7 jQuery event object
• 32-8 Introduction to other methods of jQuery
• 32-9 jQuery object copyextend(optional)
• 32-10 jQuery multi-library coexistence
• 32-11 Waterfall plug-in usage
• 32-12 Image lazy loading technology
• 32-13 Full screen scrolling plug-in usage (optional)
• Chapter33 BootStrap component
• 33-1 bootstrap component
• 33-2 bootstrapJS plugin
• 33-3 Ali Baixiu
• 33-4 Totolist layout functional requirements analysis
• 33-5 todilist core ideas and local storage format
• 33-6 todolist press enter to read local storage data
• 33-7 todolist press enter to save the latest data to local storage
• 33-8 todolist local storage data is rendered and loaded into the page
• 33-9 todolist click the delete button to get the current index number
• 33-10 todolist click the delete button to complete the deletion operation
• 33-11 Click the checkbox to modify the done attribute of the corresponding data
• 33-12 Todolist is in progress and has been completed
• 33-13 todolist counts the number of ongoing and completed items
• 33-14 Introduction to the function of recording video
• 33-15 Point area layout style
• 33-16 Map area layout style
• 33-17 User area layout style
• 33-18 Order area layout style
• 33-19 Sales area layout style
• 33-20 Channel and quarter layout styles
• 33-21 Ranking area layout style-reference
• 33-22 Introduction to data visualization projects
• 33-23 What data visualization
• 33-24 Data Visualization Project Overview
• Chapter34 ECharts
• 34-1 Introduction to ECharts
• 34-2 Basic use of ECharts
• 34-3 Choose different chart types
• 34-4 ECharts project configuration (Part 1)
• 34-5 ECharts-grid configuration
• 34-6 ECharts related configuration (middle)
• 34-7 ECharts project configuration (Part 2)
• 34-8 Discount chart generation and configuration item summary
• 34-9 Data visualization project adaptation solution analysis
• 34-10 Data visualization project adaptation plan
• 34-11 Project preparation and following the auto-refresh browser plug-in
• 34-12 Visualization project-body and viewport production
• 34-13 Visualization project column container
• 34-14 Border picture usage scenarios and cutting principles
• 34-15 Border image usage syntax
• 34-16 Public panel style production (Part 1)
• 34-17 Public panel style production (Part 2)
• 34-18 Call font icon by class name
• 34-19 Data visualization project-overview area module production
• 34-20 Data visualization project-monitoring area layout analysis
• 34-21 Data visualization project-monitoring area tab bar switching analysis
• 34-22 Data visualization project - seamless scrolling of monitoring area
• 34-23 Point distribution point module-layout
• 34-24 Point distribution point-introduction chart
• 34-25 ECharts pie chart-tooltip parameter meaning
• 34-26 ECharts pie chart-series parameter meaning
• 34-27 Positioning distribution module-customized configuration (Part 1)
• 34-28 Positioning distribution module-customized configuration (Part 2)