Syntax video or help

There are tons of great videos, but I’m wondering if there is one on just the Syntax of JavaScript. I’ve taught the AP CSP class for 3 years now, and although I’ve basically caught on, I’d still like a video that just goes through the basic syntax rules. When students run through the lessons in block mode, fine, but we never pay much attention to the syntax. But every once in a while, it starts you in text code, and if they get stuck, they can’t get back to block. But without having been taught what they’re looking for (and me neither for that matter), we all get stuck. Just a short video with the basic rules would be great. Thanks.

1 Like

Are you saying you change something in text mode that will not go back into block mode?

Yes, occasionally the students make a change in text mode, and accidentally delete extra brackets, or semicolons, or do something that code.org basically says, fix it first or it won’t let you back in to block mode.

Originally I got “thrown” in to teaching CS, so it’s not my background. So I’ve learned as I’ve taught over the last few years. But it got me thinking that none of the lessons go over the syntax rules, and I don’t feel comfortable teaching them. Basics. Like when and where do the brackets go, and why. Ending with semicolons. Just things like that. I would be nice if there was a simple lesson or video that goes over that after they’ve been coding for a little while to make note of what the blocks have been doing for them.

I admit that I struggle with the syntax for onEvents! The basic format is:
onEvent(“forward”, “click”, function(event) {
moveForward();
});

There’s a lot there that can be messed quite easily (like the last line)! Those can be painful to debug.

The other syntax is common to most programming languages. { and } are used to identify a block of code whether that code is a function, loop, inside an if-statement, etc. That code goes together. The ; ends a command and begins a new one. Strings go in " ". Lists go in . There are some lessons on debugging build into the curriculum but it really takes a lot of practice.

Has anyone found a good reference on debugging syntax that students can refer to?

I looked and didn’t find any. The problem is that in 2009 youtube videos were not the way programmers created tutorials. I say 2009 because that is when the ES5 version of Javascript was current. Since then many problems with the language have been addressed and fixed. This is relevant because App Lab uses ES5.

But the good news is there are plenty of books available for ES5 for free! No one would buy one. One book I like is Javascript Allonge https://leanpub.com/javascript-allonge/read

I have been considering doing a video series on App Lab for teachers for a while now. I may have to do that.

I took a look at the books I have. I think this is what you are looking for http://speakingjs.com/es5/index.html#toc_ch01. This is an online version, I found a pdf version, but I don’t remember where it came from.

This book has a syntax section that I think is exactly what you want.

1 Like

That’s an awesome resource! Thank you. Could you give me a quick rule about when you use { } ? I hate that I’m exposing how little I know, but I’m always learning. :slight_smile:

Any statement can be replaced by {statement; statement;, etc}. So we can have if (conditional) statement; or we could have if (conditional) {statement; statement;, etc}. It is recommended by most Javascript aficionados you always use the latter. However, I would say that within App Lab there are even more restrictions.

In many ways App Lab can be thought of as a different language. For one thing the Javascript interpreter that runs App Lab programs is not fully ECMAScript 5 compliant. ECMAScript is the language specification for Javascript and App Lab doesn’t always conform. Add to that a few bugs. The interpreter was written by someone as just something fun to do. We computer programmers do that. Don’t judge. Also we need to consider the blocks. Some syntax is supported by block mode and some is not.

So let me see if I can create a { cheat sheet for App Lab:

// { } (a.k.a. curly braces) is a block of code. Put one or more 
// statements in there.

{
  console.log("hey this is a block!");
}

// But don't just use it for fun like I just did.

if (1 < 0) {  // <--- Always put a block after an if.
  console.log("Yes!");
}

if (1 < 0) {
  console.log("Yes!");
} else {  // <--- Always put a block after an else...except...
  console.log("No!");
}

if (1 < 0) {
  console.log("Yes!");
} else if (1 > 0) {   // ...when you use else if. The if doesn't go 
                      // inside another block.
  console.log("No!");
}

// We also use curly braces in a for loop. You could just put a single 
// statement after the for, but that is considered rude. 
// Always use a block after for.
for (var i = 0; i < 4; i++) {
  console.log(i);
}

// functions are expressions, they return a function.
// There are two kinds: named and unnamed. 

function aFunction () { // functions always have a block of code.
  console.log("named function expression here");
}

var myFunction = function () { // Named or unnamed, always a block of code.
  console.log("unnamed function expression here");
};

onEvent("id", "click", function( ) { // here is an unnamed function 
  // expression passed as a parameter to onEvent.
  // it has a block of code too.
  console.log("unnamed function expression here");
});

// You can think of it like this:

onEvent("id", "click", aFunction); // remember aFunction, from above? 
                          // You can reference a named function here instead 
                          // of a function expression.

readRecords("mytable", {}, myFunction); // any of the callback functions 
                              // can reference a named function or a variable 
                              // with a function value instead, but wait...

readRecords("mytable", {}, function(records) { //...here are some more curly braces!!!
  console.log(records);
});

// You can create an Javascript object with curly braces. 
var o = {a: 1, b: 2}; // these are not statements, these are properties.
console.log(o);

readRecords("mytable", {name: "Don"}, myFunction); // the curly braces here 
                          // create an object used to filter the database.
                          // Only records with name == "Don" are passed to 
                          // the callback function.