DOM

1. DOM

2. Content Consider a book. It is a string of characters. The characters are grouped in words and the words are grouped in sentences 2 • Chapter 1 Variation Under Domestication • Causes of Variability Effects of Habit Correlation of Growth Inheritance Character of Domestic Varieties Difficulty of distinguishing between Varieties and Species Origin of Domestic Varieties from one or more Species Domestic pigeons, their Differences and Origin Principle of Selection anciently followed, its Effects Methodical and Unconscious Selection Unknown Origin of our Domestic Productions Circumstances favourable to Man's power of Selection When we look to the individuals of the same variety or sub-variety of our older cultivated plants and animals, one of the first points which strikes us, is, that they generally differ much more from each other, than do the individuals of any one species or variety in a state of nature. When we reflect on the vast diversity of the plants and animals which have been cultivated, and which have varied during all ages under the most different climates and treatment, I think we are driven to conclude that this greater variability is simply due to our domestic productions having been raised under conditions of life not so uniform as, and somewhat different from, those to which the parent-species have been exposed under nature. There is, also, I think, some probability in the view propounded by Andrew Knight, that this variability may be partly connected with excess of food. It seems pretty clear that organic beings must be exposed during several generations to the new conditions of life to cause any appreciable amount of variation; and that when the organisation has once begun to vary, it generally continues to vary for many generations. No case is on record of a variable being ceasing to be variable under cultivation. Our oldest cultivated plants, such as wheat, still often yield new varieties: our oldest domesticated animals are still capable of rapid improvement or modification. It has been disputed at what period of time the causes of variability, whatever they may be, generally act; whether during the early or late period of development of the embryo, or at the instant of conception. Geoffroy St Hilaire's experiments show that unnatural treatment of the embryo causes monstrosities; and monstrosities cannot be separated 2 DOM

3. When it is published a layout is created which reflects the efforts of the type setter to make the structure of the information clear. Here is an example of making the book available as a web page 3 2 DOM

4. Here is an alternative – layout. More or less successful? 4 2 DOM

5. The layout will also reflect the publishers wish to establish a distinctive look. 5 2 DOM

6. The layout will also reflect the publishers wish to establish a distinctive look. Here the precis at the top of the chapter has been removed. Why? Is this a good idea? 6 2 DOM

7. Side by side comparison of two similar ideas, but actually very different effects. Which is better? 7 2 DOM

8. Markup So the author provided the text, but it is the publisher who decided how the book as laid out. The layout was communicated to the typesetter via the “markup” The typesetter could layout the pages in accordance with the house style. Going from hardback to paperback, in principle, there is no need to change the content (obviously) nor the markup. All that happens is the markup is interpreted in a different way. When we produce web pages they are more flexible, easier to maintain and easier to prepare for different purposes if we separate the way content and the structure from the way we are going to display that content. 8 The paragraph symbol, which you get in microsoft word when you are reviewing a document ¶ is a typesettter’smarkup symbol. 2 DOM

9. html* For the web we create a file to hold the content and to document the structure – but not the layout. The html file A typical html file looks like this The browser then makes a decision on how to display <h2> - the second level heavy. Font size, style, colour,… 9 <!DOCTYPE html> <html> <head> <title>Page information</title> </head> <body> Page contents – including markup describing the role of the text <h2>Variation under domestication</h2> </body> </html> 2 DOM

10. presentation CSS3 – allows you to separate the layout instructions from the content and structure, Good practice everywhere Vital for mobile development (It will be something on which I judge the quality of your assignment) A number of different style sheets can be written for use in different contexts. Can also make style sheets for visual impairments – colour blind – or even to create Braille or for a screen reader. 10 2 DOM

11. CSS A CSS file is just a set of css instructions h2 {font-size:16px; font-family:verdana;} Property:value pairs 11 value selector property 2 DOM

12. CSS <!DOCTYPE html> <html> <head> <title>Page information</title> <style> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue; font-size:20pt} p {margin-left:50px;} </style> </head> <body> Page contents – including markup describing the role of the text <h2>Variation under domestication</h2> </body> </html> 12 CSS in the html file – what you should never do 1 Introduction 99Notes

13. External CSS file Themarkup tags describe the role of different bits of text in the file. Tags come in pairs which delimit their start and <h1>This is a top level header </h1> The tags do not define: how the page is laid out or the look of the text. That is determined by the browser unless you describe what you want with a style sheet. The style sheet should be in separate file href gives the address of the file. This one snazzy.css is in the same directory as the html file. It may be in another directory, in which case you must give the directory path. It may even be on another machine when you give the url of the file. 13 <head> <title>Page of course Information</title> <link rel=“stylesheet” href=“snazzy.css” type = “text/css” /> </head> 2 DOM

14. Imagine being asked to draw out a web page given the html. In order to create the web page you would need to go through the whole file. A web browser needs to do the same thing. Identifying elements – sub-elements and content. It builds a suitable representation in memory. Parsing the file 14 <html> <head> Page information </head> <body> Page contents – including markup describing the role of the text <h2>Variation under domestication</h2> </body> </html> Need to produce a more complex file 2 DOM

15. There are many ways of representing a web page in memory. Early web browsers did it in many ways. Once there is a model in memory it is possible to manipulate it in interesting ways. It provides a structure for interactive web pages. All browsers should model the web page in the same way. If in addition they provide an API (Application Programmer Interface) it becomes easy for a web creator to make an “exciting web page” which works on all browsers. This is the DOM Document Object Model Not unique – but standard Building a model 15 2 DOM

16. Content Suppose you are looking for a file Or Trying to find somewhere to store a file You open windows explorer Apologies to people who use Macs Contents of the directory 2 DOM

17. Content Open the local disk directory by left clicking. Contents of the directory Just the directories 2 DOM

18. Content Open the local disk directory by left clicking. Contents of the directory We can continue to dig down through the directories 2 DOM

19. tree This way of organising a data is referred to as a tree And to mix metaphors the higher directories are called the parents. The ones which spring from a parent are children. And children of the same parents are siblings. 2 DOM

20. Walking a tree How would you search all the nodes of the tree? 2 DOM

21. Walking a tree Start at the top. Remembering that although we don’t show files they are accessible via the directories. 2 DOM

22. Walking a tree Top is searched so we go onto the first child directory. 2 DOM

23. Walking a tree What next? 2 DOM

24. Walking a tree What next? 2 DOM

25. Walking a tree Search siblings or search children 2 DOM

26. Walking a tree And then? 2 DOM

27. Walking a tree Go to the first child of the first child and search the “generation”. Back track up the generations until you find a searched directory with siblings 2 DOM

28. Walking a tree This is called breadth first This is called depth first. 2 DOM

29. The point? The tree structure has no correspondence to the way the files are set out on disk. It is a structure built by the OS to allow it (and you) to access files. It also makes the structure accessible to php as I hope you recall. You can walk a tree programmatically. (Not easy) getcwd opendir readdir dir PHP 2 DOM

30. DOM tree Go to a web site (amazon.co.uk) (using firefox) On the tools menu choose Toggle Tools And then the Inspector tab 2 DOM

31. DOM tree You find a display which is much like a windows directory listing. With the same arrows which can “drill down” into the structure. 2 DOM

32. DOM tree In order to build a page the computer must read more than just the next token. It has to read it all and create a structure it can use as it builds the web page <table> <tr> <td>some text</td> <td>some more text</td> <td>another column</td> </tr> <tr> <td>some more text</td> <td>some text</td> <td>another column of text</td> </tr> </table> A table needs to determine the widest entry for each column and row before it starts to build the table. . 2 DOM

33. There are many ways of representing a web page in memory. Early web browsers did it in many ways. Once there is a model in memory it is possible to manipulate it in interesting ways. It provides a structure for interactive web pages. W3C said all browsers should model the web page in the same way. If in addition they provide an API (Application Programmer Interface) it becomes easy for a web creator to make an “exciting web page” which works on all browsers. This is the DOM Document Object Model Not unique – but standard Building a model 2 DOM

34. "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.“ It is a tree structure. The elements of the page are represented by nodes and it is possible to access these nodes. Nodes have a number of properties which can be accessed by standard calls. DOM root nodes 2 DOM

35. Alternate Type in a string and be taken directly to the directory Search string 2 DOM