The First program

We all know what it is

console.log("hello world!")

hello world!

Javascript ft. variables

Javascript program showing use of variables.

var msg = "How are you today?";
console.log(msg);

How are you today?

Javascript functions

Javascript program showing use of functions.

function logMsg(output){
    console.log(output);
}
logMsg(msg);
logMsg("I'm doing ok");
logMsg(2020);

How are you today?
I'm doing ok
2020

Javascript Types

Javascript program showing Javascript's dynamic types

function logItType(output){
    console.log(typeof output+":", output);
}
console.log("Looking at dynamic nature of types in JavaScript")
logItType("hello"); // String
logItType(2020);    // Number
logItType([1, 2, 3]);  // Object is generic for this Array, which similar to Python List

Looking at dynamic nature of types in JavaScript
string: hello
number: 2020
object: [ 1, 2, 3 ]

Javascript Object/Class

Javascript program showing use of instances

function Item(name,atk,price,description){
    this.name = name;
    this.atk=atk;
    this.price = price;
    this.description = description;
    this.equipped = false;
}
Item.prototype.toggleEquiped = function(){
    this.equipped=true;
}
Item.prototype.toJSON = function(){
    const obj = {name: this.name, atk: this.atk, price: this.price, description: this.description, equipped: this.equipped};
    const json = JSON.stringify(obj);
    return json;
}
Item.prototype.logItem=function(){
    console.log(this.name);
    console.log("Atk:",this.atk);
    console.log("Price:",this.price);
    console.log('"'+this.description+'"');
    if (this.selected=true){
        console.log("This item is equipped!")
    }
    console.log("\n");
}

var coolSword=new Item("Cool Sword",999,9999,"A very cool sword");
coolSword.toggleEquiped();
logItType(coolSword+"\n");
logItType(coolSword.toJSON()+"\n");
coolSword.logItem();

string: [object Object]

string: {"name":"Cool Sword","atk":999,"price":9999,"description":"A very cool sword","equipped":true}

Cool Sword
Atk: 999
Price: 9999
"A very cool sword"
This item is equipped!

Javascript Array of Objects

Javascript program that showcases use of arrays of objects

var Inventory = [
    new Item("Beginner's Blade",10,5,"A weapon fit for a beginner"),
    new Item("Adventurer's Blade",20,10,"A weapon that signifies experiences in adventure"),
    new Item("The Frost Edge",50,150,"The treasured sword of Frostpeak"),
    coolSword
];

for (let i = 0; i < Inventory.length; i++){
    Inventory[i].logItem();
}

Beginner's Blade
Atk: 10
Price: 5
"A weapon fit for a beginner"
This item is equipped!


Adventurer's Blade
Atk: 20
Price: 10
"A weapon that signifies experiences in adventure"
This item is equipped!


The Frost Edge
Atk: 50
Price: 150
"The treasured sword of Frostpeak"
This item is equipped!


Cool Sword
Atk: 999
Price: 9999
"A very cool sword"
This item is equipped!

Javascript Table

A program that displays array data in a table

var style = (
"display:inline-block;" +
"background:black;" +
"border: 2px solid grey;" +
"box-shadow: 0.8em 0.4em 0.4em grey;"
);

// HTML Body of Table is build as a series of concatenations (+=)
var body = "";
// Heading for Array Columns
body += "<tr>";
body += "<th><mark>" + "Name" + "</mark></th>";
body += "<th><mark>" + "Attack" + "</mark></th>";
body += "<th><mark>" + "Price" + "</mark></th>";
body += "<th><mark>" + "Description" + "</mark></th>";
body += "</tr>";
// Data of Array, iterate through each row of compsci.classroom 
for (var item of Inventory) {
    // tr for each row, a new line
    body += "<tr>";
    // td for each column of data
    body += "<td>" + item.name + "</td>";
    body += "<td>" + item.atk + "</td>";
    body += "<td>" + item.price + "</td>";
    body += "<td>" + item.description + "</td>";
    // tr to end line
    body += "<tr>";
}

htmlFrag="<div style='" + style + "'>" +
    "<table>" +
    body +
    "</table>" +
"</div>"

$$.html(htmlFrag);

</table></div> </div> </div> </div> </div> </div> </div>

Name	Attack	Price	Description
Beginner's Blade	10	5	A weapon fit for a beginner
Adventurer's Blade	20	10	A weapon that signifies experiences in adventure
The Frost Edge	50	150	The treasured sword of Frostpeak
Cool Sword	999	9999	A very cool sword