Posts Tagged ‘javascript’

I’ve noticed students feel learning object oriented programming appears tough when first exposed to structured development practices. To add insult to injury, boring example relationships like “people” and “students” and even types of fruit and their plant family relationships are used to show how objects relate to each other. I’m more in the camp believing learning “scary” new concepts should be fun, even memorable. People tend to remember good jokes, and forget dull experiences. I experimented with an approach to OOP. I used the old children’s storybook, Everybody POOPs.

We’re all human beings. All Humans eat and drink, and everybody poops. It takes a system to get to the pooping stage. We also fart. Adults fart and say excuse me!, while children fart and giggle. They’re still Human. Hopefully you can see how these related entities can be turned into computer classes.

I finally got around to recording a video of my teaching this concept, as it relates to classes in Microsoft’s C#. Student reactions are always enjoyable. Most of the time, they laugh, and have fun. I usually get compliments that it’s a lot easier to remember because it’s funny. Some people are disgusted I would talk about such a topic in class – I’m thinking those people don’t have a sense of humor. No photos are involved, so what’s the big deal?

Watch the Video

Here’s my original Blog Post about it

I was challenged last year to write a JavaScript version of Everybody Poops. I finally got around to that this year, explaining objects to students at the TeKY Initiative. That was a bit tougher, since JavaScript isn’t really object oriented. Still, it was fun. The students even got me a poop emoji mug 🙂 You can view the code here. You’ll need to use the console to play with the object.

I’m continuing to teach concepts in [what I feel are] fun, real world ways. My first step has been to create “Real World Programming” videos on YouTube. Two are complete as of this article – OOP (link above) and Inversion of Control + Dependency Injection. I hope to do a few more in 2017 as time permits. If you have a suggestion, please let me know!

I went back and forth between my code and various Telerik and Stack Overflow demos of how the Kendo grid is supposed to refresh its datasource without reloading the entire grid. Finally, Telerik sent me a code example that included a function that’s not in their API documentation, but darn well should be. So, if you’re having the same issue I did, where you want to call read() on your grid’s datasource, but it simply isn’t working, here’s an example from Telerik that may help you.

The function: getKendoGrid()

Now, I keep my createDataSource() function around so I can swap out the data I’m paging. Their example uses some sample data, but you could simply use their example of creating a datasource to call your back-end JsonResult action in MVC and things can still work magically.

I hope this helps others Smile

<body>
  <div id="grid" />
  <script>
    function createDataSource() {
      return new kendo.data.DataSource({
        transport: {
          read: {
            url: "/echo",
            dataType: "json",
            method: "POST",
           
            // Simulate response
            data: {
              "json": JSON.stringify([{
                firstName: "John",
                lastName: "Smith",
                age: 25
              }])
            }
          }
        },
        pageSize: 10
      });
    }
   
    var ds = createDataSource();
   
    $("#grid").kendoGrid({
      dataSource: ds,
      autobind: false,
      scrollable: false,
      columns: ["firstName", "lastName", "age"]
    });
   
    $("#grid").getKendoGrid().dataSource.read();
  </script>
</body>
</html>

And here’s a colorized version:

image