understanding html5 and java script - front end development

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


• 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.)


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


• 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


• HTML5 audio tag is used to display audio.

<audio>

<sourcesrc=“song.mp3" type=“audio/mpeg”/>

</audio>

ARIA Landmark Roles


• 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


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


• 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

https://gsnedders.html5.org/outliner/

https://addons.mozilla.org/en-US/firefox/addon/headingsmap/

https://search.google.com/structured-data/testing-tool

HTML5 Local Storage


• 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


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


– 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


– 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


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


• What is the main purpose of metatag?

• What is the use of HTML5 geolocation API ?

• What is modernizr?

Session – 8, Part B


jQUERY

Agenda


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


• 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


• 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.

http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/

http://jquery.com/download/

jQuery Syntax & Selector


• 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


• 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


<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


• 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


• 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]“)

http://google.com/

Filtering Elements


• 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


– 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


• 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


• What is jQuery & its purpose?

• List some of the filtering methods.

• What is are different event types?

understanding html5 and java script - front end development

Technology