Programming Corner - Programming vs Code

[Steve Carroll]

There actually is a difference. So what is it? A simple example
'program' to 'countLetterFrequency' in a text string:

The program:
step 1: get (or create) something to store letter counts
step 2: 'loop' through the letters, one at a time
step 3: provide a way for each letter occurrence to be counted
step 4: 'return' the counts

Example string: 'hello world'


This is something you could do visually and end up with...

h = 1, e = 1, l = 3, o = 2, w = 1, r = 1, d = 1

... using a pencil and paper.


In JS, a good means of storing letter counts is the JS 'object'. Head to
your browser's dev tools 'Console' tab and run this, which uses 'let',
the '=' sign and 'curly braces':

let yourCar = {} // creates an empty object

How do we put things into this object?

One way is 'bracket notation'... in the console again:

yourCar['make'] = 'Toyota';

How to access this 'object'? Use it's name:

yourCar // outputs: { make: 'Toyota' }

How to access the 'value' of a 'property' belonging to an 'object':

yourCar['make'] // outputs: 'Toyota'

So... 'yourCar' is an object with one property, 'make', and that
property has a value of 'Toyota' (that's the lingo).

Elsewhere, along with 'bracket notation', 'if/else' and the 'for...of'
loop, we also covered '=' and '+='. Look at the following image and
think about 'curly braces', 'bracket notation', '=' and '+='

<Loading Image...>

Can you figure out what's going on there just by looking? If you looked
closely (especially at the accumulating counts), the following may not
be so confusing:


function countLetterFrequency(text) {
const count = {} // empty object to store letter counts in

for (let letter of text) { // loop through text, one letter at a time

if (count[letter] === undefined) { // check if current letter is in 'count'

count[letter] = 1 // if not, set initial count to 1

} else {

count[letter] += 1 // if letter is in count, increase count by 1

}
}

return count // return 'count' object
}

countLetterFrequency('hello world')
// output: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }


That's code... one version of it, anyway... for our 'program'.

Here's another, using something called the 'ternary operator':

function countLetterFrequency3(text) {
const count = {}
for (let letter of text) count[letter] === undefined ? count[letter] = 1 : count[letter] += 1
return count
}

I'm not recommending the use of the ternary operator here, just showing
it could be used (but if/else is easier to read). Notice even the curly
braces of the 'for... of' loop have been omitted. There can be different
'looks' to JS you'll see 'out in the wild', don't let them deter you.


--

Reference page:
<vmekhl$74sp$***@fretwizzer.eternal-september.org>

Setup:
<vmgi9e$u5m6$***@fretwizzer.eternal-september.org>

Variables:
<vmh41h$u5m6$***@fretwizzer.eternal-september.org>

Functions:
<vmh7ln$u5m6$***@fretwizzer.eternal-september.org>

Arrays/looping:
<vmmi7n$3edp3$***@fretwizzer.eternal-september.org>

Calculator project - Part 1
<vmjd3a$2bdqi$***@fretwizzer.eternal-september.org>

Calculator project - Part 2
<vmrch2$14j7l$***@fretwizzer.eternal-september.org>

DOM - Part 1
<vmubfb$1pvlc$***@fretwizzer.eternal-september.org>

Text generator project - Part 1
<vmug55$1pvlc$***@fretwizzer.eternal-september.org>

Text generator project - Part 2
<vn66pb$36go$***@fretwizzer.eternal-september.org>

Text generator project - Part 3
<vn69if$56c0$***@fretwizzer.eternal-september.org>

[Gremlin]

Post by Steve Carroll
There actually is a difference. So what is it? A simple example
step 1: get (or create) something to store letter counts
step 2: 'loop' through the letters, one at a time
step 3: provide a way for each letter occurrence to be counted
step 4: 'return' the counts
Example string: 'hello world'
This is something you could do visually and end up with...
h = 1, e = 1, l = 3, o = 2, w = 1, r = 1, d = 1
... using a pencil and paper.
In JS, a good means of storing letter counts is the JS 'object'. Head to
your browser's dev tools 'Console' tab and run this, which uses 'let',
let yourCar = {} // creates an empty object
How do we put things into this object?
yourCar['make'] = 'Toyota';
yourCar // outputs: { make: 'Toyota' }
yourCar['make'] // outputs: 'Toyota'
So... 'yourCar' is an object with one property, 'make', and that
property has a value of 'Toyota' (that's the lingo).
Elsewhere, along with 'bracket notation', 'if/else' and the 'for...of'
loop, we also covered '=' and '+='. Look at the following image and
think about 'curly braces', 'bracket notation', '=' and '+='
<https://i.postimg.cc/819WZpMv/manual-counting.gif>
Can you figure out what's going on there just by looking? If you looked
closely (especially at the accumulating counts), the following may not
function countLetterFrequency(text) {
const count = {} // empty object to store letter counts in
for (let letter of text) { // loop through text, one letter at a time
if (count[letter] === undefined) { // check if current letter is in 'count'
count[letter] = 1 // if not, set initial count to 1
} else {
count[letter] += 1 // if letter is in count, increase count by 1
}
}
return count // return 'count' object
}
countLetterFrequency('hello world')
// output: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }
That's code... one version of it, anyway... for our 'program'.
function countLetterFrequency3(text) {
const count = {}
for (let letter of text) count[letter] === undefined ? count[letter]
= 1 : count[letter] += 1 return count
}
I'm not recommending the use of the ternary operator here, just showing
it could be used (but if/else is easier to read). Notice even the curly
braces of the 'for... of' loop have been omitted. There can be different
'looks' to JS you'll see 'out in the wild', don't let them deter you.
--
Calculator project - Part 1
Calculator project - Part 2
DOM - Part 1
Text generator project - Part 1
Text generator project - Part 2
Text generator project - Part 3

Awesome Job here Steve! I like your teaching style as well as your effort to
make a thread that is on topic!
If I had the free time, I'd join you in this!

[Brock McNuggets]

Post by Gremlin

Post by Steve Carroll
There actually is a difference. So what is it? A simple example
step 1: get (or create) something to store letter counts
step 2: 'loop' through the letters, one at a time
step 3: provide a way for each letter occurrence to be counted
step 4: 'return' the counts
Example string: 'hello world'
This is something you could do visually and end up with...
h = 1, e = 1, l = 3, o = 2, w = 1, r = 1, d = 1
... using a pencil and paper.
In JS, a good means of storing letter counts is the JS 'object'. Head to
your browser's dev tools 'Console' tab and run this, which uses 'let',
let yourCar = {} // creates an empty object
How do we put things into this object?
yourCar['make'] = 'Toyota';
yourCar // outputs: { make: 'Toyota' }
yourCar['make'] // outputs: 'Toyota'
So... 'yourCar' is an object with one property, 'make', and that
property has a value of 'Toyota' (that's the lingo).
Elsewhere, along with 'bracket notation', 'if/else' and the 'for...of'
loop, we also covered '=' and '+='. Look at the following image and
think about 'curly braces', 'bracket notation', '=' and '+='
<https://i.postimg.cc/819WZpMv/manual-counting.gif>
Can you figure out what's going on there just by looking? If you looked
closely (especially at the accumulating counts), the following may not
function countLetterFrequency(text) {
const count = {} // empty object to store letter counts in
for (let letter of text) { // loop through text, one letter at a time
if (count[letter] === undefined) { // check if current letter is in 'count'
count[letter] = 1 // if not, set initial count to 1
} else {
count[letter] += 1 // if letter is in count, increase count by 1
}
}
return count // return 'count' object
}
countLetterFrequency('hello world')
// output: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }
That's code... one version of it, anyway... for our 'program'.
function countLetterFrequency3(text) {
const count = {}
for (let letter of text) count[letter] === undefined ? count[letter]
= 1 : count[letter] += 1 return count
}
I'm not recommending the use of the ternary operator here, just showing
it could be used (but if/else is easier to read). Notice even the curly
braces of the 'for... of' loop have been omitted. There can be different
'looks' to JS you'll see 'out in the wild', don't let them deter you.
--
Calculator project - Part 1
Calculator project - Part 2
DOM - Part 1
Text generator project - Part 1
Text generator project - Part 2
Text generator project - Part 3

Awesome Job here Steve! I like your teaching style as well as your effort to
make a thread that is on topic!
If I had the free time, I'd join you in this!

That would be great!

[Steve Carroll]

Post by Gremlin
Awesome Job here Steve!

Thanks.

Post by Gremlin
I like your teaching style as well as your effort to
make a thread that is on topic!

Well, HWSNBN *had* been behaving himself... but I figure it was only a matter
of time.

Post by Gremlin
If I had the free time, I'd join you in this!

I appreciate people just reading or glancing over it!

[pothead]

Post by Gremlin

Post by Steve Carroll
There actually is a difference. So what is it? A simple example
step 1: get (or create) something to store letter counts
step 2: 'loop' through the letters, one at a time
step 3: provide a way for each letter occurrence to be counted
step 4: 'return' the counts
Example string: 'hello world'
This is something you could do visually and end up with...
h = 1, e = 1, l = 3, o = 2, w = 1, r = 1, d = 1
... using a pencil and paper.
In JS, a good means of storing letter counts is the JS 'object'. Head to
your browser's dev tools 'Console' tab and run this, which uses 'let',
let yourCar = {} // creates an empty object
How do we put things into this object?
yourCar['make'] = 'Toyota';
yourCar // outputs: { make: 'Toyota' }
yourCar['make'] // outputs: 'Toyota'
So... 'yourCar' is an object with one property, 'make', and that
property has a value of 'Toyota' (that's the lingo).
Elsewhere, along with 'bracket notation', 'if/else' and the 'for...of'
loop, we also covered '=' and '+='. Look at the following image and
think about 'curly braces', 'bracket notation', '=' and '+='
<https://i.postimg.cc/819WZpMv/manual-counting.gif>
Can you figure out what's going on there just by looking? If you looked
closely (especially at the accumulating counts), the following may not
function countLetterFrequency(text) {
const count = {} // empty object to store letter counts in
for (let letter of text) { // loop through text, one letter at a time
if (count[letter] === undefined) { // check if current letter is in 'count'
count[letter] = 1 // if not, set initial count to 1
} else {
count[letter] += 1 // if letter is in count, increase count by 1
}
}
return count // return 'count' object
}
countLetterFrequency('hello world')
// output: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }
That's code... one version of it, anyway... for our 'program'.
function countLetterFrequency3(text) {
const count = {}
for (let letter of text) count[letter] === undefined ? count[letter]
= 1 : count[letter] += 1 return count
}
I'm not recommending the use of the ternary operator here, just showing
it could be used (but if/else is easier to read). Notice even the curly
braces of the 'for... of' loop have been omitted. There can be different
'looks' to JS you'll see 'out in the wild', don't let them deter you.
--
Calculator project - Part 1
Calculator project - Part 2
DOM - Part 1
Text generator project - Part 1
Text generator project - Part 2
Text generator project - Part 3

Awesome Job here Steve! I like your teaching style as well as your effort to
make a thread that is on topic!
If I had the free time, I'd join you in this!

Agree.
As a non programmer/coder/scripter/ I have picked up some information.
SC does a great job of spoon feeding but leaving out enough to make the reader think
a bit to complete the thought.
It's so nice to see some tech discussion without the resident village idiot infecting the thread.

[%]

Post by pothead

Post by Gremlin

Post by Steve Carroll
There actually is a difference. So what is it? A simple example
step 1: get (or create) something to store letter counts
step 2: 'loop' through the letters, one at a time
step 3: provide a way for each letter occurrence to be counted
step 4: 'return' the counts
Example string: 'hello world'
This is something you could do visually and end up with...
h = 1, e = 1, l = 3, o = 2, w = 1, r = 1, d = 1
... using a pencil and paper.
In JS, a good means of storing letter counts is the JS 'object'. Head to
your browser's dev tools 'Console' tab and run this, which uses 'let',
let yourCar = {} // creates an empty object
How do we put things into this object?
yourCar['make'] = 'Toyota';
yourCar // outputs: { make: 'Toyota' }
yourCar['make'] // outputs: 'Toyota'
So... 'yourCar' is an object with one property, 'make', and that
property has a value of 'Toyota' (that's the lingo).
Elsewhere, along with 'bracket notation', 'if/else' and the 'for...of'
loop, we also covered '=' and '+='. Look at the following image and
think about 'curly braces', 'bracket notation', '=' and '+='
<https://i.postimg.cc/819WZpMv/manual-counting.gif>
Can you figure out what's going on there just by looking? If you looked
closely (especially at the accumulating counts), the following may not
function countLetterFrequency(text) {
const count = {} // empty object to store letter counts in
for (let letter of text) { // loop through text, one letter at a time
if (count[letter] === undefined) { // check if current letter is
in 'count'
count[letter] = 1 // if not, set initial count to 1
} else {
count[letter] += 1 // if letter is in count, increase count by 1
}
}
return count // return 'count' object
}
countLetterFrequency('hello world')
// output: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }
That's code... one version of it, anyway... for our 'program'.
function countLetterFrequency3(text) {
const count = {}
for (let letter of text) count[letter] === undefined ? count[letter]
= 1 : count[letter] += 1 return count
}
I'm not recommending the use of the ternary operator here, just showing
it could be used (but if/else is easier to read). Notice even the curly
braces of the 'for... of' loop have been omitted. There can be different
'looks' to JS you'll see 'out in the wild', don't let them deter you.
--
Calculator project - Part 1
Calculator project - Part 2
DOM - Part 1
Text generator project - Part 1
Text generator project - Part 2
Text generator project - Part 3

Awesome Job here Steve! I like your teaching style as well as your effort to
make a thread that is on topic!
If I had the free time, I'd join you in this!

Agree.
As a non programmer/coder/scripter/ I have picked up some information.
SC does a great job of spoon feeding but leaving out enough to make the reader think
a bit to complete the thought.
It's so nice to see some tech discussion without the resident village idiot infecting the thread.

happy boner day wing nut

[Brock McNuggets]

Post by %

Post by pothead

Post by Gremlin

Post by Steve Carroll
There actually is a difference. So what is it? A simple example
step 1: get (or create) something to store letter counts
step 2: 'loop' through the letters, one at a time
step 3: provide a way for each letter occurrence to be counted
step 4: 'return' the counts
Example string: 'hello world'
This is something you could do visually and end up with...
h = 1, e = 1, l = 3, o = 2, w = 1, r = 1, d = 1
... using a pencil and paper.
In JS, a good means of storing letter counts is the JS 'object'. Head to
your browser's dev tools 'Console' tab and run this, which uses 'let',
let yourCar = {} // creates an empty object
How do we put things into this object?
yourCar['make'] = 'Toyota';
yourCar // outputs: { make: 'Toyota' }
yourCar['make'] // outputs: 'Toyota'
So... 'yourCar' is an object with one property, 'make', and that
property has a value of 'Toyota' (that's the lingo).
Elsewhere, along with 'bracket notation', 'if/else' and the 'for...of'
loop, we also covered '=' and '+='. Look at the following image and
think about 'curly braces', 'bracket notation', '=' and '+='
<https://i.postimg.cc/819WZpMv/manual-counting.gif>
Can you figure out what's going on there just by looking? If you looked
closely (especially at the accumulating counts), the following may not
function countLetterFrequency(text) {
const count = {} // empty object to store letter counts in
for (let letter of text) { // loop through text, one letter at a time
if (count[letter] === undefined) { // check if current letter is
in 'count'
count[letter] = 1 // if not, set initial count to 1
} else {
count[letter] += 1 // if letter is in count, increase count by 1
}
}
return count // return 'count' object
}
countLetterFrequency('hello world')
// output: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }
That's code... one version of it, anyway... for our 'program'.
function countLetterFrequency3(text) {
const count = {}
for (let letter of text) count[letter] === undefined ? count[letter]
= 1 : count[letter] += 1 return count
}
I'm not recommending the use of the ternary operator here, just showing
it could be used (but if/else is easier to read). Notice even the curly
braces of the 'for... of' loop have been omitted. There can be different
'looks' to JS you'll see 'out in the wild', don't let them deter you.
--
Calculator project - Part 1
Calculator project - Part 2
DOM - Part 1
Text generator project - Part 1
Text generator project - Part 2
Text generator project - Part 3

Awesome Job here Steve! I like your teaching style as well as your effort to
make a thread that is on topic!
If I had the free time, I'd join you in this!

Agree.
As a non programmer/coder/scripter/ I have picked up some information.
SC does a great job of spoon feeding but leaving out enough to make the reader think
a bit to complete the thought.
It's so nice to see some tech discussion without the resident village idiot
infecting the thread.

happy boner day wing nut

Pothead lies for Carroll showing white supremacists back each other... news at
11.

[Gremlin]

[snip]

Post by pothead

Post by Gremlin
Awesome Job here Steve! I like your teaching style as well as your
effort to make a thread that is on topic!
If I had the free time, I'd join you in this!

Agree.
As a non programmer/coder/scripter/ I have picked up some information.
SC does a great job of spoon feeding but leaving out enough to make the
reader think a bit to complete the thought.
It's so nice to see some tech discussion without the resident village
idiot infecting the thread.

SC does have good teaching skills. Remarkable level of patience too,
considering. Our resident village idiot could benefit greatly by taking
notes and keeping his fingers off the keyboard. But, I digress. The way he
laid this one out reminds me of the books my first computer came with as it
went thru each 'command' and provided and example of usage and expected
output.

Making the reader think a bit is what actually helps the reader grasp the
material because they are learning not only the concepts, but, applying it
in real time.

[Brock McNuggets]

Post by Gremlin
[snip]

Post by pothead

Post by Gremlin
Awesome Job here Steve! I like your teaching style as well as your
effort to make a thread that is on topic!
If I had the free time, I'd join you in this!

Agree.
As a non programmer/coder/scripter/ I have picked up some information.
SC does a great job of spoon feeding but leaving out enough to make the
reader think a bit to complete the thought.
It's so nice to see some tech discussion without the resident village
idiot infecting the thread.

SC does have good teaching skills.

What has he taught you?

[Steve Carroll]

Post by Gremlin
[snip]

Post by pothead

Post by Gremlin
Awesome Job here Steve! I like your teaching style as well as your
effort to make a thread that is on topic!
If I had the free time, I'd join you in this!

Agree.
As a non programmer/coder/scripter/ I have picked up some information.
SC does a great job of spoon feeding but leaving out enough to make the
reader think a bit to complete the thought.
It's so nice to see some tech discussion without the resident village
idiot infecting the thread.

SC does have good teaching skills.

Not according to 'teacher Glasser' and the world's best student, David
Brooks ;)

Post by Gremlin
Remarkable level of patience too,
considering. Our resident village idiot could benefit greatly by taking
notes and keeping his fingers off the keyboard. But, I digress. The way he
laid this one out reminds me of the books my first computer came with as it
went thru each 'command' and provided and example of usage and expected
output.
Making the reader think a bit is what actually helps the reader grasp the
material because they are learning not only the concepts, but, applying it
in real time.

IMO, if you're not thinking/doing, you're not learning.

There's also the aspect of *what* you're thinking about, take the DW
courses still available on various sites as an example (Glasser will
call this an "attack" but it's just reality). DW is now clearly gone
from the web dev scene:

Adobe Systems is used by 0.8% of all the websites.
Adobe Dreamweaver is used by 0.3% of all the websites.

Version 3 is used by 40.1% of all the websites who use Adobe Dreamweaver.

(Version 3 @40%?! - it's *been* dead... a long time)

<https://w3techs.com/technologies/details/cm-dreamweaver>

The people who spent time/money learning DW are likely no longer using
it, no longer doing web dev or both (Glasser himself is a casualty). The
issue with having DW 'in between' web dev and the person trying to do
web dev with it means: If there's any thinking going on, it's generally
not about the dev itself, it's about DW. I get it, products like that
made things easier but IMO it's an abstraction that went way too far.