understanding html5 and java script - front end development
TRANSCRIPT
FRONTEND WEB DEVELOPMENTFUNDAMENTALS
Session – 8, Part A
HTML5 & JavaScript
Agenda
HTML 5 & JavaScript 3
SL NO AGENDA TITLE
1 meta tag
2 HTML5 Video Tag
3 HTML5 Audio Tag
4 ARIA Landmark Roles
5 HTML5 Input Types
6 Checking HTML5 Document Semantic
7 HTML5 Local Storage
8 HTML5 geolocation API
9 Modernizr
meta tag
HTML 5 & JavaScript 4
• Main purpose of meta tag is to define document level
metadata.
• 4 attributes of meta tag are name, content, charset , http-
equiv (used in old implementations)
– Name and content are always used together to define the
key:value pair metadata.
meta Tag (Cont.)
HTML 5 & JavaScript 5
Some of the standard metadata names include
• author : The value must be a free-form string giving the
name of one of the page's authors.
• description : The value must be a free-form string that
describes the page.
• application-name : The value must be a short free-form
string giving the name of the Web application that the page
represents
• keywords : The value must be a set of comma-separated
tokens, each of which is a keyword relevant to the page.
HTML Video Tags
HTML 5 & JavaScript 6
• HTML5 video tag is used to display videos.
<video controls>
<source src=“movie.webm" type=‘ video/webm; codecs="vp8, vorbis“ '/>
<sourcesrc=“movie.mp4" type=‘ video/mp4; codecs="avc1.42E01E, mp4a.40.2“ '/>
</video>
HTML Audio Tags
HTML 5 & JavaScript 7
• HTML5 audio tag is used to display audio.
<audio>
<sourcesrc=“song.mp3" type=“audio/mpeg”/>
</audio>
ARIA Landmark Roles
HTML 5 & JavaScript 8
• ARIA (Accessible Rich Internet Application) landmark roles
help to identify regions of a page.
• Landmarks are inserted into the page using the role
attribute on an element that marks the section and the
value of the attribute is the name of the landmark.
ARIA Landmark Roles
HTML 5 & JavaScript 9
Role Description
banner A region that contains the prime heading or internal title of a page.
complementary Any section of the document that supports the main content, yet is separate and meaningful on its own.
contentinfo A region that contains information about the parent document such as copyrights and links to privacy statements.
form A region that represents a collection of form-associated elements
main Main content in a document.
navigation A collection of links suitable for use when navigating the document or related documents.
search The search tool of a Web document.
application A region declared as a web application
Checking HTML5 Document Structure and Semantic
HTML 5 & JavaScript 10
• Google Chrome Extension HTML5 Outliner – works only
with live pages
• https://gsnedders.html5.org/outliner/
• HeadingsMap for Firefox https://addons.mozilla.org/en-
US/firefox/addon/headingsmap/
• Using Google’s Structured Data Testing Tool
https://search.google.com/structured-data/testing-tool
HTML5 Local Storage
HTML 5 & JavaScript 11
• With local storage, web applications can store data locally within
the user's browser.
• HTML local storage provides two objects for storing data on the
client:
• window.localStorage - stores data with no expiration date
• window.sessionStorage - stores data for one session (data is
lost when the browser tab is closed)
– The localStorage Object The localStorage object stores the data
with no expiration date. The data will not be deleted when the
browser is closed, and will be available the next day, week, or
year.
HTML5 Local Storage
HTML 5 & JavaScript 12
Example of using local storage
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML=
localStorage.getItem("lastname");
// Remove
localStorage.removeItem("lastname");
The sessionStorage Object The sessionStorage object is equal to the
localStorage object, except that it stores the data for only one session.
The data is deleted when the user closes the specific browser tab.
HTML5 Geolocation API
HTML 5 & JavaScript 13
– The Geolocation API of HTML5 helps in identifying the user’s
location.
– A desktop browser generally uses WIFI or IP based positioning
techniques whereas a mobile browser uses cell triangulation,
GPS, A-GPS, WIFI based positioning techniques, etc. The
Geolocation API will use any one of these techniques to identify
the user’s location.
– The Geolocation API protects the user’s privacy by mandating,
that the user permission should be sought and obtained, before
sending the location information of the user to any website.
HTML5 geolocation API
HTML 5 & JavaScript 14
– Using HTML Geolocation
• The getCurrentPosition() method is used to get the user's
position.
• watchPosition() - Returns the current position of the user
and continues to return updated position as the user
moves (like the GPS in a car).
• clearWatch() - Stops the watchPosition() method.
Modernizr
HTML 5 & JavaScript 15
1. Modernizr is a tool for HTML5. It verifies the tags in HTML5.
2. Modernizr is a small JavaScript Library that detects the availability
of native implementations for HTML5 Features and CSS.
3. Modernizr provides an easy way to detect any new feature so that
you can take corresponding action.
4. Just load the Modernizr script at the head section of DOM
<script src="modernizr.min.js" type="text/javascript">
</script>
Points to Ponder
HTML 5 & JavaScript 16
• What is the main purpose of metatag?
• What is the use of HTML5 geolocation API ?
• What is modernizr?
Session – 8, Part B
HTML 5 & JavaScript 17
jQUERY
Agenda
HTML 5 & JavaScript 18
SL NO AGENDA TOPICS
1 Introduction to jQuery
2 Setting up jQuery
3 jQuery syntax & selector
4 jQuery DOM ready
5 jQuery example
6 Selecting Elements in jQuery
7 Attribute selector
8 Filtering elements
9 Handling Events
10 Various Event Types
Introduction to jQuery
HTML 5 & JavaScript 19
• jQuery is a fast, small, and feature-rich JavaScript library.
• jQuery is the most popular, and also the most extendable
library build on JavaScript
• Purpose of jQuery is to make it much easier to use JavaScript
on your website
• The jQuery library contains the following features:
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
Setting up jQuery
HTML 5 & JavaScript 20
• The best way to include jQuery is to include it from a CDN (ContentDistribution Network) like Google CDN or Microsoft CDN as shownbelow:
• Here we have included it from Google CDN
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
</head>
• Note: In case you are not connected to internet, you can downloadjQuery and keep it on your local server.
• Go to http://jquery.com/download/ and download the jQuery 2.xuncompressed development version.
jQuery Syntax & Selector
HTML 5 & JavaScript 21
• The jQuery syntax is tailor made for selecting HTMLelements and performing some action on the element(s).
• Basic syntax is:
– A $ sign to define/access jQuery
– A (selector) to "query (or find)" HTML elements
– A jQuery action() to be performed on the element(s)
Examples:
– $(this).hide() - hides the current element.
– $("p").hide() - hides all <p> elements.
– $(".test").hide() - hides all elements with class="test".
– $("#test").hide() - hides the element with id="test".
$(selector).action
DOM Ready
HTML 5 & JavaScript 22
• document ready handler.
$(document).ready(function() {
// all jQuery code goes here
});
• Pretty much everything you code in jQuery will be contained insideone of these.
• This accomplishes two things:
1. It ensures that the code does not run until the DOM is ready.This confirms that any elements being accessed are actually inexistence, so the script won’t return any errors.
2. It also ensures that your code is unobtrusive. That is, it’sseparated from content (XHTML) and presentation (CSS).
jQuery Example
HTML 5 & JavaScript 23
<head><script src = “jquery.js”></script>
</head>
<body><div id = “message-box”><Hello, Welcome to Acad Gild!<div><p class = “para”>Welcome to the section</p><script>
$(document).ready(function(){var ref = $(“#message-box”); ref_class = $(“.para””);var ref_tag = $(“h1””);alert(msg);
}); </script>
</body>
Selecting Elements in jQuery
HTML 5 & JavaScript 24
• The jQuery library allows you to select elements in your HTML by wrappingthem in $("") Selector Usage
$("div"); Selects all HTML div elements
$("#myElement"); Selects one HTML element with ID "myElement"
$(".myClass"); Selects HTML elements with class "myClass"
$("p#myElement"); Selects HTML paragraph element with ID "myElement"
$("ul li a.navigation"); Selects anchors with class "navigation" that are nested in list items
$("p > a"); Selects anchors that are direct children of paragraphs
$("input[type=text]"); Selects inputs that have specified type
$("a:first"); Selects the first anchor on the page
$("p:odd"); Selects all odd numbered paragraphs
$("li:first-child"); Selects each list item that's the first child in its list
$(":button"); Selects any button elements (inputs or buttons)
$(":radio"); Selects radio buttons
$(":checkbox"); Selects checkboxes
$(":checked"); Selects checkboxes or radio buttons that are selected
Attribute Selector
HTML 5 & JavaScript 25
• The [attribute] selector Selects each element with the specifiedattribute.
• To select all the tags with value as http://google.com we canwrite
$(“a[href='http://google.com']”)
• To select all link tags that have url value beginning withGoogle we use
$(“a[href^='google' ]”)
• To select all link tags that have end url value as com we use
$(“a[href$='google' ]”)
• To Select all tags link tags that have href attribute value use
$(“a[href ]”)
$("[attribute]“)
Filtering Elements
HTML 5 & JavaScript 26
• The three most basic filtering methods are first(), last() and
eq() which allow you to select a specific element based on its
position in a group of elements.
• Other filtering methods, like filter() and not() allow you to
select elements that match or do not match a certain criteria.
Example:
$(document).ready(function()
{
$("div p").first().css("background-color", "yellow");
});
Handling Events
HTML 5 & JavaScript 27
– jQuery provides a method .on() to respond to any event on theselected elements. This is called an event binding.
– The .on() method provides several useful features:
– Bind any event triggered on the selected elements to an eventhandler
– Bind multiple events to one event handler
– Bind multiple events and multiple handlers to the selectedelements
– Use details about the event in the event handler
– Pass data to the event handler for custom events
– Bind events to elements that will be rendered in the future
Basic Syntax/ /When any <p> tag is clicked, we expect to see '<p> was clicked' in the console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});
Events Types
HTML 5 & JavaScript 28
• Here are some common events:
– Mouse Events:
• Click
• Dblclick
• Mouseenter
• Mouseleave
– Keyboard events:
• Keypress
• Keydown
• Keyup
– Form Events:
• Submit
• Change
• Focus
• Blur
Points to Ponder
HTML 5 & JavaScript 29
• What is jQuery & its purpose?
• List some of the filtering methods.
• What is are different event types?