An Introduction to Web Development with Javascript
Javascript is a powerful programming language used for the web and works in conjunction with HTML. The power of JavaScript can be utilized to build powerful web applications and even web games so its a very robust programming language to say the least. There are many topics that you should familiarize yourself with such as data types, events, operators, expressions, literals and so on. I would highly recommend checking out the JavaScript section on the w3schools.com website which covers many of the topics i just mentioned and then some.
The JavaScript code below is a companion code for my other article “An Introduction to Web Development with HTML” so you can use the HTML code from that article in conjunction with the JavaScript code in this article. I would recommend watching the companion video which explains in detail how the code below works.
("use strict");
//Store references to the elements we need to interact with in an "el" object
const el = {
divButton: document.querySelector("#div_button"),
emailField: document.querySelector("#email"),
emailDisplay: document.querySelector("#email_display"),
list: document.querySelector("#list"),
listDisplay: document.querySelector("#select_display"),
fileField: document.querySelector("#file_upload"),
imagePreview: document.querySelector("#image_preview")
};
//Lets wait for the browser window to completely finish loading be executing our JS code. Tip: You can also use DomContentLoaded which executes after the DOM has finished loading.
window.addEventListener("load", () => initialize());
//The start of our JS code which gets initialized after the load event has completed.
const initialize = function() {
console.log("Hello, your JS code has been loaded.");
//Click Event example
el.divButton.addEventListener("click", function(e) {
const url = e.target.dataset.url;
location.href = url;
});
//Keyup Event example
el.emailField.addEventListener("keyup", function(e) {
const value = e.target.value;
if (value === "") {
el.emailDisplay.innerHTML = "No email detected";
} else {
el.emailDisplay.innerHTML = "";
for (let i = 0; i < value.length; i++) {
el.emailDisplay.innerHTML += value[i];
}
}
});
//Change Event example
el.list.addEventListener("change", function(e) {
const value = e.target.value;
if (value === "") {
el.listDisplay.innerHTML = "No selection detected";
} else {
el.listDisplay.innerHTML = value;
}
});
//File Handler example (also uses a change event)
el.fileField.addEventListener("change", function(e) {
const fileData = e.target.files[0];
previewImage(fileData, el.imagePreview);
});
};
//A custom method used for parsing files
const previewImage = function(file, targetElement) {
const reader = new FileReader();
reader.onload = function() {
const img = document.createElement("img");
img.src = reader.result;
targetElement.innerHTML = "";
targetElement.append(img);
};
reader.readAsDataURL(file);
};
In short, code above shows how we can work with HTML elements by id references and then assign events to specific elements which adds a layer of interaction and greatly enhances how the end user interacts with elements on a webpage. JavaScript can be a very fun programming language to work with once you become more familiar with it. If you want to check out a great Udemy course which covers JS in depth then i highly recommend “The Complete JavaScript Course 2024: From Zero to Expert!” by Jonas Schmedtmann.
If you have any questions or require help with your web project feel free to get in touch with me at leo@digitalodyssey.ca
5 