BTI220 notes – Tue Jul 16

Two topics today – nodes in the HTML DOM, and an introduction to CSS.

.

Working more with the DOM

You recently learned that all endpoints in the document object model are nodes, and there are different node types:

  • Element – an HTML element, e.g. pdivimg
  • Text – text content in an element
  • Attribute – for an element; e.g. the src attribute for the img element

.

All content in an HTML document becomes a node in the DOM. Including whitespace/separators.

All nodes (except for the root) have a parent node. A node can have zero or more child nodes (children). For example, several p elements inside a div container.

A node can also have zero or more siblings. For example, when several elements are in a container – they don’t need to have the same element name – a specific element node can have a next sibling, and previous sibling.

.

Node properties highlights

nodeName – name of the node (element = tag name, attribute = attribute name, text = always ‘#text’)

nodeType – type of the node (element = 1, attribute = 2, text = 3)

nodeValue – value of the node (element = undefined, attribute = the attribute itself, text = the text itself)

parentNode

childNodes – only elements have childNodes

firstChild, lastChild – navigation in the childNodes list

previousSibling, nextSibling – navigation in the parentNode’s childNodes list

attributes – for an element, returns the attributes list

.

Node methods highlights 

appendChild() – adds new node to the end of the target node’s childNodes list

replaceChild()

removeChild()

insertBefore()

hasChildNodes(), hasAttributes()

.

More study, on your own

On your own, work through the code examples in this article:

IBM Web Developer – Mastering Ajax, Part 5

While working through this article, make sure you have the reference documentation:

MDN – Node (interface) reference

MDN – Element (interface) reference

MDN – Text (interface) reference

Also… MDN – Document reference

.

A brief explanation of ‘interface’…

You will notice that in the above documentation, they use the word ‘interface’ when documenting Node, Element, and Text. What’s an interface?

In class-based object-oriented programming, an interface is a code module that defines structure and behaviours defined as methods, but the methods have not been implemented. A class can inherit from an interface, and then add code to implement the methods. (Finally, an instance of a class can be created, to represent a real-world object.

Consider the following example:

  • Perhaps you want to define an interface named “Vehicle”
  • The Vehicle interface includes properties (axles, e.g. 2, 3; engine, e.g. gas, diesel)
  • It can also include methods (e.g. Start, Shutdown)
  • Next, you can define a class named “Car” which inherits from “Vehicle”
  • The Car class already includes all the members it inherited from Vehicle, and more can be added
  • Finally, you can create an instance of Car (e.g. myCar, ford1, etc.)

.

An introduction to Cascading Style Sheets (CSS)

Created by Hakon Lie, who was working with Tim Berners-Lee in the early 1990s. Hakon is now Chief Technology Officer for the Opera browser maker.

The Cascading Style Sheets (CSS) technology enables the web programmer to affect the formatting and appearance of HTML documents. The way in which a programmer and designer can affect the document’s presentation is almost unlimited. To use CSS effectively, you must know about the document’s structure, the DOM.

CSS is a declarative language, and the language statements are known as rules. There are rules that affect layout and positioning, fonts, and visuals such as colours and images.

CSS rules can be placed in a separate source code file, and then linked to a document. Alternatively, CSS rules can be placed in the head of a document, or in a document element’s start tag.

The syntax used to describe CSS rules conforms to this format (when located in a separate source code file, or in the head of a document):

ruleName { rule1: value1; rule2: value2 }

The “ruleName” is known as a selector. It can be a document element name, a programmer-specified class name, or a programmer-specified unique identifier name. A rule can have a single selector, or it can have multiple, organized as and / or conditionals. The selector identifies the element(s) that will be styled.

Then, in curly braces (the declaration), we write one or more name:value pairs, separated by semi-colons.

.

More introductory discussion about selectors

Element name – e.g. p

Element id attribute – e.g. #main

Element state – e.g. :hover

CSS class – a ruleset that can be applied to specific instances of elements in an HTML document

.

Selector examples:

Selector Explanation
h1 Style for an element
h1, h2, h3 For any of these elements (“or”)
h1.className For an h1 element that is marked with the ‘className’ class (“and”)
(also known as a contextual selector)
.className For ANY element that is marked with the ‘className’ class (aka ‘generic class’)
#idName The single element that has the ‘idName’ id attribute
div p Style for a ‘p’ element that’s inside – nested – in a ‘div’ element
a:link
a:visited
a:hover
a:active
Element ‘a’ pseudo-classes
/* comment */ Comments for the reader/programmer
@media Rules for the viewing medium (screen, print, etc.)
* All elements (be careful!)

.

More discussion

Inheritance – inner elements inherit its parent element’s style

Cascading – rules cascade through child elements; a rule can be re-declared/overwitten

Default style sheet in a browser

Reset style sheet

Where to place rules – external; also internal, inline

External, linked in the <head> element – <link rel=stylesheet href=styles.css>

Block, inline elements

Box model

Introduction – styling text

.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: