What IS a Programming Language?

Two Competing Goals

Programming languages must be able to communicate effectively to both humans AND computers.

But computers only truly understand binary.

High Level vs Low Level

To address this need "high level" languages are translated into machine language by other programs.

This process is called "compilation".

section .text
    global _start
_start:
    mov edx,len
    mov ecx,msg
    mov ebx,1
    mov eax,4
    int 0x80
    
    mov eax,1
    int 0x80 

section .data
msg db 'Hello, world!', 0xa
len equ $ - msg

011010010100110
111010101010101
101010000111101
101001111010101
100101010001111
111101101100011
110001101000110
010101010100000
001110100101000
011011110111000
100111001100000

for(var i = 0; i < input.length; i++){
    var c = input[i];

    if(count[c] === undefined) {
	count[c] = 1;
    }
    else {
	count[c] += 1;
    }
}

High Level vs Low Level

Lucky for us, knowing these two is completely unnecessary for the vast majority of professional programmers.

section .text
    global _start
_start:
    mov edx,len
    mov ecx,msg
    mov ebx,1
    mov eax,4
    int 0x80
    
    mov eax,1
    int 0x80 

section .data
msg db 'Hello, world!', 0xa
len equ $ - msg

011010010100110
111010101010101
101010000111101
101001111010101
100101010001111
111101101100011
110001101000110
010101010100000
001110100101000
011011110111000
100111001100000

for(var i = 0; i < input.length; i++){
    var c = input[i];

    if(count[c] === undefined) {
	count[c] = 1;
    }
    else {
	count[c] += 1;
    }
}

Just Like that, We're programming!

console.log("hello world");

So ... why did this work?

Just Like that, We're programming!

console.log("hello world");

So ... why did this work?

console is an "Object" built into JavaScript

Just Like that, We're programming!

console.log("hello world");

So ... why did this work?

console is an "Object" built into JavaScript

log is a "property" of console

Just Like that, We're programming!

console.log("hello world");

So ... why did this work?

console is an "Object" built into JavaScript

log is a "property" of console

the log "property" is a "function" that prints information for programmers to see

Lets get MORE feedback...

console.log(5);

Try this in repl

console.log(hello world);

Try this in repl

Lets get MORE feedback...

console.log(5);

Try this in repl

console.log(hello world);

Try this in repl

(Sweet we got 5!)

Uh oh:

SyntaxError: missing ) after argument list

Lets get MORE feedback...

console.log(hello world);

Uh oh:

SyntaxError: missing ) after argument list

The computer is telling us that this statement doesn't follow the "rules" of JavaScript.

The Computer can't translate this to machine language.

Syntax / Grammer

Just like a spoken language, computer languages have rules.

The rules of computer languages are MUCH LESS flexible.

Syntax / Grammer

Consider this English "sentence":

"Ball she kick the fence higher than."

Syntax / Grammer

Consider this English "sentence":

"Ball she kick the fence higher than."

A human may be able to guess the intent:

"She kicked the ball higher than the fence."

Syntax / Grammer

Computers however are extremely pedantic. Instead of guessing our intent, computers act as a grammarian on the internet might.

"SyntaxError: missing ) after argument list"

means

"This isn't proper JS, I don't know what to do."

Data Types

console.log(hello world);
console.log("hello world");

So ... The difference between these two?

Data Types

console.log(hello world);
console.log("hello world");

The quotes have very specific meaning!

Anything in-between quotes becomes a "string" which means a group of text.

Data Types

console.log(5)
console.log("hello world");

Numbers are automatically data!

Both of these are "legal" JavaScript

Data Types

console.log(5)
console.log("hello world");

console.log(5 + 7);
console.log("hello " + "world");

Numbers and strings can both be manipulated!

Variables

var myFirstVariable = "Hello World";
var five = 5;
var nothingInParticular;

Variables are a way to store data.

Variables

var myFirstVariable = "Hello World";
var five = 5;
var nothingInParticular;

Variables are a way to store data.

console.log(myFirstVariable);
console.log(five);
console.log(nothingInParticular);

And use it later!

Variables

var myFirstVariable = "Hello World";
console.log(myFirstVariable);

var myFirstVariable = 5;
console.log(myFirstVariable);

Variables are like boxes -- we can put anything in them, and we can change whats inside!

Variables

var 5Teams;

Variable names have syntax rules:

• Variable names cannot have spaces
• Variable names cannot start with a number

var teams rule;

SyntaxError: identifier starts immediately after numeric literal

SyntaxError: missing ; before statement

Variables

Variables can be manipulated, just like data:

var five = 5;
var seven = 7;

console.log(5 + 7);
console.log(five + seven);

var fiveStr = '5';
var sevenStr = '7';

console.log('5' + '7');
console.log(fiveStr + sevenStr);

Data-Types Revisited

There are 5 "primitive" data-types.

• numbers
• strings
• booleans
• undefined
• null

Numbers

Both integer and floating point numbers are allowed and can be manipulated with arithmetic operations:

7,

7.5,

1.123456,

100,

99

... these are all valid .

Strings

Strings are a block of text. Text is a very common data-type, used to send information in the form of HTML to websites, communicate between programs, and keep track of information which is important to humans (who are typically good at reading textual information)

Booleans

true or false. These can be used to answer questions about data, such as "Is this variable equal to 10?"

Undefined

A special value meaning "This variable has not been given a value."

Null

Similar to undefined, but used to mean "The value of this variable is nothing."

Why Null & Undefined?

To be perfectly frank: This is a weakness of JavaScript.

Most programming languages only have 1 reserved value for "nothing".

JavaScript has 2.

Test It Out!

var notGivenAnyValue;
var theTruth = true;
var lies = false;
var explicitlyEmpty = null;

console.log(notGivenAnyValue);
console.log(theTruth);
console.log(lies);
console.log(expliticlyEmpty);

Control Flow

Programs normally execute the same way humans read English:

"Left to Right, Top to Bottom"

Sometimes we don't want that behavior!

Control Flow - If

if(true) {
    console.log("this happens");
}

if(false) {
    console.log("this does not");
}

Control Flow - If / else

if(false) {
    console.log("this does not happen");
}
else {
    console.log("this DOES happen");
}

Control Flow - If / else if / else

if(false) {
    console.log("nope");
}
else if(true) {
    console.log("yep");
}
else {
    console.log("nope");
}

Control Flow - Better than Bool

console.log(1 === 1); // does one equal one?
console.log(1 === 2); // does one equal two?
console.log(1 < 3);   // is one less than three?
console.log(1 > -3);  // is one greater than negative 3?

var a = 0;
if(a < 3) {
    console.log("a is less than three");
{

Using Booleans directly is pretty uninteresting. Lets use "comparison operators"!

Control Flow - Better than Bool

==   "Equal after type conversion"
!=   "Not equal after type conversion"
===  "Equal, both in type and value"
!==  "Not equal in either type or value"

<    "Less than"
<=   "Less than or equal"
>    "Greater than"
>=   "Greater than or equal"

There are many Comparison Operators

Control Flow - Better than Bool

// false, because at least one is false
console.log(true && false); 

// true, because at least one is true
console.log(true || false);

// Type conversion: the number 1 double-equals the string '1'
// Both are true, so this logs true
console.log(1 === 1 && 1 == '1');

Booleans can be "chained" with and as well as or:

Loops

var loopCounter = 0;
while(loopCounter < 10) {
    console.log(loopCounter)
    loopCounter++;
}
console.log("Loop has ended");

Consider the Following:

Loops

var loopCounter = 0;
while(loopCounter < 10) {
    console.log(loopCounter)
    loopCounter++;
}
console.log("Loop has ended");

The "Loop Condition" controls when the loop continues or ends.

"While loopCounter is less than ten"

Loops

while(true) {
    console.log("here we go again...");
}

The "Loop Condition" can be formulated badly....

Loops

for(var i = 0; i < 10; i++) {
	console.log(i);
}
console.log("The loop has ended");

We also get "for" loops!

For loops have 3 "parameters" instead of 1:

• Setup statement
• Loop Condition
• "Increment" step

Loops

for(var i = 0; i < 10; i++) {
	console.log(i);
}
console.log("The loop has ended");

These two loops achieve the same result:

var loopCounter = 0;
while(loopCounter < 10) {
	console.log(loopCounter)
	loopCounter++;
}
console.log("Loop has ended");

Game Time

Lets Create a Guessing Game!

• Computer picks a random number
• Human is prompted to guess
• Computer tells is if the number is:
  • Too high
  • Too low
  • Just right
• Until we guess right, we guess again!

Work with your neighbors, ask me questions!

Game Time

Lets Create a Guessing Game!

var randomNumber = Math.floor(Math.random() * 100);
var userGuess = -1;

while(userGuess !== randomNumber) {
	userGuess = parseInt(prompt("Make a guess!"));
	
	if(userGuess > randomNumber) {
		alert("too high");	
	}
	else if(userGuess < randomNumber) {
		alert("too low");
	}
	else if(userGuess === randomNumber) {
		alert("YOU GOT IT, the number was: " + randomNumber);
	}
	else {
		alert("I don't think that was a number ... " + userGuess);
	}
}

console.log("Thanks for playing.");