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

Portfolio feedback

God responsive struktur
Virkelig imponeret over flex!
hr tag skal kun bruges til linjeskift ikke afstand
Tlf link
width og height atttributer skal ikke være i html på img tag <img src="bla bla bla" height="500" width="190" alt="flower">

nav tag skal wrappes i ul li

<nav class="navbar">
                <a href="#headline" class="active"> Hjem </a>
                <a href="#headline"> Om mig </a>
                <a href="#container"> Projekter </a>
                <a href="#contact"> Kontakt </a>
            </nav>

alt attributter skal beskrive indhold<img class="portrait" src="Images/image.jpg" alt="image/portrait">, <img id="billede" src="image.jpg" alt="Billede">, alt="animation.gif"

Brug ul li når det giver mening

 <div class="projects" >
            <img class="picture" src="Images/CodingPicture.jpg" alt="Images/CodingPicture">
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                A aliquam animi aspernatur, dolorum eligendi,
                est inventore nihil odit quidem tenetur ut vero voluptas voluptatum?
                Ducimus exercitationem ipsa iusto pariatur ratione?  </p>
        </div>
        <div class="projects2">
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                A aliquam animi aspernatur, dolorum eligendi,
                est inventore nihil odit quidem tenetur ut vero voluptas voluptatum?
                Ducimus exercitationem ipsa iusto pariatur ratione?  </p>
            <img class="picture" src="Images/CodingPicture.jpg" alt="Images/Codingpicture">
        </div>
        <div class="projects3">

Nogle har ikke fået deployer. Typisk fordi der ikke i root mappen er en index.html fil. Fordi i har kaldt dem noget andet
Gode til at bruge ul og li, sektioner også
Fedt med kommentarer i css og html til at vise sektioner. Det er et rigtigt it-arkitekt mindset/* -------------------------------- INTRODUCTION */
Vildt højt niveau helt generelt!

Teacher instruction

Codelab kommer forbi idag
Syntax og problem solving
Create random pairs from two groups. People who have coded. People who have not coded. Tell about teaching a man to fish
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:20 to see some exercises

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 age years old
Syntax error

Question 2

What will the following code log to the console?

console.log(typeof 3);

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. Fx Hello how are you
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 6.2 - problem solving

Turen fra Måløv til Vesterbro Station med S-tog tager 25 minutter. Strækningen er omkring 25 km.

Togene kører hver vej hvert 10. minut.

Hvis jeg kigger ud af vinduet fra måløv til Vesterbro, hvor mange tog kan jeg i gennemsnit forvente at se ud af vinduet?

📝 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

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 shows 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 check if the total price is calculated correctly.
Research how the prompt() functions works. Now use the prompt function to make the user write how many pizzas should be ordered

Exercise taken from HackYourFuture

Exercise 6.2 - problem solving

Kom med et overslag på hvor mange buschauffører bor i Storkøbenhavn?

📝 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

hashtagLearning goals

hashtagFlipped classroom videos

hashtagPortfolio feedback

hashtagTeacher instruction

hashtagPeer instruction

hashtagQuestion 1

hashtagQuestion 2

hashtagImporting external javascript file in html

hashtag📝 Exercise 1 - level 1

hashtagVariables

hashtagVariable declaration

hashtagVariable assignment

hashtaglet vs const

hashtagGiving variable names

hashtag📝 Exercise 2 - level 1

hashtag📝 Exercise 3 - level 1

hashtagComments

hashtagErrors

hashtagTypes

hashtagStrings

hashtagString literal

hashtagString .length

hashtagString concatenation

hashtag📝 Exercise 4 - level 1

hashtagNumbers

hashtagBoolean

hashtagtypeof

hashtag📝 Exercise 5 - level 1

hashtagOperators

hashtagAddition

hashtagSubtraction

hashtagMultiplication

hashtagDivision

hashtag📝 Exercise 6 - level 2

hashtag📝 Exercise 7 - level 2

hashtagExercise 6.2 - problem solving

hashtag📝 Exercise 8 - level 3

hashtagExercise 6.2 - problem solving

hashtag📝 More exercises for experienced - level 3

Learning goals

Flipped classroom videos

Portfolio feedback

Teacher instruction

Peer instruction

Question 1

Question 2

Importing external javascript file in html

📝 Exercise 1 - level 1

Variables

Variable declaration

Variable assignment

`let` vs `const`

Giving variable names

📝 Exercise 2 - level 1

📝 Exercise 3 - level 1

Comments

Errors

Types

Strings

String literal

String `.length`

String concatenation

📝 Exercise 4 - level 1

Numbers

Boolean

`typeof`

📝 Exercise 5 - level 1

Operators

Addition

Subtraction

Multiplication

Division

📝 Exercise 6 - level 2

📝 Exercise 7 - level 2

Exercise 6.2 - problem solving

📝 Exercise 8 - level 3

Exercise 6.2 - problem solving

📝 More exercises for experienced - level 3