EXPLAIN 5 JavaScript 

GRAMMATICAL RULES 

& 

SPOT MIN. 3 ERRORS  

which are generated by writing bad code  

GRAMMATICAL RULES 


1. JavaScript WHITESPACE 

A whitespace = an empty space on your screen

Eg:     space characters, tabs, line break characters

JavaScript IGNORES the use of EXCESSIVE WHITESPACE 

Eg:    x = y*  z      -w      <=>        x=y*z-w

Both these statements are interpreted the same way!

WHY IS WHITESPACE IMPORTANT?


As JavaScript ignores whitespace, you can write 
  • a more readable code
  • a more understandable cod

Eg:         if (z > 8) { document.write ("z is greater than 8.");} 

                 else {document.write ("z is smaller than  8"); }

For the programmer, the above code may be harder to follow BUT for the computer it's more beneficial as much of the unnecessary space characters are eliminated.


THEREFORE,

We use reasonable amount of space for readability and understandability

Eg: if (z > 8) {

document.write ("z is greater than 8.");

 }

else {

document.write ("z is smaller than  8");
}


EXCEPTION!


JavaScript does not ignore ALL excessive whitespace!

Eg: The use of whitespace in strings!

In strings, whitespace is preserved, as in:

Eg: var AString = "Thisis a string";

GRAMMATICAL RULES 


2. Literals - STRINGS

A string = one or more characters of text.


VERY IMPORTANT!

A string is enclosed inside 

  • SINGLE  ‘’ quotes /
  •  DOUBLE“ ”quotes 

Eg:     "Scripting master" /   'HTML' /  'JavaScript' /   "1999” 

EXAMPLES OF INVALID STRINGS:

Eg 1:     "Today is a not very good day for science.' 
There is no consistence when creating the string : it starts with double quotation marks & ends with a single quote.

Eg 2:     'That's the spirit!' 
Unbalanced quotes  - If you have  to use an apostrophe (or single quote) in the string, then, you need to use  double quotation marks to make it a valid string.
CORRECT STRING:   "That's the spirit!"

Eg 3:     ""The little prince" was his choice for review." 
Unbalanced quotes - when  you have to use double quotes IN a string, then, you DON'T use  double quotes AROUND the string 
CORRECT STRING:   '"The little prince" was his choice for review.'

GRAMMATICAL RULES 


3. CASE SENSITIVITY in JavaScript


JavaScript is a case-sensitive scripting language.

MEANING:

JavaScript considers 
CAPITAL LETTERS different from LOWERCASE LETTERS


 

Eg:      we declare a variable:  helloWorld  

we will have to use helloWorld when reffering to the variable at all times

 HelloWorld / HELLOWORLD/ HelloWORLd will end up as an ERROR


This grammar rule does NOT apply only to variables. 

CASE  SENSITIVITY also stands for :

  • Keywords
  • Event handlers 
  • Object properties
  • Methods

 

  KEYWORDS are ALL LOWERCASE: 

Eg: while, for, if , else


METHODS (properties) use CAMEL-BACK naming convention: 

1st word is lowercase and each successive 1st letter of the next word is capitalized

Eg:  toArray(), lastModified()


etc.

GRAMMATICAL RULES 


4.  JavaScript COMMENTS


COMMENTS are necessary when scripting code becomes LARGE

HOW CAN COMMENTS HELP YOU?

You can add extra information that will help you write and understand the code more easily

GOOD TO KNOW:

  • Comments are IGNORED BY THE COMPUTER
  • Comments HELP YOU UNDERSTAND THE CODE when you look after a period of time 
  • Comments HELP OTHERS who are working with you on the same coding project.

JavaScript has 2 types of comments:

  1. SINGLE LINE comments
  2. MULTIPLE LINE comments

SINGLE LINE comments

  • start anywhere in the line and continue to the end of the line.
  • begin with a double forward slash:  //

Eg:     <script language="javascript">
// Author: Scripting Master
// Description: This JavaScript code prints a simple message.
document.write ("Learn JavaScript by examples."); // prints a message
</script>

MULTIPLE LINE comments

  • span multiple lines
  • begin with slash asterisk /* and end with asterisk slash */


Eg:     <script language="javascript">
/* Author: Scripting Master
 Description: This JavaScript code prints a simple message.*/
document.write ("Learn JavaScript by examples."); // prints a message
</script>

TIPS:

  • You can add as many or few comments as you like
  •  Write clear, concise, and meaningful comments to describe your code to help you or others understand what the code does.
  • Comments also can be used to debug your code. 


GRAMMATICAL RULES 


5.  The SEMICOLON


              ALL  JavaScript statements end in semi-colons ( ; )

                                  EXCEPT for those that don't !


                         YOU MUST BE AWARE OF 2 THINGS:


1.  JavaScript does NOT require a semi-colon at the end of a statement that ends at the end of the line.

If you have one statement per line you don't need semi-colons 

 Skipping semi-colons however make your code harder to read and to debug

SO

YOU SHOULD USE SEMICOLONS ANYWAY

If your statement runs across many lines, JavaScript may think the command ended at the end of the line.

Eg:    function sample( ) {
  var z = 1;
  var x = 2;
  var y = 3;
  return
    z + x + y;
 }

This would return true, not 6, which is what the code seems to imply. 

WHAT JavaScript SEES IS:

Eg:    function sample( ) {

  var z = 1;
  var x = 2;
  var y = 3;
  return;
  x + y + z;

 }

Always be careful  where you break your statements if you break them across multiple lines.


If  we put the plus signs on the wrong place, 

JavaScript will not realize that the string continues 

on the next line.


WRONG:

var someString = 'Boa constrictors swallow '
  + ' their prey whole'
  + 'without chewing it'
  + 'and after that they are not able to move.';


RIGHT

var someString = 'Boa constrictors swallow' +

  'their prey whole' +

  'without chewing it' +

  'and after that they are not able to move.';


2.  BE AWARE: any statement, such as a function, that ends in a curly bracket does NOT need a semi-colon after the bracket. 

In this case the bracket serves to end the statment.

Putting a semi-colon after a curly bracket creates an additional empty statement, which is useless.


ERRORS

1


<script>
function someFunc() {
  (function code goes here)
  }
//
</script>

2

<script>
document.write("helloWorld" + <br>);
</script>

3

<script>
if ("scoobydoo".length < 200) {
 console.log('you don't know where scooby is');
}
</script>
Made with Slides.com