JavaScript Basics
Topics:
- What is a Programming Language?
- High vs Low Level
- JavaScript:
- Getting Feedback
- Basic syntax
- Variables
- Primitive Data-Types
- Control Flow
- Loops
- Practice:
- A Guessing Game
Get Your Laptops:
I'll be asking you to follow along, and write lots of code during this presentation.
Goto: https://repl.it/
Notes: http://bit.ly/1PgFDGl
Take it further by adding HTML & CSS:
http://workshops.galvanize.com/learn-to-code/2-js-intro.html
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;
}
}
JavaScript:
console.log("hello world");
The classic first program: "Hello World"
Go To: https://repl.it
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
Just Like that, We're programming!
console.log("hello world");
So ... why did this work?
For now, console.log() is a way to get feedback from the computer about the programs we write.
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.");
Questions?
About JavaScript
Programming
Galvanize
... etc.
Thank You For Coming!
Learn To Code Meetup: JS Basics
By Tyler Bettilyon
Learn To Code Meetup: JS Basics
- 1,993