O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
FRONTEND WEB DEVELOPMENT
FUNDAMENTALS
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 HTM...
meta tag
HTML 5 & JavaScript 4
• Main purpose of meta tag is to define document level
metadata.
• 4 attributes of meta tag...
meta Tag (Cont.)
HTML 5 & JavaScript 5
Some of the standard metadata names include
• author : The value must be a free-for...
HTML Video Tags
HTML 5 & JavaScript 6
• HTML5 video tag is used to display videos.
<video controls>
<source
src=“movie.web...
HTML Audio Tags
HTML 5 & JavaScript 7
• HTML5 audio tag is used to display audio.
<audio>
<source
src=“song.mp3" type=“aud...
ARIA Landmark Roles
HTML 5 & JavaScript 8
• ARIA (Accessible Rich Internet Application) landmark roles
help to identify re...
ARIA Landmark Roles
HTML 5 & JavaScript 9
Role Description
banner A region that contains the prime heading or internal tit...
Checking HTML5 Document Structure and Semantic
HTML 5 & JavaScript 10
• Google Chrome Extension HTML5 Outliner – works onl...
HTML5 Local Storage
HTML 5 & JavaScript 11
• With local storage, web applications can store data locally within
the user's...
HTML5 Local Storage
HTML 5 & JavaScript 12
Example of using local storage
// Store
localStorage.setItem("lastname", "Smith...
HTML5 Geolocation API
HTML 5 & JavaScript 13
– The Geolocation API of HTML5 helps in identifying the user’s
location.
– A ...
HTML5 geolocation API
HTML 5 & JavaScript 14
– Using HTML Geolocation
• The getCurrentPosition() method is used to get the...
Modernizr
HTML 5 & JavaScript 15
1. Modernizr is a tool for HTML5. It verifies the tags in HTML5.
2. Modernizr is a small ...
Points to Ponder
HTML 5 & JavaScript 16
• What is the main purpose of metatag?
• What is the use of HTML5 geolocation API ...
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
...
Introduction to jQuery
HTML 5 & JavaScript 19
• jQuery is a fast, small, and feature-rich JavaScript library.
• jQuery is ...
Setting up jQuery
HTML 5 & JavaScript 20
• The best way to include jQuery is to include it from a CDN (Content
Distributio...
jQuery Syntax & Selector
HTML 5 & JavaScript 21
• The jQuery syntax is tailor made for selecting HTML
elements and perform...
DOM Ready
HTML 5 & JavaScript 22
• document ready handler.
$(document).ready(function() {
// all jQuery code goes here
});...
jQuery Example
HTML 5 & JavaScript 23
<head>
<script src = “jquery.js”></script>
</head>
<body>
<div id = “message-box”><H...
Selecting Elements in jQuery
HTML 5 & JavaScript 24
• The jQuery library allows you to select elements in your HTML by wra...
Attribute Selector
HTML 5 & JavaScript 25
• The [attribute] selector Selects each element with the specified
attribute.
• ...
Filtering Elements
HTML 5 & JavaScript 26
• The three most basic filtering methods are first(), last() and
eq() which allo...
Handling Events
HTML 5 & JavaScript 27
– jQuery provides a method .on() to respond to any event on the
selected elements. ...
Events Types
HTML 5 & JavaScript 28
• Here are some common events:
– Mouse Events:
• Click
• Dblclick
• Mouseenter
• Mouse...
Points to Ponder
HTML 5 & JavaScript 29
• What is jQuery & its purpose?
• List some of the filtering methods.
• What is ar...
Próximos SlideShares
Carregando em…5
×

Understanding HTML5 and Java Script - Front End Development

243 visualizações

Publicada em

https://acadgild.com/web-development/frontend-web-development?utm_campaign=enrol-5dsCNhSQ5HI&utm_medium=VM&utm_source=youtube

Objectives:
• HTML5 Header
• HTML5 Footer
• HTML5 Navigation

What is Nesting Structure
• Structure is defined using sections
• All content lying inside the body element is part of a section
• Section in HTML5 can be nested
• Explicitly-defined sections are the content within body, section, article, aside, and nav tags.
• The heading elements (h1 to h6) define a new, implicit section

Checking Document Structure
• Resources to check the HTML5 document structure
• Chrome extension. HTML outliner – works only for online pages
• HTML5 Outliner: https://gsnedders.html5.org/outliner/ only checks using HTML5 outline
• Headings Map add-on for firefox. Shows outlines based on both HTML5 and old HTML outline

What are Figure and Figcaption?
• The figure element represents a unit of content That is self-contained.
• figure element is intended to markup diagrams, illustration, photos and code examples.
• It can have an optional caption which is given using figcaption

Points to ponder:
• How to set navigation links?
• How section limits are defined?
• What is figure element?

Types of HTML5 Lists
• Unordered List
• Ordered List
• Description List

Here is the list of topics covered in this video, kindly go through the entire video to learn more on topics covered: Emphasizing Text in HTML5, address element, mark element, Date and Time, Link relationships

For more updates on courses and tips follow us on:

Facebook: https://www.facebook.com/acadgild
Twitter: https://twitter.com/acadgild
LinkedIn: https://www.linkedin.com/company/acad...

Publicada em: Tecnologia
  • We called it "operation mind control" - as we discovered a simple mind game that makes a girl become obsessed with you. (Aand it works even if you're not her type or she's already dating someone else) Here's how we figured it out... ➤➤ http://ishbv.com/unlockher/pdf
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ▲▲▲ http://ishbv.com/rockhardx/pdf
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

Understanding HTML5 and Java Script - Front End Development

  1. 1. FRONTEND WEB DEVELOPMENT FUNDAMENTALS
  2. 2. Session – 8, Part A HTML5 & JavaScript
  3. 3. 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
  4. 4. 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.
  5. 5. 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.
  6. 6. 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“ '/> <source src=“movie.mp4" type=‘ video/mp4; codecs="avc1.42E01E, mp4a.40.2“ '/> </video>
  7. 7. HTML Audio Tags HTML 5 & JavaScript 7 • HTML5 audio tag is used to display audio. <audio> <source src=“song.mp3" type=“audio/mpeg”/> </audio>
  8. 8. 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.
  9. 9. 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
  10. 10. 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
  11. 11. 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.
  12. 12. 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.
  13. 13. 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.
  14. 14. 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.
  15. 15. 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>
  16. 16. 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?
  17. 17. Session – 8, Part B HTML 5 & JavaScript 17 jQUERY
  18. 18. 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
  19. 19. 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
  20. 20. Setting up jQuery HTML 5 & JavaScript 20 • The best way to include jQuery is to include it from a CDN (Content Distribution Network) like Google CDN or Microsoft CDN as shown below: • Here we have included it from Google CDN <head> <script src="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 download jQuery and keep it on your local server. • Go to http://jquery.com/download/ and download the jQuery 2.x uncompressed development version.
  21. 21. jQuery Syntax & Selector HTML 5 & JavaScript 21 • The jQuery syntax is tailor made for selecting HTML elements 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
  22. 22. 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 inside one 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 in existence, so the script won’t return any errors. 2. It also ensures that your code is unobtrusive. That is, it’s separated from content (XHTML) and presentation (CSS).
  23. 23. 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>
  24. 24. Selecting Elements in jQuery HTML 5 & JavaScript 24 • The jQuery library allows you to select elements in your HTML by wrapping them 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
  25. 25. Attribute Selector HTML 5 & JavaScript 25 • The [attribute] selector Selects each element with the specified attribute. • To select all the tags with value as http://google.com we can write $(“a[href='http://google.com']”) • To select all link tags that have url value beginning with Google 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]“)
  26. 26. 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"); });
  27. 27. Handling Events HTML 5 & JavaScript 27 – jQuery provides a method .on() to respond to any event on the selected elements. This is called an event binding. – The .on() method provides several useful features: – Bind any event triggered on the selected elements to an event handler – Bind multiple events to one event handler – Bind multiple events and multiple handlers to the selected elements – 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" ); });
  28. 28. 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
  29. 29. Points to Ponder HTML 5 & JavaScript 29 • What is jQuery & its purpose? • List some of the filtering methods. • What is are different event types?

×