Lessons 104 to 107 – Complete 2020 Web Development Bootcamp

Lesson 104 – Naming and Naming Conventions for Javascript Variables

Common rules that developers follow when naming Javascript variables are:

  • Always give meaningful names to your variables so that so that anyone looking at the variable name can easily figure out what the data is that is likely to be stored in that variable;
  • You can’t use a Javascript keyword as a variable name. For example you can’t name a variable “var var” or “var alert”. You can, however use a name that contains keywords – “var myVar”;
  • A variable name can’t begin with a number such as “var 123”. A variable name can contain number though. So “var my123” is acceptable;
  • A variable name can’t contain spaces. So “var my Name” is not valid;
  • A variable name can only contain letters, numbers, the “$” sign and an underscore “_”. They can’t contain any other symbols. You can’t name your variable “var my-Name”. You can name it “var my_Name”;
  • You should use camel casing to name your variables. This means that the first word of the variable uses lower case and every subsequent word is capitalized. For example, “var myName” or “var myFirstParagraph”.

Lesson 105 – String Concatenation

In Javascript, you can combine text strings using the “+” sign. So – “a” + “b” will be combined by concatenation to become “ab”.

This code will create an alert which displays “Hello world”.

alert("Hello" + " " + "world");

The same alert can be achieved with this slight variation of the code.

alert("Hello" + " world");

The following code first assigns the word “Hello” to the variable “message”. It then prompts the viewer to input their name by asking the question “What is your name?”. The name input by the viewer is then assigned to the variable “name”. If I input my name at the prompt, then the alert function will display the message – “Hello Shane! Welcome to my website!”.

var message = "Hello";
var name = prompt("What is your name?");

alert(message + " " + name + "!" + " Welcome to my website!");

Lesson 106 – String Lengths and Retrieving the Number of Characters

To find out the number of characters in a text string, you can use the “length” function. For example, the following code when run will display the number 5 which is the number of characters in the variable “name”.

var name = "Shane";
name.length;

The following code uses the “length” function and string concatenation to display a message to the site user letting them know how many characters they have used and how many they have left to use in post which is limited to 140 characters.

var paragraph = prompt("Please post here using not more than 140 characters");

alert ("You have written " + paragraph.length + " characters. You have " + (140-paragraph.length) + " characters left.");

In Javascript, you comment out a single line like this:

//This is a single line of comment.

You can comment out multiple lines like this:

/*This is a multiple
line comment*/

Lesson 107 – Slicing and Extracting Parts of a String

The “slice” function allows you to slice your strings to separate them into individual characters.

The following code uses the “slice” function on the variable name and will display the character “S” when it is run. The code “name.slice(0, 1) tells Javascript to slice the name variable (which is equal to “Shane”) at the 0 position (which is the first character “S”) up to but not including the character at the 1 position (which is the character “h”).

var name = "Shane";
name.slice(0, 1);

If instead, the code was:

var name = "Shane";
name.slice(0, 3);

then the letters at the 0 position, the 1 position and the 2 position (which are the letters “Sha” would be displayed.

To get the character “e” (which is at position 4), this is the code which would be used:

var name = "Shane";
name.slice(4, 5);

A quick way to know how many characters will be sliced is to subtract the lower bound from the upper bound. So, if the code is:

name.slice(0, 4);

you will be getting a slice of 4 characters (4 – 0).

The following code will prompt the user to input text not exceeding 140 characters and then slice any part of the text string which exceeds the 140 character limit.

var paragraph = prompt("Please post here using not more than 140 characters");

var permittedParagraph = paragraph.slice(0, 140);

alert (permittedParagraph);