Javascript - Hello world, variables, comments, operators, types

Learning goals

Hello world in javascript
- console.log
Variables
- const, let
- Assignment, reassignment
- Giving variable names
Comments
Errors
Types
- number
- string
- boolean
- typeof
Operators
- Arithmetic operators
  - Addition +
  - Subtraction -
  - Multiplication *
  - Division /

Flipped classroom videos

Teacher instruction

Remember to handin portfolio! Not part of portfolio projects!
- Peerfeedback
Studieviden fokusgruppe biografbilletter
- Nicklas
Create random pairs to work in using https://pairs.austincodingacademy.com/ and the students in the hidden html
The first 20 min we will work strictly with pair programming! 10 min each as driver and support. Only coding on one computer
After the 20 min the students decide if they would like to continue or work alone
If you continue pair programming remember to get time on the keyboard. Shifting who is driver.
I don't want to see anyone just supporting
I expect everyone to complete level 1 today
Meet at 11:30 to see some projects

Peer instruction

Question 1

What will the following code log to the console?

const age = "3";
const sentence = `i am ${age}years old`;
console.log(sentence);

I am 3 years old
I am 3years old
i am 3 years old
i am 3years old
i am 3 years old
Syntax error

Question 2

What will the following code log to the console?

console.log(typeof typeof 3);

hello
string
number
boolean
3
Syntax error

Importing external javascript file in html

Let's write our first Hello world program in Javascript. Firstly create a new project in Webstorm. For javascript to run in the browser we need to import a javascript file in the index.html file. Like we did with the css (but the syntax of importing is different)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Javascript application</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

This line: <script src="main.js"></script> is the line that imports and runs javascript in the browser. The javascript that it will run can be found in the main.js file. The name of the javascript file does not matter.

main.js

console.log("Hello World");

console.log is a function that will log some text to the console. The text it will log in this example is Hello World

To run the javascript click on of the browsers when hovering over the index.html file.

To find the log go to your browser and open developer the developer tools. Depending on which browser you have it might be a bit different. Generally right click -> Inspect Element -> Then click on the Console or Konsol depending on your language. A shortcut on both mac and windows is F12.

📝 Exercise 1 - level 1

(This exercise will help you expand your understanding of console.log)

Log 4 statements like these to the console, but in different languages.

For example:

Halo, dunia! // Indonesian
Ciao, mondo! // Italian
Hola, mundo! // Spanish

Exercise taken from CodeYourFuture

Variables

https://youtu.be/Jvrszgiexg0

When you write code, you'll want to create shortcuts to data values so you don't have to write out the same value every time.

We can use a variable to create a reference to a value. Variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container.

Variable declaration

Let's first try and declare a let variable

let greeting;

Now we have declared (created) a variable called greeting. We have not put anything into it yet. Let's do that!

Variable assignment

let greeting;
greeting = "Hello";

Now we first declare the variable greeting and then on the next line assign it with the value of the text Hello.

This can be done in one line:

let greeting = "Hello";

`let` vs `const`

Variables are declared with let and const keywords as follows.

let tells Javascript that the variable will be reassigned
const tells Javascript that the variable cannot be reassigned

Using let reassignment is possible:

let numberOfCars = 4;
numberOfCars = 5;
numberOfCars = 6;
console.log(numberOfCars);

Using sonst reassignment is not possible:

const name = "Irina";
name = "Benjamin";

This will throw an error!

The rule to use is: When defining a variable, always declare it as a const, then if you need to modify that variable change it to let
Always use const until it won't let you 😉

Giving variable names

Giving good variable names is an art and we will get into that later aswell. For now try and give descriptive names that describes what the variable contains. Not what it is!

In javascript the way to give names is using camelCase

// correct variable name
const minutesInADay = 60 * 60;
// wrong variable name
const minutes_in_a_day = 60 * 60;
// wrong variable name
const MinutesInADay = 60 * 60;

📝 Exercise 2 - level 1

Add a variable greeting and assign a greeting of your choice to the variable
Print your greeting to the console 3 times. You should see the greeting 3 times on the console, one on each line.

📝 Exercise 3 - level 1

Consider this code, it has a syntax error in it.

Fix it so that when running this file it logs the message 'I'm awesome!'

console.log('I'm awesome'!;

Exercise taken from HackyourFuture

Comments

Comments is text that describes the code. It is not interpreted by javascript (it is invisible to javascript). You can create a comment in two ways

Using // will create a oneline comment
Using /* COMMENT HERE */ will create a multiline comment

// This is a one line comment that Javascript will not see!

/*
This is a multiline comment
*/

Try and use comments to document/describe your code

// First I declare a variable
let greeting;
// Then I assign it with the text "Hello"
greeting = "Hello";

Errors

Working with errors is an integral part of working as a developer. Getting comfortable with getting errors, reading errors and understanding error is essential.

Let's start with this code

const name = "Peter";
name = "Johanne";

The error says Uncaught TypeError: invalid assignment to const 'name' main.js:2:1

invalid assignment to const 'name' tells us that we have made an invalid assignment to the variable name. main.js:2:1 tells us that the error happened at line 2. In this case the error happened because we are reassigning the const called name. We can either make the variable a let or not reassign the variable.

Types

In all programming languages there are different types of data. We will go through the most basic types which is string, number, boolean. These are also called the primitive types of javascript

Strings

Text is by software developers called strings.

const character = "a";
const message = "This is a string";

String can be created in 3 different ways.

Using double quotes around the string "hello"
Using single quotes around the string 'hello'
Using backpacks around the string `hello` - string literal

String literal

A string literal is a special form of string where we can put a variable inside another string

const age = 23;
const ageString = `I am ${age} years old`;
console.log(ageString); // Will log out: "I am 23 years old"

const firstname = "Mie";
const lastname = "Hansen";
// We define a string literal that has the fullname of a person
const fullname = `${firstname} ${lastname}`;
console.log(fullname); // Will log out: "Mie Hansen"

There are a ton of string methods. Check them out here

String `.length`

To get a number of characters of a string simply write .length after the variable

const name = "Charlotte";
console.log(name.length); // Will log out: 9

String concatenation

You can add two strings together

const name = "Charlotte";
const words = " is my name";
console.log(name + words); // Will log out: Charlotte is my name

📝 Exercise 4 - level 1

Using string literals, string length and the following code. Log out a string that says: "My name is peter. It has 5 characters"

const name = "peter";
// YOUR CODE GOES HERE

Numbers

There are different types of numbers in programming. These are the two most important

Integers - Whole numbers like 1, 45 or -7
Float - Numbers with decimals: 1.1, 100.5, 1.76

javascript does not care which you use. To javascript those are just numbers

const age = 21;
const height = 1.76;

Boolean

There is another primitive type in JavaScript known as a boolean value. A boolean is either true or false, and it should be written without quotes. A boolean is like a light switch that can be either on or off.

const keaIsGreat = true;
const thisIsATerribleClass = false;

We can use boolean values to make decisions in our code based on certain conditions, as we shall see in the next class.

`typeof`

typeof is a helpful method that will help figure out what type most variables are.

const age = 23;
console.log(typeof age); // number

const name = 'Mohammed';
console.log(typeof agename); // string

const isTall = true;
console.log(typeof isTall); // boolean

📝 Exercise 5 - level 1

With pen and paper write down what the following will log out

console.log(typeof 3 + 5);
console.log(typeof "3 + 5");
console.log(typeof "+");
console.log(typeof "");
console.log(typeof "3" + 5);
console.log(typeof typeof 3+5);

Operators

An operator performs some operation on single or multiple operands (data value) and produces a result. There are different types of operators. Today we will talk about arithmetic operators (also called mathematical operators)

Addition

const sum = 1 + 2;
console.log(sum); // 3

const numberOfApples = 8;
const numberOfBananas = 2;
const numberOfFruits = numberOfApples + numberOfBananas;
console.log(numberOfFruits); // 10

console.log(10 + 1); // 11

Subtraction

const subtraction = 10 - 5;
console.log(subtraction); // 5

const subtraction2 = 5 - 10;
console.log(subtraction); // -5

Multiplication

const multiplication = 10 * 4;

Division

const division = 1 / 2;

📝 Exercise 6 - level 2

Create two variables numberOfStudents and numberOfteachers and assign them to some numbers of your choosing
Log a message that displays the total number of students and teachers

Expected Result

Number of teachers: 15
Number of mentors: 8
Total number of teachers and mentors: 23

📝 Exercise 7 - level 2

Now log out the percentage of students and percentage of teachers

Percentage of trainees: 65%
Percentage of mentors: 35%

Exercise taken from https://syllabus.codeyourfuture.io/js-core-1/week-1/lesson#exercise-15-mins

📝 Exercise 8 - level 3

Part 1

Create a variable to store the name of your favourite pizza. Create a variable to store the price of the pizza

Now log at statement to the console that will show the pizza man the entire pizza order in a language he understands, eg. like this: New pizza order: <name of pizza>. The price of the pizza is: <price of pizza>

Part 2

Now we will modify the program so that you can order multiple pizzas and also decide if the pizzas should be family size

Create a new variable to store the amount of pizzas you would like to order
Now write a formula to calculate the total price of your pizza order, and save it in a variable called totalPrice
Modify the log statement for the pizza man so it includes wether or not the pizza is family size, and now show the total price of the order New pizza order: <amount of pizzas> <name of pizza>. Total cost for the order is: <total price>
Try to change the price of the pizza and if the pizza should be family size, and then check if the total price is calculated correctly.

Exercise taken from HackYourFuture

📝 More exercises for experienced - level 3

Age-ify (A future age calculator)

Goodboy-Oldboy (A dog age calculator)

Housey pricey (A house price estimator)

PreviousGit NextJavascript - Conditionals and loops

Last updated 2 years ago