1. DOM, Content Management Systems, Drupal, Object- Oriented Design Week 8 INFM 603

2. Announcements http://teamtreehouse.com/ http://goo.gl/

3. Agenda DOM Content Management Systems Drupal Introduction Object-Oriented Design/Programming

4. DOM (Document Object Model) DOM  representation of the elements of a web page (e.g., headings, lists, paragraphs, styles, etc.) used by a JavaScript program to manipulate web page elements DOM represents elements of a web page as a tree structure consisting of nodes (next slide)

5. Example DOM for HTML File document headbody titlep html Traveling Road Less Traveled id DOM Example Attribute Node Element Node Text Node DOM Example Traveling the road less traveled.

6. DOM (Document Object Model) To access any element of your web page you could traverse the tree –Move up in the DOM tree element1 = element2.parentNode; –Move down in the DOM tree list = element1.childNodes Easier approach: –document.getElementById function –document.getElementsByTagName function Example: AverageComputationMVC.html You can use firebug (Firefox add-on) to browse the DOM You can also use Chrome’s Developer Tools to browse the DOM

7. Getting to DOM Elements

8. innerHTML property Property defining: –HTML code –Text occurring between the opening and closing tags of the element Allows you to modify/define HTML content Example: GetContent.html Example: ModifyContent.html –What happens if you keep selecting the Modify button?

9. Content Management Systems (CMS) Content Management Systems –Applications that allow you to create content without having to write code You can build a complete web site without writing code –Allows you to give users permission to post, edit, add/delete content on a web site (makes it a content management system) –Popular for blog creation Systems –Wordpress (http://wordpress.org/) –Drupal (http://drupal.org/)

10. Drupal Open source Site: http://drupal.org/http://drupal.org/ What can you do? –Modify pages layout –Add/remove pages –Hide content and pages from users –Allow users to choose their own layouts –Add forums, poll, blogs Drupal comes with basic modules Web developers have created thousands of modules –Some allow you to integrate facebook into your site –http://drupal.org/project/moduleshttp://drupal.org/project/modules

11. Drupal Sites developed with drupal –http://www.drupalmuseum.com/http://www.drupalmuseum.com/ Installation (local machine) –Install Apache, MySQL, PHP and download Drupal from drupal.org –You can use DAMP (http://aqcuia.com/downloads)http://aqcuia.com/downloads Installs Apache, MySQL, PHP and Drupal Using Drupal Gardens –http://www.drupalgardens.com/http://www.drupalgardens.com/ –Commercial website with Drupal preinstalled –You have same administration menus and controls –Chapter 13 of Drupal for Dummies takes you to the process

12. Object-Oriented Design Why using object-oriented design? –A way of thinking about programming Objects are nouns, methods are verbs –A form of defensive programming Hides private variables and methods Allows you to make behaviors explicit –Represent complex data structures Airplanes have pilots, fuel, and destinations

13. Object-Oriented Design Key Ideas Protect the programmer from themselves –Model actions and attributes together Object  encapsulation of methods and data structures Class  “Blueprint/recipe” for an object Method  name used for a function in an object- oriented environment Constructor  initializes the object

14. Object Instantiation var n = new Array(5); –Creates an Array object using the Array class constructor (and specifying 5 elements) var s1 = new Student(13205, “George”); –Creates a Student object using the Student class constructor (and specifying the student id and name)

15. Formalizing Object Interfaces status = student.setHeightInches(74); –Invokes the setHeightInches() method for the object that is stored in the variable student and passes it 74 as a parameter; status=true indicates success feet = student.getHeightFeet(); –Invokes the getHeightFeet() method for the object that is stored in the variable student and then sets the variable feet to hold that result (in this case, 6); feet<0 indicates failure

16. Class Definition (private variable) function Student(studentID, name) { var totalInches = -1; // private variable // private method function inchesToFeet(i) { return Math.floor(i/12); } // public methods this.setHeightInches = function(n) { if ((n>0) && (n<100)) { totalInches = n; return true; } else { return false; } this.getHeightFeet = function() { if (totalInches>0) { return inchesToFeet(totalInches); } else { return -1; } var student = new Student(13205, "George"); alert(student.setHeightInches(74)); alert(student.getHeightFeet()); alert(student.totalInches);

17. Class Definition (public variable) function Student(studentID, name) { this.totalInches = -1; // public variable // private method function inchesToFeet(i) { return Math.floor(i/12); } // public methods this.setHeightInches = function(n) { if ((n>0) && (n<100)) { this.totalInches = n; return true; } else { return false; } this.getHeightFeet = function() { if (this.totalInches>0) { return inchesToFeet(this.totalInches); } else { return -1; } var student = new Student(13205, "George"); alert(student.setHeightInches(74)); alert(student.getHeightFeet()); alert(student.totalInches);

18. function Student(studentID, name) { var inches = -1; // private variable var feet = -1; // private variable // private method function inchesToFeet(i) { return Math.floor(i/12); } // public methods this.setHeightInches = function(n) { if ((n>0) && (n<100)) { feet = inchesToFeet(n); inches = n-(feet*12); return true; } else { return false; } this.getHeightFeet = function() { if ((feet>0) || (inches>0)) { return feet; } else { return -1; } var student = new Student(13205, "George"); alert(student.setHeightInches(74)); alert(student.getHeightFeet()); alert(student.feet); Alternate Method Definition (private variables)

19. String Objects (Conceptually) an array of Unicode characters with some interfaces –var s = “Mr. Spock” –s.toLowerCase() is “mr. spock” –s.indexOf(“k”) is 8 –s.split(“ ”) is [“Mr.”, “Spock”] –s.link(http://bit.ly.CUjV) is Mr. Spock http://bit.ly.CUjV –s + “Captain Kirk” is “Mr. SpockCaptainKirk”

20. Some Handy Methods document –document.writeln(“Test!”); –var e=document.getElementById(“goButton”); –document.cookie=“message=saveme”; –var c=document.cookie.split(“=“)[1]; window –window.prompt(“Input please”); –var w=window.open(“”, “New Window”, “”);

21. Recursion A function can call itself –Local variables are different each time Classical example: factorial computation Every invocation of the function must end –There must be a path that ends the recursion –That path must eventually be taken –The usual way to do this is an initial if statement

22. Binary Search with Recursion function binarySearch(theArray, key, low, high) { var middle; if (low >= high) { // Safety check! if (key == theArray[low]) { return low; } else { return -1; } } else { middle = Math.floor((low + high) / 2); // Explicit! if (key <= theArray[middle]) { // Equality! return binarySearch(theArray, key, low, middle); } else { return binarySearch(theArray, key, middle + 1, high); }