Play with DOM

The Document Object Model

The DOM, in short, is an in-memory object representing an HTML document. There is a good introduction in MDN.

What is DOM nodes

dom tree

You can view a HTML tags as a nodes. But actually, it has different names on it:

  • Element represents HTML tags.
  • Text nodes represents text or white space
  • Comments represents HTML comments.

So HTML is an element, head, body is an element nodes, too.

Understand Javascript callbacks from ruby block

Chunk of code

If you are the n00b like me, it should be a hard time to understand the callbacks in JavaScript or block in Ruby. But the two of them, in some way, might share some idea to deal with the problems.


For example, if you have some ‘chunk of code’ that you want to executes later. How would you do?

In the JavaScript, you put it into function foo (){...} and if you want to execute it. You just pass it into the function as an argument. That’s it.

Things I learned when studying Sinatra


HTTP is a protocol that is allowed you to communicate with other people(computer) through this protocol. Therefore, you have to obey some rules. And every computer has an ip address , but it is difficult for us to remember. Here comes DNS , domain naming system. You can built your own DNS server or use your internet supplier or Google’s server. It can help you to transform naming address to ip address then the computer know where to go. for example, you type in, then it will sent to DNS server to identify where the ip address is.

client and server

All websites are built on the server. every computer can be a server. We use the browser to send request to server then it send back to us wiht some response. All the response may includes files, images, web pages. There are name with resources. request needs method and path. header and body are optional. response with status code is required. header and body are optional.


This is some code from my assessment. This is where I make a mistake. So I put it here as a reminder.

  class Dog
    attr_accessor :name

  class Something
    def bob 

  class Person < Something
    attr_accessor :name

    def initialize(n)
      @name = n

    def Person.whatever;end

    def change_name(n)
      bob().name = n

  bob ='bob')

The problem is in change_name, we call , what if we call ? It dose not work, because bob is a local variable deifine on the outer area of the class. In ruby block is different from method, we can use outer variable in block, but we can not use outer variable directly in method. We have to pass into method as an arguement.

So can not work here. But if we inheritate from Something, there is a magic way happens to the bob. At first, I guesss it is some kine of variable(local variable, instance variable), but I forget there is a ., and Inheritance in ruby only pass methods to subclass. So bob. here, actually is bob(). the little dot is method invocation!!! we can not get variables to call. There is no variable then “dot” something.

They are some kind of easy but important mistakes that I make today:

  1. local variable can not pass from outer area to inner area of method, unless you pass it by the arguement
  2. dot is method invocation
  3. You can pass methods from the superclass to the subclass in inheretence.
Understand Object-oriented program in Ruby

what is OOP?

class and object

blueprint/molds built from it. object can keep the sam behaviors and different states from the class. We can create an object from initialize method while we call class method new

  • encapsulation: hiding pieces of functionality and making it unavailable to the rest of code base.
  • polymorphism
  class Dog
    def initialize(name, age)
      @name = name
      @age = age

  shelly ="shelly", 5)