Learn Bootcamp From Zero

Event is that we make things interactive. When we are interacting with a web page, we may click on a button, hover over a picture, drag or drop something, or press the Enter Key. All of those are events and happen all the time. The process of event is that we select an element and then add an event listener to the element we selected. To add a listener, we use a method called addEventListener . element.addEventListener(type, functionToCall); There are two arguments for the addEventListner. Type : the type of event we want to listen for such as "click" FunctionToCall : the function is the code that we want to run when that event happens In our daily life, there are three most popular event types we use all the time: click, mouseover, and mouseout. Click We always like to click the "start" button to start a game or start shopping. How could we do that event in JavaScript? I open the DOM page, and I want the page to pop up an alert message wh...

In the last post, I shared my study note about five DOM methods of selecting the element. The next step will be manipulate those selected element. Remember the whole process is select an element and then manipulate. There are different ways of manipulation: changing an element's style adding/removing classes changing the content of a tag changing attribute. Style The style property is one way to manipulate an element's style. I will continue to use the previous HTML page as an example. var tag = document.getElementById("highlight");  //select tag.style.color = "blue"  //manipulate                                      tag.style.background = "pink";  //manipulate In the example, I select the ID element which corresponds to the first list item. I changed the text color and background by manipulating style in JavaScript. As you see, the text co...

After I learned some basic HTML, CSS and JavaScript, they are finally meet together. The DOM is Document Object Model, which is the interface between your JavaScript and HTML + CSS. The concept is that the browser turns every HTML tag into a JavaScript object that we can manipulate. Everything is stored inside of the document object. We interact with DOM to do things like: game, scrolling effects, drop-down menus, form validation, interactivity, or animations. The main DOM process is Select an element and then manipulate. How do we implement that? The document comes with a lot of methods for selecting elements. There are five most common methods we need to know: 1. document.getElementById() 2. document.getElementsByClassName() 3. document.getElementsByTagName() 4. document.querySelector() 5. document.querySelectorAll() All of them are started by document dot. And these five methods have all been added into the document object. Now I am going to create a simple HT...