Advanced Topics in Concurrency and Reactive Programming: HTML, CSS and DOM Trees Majeed Kassis
HTML, CSS, Javascript The three layers of web design HTML CSS Structure, Style, Behavior HTML Hyper-Text Markup Language A set of ‘markup’ tags These tags group and describe web-page content CSS Javascript
Core HTML Tags <!DOCTYPE html> <html></html> The doctype is not actually a tag, but a declaration, telling the browser what kind of html you are using. This declares document as HTML5 <html></html> Defines the beginning and end of the HTML document <head></head> Contains special elements that instruct the browser where to find information such as location of (CSS) stylesheets, and meta info. Basically anything not page contents. <body></body> element contains the document content All of this is shown inside the browser window
HTML Elements Basic HTML structure: <tag>Content</tag> HTML tags can be nested. Each tag can contain inside it another tag <tag> denotes the beginning of the tag scope and </tag> ends the tag scope. Example: <h1>Main Headline</h1>
Essential HTML Tags
HTML Attributes Attributes add additional information for their tag Example: <html lang=”en”></html> Attributes have the following format: name=”value”. Single or double quotes are possible! Three essential attributes: <link rel=”stylesheet” type-”text/css” href=”stylesheet/styles.css”> This defines the CSS file to be used <img src=”images/image.jpg” alt=”Sam”> Allows embedding an image into HTML page <a href=”http://colum.edu”>My school</a> Hyperlinks!
CSS: Cascading Style Sheets A set of rules defining how an html element will be “presented” in the browser. These rules are targeted to specific elements in the html document. Cascading: A set of rules for resolving conflicts with multiple CSS rules applied to the same elements. If there are two rules defining the color of h1 elements the rule that comes last in the cascade order will “trump” the other Cascade importance from low to high: Browser Default Stylesheet Linked (External) Stylesheet Embedded (Internal) Stylesheet Inline Styles Inline Style: https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_inline Internal Style: https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_internal External Style: https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_external
CSS Examples: Inline/Internal <h1 style="color:blue;margin-left:30px;">This is a heading</h1> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head>
CSS Example: External
Things controlled by CSS colors type type size backgrounds spacing sizes borders positions (layout)
CSS Syntax Every style is defined by a selector and a declaration. The declaration contains at least one property/value pair Together they are called a Rule. Syntax: selector,…,selector {declaration; …; declaration;} where {declaration} is {property: value;} Examples: body {font-family: Arial, Helvetica} p {color: #666666} h1 {font-size: 24px} a {color: blue} The selector associates the CSS rule with the HTML element.
Types of selectors HTML Element: The CSS targets an html element by its name. body {declaration} p {declaration} h1 {declaration} ul {declaration} ID: (Unique) An ID is an html attribute that is added to the HTML tag. HTML: <img id=”logo” src=”” alt=””> CSS: #logo {declaration} Class: (Not unique) A class is an html attribute that is added to html tag. HTML: <ul class=”ingredients”> CSS: .ingredients {declaration}
Document Object Model The DOM is a standard object model and programming interface for HTML DOM provides a structured representation of the document as a tree. It defines: The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements The browser builds a model of the web page (the document) All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects Those objects are accessible via scripting languages in browsers Can be done via Javascript.
The DOM Tree
HTML Example <html> <head> <title>Sample DOM Document</title> </head> <body> <h1>An HTML Document</h1> <p>This is a <i>simple</i> document. </body> </html> The HTML code above is displayed using the browser in a readable manner.
DOM Programming Interface HTML DOM methods are actions you can perform This is done on HTML Elements HTML DOM properties are values of these HTML Elements These values can be set or changed. The programming interface is the properties and methods of each object. A property is a value that can retrieved or changed. A method is an action that is applied on the DOM Tree. Example: add or deleting an HTML element
Types of DOM nodes Element nodes Text nodes This is a paragraph of text with a <a href="/path/page.html">link in it</a>. </p> Element nodes Each node is an HTML tag Nodes can have children and attributes Text nodes Text in a block element Attribute nodes (attribute/value pair) Text/attributes are children in an element node Cannot have children or attributes Not usually shown when drawing the DOM tree
Traversing the DOM tree name(s) description firstChild, lastChild start/end of this node's list of children childNodes array of all this node's children nextSibling, previousSibling neighboring nodes with the same parent parentNode the element that contains this node https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
DOM Tree Traversal Example <p id="foo">This is a paragraph of text with a <a href="/path/to/another/page.html">link</a>.</p> HTML
Finding HTML Elements Done by using getElementBy<?>() methods. Used to access/modify an HTML element. Finding HTML elements by id Example: <p id=“intro"></p> Syntax: var element = document.getElementById("intro"); Finding HTML elements by tag name Example: <p>Hi</p> Syntax: var elements = document.getElementsByTagName("p"); Finding HTML elements by class name Example: <p class=“intro”>Hi</p> Syntax: var elements = document.getElementsByClassName("intro");
innerHTML Example <!DOCTYPE html> <html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML = "New text!"; </script> <p>The paragraph above was changed by a script.</p> </body> </html> https://www.w3schools.com/js/tryit.asp?filename=tryjs_change_innerhtml
Modifying HTML Elements element.innerHTML = new html content Change the inner HTML of an element var x = element.innerHTML Used to retrieve the inner HTML of an element element.attribute = new value Change the attribute value of an HTML element attribute var value = element.attribute Used to retrieve the value of an HTML element attribute. element.setAttribute(attribute, value) Change attribute value of an HTML element
Modifying the DOM Tree name description appendChild(node) places given node at end of this node's child list insertBefore(new, old) places the given new node in this node's child list just before old child removeChild(node) removes given node from this node's child list replaceChild(new, old) replaces given child with new node
DOM Events A long list of possible events that can be used https://www.w3.org/TR/DOM-Level-3-Core/introduction.html#ID- Conformance Examples of HTML events: When a user clicks the mouse When a web page has loaded When an image has been loaded When the mouse moves over an element When an input field is changed When an HTML form is submitted When a user strokes a key
onclick Event <!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>
React.js A JavaScript library for building user interfaces Built by Facebook in 2013 Resides in the View layer only. Its output generates an HTML file as a result. Handles HTML elements as reusable Components Build Components, not Templates. Benefits: Strongly enforcing UI and workflow patterns UI code is readable and maintainable Componentized UI is the future of web development!
How does React.js work? Programmers design components for each part of the web page Encapsulated components that manage their own state Components can be composed to make complex Uis Components can be replaced with other components to make dynamic websites. React will update and render just the needed components when the data of these components change React uses Virtual DOM Tree Each time something changes a new version is created Both versions are ‘diff’ed to find the differences between them. A minimal set of changes are applied to the DOM tree.
Creating a React.js Component var Header = React.createClass({ render: function() { return ( <h1>Employee Directory</h1> ); } }); Components are created using Reactor.createClass() render() function is implemented Which returns the implemented UI
Maintaining Internal State