《Exploring highlighted HTML5, CSS3, and JavaScript technologies》 【本字幕由ACELY 整理&转码】 Before we start the actual creation of the projects, let's talk about each of the key
【如果喜欢该教程，请购买正版！】 technologies being used.
【----ACELY STUDIO----】 【作品只能交流学习，不得用于任何盈利用途！】 Across both projects, there are three HTML and related technologies that are being
used: contenteditable, drag and drop, and localStorage, let's start with contenteditable.
Basically, this feature makes any page area editable in the browser. It uses a single
attribute, contenteditable of course, which can be set to equal to true, equal to false,
used by itself, which means true or inherit, where we'll take on the contenteditable characteristics of its parent.
Browser support for contenteditable is just totally off the charts. I was stunned when
I looked this up.
As you can see, support goes all the way back to Internet Explorer 7.
This website, if you are not familiar with caniuse.com, is an essential tool for anyone
who is working in HTML5 and related technologies to see what's possible in what browsers.
Now let's take a look at drag and drop.
There are two different aspects to drag and drop.
There is a HTML5 attribute and there is a fairly robust JavaScript API.
On the HTML side we have one attribute called draggable, and it's very similar to contenteditable,
in that it can be set to true, false, inherit or just inserted by itself without an equal
sign, and if you do it that way it means that it is draggable.
There are seven different JavaScript events everything from dragstart to drop.
These are all used extensively in any drag and drop functionality.
There is one key related object that I want to mention, and that's dataTransfer.
As the name implies, this is used to transfer the data from a dragged object. It is initially
set in dragstart and then it is put in the drop event.
There is pretty good browser support for drag and drop.
Let's take a look at Can I use.
As you can see, pretty much all the major players are in line with drag and drop although we
are waiting for Internet Explorer 10 to come out.
Finally, let's take a look at localStorage.
LocalStorage is very straightforward to use for all that it does, and it does a really wonderful thing.
It brings the concept of state to websites without relying on server-side coding.
And unlike cookie which is also used to convey states it is stored in the browser.
It has a much larger limit than cookies, 5 megabytes versus 4 kilobytes, and it uses a
very simple name value pair structure for strings only.
Although there are a few other commands for localStorage, most of the time you'll be using
these two, setItem and getItem.
SetItem takes two arguments; the first is the name of the item that you're setting and the
second argument is its value. For getItem you only need the name.
Browser support-wise we're pretty good. Let's take a look again at Can I use and I think
【本字幕由 ACELY.CN 独家制作发布】 -----欢迎加入群号：214645753----- we have as solid as support as we've seen for almost any other HTML5 technology.
【更多字幕，请访问唯一发布站ACELY.CN】 Overall I think the technologies involved in these projects are full-featured and pretty
well supported across the browsers. So let's go build those projects.