JavaScript: Intro to Programming

Basic JavaScript Syntax

Keep these basic syntax rules in mind as you begin coding:

• End lines with semicolon ;
• Put arguments/parameters in parentheses ( )
• Period between object and method or property
• Strings in quotation marks
• Opened elements must be closed, so pay attention to quotation marks, parentheses and curly braces

These syntactical rules may not make sense right now, but will become clearer as we work through the exercises.

Your First Program

Let's jump in. We'll start by writing the string "Hello World!" to the console and screen. Use both of the methods to the right in the console. Don’t worry if you see "undefined" in the console after the code returns. The console is attempting to determine the data type that the code returns, and in most cases in our exercises that is "undefined."

Take a look at the structure of the code below. "console" is the object and "log" is the method. You separate them with a period (.). Basically you are asking the "console" to perform the action "log". The content within the parentheses is the "argument" of the method or function.

console.log(“info goes here”);

When using the Chrome console, you don't need to use console.log. It is optional. If you just type your test or commands into the console, it will execute as console.log. Later we will use other methods to write to an HTML document.

Note: this tutorial no longer uses the document.write command that is demonstrated in some of the videos. We will demonstrate concepts for writing to the window in an html file in the next lesson. The console.log function demonstrates each concept in this tutorial.

Data Types

There a are number of different data types - String, Number, Boolean, Array, Object, Null. Programming languages have syntax and functions that work with a variety of data types.

We will mainly be concerned with strings and numbers, later adding booleans, arrays and objects - each is described below.

Strings

Strings are simply text. They are represented in quotation marks.

Length

Length is a string property that returns the length of the string. Sometimes a program needs to count the number of characters in a string. Perhaps you are trying to validate a password that needs to be 8 characters or more or determine if the number of letters in a tweet is less than 140.

Concatenation

Use concatenation to join strings and/or variables. The empty space between the quotation marks (" ") represents a space. The plus sign is the concatenation operator. If you capture multiple strings or variables that you need to repeat together, you use concatenation. For example, if you have collected first and last names from users, you might want to return them together in a sentence. You might want to include a standard welcome message with the person's name.

Variables

Use variables to store numbers and strings. When you collect information from a user on a form, you will store it in a variable. Then you can use it when you need to in a program. You can use variables to store strings, numbers and other data types. The var prefix is optional. We will be using generic variables in these tutorials, but there is also the "let" prefix for assigning block scope to a variable and "const" for defining constants whose values should not change throughout a program.

Another method for joining strings and variables is to use template literals. Template literals allow you to identify a variable as such, ${variablename}, and use it in a string that is identified with a backtick ` (the item to the left of the number 1 on your keyboard). This allows you to present the variables within the lines of text. This will be helpful as you start writing html with variables.

You can use the typeof method to determine the data type that JavaScript is interpreting of a variable.

typeof variablename;

Substrings

A substring identifies a portion of a string. Use these scripts to find your popstar name (like JLo). Consider the algorithm: find the first character of first name and the first two characters of last name. What's your popstar name?

The substring method takes two arguments - a start and end position in the string, the first position in the string is 0.

Numbers

You can use numbers for a variety of operations in JavaScript. Numbers can be integers (whole numbers) or floats (decimals). You can use numbers to make calculations. They can be stored in variables to be used throughout a program. The code samples to the right show examples of using numbers for addition, subtraction, multiplication and division. The final example calculates the modulo or remainder of division calculation.

Alerts, Confirms and Prompts

You use alerts, confirms and prompts to gain the attention of users via a dialog box.

Alert - a general warning

Confirm - answer yes or no before you can continue.

Prompt - answer anything - creates a variable. This is our first example of being able to interact with a user and store their input.

if Statements

Perhaps the most important aspect of programming is being able to apply logic to decision making. When given a choice between multiple options, you need to be able to provide instructions for each scenario. That's where "if statements" can be used.

A boolean is a special kind of data type. You use booleans to test if something is true or false. You can combine with an if/else statement to define different outcomes. Notice that the if statement actions are delineated with curly braces. You can also test for mathematical statements like greater than >, less than < or equal to ===. You can also use !== to test if something is not equal.

Comparisons (= or == or ===)

A single equal sign (=) indicates assignment, usually used to assign a value to a variable. If you are doing a test for comparison, then you use 2 equal signs (==) or 3 equal signs (===). Three equal signs designate "strict equivalence" which eliminates some of JavaScripts loose interpretations of numbers and strings. We used the assignment and comparison operators in the examples above.

You can use operators to include statements to indicate "and" and "or" in your booleans. These operators are && and ||.

Examples:
2+2===4; This would evaluate to "true"

name="Cindy"; This is example of assignment
if(name.length >=3 && name.length <= 10) {...} This is example of comparison in an if statement, using the && operator. This tests the condition that the length of the variable is between 3 and 10, thus creating a range.

You can use "if else" to include additional conditions for the if statement. If you are working on a program that requires several "if else" statements, you might consider using the switch syntax instead. We won't go over it, but review that example at the link, to familiarize yourself with its usage.

Loops

Loops allow for iteration through a cycle. In programming, you often need to perform an action over and over again, until a certain condition is satisfied. There are two kinds of loops: while and for.

The "while" loop is a series of statements that define initializer, condition and iterator to describe how the loop should operate.

initializer - where you start counting; often 0 or 1, but can be any number that you want to start the loop's counting. You store the initializer in a variable, often used with "i".

condition - this is the condition that must be satisfied for the loop to end

iterator - this is the instruction for how to increment the loop. Loops usually increment by 1 during each cycle, but can increment by an amount.

The examples below do the same thing, incrementing the iterator by one. You include this at the end of the loop so it executes each time until the condition is met.

i=i+1 i++

You provide the instructions to be executed during each iteration of the loop within the curly braces.

The "for" loop reduces some of the coding by having three statements in the parentheses, separated by a semicolon (;) - an initializer, a condition to test and an iterator. See the example to the right. The iterator can also be used in the loop to return the place each time through the loop. But be familiar with the while loop syntax, because there are some problems where it may need to be used in lieu of a "for" loop, particularly when some of the elements are unknown when the program initializes.

for (i=0; i<4; i++)

Arrays

Arrays allow you to store a collection of information in a variable and then access it via its index number. So far, we have stored one item in a variable. Arrays let you store a list of items that can be accessed by an index number. Index numbers start with 0. Enclose elements of an array in square brackets.

Arrays are useful for storing information collected from each iteration of a loop. They can also be used to store simple data in a text format.

You initialize an array like a variable, but you include the list items with square brackets.
favGroups = ["Old 97s", "Spoon", "Wilco"];

You can add an element to an array with the push method.
favGroups.push("Quiet Company")

The favGroups array would now have four elements in it after pushing the new item. The new item is added to the end of the array.

Objects

Objects are similar to arrays except they store items in key-value pairs rather than accessing them by their index number. This allows us to store more of a dictionary of data, including an item and it's meaning. Instead of using square brackets, you use curly braces for objects.

 

Functions

Functions allow you to define an operation and then use it later. Notice the statements in the function are enclosed in curly braces. Then we call the function using its name to execute it. Functions can be stated or developed in a variable, depending on how you want to use the result later.

EMCAScript 6 introduced arrow function syntax that simplifies function definition. See the examples. These exercises generally use the "function" keyword to specifically highlight its usage, but you may see scripts that use the arrow notation as you learn more about JavaScript.

Parameters and Arguments

Often you will need to pass something into a function, a number or string or a variable calculated from elsewhere in the program. This is called a parameter. When you call the function, you provide the argument that replaces the parameter in the function. Now you can call this function multiple times with different inputs.

EMCAScript 6 introduced the inclusion of default values for parameters. This allows the function to work, even if no values are passed into it when the function is called. See the examples.