The venture of learning software engineering has been quite a whirlwind. Before beginning my in-person bootcamp at The Flatiron School, I thought my previous knowledge from building a couple of static websites with HTML and CSS would give me a decent foundation. As any developer could imagine, I quickly understood that my rudimentary coding skills were only a small part of the process of crafting the type of dynamic and highly interactive web applications that I’m in pursuit of creating.
Even after going through the pre-work, I assumed the first couple of days of in-person classes would feel like a review. Well, the first day came, and we jumped straight into JavaScript callback functions! Actually, the rest of the class did the callback functions lab, but my programming partner and I barely knew what a function was, so we took it a couple of steps back. My confidence was naive, and my first week, I was incredibly overwhelmed. It’s humbling to dive headfirst into a new skill.
Having just finished my first three-week phase, I understand why functions are a fundamental building block in JavaScript and how to work with them on a basic level. Functions are a fundamental building block in JavaScript because they allow you to group a set of statements together to perform a specific task. This makes your code more modular, easier to read and maintain, and allows you to reuse code throughout your program.
There are also built-in JavaScript functions that are pre-defined functions that come with the JavaScript language and can be used without the need for additional libraries or packages. These functions are very useful because they allow developers to perform a wide range of tasks efficiently and effectively.
One of the most commonly used built-in functions in JavaScript is console.log(). This function is used to output text or data to the console, which is a fan-favorite debugging tool built into most web browsers. This makes it easy to check the values of variables or see if certain code blocks are being executed correctly.
console.log() is great and all, but it was through learning event listeners that my mind truly began to go wild with ideas of what I could create through front-end development. The built-in function addEventListener() is used to add event listeners to HTML elements. This function allows you to execute a piece of code whenever a specific event occurs, such as a button click or a keypress. Event listeners are a fundamental concept in web development and allow developers to add interactivity and improve the user experience (UX) of a web page or application. Through this function, developers can create interactive features like dropdown menus, popups, or animations that respond to user input, and so much more!
Here’s an example of addEventListener() being used to make a button glow white when the mouse is over:
let button = document.getElementById("start-button");
button.addEventListener("mouseover", function() {
button.style.backgroundColor = "white";
});
button.addEventListener("mouseout", function() {
button.style.backgroundColor = ""; // reset to default color
});
This code adds event listeners to the button for the "mouseover" and "mouseout" events. When the mouse is over the button, the background color is set to white. When the mouse is no longer over the button, the background color is reset to its default value. This is a simple example, but hey, my skill level is simple right now! I’m so excited to dive deeper into JavaScript after my bootcamp to strengthen my skills in UX development and play around with event listeners to create web applications with artistic interactivity and dynamic behavior.
Reflecting on my first phase of software engineering bootcamp, I'm proud of the progress I've made. As I’ve been told, a software engineer never stops learning and I know through more practice, what feels complex to me now will one day come habitually. There is a lot of information to absorb in bootcamp and it can get very overwhelming very fast. But I see the blue-light on the other side of the tunnel and I’m optimistic about what I’ll be able to create in the future.
As I move forward in my career, I'm excited to continue building my skills within the JavaScript ecosystem. I know that these skills will be critical for my success as a front-end developer, and I'm confident that the foundation I've built in bootcamp will serve me well in achieving my goals and I’m excited to see where this path takes me.
Top comments (0)