Summary of front end knowledge points - H5

JavaScript language 2020-11-13 05:04:23
summary end knowledge points h5


Summary of front-end knowledge points ——H5

1.html5 New characteristics

(1) New semantic tags
(2) Enhanced forms *
(3) Audio and video
(4)Canvas mapping
(5)SVG mapping
(6) Geographical location
(7) Drag the API
(8)Web Worker
(9)Web Storage
(10)Web Socket

2. Enhanced forms

1. new input type
H4:text;checkbox;password;radio;submit;reset;File;
H5:email;url;number;search;color;date;month;week

2. New form elements
H4:input;button;select;textarea
H5:datalist;progress;meter;output

3.html5 New characteristics —datalist( Data list )

<datalist id=”list3”> datalist It's invisible
<option>xxx</option>
<option>yyy</option>
</datalist>
<input type=”text” list=”list3”/>
datalist by input Provide a list of input suggestions

3.1: html5 New characteristics —progress( Progress bar )

Shake the progress bar left and right
Progress bar with specified progress value

3.2: html5 New characteristics —meter( a scale )

Meter: Used to indicate the range of a value : Unacceptable ( Red ), Acceptable ( yellow ), Excellent ( green )
salary :
<meter min=” minimum value ” max=” Maximum ” low=” Lower limit ” high=” ceiling ”
Best value =”” value=” Current value ”>

3.3: html5 New characteristics —output

output: Output , Semantic label , There's no look and feel , Style is equivalent to span
item pricing : 3.50
Purchase quantity :
Subtotal :7.00

3.4:html5 New characteristics —( New attributes of form elements )

H4:type;id;value;name;style;readyonly;disabled;checked
H5:
(1) placeholder Place holder
(2) autofocus Get input focus automatically
(3) multiple Allows multiple values to be entered in the input box , Score with a comma
(4) form Used to place input fields outside the form

(5) required Fill in the blanks (6) maxlength Maximum string length (7) minlength Minimum string length (8) min Specify the minimum value of the value (9) max Specify the maximum number of values (10) pattern The input of the regular expression matches

3.5 html5 New characteristics – Video and audio ( a key )

 Flash By H5 replace
Flash mapping (AS/Flex) -> canvas/svg
Flash Animation -> canvas/svg Timer
Flash Video and audio playback -> video/audio
Flash Client storage -> webstorage

3.6:H5 New characteristics — Video playback

<video src=”x.mp4”></video>
<video>
<source src=”x.mp4”></source>
<source src=”x.ogg”></source>
<source src=”x.webm”></source>
Your browser version is too low , Please upgrade
</video>

It itself is a 300*150 Of inline-block Elements
Member attribute :
autoplay Auto play or not
controls Whether to display controls
muted Is it mute?
loop Loop or not
poster Before playing the first frame of the advertisement ( picture )
preload Video loading strategy

auto: Preload video and metadata for a certain period of time

 metadata: Preload only the number of elements ( Size , Duration , The first frame )
none: Don't load anything

js Object properties :

currentTime Current playback time
duration Total duration
paused: Whether the current video handles the pause state
volume(0~1) The volume

playbackRate: Playback rate : Greater than 1 Nora Less than 1 Slow down
js Member method
play() Play the video
pause() Pause the video
js event
onplay Trigger event when video starts playing
onpause When the video pauses, trigger event

Front end learning exchange circle :767273102 , It's all about learning the front end from the most basic HTML+CSS+JS Cool special effects , game , Plug in encapsulation , Design mode to mobile HTML5 The learning materials of the project and actual combat have been sorted out , To every front-end partner .2019 Latest technology , Synchronization with enterprise requirements . Friends are learning to communicate in it , Every day, Daniel will regularly explain the front-end technology !

3.7:H5 New characteristics — Audio

 <audio src=”x.mp3”></audio>
<audio>
<source src=”x.mp3” />
<source src=”x.wav” />
</audio>

It defaults to 300*30 Of inline-block Elements , But no controls attribute ,
be display:none;
Member attribute :
autoplay Auto play or not
controls Whether to display controls
muted Is it mute?
loop Loop or not
preload Video loading strategy

auto: Preload video and metadata for a certain period of time

 metadata: Preload only the number of elements ( Size , Duration , The first frame )
none: Don't load anything

js Object properties

currentTime Current playback time
duration Total duration
paused: Whether the current video handles the pause state
volume(0~1) The volume

playbackRate: Playback rate : Greater than 1 Nora Less than 1 Slow down
js Member method
play() Play the video
pause() Pause the video
js event
onplay Trigger event when video starts playing
onpause When the video pauses, trigger event

3.8 html5 New characteristics —canvas mapping ( a key )

Real time trend chart in web page , Grab a red envelope , Webpage game , Map application …
(1)SVG mapping 2D Vector drawing technology ,2000 Years of , After that h5
(2)Canvas mapping 2D Bitmap drawing technology ,H5 Put forward
(3)WebGL mapping 3D Graphic technology , Not yet included H5 standard

Canvas The difficulty of drawing is :
(1) Coordinate system
(2) There are many words

3.9 html5 New characteristics —canvas

 Canvas canvas : Canvas is H5 The drawing basis provided
<canvas width=”500” height=”400”>
Your browser version is too low , Please upgrade
</canvas>

Canvas The default tag in the browser is 300*150 Of inine-block, Canvas width height attribute can only be used with js/ Property to assign a value .
Out-of-service CSS Style assignment .
There is and only one on each canvas ” paint brush ” object — Use this object to draw
var ctx = canvas.getContext(“2d”); Get the brush object of the canvas

(1) Use canvas Draw a rectangle ( Rectangle )

 The rectangular anchor is in the upper left corner of itself
ctx.lineWidth = 1; Stroke width ( The width of the sideline )
ctx.fillStyle = “#999”; Fill the style
ctx.strokeStyle = “#000”; Stroke style
ctx.fillRect(x,y,w,h); Filled rectangle
ctx.strokeRect(x,y,w,h); Stroke rectangle
ctx.clearRect(x,y,w,h); Clear all shapes within the rectangle

(2) Use canvas Draw text

ctx.textBaseline = “alphabetic” Text baseline
ctx.font = “12px sans-serif”; Text size and font
ctx.fillText(str,x,y); Fill in a piece of text
ctx.strokeText(str,x,y) Trace a piece of text
ctx.measureText(str); Measure the width of the text

4.canvas draw —( a key ) route

path: It consists of many coordinate points to form an arbitrary shape , The path is invisible , Can be used for
“ Stroke ”,” fill ”.
Complex graphics depend on paths
ctx.beginPath(); Start a new path
ctx.closePath(); Close the current path
ctx.moveTo(x,y); Move to the specified point
ctx.lineTo(x,y); Draw a line from the current point to the specified point
ctx.arc(cx,cy,r,start,end); Draw the arch
cx,cy center of a circle
r radius
start,end Start angle and end angle
Arc degree 0~2Math.PI
angle => radian n
Math.PI/180=> radian
ctx.stroke(); Stroke
ctx.fill(); fill

4.1canvas draw —( a key ) Images

canvas It belongs to client technology , Image storage server , So the browser downloads first , And then draw the picture , And wait for the map to download .
 var p3 = new Image();
p3.src = “x.jpg”; # Download the specified image
p3.onload = function(){ # When the image is downloaded successfully, the event will be triggered
console.log(p3.width);
ctx.drawImage(p3,x,y); // Draw the original size picture
ctx.drawImage(p3,x,y,w,h); // Stretch the picture
}

4.2canvas draw —( a key ) Images -> deformation

canvas There is also the technique of deformation in drawing , Can be targeted at a certain figure / The image is deformed in the process of drawing :rotate();translate(); Translation origin
ctx.rotate( radian ); Rotate the drawing image around the origin of the canvas .
ctx.translate(x,y); Translate the canvas origin to the specified position
ctx.save(); Save all current state values of the brush
ctx.restore()); Restore all state values from the last time the brush was saved

5.svg draw —( a key )

Bitmap : It's made up of pixels , Each dot has its own color , The color is delicate , But amplification can distort .
Vectorgraph : It's made up of lines , Each line has its own color and direction , Zoom can be unlimited , But the details are not rich enough

canvas mapping svg mapping

type 2D Bitmap 2D Vectorgraph
How to draw a picture Use JS Code drawing Drawing with labels
Event binding Every figure is not an element , Cannot bind events directly . Every figure is an element , You can bind event listeners directly
applications game , Special effects Map

SVG Born in 2000 year , Early as XML Extended applications appear ,H5 The standard is often used
SVG Label adoption as standard , But some are abandoned .
svg Usage mode
Itself is a 300*150 Of inline-block
rectangular
circular
The ellipse
A straight line
polygon

Front end learning exchange circle :767273102 , It's all about learning the front end from the most basic HTML+CSS+JS Cool special effects , game , Plug in encapsulation , Design mode to mobile HTML5 The learning materials of the project and actual combat have been sorted out , To every front-end partner .2019 Latest technology , Synchronization with enterprise requirements . Friends are learning to communicate in it , Every day, Daniel will regularly explain the front-end technology !

6:HTML5 New characteristics — rectangular

<rect width=”” height=”” x=”” y=”” fill=”” fill-opacity=””
stroke=”” storke-opacity=””></rect>

6.1:HTML5 New characteristics — circular

<circle r=”” cx=”” cy=”” ></circle>

6.2:html5 New technology –svg ( a key )— The ellipse

 <ecllipse rx=”” ry=”” cx=”” cy=”” />
rx: Horizontal radius
ry: Vertical radius

6.3:html5 New technology –svg ( a key )— A straight line

<line x1=”” y1=”” x2=”” y2=”” stroke=”” stroke-width=””..></line>

6.4:html5 New technology –svg ( a key )— Broken line

<polyline points=”x,y x,y x,y ...” ></polyline>

6.5:html5 New technology –svg ( a key )— Text

<text text-size=”” fill=””...> Text content </text>

6.6:html5 New technology –svg ( a key )— Images

<image xlink:href=”x.jpg” x y width height></image>

6.7:html5 New technology –svg ( a key )— The gradient object

 <defs>
<linearGradient id=”r2” x1=”0%” y1=”0%” x2=”100%” y2=”0%”>
<stop offset=”0%” stop-color=”green”>
<stop offset=”50%” stop-color=”yellow”>
<stop offset=”100%” stop-color=”red”>
</defs>
<rect width=”400” height=”200” fill=”url(#r2)”

7.:html5 New characteristics – Geographical location ( Implementation requires networking )

Geolocation: Geographical location , Use js Get the geographic coordinates of the current browser ( longitude , latitude , Sea dialing , Speed ) data , Used to implement LBS application (Location Base Service), If you are hungry , Gode navigation …
Get geolocation type
(1) Browser's own object geolocation[ It can't be realized ]
(2) Baidu Maps , Tencent map [ High accuracy ]

How to get location information by mobile browser
(1) Preferred mobile phone GPS Chips and satellite communications , The positioning accuracy is in meters
(2) Second, select mobile communication base station for positioning , The positioning accuracy is in kilometers
PC How do browsers get location information
(3) IP Geoanalytic reverse lookup …

html5 Provides a new object , Used to get the current browser location information
window.navigator.geolocation{};
getCurrentPosition:fn Get positioning

Baidu Maps :
(1) Baidu map Developer http://lbsyun.baidu.com/
(2) Sign up for Baidu developer account mobile phone
(3) Create a website : Request an access key for the website AccessKey

 Website name [abc123]
[....]

(4) AccessKey
(5) Open examples

 // Load Baidu API Specify the key
<script src="http://api.map.baidu.com/api?
v=2.0&ak= Request key ">
</script>
var map = new BMap.Map("container");

// Create a map instance
var point = new BMap.Point(116.404, 39.915);
// Create point coordinates
map.centerAndZoom(point, 15);
// Initialize map , Set center point coordinates and map level

8:html5 New characteristics — Drag the API( Drag and upload pictures )

Drag & Drop : Drag and release
HTML5 Provides for drag behavior 7 Events , Divided into two groups
The source of drag ( Can move ) Can trigger 3 Events
dragstart Drag to start
drag Dragging
dragend Drag end
Drag the target object ( Immobility ) Can trigger 4 Events
dragenter Drag into
dragover Drag and hover over
dragleave Drag away
drop Drag to release

9: Upload files —( a key )

 Upload files web Projects usually use features : Upload your avatar , Email attachment , Upload product pictures , Upload docx file , Himalayas , Fighting fish ...
Upload file type : Specify any type / Specify a specific type (jpg/png/gif)
Upload files in :
(1) Form synchronous submission -- Simple , The user experience is poor
(2)ajax Upload -- complex , Users feel good ( Drag the , The preview image )
(3) The third party js Tool library — shear

10: Web Worker– Code 3 That's ok , Key theory understanding

 Program : A set of code ( Hard disk )
process : The operating system calls the program code ( In the memory ) Prepare to carry out
Threads : The sequence of code executed inside the process
chrome In the thread model : Multiple threads are used to request resources , operation js Code / Render page content --1(UI) Threads
<button> Button 1</button>
<script src="1.js"></script>
<button> Button 2</button>

Solution :
Create a new web Woker Threads execute 1.js Program , Give Way UI Continue to draw page content ;

10.1: Woker Threads have drawbacks
The browser doesn't allow worker Thread operation DOM、BOM Elements
reason : Browsers only allow UI Thread operation DOM/BOM, That is to say woker
The executed code cannot contain DOM operation / similar jquery Not good either. .

10.2:Worker Threads can send or receive UI Thread data

 *Woker send data -->UI receive data
1:worker
postMessage(rs);
2:UI
var w2 = new Worker("01.js");
w2.onmessage = function(e){e.data}
*UI send data -->Worker receive data
1:UI
var w2 = new Woker("01.js");
w2.postMessage(stringMsg);
2:Worker
onmessage = function(e){e.data}

Project use Worker
(1) as long as js There is DOM/BOM Out of commission Worker
(2)Worker Suitable for execution time consuming JS Mission , Data analysis, data statistics

11:HTML5 New characteristics –WebStorage

 Store user specific data in the browser : Visit history ; Custom style ,
Data storage technology on the client side
(1)Cookie technology Compatibility is good. , Data can't exceed 4kb, The operation is complicated
(2)Flash rely on Flash player
(3)H5 WebStorage Compatibility is poor , data 8MB, It's easy to operate
(4)IndexedDB It can store a lot of data , Not the standard

Session: conversation ( The operation process )
The browser starts with opening the first page of a website [ The conversation begins ], Multiple pages may be opened in the middle [ In the session ] Until the browser is closed [ End of session ], The whole process is called once " conversation "


WebStorage Provide two objects :
(1)sessionStorage: Class array object
Allocate a memory in the browser program , Store once web Session data , It can be read or saved by all pages in this session , Once the browser is closed, the data disappears .
Example : Login user number ; nickname
# Save the data
sessionStorage[key]=val;
sessionStorage.setItem(key,val);
sessionStorage.length // Save the quantity
var key = sessionStorage.key(i); // Return to the left according to the value key
# get data
var val = sessionStorage[key]
var val = sessionStorage.getItem(key);
# Clear data
sessionStorage.removeItem(key);
sessionStorage.clear();
(2)localStorage
Data is saved on disk , Data can cross sessions , Even if the browser is closed , Data is also saved .
# Save the data
localStorage [key]=val;
localStorage.setItem(key,val);
localStorage.length // Save the quantity
var key = localStorage.key(i); // Return to the left according to the value key
# get data
var val = localStorage [key]
var val = localStorage.getItem(key);
# Clear data
localStorage.removeItem(key);
localStorage.clear();
#localStorage If the data changes , It will trigger once
window.onstorage event , You can listen to this event , To monitor
localStorage Data changes purpose ,sessionStorage Data modification will not
Trigger this event .
Front end learning exchange circle :767273102 , It's all about learning the front end from the most basic HTML+CSS+JS Cool special effects , game , Plug in encapsulation , Design mode to mobile HTML5 The learning materials of the project and actual combat have been sorted out , To every front-end partner .2019 Latest technology , Synchronization with enterprise requirements . Friends are learning to communicate in it , Every day, Daniel will regularly explain the front-end technology !

12:HTML5 One of the new features –WebSocket– Code is not complex principle

HTTP agreement : Belong to " request - Respond to " Model , Only the client initiates the request , The server will return the response message , No request, no response , A subject of inquiry , You can only get one response ,
There are some scenes , This kind of model is not good enough : Real time stock charts
Solution : Long polling ( Heartbeat request )+AJAX -- Request too often , The server is under a lot of pressure , Not often enough , The customer is not satisfied .

WebSocket agreement : Belong to " radio broadcast + receive ", The client is no longer disconnected from the server ,

Permanent connection , Both parties send data to each other at any time , Send a message :ws The agreement is suitable for : Take stock trend chart
ws The server :php/java/node.js Listen on the specified port , Sending a message to the other party can also receive a message .
ws client :php/java/node.js/html5 New characteristics Initiate a connection request , Stay connected forever , Send a message to the other party , And receive messages .

master : Use HTML5 Create new features ws client
(1) Connect ws The server

var socket = new WebSocket("ws://127.0.0.1:9001");

(2) Send a message to the server

socket.send(stringMsg);

(3) The receiving server returns a message

socket.onmessage = function(e){e.data}

(4) Disconnect from the server

socket.close();

Summary port :
apache Default port 80
mysql Default port 3306
https Default port 443
webSocket Default port 9001

版权声明
本文为[JavaScript language]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple