What is programming?
Programming is providing instructions (like a cooking recipe) for computers to execute (like a chef).
How do we provide the instructions?
We provide computers with instructions by creating plain text files (e.g. my_code.txt) in a text editor like Windows’ Notepad or Mackintosh TextEdit. In this text file we add lines of code called statements. By default these statements are executed top to bottom. Statements are composed using a programming language such as JavaScript that defines reserved key-words that have special meaning in the language, and also literal values like numbers and text content, additionally we also use special symbols including the ones for basic arithmetic. If you already know how to give accurate “idiot-proof” directions in any area of your expertise then you are well on your way to learning to program.
Keyboard for Programmers
Programmers use both common and uncommon keys on the keyboard. In both cases that have special names for the key as used in the programming context. Please use the following table to update your keyboarding terminology.
| is known as the "pipe", "bar", or logical "OR" (especially when in a pair; e.g. "||"), can also to redirect output.
+ is known as "plus" and is used as the arithmetic addition operator. Can also be used to chain (concatenate) together.
- is known as the "dash" or "minus-sign" and is used as the arithmetic subtraction operator. Also used to prefix "flags".
* is known as the "star" or "splat", asterisk. It may represent multiplication, or a wild-card. Also used for multiplication.
/ is known as "slash" or "whack". It is used for arithmetic division, found on the "?" key. Used to separate path components.
\ is known as the "back-slash" and it is usually found on the same key as the "|" (vertical-bar). Used to "escape" characters.
{ is known as a the opening "curly" which is short for curly-brace/bracket. Begin block, or begin template expression.
} is known as a the closing "curly" which is short for curly-brace/bracket. End block, or end template expression
[ is known as a the opening "square bracket" which is short for square brace/bracket. Begin Array/List.
] is known as a the closing "square bracket" which is short for square brace/bracket. End Array/List.
< is known as a the opening "angle bracket" which is short for less-than symbol. Begin Tag.
> is known as a the closing "angle bracket" which is short for greater-than symbol. Eng Tag. also used as a Prompt.
` is known as the "back-tick" or "grave-accent". Usually found on the top left of your keyboard. Template String.
~ is known as "tilde" (Till-Duh) and is found above "`" (back-tick) and often means HOME directory, or approximate.
! is known as the "bang" (as in Bang!!!) and sometimes mean a logical NOT/invert.
# is known as the "hash" and is usually accessed as SHIFT-3 often used as the comment character in scripts.
& is known as the "and" or ampersand, or the logical "AND" (especially when in a pair e.g. "&&"), or to run in background.
^ is known as the "caret" and is sometimes used as the arithmetic power symbol, or to indicate position. Also used to replace.
; is known as the "semi-colon" and is sometimes used as a line/statement "terminator" to separate statement;
: is known as the "colon" used separate two parameters that are taken together. attribute:value, key:value, color:red, 25:9range Comments
Comments are full or partial lines of code that are only for programmers and are ignored by the computer.
Two slash characters (// Comment) are used to begin a single line comment; everything from there up to the end of the line are ignored.
Slash-Star and Star-Slash are used surround a block comment.
/* Block Comment */
Statements
Programs are written as plain-text files that are comprised of a series of lines of text.
A single “line” of code is called a statement.
To see a variety of example statements; follow this link:
https://github.com/kevinelong/intro_to_javascript
/*
For context visit this link:
https://clvrclvr.com/content/?p=181
*/
//Put peaches into the variable name "jar".
jar = "peaches"
//FANCIER VARIABLE DECLARATIONS
let can = "beans" //Indicates it is mutable(can be changed).
const glass = "water" //Indicates it is immutable(can't be changed).
//Output the contents of the variable name "jar". Using the key-words console.log().
console.log(jar)
// math operators
console.log(12 + 12) // Addition
console.log(12 - 12) // Subtraction
console.log(12 / 12) // Division
console.log(12 * 12) // Multiplication
// NOTE: A single "=" is the assignment operator.
// logical operators - output boolean (true/false)
console.log(12 == 12) // EQUALS - The comparison operator (Looks like balancing scales)
console.log(12 > 12) // GREATER THAN
console.log(12 < 12) // LESS THAN
console.log(12 >= 12) // GREATER OR EQUAL
console.log(12 <= 12) // LESS THAN OR EQUAL
console.log(12 != 12) // < > NOT EQUAL (BANG EQUAL)
//Using the boolean value key-words: true and false
of_age = true
can_see = true
can_drive = of_age && can_see // LOGICAL AND
has_dr_note = false
has_note_from_parent = true
is_excused = has_dr_note || has_note_from_parent // LOGICAL OR
// SIMPLE DATA TYPES
let Jar_2 = "apples"; // string - list of characters
const PI = 3.14159; // floating point decimal (fraction)
const quantity = 144; //integer - whole numbers
// COMPLEX DATA TYPES
//ARRAY OF STRING
let list = []; //empty Array AKA List of items
let fruit = ["apples", "oranges", "pears"];
console.log(fruit[0]); //ACCESS BY INDEX - OFFSET FROM BEGINNING
console.log(fruit[1]);
console.log(fruit[2]);
// ANY TYPE CAN BE IN AN ARRAY
let numbers = [13, 7, 42];
console.log(numbers[0]); //ACCESS BY INDEX - OFFSET FROM BEGINNING
console.log(numbers[1]);
console.log(numbers[2]);
let person = {}; // empty object
let kevin = {name:"Kevin Long", age: 53};
let nina = {
name:"Nina",
age: 43
};
console.log(nina["age"]); //VERBOSE - WORDY
console.log(nina.age); //CONCISE - dot notation
console.log(kevin["name"]); //VERBOSE - WORDY
console.log(kevin.name); //CONCISE - simple dot notation
function add_two(a, b){
return a + b;
}
console.log(add_two(100, 10));
console.log(add_two("engine", "caboose")) //CONCATENATE STRINGS
console.log("engine" + "boxcar" + "caboose")
let age = 99;
const LIMIT = 21;
const OLD = 50;
const ANCIENT = 80;
//FLOW CONTROL
//BRANCHES
if (age >= ANCIENT){
console.log("Why not?");
}else if (age >= OLD){
console.log("Not Recommended");
}else if(age >= LIMIT){
console.log("Allowed");
}else{
console.log("NOT ALLOWED!")
}
//LOOPS
//For
//CLASSIC THREE PART INITIAL;BOOL;ITERATOR i=i+1
for(let i=0; i < 5; i++){ // middle expression is true i = i + 1
console.log(i);
}
// WHILE
let count = 10;
while(count > 0){ //HOW DO WE KNOW WE ARE DONE - WHEN FALSE, WE STOP
console.log(count);
count--; //count = count - 1
}
console.log("blast off!!!")
//FOR EACH - NEW SCHOOL - CONSICE - SHORT WAY
data = ["apples", "oranges", "bananas"]
data.forEach(fruit => console.log(fruit)); // ARROW/LAMBDA function
//OLD SCHOOL - VERBOSE - LONG WAY
for(let i=0; i < data.length; i++){ // middle expression is true i = i + 1
console.log(data[i]);
}
/*
// OOP (Object Oriented Programming) - Class
class Item{
constructor(height, width){
this.height = height; //PROPERTIES AKA ATTRIBUTES
this.width = width;
}
get_area(){ //functions in a class are called METHODS
return this.height * this.width;
}
}
let item = new Item(30,20);
console.log(item.get_area())
// DRY - Don't Repeat Yourself.
// Class Inheritance
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`); //` is under ~ tilde
// Templates back-tick grave-accent `
}
}
let a = new Animal('wolf');
a.speak();
class Dog extends Animal {
constructor(name, color) {
super(name); // call the super class constructor and pass in the name parameter
this.color=color;
}
speak() { //OVERRIDES THE METHOD
console.log(`The ${this.color} dog named ${this.name} barks!`);
}
}
let d = new Dog('Dandy',"Black");
d.speak(); // Dandy barks.
*/