HTML5 and Javascript
HTML5 is a markup language for describing the structure of web pages. Javascript is an advanced, dynamic scripting & interpreted programming language.
As you move the cursor in the browser the contents of the Browser DOM window in the IDE update to synchronize with your actions.
Use the New Project wizard to create a HTML5/JavaScript Application project template.
Semantic Elements
Rather than simply structuring the content in HTML according to how it looks, semantic elements convey meaning. The fifth version of the Hypertext Markup Language includes a new set of structural elements that can be used in a variety of ways, but the goal is to make it easier for developers and screen readers to understand the code behind web pages.
The
Choosing the right semantic tags as you code can save a lot of time because you don’t have to constantly refactor your work or comment it. This will also improve the quality of your HTML, which in turn will increase its compatibility with other browsers and tools. It will also help you get better results in search engines and make your code more efficient.
Smarter Forms
HTML5 has some very useful features for forms, but they don’t always work as you expect. For instance, validating a form field that allows users to enter text in the format of an email address isn’t straightforward. In fact, it requires a snippet of ad hoc JavaScript.
Smartform extends the
For example, Smartform supports the data-array attribute which can be applied to any form element. When combined with the data-remove attribute it will empty the elements inside the array on form initialization. This is particularly useful if you need to store form data in local or session storage and display it again when the user returns. It can be especially helpful for offline forms that use ajax to send data back and forth between the browser and server.
Data-* Attributes
One of the more subtle improvements in HTML5 is the addition of a number of new custom attributes called Data Attributes. These allow any attribute to be prefixed with “data-” and be treated as a storage area for private data – it can’t be seen by end users.
These can be used to store things like a post id for a button that increments a database record on click. Previously developers could do this with classes but these aren’t intended for this purpose and they can make the markup more complicated and less semantically meaningful.
With the introduction of the jQuery data-* property it’s now easy to get the value of these attributes in vanilla JavaScript. The jQuery function $(selector).data() retrieves values from data-* attributes, and automatically coverts them to JSON if they are of a type that can be converted. It also allows chaining – calling the function a second time for an attribute that has already been set will add another value.
Web Storage
Web storage is a new feature of HTML5 that allows developers to store data locally within the browser. Unlike cookies, which are included in every request to the server, Web Storage is completely client-side and offers a much larger initial local storage limit of 5MB and unlimited session storage limited only by system memory. Items stored in Web Storage are not sent along with requests, which reduces network traffic and improves page performance.
Both local and session storage use key-value pairs and have several methods for adding, retrieving, deleting and checking for updates of data. However, because Web Storage can be turned off by users, it is best to always implement a fallback mechanism to handle situations when the feature cannot be used. Also, it is important to only store data that can be tolerated to lose or be deleted on user action (such as login credentials). Data saved to localStorage will persist until the browser is closed and reopened.
