Javascript allows us to add interactivity to our webpages.

here is an example of a simple script

	
	let today = new Date();
	let hour = today.getHours();
	let message;
	let messageContainer = document.getElementById("message");

	if (hour >=18) {
		message = "good evening :-)"
	} else if (hour >=12) {
		message = "good afternooon"
	} else {
		message = "good morn!"
	}

	messageContainer.innerHTML = message;

some things to keep in mind while writing javascript

Create external js files, just like you do with CSS and link to them with the script tag just before closing body tag

A fundamental concept in javascript is the variable.

Variables, which are also known as bindings, allow you store values for later use, so variables bind names to values.

You need to declare the variable first and give it a name. The name is up to you.

You can use let to define your variables. The terms var and const are also valid but for our class we will stick to let

For example if I wanted to make a new variable called students I would write:

A semicolon is used to end statements in JS. We now have a variable named students

To assign a value to a variable we use the equal sign:

Variable names can only begin with a letter or dollarsign or underscore, it cannot begin with a number. It cannot contain a dash or period or space. And they’re case sensitive. There are also reserved keywords in JS language like float, int, switch that cannot be used for your variable names.

When naming variables use the name the describes the information that the variable points to. So if I want to make a variable for the amount of people in this room, students makes sense. Also use camelCase, like studentsInRoom

You can also set variables equal to strings or booleans. Not just numbers, for example:

or

on expressions...

There are two general types of JavaScript expressions: those that assign a value to a variable and those that use two or more values to return a single value.

We can say let color = "blue";

Thats an expression that assigns a value to a variable

Or we can say let percentage = 8 / 2;

That expression uses two or more values to return a single value, so percentage is equal to 4 now.

on operators...

ASSIGNMENT operator: = assigns value to variable
ARITHMETIC operators: + - / * demo with math and with strings
COMPARISON operators: if two values are equal, ===, or two compare values against one another use !==, >, <, >= , <=
LOGICAL operators: && or ||

In order to make changes to your web page, your script needs to access elements to change.

When a web page is loaded, the browser creates a Document Object Model of the page.

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page

An example piece of code below with some basics for accessing and changing elements based on user interaction (as seen above):

let count = 0
let message = document.getElementById("the-internet");

document.body.addEventListener("click", theInternetIs)

function theInternetIs() {
	count++
	if (message.innerHTML === "the internet is in the ground") {
		message.innerHTML = "the internet is in the clouds";
		message.classList.add("cloud-texture");
	} else if (count >=3) {
		message.innerHTML = "click this page to find out where the internet is...";
	} else {
		message.innerHTML = "the internet is in the ground";
		if (message.classList.contains("cloud-texture")) {
			message.classList.remove("cloud-texture");
		}
	}
}