Define the canvas area
So to define canvas area you need to use the below HTML code.
This defines the area on which you can draw.
Get access to canvas area
To draw on the canvas area we need to first get reference of the context section.
What is the use of column layout in CSS?
CSS column layout helps you to divide your text in to columns. For example consider the below magazine news which is one big text but we need to divide the same in to 3 columns with a border in between. That’s where HTML 5 column layout comes to help.
How many columns we want to divide the text in to ?
To specify number of columns we need to us column-count. “webkit” and “moz-column” are needed for chrome and firefox respectively.
How much gap we want to give between those columns ?
moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;
Do you want to draw a line between those columns , if yes how much thick ?
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
Can you explain CSS box model?
CSS box model is a rectangular space around a HTML element which defines border, padding and margin.
Border: - This defines the maximum area in which the element will be contained. We can make the border visible, invisible, define height and width etc.
Padding: - This defines the spacing between border and element.
Margin: - This defines the spacing between border and any neighboring elements.
Can you explain some text effects in CSS 3?
Here the interviewer is expecting you to answer one of two text effects by CSS.Below are two effects which are worth noting.
Many times we would like to store information about the user locally in the computer. For example let’s say user has half-filled a long form and suddenly the internet connection breaks off. So the user would like you to store this information locally and when the internet comes back.He would like to get that information and send it to the server for storage.
Modern browsers have storage called as “Local storage” in which you can store this information.
Data is added to local storage using “key” and “value”. Below sample code shows country data “India” added with key value “Key001”.
Code
localStorage.setItem(“Key001”,”India”);
To retrieve data from local storage we need to use “getItem” providing the key name.
Hide Copy Code
var country = localStorage.getItem(“Key001”);
You can also store JavaScript object’s in the local storage using the below code.
Code
var country = {};
country.name = “India”;
country.code = “I001”;
localStorage.setItem(“I001”, country);
var country1 = localStorage.getItem(“I001”);
If you want to store in JSON format you can use “JSON.stringify” function as shown in the below code.
Code
localStorage.setItem(“I001”,JSON.stringify(country));
Local storage does not have a life time it will stay until either the user clear it from the browser or you remove it using JavaScript code.
| Cookies | Local storage |
| Client side / Server side. | Data accessible both at client side and server side. Cookie data is sent to the server side with every request. | Data is accessible only at the local browser side. Server cannot access local storage until deliberately sent to the server via POST or GET. |
| Size | 4095 bytes per cookie. | 5 MB per domain. |
| Expiration | Cookies have expiration attached to it. So after that expiration the cookie and the cookie data get’s deleted. | There is no expiration data. Either the end user needs to delete it from the browser or programmatically using JavaScript we need to remove the same. |
Local storage data persists forever but session storage is valid until the browser is open, as soon as the browser closes the session variable resets.
WebSQL is a structured relational database at the client browser side. It’s a local RDBMS inside the browser on which you can fire SQL queries.
No, many people label it as HTML 5 but it’s not part of HTML 5 specification. The specification is based around SQLite.
The first step we need to do is open the database by using “OpenDatabase” function as shown below. The first argument is the name of the database, the next is the version, then a simple textual title and finally the size of the database.
Code
var db=openDatabase('dbCustomer','1.0','Customer app’, 2 * 1024 * 1024);
To execute SQL we then need to use “transaction” function and call “executeSql” function to fire SQL.
Code
db.transaction(function (tx)
{
tx.executeSql(
tx.executeSql(
tx.executeSql(
}
In case you are firing “select” query you will get data is “results” collection which we can loop and display in the HTML UI.
Code
db.transaction(function (tx)
{
tx.executeSql(
for (i = 0; i < len; i++)
{
msg = "" + results.rows.item(i).log + "
";
document.querySelector(
}
},
null);
});
Code
CACHE MANIFEST
# version 1.0
CACHE :
Login.aspx
- All manifest file starts with CACHE MANIFEST statement.
- #( hash tag) helps to provide the version of the cache file.
- CACHE command specifies which files needs to be cached.
- The content type of the manifest file should be “text/cache-manifest”.
Below is how cache manifest has been provided using ASP.NET C#.
Code
Response.ContentType = "text/cache-manifest";
Response.Write("CACHE MANIFEST \n");
Response.Write("# 2012-02-21 v1.0.0 \n");
Response.Write("CACHE : \n");
Response.Write("Login.aspx \n");
Response.Flush();
Response.End();
One the cache manifest file is created the next thing is to provide the link of the manifest file in the HTML page as shown below.
Code
<html manifest="cache.aspx">
When the above file runs first time it gets added in the browser application cache and in case server goes down the page is served from the application cache.
