Blog Archives

Codecademy.com – the good – the bad and the ugly.

School holidays are a great time for kids to well, have a holiday.

But this year, this poor programmer has been besieged by some pupils of a local School. The poor things had been set the task of doing the javascript course on the http://www.codecademy.com site.

It’s a big course. I was a bit dubious about some of it’s teaching methods though. One poor lad was stuck for 24 hours when he wrote a lovely infinite loop. Instead of the Code Academy site working that out, it just let the code hang the browser. The lad thought his computer had gone wrong.

I also detected a large amount of copy and paste. There is  a help forum which is very copy and pastey and I wondered about how much javascript they were REALLY learning and how much of CTRL C/V was going on.

I noticed with loops (and this is a minor point) they did not point out it is better to do:-

var a=b.length;
for (var c=1;c<a;++c)

than

for (var c=1;c<b.length;++c)

Because the for next loop is reading the b.length over and over. Ok I’m being picky but.

I’m not sure about storing functions in variables either.

var x=function() {
 console.log ("Hello");
};

as opposed:-

function x() {
console.log("Hello");
}

The first example is 97% slower running than the second. That’s a whole lot of slower. (Credits to this link)

I did like the way it taught object oriented programming and different notations although the student I worked through it with got very confused by it. But point taken it’s probably really good to learn all three things.

But my main bug bear was really that you would get code that would fail even though it was correct. In one exercise the output of J.R.R Tolkien vs J.R.R. Tolkien caused the code to fail. Technically the code was right so it should have passed. Yes, there was a slight difference in the output from what was required but I get the impression the test of whether the code works is not able to actually tell if the code is right but only what output is given under certain circumstances, it’s like JUnit testing where you write a test in java that really doesn’t actually test the code but just the output. Although the student didn’t notice at one point I did manage to fool the tester into thinking I’d written correct code just by “console.logging” what I thought it wanted to hear.

Overall it’s a very good concept, the site is laid out well and nice to use. *BUT* I think it’s inappropriate to throw it at a complete new programmer (who is 14) without much help. At worst it teaches you to Copy and Paste. At best you actually learn to code.

Lastly I wondered why thee was no interaction with the web itself, Javascript is essentially a web technology but there was no effort to give any more output than “console.log”. Sure, you learn javascript but all you can do is put up input boxes and output to a console. Maybe at the end they could have introduced web technologies like JQuery as  a pre-cursor to a javascript course.

Yup, it’s a great site, I love what it’s trying to do, but the big no no for me is the hanging when a student writes an infinite loop, it can’t be that hard to write a “code timeout” that says if it’s not executed within a set amount of time give the “infinite loop” warning. Also, some of those error messages just don’t really help!. At one point I was going to get the student to install NetBeans and paste the javascript in there as it would pretty much help them to get it right. All the students I worked with kept doing this:-

for (var i=0;i<k.length;++i) ;

they would get very confused about when you { or ( or [ rather than ;.

Anyway – we got there in the end. Perhaps I should become a teacher?

Advertisements

Making an email link in a table with Java Server Faces

Ok, here’s how to do it.

1. Edit the table with the email in it – and set the type of the email field to a HYPERLINK.

2. Create a STATIC TEXT field on the form somewhere, change its ID to txtJAVASCRIPT, turn off the escape property and add a binding attribute to it. We’ll use this to run a bit of javascript to call the email.

3. Add a binding attribute to tablerowgroup1 on your table

4. In the action code for the Hyperlink insert the following code, this will make the javascript basically tell the browser to open the users email programme with the email address in the subject. Obviously you’ll need to change tblcustomersDataProvider1 to your data provider and email to the field in the database corresponding to the persons email address.

public String hyperlink2_action() {
        // Process email
        tblcustomersDataProvider1.setCursorRow(
                tableRowGroup1.getRowKey());
        String sEmail=tblcustomersDataProvider1.getValue("email")+"";
        if (!sEmail.equals("")) {
           
            txtJAVASCRIPT.setText("<script language='javascript'>\nwindow.location=\"mailto:"+sEmail+"\";\n</script>");
           
        } else {
           
            txtJAVASCRIPT.setText("");
        }
        return null;
    }

5. To cancel the email request we add the following into the public void preprocess() code for the jsf page

    txtJAVASCRIPT.setText(""); 

Using this technique you can pretty much make any javascript happen on a page based on an event.

Popup Windows Javaserver faces.

I wanted to build a popup window that I could use to bring up a print dialog in a web page. It’s no use using the JAVA print dialog because it would appear on the web server.

So:-

FORM WITH DATA —> CLICK PRINT —> Bring up Popup Print Window —> CLOSE WINDOW –> RETURN TO FORM

The Popup JSF page

1. Create the Popup window java server faces page. (just a normal jsf page)
2. Add a Button to the page to close it
3. Add a static text box, rename it to txtJAVASCRIPT, set the escape checkbox to off, add a binding attribute
4. Now, on the Popup I have a close button and the code in the close button simply sets the static text box’s javascript:

public String cmdClOSE_action() {
getSessionBean1().sPrintReportRequest="";
        txtJAVASCRIPT.setText("<script language='javascript'>window.close();</script>");
        txtJAVASCRIPT.setVisible(true); 
        return null;
}

The calling JSF page

1. Create your page that you want to call the popup box.
2. Add the popup code into the JSF for the page calling the popup (I put it into a page fragement that appears on every page):-

<script LANGUAGE="JavaScript">
       
            function popUp(URL) {
            day = new Date();
            id = day.getTime();
            eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=382,height=286,left = 529,top = 307');");
            }
       
        </script>

Ofcourse you can change the settings as you wish (i.e. popup window size)

3. Making the popup appear.

a. Add a static text box, rename it to txtJAVASCRIPT, set the escape checkbox to off, add a binding attribute (this stores the javascript when i want the box to appear).

b. Add a button to the form you want the popup to appear on, in the button java put :-

  public String cmdPRINT_action() {
      // in this case i am printing a report so i set the session variable to tell the server the popup needs to be displayed
         getSessionBean1().sPrintReportRequest="rptzones";
// now set the txt of the static text box I set up on the same page, note its normally not visible or rendered
// in this case the popup is a jsf page called frmPRINTREPORTS.jsp
         txtJAVASCRIPT.setRendered(true);
         txtJAVASCRIPT.setText("<script language='javascript'>popUp('frmPRINTREPORTS.jsp');</script>" );
        txtJAVASCRIPT.setVisible(true);
       
       
        return null;
    }
 

 

4. Lastly in the form that called the popup I want to stop it from appearing so I have to kill the javascript.

    public void preprocess() {
       
        String sReportRequest=getSessionBean1().sPrintReportRequest;
        if (sReportRequest.equals("")) {
            txtJAVASCRIPT.setVisible(false);
            txtJAVASCRIPT.setText("");
           
        }
       
       
   

Note that the code has to run in the preprocess stage of the page, this simply makes sure that the javascript won’t run when it’s not wanted.

There you go!