< Back to Course

INF-250: Web Design and Development — Javascript & Liveserver

Javascript

Javascript brings interactivity to web pages. It's a true programming language that can do everything from creating carousels, popups, and transition effects to fully-fledged web games and apps.

JS examples

alert, confirm, and console.log

JS popups are a simple way to interact with users. The alert() function displays a message and an OK button, while the confirm() function displays a message with OK and Cancel buttons. Later we'll look at how to handle the results of these popups.

The console is a tool for developers to log information, errors, and warnings. You can use console.log() to print messages to the console for debugging purposes. 

alert('This is an alert message!');
confirm('Do you want to proceed?');
console.log('This is a message in the console.');

The button element

The <button> element is used to create clickable buttons on a web page. You can use it to trigger JavaScript functions when the button is clicked.

It works just like any other HTML element and can be styled and have classes and IDs assigned to it. 

<button class="main-button">Click me</button>

Option 1: Inline Javascript

You can use attributes that correspond to JavaScript events. 

<button onclick="alert('you clicked me')">
  Click me
</button>

<h1 onmouseover="console.log('you hovered over me')">
	Hover over me
</h1>

Common inline events

EventDescription
onchangeAn HTML element has been changed
onclickThe user clicks an HTML element
onmouseoverThe user moves the mouse over an HTML element
onmouseoutThe user moves the mouse away from an HTML element
onkeydownThe user pushes a keyboard key
onloadThe browser has finished loading the page

Option 2: Embedded Javascript

You can embed JavaScript directly into your HTML using the <script> tag.

Option 3: External Javascript

You can also link to an external JavaScript file using the <script> tag with a src attribute. 

<script src="path/to/your/script.js"></script>

Let's do this in VScode. But first, let's set up LiveServer.

Loose Ends

Box Sizing

By default, browsers use content-box for the box-sizing property. This can cause layout issues, so it's often useful to set it to border-box for all elements.

This ensures that padding and borders are included in the element's total width and height.

The * selector targets all the elements on the page. 

* {
	box-sizing: border-box;
}

Height Issues

Getting an element to span the entire height of the page can be tricky. You might think that setting the height to 100% would work, but it often doesn't.

100% refers to the height of the parent element, not the viewport. So you'd have to set the height of all the elements up to the <html> element to 100% for it to work, which is a pain. 

html, body{
	height: 100%;
}

.full-height {
	height: 100%;
	background-color: lightblue;
}

Instead, use height: 100vh; to create an element that fills the entire height of the viewport. "vh" stands for viewport height and unlike "%" it is not dependent on the height of the parent element. 

.full-height {
	height: 100vh;
	background-color: lightblue;
}

Group Work - JavaScript Game

Get together with your group and work on this in-class project. Switch roles from what you did in the previous project. We're going to practice with JavaScript and the CSS flexbox layout.

Instructions

  • Work in VScode using LiveServer, not CodePen.
  • Use a separate style.css file for CSS, and a script.js file for JavaScript
  • Your page is a (very) simple game called "Find the Secret Button." It should display six or more buttons, and one of them is the "secret" button.
  • When the user clicks the secret button, it should display an alert that says something like "You found the secret button!"
  • Use flex layout to arrange your buttons on the screen. Don't have them all sit right next to each other.
  • Your page should log a message to the console when the page is loaded.
  • It should also display a popup when the page is loaded explaining the game and asking the user if they are ready to play.

Hints

  • You'll need a combination of inline JavaScript along with your external script.js file.
  • Use height: 100vh if you need an element to fill the entire height of the page.
  • To change the cursor when hovering over a button, use the cursor property in CSS: cursor: pointer;
  • To clear your browser default padding/margins for the body, add this rule: body { margin: 0; padding: 0; }
  • Use * { box-sizing: border-box; } to fix layout issues.

Extras

  • Make the other buttons give hints (or sarcastic remarks) when clicked.
  • Make it look like a game - bold elements, clear instructions, fun colors, etc.