Home > Developer > Web Develop
1.HTML5 offers many features such as local storage, 2D drawing, offline support, sockets and threading.
2. Q: Can this be used on old-fashioned browsers? Like these new doctype, meta tags? What do old browsers do with these new grammars?
A: Yes, a little smarter, and a bit of luck. Taking the type attribute on link and script tags as an example, it is now reasonable to remove this attribute in HTML5 because CSS and JavaScript are now standard (and, of course, the default style and script style). However, in fact, browsers already assume that CSS and JavaScript are used by default. So the standards are consistent, and it happens that browsers have supported this new tagging standard for years. The same is true for doctype and meta tags.
3. Q: What about the new doctype? Does it look too easy now? Not even a version or DTD.
A: Uh. It does seem a bit magical, after so many years of complicated doctype, now we can simply say "we're using HTML." Here's the thing: HTML was originally based on a standard called SGML, which required a complex format of DOCTYPE and DTDs. The new standard has been adapted to SGML to simplify the HTML language and make it more flexible. So we don't need a complex format anymore. Not only that, as mentioned earlier, there is a bit of luck here, almost all browsers just look for HTML in DOCTYPE to make sure that an HTML document is parsed.
4. Q: You said it won't change anymore, is that a joke? I think the version is very important for the browser. Why not use <!doctype HTML5 >? There may be HTML6 in the future, right?
A: The use of DOCTYPE means that browser manufacturers are using DOCTYPE to tell browsers to use their own "standard mode" content. Now that we have a real standard, HTML5 's doctype can tell all browsers that the document is standard HTML, whether it's version 5 or version 6, or any other version.
5. Q: Is this important? I can completely enter a page without doctype and meta tags, and it works well. Why should I worry about it being completely right?
A: Yes, the browser is good at ignoring small errors in HTML files. However, by including the correct doctype and META tags, you can make sure that the browser does know what you want without guessing. In addition, for those who use older browsers, the new DOCTYPE means they will use the standard mode, which is exactly what you want. Keep in mind that the standard pattern is that the browser will think that the HTML you are writing conforms to a standard, so it uses the appropriate rules to parse your page. If you do not specify a doctype, some browsers may go into "wacky mode", thinking that your Web page is written for an old-fashioned browser, and that if the criteria are not met, you may not be able to parse your page correctly (or think it is written incorrectly).
6. Q: What's wrong with XHTML? It seems like many years ago that it was the direction of future development.
A: it really is. However, later flexibility went beyond strict syntax, and in the process, XHTML (exactly XHTML 2) died, so that the way people write Web pages (and the way browsers perform pages) is HTML5 more acceptable. Don't worry, though, because knowing XHTML can help you write HTML5 content better. By the way, if you really like XML, there is a way to write HTML5 in a strict format.
7.HTML5 is a superset of HTML, for those old-fashioned browsers, our goal must be to write only one HTML page, rather than write two versions of the Web page.
One of the underlying design principles of 8.HTML5 is to allow your pages to be properly degraded. This means that if the user's browser fails to provide a new feature, you should provide a meaningful candidate.
9. Q: What is the difference between a Web page and a Web application? What's a web app?
A: There is no absolute difference between the two words; in other words, to turn a page written in Html,javascript and CSS into a Web application does not require you to do any special work. So it's just a different view.
If a page behaves like an application, not just a static document, we can think of it as a Web application, not just a Web page. We believe that applications should have some features, such as maintaining a large number of states, managing complex interactions with users, displaying dynamically updated Dynamic Data without page refreshes, or even completing more complex tasks or calculations.
10.JavaScript naming, you can use letters, dollar signs and underscores to create variable names, cannot have a space,-, or +, symbol.
For example: var zip code; var first-name; var To+do; You can't name this.
11. Q: Can I delete an element from an array of arrays? If so, what happens to the indexes of other elements?
A: Of course, you can delete an element from an array, and there are two different ways to delete it. You can set the array element value of the index to null. For example, myarray[2] = null. However, this means that the length of the array remains the same. Or you can completely delete this element (using the function splice). In this case, the index of all elements following the deleted element is reduced by 1. So, if myarray[2] = "dog", myarray[3] = "Cat", and you delete "dog", then there will be myarray[2] = "Cat", and the length of the array is 1 less than the original.
12.undefined and Null are two different values. Undefined indicates that a variable is not assigned, and NULL indicates that the variable has a null value.
13.math.random returns a floating-point number between 0 and 1 (but not 1).
14.math.floor removes all bits after the decimal point of a floating-point number and converts it to an integer.
15. The following is a valid statement
var s = "3-8"; var n = 3-"None"; var $ = 21.30;
16.<input type = "text" id = "songtextinput" size = "placeholder" = "Song name", where the placeholder indicates what is to be entered in this input field You.
17. Q: I pass a variable to the function--if the value of the corresponding row parameter is changed in the function, will the original variable also be changed?
A: No, when passing a base type value, it is complex to the row parameter. We call this the "pass value". Therefore, if the value of the row parameter is changed in the function body, there is no effect on the original argument value. However, passing an array or object is an exception.
18. Q: The scope of mastering all these local variables and global variables is confusing, so why not use global variables?
A: If you write code that is complex or needs to be maintained after a long period of time, you really should take a good look at how to manage variables. If you are overly keen on creating global variables, it will be difficult to track where variables are used (and where the values of variables have been modified), which can lead to code that has bugs. This is even more important when working with others to write code, or when using third-party libraries (however, if the libraries are well written, they should have a reasonable structure to avoid these problems). So, you can use global variables in the right places, but be modest, and use local variables whenever possible.
19. To enumerate all the properties of an object, we use a for-in loop, noting that the order of the attributes is arbitrary, so you cannot rely on a particular order.
20. You can pass in an object to a function as if it were passed into another variable. In a function, you can access the properties of the object normally, using the row parameter name as the object.
function Bark (dog)
{
if (Dog.weight >) alert ("WOOF");
else alert ("Yip");
}
21. When assigning an object to a variable, the variable contains a reference to the object, not the object itself. You can think of a reference as a pointer to an object. When you change a property of an object, you modify the properties of the original object, not the copy, so you can see all the changes to the object not only inside the function, but also outside the function.
22.window is a global variable, so a property or method name that is not preceded by a window,window can be parsed smoothly. In addition, all global variables that you define are placed in the window command space, so you can refer to them as window.myvariable.
The readability of the 23.JSON is fairly good, and it can be quickly and easily parsed into JavaScript objects.
Json.stringify ();--Parse to a string
Json.parse ();--Convert to a JavaScript object
24.XMLHttpRequest cannot issue cross-domain requests, the cross-domain server does not see the request at all, and the browser security policy has aborted the request before it sees the request.
25. A JavaScript file provided by another domain can call a function of your browser.
26. A JavaScript file from another domain can not only invoke any of the functions it wants in code, but also pass any data it wants for us. We are passing the data through the referenced JavaScript file, rather than using XMLHttpRequest to get it ourselves.
27.JSONP is a way to get a JSON object using the <script> tag. This is also a way to get the data (again, in the form of a JSON object), which avoids the xmlhttprequest of the same origin security problem.
How the 28.JSON works
29. In general, the Web service allows you to specify how you want to name the function. It does the following: When specifying a URL, add a parameter at the end, just like this.
<script src= "Http://gumball.wickedlysmart.com/?callback=updateSales" > </script>
The JSON format object is wrapped with Updatesales before the other server sends you back the JSON object. In general, the Web service names this parameter callback, but look at your Web service documentation to clarify the name of the parameter that the Web service actually uses.
30. The browser Controls when loading the page, and we want to load the page first so that the DOM can be updated when the updatesales is called. To deal with this problem, the only way I can think of is to put <script> in the bottom of the page HTML body.
31. Remember that when using the <script> element, it tells the browser that it needs to get JavaScript, parse and execute it. This means that when it executes to your uodatesales function, the JSON is no longer a string, but a real JavaScript object. When we originally used XMLHttpRequest, the data was returned as a string.
32. Write the code, first give the code to add a new script element, and then give the code to replace the script
function Handlerefresh () { var url = "Http://gumball.wickedlysmart.com?callback=updateSales"; var newscriptelement = document.createelement ("script"); Newscriptelement.setattribute ("src", url); Newscriptelement.setattribute ("id", "josnp"); var oldscriptelement = document.getElementById ("Jsonp"); var head = document.getElementsByTagName ("head") [0]; if (oldscriptelement = = null) { head.appendchild (newscriptelement); } else { head.replacechild (newscriptelement, oldscriptelement); } }The 33.JSON also has the advantage of being directly based on JavaScript, and JSONP can help us bypass cross-domain issues.
34. Most browsers have an interesting feature, and if you repeatedly get the same URL, the browser caches it for efficiency, so you get the same cache file over and over again. That's not what we want. Fortunately, for this problem, there is a simple "therapy" as old as the Web. We only need to add a random number at the end of the URL to convince the browser that it is a new URL that has never been seen before. For example:
var url = "Http://gumball.wickedlysmart.com?callback=updateSales" + "&random" + (new Date ()). GetTime ();
35.JSONP is no more secure (or less secure) than using <script> elements to link to JavaScript libraries. Be especially careful when linking to third-party JavaScript.
36. To specify the <script> element to make a JSONP request, you can either add it directly to the HTML or use JavaScript to write the <script> element to the DOM.
37. If you make multiple requests, you can use a random number at the end of the JSONP request URL so that the browser does not cache the response.
The 38.replaceChild method replaces an element in the DOM with another element.
39. Q: Why not flash, or a custom application?
A: Flash is a very good technology, you can certainly use this technology. However, be aware that the whole industry is now turning to HTML5. If you want to run your Flash app on all your devices, you might get into trouble and even include some very popular devices. If you really need an experience that's completely tailored to your device, it might be a good choice to implement a custom application. However, it is important to remember that developing a custom application cost for each device can be expensive. With HTML5, you can get broad support for mobile devices and desktop browsers, and often use a technical solution to create universally suitable applications.
40. Can I use CSS to set the width and height of my canvas? Instead of taking advantage of the element's width and height properties?
A: This is possible, but it may be slightly out of your imagination. By default, the canvas element is 300 pixels wide and 150 pixels high. If you do not specify the width and Height properties in the canvas tag, you will get a canvas of this size. If you then specify a size in the CSS, such as 600pxx200px, then the original 300x150 canvas expands to that size, so all the content drawn in the canvas expands accordingly. It's a behavior. When you specify a new width and height for an image, the image is stretched or shrunk if it is larger or less than the actual width and height of the original image. If you magnify it, you'll get a pixelated effect in the image, right? The canvas is the same. When the 300px wide canvas becomes 600px wide, the same number of pixels expands to twice times the original size, so it looks like it's going to get chunky. However, if you use the width and height properties of the element, the size of the canvas is set larger (and smaller) than 300x150, but everything on the canvas is still drawn correctly. So we recommend that you specify the width and height in the tag attribute instead of setting these properties in the CSS, unless you're already planning to scale the canvas.
41. Get the value of the drop-down box: Find which element is selected, get an index of the selected element for this, and assign its value to the variable shape.
var selectobj = document.getElementById ("shape"); var index = Selectobj.selectedindex;var shape = Selectobj[index].value ;
The content of the property poster in the 42.<video> tag is the poster picture that is displayed when the movie is not played, the optional attribute type is a hint to the browser to help it determine if this type of file can be played, and the codecs parameter specifies which codec is used to encode the video and audio , to create the encoded video file, note the single double quotation mark.
<video id= "Video" Controls AutoPlay src= "Video/love.mp4" width= "520" height= "520" poster= "Images/love.png" >< /video> <video id= "video" Controls AutoPlay width= "520" height= "520" poster= "Images/love.png" > < SOURCE src= "Video/love.mp4" Type= ' video/mp4; codecs = "avc1.42e01e, mp4a.40.2" ' /> <source src= ' video/love.webm ' type= ' video/webm; codecs = "VP8, Vorbis "'/> <source src=" VIDEO/LOVE.OGV "type=" VIDEO/OGV; codecs = "Theora, Vorbis" '/> <p> Sorry, your browser doesn ' t support the video element.</p> </video>
43. Write the code to handle the video pixel, and put the processed pixels in the canvas to display, notice the creation of the buffer.
function Processframe () {var video = document.getElementById ("video"); See if the video is still playing. If there is no play, the description does not work and returns directly if (video.paused | | video.ended) {return; } var Buffercanvas = document.getElementById ("buffer"); var Displaycanvas = document.getElementById ("display"); var buffer = Buffercanvas.getcontext ("2d"); var display = Displaycanvas.getcontext ("2d"); DrawImage method, it takes an image, draws this image onto the canvas, makes it in X, y position, and has the specified width and height//We get an image from the video. The video is designated as the source, drawImage back a video source as the image data Buffer.drawimage (video, 0, 0, buffercanvas.width, buffercanvas.height); Then get the image data from the canvas context and store it in a variable frame to handle var frame = buffer.getimagedata (0, 0, Buffercanvas.width, Buffercanv As.height); The length of the data frame is derived first. Note: The data is placed in one of the frame's attribute Frame.data, with 4 values per pixel: RGBA var length = FRAME.DATA.LENGTH/4; for (var i = 0; i < length; i++){var r = frame.data[i * 4 + 0]; var g = Frame.data[i * 4 + 1]; var b = frame.data[i * 4 + 2]; Omit other actions}//Here, the frame data has been processed, so we use the Putimagedata method of the context to put this data on the display canvas//This method takes the data in the frame, writes it to the specified x on the canvas , y position display.putimagedata (frame, 0, 0); }
44. Local Storage
Localstorage.setitem ("Sex", "boy"); Localstorage.getitem ("Sex"); localstorage["sex"] = "girl"; var girl = localstorage["Sex"];45. Q: Each browser mentioned has 5MB of storage space, is this 5MB common to all applications?
A: No, actually there is 5MB per domain.
46. All storage spaces are managed on the client side. The domain is introduced because 5MB is assigned to all pages from the same domain as storage space. Www.baidu.com get 5mb;www.google.com get 5MB and so on, all of these are on your machine.
47. Q: If I load a page from my computer, what is my data source?
A: In this case, your data source is called a "local file" source, which is ideal for testing. If you can access the server, you can also test your files on the server, in which case the data source is the server's domain.
48. All pages of a domain (for example, apple.com) will see individual data items stored on other pages in this domain. This means that if we don't have a name for the key, it might conflict with another page that uses the same key in different ways. So, we use this method to check to make sure that a data item is really an instant paste (not a sequential number or a game level) before adding the sticky stick to its value.
49. Q: I have just reloaded my page, now the order of instant paste is not the same!
A: When adding a new sticky note, it's our practice to append it to the end of the list of sticky notes, so it's always at the end of the list. When the page reloads, the sticky note increases in the order found in the Localstorage (remember, there is no guarantee of a particular order). You might think that this order is the order in which data items are added to local storage, or in some other reasonable order, but this cannot be expected. Why is it? One reason is that the specification does not specify a sequence, so different browsers may implement this order in different ways. If your browser does return data items in the order that you can understand them, you're lucky, but you can't rely on this order, because your users ' browsers might determine the order of data items in different ways.
50.JavaScript has many benefits, one of which: it can only do one thing at a time. It's like what we call a "single thread". Why does this count as a good thing? Because of this, programming is simple. If you execute a large number of threads at the same time, it can be difficult to write a program that works correctly.
51. Create a Web worker thread
Window.onload = function () {//Create new worker thread, "Worker.js", JavaScript file contains the corresponding code of this worker thread var worker = New Worker ("Worker.js"); var worke2 = new Worker ("Worker.js"); var worke3 = new Worker ("Worker.js"); var another_worker = new Worker ("Another_worker.js"); Use the PostMessage method of the worker thread to send a message to it. Our message is a simple string "ping" worker.postmessage ("ping"); Here, we define a function that will be called whenever a message is received from the worker thread. Messages from worker threads are wrapped in an Event object//The incoming handler event object has a data property that contains the message data submitted by the worker thread//Gets a message from the worker thread and places it in an element on the HTML page Worker.onmessage = function (event) {var message = "Worker says" + event.data; document.getElementById ("Output"). InnerHTML = message; }; }//Add the following code for Worker.js//Assign the OnMessage property of the worker thread to the Pingpong function, write the Pingpong function to handle all incoming messages//The worker thread will call p when receiving a message from the main code. Ingpong function, and pass in this message onmessage = Pingpong; If the message contains the string "ping", a Message "Pong" is sent back. The worker thread's message will be returned to theThe code that builds this worker thread//main worker thread also uses PostMessage to send Message function Pingpong (event) {if (Event.data = = "Ping" ) {postMessage ("pong"); } }
52. Q: Can I create a worker thread by passing a function directly instead of using a JavaScript file? This may seem easier, and more consistent with JavaScript's usual practice.
A: No, you can't do this. Here's why, you know, one of the requirements of a worker thread is that it cannot access the DOM (for the same reason, it cannot access any state of the main browser thread). If you can pass in a function to the worker constructor, this function may also contain references to the DOM or the main JavaScript code, which would violate this requirement. So, to avoid this problem, the designer of the Web worker chooses to pass only one JavaScript URL.
53. Q: When sending an object to a worker thread in a message, will it become a shared object between the main page and the worker thread?
A: No, when you send an object, the worker thread gets a copy of the object. Any changes made by the worker thread do not affect the objects in the master page. Worker threads run in another environment, which is different from the environment in which the page resides, so you cannot access objects in the environment where the master page is located. The same is true of the objects emitted by the worker thread, which can only get a copy of the object sent by the worker thread.
54. Q: Can worker threads access localstorage or make XMLHttpRequest requests?
Answer: This is possible. Worker threads can access localstorage, or make XMLHttpRequest requests.
55. Using HTML5, there is a new way to select elements from the DOM, which is inspired by jquery. Now by using the Document.queryselector method, you can use the CSS selector in JavaScript to select elements in the DOM. For example:
Document.queryselector ("#avatar"); Document.queryselector ("P.level3"); Document.queryselector (". Content>p"); Document.queryselector ("Div>p"); Document.queryselectorall ("Div>p");Head First HTML5 Programming study notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
