comments

Let's start by writing our very first comment! Comments are not run as code, and are instead used by programmers for you and others to read and understand your code easier.

// This is a single line comment!

/*
This is
a multiline
comment!
*/

printing to the terminal

How do we see what we're doing in code? Printing! In JavaScript we use console.log() to achieve this. Just put whatever you want to print in between the brackets. Printing is useful for finding the cause of errors (also known as debugging 🐛) and for monitoring code execution.

// prints Hello World! to the terminal
console.log("Hello World");

// prints 50 to the terminal
console.log(50);

declaring & reassigning variables

You can also create variables in javascript with their own names. These are used everywhere in programming to store values. Some variables can be changed later on as the context of your code changes. Refer to the slides to see the main reasons they're used!

// There are two main ways to declare a variable in javascript

// Constant variables
const unchanging = 1;
unchanging = 5; // will throw an error

// Mutable (changeable) variables
// The name of the variable here is planet, and the value is "earth".
let planet = "earth";
planet = "jupiter";

printing variables

You can print your variables with console.log(). You can combine this with reassigning variables to print different messages.

let message = "Hello World!";
console.log(message);

message = "I love CompClub!";
console.log(message);

let x = 123 + "chicken";  //bad!!!

let x = "123" + "chicken"; //good :D

strings

A string represents textual data. It contains a sequence of characters. For example, "hello", "JavaScript", etc. In JavaScript, strings are surrounded by quotes:

// string enclosed within single quotes
let fruit = "apple";
console.log(fruit);

// string enclosed within double quotes
let state = "NSW";
console.log(country);

// string enclosed within backticks
let result = `success`;
console.log(result);

string methods

You can do a whole bunch of things with strings as well! Here are some examples:

// string.length() returns the length of the string
let fruit = "apple";
console.log(fruit.length); // prints 5

// string.toLowerCase() returns the string in all lowercase letters
let state = "NSW";
console.log(country.toLowerCase()); // prints nsw 

// string.concat() combines 2 strings together
let descriptor = "super";
let result = "success!";
console.log(descriptor + result); // prints super success!

You can see a full list of string methods with this link: https://www.w3schools.com/java/java_ref_string.asp

numbers

In JavaScript, the number type represents numeric values (both integers and floating-point numbers).

1. Integers - Numeric values without any decimal parts. Example: 3, -74, etc.
2. Floating-Point - Numeric values with decimal parts. Example: 3.15, -1.3, etc.

// Integer value
let integer_number = -3;
console.log(integer_number);

// Floating-point value
let float_number = 3.15;
console.log(float_number);

let numApples = 9999999999999999; // y will be 10000000000000000
let numBananas = 999999999999999; // x will be 999999999999999

booleans

A Boolean data can only have one of two values: true or false.

let isRaining = true;
console.log(isRaining); // true

let isWeekend = false;
console.log(isWeekend); // false

These will be extremely useful when you get to conditionals in part 1.5!

checking variable types

Using typeof on a variable returns the data type associated with the given variable.

console.log(typeof "Poco"); // String
console.log(typeof 420); // number
console.log(typeof true); // boolean
console.log(typeof x); // undefined - we haven’t given x a value

let cat = "black";
let numBats = 12;
let poisonProb = 0.5;
let isPumpkinOrange = true;

arithmetic operators

There are multiple ways we can operate on numbers, just like in math!

the modulo % operator

The modulo operator is a little complicated when first seeing it, but once you understand that it's all about remainders, it's not so bad!

x = 21;
console.log(x % 4); // 21 ÷ 4 = 5 remainder 1, so this will print 1

Another big use for the modulo operator is by checking whether a number is odd or even. We can do this by doing x % 2 - an odd number has a remainder when divided by 2, whilst an even number has no remainder!

assignment operators

x = 10;
x += 3; // shorthand for x = x + 3
console.log(x); // should output 13 since 10 + 3 = 13

x = 10;
x /= 5; // shorthand for x = x ÷ 5
console.log(x); // outputs 2, since 10 ÷ 5 = 2

x = 10;
x++; 
console.log(x); // outputs 11, since 10 + 1 = 11

comparison operators

Comparison operators are used in logical statements to determine equality or difference between variables or values. Given that x = 5, the table below explains the comparison operators:

let sweetCandy = 100;
let sourCandy = 150;

logical operators

Logical operators are used to determine the logic between variables or values.

Given that x = 6 and y = 3, the table below explains the logical operators:

if statements

Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

if (condition) {
  //  block of code to be executed if the condition is true
}

// make a "Good day" greeting if the hour is less than 18:00:
hour = 19
if (hour < 18) {
  greeting = "Good day";
  console.log(greeting);
}

else if statements

Use the else if statement to specify a new condition if the first condition is false. Remember that if statements apply sequentially, so following conditions will only run if the previous conditions are false.

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}

// If time is less than 10:00, create a "Good morning" greeting,
// Otherwise, if the time is less than 20:00, create a "Good day" greeting
// Otherwise, create a "Good evening" greeting:
time = 15
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

else statements

Use the else statement to specify a block of code to be executed if the condition is false.

if (condition) {
  //  block of code to be executed if the condition is true
} else {
  //  block of code to be executed if the condition is false
}

// if the hour is less than 18, create a "Good day" greeting
// otherwise the greeting is "Good evening":
hour = 10
if (hour < 18) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

let favoriteColor = "red"; // try changing this to blue, green, etc

switch statements

A switch statement allows you to execute different blocks of code based on the value of a variable. It’s an alternative to using multiple if else statements when you’re checking one variable against several possible values.

How it works:

1. The switch expression is evaluated once
2. The value of the expression of compared with the values of each case
3. If there is a match, the associated code black is executed
4. If there is no match, the default code block is executed

switch (expression) {
  case x: // If expression === x
    // code block
    break;
  case y: // Else if expression === y
    // code block
    break;
  default: // Else
    // code block
}

let weather = "Sunny";

if (weather === "Windy") {
  console.log("Wear a jacket!");
} else if (weather === "Rainy") {
  console.log("Bring an umbrella!");
} else if (weather === "Sunny") {
  console.log("Put sunscreen on!"); 
} else {
  console.log("Unknown weather");  
}

// check the value of the weather variable and execute different code 
// based on which weather it is
let weather = "Sunny";

switch (weather) {
  case "Windy":
    console.log("Wear a jacket!");
    break;
  case "Rainy":
    console.log("Bring an umbrella!");
    break;
  case "Sunny":
    console.log("Put sunscreen on!");
    break;
  default:
    console.log("Unknown weather");
}

default case

The default keyword specifies the code to run if there is no case match. It is not necessary to break the last case in a switch block since the block breaks ends there anyway.

potion = "healing"; // try changing this to other values
if (potion === "healing") {
  console.log("Restores health!");
} else if (potion === "invisibility") {
  console.log("You disappear!");
} else if (potion === "strength") {
  console.log("You feel powerful!");
} else if (potion === "poison") {
  console.log("Ouch! Toxic!");
} else {
  console.log("Unknown potion!");
}

while loops

The while loop loops through a block of code as long as a specified condition is true.

while (condition) {
  // code block to be executed
}

// This loop will run, over and over again, as long as the variable i
//  is less than 10:
while (i < 10) {
  text += "The number is " + i;
  i++;
}
// Output:
// The number is 0
// The number is 1
// The number is 2
// The number is 3
// The number is 4
// The number is 5
// The number is 6
// The number is 7
// The number is 8
// The number is 9

// This loop counts down the days until winter. It runs as long as 
// daysUntilWinter is greater than 0:
let daysUntilWinter = 5;
while (daysUntilWinter > 0) {
  console.log("Days until Winter: " + daysUntilWinter);
  daysUntilWinter--; // Decrease the counter by 1
}
console.log("It's Winter!");
// Output:
// Days until Winter: 5
// Days until Winter: 4
// Days until Winter: 3
// Days until Winter: 2
// Days until Winter: 1
// It's Winter!

for loops

A for loop repeats a block of code a known number of times. It’s commonly used when the number of iterations is known ahead of time.

for (initialization; condition; final-expression) {
  // code block to be executed
}

// This loop prints numbers from 0 to 9:
for (let i = 0; i < 10; i++) {
  console.log("The number is " + i);
}
// Output:
// The number is 0
// The number is 1
// The number is 2
// The number is 3
// The number is 4
// The number is 5
// The number is 6
// The number is 7
// The number is 8
// The number is 9

// This loop prints even numbers up to 10:
for (let i = 0; i <= 10; i += 2) {
  console.log(i);
}
// Output:
// 0
// 2
// 4
// 6
// 8
// 10

for...in loops

The for…in loop iterates over the properties (keys/indexes) of an object.
When used on arrays, it returns the indexes (not the values directly).

let nums = [45, 52, 3, 5, 10, 11];

for (index in nums) {
  console.log(index);        // Prints the index
  console.log(nums[index]);  // Prints the value
}
// Output:
// 0
// 45
// 1
// 52
// 2
// 3
// 3
// 5
// 4
// 10
// 5
// 11

for...in loops with objects

let person = { name: "Jamie", age: 22, student: true };
for (key in person) {
  console.log(key);          // Prints the property name
  console.log(person[key]);  // Prints the value of that property
}
// Output:
// name
// Jamie
// age
// 22
// student
// true

for...of loops

The for…of loop iterates over the values of an iterable object (arrays, strings, Maps, Sets, etc.).

let nums = [45, 52, 3, 5, 10, 11];

for (number of nums) {
  console.log(number);  // Prints the value
}
// Output:
// 45
// 52
// 3
// 5
// 10
// 11

functions in programming

Functions are a useful tool where we can store code separately so we don’t have to rewrite it. This reduces repetitiveness in code, because you can just call functions multiple times!

To define a function in JavaScript:

1. Use the function keyword
2. Give it a name
3. List parameters, or inputs, inside parentheses ((…))
4. Write the body between { … }
5. Use return to specify the output

function addNums(a, b) {
  return a + b;
}

let result1 = addNums(4, 5);
let result2 = addNums(10, 11);

console.log(result1); // 9
console.log(result2); // 21

In the above function, the name is addNums, parameters are a and b, and the body is return a + b You can call it multiple times with different input to reuse the same logic.

what are apis?

• Stands for "Application Programming Interface".
• Allows us to communicate with websites & programs we don't control.

query parameters

Query parameters come in parameter/value pairs -- We pass these to the API in order to control what it will return to us. Parameters are always strings, but values can be anything.

query parameter syntax

When writing a query parameter directly in a URL, we indicate individual parameter/value pairs with "?parameter=value", and put multiple together with "&". Some examples, with a base > URL of https://meowfacts.herokuapp.com/:

• https://meowfacts.herokuapp.com/?count=3
• https://meowfacts.herokuapp.com/?lang=ukr
• https://meowfacts.herokuapp.com/?lang=ukr&count=3 Order does not matter. The following is the same as the last example.
• https://meowfacts.herokuapp.com/?count=3&?lang=ukr

how to use thunder client

1. Click the "Lightning bolt" icon on the left of your screen, past the file viewer.

2. Then, hitting "New Request" will allow you to continue using Thunder Client to do API examples.

You can enter your chosen API, configure the Query Parameters, and hit "Send" to see the result from the API!

parameters

Remember to hit the checkbox next to your parameter to enable it, if it's not checked already!

dictionaries & accessing them

A dictionary, written with curly braces {}, can be accessed with strings.

The dictionary

let dict = {data: "hello"}

can be accessed with dict["data"].

async/await

• async is shorthand for "Asynchronous"
• await is shorthard for... "Await"

We use async and await for computations that may take a long time. In short, using these warns Javascript & the programmer that these operations may be "waiting" for a while, so we are explicitly waiting with await.

In our case, the operations may be slow because using internet APIs can be slow.

promises

All async functions, and functions like fetch, return a Promise instead of a value. A Promise is a guarantee that if you await the promise, you will get the data inside.

async function one() {
    return 1;
}

If we did:

let data = one();

data will be a Promise, instead of the data we actually want. If instead we do:

let data = await one();

Now data will be 1.

calling `await`

If we define our own functions, we must use async at the start of the function. Otherwise, you cannot use await within the function body, as you have not warned Javascript the operation may take a long time. The following will not work:

// Doesn't work!
function googler() {
    return await fetch("https://google.com")
}

But this does, because we've added async:

async function googler() {
    return await fetch("https://google.com")
}

fetch calls

fetch is the function we use to make an API call in Javascript.

In its most simple form, we simply call fetch using await (and then await again on some of the contents, as the thing returned by fetch is quite complex and we only need a little bit of it):

let response = await fetch("https://meowfacts.herokuapp.com");
let data = await response.json();
console.log(data);

.json() converts the response from fetch into data we can use.

query parameters

To add query parameters, we need to manually add them to the URL. (See the Query Parameters page for how to do this!).

let response = await fetch("https://meowfacts.herokuapp.com/?count=3")
let data = await response.json()
console.log(data)

automagical query parameters

There is a method of automatically adding query parameters, but it's out of scope for this course. We provide it here anyway - perhaps you could try and figure out how it works? If not, you can use it as much as you like anyway.

let params = new URLSearchParams();
params.append("count", 3)

let response = await fetch(`https://meowfacts.herokuapp.com/?${params}`)
let data = await response.json()
console.log(data)

Note the backticks ` instead of quotes ", and the question mark!

highlights

Helloo!!!!

const { SlashCommandBuilder } = require('discord.js');

module.exports = {
  data: new SlashCommandBuilder()
    .setName('ping')
    .setDescription('Replies with Pong!'),
  async execute(interaction) {
    await interaction.reply('Pong!');
  },
};

const { blockQuote, bold, italic, quote, spoiler, strikethrough, underline, subtext } = require('discord.js');
const string = 'Hello!';

const boldString = bold(string);
const italicString = italic(string);
const strikethroughString = strikethrough(string);
const underlineString = underline(string);
const spoilerString = spoiler(string);
const quoteString = quote(string);
const blockquoteString = blockQuote(string);
const subtextString = subtext(string);

const message = bold(italic("This is bold and italic!"));
await interaction.reply(message);

await interaction.reply(blockQuote(bold("System Message: ") + "Command executed successfully."));

await interaction.reply(spoiler("Secret message inside..."));

await interaction.reply(bold('Pong!'));

const { SlashCommandBuilder } = require('discord.js');

module.exports = {
  data: new SlashCommandBuilder()
    .setName('ping')
    .setDescription('Ping a user!')
    .addUserOption(option =>
      option.setName('target')
        .setDescription('User to ping')
        .setRequired(true)
    ),
  async execute(interaction) {
    const user = interaction.options.getUser('target');
    await interaction.reply(`Pong! ${user}`);
  },
};

listeners = bot ears

Listeners are like the eyes and ears of your bot. They listen for certain events, and when they "hear" one, you can tell your bot to do something, like send a reply or welcome a new member!

import { Events } from 'discord.js';

const name = Events.MessageCreate;
const once = false;
function execute(message) {
  // Prevent the bot from copying its own messages or other bots
  if (message.author.bot) return;

  // Send the same content back to the channel
  message.channel.send(message.content);
}

export { name, once, execute };

const client = new Client({ intents: [GatewayIntentBits.Guilds] });

const client = new Client({ 
	intents: [
		GatewayIntentBits.Guilds,
		GatewayIntentBits.GuildMessages,
		GatewayIntentBits.MessageContent
	]
});

there are many events!

Your bot can listen for many events, like messages, member joins, reactions, and more!

Want to see them all? In VSCode, if you type Events. (with the dot), you will see a long list.

Or, you can visit the official discord.js website for more information. In the Events section, each event has a description of how it triggers, and what information your bot will receive.

slash commands

A slash command only appears when starting a message with /.

Instead of having the bot automatically respond to events, slash commands only run when someone uses the slash command.

slash command structure

discord.js provides a slash command builder to help us make slash commands.

import { SlashCommandBuilder } from 'discord.js'

export const data = new SlashCommandBuilder()
  .name('some command');
  // can add more information about the slash command

export async function execute (interaction) {
  // do something    
}

See ping.js, in commands/utility for a basic example.

adding options (inputs) to your commands

use .addStringOption(), addUserOption(), etc. to let users give info to your slash command. A full list of ways to add information to a command can be found here

import { SlashCommandBuilder } from 'discord.js';

export const data = new SlashCommandBuilder()
    .setName('repeat')
    .setDescription('Give a message to repeat!')
    .addStringOption(option =>
        option
            .setName('input')
            .setDescription('Text to repeat')
            .setRequired(true));

export async function execute(interaction) {
    const text = interaction.options.getString('input');
    await interaction.reply(text);
}

info

async means this function can use await inside it.

  async function nameOfFunction()

info

• This is where you put code that might fail (we will talk about how to handle the fail in the next section), in this case your API Call.

   try {
       ...
   }

info

• fetch(...) sends a GET request to the URL.
• await means "wait for the response before continuing."

       const response = await fetch('<url of your API>');

info

The API returns something like:

   {
   "data": ["Response from AI"]
   }

• await response.json() reads the body of the response and turns it into a JavaScript object.
• The result is stored in the data variable.

   const data = await response.json();

info

• data.data is an array of facts.
• data.data[0] gives you the first fact.

  console.log(...);

info

• If fetch fails (e.g. no internet, server down), the code will jump to catch and print the error message.
• You'll want see a helpful message like:

  Something went wrong: TypeError: Failed to fetch

info

• This runs everything we just wrote.
• It will print a random cat fact or an error in the console.

nameOfFunction();

info

Slash commands let you trigger bot responses using a /command in Discord.

import { SlashCommandBuilder } from 'discord.js'
export const data = new SlashCommandBuilder()
 .setName('some command');
 // can add more information about the slash command

async function execute (interaction) {
 // do something    

}

export { data, execute };

info

1. Install OpenAI by running this npm install openai
2. We need the OpenAI library and our API key to make requests. The key is stored in a variable called process.env

import OpenAI from "openai";
const apiKey = process.env.OPENAI_API_KEY

info

The client is how we talk to OpenAI.

const client = new OpenAI({ apiKey });

info

• client.chat.completions.create(...) sends a message to the AI.
• We use the gpt-3.5-turbo model for the basic text responses. (More models you can try: (OpenAI Models)[https://platform.openai.com/docs/models])
• The input message goes inside messages.

const response = await client.chat.completions.create({
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: <Insert prompt here> }]
});

info

The response object has a nested structure. To access just the text reply:

response.choices[0].message.content

info

You can store the question as a variable and use it in the API call.

const userPrompt = "What is AI?";

const response = await client.chat.completions.create({
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: `${userPrompt}` }]
});

info

async means this function can use await inside it.

async function askOpenAI(prompt) {
    const response = await client.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: prompt }]
    });
    return response.choices[0].message.content;
}

info

Replace your original interaction.reply() with a call to your AI function.

const answer = await askOpenAI(userPrompt);
await interaction.reply(answer);

info

Sometimes the API might fail (e.g., no internet, server down). To avoid crashing your program, use try-catch.

async function askOpenAI(prompt) {
    try {
        // Do Something
    } catch (error) {
        // Do Something
    }
}

info

To accept text input, we need to add a string option to the /ask slash command.

.addStringOption((option) =>
    option
        .setName('...')  // What should we call this input?
        .setDescription('...')  // How will you describe the input?
        .setRequired(true)
)

info

In the execute() function, we can extract what the user typed using .getString().

const prompt = interaction.options.getString('...');

creating a file

To write to a file, use the fs module. The fs module provides us with a bunch of functions that allow us to read and write to files, similar to the file() function in python. Example:

import fs from "fs"; 

const file = fs.createWriteStream("filename.txt", { flags: 'a' }); 

By setting the 'a' flag in the createWriteStream, this tells the computer that we want to "append" to the file instead of overwriting it. This is particularly helpful when we want to continiously write our messages to the log.

writing to a file

To write to a file, use the fs module. The fs module provides us with a bunch of functions that allow us to read and write to files, similar to the file() function in python. Example:

const message = interaction.message;
file.write(message); 

Where file is a createWriteStream that was created earlier.

writing to a file

To read from a file, we cannot simply use the createWriteStream we created earlier, but we have access to this function called readFileSync() that reads in the entire file. Example:

const data = fs.readFileSync('./messages.txt', { encoding: 'utf8', flag: 'r' });

console.log(data);

the Sync of readFileSync at the end of the function name means that the function is synchronous. This means that the code will wait until the function is done until it moves on with the rest of the code.