Scribd
Upload
1K views

HTML5 Interview Questions

This PDF covers the most asked interview questions around HTML 5 like worker threads , new page structure , new forms elements , server sent events , application caching and lot more. Happy job hunting.

Uploaded by

Shivprasad Koirala
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

HTML5 Interview Questions

This PDF covers the most asked interview questions around HTML 5 like worker threads , new page structure , new forms elements , server sent events , application caching and lot more. Happy job hunting.

Uploaded by

Shivprasad Koirala
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

40 important HTML 5 Interview questions with answers

by www.questpond.com (One stop place for .Net and C# interview question videos)

Contents

Introduction
I am AS .N!" #$C developer and recently w%en I was loo&in' for a (ob lot of questions were as&ed connected to )"#* + and its new features. So below are ,- important questions w%ic% would %elp you brus% up your &nowled'e on )"#* +. "%ese questions are not silver bullet to 'et a (ob but yes t%ey are %elpful w%en you want to quic&ly brus% up t%e topic. )appy (ob %untin'.

Courtesy. / www.questpond.com

What is the relationship between SGML, HTML , XML and HTML ?


S0#* (Standard 'enerali1ed mar&up lan'ua'e) is a standard w%ic% tells %ow to specify document mar&up. It2s only a #eta lan'ua'e w%ic% describes %ow a document mar&up s%ould be. )"#* is a mar&up lan'ua'e w%ic% is described usin' S0#*. So by S0#* t%ey created 3"3 w%ic% t%e )"#* refers and needs to ad%ere to t%e same. So you will always find 43OC"5 !6 attribute at t%e top of )"#* pa'e w%ic% defines w%ic% 3"3 is used for parsin' purpose.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http //!!!.!3."#$/T%/html4/&t#'(t.)t)"*

Now parsin' S0#* was a pain so t%ey created 7#* to ma&e t%in's better. 7#* uses S0#*. 8or e9ample in S0#* you %ave to start and end ta's but in 7#* you can %ave closin' ta's w%ic% close automatically (4:;customer<6). 7)"#* was created from 7#* w%ic% was used in )"#* ,.-. So for e9ample in S0#* derived )"#* 4:;br<6 is not valid but in 7)"#* it2s valid. 5ou can refer 7#* 3"3 as s%own in t%e below code snippet.
<!DOCTYPE html PUBLIC "-//W3C//DTD +HTML 1.0 T#,-&'t'"-,l//EN" "http //!!!.!3."#$/T%/.html1/DTD/.html1-t#,-&'t'"-,l.)t)"*

In s%ort S0#* is t%e parent of every one. Older )"#* utili1es S0#* and )"#* ,.- uses 7)"#* w%ic% derived from 7#*.

What is HTML 5?

)"#* + is a new standard for )"#* w%ose main tar'et is to deliver everyt%in' wit%out need to any additional plu'ins li&e flas%= Silverli'%t etc. It %as everyt%in' from animations= videos= ric% 0>I etc. )"#*+ is cooperation output between ?orld ?ide ?eb Consortium (?@C) and t%e ?eb )yperte9t Application "ec%nolo'y ?or&in' 0roup (?)A"?0).

In HTML 5 we do not need DTD why?


)"#* + does not use S0#* or 7)"#* it2s completely a new t%in' so you do not need to refer 3"3. 8or )"#* + you (ust need to put t%e below doctype code w%ic% ma&es t%e browser identify t%at t%is is a )"#* + document.
<!DOCTYPE html*

I I do not put !" D#$T%&' ht(l) will HTML 5 wor*?


No= browser will not be able to identify t%at it2s a )"#* document and )"#* + ta's will not function properly.

Which browsers support HTML 5?


Almost all browsers i.e. Safari= C%rome= 8irefo9= Opera= Internet !9plorer support )"#* +.

How is the pa+e structure o HTML 5 di erent ro( HTML , or pre-ious HTML?
A typical web pa'e %as %eaders= footers= navi'ation= central area and side bars. Now if we want to represent t%e same in )"#* , wit% proper names to t%e )"#* section we would probably use a 3I$ ta'. Aut in )"#* + t%ey %ave made it more clear by creatin' element names for t%ose sections w%ic% ma&es your )"#* more readable.

Aelow are more details of t%e )"#* + elements w%ic% form t%e pa'e structure. :%eader<. Bepresents %eader data of )"#*. :footer<. 8ooter section of t%e pa'e. :nav<. Navi'ation elements in t%e pa'e. :article<. Self/contained content. :section<. >sed inside article to define sections or 'roup content in to sections. :aside<. Bepresent side bar contents of a pa'e.

What is datalist in HTML 5 ?


3atalist element in )"#* + %elps to provide autocomplete feature in a te9tbo9 as s%own below.

Aelow is t%e )"#* code for 3ata*ist feature./


<'-p/t l'&t0"C"/-t#1"* <),t,l'&t ')0"C"/-t#1"* <"pt'"- 2,l/30"I-)',"* <"pt'"- 2,l/30"It,l1"*

<"pt'"- 2,l/30"I#,-"* <"pt'"- 2,l/30"I&#,3l"* <"pt'"- 2,l/30"I-)"-3&',"* </),t,l'&t*

What are the di erent new or( ele(ent types in HTML 5?


"%ere are C- important new form elements introduced in )"#* +./ C. Color. D. 3ate @. 3atetime/local ,. !mail +. "ime E. >rl F. Ban'e G. "elep%one H. Number C-. Searc% *et2s understand t%ese elements step by step. If you want to s%ow color pic&er dialo' bo9.

<'-p/t t1p30"("l"#" -,m30"4,2("l"#"*

If you want to s%ow calendar dialo' bo9.


<'-p/t t1p30"),t3" -,m30"5),1"*

If you want to s%ow calendar wit% local time.


<'-p/t t1p30"),t3t'm3-l"(,l" -,m30"5),1t'm3"*

If you want to create a )"#* te9t wit% email validation we can set t%e type as 4email6.
<'-p/t t1p30"3m,'l" -,m30"3m,'l"*

8or >B* validation set t%e type as 4url6 as s%own in t%e below )"#* code.

<'-p/t t1p30"/#l" -,m30"&'t3-,m3"*

8or >B* validation set t%e type as 4url6 as s%own in t%e below )"#* code. If you want to display te9tbo9 wit% number ran'e you can set type to number.
<'-p/t t1p30"-/m53#" -,m30"6/,-t't1" m'-0"1" m,.0"7"*

If you want to display a ran'e control you can use type as ran'e.

<'-p/t t1p30"#,-$3" m'-0"0" m,.0"10" &t3p0"8" 2,l/30"9"*

?ant to ma&e te9t bo9 as searc% en'ine bo9.


<'-p/t t1p30"&3,#(h" -,m30"$""$l33-$'-3"*

?%at to only ta&e time input.


<'-p/t t1p30"t'm3" -,m30"/&#:t'm3"*

If you want to ma&e te9t bo9 to accept telep%one numbers.


<'-p/t t1p30"t3l" -,m30"m1t3l"*

What is output ele(ent in HTML 5?


Output element is needed w%en you need calculation from two inputs to be summari1ed in to a label. 8or instance you %ave two te9tbo9es ( see t%e below fi'ure) and you want to add numbers from t%ese te9tbo9es and send t%em to a label.

Aelow 'oes t%e code of %ow to use output element wit% )"#* +.
<4"#m "-&/5m't0"#3t/#- 4,l&3" "-'-p/t0"".2,l/3 0 p,#&3I-t;,.2,l/3< = p,#&3I-t;5.2,l/3<"* <'-p/t -,m30"," t1p30"-/m53#"* = <'-p/t -,m30"5" t1p30"-/m53#"* 0 <"/tp/t -,m30"""*</"/tp/t* </4"#m*

5ou can also replace 4parseInt6 wit% 4valueAsNumber6 for simplicity. 5ou can also use 4for6 in t%e output element for more readability.

<"/tp/t -,m30""" 4"#0", 5"*</"/tp/t*

What is S.G?
S$0 stands for scalable vector 'rap%ics. It2s a te9t based 'rap%ic lan'ua'e w%ic% draws ima'es usin' te9t= lines= dots etc. "%is ma&es it li'%twei'%t and renders faster.

$an we see a si(ple e/a(ple o S.G usin+ HTML 5?


*et2s say we want to display t%e below simple line usin' )"#* + S$0.

Aelow is %ow t%e code of )"#* +. 5ou can see t%e S$0 ta' w%ic% encloses t%e poly'on ta' for displayin' t%e star ima'e.
<&2$ ')0"&2$3l3m" h3'$ht0"800" .ml-&0"http //!!!.!3."#$/8000/&2$"* <l'-3 .10"0" 110"0" .80"800" 180"100" &t1l30"&t#">3 #3)?&t#">3-!')th 8"/* </&2$*

What is can-as in HTML 5?


Canvas is an )"#* area on w%ic% you can draw 'rap%ics.

So how can we draw a si(ple line on $an-as?


3efine t%e Canvas area. 0et access to canvas conte9t area. 3raw t%e 'rap%ic. Define the canvas area

So to define canvas area you need to use t%e below )"#* code. "%is defines t%e area on w%ic% you can draw.
<(,-2,& ')0"m1(,-2,&" !')th0"900" h3'$ht0"700" &t1l30"5"#)3# 1p. &"l') @000000?"*</(,-2,&*

Get access to canvas area "o draw on t%e canvas area we need to first 'et reference of t%e conte9t section. Aelow is t%e code for canvas section.
2,# (0)"(/m3-t.$3tEl3m3-tB1I);"m1(,-2,&"<? 2,# (t.0(.$3tC"-t3.t;"8)"<?

Draw the graphic Now once you %ave access to t%e conte9t ob(ect we can start drawin' on t%e conte9t. So first call t%e 4move6 met%od and start from a point = use line met%od and draw t%e line and t%en apply stro&e over it.
(t..m"23T";10A10<? (t..l'-3T";800A100<? (t..&t#">3;<?

Aelow is t%e complete code.

<5")1 "-l",)0"D#,!M3;<?"* <(,-2,& ')0"m1(,-2,&" !')th0"900" h3'$ht0"700" &t1l30"5"#)3# 1p. &"l') @000000?"*</(,-2,&* </5")1* <&(#'pt* 4/-(t'"- D#,!M3;< B 2,# (0)"(/m3-t.$3tEl3m3-tB1I);"m1(,-2,&"<? 2,# (t.0(.$3tC"-t3.t;"8)"<? (t..m"23T";10A10<? (t..l'-3T";800A100<? (t..&t#">3;<? C

5ou s%ould 'et t%e below output.

What is the di erence between $an-as and S.G +raphics?


N"t3 - I4 1"/ &33 th3 p#32'"/& t!" 6/3&t'"-& 5"th (,-2,& ,-) DEF (,- )#,! $#,ph'(& "- th3 5#"!&3#. D" '- th'& 6/3&t'"- '-t3#2'3!3# !,-t& t" >-"! !h3!'ll 1"/ /&3 !h,t. SVG )ere2s it2s li&e draw and remember. In ot%er words any s%ape drawn by usin' S$0 can be remembered and manipulated and browser can render it a'ain. S$0 is 'ood for creatin' 'rap%ics li&e CA3 software2s w%ere once somet%in' is drawn t%e user wants to manipulate it. "%is is slow as it needs to remember t%e co/ordinates for later manipulations. ?e can %ave event %andler associated wit% t%e drawin' ob(ect. Besolution independent. Canvas Canvas is li&e draw and for'et. Once somet%in' is drawn you cannot access t%at pi9el and manipulate it. Canvas is 'ood for draw and for'et scenarios li&e animation and 'ames. "%is is faster as t%ere is no intention of rememberin' t%in's later. )ere we cannot associate event %andlers wit% drawin' ob(ects as we do not %ave reference of t%em. Besolution dependent.

How to draw rectan+le usin+ $an-as and S.G usin+ HTML 5 ?


)"#* + code Bectan'le code usin' S$0.
<&2$ .ml-&0"http //!!!.!3."#$/8000/&2$" 23#&'"-0"1.1"* <#3(t !')th0"300" h3'$ht0"100" &t1l30"4'll #$5;0A0A877<?&t#">3-!')th 1?&t#">3 #$5;0A0A0<"/* </&2$*

)"#* + Bectan'le code usin' canvas.

2,# (0)"(/m3-t.$3tEl3m3-tB1I);"m1C,-2,&"<? 2,# (t.0(.$3tC"-t3.t;"8)"<? (t..#3(t;80A80A170A100<? (t..&t#">3;<?

<&2$ .ml-&0"http //!!!.!3."#$/8000/&2$" 23#&'"-0"1.1"* <('#(l3 (.0"100" (10"70" #0"40" &t#">30"5l,(>" &t#">3-!')th0"8" 4'll0"#3)"/* </&2$*

2,# (,-2,& 0 )"(/m3-t.$3tEl3m3-tB1I);Gm1C,-2,&G<? 2,# ("-t3.t 0 (,-2,&.$3tC"-t3.t;G8)G<? 2,# (3-t3#+ 0 (,-2,&.!')th / 8? 2,# (3-t3#Y 0 (,-2,&.h3'$ht / 8? 2,# #,)'/& 0 H0? ("-t3.t.53$'-P,th;<? ("-t3.t.,#(;(3-t3#+A (3-t3#YA #,)'/&A 0A 8 I M,th.PIA 4,l&3<? ("-t3.t.4'llDt1l3 0 G$#33-G? ("-t3.t.4'll;<? ("-t3.t.l'-3W')th 0 7? ("-t3.t.&t#">3Dt1l3 0 G@003300G? ("-t3.t.&t#">3;<?

<!DOCTYPE html* <html* <5")1 "-l",)0"D#,!M3;<?"* <&2$ !')th0"700" h3'$ht0"100"* <('#(l3 ')0"('#(l31" (.0"80" (10"80" #0"10" &t1l30"&t#">3 </&2$* -"-3? 4'll @440000?"/*

</5")1* <&(#'pt* 2,# t'm3#J/-(t'"- 0 &3tI-t3#2,l;D#,!M3A 80<? ,l3#t;")))"<? 4/-(t'"- D#,!M3;< B 2,# ('#(l3 0 )"(/m3-t.$3tEl3m3-tB1I);"('#(l31"<? 2,# . 0 ('#(l3.$3tKtt#'5/t3;"(."<? 2,# -3!+ 0 8 = p,#&3I-t;.<? '4;-3!+ * 700< B -3!+ 0 80? C ('#(l3.&3tKtt#'5/t3;"(."A -3!+<? C </&(#'pt* </html*

What are selectors in CSS? Selectors %elp to select an element to w%ic% you want to apply a style. 8or e9ample below is a simple style called as Iintro6 w%ic% applies red color to bac&'round of a )"#* element.
<&t1l3* .'-t#" B 5,(>$#"/-)-("l"# #3)? C </&t1l3*

"o apply t%e above 4intro6 style to div we can use t%e 4class6 selector as s%own in t%e below fi'ure.
<)'2 (l,&&0"'-t#""*

<p*M1 -,m3 '& Dh'2p#,&,) >"'#,l,.</p* <p*I !#'t3 '-t3#2'3! 6/3&t'"-&.</p* </)'2*

How can you apply CSS style using ID value? So let2s say you %ave a )"#* para'rap% ta' wit% id 4myte9t6 as s%own in t%e below snippet.
<p ')0"m1t3.t"*Th'& '& HTML '-t3#2'3! 6/3&t'"-&.</p*

5ou can create a style usin' 4#6 selector wit% t%e 4id6 name and apply t%e CSS value to t%e para'rap% ta'. So to apply style to 4myte9t6 element we can use 4#myte9t6 as s%own in t%e below CSS code.
<&t1l3* @m1t3.t B 5,(>$#"/-)-("l"# 13ll"!? C </&t1l3*

Quick revision of some important selectors Set all para'rap% ta's bac& 'round color to yellow.
PAh1 B 5,(>$#"/-)-("l"# 13ll"!? C

Sets all para'rap% ta's inside div ta' to yellow bac&'round.


)'2 p B 5,(>$#"/-)-("l"# 13ll"!? C

Sets all para'rap% ta's followin' div ta's to yellow bac&'round.

)'2=p B 5,(>$#"/-)-("l"# 13ll"!? C

Sets all attribute wit% 4tar'et6 to yellow bac&'round.


,Lt,#$3tM B 5,(>$#"/-)-("l"# 13ll"!? C <, h#340"http //!!!.6/3&tp"-).("m"*KDP.NET '-t3#2'3! 6/3&t'"-&</,* <, h#340"http //!!!.6/3&tp"-).("m" t,#$3t0":5l,->"*(@ '-t3#2'3! 6/3&t'"-&</,* <, h#340"http //!!!.6/3&tp"-)."#$" t,#$3t0":t"p"*.NET '-t3#2'3! 6/3&t'"-& !'th ,-&!3#&</,*

Set all elements to yellow bac&'round w%en control 'ets focus.


'-p/t 4"(/& B 5,(>$#"/-)-("l"# 13ll"!? C

Set %yperlin&s accordin' to action on lin&s.


, , , , l'-> 2'&'t3) h"23# ,(t'23 B("l"# B("l"# B("l"# B("l"# $#33-?C $#33-?C #3)?C 13ll"!?C

What is the use o colu(n layout in $SS?


CSS column layout %elps you to divide your te9t in to columns. 8or e9ample consider t%e below ma'a1ine news w%ic% is one bi' te9t but we need to divide t%e same in to @ columns wit% a border in between. "%at2s w%ere )"#* + column layout comes to %elp.

"o implement column layout we need to specify t%e followin'./ )ow many columns we want to divide t%e te9t in to J "o specify number of columns we need to us column/count. 4web&it6 and 4mo1/column6 are needed for c%rome and firefo9 respectively.
-m"N-("l/m--("/-t 3? /I J'#34". I/ -!35>'t-("l/m--("/-t 3? /I D,4,#' ,-) Ch#"m3 I/ ("l/m--("/-t 3?

)ow muc% 'ap we want to 'ive between t%ose columns J


-m"N-("l/m--$,p 40p.? /I J'#34". I/ -!35>'t-("l/m--$,p 40p.? /I D,4,#' ,-) Ch#"m3 I/ ("l/m--$,p 80p.?

3o you want to draw a line between t%ose columns = if yes %ow muc% t%ic& J
-m"N-("l/m--#/l3 4p. "/t&3t @440044? /I J'#34". I/ -!35>'t-("l/m--#/l3 4p. "/t&3t @440044? /I D,4,#' ,-) Ch#"m3 I/ ("l/m--#/l3 9p. "/t&3t @440044?

Aelow is t%e complete code for t%e same.

<&t1l3* .m,$,N'-3 B -m"N-("l/m--("/-t 3? /I J'#34". I/ -!35>'t-("l/m--("/-t 3? /I D,4,#' ,-) Ch#"m3 I/ ("l/m--("/-t 3? -m"N-("l/m--$,p 40p.? /I J'#34". I/ -!35>'t-("l/m--$,p 40p.? /I D,4,#' ,-) Ch#"m3 I/ ("l/m--$,p 80p.? -m"N-("l/m--#/l3 4p. "/t&3t @440044? /I J'#34". I/ -!35>'t-("l/m--#/l3 4p. "/t&3t @440044? /I D,4,#' ,-) Ch#"m3 I/ ("l/m--#/l3 9p. "/t&3t @440044? C </&t1l3*

5ou can t%en apply t%e style to t%e te9t by usin' t%e class attribute.

<)'2 (l,&&0"m,$,N'-3"* Y"/# t3.t $"3& h3#3 !h'(h 1"/ !,-t t" )'2')3 '- t" 3 ("l/m-&. </)'2*

$an you e/plain $SS bo/ (odel?


CSS bo9 model is a rectan'ular space around a )"#* element w%ic% defines border= paddin' and mar'in. Aorder. / "%is defines t%e ma9imum area in w%ic% t%e element will be contained. ?e can ma&e t%e border visible= invisible= define %ei'%t and widt% etc. addin'. / "%is defines t%e spacin' between border and element.

#ar'in. / "%is defines t%e spacin' between border and any nei'%borin' elements.

8or instance below is a simple CSS code w%ic% defines a bo9 wit% border = paddin' and mar'in values.
.5". B !')th 5"#)3# p,))'-$ m,#$'C 800p.? 10p. &"l') @OO(? 80p.? 70p.?

Now if we apply t%e above CSS to a 3I$ ta' as s%own in t%e below code = your output would be as s%own in t%e fi'ure below. I %ave created two test 4Some te9t6 and 4Some ot%er te9t6 so t%at we can see %ow mar'in property functions.
<)'2 ,l'$-0"m'))l3" (l,&&0"5"."* D"m3 t3.t </)'2* D"m3 "th3# t3.t

$an you e/plain so(e te/t e ects in $SS 0?


)ere t%e interviewer is e9pectin' you to answer one of two te9t effects by CSS. Aelow are two effects w%ic% are wort% notin'. S%adow te9t effect
.&p3(',lt3.t B t3.t-&h,)"! 7p. 7p. 7p. @JJ0000? C

?ord wrap effect


<&t1l3* .5#3,>!"#) B!"#)-!#,p 5#3,>-!"#)?C </&t1l3*

What are web wor*ers and why do we need the( ?


Consider t%e below %eavy for loop code w%ic% runs above million times.
4/-(t'"B 4"# ;' 0 0? ' < 10000000000000? '==< B . 0 ' = .? C C D"m3H3,21J/-(t'"-;<

*et2s say t%e above for loop code is e9ecuted on a )"#* button clic&. Now t%is met%od e9ecution is sync%ronous. In ot%er words t%e complete browser will wait until t%e for loop completes.
<'-p/t t1p30"5/tt"-" "-(l'(>0"D"m3H3,21J/-(t'"-;<?" /*

"%is can furt%er lead to browser 'ettin' free1ed and unresponsive wit% an error messa'e as s%own in t%e screen below.

So if we can move t%is %eavy for loop in a KavaScript file and run it async%ronously t%at means t%e browser does need to wait for t%e loop t%en we can %ave a more responsive browser. "%at2s w%at web wor&er are for. ?eb wor&er %elps to e9ecute KavaScript file async%ronously.

What are the restrictions o Web Wor*er thread ?


?eb wor&er t%reads cannot modify )"#* elements= 'lobal variables and some window properties li&e ?indow.*ocation. 5ou are free to use (avascript data types= 7#*)ttpBequest calls etc.

So how do we create a wor*er thread in 1a-aScript?


"o create a wor&er t%read we need to pass t%e KavaScript file name and create t%e wor&er ob(ect.
2,# !"#>3# 0 -3! W"#>3#;"M1H3,21P#"(3&&.P&"<?

"o send messa'e to t%e wor&er ob(ect we need to use 4 ost#essa'e6 = below is t%e code for t%e same.
!"#>3#.p"&tM3&&,$3;<?

?%en t%e wor&er t%read sends data we 'et it in t%e 4On#essa'e6 event on t%e callers end.
!"#>3#."-m3&&,$3 0 4/-(t'"- ;3< B

)"(/m3-t.$3tEl3m3-tB1I);"t.t1"<.2,l/3 0 3.),t,? C?

"%e %eavy loop is in t%e 4#y)eavy rocess.(s6 (avascript file = below is t%e code for t%e same. ?%en t%e KavaScript file wants to send messa'e %e uses 4postmessa'e6 and any messa'e sent from t%e caller is received in t%e 4onmessa'e6 event.
2,# . 00 &3l4."-m3&&,$3 0 4/-(t'"- ;3< B 4"# ;' 0 0? ' < 1000000000? '==< B . 0 ' = .? C &3l4.p"&tM3&&,$3;.<? C?

How to ter(inate a web wor*er


!.t3#m'-,t3;<?

Why do we need HTML 5 ser-er2sent e-ents?


One of t%e common requirements in web world is 'ettin' updates from t%e server. "a&e e9ample of a stoc& tic&er application w%ere t%e browser %as to ta&e re'ular updates from t%e server for t%e recent stoc& value.

Now to implement t%is &ind of requirement developers normally write some &ind of >** code w%ic% 'oes to t%e server and fetc%es data in certain interval. Now >** solution is 'ood but it ma&es t%e networ& c%atty wit% lot of calls and also it adds load on t%e server. So rat%er t%an >** it would be 'reat if we can %ave some &ind of >S) solution. In simple words w%en t%e server %as updates it will send updates to t%e browser client. "%at can be ac%ieved by usin' 4S!B$!B S!N" !$!N"S6. So t%e first t%in' t%e browser needs to do is connect to t%e server source w%ic% will send updates. *et2s say we %ave pa'e 4stoc&.asp96 w%ic% sends stoc& updates. So to connect to t%e pa'e we need to use attac% to t%e event source ob(ect as s%own in t%e below code.
2,# &"/#(3 0 -3! E23-tD"/#(3;"&t"(>.,&p."<?

?e also need to attac% t%e function w%ere we will receive messa'es w%en server sends update. 8or t%an we need to attac% function to t%e 4onmessa'e6 event as s%own in t%e below code.
&"/#(3."-m3&&,$3 0 4/-(t'"- ;323-t< B )"(/m3-t.$3tEl3m3-tB1I);"#3&/lt"<.'--3#HTML =0 323-t.),t, = "<5#*"? C?

Now from t%e server side we need to send events. Aelow are some lists of important events wit% command t%at needs to be sent from t%e server side.
!vent Send data to t%e client. "ell client to retry in Cseconds Baise a specific event wit% data Comman" data . %ello retry . C---event . success data . 5ou are lo''ed in.

So for e9ample if we want to send data below is t%e AS .N!" code for t%e same. lease note t%e content type is set to te9t;event.

%3&p"-&3.C"-t3-tT1p30"t3.t/323-t-&t#3,m"? %3&p"-&3.E.p'#3&0-1? %3&p"-&3.W#'t3;"),t, %3&p"-&3.Jl/&h;<? " = D,t3T'm3.N"!.T"Dt#'-$;<<?

"o retry after C- second below is t%e command.


%3&p"-&3.W#'t3;"#3t#1 10000"<?

If you want to attac% an event we need to use t%e 4add!vent*istener6 event as s%own in t%e below code.
&"/#(3.,))E23-tL'&t3-3#;Gm3&&,$3GA 4/-(t'"-;3< B ("-&"l3.l"$;3.),t,<? CA 4,l&3<?

8rom t%e server side t%e below messa'e will tri''er t%e 4messa'e6 function of (avascript.

323-t ),t,

m3&&,$3 h3ll"

What is local stora+e concept in HTML 5?


#any times we would li&e to store information about t%e user locally in t%e computer. 8or e9ample let2s say user %as %alf/filled a lon' form and suddenly t%e internet connection brea&s off. So t%e user would li&e you to store t%is information locally and w%en t%e internet comes bac&.)e would li&e to 'et t%at information and send it to t%e server for stora'e. #odern browsers %ave stora'e called as 4*ocal stora'e6 in w%ic% you can store t%is information.

How can we add and re(o-e data ro( local stora+e?


3ata is added to local stora'e usin' 4&ey6 and 4value6. Aelow sample code s%ows country data 4India6 added wit% &ey value 4Ley--C6.
l"(,lDt"#,$3.&3tIt3m;QR31001SASI-)',S<?

"o retrieve data from local stora'e we need to use 4'etItem6 providin' t%e &ey name.
2,# ("/-t#1 0 l"(,lDt"#,$3.$3tIt3m;QR31001S<?

5ou can also store KavaScript ob(ect2s in t%e local stora'e usin' t%e below code.
2,# ("/-t#1 0 BC? ("/-t#1.-,m3 0 QI-)',S? ("/-t#1.(")3 0 QI001S? l"(,lDt"#,$3.&3tIt3m;QI001SA ("/-t#1<? 2,# ("/-t#11 0 l"(,lDt"#,$3.$3tIt3m;QI001S<?

If you want to store in KSON format you can use 4KSON.strin'ify6 function as s%own in t%e below code.
l"(,lDt"#,$3.&3tIt3m;QI001SATDON.&t#'-$'41;("/-t#1<<?

What is the li eti(e o local stora+e?


*ocal stora'e does not %ave a life time it will stay until eit%er t%e user clear it from t%e browser or you remove it usin' KavaScript code.

What is the di erence between local stora+e and coo*ies?


Cookies 3ata accessible bot% at client side and server side. Coo&ie data is sent to t%e server side wit% every request. ,-H+ bytes per coo&ie. Coo&ies %ave e9piration attac%ed to it. So after t%at e9piration t%e coo&ie and t%e coo&ie data 'et2s deleted. #ocal storage 3ata is accessible only at t%e local browser side. Server cannot access local stora'e until deliberately sent to t%e server via OS" or 0!". + #A per domain. "%ere is no e9piration data. !it%er t%e end user needs to delete it from t%e browser or pro'rammatically usin' KavaScript we need to remove t%e same.

Client si"e $ Server si"e

Si%e !&piration

What is session stora+e and how can you create one?


Session stora'e is same li&e local stora'e but t%e data is valid for a session. In simple words t%e data is deleted as soon as you close t%e browser.

"o create a session stora'e you need to use 4sessionStora'e.variablename6 . In t%e below code we %ave a created a variable called as 4clic&count6. If you refres% t%e browser t%e count increases. Aut if you close t%e browser and start a'ain t%e 4clic&count6 variable starts from 1ero.
'4;&3&&'"-Dt"#,$3.(l'(>("/-t< B &3&&'"-Dt"#,$3.(l'(>("/-t0N/m53#;&3&&'"-Dt"#,$3.(l'(>("/-t<=1? C 3l&3 B &3&&'"-Dt"#,$3.(l'(>("/-t 0 0? C

What is di erence between session stora+e and local stora+e?


*ocal stora'e data persists forever but session stora'e is valid until t%e browser is open= as soon as t%e browser closes t%e session variable resets.

What is WebS3L?
?ebSM* is a structured relational database at t%e client browser side. It2s a local B3A#S inside t%e browser on w%ic% you can fire SM* queries.

Is WebS3L a part o HTML 5 speci ication?


No= many people label it as )"#* + but it2s not part of )"#* + specification. "%e specification is based around SM*ite.

So how can we use WebS3L ?


"%e first step we need to do is open t%e database by usin' 4Open3atabase6 function as s%own below. "%e first ar'ument is t%e name of t%e database= t%e ne9t is t%e version= t%en a simple te9tual title and finally t%e si1e of t%e database.
2,# )50"p3-D,t,5,&3;G)5C/&t"m3#GAG1.0GAGC/&t"m3# ,ppUA 8 I 1084 I 1084<?

"o e9ecute SM* we t%en need to use 4transaction6 function and call 4e9ecuteSql6 function to fire SM*.
)5.t#,-&,(t'"-;4/-(t'"- ;t.< B t..3.3(/t3D6l;GC%EKTE TKBLE IJ NOT E+IDTD t5lC/&t;') /-'6/3A (/&t"m3#-,m3<G<? t..3.3(/t3D6l;GINDE%T INTO t5l(/&t ;')A (/&t"m3#-,m3< EKLUED;1A "&h'2"<G<? t..3.3(/t3D6l;GINDE%T INTO t5l(/&t ;')A (/&t"m3#-,m3< EKLUED ;8A "#,P/"<G<? C

In case you are firin' 4select6 query you will 'et data is 4results6 collection w%ic% we can loop and display in t%e )"#* >I.
)5.t#,-&,(t'"-;4/-(t'"- ;t.< B t..3.3(/t3D6l;GDELECT I J%OM t5l(/&tGA LMA 4/-(t'"- ;t.A #3&/lt&< B 4"# ;' 0 0? ' < l3-? '==< B m&$ 0 "<p*<5*" = #3&/lt&.#"!&.'t3m;'<.l"$ = "</5*</p*"? )"(/m3-t.6/3#1D3l3(t"#;G@(/&t"m3#<.'--3#HTML =0 C CA -/ll<? C<? m&$?

What is application cache in HTML5?


One of t%e most demanded t%in's by end user is offline browsin'. In ot%er words if internet connection is not available pa'e s%ould come from browser cac%e i.e. offline and application cac%e %elps you to ac%ieve t%e same. Application cac%e %elps you to specify w%ic% files s%ould be cac%ed and not cac%ed.

So how do we i(ple(ent application cache in HTML 5 ?


"%e first t%in' in we need to specify is t%e 4manifest6 file. 4manifest6 file %elps you to define %ow your cac%in' s%ould wor&. Aelow is t%e structure of t%e manifest file ./

CKCHE MKNIJEDT @ 23#&'"- 1.0 CKCHE L"$'-.,&p.

All manifest file starts wit% CAC)! #ANI8!S" statement. #( %as% ta') %elps to provide t%e version of t%e cac%e file. CAC)! command specifies w%ic% files needs to be cac%ed. "%e content type of t%e manifest file s%ould be 4te9t;cac%e/manifest6.

Aelow is %ow cac%e manifest %as been provided usin' AS .N!" C#.
%3&p"-&3.C"-t3-tT1p3 0 "t3.t/(,(h3-m,-'43&t"? %3&p"-&3.W#'t3;"CKCHE MKNIJEDT V-"<? %3&p"-&3.W#'t3;"@ 8018-08-81 21.0.0 V-"<? %3&p"-&3.W#'t3;"CKCHE %3&p"-&3.Jl/&h;<? %3&p"-&3.E-);<? V-"<? %3&p"-&3.W#'t3;"L"$'-.,&p. V-"<?

One t%e cac%e manifest file is created t%e ne9t t%in' is to provide t%e lin& of t%e manifest file in t%e )"#* pa'e as s%own below.
<html m,-'43&t0"(,(h3.,&p."*

?%en t%e above file runs first time it 'ets added in t%e browser application cac%e and in case server 'oes down t%e pa'e is served from t%e application cac%e.

So how do we re resh the application cache o the browser?


Application cac%e is removed by c%an'in' version number to a new version number as specified in t%e 4#6 ta' in t%e below code.

CKCHE MKNIJEDT @ 23#&'"- 8.0;-3!< CKCHE L"$'-.,&p. K5"/t/&.,&p. NETWO%R

P,$3&.,&p.

What is allbac* in 4pplication cache?


8allbac& in application cac%e %elps you to specify t%e file w%ic% will displayed if t%e server is not reac%able. 8or instance in t%e below manifest file we are sayin' if someone %its 4;%ome6 and if t%e server is not reac%able t%en 4%omeoffline.%tml6 file s%ould be served.
JKLLBKCR /h"m3/ /h"m3"44l'-3.html

What is networ* in application cache ?


Networ& command says files w%ic% s%ould not be cac%ed. 8or e9ample in t%e below code we are sayin' t%at 4%ome.asp96 s%ould never be cac%ed and or available offline.
NETWO%R h"m3.,&p.

5e erences or other inter-iew 6uestion articles


#$C Interview questions wit% answers. / %ttp.;;www.codepro(ect.com;Articles;++EHH+;#$C/ interview/questions/wit%/answers !ntity framewor& interview questions wit% answers. / %ttp.;;www.codepro(ect.com;Articles;EFE@-H;A3O/N!"/!ntity/8ramewor&/Interview/Muestions .N!" interview questions preparation video series %ttp.;;www.youtube.com;watc%JvN'a3n/ s$*(GM ?%at &ind of questions are as&ed to .N!" developers %ttp.;;www.youtube.com;watc%J vN@ 7sp$cSSL! "%is is a sample .N!" moc& interview video %ttp.;;www.youtube.com;watc%JvN% 77CdLFnm& #y site updated wit% interview questions every day www.dotnetinterviewquestions.in

You might also like