Lecture

Interactive component

What we would cover?

• variables
• function
• html queries
• button with actions

Demo

					
let strangeButtonCmp = document.getElementById("strangeButton");

function clickHandler(event) {
	console.log('Hey, you just pressed strange button');
	alert('Heloooo');
}

strangeButtonCmp.addEventListener("click", clickHandler);
					
				

Variables

• are like boxes 📦
• you can put stuff into 📥
• and retrieve it later! 📤

Syntax

• Initialization: (nameOfVariable is chosen by YOU)

  let nameOfVariable;

• Assignment:

  nameOfVariable = 5;

  (you can put in any kind of value)
• Retrieve value:

  nameOfVariable

  (write the variable name wherever you would write a value)

Syntax

• Initialization: (Definition and assignment in one line)

  
  let nameOfVariable;
  nameOfVariable = 5;
  						

  ... is the same as

  let nameOfVariable = 5;

						let name;
						name = prompt("What's your name?");
						alert("Hi " + name + "!");
					

Shorter:

						let name = prompt("What's your name?");
						alert("Hi " + name + "!");
					

What makes a good variable name?

• Is xxx a good variable name?
• Is myVariable a good variable name?
• Is age a good variable name?
• → Name should describe what is stored in the variable!
• → Otherwise code will be hard to read and understand

• In JavaScipt, it is common to use camelCase 🐫
• "blog post title" becomes "blogPostTitle"
• "number of users" becomes ...?

Functions

alert("Hello world!");

prompt("What is your name?");

• What is "alert" and "prompt" here?
• They are functions
• Functions are building blocks in JavaScript
• You will use functions all the time
• A JavaScript function is a block of code designed to perform a particular task.

Syntax

• Definition:

  
  							function nameOfFunction() {
  								// body (your code)
  								// ...
  								// ...
  							}
  						

  (nameOfFunction is choosen by YOU)
• Function call:

  nameOfFunction();

  (can be used in any line in the code after the function was defined)

But why do we need it?

• Let's say you want to ask the user about the weather from time to time 🌤

• 
  							let weather;
  							weather = prompt("How's the weather right now?");
  							alert("Oh, so it's " + weather + ", eh?");
  						

					let weather1;
					weather1 = prompt("How's the weather right now?");
					alert("Oh, so it's " + weather1 + ", eh?");

					...

					let weather2;
					weather2 = prompt("How's the weather right now?");
					alert("Oh, so it's " + weather2 + ", eh?");

					...

					let weather3;
					weather3 = prompt("How's the weather right now?");
					alert("Oh, so it's " + weather3 + ", eh?");
				

Do we have to write that every time?

• Functions are blocks of code that you can define

• 
  							function askForWeather() {
  								let weather;
  								weather = prompt("How's the weather right now?");
  								alert("Oh, so it's " + weather + ", eh?");
  							}
  						

• They can be called at any time!

• 
  							askForWeather();
  
  							...
  
  							askForWeather();
  
  							...
  
  							askForWeather();
  						

• So we don't neet to copy code!

HTML queries

Demo

How are you?

let goodButtonCmp = document.getElementById("goodButton");
let badButtonCmp = document.getElementById("badButton");
let answerCmp = document.getElementById("answer");

function goodButtonClick(event) {
	answerCmp.textContent = "That's great 😊";
}

function badButtonClick(event) {
	answerCmp.textContent = "Oh that's sad 😥";
}

goodButtonCmp.addEventListener("click", goodButtonClick);
badButtonCmp.addEventListener("click", badButtonClick);
				

For that you need to do:

• Find an element via it's id property

  
  							let goodButtonCmp = document.getElementById("goodButton");
  						

• Write a function

  
  							function goodButtonClick(event) {
  								// do something here
  							}
  						

• Attach this function to your element

  
  							goodButtonCmp.addEventListener("click", goodButtonClick);
  						

But where do we write JavaScipt code?

We will use <script/> tag inside index.html

					
<html>
 <head>
  <meta charset="utf-8">
	<title>My HTML Page</title>
 </head>
 <body>
  ...
  <script type="text/javascript">
  ...
  </script>
 </body>
</html>
					
				

Example with buttons

					
<html>
 <head>
  <meta charset="utf-8">
	<title>My HTML Page</title>
 </head>
 <body>
  <p>How are you?</p>
  <button id="goodButton">Good 👍</button><button id="badButton">Bad 👎</button>
  <p id="answer"></p>
	<script>
	 let goodButtonCmp = document.getElementById("goodButton");
	 let badButtonCmp = document.getElementById("badButton");
	 let answerCmp = document.getElementById("answer");

	 function goodButtonClick(event) {
		answerCmp.textContent = "That's great 😊";
	 }

 	 function badButtonClick(event) {
		answerCmp.textContent = "Oh that's sad 😥";
	 }

	 goodButtonCmp.addEventListener("click", goodButtonClick);
	 badButtonCmp.addEventListener("click", badButtonClick);
	</script>
 </body>
</html>
					
				

Now let's practice

Please do the following

• Copy your index.html file and name it Lesson3.html
• Create a Feel good button
• Make this button do the console.log('I feel really good today') if user clicked it
• HINT: for that you need to apply all what we just learned :)

Homework