In this module you'll make a start into wonderful world of programming. We will be using the programming language `JavaScript` to do this. You'll learn about the basic buildings of programming: `loops, functions, control flow and more. Consider these as the ABC's of programming, without them it's impossible to write working software!

You'll be learning two main things:

While we're using JavaScript to illustrate these concepts, it's important to keep in mind that what you will learn is applicable to **any** programming language. They might differ in syntax (a fancy way of saying the way the arrangement of words in a language in order for it to make sense), but the functionality will be the same: a loop will always be a loop.

This should be your mindset when you're learning concepts: **I'm learning how to become a software developer that can adjust to any language used, because I know what the underlying principles and concepts are**.

2. How to think like a programmer

In one sentence this means: **knowing how to solve problems computationally**. Let's split that up in two parts: `how to solve problems` refers to the ability to identify issues and find effective solutions. `computationally` refers to the ability to think in logical steps that the computer can understand and execute.

This should be your mindset when you're learning how to think : **I'm learning how to think in logical steps, identifying cause and effect, and always looking for solutions**.

In order to test your JavaScript you'll be using software that will execute your files from the command line. This software is called [Node.js](https://nodejs.org/en/download/). Download the Long-Term Support (LTS) version for your specific operating system.

- For Windows, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0-x64.msi)

- For Mac, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0.pkg)

- For Linux, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz)

After you've installed it, go to your command line interface. Type in the following command:

It should show you version `v10.14.2` or higher.

- Correctly write and use variables, functions and loops

- Learn how to think like a programmer

| 3. | Functions, Thinking like a programmer I, How JavaScript relates to HTML/CSS | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W3](/Week1/MAKEME.md) |

If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/JavaScript2) to go to JavaScript2!

1. Get to know

2. JavaScript exercises

Before we learn how to build actual applications, we first need to gain experience using JavaScript in a computational way. This teaches us how to think like a programmer, and gives us more experience with the language itself.

In the following exercises you'll learn how to use different JavaScript concepts to solve common computational problems:

- [Learn-js](https://www.learn-js.org/). Do all the `Learn the basics` exercises.

- [Codecademy: Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-introduction). Do all the exercises (#1 to #10).

- [FreeCodeCamp: Introduction to JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript). Do at least 20 exercises, you can choose whichever ones you feel are challenging enough.

Inside of your `JavaScript1` fork, create a folder called `week1`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (10 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `logHello.js`.

In each file, start off with the string `'use strict'`. This will make sure the code interpreter will enforce stronger rules when looking at your code.

**Exercise 1: Hello world!**

Write a statement, using the `console.log()` function. Give it a string as an argument. The string should contain the message "Hello world!".

Write 10 statements like these, but in different languages.

For example:

Using the command line, navigate to your `week1` folder and type in the following to test your code:

It should show the message `Hello world!` in 10 different languages.

**Exercise 2: Error debugging**

Consider the following code:

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

When done right, it should show the message `I'm awesome`.

1. First, _declare_ your variable `numberX`. Do not _initialize_ it (which means, don't give it a value) yet.

2. Add a `console.log` statement that explains in words _what you think_ the value of `x` is, like in this example.

3. Add a `console.log` statement that logs the value of `numberX`.

4. Now _initialize_ your variable `numberX` with a number (also called an `integer` in computer science terms).

5. Next, add a `console.log` statement that explains _what you think_ the value of `numberX` is.

6. Add a `console.log` statement that logs the value of `numberX`.

1. Declare a variable `myString` and assign a string to it. Use your full name, including spaces, as the content for the string.

2. Write a `console.log` statement in which you explain in words _what you think_ the value of the string is.

3. Now `console.log` the variable `myString`.

4. Now reassign to the variable `myString` a new string.

5. Just like what you did before write a `console.log` statement that explains in words _what you think_ will be logged to the console.

6. Now console.log `myString` again.

1. Declare a variable `z` and assign the number 7.25 to it.

2. Write a `console.log` statement in which you log the value of `z`.

3. Declare another variable `a` that has the value of `z` but rounded to the nearest integer.

4. Write a `console.log` statement in which you log the value of `a`.

5. So now we have `z` and `a` find a way to compare the two values and store the highest of the two in a new variable.

6. Write a `console.log` statement in which you log the value of the highest value.

1. Declare variable and assign to it an empty array. Make sure that the name of the variable indicates it contains more than 1 item. For example `items` instead of `item`.

2. Write a `console.log` statement that explains in words _what you think_ the value of the array is.

3. Write a `console.log` statement that logs the array.

5. Write a `console.log` statement that logs the second array.

7. Write a `console.log` statement that logs the second array!

1. Declare a variable called `mySentence` and initialize it with the following string: "Programming is so interesting!".

2. Figure out (using Google) how to get the length of `mySentence`.

3. Write a `console.log` statement to log the length of `mySentence`.

8.0 Write a program that checks the types of two variables and prints out `SAME TYPE` if they are the same type.

8.2 For each variable write a `console.log` statement that logs the value

```js

let foo = 3;

console.log("The value of my variable foo is: " + foo);

(Curious to know what a `foo` is? Check [this article](https://en.wikipedia.org/wiki/Metasyntactic_variable) on Wikipedia.)

8.3 Now write a `console.log` statement wherein you first explain in words what you think the _type_ of your variables is.

```js

let x = 9;

let y = 'Hello';

if (...) {

console.log('SAME TYPE');

}

9.0 If `x` equals 7, and the only other statement is `x = x % 3`, what would be the new value of `x`?

9.1 Add at least 3 `console.log` statements in which you show that you understand what `%` does.

10.3 Add `console.log` statements to the above program in which you show that you understand the concepts (just like you've done in the above assignments).

1. JavaScript exercises

2. Code along

3. PROJECT:

So far you've been practicing with JavaScript by itself. This is useful, but we shouldn't lose the connection between this and what we learned before: HTML & CSS.

In the following tutorial you'll learn how to combine JavaScript with HTML & CSS in order to build a simple calculator:

- [Calculator]()

Go through the [guide](../hand-in-homework-guide.md) to learn how to do this.

- [Temperature Converter](https://www.youtube.com/watch?v=8mRGfLL1nzE)

3. How JavaScript relates to HTML & CSS

- [Computational thinking](https://www.youtube.com/watch?v=qbnTZCj0ugI)

Consider the following analogy. The human body needs 3 essential parts in order to function appropriately: bones, skin and muscles. The bones are necessary to give the body **structure**. The skin (shape of body, hair, clothing, make up) is necessary to give the body a unique **presentation**. and the muscles (for walking, climbing, swimming) are needed to give the body **movement and interactivity**.

This is exactly how HTML, CSS and JavaScript relate to each other:

- HTML is used to put the structure of a website together

- CSS acts like the skin and makeup for the HTML. CSS improves the colors and layout of a website structure built with HTML

- JavaScript is a full-on programming language that adds interactivity and functionality to a website

Check the following article to learn more about this:

- [The Relationship Between HTML, CSS and JavaScript Explained by Building A City](https://blog.codeanalogies.com/2018/05/09/the-relationship-between-html-css-and-javascript-explained/)