So you're curious about web development and keep hearing about JavaScript, HTML, and CSS? Let me break it all down for you in a way that actually makes sense.
Think of building a website like constructing and living in a house: HTML is the structure - the walls, floors, roof, and rooms. It defines what content exists and where it goes. CSS is the interior design - the paint colors, furniture placement, lighting, and decorations. It makes everything look good. JavaScript is the electricity and plumbing - it makes things work! It powers the lights, runs the dishwasher, and makes the garage door open when you press the button. Just like you need all three elements for a fully functional home, you need HTML for structure, CSS for style, and JavaScript for interactivity to create engaging websites.
Java has a litany of things it can do, from Control flows, Loops, Arrays, Objects, the list goes on! But how about we start with Control flows and Loops. Continuing with our cosy home theme, why not make a coffee! Control flows are just like making a coffee. It has several steps to complete in an order for it to be successful.
function makeCoffee() {
if (coffeeBeansAvailable) {
grindBeans();
if (filterAvailable) {
brewCoffee();
} else {
console.log("Need to buy filters!");
}
} else {
console.log("Go to the store first!");}}With the above code, we can see how we would make coffee! We can also see the order of things, we go to make coffee, if we have coffee beans, then grind some beans, if we have a coffee filter, then brew the coffee! However there are some exceptions, also known as "else". If coffee beans are not available, we would get a message saying "go to the store" or if the filters were not available, we would get "buy filters". This is the fundamentals of Control Flows. But what if we want a repeating action? That is where Loops come in! Using the Coffee analogy, it tastes a bit bitter. Some sugar sure would be nice!
let sweetness = 0;
let targetSweetness = 5;
while (sweetness < targetSweetness) {
addSugarCube();
sweetness++;
tasteCoffee();}
console.log("Perfect! Coffee is ready.");}As we can see, this loop will repeat "addsugarcube" until the desired sweetness has been achieved! Loops are a fantastic way to repeat something until the set conditions are met. However you might be asking "what about the other things? Arrays? Objects?". Well I can tell you I am no fan of Arrays! and it took me some time to get my head around it. Arrays are best thought of like a Numbered list. Where you would want items in a order listed with numbers.
let shoppingList = ["milk", "bread", "eggs", "chocolate"];We can see here a list of items. You might be thinking "I thought this had to do with numbers?", and well, it does! In programming with Javascript, we count items differntly. Instead of Milk = 1, Bread =2, Eggs =3, Chocolate =4, We count from 0. This would then make the list look like this, Milk = 0, Bread = 1, Eggs = 2 Chocolate = 3. This is our numbered list! And we would "access" items from this list as follows.
let shoppingList = ["milk", "bread", "eggs", "chocolate"];
console.log(shoppingList[0]);
console.log(shoppingList[3]);
shoppingList.push("ice cream");
Now we can see a few more bits of code added to our shopping list! if we use "console.log(shoppingList[0]);" it would grab Milk, and if we used "console.log(shoppingList[3]);" it would grab the Chocolate. But you might notice "shoppingList.push("ice cream");". This would add Icecream to our list! Making it the 4th item. Now on to objects!
let person = {
name: "Sarah",
age: 28,
city: "Wellington",
hobbies: ["reading", "hiking", "cooking"]};
console.log(person.name);
console.log(person.age);
console.log(person.city);
person.job = "Web Developer";
Objects are another way to store information. Though not to be confused with arrays as their application is very different. From the above code, we can see some information on a person, we have created an "object" called Person, and that "Person" has several properties, like a name, age, city and hobbies. Funnily enough those hobbies are sitting in an Array! If we were to access information about this person, we would use console.log(person."whatever we wanted to know"). So long as whatever we wanted to know is a name, age, city or hobbies! Now that last line of code is to add things to our Object. Sarah is a Web Developer. so to add that information we would need to name the object, which is "person", followed by a "." and then what we want to name the next item, in this case "job" and that would "=" whatever we put the job as, which again in this scenario is "web developer"
We use arrays to list items of a similar group. For example fruits! If we had bananas, apples and grapes, we would use an array. If we wanted a variety of information with multiple properties we would use Objects, say if we had a Cat named Momo, his Breed was Shorthair, and his Age is 3. (Momo is indeed my cat)
Functions are essentially an automated service that you make! It can perform specific tasks for you, instead of potentially having to write the same code over and over and over, You could create a function and call () it whenever you need!
function greetUser(name, timeOfDay)
{let greeting = `Good ${timeOfDay}, ${name}! Welcome back!`;
console.log(greeting);
return greeting;}
We can see in the above codebox a little function that would greet a user, with specifics of time of day, the users name and a greeting! This is a simple example of how a function functions! What makes functions so amazing? Well they are very reusable, Help keep things organized, other developers can easily see what's happening and if something odes go wrong, you only need to fix one small section!
Now one thing we haven't mentioned is the DOM (Document Object Model) which is a programming interface that represents your HTML document as a tree structure that Javascript can interact with. It is created by the browser when you HTML page loads and it takes the tags and creates the structure. Think of it like the HTML is a blueprint, the DOM is the living structure. Javascript is used to manipulate the DOM in realtime. This is a powerful tool as being able to remove/add/modify parts of the page can be very useful. Any changes are immediate and the DOM handles all our Javascript interactions that we have talked about.