arnaud.nauwynck@gmail.comIntroduction to HTML / JavaScript / DOMThis ro-Html-JSDOM.pdf
Agenda Introduction to Client-Side Web Technologies–HTML Elements / Custom Elements–CSS–JavaScript The DOM how JavaScript interact JavaScript framework(s)–AngularJS, binding principles
21 Billions.Rank#1 : w3scools (not Wikipedia?)
HyperText Markup Langage
1989 : HTTP HTMLTim Berners-Lee
HyperText Markup Language (HTML)is the standard markup languagefor creating web pages and web applications.
With Cascading Style Sheets (CSS), and JavaScript,it forms a triad of cornerstone technologiesfor the World Wide WebWWWW3C Technologies HTMLCSSJavaScript
Client(Html CSS JS) –Protocol(Http) - Server(*)Client-SideServer-Sideexpose IP TCP HTTP portHTMLCSSHTTP Request (GET,POST,.) URLheadersbodyJavaScript80808443HTTP Response (20x,30x,40x,50x)headersbodyWebSocket events
Client-Side Browser Security https://site1Cookie site3.comCookie site2.comCookie / LocalStorage site1.com
Site Navigation Isolation Example on Chrome:1 separate Processper navigation Tab !!!Shared processes(chrome launcher)
On Client-Side ONLYHtml / CSS / (Limited) JavaScriptAmazing WebGL, Canvas, SVG renderingusing video card !!W3C API forMouse (swipe.)ScrollbarKeyBoardMicro.HTMLCSSJavaScriptJS limited to 2 Threadsand Few Connectionsper siteJavaScript access toglobal “Window” (current frame)NO access to C:\*, D:\*only “Save As” to D:\Downloads OpenFileDialog for upload
1/ HTML XML elements for Hyper Textcontains Data1/ HTML2/ CSS3/ JavaScript
Element tagName . /tagName
elt attribute1 ”value1” attribute2 ./
Standard W3c TagsBasic StructureHyper Link. h1 Header 1 /h1 h2 . /h2 h3 . h3 h4 . /h4 p paragraph /p Text Formatting br/ pre - pre-formatted b - Bold text strong - Important text i - Italic text em - Emphasized text mark - Marked text small - Small text del - Deleted text ins - Inserted text sub - Subscript text sup - Superscript text A href ”.” img src ”.” video script iframe Other. table tr td ul li . .
Html 1.0 a simple MarkupLangage for Text many specific tags for text formatting
Only 2 families of tag layout: Blocks & Inline technically no “needs” to add morethan div & span with CSS & JS everywhere
div and span . div blocks span inline
Html soup of div div div (example: gmail)
Code quality with Only technical div & span ?Need more semantic tags for web applications
CustomElementDefine your own application specific tags: your-custom-tag your-menu your-view your-object
Eric Bidelman's components/customelements/
Example Demo :http://html5-demos.appspot.com/hangouts
Custom Elt
Custom Elements .
WebComponent Simplify CustomElementGoals :1) simplify Javascript .replace by Html dom-module template 2) supports old browser via PolyFill3) use Template ShadowDom
WebComponents 4 w3c specs CustomElement Import Template ShadowDom
www.polymer-project.org Google Library of WebComponents
Polymer exampleFile “my-element.html”
Polymer custom elements catalog
Polymer Core Elements : Fe (Iron)
Iron example iron-swipeable-container container/blob/master/demo/index.html
Material Design : Md (Paper)
Md Paper Example
1/ HTML2/ CSS2/ CSS size,border,colors,fontscontains Style3/ JavaScript
style ” inlined CSSproperty:value;”
Styles using CSS files
Internal / External CSS
Style with class ”.”
1/ HTML2/ CSS3/ JavaScript3/ Scriptcontains actions,events,behavior
Html / CSS / JavaScript InteractionsNew Add Remove Setelement/attr( DOM )Affectrenderer style . /style attr style ”” link rel "stylesheet"1/ HTML2/ CSSLink script onDocumentLoadonClickonXX events3/ JavaScriptCss updateAdd/remove class attribute( DOM )
DOM Document Object ract class)URL, .ElementBodyHeader H1 p Attribute0.*attr div TextComment fe-* , paper-* , span your-custom-element A href
DOM Class Hierarchypublic abstract class Node {private Node parent;.public Node getParent() { . }}public abstract class Element extends Node{private List Node childList;private List Attribute attributes;.}
DOM Reference
DOM ElementsProperties,Method,Events
DOM Elements Reference
Typical JS Code to Find & Edit ement.appendChild()value element.attributeelement.attribute valueElement.innerHTML.
JQuery for Portable/ConciseDOM Manipulation?Make DOM manipulation,event,.“simpler” .
Same TodoItem exampleusing JQuery
Jquery () : wrapper forDocument.getElementBy.(.)Code is smaller ?by including “ script src ”jquery.min.js” /script Well . If you use only 1 method of Jquery.You could have use “jqueryLight”or evenfunction my (id) {return Document.getElementById(id);}
Jquery Risk Script Code Injection!Example in previous example :append(“ li ” text “ /li ”) text can contain html script!!
Jquery vs DOMNaive retrial after google it same pb !!This one works .Compare with Explicit DOM findById
Jquery Bashing in 2016 . () code not simple ! not “typed”JQuery is a very low-level framework for writing mostly imperative codeOr applying pluginsNo easy bi-direction BindingBetter use Richer Framework, like AngularJSBrowser Portability no more an issue in 2016?
Same TodoItem exampleusing AngularJS-1.x
DOM vs Jquery vs AngularJS AngularJS code 25 lines / jquery 21 lines AngularJS code much more readableImperative codeDeclarative codeDirect DOM manipulationMVC : Model-View-ControllerNO Binding, EventsBi-Directionnal Bindingevents history required(no events required, only Model)
Much more to say on AngularMVC Binding. very handy writing quick web app not very efficient having 1000 objects in scope .digest() loop is horrible Angular 2.x is complete rewrite of 1.x .still not very clean code (digest zone?)Model should be controlled. and fire chg EventReactJs, Aurelia, . JS Word “1 fwk a day, the doctor away”?
Conclusion Only a “very short” introduction to Html-Js-Dom I Hope you feel–“I Did not know all this before”–“I am happy I have learned something”–“I want to learn more”This ro-Html-JSDOM.pdf
DOM vs Jquery vs AngularJS AngularJS code 25 lines / jquery 21 lines AngularJS code much more readable Declarative code MVC : Model-View-Controller Bi-Directionnal Binding (no events required, only Model) Imperative code Direct DO
Intro to HTML / CSS Rachel Starry UrsinusCollege, Tech Play Day May 31, 2018 * HTML Hyper Text Markup Language * HTML is the standard language for creating web pages. What is HTML? HTML Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 HTML5 2014 * "HyperText" uses hyperlinks: these allow you
JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:
JavaScript Manual for LCCS Teachers 13 Client-side JavaScript vs. server-side JavaScript For many years JavaScript was a client-side scripting language. This was because JavaScript programs could only be run from inside web browsers which were installed on client machines. Because of the fact that JavaScript code can run on client devices it means
- The Spark web app framework . Yahoo JavaScript PHP Amazon.com JavaScript Java, C , Perl Wikipedia.org JavaScript PHP, Hack Twitter.com JavaScript C , Java, Scala, Ruby Bing JavaScript ASP.net eBay.com JavaScript Java, JavaScript, Scala . Note the MVC architecture
History of HTML / CSS HTML 1.0 - 1993 - The Good Old Days - life was simple HTML 2.0 - 1995 - Some interesting layout features - abused CSS 1 - 1996 HTML 3.2 - 1997 HTML 4.0 - 1997 - Layout moving toward CSS CSS Level 2 - 1998 HTML 4.01 - 1999 - What we use today HTML has evolved a *lot* over the years - as computers and networks have gotten faster.
History of HTML / CSS HTML 1.0 - 1993 - The Good Old Days - life was simple HTML 2.0 - 1995 - Some interesting layout features - abused CSS 1 - 1996 HTML 3.2 - 1997 HTML 4.0 - 1997 - Layout moving toward CSS CSS Level 2 - 1998 HTML 4.01 - 1999 - What we use today HTML has evolved a *lot* over the years - as computers and networks have gotten faster.
HTML i About the Tutorial HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999.
JavaScript directly within the HTML file. We can also include more than one script tag and can include a mix of internal JavaScript and external JavaScript files. This will be useful, for example, if we have some JavaScript that is appropriate for many of our webpages and then some JavaScript that is specific to one page. Function Definition