...

View Full Version : Javascript is easy to learn online



CodeAvengers
05-30-2012, 02:00 AM
check out http://codeavengers.com we have only been live for two months now and would love some feedback and what you think about our style of teaching online (for free)

Best Regards & Goodluck!

Old Pedant
05-30-2012, 02:40 AM
Well, just for starters, Felgall will castigate you severely using alert( ) as a first step.

He would much rather see you start using HTML and the DOM right off the bat.

And I think I have to agree with him. It would be no harder to start by using the DOM.

But the annoying part, to me, is that there is no way to skip lessons on stuff you already know (well, you can, but you would have to guess what is in each lesson, since they are only numbered, not named).

And, of course, the big problem is that your "course" doesn't even begin to go far enough.

Your step 10 is really about step 1 in any real course. Something I would expect to see at the end of first day or two of, say, an introductory college course. (Though, again, it should be done without ever using alert( ).)

low tech
05-30-2012, 03:08 AM
Hi OP


But the annoying part, to me, is that there is no way to skip lessons on stuff you already know (well, you can, but you would have to guess what is in each lesson, since they are only numbered, not named

From what I can see, I think the lesson names are under Menu -- Index -- use prev / next to see all.


LT

Old Pedant
05-30-2012, 03:40 AM
Hi OP

From what I can see, I think the lesson names are under Menu -- Index -- use prev / next to see all.

LT

Ahh...right you are.

Okay...another fun problem with their whole scheme: They let you type in ANY JAVASCRIPT YOU WANT and then click RUN.

So you could enter

location.href = "http://www.google.com"; // get away from this stuff

** or **

while ( true )
{
document.write("this is silly<br/>\n");
}


In a tutorial environment such as this, they should probably, instead, be looking for specific answers, rather than relying upon the (assumed idiot) user to do the right thing.

felgall
05-30-2012, 04:06 AM
The home page has a jumbled mess of JavaScript scattered through the page instead of all the script tags being together and with the JavaScript itself in external files. If you can't write the JavaScript you are using the right way then that does cast some doubts on your ability to teach it. Not that there's anything wrong with the way the scripts are written, just how they are attached.

How to correctly attach JavaScript to the page should be lesson One and the home page doesn't follow what that lesson should be teaching.

The page itself gives no proper indication of what the site is actually for and just has the one button to press to proceed - but without any reason why anyone should do so.

Don't know what the rest of the site is like as there was no reason presented as to why I should press that button.

I used to use alert in the early code in my JavaScript courses until they started looking like the following in two popular browsers:

http://javascriptexample.net/inc/alert.gif
http://javascriptexample.net/inc/alert2.gif

With the extra checkboxes alert (and the other dialog boxes) are now only suitable for debugging when you're too lazy to open the debugger built into the browser.

mrwwalmsley
05-30-2012, 06:00 AM
Hey guys, big thanks for the feedback!

I'm Mike the CodeAvengers creator. I'm a software eng. grad, doing a PhD in computer assisted language learning -- Human... NOT computer languages. Have tutored for programming courses 1st through 3rd year, and have also tutored high school students.

The original post was from my friend Andrew. Here is my quick response.

1st of all brief background. CodeAvengers is one my side projects (which I have put MANY hours into) and began with me developing a few interactive tuts to teach my brother Javascript he enjoyed them, so I decided to adapt the course for the average beginner. Furthermore, here in NZ where I live, we have a new high school computer science curriculum for senior students that forms part of our digital technologies course.

The 1st 40 lesson course covers all the stuff yr10 students (15yo) are supposed to learn in the few weeks they spend on computer programming. I am designing the course for the ABSOLUTE beginner. The system also includes a page to allow teachers to montior student progress. I have been getting awesome feedback from beginners and teachers so far who say the course caters well for beginners.

Now to address your very valid feedback...

Using alerts vs DOM... I would love to use DOM, but many our NZ students don't do any HTML in their course. I also wanted to make a course that was stand alone... did not require another 'langauge'. While, HTML & DOM seems trivial to all of us... its not to someone having their 1st encounter with computer programming.

I also tried a few lessons that wrote messages to the console, but not suprisingly all the people I tested on seemed to catch hold of what was going on with the version that used alerts. As for the checkbox in alerts, in Chrome and Firefox they only appear when 2 alerts are displayed in quick succession. So I avoid showing 2 alerts in quick succession in the 1st lesson. Then I explain that in the 2nd lesson.

As far as catering for more fast learners/people who already know a little bit of programming... Eventually, I will add a 'task 6/fast track' which reviews each lesson, as well as a 'task 7/extra credit'. Fast learners could skip straight to task 6 & 7, and do the 1st 5 tasks only if they needed to.

I also plan to create an HTML course soon, also aimed to be suitable for High School children 11-18 years old. When I create the level 2 Javascript course I am planning on doing integration with DOM.

As for Old Pedants 'another fun problem with their whole scheme: They let you type in ANY JAVASCRIPT YOU WANT'

That is not true... My system checks if they are doing something that goes against the task description and warns them if that is the case.

In the lessons that teach about loops, there are checks to warn the user about potential infinite loops. And if they are typing loops in the introductory lesson they probably already know what an infinite loop is!

Also I don't see what the problem is with a user typing: location.href = "http://www.google.com";
If they want to do that... let them. From my testing of the system, people seem to get more frustrated when you are overly restrictive.

Finally, HOME PAGE... As far as the 1 button on the home page that says 'Begin training'... the goal is to build suspense...

Well not really, I have experimented with various button combinations (index, about, login button etc.) and labels to see if there is change in click through.

Good point about the scattered social media scripts, I will put them in 1 file.

I am fairly new to web development, so would love suggestions for the home page. Also would love more feedback from someone like you Stephen, so what would I have to change to the home page to get you to CLICK THE BUTTON!! Thanks

Dormilich
05-30-2012, 08:58 AM
Using alerts vs DOM... I would love to use DOM, but many our NZ students don't do any HTML in their course. I also wanted to make a course that was stand alone... did not require another 'langauge'. While, HTML & DOM seems trivial to all of us... its not to someone having their 1st encounter with computer programming.

the problem I see here is, in what environment will the student use their knowledge? I assume that 99% will use their learned JS knowledge in their (personal) website (as there isnít another environment a beginner would use JS in). now you have the problem that the pupil knows some JS, but canít apply it for the missing DOM/HTML API knowledge*. and another point I want to make is, the things you learn first are what youíll build on later. if you unknowingly learned bad habits (e.g. document.write()), it is extremely difficult to get rid of that later.

to summarise that, JavaScript seems more simple than it is. itís a full fledged programming language with pros and cons, but nothing you could master in some days. (Iím doing JS for something like 10 years now (hobbyist programmer) and I canít say that I have really mastered all of JS. it took me around 5 years to get a decent understanding of JS)


* - problems I see most often when visiting JS forums:
- improper use of functions (e.g. document.write() in event handlers)
- syntax errors, invalid calls of functions
- insufficient knowledge of DOM
- missing error handling
- invalid HTML
- insufficient knowledge of scope

felgall
05-30-2012, 09:27 AM
Using alerts vs DOM... I would love to use DOM, but many our NZ students don't do any HTML in their course. I also wanted to make a course that was stand alone... did not require another 'langauge'. While, HTML & DOM seems trivial to all of us... its not to someone having their 1st encounter with computer programming.

The DOM isn't another language - JavaScript is about 35% ECMAScript, 5% browser specific and 60% DOM - the DOM is the biggest part of JavaScript.


As for the checkbox in alerts, in Chrome and Firefox they only appear when 2 alerts are displayed in quick succession. So I avoid showing 2 alerts in quick succession in the 1st lesson. Then I explain that in the 2nd lesson.

The Opera version of alert I posted is how all dialogs look in Opera - they all have the checkbox to turn off JavaScript including the first one.


Finally, HOME PAGE... As far as the 1 button on the home page that says 'Begin training'... the goal is to build suspense...

I am fairly new to web development, so would love suggestions for the home page. Also would love more feedback from someone like you Stephen, so what would I have to change to the home page to get you to CLICK THE BUTTON!! Thanks

The home page should tell people what the site is about so they know whether they have found what they are looking for.

I don't claim to know all that much about design. The JavaScript site in my signature underwent lots of design changes from feedback I got late last year when I first created the site and asked for reviews on a different forum. The home page does list all the categories of "lessons" that the site has so that you can get to any lesson with two clicks.

mrwwalmsley
05-30-2012, 09:39 AM
felgall: Thanks for the reply... At the moment my site does not support Opera. There are a couple issues I have not bothered to fix. I am busy writing up my PhD thesis at the moment... so decided on not supporting opera for now, since have few site visitors with that browser.

As for not learning another language I mean HTML (not DOM)...
For the level 2 course I create I am planning to integrate HTML and Javascript.
But for the level 1 course I don't want to assume HTML knowledge.

mrwwalmsley
05-30-2012, 09:58 AM
Felgal: Also... Once you go to the TRAINING page, on my site, you can get to every lesson with a single click.

Also your feedback on the home page... was valuable because I was so busy working on lesson material... I hadn't really really realised that my home page did not even say what the heck the site is about! I have added something that should make that clearer.

And may I say WOW, your site covers A LOT of material! Good going!

Dormilich: Totally agree with everything you said. I have only been doing JS for 2 years... migrating from C++, Java, C# and VB: and it took a while to get a good handle on it.

Thanks for the heads up on document.write(). I will be sure NOT to teach it in my Level 2 course!

The plan is to have the level 1 HTML and level 1 JS courses separate.
The projects they have to create in our high school year 10 courses are really BASIC. A little sandbox environment displaying a few prompts and alerts is sufficient.

In the level 2 Javascript course I will cover, the console, for loops, arrays and functions, still in the sandbox environment. I also plan to integrate some DOM stuff here.

The NZ level 3 high school curriculum comes out at the end of this year, so I am waiting to see what is in that before I start creating the level 2 course.

I really do want to get into the HTML/DOM stuff as early as possible. At this stage, not of the high school teachers I have talked to in our NZ high schools do ANY Javascript/HTML integration because the teachers think it is too hard (most don't know how to do it themselves).

mrwwalmsley
05-30-2012, 09:58 AM
Finally, any thoughts on using JQuery for teaching the DOM stuff??

Dormilich
05-30-2012, 10:07 AM
nope (at least not for beginners). jQuery uses some advanced techniques (design-wise), which might confuse the students (chaining, iteration, different function behaviour* depending on the input)

for the use of DOM in jQuery style use document.querySelector() and document.querySelectorAll()


* - explain the following to a beginner:

var x = $(this).val();
$(this).val("foo");

// vs.
var x = Date.now();
Date.now("2012-05-30 12:35:47"); // obviously doesn’t work

Dormilich
05-30-2012, 10:38 AM
not sure if it were a good idea for teaching, but as JS mostly consist of objects you could occasionally do an excursus/digression that mentions the reason behind the stuff you currently teach. for instance for the DOM you need to mention object types: what is the difference between an Array and a NodeList; why does document.formname.elementname.value work on a single checkbox, but not on 2 or more; what’s the difference between a function statement and a function definition*; what is a first-class function**)


* - one of my favourites:

function doSomething(x)
{
var y = doSomethingElse(x);
return
{
value: y,
arg: x
}
function doSomethingElse(a)
{
return 2 * a;
}
}

// now the big question: what is z.value?
var z = doSomething(5);

** - you need that in Event handling, otherwise it is difficult to explain the difference between window.onload = doSomething; vs. window.onload = doSomething();

felgall
05-30-2012, 10:56 AM
And may I say WOW, your site covers A LOT of material! Good going!

I started that site in September last year after I resigned from writing for About.com - it is the 4th set of tutorials I have written to teach JavaScript with the prior three versions all on javascript.about.com where most of the outdated pages are marked as such with links to the more modern replacements. I set up the first 200 pages the first month and have added about another 150 pages since then.


Totally agree with everything you said. I have only been doing JS for 2 years... migrating from C++, Java, C# and VB: and it took a while to get a good handle on it.

I have been programming for about 35+ years, writing JavaScript for about 13 years and teaching it for eight. Over that time I found the hardest concepts to be learning the different approaches to programming - eg. already knowing C it still took me about two years to properly understand object oriented programming when I taught myself C++. It also took quite a few months for me to properly understand the similar advances that a prototyping language such as JavaScript has over class based object oriented languages.


The plan is to have the level 1 HTML and level 1 JS courses separate.

HTML is really a prerequisite for using JavaScript in the environment that most people use it in - attached to web pages or attached directly to the browser. Both of those places can use the same DOM.

It is only once you start using it in other places (desktop applications using Adobe AIR, on the server using Node.js etc) where there might be ifile interactions and similar so that the DOM part doesn't get used as much.


Finally, any thoughts on using JQuery for teaching the DOM stuff??

Anyone who doesn't understand at least the basics of the JavaScript DOM before trying to use jQuery is likely to get themselves in a mess and write several times as much code to use jQuery as they'd need if they weren't using jQuery. It is an advanced piece of JavaScript that requires about an intermediate level understanding of JavaScript to use it properly.

Anyway, teaching the DOM stuff should be easier once IE8 dies out since that's the last browser that has differences in some of the DOM commands (which is what a big part of jQuery and similar libraries take care of for you). After IE8 dies jQuery should shrink to about 1/10th its current size.

mrwwalmsley
05-30-2012, 11:21 AM
Thanks to both of you, that was excellent feedback! I really appreciate your time. After reading that, I think I will give JQuery a miss for the courses targeting the high school students.

Also, I totally agree it is good to start using DOM as early as possible.

I have also met a high school teacher that uses Unity Script (another ECMAScript based language) in his level 1 course outside of web browser environment.

The NZ High School curriculum does not cover a whole lot of material. Our NCEA level 1 curriculum is an introduction to variables, data types (number, strings, boolean), if statements, while loops, and predefined functions.

Most schools in NZ are currently using visual programming languages like Scratch. But they are not allowed to use Scratch for level 2 (which introduces functions and arrays). So, I think a lot of teachers are keen for something else.

mrwwalmsley
05-30-2012, 11:23 AM
Thanks for that! Great example!! But I think a little beyond the noob audience I am initially targetting

xelawho
05-30-2012, 04:34 PM
apart from all that, I think that another problem with teaching javascript in a vacuum is that you're taking all the fun out of it. If somebody had showed me how easy it is to change the background color of a web page with the click of a button (for example) when I was 15, I would have been hooked instantly - in fact I still get a little kick out of it (or variations thereof).

I remember spending most of my high school years wondering why these people were showing me these things. And looking back on it now the subjects that I really engaged with were the ones where the answer to that question was either implicit or explained to me very clearly from the outset.

I understand that you have little influence over the larger curriculum, but I think that a little bit of html at the beginning of the course would pay off in spades as far as students' enthusiasm goes. Basic html is quite simple, anyway, and most kids now are so web-savvy that teaching the basic form elements (buttons, checkboxes, text inputs, selects, etc) is more just a process of giving names to things they are already aware of.

Old Pedant
05-30-2012, 10:59 PM
And, besides, how much harder is it to do something like this:


<!DOCTYPE html>
<html>
<body>
3 * ( 7 + 1 ) = <span id="answer"></span>

<script type="text/javascript">
var x = 3 * ( 7 + 1 );
document.getElementById("answer").innerHTML = x;
</script>
</body>
</html>

And then tell the student


Now, change that to both display and compute the answer to ( 4 + 1 ) * 12

???

You give them a simple fixed HTML page to work with and immediately draw them into web programming.

You will pardon me, I hope, for agreeing with Xelawho that the NZ curriculum you mention is just not going to be very motivating to students.

*******

Apologies for assuming that the user can type anything into the script box and hit RUN. I admit I only tried location.href = ... and just jumped to a conclusion.

mrwwalmsley
05-31-2012, 01:58 AM
I do agree with you two, and I think there are definitely pro's and con's with the design decision I made.

xelawho: I don't teach in a complete vacuum, but I just try to hide all details I can at least for this introductory course... Check out http://codeavenges.com/training#7.1 for an example - the CodeAvengers robot challenge. Most seem to really enjoy the CodeAvengers robot lessons.

Most of the rest of intro course are taught in a vacuum (using only prompt and alert for input and output) just because I am trying to make things as easy to understand as possible. But I try to provide fun little examples with the CodeAvengers theme and people seem to enjoy it.

I agree that I could make it WAY MORE fun by doing some of the things you suggest. The changing color thing is cool... I tried to hook my brother into learning html by showing him how to change text and colors on a web page using Javascript... he enjoyed that. Unfortunately I still couldnt get him to learn HTML, because the resources I showed him he found boring and too much reading. This is why I am trying to create my own.

But, the type of example you gave is exactly what I have planned for my html/javascript courses.

mrwwalmsley
05-31-2012, 02:45 AM
Old Pedant: Thanks again. It is harder, not much harder but harder never-the-less. Compared to

alert("3 * ( 7 + 1 )" + (3 * ( 7 + 1)) )

For starters it just looks way more complicated to a total noob.

I did a quick test with on my wife. I showed her the example and she understood the line of JavaScript
var x = 3 * ( 7 + 1 ); since she she was my 2nd test dummy for CodeAvengers.

I then gave my best 5 minute overview the html she needed to know to understand the example you gave. Then another 10 minutes answering her questions...

Things like why do you need the <html></html> tags when you already have that <!DOCTYPE html> tag telling the computer it is html.
She then was confused about the point of the body tags... but understood perfectly when I explained about the head section.
Then she wanted to know why 'spans' where called spans... and a few other things. But once I had explained it all she was fine.

Basically, I believe the HTML adds extraneous cognitive load--since my goal is simply to teach some programming fundamentals. But of course the big problem as xelawho stated is how to make JavaScript in a vacuum fun. I gave my best shot with the CodeAvengers Level 1 Course. So far the feedback from people who completed part or all of the course has been extremely positive.

My plan is to create a SHORT, fun html tutorial 10 lesson course -- I have some good ideas on how to make this.

For the level 2 course which will introduce for loops, arrays and functions, I was still debating whether to use the console and alerts or integrate html. Based on all the suggestions here... I might have a go at the integrated approach and try it on my users and see if they can handle it!!

Thanks again for all the helpful suggestions!

Old Pedant
05-31-2012, 02:56 AM
Well, my concept was that you'd just give them the boilerplate HTML (maybe make it non-editable, in fact) and then just tell them that the magic line of code that altered the page was the document.getElementById line and they couldn't touch it, either.

And then slowly introduce in what other ways JS can affect the web page.

But I see what you mean. As soon as you show them more, they want you to explain the more.

I do think you can do the level 2 course integrated with HTML. Show them how to use loops to add lots of content to the page. How to use arrays to add controlled content to the page. Etc.

felgall
05-31-2012, 04:35 AM
Most of the rest of intro course are taught in a vacuum (using only prompt and alert for input and output) j

So anyone who checks the box to turn off JavaScript for the page when filling in the prompt box will never see the alert.

http://javascriptexample.net/inc/prompt.gif


A better alternative that achieves the same end result would be to build the input form and output text field into your web page and provide your own read() and print() functions that access them so that you can simply use those two functions in the code you provide.

Then istead of:

<script type="text/javascript">
var x = 3 * ( 7 + 1 );
alert(x);
</script>

You'd simply use:

<script type="text/javascript">
var x = 3 * ( 7 + 1 );
print(x);
</script>

with your print function hidden away containing:

print(x) {document.getElementById("answer").innerHTML = x;}

mrwwalmsley
05-31-2012, 04:49 AM
I must admit... I never tried my system on Opera until I had created a large chunk of lessons. I had been testing on IE9, Chrome, Firefox, Safari latest version.

When I did check it on Opera... there were a bunch of css issues and the site looked quite ugly!! But I do need to add a message the appears for Opera users explaining the Checkbox on the prompts and alerts to them (As my system does for Chrome and Firefox).

mrwwalmsley
05-31-2012, 05:15 AM
felgall: That is certainly another option and is actually what I did originally. If you see on my site training there is a black console window. Initially, I redirected console.log or any of the other console commands (now part of modern browsers) to the BLACK console window on my site.

I also display message in the console that relate to the passing and failure of tasks. People were getting confused. Once I spent a couple minutes explaining to them what the console and what was going on they were fine. However, my goal was to create the lessons with as little reading and as much doing as possible.

When I switched the lesson to the alert version of the lesson people seemed to catch on quickly to what was happening even with 1 sentence of explanation vs the paragraph I needed to explain the console version. I thought it was crazy... but most people that were trying the site wouldn't even read a paragraph!! They just wanted to click a button and see immediate results (the way the world seems to be heading these days).

When I first used alerts, I overrode the alert command to show my own alert boxes... but couldn't work out how to create an synchronous prompt box that was x-browser. So I switched to using the system prompt. My testers seemed to prefer system alert box over my alert. They reckoned it made the distinction clearer between what was "my site" and what was the result of their code running.

I did plan to introduce console a few lessons into the course... but as I created the lessons... it just didn't feel right, and I ended up removing all references to console output from the level 1 course entirely.

Did you get the chance to try the 1st couple of lessons on my site (it would only take you 2-5 minutes)?

As you have suggested, I definitely need to put alerts and prompts in their place (as debugging tools) in the level 2 course!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum