English and Technology
Education in Taiwan
(engtech.com.tw)
A. About this Class
On May 4, 2018 we launched this computer programming class at Bethany Learning Center (bethany.com.tw) in Taipei, Taiwan. Currently, we're meeting once a week on Friday from 7:00 pm to 9:00 pm at our office at Fu-Xing S. Road, Section 2, #133, 2F. We usually hang around until 9:30 to answer questions and provide help to those future programmers with intense curiosities.
B. About the Instructor
My name is Todd Sherrill (謝陶德) and I am the instructor for this class. My
portfolio with resumes and lots of other stuff is located at toolboxcoding.com. My main product page is located at chinesetoolbox.com. I am also the founder of Bethany Learning Center; my wife (Bethany Sherrill) now runs and
manages that business.
C.
About
this Website
Here you can find former and current lesson materials.
This website is a bit simple at this time, but as time allows, we'll turn it into something great. I do ASP.NET development as a contractor, and I'm looking forward to applying those skills to developing a slick interactive website with comprehensive content and lots of coding examples.
Click on one of the following links to jump to the material
for a particular class:
5/4/2018, 5/11/2018, 5/18/2018, 5/25/2018, 6/1/2018, 6/8/2018, 6/15/2018, 6/22/2018, 6/29/2018, 7/13/2018
D. Resources
w3schools.com: Here you can learn a lot on your own. For this class focus on learning HTML and Javascript.
w3schools.com Try It Yourself: Here you can try your own HTML and Javascript code. Just replace the code in the left panel with your own code, then click on the run button.
7/13/2018
A. Class Summary
Today, with 4 new students in class, we reviewed what has been taught so far. We covered three things:
1. Scratch
2. Prime number program
3. Tic-Tac-Toe program
B. Homework
1. Play with Scratch, following the YouTube tutorial, and do as much with the shooting game as you can.
2. Do the homework assigned last time for the prime number program (6/29/2018). The code for you to start with is already there.
3. We are starting to learn the Tic-Tac-Toe program from the beginning. This is the code we did in class. Your assignment is to fill this out so that all green boxes fill in an 'X' or 'O' when you click on it.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var a1 = '-';
var a2 = '-';
var a3 = '-';
var b1 = '-';
var b2 = '-';
var b3 = '-';
var c1 = '-';
var c2 = '-';
var c3 = '-';
var player = 'X';
function SetBox(b)
{
if (b=='a1')
{
document.getElementById('a1button').innerHTML = player;
}
if (b=='a2')
{
document.getElementById('a2button').innerHTML = player;
}
if (b=='a3')
{
document.getElementById('a3button').innerHTML = player;
}
if (player == 'X')
{
player = 'O';
}
else
{
player = 'X';
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1')">-</button>
<button id="a2button" class="button" onClick="SetBox('a2')">-</button>
<button id="a3button" class="button" onClick="SetBox('a3')">-</button>
<br>
<button class="button">-</button>
<button class="button">-</button>
<button class="button">-</button>
<br>
<button class="button">-</button>
<button class="button">-</button>
<button class="button">-</button>
</body>
</html>
6/29/2018
A. After Class Follow-up
The following is the code that we wrote in class. Use this as you get started on your homework assignment for this week.
<!DOCTYPE html>
<html>
<body>
<h1>Prime Numbers</h1>
<p id="numprimes">0</p>
<p id="primes">0</p>
<script>
var primeIdx = 0;
var primeList = [2];
for (var p = 3; p <= 100; p++)
{
// Is p a prime?
// Divide p by all found primes.
var thisIsPrime = true;
for (j=0; j<=primeIdx; j++)
{
if (thisIsPrime && (p % primeList[j] == 0))
{
// p is divisible by this prime, so p is NOT a prime.
thisIsPrime = false;
}
}
if (thisIsPrime)
{
// Add this prime number to our list.
primeIdx++;
primeList[primeIdx] = p;
}
}
document.getElementById("numprimes").innerHTML = primeList.length;
document.getElementById("primes").innerHTML = primeList.toString();
</script>
</body>
</html>
B. Homework
· Add code to the prime number program that we did in class. When checking to see if a number is prime, first check if the number has an integer square root, like 9 which has a square root of 3. In this case, you can be sure that the number is not prime. If the square root has a fractional part, then don't eliminate it as a prime, but continue to divide by smaller primes like in the program we did in class. So for 10 which has a square root of 3.162, you could not eliminate 10 as a prime through the square root test. You will need to use a couple of the Math functions described at https://www.w3schools.com/js/js_math.asp, specifically Math.sqrt() and Math.floor().
· If you get this done, see if you can also figure the amount of time that the program takes for calculating as shown below:
C. In Class Review of Basics
1. What is the technology that we're learning in this class?
2. Where can you learn about these technologies?
3. How do you learn these technologies?
4. Variables
5. Data types
6. Statements
7. Functions
8. Flow Control Structures: Which two did we discuss in detail?
9. Blocks
10.Arrays
11.Types of symbols and where
they're used:
{} [] () = == < > <= >=; && || %
D. Prime Number Exercise
Since it appears that no one was able to get this done for homework, we'll do this in class. The solution will appear here after class.
First, check out this website about prime numbers: https://www.factmonster.com/math/numbers/prime-numbers-facts-examples-table-all-1000
6/22/2018
A. Class Summary & Homework
Today we covered more basics, particularly of the control structure, the FOR loop. We practiced simple in-class exercises to calculate and display values, all using FOR loop.
For this week modify one of the in-class exercises (or use the code below) to display all prime numbers between 0 and 100.
<!DOCTYPE html>
<html>
<body>
<h1>Computation Example</h1>
<h2>answer:</h2>
<p id="answer">0</p>
<script>
var answer = 0;
var sum = 0;
var i = 0;
for (i = 0; i <= 1000; i++) {
if ((i % 5) == 0)
{
//sum = sum + i;
sum += i;
}
}
answer = sum;
document.getElementById("answer").innerHTML = answer;
</script>
</body>
</html>
6/15/2018
A. Homework (6/16/2018)
Here's a new challenge for you. Notice that ComputerPlay() is a LOT shorter below. I've changed the call to SetBox to use row and col instead of a button name. Replace your ComputerPlay() with the code below. Then see if you can change the rest of the program to get this working. If you can, your program will be a lot shorter and easier to read.
function ComputerPlay() {
if (gameOver == false) {
var boxSet = false;
var row = getRndInteger(0,2);
var col = getRndInteger(0,2);
document.getElementById('row').innerHTML = "Row: " + row;
document.getElementById('col').innerHTML = "Col: " + col;
while (boxSet == false)
{
if (bx[row][col] == '-') {
// Can make the setting
boxSet = true;
SetBox(row,col);
}
else {
// Cannot set current box. Need to choose another box and try again.
row = getRndInteger(0,2);
col = getRndInteger(0,2);
}
}
}
}
B. After Class Follow-up
Did anyone find the error in the final class version of Tic-Tac-Toe? In the 'else' block of the ComputerPlay() function, the upper range in the call to getRndInteger was incorrect.
// In class version:
else {
// Cannot set current box. Need to choose another box and try again.
row = getRndInteger(0,3);
col = getRndInteger(0,3);
}
// Corrected version:
else {
// Cannot set current box. Need to choose another box and try again.
row = getRndInteger(0,2);
col = getRndInteger(0,2);
}
Here's the entire corrected program. I also changed where setBox is assigned. Can you find it?
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: 2px solid;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var bx = [['-', '-', '-'],['-', '-', '-'],['-', '-', '-']] ;
var player = 'X';
var clickCount = 0;
var haveWinner = false;
var gameOver = false;
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function ComputerPlay() {
if (gameOver == false) {
var boxSet = false;
var row = getRndInteger(0,2);
var col = getRndInteger(0,2);
document.getElementById('row').innerHTML = "Row: " + row;
document.getElementById('col').innerHTML = "Col: " + col;
while (boxSet == false)
{
if (bx[row][col] == '-') {
// Can make the setting
boxSet = true;
if (row==0 && col==0) {
SetBox('a1');
}
else if (row==0 && col==1) {
SetBox('a2');
}
else if (row==0 && col==2) {
SetBox('a3');
}
else if (row==1 && col==0) {
SetBox('b1');
}
else if (row==1 && col==1) {
SetBox('b2');
}
else if (row==1 && col==2) {
SetBox('b3');
}
else if (row==2 && col==0) {
SetBox('c1');
}
else if (row==2 && col==1) {
SetBox('c2');
}
else if (row==2 && col==2){
SetBox('c3');
}
}
else {
// Cannot set current box. Need to choose another box and try again.
row = getRndInteger(0,2);
col = getRndInteger(0,2);
}
}
}
}
function HaveWinner() {
if (
(bx[0][0] != '-' && bx[0][0] == bx[0][1] && bx[0][1] == bx[0][2]) ||
(bx[1][0] != '-' && bx[1][0] == bx[1][1] && bx[1][1] == bx[1][2]) ||
(bx[2][0] != '-' && bx[2][0] == bx[2][1] && bx[2][1] == bx[2][2]) ||
(bx[0][0] != '-' && bx[0][0] == bx[1][0] && bx[1][0] == bx[2][0]) ||
(bx[0][1] != '-' && bx[0][1] == bx[1][1] && bx[1][1] == bx[2][1]) ||
(bx[0][2] != '-' && bx[0][2] == bx[1][2] && bx[1][2] == bx[2][2]) ||
(bx[0][0] != '-' && bx[0][0] == bx[1][1] && bx[1][1] == bx[2][2]) ||
(bx[2][0] != '-' && bx[2][0] == bx[1][1] && bx[1][1] == bx[0][2])
) {
return true;
}
return false
}
function ChangePlayer() {
if (player == 'X') {
player = 'O';
} else {
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(box) {
if (gameOver == false) {
if (box == "a1") {
bx[0][0] = player;
document.getElementById('a1button').innerHTML = bx[0][0];
} else if (box == "a2") {
bx[0][1] = player;
document.getElementById('a2button').innerHTML = bx[0][1];
} else if (box == "a3") {
bx[0][2] = player;
document.getElementById('a3button').innerHTML = bx[0][2];
} else if (box == "b1") {
bx[1][0] = player;
document.getElementById('b1button').innerHTML = bx[1][0];
} else if (box == "b2") {
bx[1][1] = player;
document.getElementById('b2button').innerHTML = bx[1][1];
} else if (box == "b3") {
bx[1][2] = player;
document.getElementById('b3button').innerHTML = bx[1][2];
} else if (box == "c1") {
bx[2][0] = player;
document.getElementById('c1button').innerHTML = bx[2][0];
} else if (box == "c2") {
bx[2][1] = player;
document.getElementById('c2button').innerHTML = bx[2][1];
} else if (box == "c3") {
bx[2][2] = player;
document.getElementById('c3button').innerHTML = bx[2][2];
}
clickCount++
if (HaveWinner()) {
gameOver = true;
document.getElementById("gameOver").innerHTML = player + " wins!";
} else if (clickCount >= 9) {
document.getElementById("gameOver").innerHTML = "Game over. No winner.";
gameOver = true;
}
document.getElementById('cc').innerHTML = "Click count: " + clickCount;
ChangePlayer();
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1');this.disabled=true;ComputerPlay();">-</button>
<button id="a2button" class="button" onClick="SetBox('a2');this.disabled=true;ComputerPlay();">-</button>
<button id="a3button" class="button" onClick="SetBox('a3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1');this.disabled=true;ComputerPlay();">-</button>
<button id="b2button" class="button" onClick="SetBox('b2');this.disabled=true;ComputerPlay();">-</button>
<button id="b3button" class="button" onClick="SetBox('b3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1');this.disabled=true;ComputerPlay();">-</button>
<button id="c2button" class="button" onClick="SetBox('c2');this.disabled=true;ComputerPlay();">-</button>
<button id="c3button" class="button" onClick="SetBox('c3');this.disabled=true;ComputerPlay();">-</button>
<p id="cc">Click count: 0</p>
<p id="row">Row: </p>
<p id="col">Col: </p>
<h2 id="gameOver">Not yet</h2>
</body>
</html>
C. Install Atom
Go to https://atom.io/ to install Atom, a programmer's text editor.
D. Make Your Own Game
· Let's talk about each of you starting a new game of your own, using the skills you learn in this class.
· Would you like to work in teams?
E. Homework Solution
This version of Tic-Tac-Toe uses arrays a, b, and c to represent values of the game boxes. Did you have any problems getting this to work? Did anyone run into a conflict in variable/parameter names (hint: SetBox parameter).
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: 2px solid;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var a = ['-', '-', '-'] ;
var b = ['-', '-', '-'] ;
var c = ['-', '-', '-'] ;
var player = 'X';
var clickCount = 0;
var haveWinner = false;
var gameOver = false;
function HaveWinner() {
if (
(a[0] != '-' && a[0] == a[1] && a[1] == a[2]) ||
(b[0] != '-' && b[0] == b[1] && b[1] == b[2]) ||
(c[0] != '-' && c[0] == c[1] && c[1] == c[2]) ||
(a[0] != '-' && a[0] == b[0] && b[0] == c[0]) ||
(a[1] != '-' && a[1] == b[1] && b[1] == c[1]) ||
(a[2] != '-' && a[2] == b[2] && b[2] == c[2]) ||
(a[0] != '-' && a[0] == b[1] && b[1] == c[2]) ||
(c[0] != '-' && c[0] == b[1] && b[1] == a[2])
) {
return true;
}
return false
}
function ChangePlayer() {
if (player == 'X') {
player = 'O';
} else {
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(box) {
if (gameOver == false) {
if (box == "a1") {
a[0] = player;
document.getElementById('a1button').innerHTML = a[0];
} else if (box == "a2") {
a[1] = player;
document.getElementById('a2button').innerHTML = a[1];
} else if (box == "a3") {
a[2] = player;
document.getElementById('a3button').innerHTML = a[2];
} else if (box == "b1") {
b[0] = player;
document.getElementById('b1button').innerHTML = b[0];
} else if (box == "b2") {
b[1] = player;
document.getElementById('b2button').innerHTML = b[1];
} else if (box == "b3") {
b[2] = player;
document.getElementById('b3button').innerHTML = b[2];
} else if (box == "c1") {
c[0] = player;
document.getElementById('c1button').innerHTML = c[0];
} else if (box == "c2") {
c[1] = player;
document.getElementById('c2button').innerHTML = c[1];
} else if (box == "c3") {
c[2] = player;
document.getElementById('c3button').innerHTML = c[2];
}
clickCount++
if (HaveWinner()) {
gameOver = true;
document.getElementById("gameOver").innerHTML = player + " wins!";
} else if (clickCount >= 9) {
document.getElementById("gameOver").innerHTML = "Game over. No winner.";
gameOver = true;
}
//clickCount = clickCount + 1;
document.getElementById('cc').innerHTML = "Click count: " + clickCount;
ChangePlayer();
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1');this.disabled=true">-</button>
<button id="a2button" class="button" onClick="SetBox('a2');this.disabled=true">-</button>
<button id="a3button" class="button" onClick="SetBox('a3');this.disabled=true">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1');this.disabled=true">-</button>
<button id="b2button" class="button" onClick="SetBox('b2');this.disabled=true">-</button>
<button id="b3button" class="button" onClick="SetBox('b3');this.disabled=true">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1');this.disabled=true">-</button>
<button id="c2button" class="button" onClick="SetBox('c2');this.disabled=true">-</button>
<button id="c3button" class="button" onClick="SetBox('c3');this.disabled=true">-</button>
<p id="cc">Click count: 0</p>
<h2 id="gameOver">Not yet</h2>
</body>
</html>
F. Play Against the Computer (step 1)
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: 2px solid;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var a = ['-', '-', '-'] ;
var b = ['-', '-', '-'] ;
var c = ['-', '-', '-'] ;
var player = 'X';
var clickCount = 0;
var haveWinner = false;
var gameOver = false;
function ComputerPlay() {
if (a[0] == '-') {
SetBox('a1');
}
else if (a[1] == '-') {
SetBox('a2');
}
else if (a[2] == '-') {
SetBox('a3');
}
else if (b[0] == '-') {
SetBox('b1');
}
else if (b[1] == '-') {
SetBox('b2');
}
else if (b[2] == '-') {
SetBox('b3');
}
else if (c[0] == '-') {
SetBox('c1');
}
else if (c[1] == '-') {
SetBox('c2');
}
else if (c[2] == '-') {
SetBox('c3');
}
}
function HaveWinner() {
if (
(a[0] != '-' && a[0] == a[1] && a[1] == a[2]) ||
(b[0] != '-' && b[0] == b[1] && b[1] == b[2]) ||
(c[0] != '-' && c[0] == c[1] && c[1] == c[2]) ||
(a[0] != '-' && a[0] == b[0] && b[0] == c[0]) ||
(a[1] != '-' && a[1] == b[1] && b[1] == c[1]) ||
(a[2] != '-' && a[2] == b[2] && b[2] == c[2]) ||
(a[0] != '-' && a[0] == b[1] && b[1] == c[2]) ||
(c[0] != '-' && c[0] == b[1] && b[1] == a[2])
) {
return true;
}
return false
}
function ChangePlayer() {
if (player == 'X') {
player = 'O';
} else {
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(box) {
if (gameOver == false) {
if (box == "a1") {
a[0] = player;
document.getElementById('a1button').innerHTML = a[0];
} else if (box == "a2") {
a[1] = player;
document.getElementById('a2button').innerHTML = a[1];
} else if (box == "a3") {
a[2] = player;
document.getElementById('a3button').innerHTML = a[2];
} else if (box == "b1") {
b[0] = player;
document.getElementById('b1button').innerHTML = b[0];
} else if (box == "b2") {
b[1] = player;
document.getElementById('b2button').innerHTML = b[1];
} else if (box == "b3") {
b[2] = player;
document.getElementById('b3button').innerHTML = b[2];
} else if (box == "c1") {
c[0] = player;
document.getElementById('c1button').innerHTML = c[0];
} else if (box == "c2") {
c[1] = player;
document.getElementById('c2button').innerHTML = c[1];
} else if (box == "c3") {
c[2] = player;
document.getElementById('c3button').innerHTML = c[2];
}
clickCount++
if (HaveWinner()) {
gameOver = true;
document.getElementById("gameOver").innerHTML = player + " wins!";
} else if (clickCount >= 9) {
document.getElementById("gameOver").innerHTML = "Game over. No winner.";
gameOver = true;
}
document.getElementById('cc').innerHTML = "Click count: " + clickCount;
ChangePlayer();
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1');this.disabled=true;ComputerPlay();">-</button>
<button id="a2button" class="button" onClick="SetBox('a2');this.disabled=true;ComputerPlay();">-</button>
<button id="a3button" class="button" onClick="SetBox('a3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1');this.disabled=true;ComputerPlay();">-</button>
<button id="b2button" class="button" onClick="SetBox('b2');this.disabled=true;ComputerPlay();">-</button>
<button id="b3button" class="button" onClick="SetBox('b3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1');this.disabled=true;ComputerPlay();">-</button>
<button id="c2button" class="button" onClick="SetBox('c2');this.disabled=true;ComputerPlay();">-</button>
<button id="c3button" class="button" onClick="SetBox('c3');this.disabled=true;ComputerPlay();">-</button>
<p id="cc">Click count: 0</p>
<h2 id="gameOver">Not yet</h2>
</body>
</html>
G. Multi-Dimensional Arrays (Step 1)
First, replace var a with var bx.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: 2px solid;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
//var a = ['-', '-', '-'] ;
var b = ['-', '-', '-'] ;
var c = ['-', '-', '-'] ;
var bx = [['-', '-', '-'],['-', '-',
'-'],['-', '-', '-']] ;
var player = 'X';
var clickCount = 0;
var haveWinner = false;
var gameOver = false;
function ComputerPlay() {
if (bx[0][0] == '-') {
SetBox('a1');
}
else if (bx[0][1] == '-') {
SetBox('a2');
}
else if (bx[0][2] == '-') {
SetBox('a3');
}
else if (b[0] == '-') {
SetBox('b1');
}
else if (b[1] == '-') {
SetBox('b2');
}
else if (b[2] == '-') {
SetBox('b3');
}
else if (c[0] == '-') {
SetBox('c1');
}
else if (c[1] == '-') {
SetBox('c2');
}
else if (c[2] == '-') {
SetBox('c3');
}
}
function HaveWinner() {
if (
(bx[0][0] != '-' && bx[0][0] == bx[0][1] && bx[0][1] == bx[0][2]) ||
(b[0] != '-' && b[0] == b[1] && b[1] == b[2]) ||
(c[0] != '-' && c[0] == c[1] && c[1] == c[2]) ||
(bx[0][0] != '-' && bx[0][0] == b[0] && b[0] == c[0]) ||
(bx[0][1] != '-' && bx[0][1] == b[1] && b[1] == c[1]) ||
(bx[0][2] != '-' && bx[0][2] == b[2] && b[2] == c[2]) ||
(bx[0][0] != '-' && bx[0][0] == b[1] && b[1] == c[2]) ||
(c[0] != '-' && c[0] == b[1] && b[1] == bx[0][2])
) {
return true;
}
return false
}
function ChangePlayer() {
if (player == 'X') {
player = 'O';
} else {
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(box) {
if (gameOver == false) {
if (box == "a1") {
bx[0][0] = player;
document.getElementById('a1button').innerHTML = bx[0][0];
} else if (box == "a2") {
bx[0][1] = player;
document.getElementById('a2button').innerHTML = bx[0][1];
} else if (box == "a3") {
bx[0][2] = player;
document.getElementById('a3button').innerHTML = bx[0][2];
} else if (box == "b1") {
b[0] = player;
document.getElementById('b1button').innerHTML = b[0];
} else if (box == "b2") {
b[1] = player;
document.getElementById('b2button').innerHTML = b[1];
} else if (box == "b3") {
b[2] = player;
document.getElementById('b3button').innerHTML = b[2];
} else if (box == "c1") {
c[0] = player;
document.getElementById('c1button').innerHTML = c[0];
} else if (box == "c2") {
c[1] = player;
document.getElementById('c2button').innerHTML = c[1];
} else if (box == "c3") {
c[2] = player;
document.getElementById('c3button').innerHTML = c[2];
}
clickCount++
if (HaveWinner()) {
gameOver = true;
document.getElementById("gameOver").innerHTML = player + " wins!";
} else if (clickCount >= 9) {
document.getElementById("gameOver").innerHTML = "Game over. No winner.";
gameOver = true;
}
document.getElementById('cc').innerHTML = "Click count: " + clickCount;
ChangePlayer();
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1');this.disabled=true;ComputerPlay();">-</button>
<button id="a2button" class="button" onClick="SetBox('a2');this.disabled=true;ComputerPlay();">-</button>
<button id="a3button" class="button" onClick="SetBox('a3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1');this.disabled=true;ComputerPlay();">-</button>
<button id="b2button" class="button" onClick="SetBox('b2');this.disabled=true;ComputerPlay();">-</button>
<button id="b3button" class="button" onClick="SetBox('b3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1');this.disabled=true;ComputerPlay();">-</button>
<button id="c2button" class="button" onClick="SetBox('c2');this.disabled=true;ComputerPlay();">-</button>
<button id="c3button" class="button" onClick="SetBox('c3');this.disabled=true;ComputerPlay();">-</button>
<p id="cc">Click count: 0</p>
<h2 id="gameOver">Not yet</h2>
</body>
</html>
H. Multi-Dimensional Arrays (a, b, & c replaced with bx)
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: 2px solid;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var bx = [['-', '-', '-'],['-', '-', '-'],['-', '-', '-']] ;
var player = 'X';
var clickCount = 0;
var haveWinner = false;
var gameOver = false;
function ComputerPlay() {
if (bx[0][0] == '-') {
SetBox('a1');
}
else if (bx[0][1] == '-') {
SetBox('a2');
}
else if (bx[0][2] == '-') {
SetBox('a3');
}
else if (bx[1][0] == '-') {
SetBox('b1');
}
else if (bx[1][1] == '-') {
SetBox('b2');
}
else if (bx[1][2] == '-') {
SetBox('b3');
}
else if (bx[2][0] == '-') {
SetBox('c1');
}
else if (bx[2][1] == '-') {
SetBox('c2');
}
else if (bx[2][2] == '-') {
SetBox('c3');
}
}
function HaveWinner() {
if (
(bx[0][0] != '-' && bx[0][0] == bx[0][1] && bx[0][1] == bx[0][2]) ||
(bx[1][0] != '-' && bx[1][0] == bx[1][1] && bx[1][1] == bx[1][2]) ||
(bx[2][0] != '-' && bx[2][0] == bx[2][1] && bx[2][1] == bx[2][2]) ||
(bx[0][0] != '-' && bx[0][0] == bx[1][0] && bx[1][0] == bx[2][0]) ||
(bx[0][1] != '-' && bx[0][1] == bx[1][1] && bx[1][1] == bx[2][1]) ||
(bx[0][2] != '-' && bx[0][2] == bx[1][2] && bx[1][2] == bx[2][2]) ||
(bx[0][0] != '-' && bx[0][0] == bx[1][1] && bx[1][1] == bx[2][2]) ||
(bx[2][0] != '-' && bx[2][0] == bx[1][1] && bx[1][1] == bx[0][2])
) {
return true;
}
return false
}
function ChangePlayer() {
if (player == 'X') {
player = 'O';
} else {
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(box) {
if (gameOver == false) {
if (box == "a1") {
bx[0][0] = player;
document.getElementById('a1button').innerHTML = bx[0][0];
} else if (box == "a2") {
bx[0][1] = player;
document.getElementById('a2button').innerHTML = bx[0][1];
} else if (box == "a3") {
bx[0][2] = player;
document.getElementById('a3button').innerHTML = bx[0][2];
} else if (box == "b1") {
bx[1][0] = player;
document.getElementById('b1button').innerHTML = bx[1][0];
} else if (box == "b2") {
bx[1][1] = player;
document.getElementById('b2button').innerHTML = bx[1][1];
} else if (box == "b3") {
bx[1][2] = player;
document.getElementById('b3button').innerHTML = bx[1][2];
} else if (box == "c1") {
bx[2][0] = player;
document.getElementById('c1button').innerHTML = bx[2][0];
} else if (box == "c2") {
bx[2][1] = player;
document.getElementById('c2button').innerHTML = bx[2][1];
} else if (box == "c3") {
bx[2][2] = player;
document.getElementById('c3button').innerHTML = bx[2][2];
}
clickCount++
if (HaveWinner()) {
gameOver = true;
document.getElementById("gameOver").innerHTML = player + " wins!";
} else if (clickCount >= 9) {
document.getElementById("gameOver").innerHTML = "Game over. No winner.";
gameOver = true;
}
document.getElementById('cc').innerHTML = "Click count: " + clickCount;
ChangePlayer();
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1');this.disabled=true;ComputerPlay();">-</button>
<button id="a2button" class="button" onClick="SetBox('a2');this.disabled=true;ComputerPlay();">-</button>
<button id="a3button" class="button" onClick="SetBox('a3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1');this.disabled=true;ComputerPlay();">-</button>
<button id="b2button" class="button" onClick="SetBox('b2');this.disabled=true;ComputerPlay();">-</button>
<button id="b3button" class="button" onClick="SetBox('b3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1');this.disabled=true;ComputerPlay();">-</button>
<button id="c2button" class="button" onClick="SetBox('c2');this.disabled=true;ComputerPlay();">-</button>
<button id="c3button" class="button" onClick="SetBox('c3');this.disabled=true;ComputerPlay();">-</button>
<p id="cc">Click count: 0</p>
<h2 id="gameOver">Not yet</h2>
</body>
</html>
I. Playing against the Computer (random)
Here were making the computer's play random; however, this code is can be improved A LOT!
<!DOCTYPE html>
<!--
Play against the computer (step 2).
Make the computer's play random.
-->
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: 2px solid;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var bx = [['-', '-', '-'],['-', '-', '-'],['-', '-', '-']] ;
var player = 'X';
var clickCount = 0;
var haveWinner = false;
var gameOver = false;
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function ComputerPlay() {
if (gameOver == false) {
var boxSet = false;
var row = getRndInteger(0,2);
var col = getRndInteger(0,2);
document.getElementById('row').innerHTML = "Row: " + row;
document.getElementById('col').innerHTML = "Col: " + col;
while (boxSet == false)
{
if (row>=0 && row<=2 && col>=0 && col<=2 && bx[row][col] == '-') {
// Can make the setting
if (row==0 && col==0) {
SetBox('a1');
boxSet = true;
}
else if (row==0 && col==1) {
SetBox('a2');
boxSet = true;
}
else if (row==0 && col==2) {
SetBox('a3');
boxSet = true;
}
else if (row==1 && col==0) {
SetBox('b1');
boxSet = true;
}
else if (row==1 && col==1) {
SetBox('b2');
boxSet = true;
}
else if (row==1 && col==2) {
SetBox('b3');
boxSet = true;
}
else if (row==2 && col==0) {
SetBox('c1');
boxSet = true;
}
else if (row==2 && col==1) {
SetBox('c2');
boxSet = true;
}
else if (row==2 && col==2){
SetBox('c3');
boxSet = true;
}
}
else {
// Cannot set current box. Need to choose another box and try again.
row = getRndInteger(0,3);
col = getRndInteger(0,3);
}
}
}
}
function HaveWinner() {
if (
(bx[0][0] != '-' && bx[0][0] == bx[0][1] && bx[0][1] == bx[0][2]) ||
(bx[1][0] != '-' && bx[1][0] == bx[1][1] && bx[1][1] == bx[1][2]) ||
(bx[2][0] != '-' && bx[2][0] == bx[2][1] && bx[2][1] == bx[2][2]) ||
(bx[0][0] != '-' && bx[0][0] == bx[1][0] && bx[1][0] == bx[2][0]) ||
(bx[0][1] != '-' && bx[0][1] == bx[1][1] && bx[1][1] == bx[2][1]) ||
(bx[0][2] != '-' && bx[0][2] == bx[1][2] && bx[1][2] == bx[2][2]) ||
(bx[0][0] != '-' && bx[0][0] == bx[1][1] && bx[1][1] == bx[2][2]) ||
(bx[2][0] != '-' && bx[2][0] == bx[1][1] && bx[1][1] == bx[0][2])
) {
return true;
}
return false
}
function ChangePlayer() {
if (player == 'X') {
player = 'O';
} else {
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(box) {
if (gameOver == false) {
if (box == "a1") {
bx[0][0] = player;
document.getElementById('a1button').innerHTML = bx[0][0];
} else if (box == "a2") {
bx[0][1] = player;
document.getElementById('a2button').innerHTML = bx[0][1];
} else if (box == "a3") {
bx[0][2] = player;
document.getElementById('a3button').innerHTML = bx[0][2];
} else if (box == "b1") {
bx[1][0] = player;
document.getElementById('b1button').innerHTML = bx[1][0];
} else if (box == "b2") {
bx[1][1] = player;
document.getElementById('b2button').innerHTML = bx[1][1];
} else if (box == "b3") {
bx[1][2] = player;
document.getElementById('b3button').innerHTML = bx[1][2];
} else if (box == "c1") {
bx[2][0] = player;
document.getElementById('c1button').innerHTML = bx[2][0];
} else if (box == "c2") {
bx[2][1] = player;
document.getElementById('c2button').innerHTML = bx[2][1];
} else if (box == "c3") {
bx[2][2] = player;
document.getElementById('c3button').innerHTML = bx[2][2];
}
clickCount++
if (HaveWinner()) {
gameOver = true;
document.getElementById("gameOver").innerHTML = player + " wins!";
} else if (clickCount >= 9) {
document.getElementById("gameOver").innerHTML = "Game over. No winner.";
gameOver = true;
}
document.getElementById('cc').innerHTML = "Click count: " + clickCount;
ChangePlayer();
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1');this.disabled=true;ComputerPlay();">-</button>
<button id="a2button" class="button" onClick="SetBox('a2');this.disabled=true;ComputerPlay();">-</button>
<button id="a3button" class="button" onClick="SetBox('a3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1');this.disabled=true;ComputerPlay();">-</button>
<button id="b2button" class="button" onClick="SetBox('b2');this.disabled=true;ComputerPlay();">-</button>
<button id="b3button" class="button" onClick="SetBox('b3');this.disabled=true;ComputerPlay();">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1');this.disabled=true;ComputerPlay();">-</button>
<button id="c2button" class="button" onClick="SetBox('c2');this.disabled=true;ComputerPlay();">-</button>
<button id="c3button" class="button" onClick="SetBox('c3');this.disabled=true;ComputerPlay();">-</button>
<p id="cc">Click count: 0</p>
<p id="row">Row: </p>
<p id="col">Col: </p>
<h2 id="gameOver">Not yet</h2>
</body>
</html>
6/8/2018
A. Formatting Your Code
This website will "beautify" your code: https://html-cleaner.com/js/
B. Arrays
Go to https://www.w3schools.com/js/js_arrays.asp. We'll be talking about arrays using this page.
C. Stop the Game When it's Over
The code in red will stop the game after we have a winner.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var a1 = '-';
var a2 = '-';
var a3 = '-';
var b1 = '-';
var b2 = '-';
var b3 = '-';
var c1 = '-';
var c2 = '-';
var c3 = '-';
var player = 'X';
var clickCount = 0;
var haveWinner = false;
var gameOver = false;
function HaveWinner() {
if (
(a1 != '-' && a1 == a2 && a2 == a3) ||
(b1 != '-' && b1 == b2 && b2 == b3) ||
(c1 != '-' && c1 == c2 && c2 == c3)
||
(a1 != '-' && a1 == b1 && b1 == c1) ||
(a2 != '-' && a2 == b2 && b2 == c2) ||
(a3 != '-' && a3 == b3 && b3 == c3)
||
(a1 != '-' && a1 == b2 && b2 == c3) ||
(c1 != '-' && c1 == b2 && b2 == a3)
) {
return true;
}
return false
}
function ChangePlayer() {
if (player == 'X') {
player = 'O';
} else {
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(b) {
if (gameOver == false) {
if (b == "a1") {
a1 = player;
document.getElementById('a1button').innerHTML = a1;
} else if (b == "a2") {
a2 = player;
document.getElementById('a2button').innerHTML = a2;
} else if (b == "a3") {
a3 = player;
document.getElementById('a3button').innerHTML = a3;
} else if (b == "b1") {
b1 = player;
document.getElementById('b1button').innerHTML = b1;
} else if (b == "b2") {
b2 = player;
document.getElementById('b2button').innerHTML = b2;
} else if (b == "b3") {
b3 = player;
document.getElementById('b3button').innerHTML = b3;
} else if (b == "c1") {
c1 = player;
document.getElementById('c1button').innerHTML = c1;
} else if (b == "c2") {
c2 = player;
document.getElementById('c2button').innerHTML = c2;
} else if (b == "c3") {
c3 = player;
document.getElementById('c3button').innerHTML = c3;
}
if (HaveWinner())
{
gameOver = true;
document.getElementById("gameOver").innerHTML = player + " wins!";
}
else if (clickCount >= 9)
{
document.getElementById("gameOver").innerHTML
= "Game over. No winner.";
gameOver = true;
}
clickCount = clickCount + 1;
document.getElementById('cc').innerHTML = "Click count: " + clickCount;
ChangePlayer();
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1');this.disabled=true">-</button>
<button id="a2button" class="button" onClick="SetBox('a2');this.disabled=true">-</button>
<button id="a3button" class="button" onClick="SetBox('a3');this.disabled=true">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1');this.disabled=true">-</button>
<button id="b2button" class="button" onClick="SetBox('b2');this.disabled=true">-</button>
<button id="b3button" class="button" onClick="SetBox('b3');this.disabled=true">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1');this.disabled=true">-</button>
<button id="c2button" class="button" onClick="SetBox('c2');this.disabled=true">-</button>
<button id="c3button" class="button" onClick="SetBox('c3');this.disabled=true">-</button>
<p id="cc">Click count: 0</p>
<h2 id="gameOver">Not yet</h2>
</body>
</html>
D. Change Variables a1, a2, and a3 to array a
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var a = ['-', '-', '-'];
var b1 = '-';
var b2 = '-';
var b3 = '-';
var c1 = '-';
var c2 = '-';
var c3 = '-';
var player = 'X';
var clickCount = 0;
var haveWinner = false;
var gameOver = false;
function HaveWinner() {
if (
(a[0] != '-' && a[0] == a[1] && a[1] == a[2]) ||
(b1 != '-' && b1 == b2 && b2 == b3) ||
(c1 != '-' && c1 == c2 && c2 == c3) ||
(a[0] != '-' && a[0] == b1 && b1 == c1) ||
(a[1] != '-' && a[1] == b2 && b2 == c2) ||
(a[2] != '-' && a[2] == b3 && b3 == c3) ||
(a[0] != '-' && a[0] == b2 && b2 == c3) ||
(c1 != '-' && c1 == b2 && b2 == a[2])
) {
return true;
}
return false
}
function ChangePlayer() {
if (player == 'X') {
player = 'O';
} else {
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(b) {
if (gameOver == false) {
if (b == "a1") {
a[0] = player;
document.getElementById('a1button').innerHTML = a[0];
} else if (b == "a2") {
a[1] = player;
document.getElementById('a2button').innerHTML = a[1];
} else if (b == "a3") {
a[2] = player;
document.getElementById('a3button').innerHTML = a[2];
} else if (b == "b1") {
b1 = player;
document.getElementById('b1button').innerHTML = b1;
} else if (b == "b2") {
b2 = player;
document.getElementById('b2button').innerHTML = b2;
} else if (b == "b3") {
b3 = player;
document.getElementById('b3button').innerHTML = b3;
} else if (b == "c1") {
c1 = player;
document.getElementById('c1button').innerHTML = c1;
} else if (b == "c2") {
c2 = player;
document.getElementById('c2button').innerHTML = c2;
} else if (b == "c3") {
c3 = player;
document.getElementById('c3button').innerHTML = c3;
}
if (HaveWinner()) {
gameOver = true;
document.getElementById("gameOver").innerHTML = player + " wins!";
} else if (clickCount >= 9) {
document.getElementById("gameOver").innerHTML = "Game over. No winner.";
gameOver = true;
}
clickCount = clickCount + 1;
document.getElementById('cc').innerHTML = "Click count: " + clickCount;
ChangePlayer();
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1');this.disabled=true">-</button>
<button id="a2button" class="button" onClick="SetBox('a2');this.disabled=true">-</button>
<button id="a3button" class="button" onClick="SetBox('a3');this.disabled=true">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1');this.disabled=true">-</button>
<button id="b2button" class="button" onClick="SetBox('b2');this.disabled=true">-</button>
<button id="b3button" class="button" onClick="SetBox('b3');this.disabled=true">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1');this.disabled=true">-</button>
<button id="c2button" class="button" onClick="SetBox('c2');this.disabled=true">-</button>
<button id="c3button" class="button" onClick="SetBox('c3');this.disabled=true">-</button>
<p id="cc">Click count: 0</p>
<h2 id="gameOver">Not yet</h2>
</body>
</html>
E. Do the same for b and c variables
F. Objects
Go to https://www.w3schools.com/js/js_objects.asp.
6/1/2018 Class
A. After Class Follow-Up
In Class Code
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var a1 = '-';
var a2 = '-';
var a3 = '-';
var b1 = '-';
var b2 = '-';
var b3 = '-';
var c1 = '-';
var c2 = '-';
var c3 = '-';
var player = 'X';
var clickCount = 0;
var haveWinner = false;
var gameOver = false;
function HaveWinner()
{
if (
(a1!='-' && a1==a2 && a2==a3)
|| (b1!='-' && b1==b2 && b2==b3)
|| (c1!='-' && c1==c2 && c2==c3)
|| (a1!='-' && a1==b1 && b1==c1)
|| (a2!='-' && a2==b2 && b2==c2)
|| (a3!='-' && a3==b3 && b3==c3)
|| (a1!='-' && a1==b2 && b2==c3)
|| (c1!='-' && c1==b2 && b2==a3)
)
{
return true;
}
return false
}
function ChangePlayer()
{
if (player == 'X')
{
player = 'O';
}
else
{
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(b)
{
if (b=="a1")
{
a1 = player;
document.getElementById('a1button').innerHTML = a1;
}
else if (b=="a2")
{
a2 = player;
document.getElementById('a2button').innerHTML = a2;
}
else if (b=="a3")
{
a3 = player;
document.getElementById('a3button').innerHTML = a3;
}
else if (b=="b1")
{
b1 = player;
document.getElementById('b1button').innerHTML = b1;
}
else if (b=="b2")
{
b2 = player;
document.getElementById('b2button').innerHTML = b2;
}
else if (b=="b3")
{
b3 = player;
document.getElementById('b3button').innerHTML = b3;
}
else if (b=="c1")
{
c1 = player;
document.getElementById('c1button').innerHTML = c1;
}
else if (b=="c2")
{
c2 = player;
document.getElementById('c2button').innerHTML = c2;
}
else if (b=="c3")
{
c3 = player;
document.getElementById('c3button').innerHTML = c3;
}
if (HaveWinner())
{
gameOver = true;
document.getElementById("gameOver").innerHTML = player + " wins!";
}
clickCount = clickCount + 1;
document.getElementById('cc').innerHTML = "Click count: " + clickCount;
ChangePlayer();
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1');this.disabled=true">-</button>
<button id="a2button" class="button" onClick="SetBox('a2');this.disabled=true">-</button>
<button id="a3button" class="button" onClick="SetBox('a3');this.disabled=true">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1');this.disabled=true">-</button>
<button id="b2button" class="button" onClick="SetBox('b2');this.disabled=true">-</button>
<button id="b3button" class="button" onClick="SetBox('b3');this.disabled=true">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1');this.disabled=true">-</button>
<button id="c2button" class="button" onClick="SetBox('c2');this.disabled=true">-</button>
<button id="c3button" class="button" onClick="SetBox('c3');this.disabled=true">-</button>
<p id="cc">Click count: 0</p>
<h2 id="gameOver">Not yet</h2>
</body>
</html>
5/25/2018 Class
A. After Class Follow-Up
Overview
Tonight we had several new students, so we mostly reviewed the 5/18 lesson and finished in class what was assigned last week.
Code
The code here is what we finished tonight's lesson with. It is also the solution to last week's homework assignment. What's in red has been added from the code from the 5/18 lesson.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var a1 = '-';
var a2 = '-';
var a3 = '-';
var b1 = '-';
var b2 = '-';
var b3 = '-';
var c1 = '-';
var c2 = '-';
var c3 = '-';
var player = 'X';
function ChangePlayer()
{
if (player == 'X')
{
player = 'O';
}
else
{
player = 'X';
}
}
// Fill out SetBox for all boxes.
function SetBox(b)
{
if (b=="a1")
{
a1 = player;
document.getElementById('a1button').innerHTML = a1;
}
else if (b=="a2")
{
a2 = player;
document.getElementById('a2button').innerHTML = a2;
}
else if (b=="a3")
{
a3 = player;
document.getElementById('a3button').innerHTML = a3;
}
else if (b=="b1")
{
b1 = player;
document.getElementById('b1button').innerHTML =
b1;
}
else if (b=="b2")
{
b2 = player;
document.getElementById('b2button').innerHTML =
b2;
}
else if (b=="b3")
{
b3 = player;
document.getElementById('b3button').innerHTML =
b3;
}
else if (b=="c1")
{
c1 = player;
document.getElementById('c1button').innerHTML =
c1;
}
else if (b=="c2")
{
c2 = player;
document.getElementById('c2button').innerHTML =
c2;
}
else if (b=="c3")
{
c3 = player;
document.getElementById('c3button').innerHTML =
c3;
}
// Added for 5/18 homework.
ChangePlayer();
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1')">-</button>
<button id="a2button" class="button" onClick="SetBox('a2')">-</button>
<button id="a3button" class="button" onClick="SetBox('a3')">-</button>
<br>
<button id="b1button" class="button" onClick="SetBox('b1')">-</button>
<button id="b2button" class="button" onClick="SetBox('b2')">-</button>
<button id="b3button" class="button" onClick="SetBox('b3')">-</button>
<br>
<button id="c1button" class="button" onClick="SetBox('c1')">-</button>
<button id="c2button" class="button" onClick="SetBox('c2')">-</button>
<button id="c3button" class="button" onClick="SetBox('c3')">-</button>
</body>
</html>
B. Homework
This assignment will require that you understand functions, and this link at w3schools will explain them.
1. Don't allow a box to be reset. In other words, if 'X' already appears in a box, don't allow the next click to set it to 'O'.
2. Add a line that displays the click count.
3. Determine when someone wins and display the result.
After you finish, a completed game will look like one of the following:
If you have difficulty, we'll go over the solution next week. Let me know on the EngTech LINE group if you have any questions.
5/18/2018 Class
A. After Class Follow-Up
Overview
Tonight, we had a great class. This was the first lesson where most of the class time was spent coding. We're starting out with a real computer game, albeit, a simple one. We've all got to start from somewhere, so the first program is Tic-Tac-Toe in Javascript. In today's class I explained variables, functions, the onClick event/property of the button tag, and the ID property of the button tag. The following is the code that we ended the class with.
Code
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
var a1 = '-';
var a2 = '-';
var a3 = '-';
var b1 = '-';
var b2 = '-';
var b3 = '-';
var c1 = '-';
var c2 = '-';
var c3 = '-';
var player = 'X';
function SetBox(b)
{
if (b=='a1')
{
document.getElementById('a1button').innerHTML = 'X';
}
if (b=='a2')
{
document.getElementById('a2button').innerHTML = 'X';
}
if (b=='a3')
{
document.getElementById('a3button').innerHTML = 'X';
}
}
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button id="a1button" class="button" onClick="SetBox('a1')">-</button>
<button id="a2button" class="button" onClick="SetBox('a2')">-</button>
<button id="a3button" class="button" onClick="SetBox('a3')">-</button>
<br>
<button class="button">-</button>
<button class="button">-</button>
<button class="button">-</button>
<br>
<button class="button">-</button>
<button class="button">-</button>
<button class="button">-</button>
</body>
</html>
Homework
The challenge for this week is to get all 9 buttons responding to click events. Mouse clicks should alternately display 'X' and 'O' on the buttons. When you finish, your program should look something like this after 9 mouse clicks:
To accomplish this you will need a new variable called 'player':
var player = 'X'
You'll need a new function called changePlayer() that will change the value of player from 'X' to 'O' and vice-versa.
If you need help, you know how to find me on LINE, in the EngTech group.
B. Opening
· Today, mainly coding our first game.
· Moving forward: AI (Artificial Intelligence), Python, game development. Check out this Interesting post: programming AI in Python
C. Video discussion
Watch this video.
· Who are some famous people in this video?
· What is common with all the kids? Describe
D. Code.org:
Here you can learn via block coding, but you can also see code that is generated from the blocks. Check out this puzzle.
E. Functions
Today we'll get started with coding our own Tic-Tac-Toe game. In the process you'll learn about functions and everything you need to create your own game.
F. Game Development
Javascript Tic-Tac-Toe
Copy the following code to a file name tictactoe.htm. Then right-click and select Edit with Notepad.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
font-family: Courier New;
font-size: 50px;
cursor: pointer;
}
.button:hover {
background-color: green;
}
</style>
<script>
</script>
</head>
<body>
<h2>Tic-Tac-Toe</h2>
<button class="button"">-</button>
</body>
</html>
5/11/2018 Class
One of my goals for all of you is to inspire you to learn -- a LOT -- about programming. Success in this field depends on how well you can provide solutions. Providing solutions depends on at least two things: (1) how much you know and (2) how well and fast you can develop. So, I will continue to expose you to new ideas and technologies. Hopefully, something I say will inspire you to dive in and get excited about learning programming.
A. Homework Check
Scratch
HTML article
Javascript challenge
<!DOCTYPE html>
<html>
<body>
<h1>Computation Example</h1>
<h2>answer:</h2>
<p id="answer">0</p>
<script>
var answer = 0;
var sum = 0;
var i = 0;
for (i = 0; i <= 1000; i++) {
if ((i % 5) == 0)
{
//sum = sum + i;
sum += i;
}
}
answer = sum;
document.getElementById("answer").innerHTML = answer;
</script>
</body>
</html>
HTML Reading at w3schools
Javascript Reading at w3schools
B. US Salaries for Programmers
From Top
10 Programming Languages
C. Looking at the Inside of a Computer
This will be fun. Let's open up an old computer and look at its parts.
D. Layers
Very Simple -- Hardware to User: Let's talk about new layers and where they are. Where would w3schools.com be?
Print to a Printer Connected Directly to your Computer
E. Architecture of a Web App
Terms to Explain
· app/application
· client
· server
· request-response loop
· dial-up (archaic) vs. always-on (modern)
Diagrams
Architecture of Web-Based Systems
F. Some Programming Concepts
Many of these concepts are covered in the Javascript section of w3schools.com.
Host or Run-time System
The host or "run-time" is where your program runs. Depending on the kind of program, the host may be your computer (or the OS on that computer). In Javascript, we normally refer to the host as a run time. In the case of w3schools.com, Javascript runs in a browser on your computer.
Statements
· Programs are a series of statements.
· Statements end with a semicolon.
· Statements are executed by the "runtime".
Code Blocks
Code blocks are for grouping statements. Code blocks begin with { and end with }.
Keywords
Keywords are special words in a programming language that have special meaning. Like "int" (for an integer variable), "for" (the beginning of a for loop), and "return" (to exit a function).
Comments
Comments are used in programs to explain something about your program. Lines that begin with // are comments. These lines will not be executed. Anything after // is ignored.
Variables
Variables are like storage places; they can hold values. Like
var x = 1;
Later we can do this:
x = 2
Let's look at an example. We'll start with the following:
<!DOCTYPE html>
<html>
<body>
<h2>Uninitialized Variables</h2>
<script>
var a;
var b;
var c;
c = a + b;
document.write(c);
</script>
</body>
</html>
Data Types
number (JS)
int (C)
float (C)
char (C)
string (JS)
boolean (JS), bool (C)
object (JS)
function (JS)
Operators
Assignment
Arithmetic
Comparison
Loops
For
While
G. Scratch
Making Bullets Shoot
5/4/2018 Class
A. Update
Click here to view the YouTube video tutorial on Scratch.
B. Getting Started
Getting to Know You
Getting to Know Me
· Graduated from university in 1985 with BS degree in Computer Science.
· Currently developing Chinese Toolbox (chinesetoolbox.com).
· Working at Milestone (milestonecomputer.com).
Checking Computer Equipment
Everyone's got a laptop? You'll need one to write programs.
Getting Connected to Office WIFI
I'll provide you with the connection info in class.
C. Introduction to this Course
This course is about teaching you to how fish in our world of technology, not giving you a fish, but teaching you how to catch your own.
Coding is already used in virtually all industries, and in the future, it really will be everywhere. Coding may not be the main thing you do in a future job but knowing how to code will give you a competitive advantage; that is, coding will be useful to you even if you're a salesperson, a librarian, or a small business person.
Being in Taiwan, it is also about learning the English that you need to excel in this field. As you might know, most software technologies originate in the US or other western countries and the documentation for those technologies almost always exists first in English. Sure, there are translations, but you have to wait for translations. If you can read English, then you can learn from the source, and you can be on the cutting edge of the newest technologies.
Programming is about two things: creating new things and solving problems. If you want to create something that no one has ever seen before, this course might be for you. But you also need a tenacity to solve problems. Programs that you write will rarely work the first time. It's going to take work. You'll have to dig, learn, study, and investigate until you solve the problem you're working on. If you also love to learn about technology, then programming (or software development and software engineering) might very well be for you.
You are probably going to see so many new things that you'll feel like your head is spinning. This is okay, and it's expected. It is going to take time to absorb the things that you see and hear in this course. Just keep with it, and before long, you'll be writing your own computer programs.
We're going to begin learning about software development through web programming; HTML, Javascript, and CSS. I plan to also introduce you to a number of other languages and technologies including Swift, Python, and even Scratch. I'll show you a little about computer counting (base 2 and base 16), data structures, flow control structures, and a whole lot of other things. Get ready, set, GO!
D. Different Environments -- Different Types of Programs
One thing you learn about is programming environments. Each environment has its special capabilities and its weaknesses. There are environments mainly for documents (HTML), data, graphics, games, phones, etc. More on this later.
E. A Timer Program
Let's get started with looking at a little code and seeing how fast your programs will run.
What do you already know about these?
1. Operating System (OS)
2. Development environment
3. Programming languages
4. Scripting languages
5. Command Line Interface (CLI)
6. Graphical User Interface (GUI)
These examples just show you a little code in different languages. This one is a speed demo.
In C#
using System;
namespace ConsoleApp1
{
class Program
{
static void Main(string[] args)
{
DateTime startTime = DateTime.Now;
Int64 i = 0;
do {
i++;
} while (i < 1000000000);
DateTime endTime = DateTime.Now;
double totalSeconds = endTime.Subtract(startTime).TotalSeconds;
Console.WriteLine("Total seconds: {0}",totalSeconds);
Console.ReadKey();
}
}
}
In Javascript
<!DOCTYPE html>
<html>
<body>
<h1>Javascript timing example</h1>
<h2>startDate:</h2>
<p id="start"></p>
<h2>endDate:</h2>
<p id="end"></p>
<h2>difference: (in milliseconds)</h2>
<b><p id="diff"></p></b>
<script>
var startDate = new Date();
var j = 0;
var i = 0;
for (i = 0; i < 1000000000; i++) {
// One billion iterations
j++;
}
var endDate = new Date();
var difference = endDate - startDate;
document.getElementById("start").innerHTML = startDate;
document.getElementById("end").innerHTML = endDate;
document.getElementById("diff").innerHTML = difference;
</script>
</body>
</html>
F. How to Get Help
When writing a program, I use the Internet all the time. Many times, I try something different, maybe something I've never done before, and many of these times I could use a little help. Here is where the Internet comes to the rescue. If you know how to search for help, you will likely find that someone else has had the same (or similar) problem before, and the solution may be online. To find the help you need, you've got to know the word for the kind of help you're looking for. Here are some helpful terms:
help, tutorial, example, learn, code, coding, javascript
You're also going to need a plan for getting word translations from English to Chinese. How do you do this now? There's lots of ways to learn new words. Any suggestions?
G. Online Places to Start Learning
These are some of the sites that we'll be using in this course:
code.org
scratch.mit.edu
codeacademy.com
khanacademy.org
w3schools.org
There are many, many more.
H. Scratch
Have any of you used Scratch before? What do you know about it?
Scratch enables you to learn some programming concepts in a way that might be easier to understand than traditional approaches. We'll learn some of the key concepts of Scratch, then we'll see the same concepts at work in other languages. Go to https://scratch.mit.edu to get started.
We'll be talking about four categories of Scripts:
1. Motion
2. Events
3. Control
4. Sensing
In class we'll do some very simple animation: create a sprite, then get it to move around and rotate.
Can you add a gun and make it shoot? I'll show you where to get help.
I. HTML
What do you know about HTML?
Anyone ever written any HTML?
HTML is an acronym for HyperText Markup Language. It is the language of webpages.
Go to w3schools.com, and let's get started.
These are some things that we'll be talking about:
1. Documents: HTML is the language we use to represent documents in a browser. We can make HTML documents look almost any way that we like and learning that is what we'll be doing here.
2. Rendering: What you write as HTML will be rendered (translated, converted) in a web browser like Chrome
3. Tags: Everything is enclosed in tags.
Homework
Can you write a simple article in HTML. You can write about what you hope to learn in this course or what you want to do someday. Also, try to make it look good with different types of HTML formatting.
J. Javascript
Javascript is all about actions. With Javascript we can (almost) make our HTML documents come alive!
When talking about Javascript, we'll be talking about:
1. Objects: Objects are things that we'll work with. You won't see them directly, but they're still there.
2. Events: Events are the things that happen. You're HTML/Javascript program will do things when some of these events occur.
Now click on "Learn Javascript" at w3schools.com. We'll continue discussing Javascript by going through a few of the lessons there.
Javascript Examples
Counting Even Numbers
If we want the number of even numbers between 0 and 100 (inclusive) we only need to compute 100 / 2, but this is too easy, so let's try it in a loop. Actually, this is all about learning about loops, assignment operators, and computations. If you understand this, then you can do something much more complicated.
<!DOCTYPE html>
<html>
<body>
<h1>Computation Example</h1>
<h2>answer:</h2>
<p id="answer">0</p>
<script>
var answer = 0;
var evenCnt = 0;
var i = 0;
for (i = 1; i <= 100; i++) {
if ((i % 2) == 0)
{
evenCnt++;
}
}
answer = evenCnt;
document.getElementById("answer").innerHTML = answer;
</script>
</body>
</html>
Counting 7's
Any idea of how many numbers between 0 and 1000 have a 7? With a program, this is easy to determine.
<!DOCTYPE html>
<html>
<body>
<h1>How Many Numbers Contain a '7'</h1>
<h2>answer:</h2>
<p id="answer">0</p>
<script>
var answer = 0;
var cnt = 0;
var i = 0;
for (i = 1; i <= 1000000; i++) {
strNum = i.toString();
if (strNum.indexOf('7') >= 0)
{
cnt++;
}
}
answer = cnt;
document.getElementById("answer").innerHTML = answer;
</script>
</body>
</html>
Homework
Want a Javascript challenge? See if you can add all multiples of 5 between 0 and 1000 inclusive.