Learn Bootcamp From Zero

Today,  I begin to learn the second part of web develop course: backend. Frontend is the stuff that we can see and interactive with, such as HTML, CSS, and JS. We can type our code, style our page, or write some function to make interaction. However, backend is everything else. For example, we type Target web address in the Internet Browser. As we hit "enter", there are a few steps to go through: 1. The HTTP request is sent to a particular server's IP address. 2. The server figures out what to send us 3. It sends a HTTP response back to us Those process we are hard to see, and it happens in less than one second. The instructor said that the browser is not the only place to send the HTTP request, and there are so many choices out there. In this learning course, we are going to use Postman App . Postman allows us to make HTTP requests and viewer responses. It is really for developers to understand how things are working or debug something. In the P...

From Google Image So far I have learned half way through the Web Develop Bootcamp course. I really want to share my deep feeling here: I have learned basic HTML, CSS,  Bootstrap, JavaScript and jQuery which belong to front end category. When I was learning HTML, CSS and Bootstrap parts, everything seemed good to go. I could understand how to write a simple web page, and create responsive nav-bar, and style my page into a good looking. All the small or big projects, I could finish 85% or 100% by myself depending on the project hard levels. So, I really felt some achievement at that time. However, as I started to learn JavaScript and jQuery, everything became no fun. The concepts of those functions were not hard to understand, but they were hard to implement in the real project. Even small exercises drove me crazy. I was struggle to write those function and logical stuff. Every time I saw a question, my mind was just blank. I didn't know how to start, which function s...

jQuery can do some animation to make some good effects to interactive with pages. There are two broad categories of effects: fading and sliding . fadeOut() and fadeIn() It basically fades an element out or in, and you can provide a duration if you want it to be slow or fast. I start to create a simple HTML page which include three divs and one button. I also add some style for these divs to make effect later. The page has three boxes and one click button. The point is that when we click the button, those three boxes will make some effect. If we want those boxes fade out as I click the button, we can select the "button", then set "click" event type inside on(), and pass the function. In the function, we select the "div", and use set a duration in the fadeOut(). The duration is given in milliseconds. 1000 milliseconds equal to 1 second. As I click the button, all of the boxes are hided in one second. The fadeOut() method ...

On() On() works similarly to addEventListener. It lets you specify the type of event to listen for. If we want to style the h1 text content when h1 is clicked, we could write: $("h1").on("click", function(){ $("h1").css("color", "green");}) Inside on(), we give the type of event we want to listen for, in this case is "click". Then, we pass a function to change the h1 style when the event happens. If we want to bold the button text when the mouse is on that button, we will select "button", then set "mouseenter" as event type, and pass a function which will make the text bold. If we want the bold button back to normal, we only need to change the "mouseenter" to "mouseleave", and change "bold" to "normal". What's the difference between on() and click()? In most case, click() and on("click") will both get the job d...

Keypress In jQuery, keypress() method is a quick and easy way to add a key press listener to element(s). I updated the HTML a little bit by adding a simple text input.  If I want to get a print message every time when I press the key in the input, I will write keypress() function: $("input").keypress(function(){ console.log("You Pressed A Key!");}) So no matter what key I press, the console will print out the message right after I pressed the key. If we want to listen for a key press only we hit the "Enter" key, we need to check the key code for enter key first.  The key code for "Enter" is 13. Therefore, we can write an if function in the keypress(): $("input").keypress(function(event){ if(event.which === 13) { alert("You Hit Enter");} })

The course summarized three most important and useful jQuery events which could use 99% of the time. These three events are: click(), keypress(), and on(). Click In jQuery, click() method is a quick and easy way to add a click listener to element(s). $("selector").click(function(){ run some code}); Recall the click event in JavaScript, we have to do document.querySelector() first, then addEventListener, and give a function. The jQuery one looks much easier to apply. I create a simple HTML page with some buttons. I will show you how to use click() method to make actions on page. Then, I check whether jQuery file is connected correctly. If I want to get an alert when I click on h1, I will use "$" to select h1, then add alert message inside click() function:  $("h1").click(function(){ alert("h1 is clicked");}) As the result, when you click the h1 text, the page will pop up the alert message. We can write the ...

Add, remove and toggleClass is also a very common way to manipulate style. .addClass() and .removeClass() I add two class selector in the style tag. Class one is to change text color to be green, and class two is change both text and background color.  Now I refresh the page and change h1 text to green by using addClass() method: $("h1").addClass("one") .  If you want to remove the style, you can change it to removeClass("one"). I do the same thing to the list. I change the list color and add a background color by adding the class two style value: $("li").addClass("two") . .toggleClass()  According to jQuery, toggerClass method can add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument. I only want to change the first list item color and background by writing: $("li").first().toggleClas...

.attr() According to jQuery , it can get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element. So I use the img tag to add an apple image at the bottom of the page. Now I want to change the apple image to a banana image, so I select the img first, and change the "src" attribute value to a new image address.  $("img").attr("src", "the new image address") If I want to change the input type from text to color, I can write: $("input").attr("type", "color") . As the result, the input box changes to a color input. .val() According to  jQuery , this method gets the current value of the first element in the set of matched elements or set the value of every matched element. I type my name in the input, and then I call my name in the console by typing $("input").val() . If I want to update the ...

The course introduced seven most common jQuery methods that can save us a lot of time and make our code super clean. .text() .html() .attr() .val() .addClass() .removeClass() .toggleClass() Today, I am going to share the first two methods study note with you. I start to create a simple HTML page includes h1, an simple input and a fruit list. Then, I link to the jQuery file and check if it is connected correctly. .text() According to jQuery,  this method can get combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements. For example, if I want to see the h1 text content in console, I just need to type $("h1").text() . Then, it will call back the h1 text. We can do the same thing to the list content, too. When I select the li, it will return all list items in a string. text() method can also change the content. I can change the h1 text...

How to select element? In jQuery, we select an element with $() . $("Selector Name") Selecting with "$" is very similar to querySelector and querySelectorAll. In that we provide a CSS style selector. Then, jQuery will return all matching element. I updated the jQuery Demo HTML page a little by adding a <a> tag and id "test" in the list. If I want to select the h1, I just need to type $("h1")[0] in the console, and it will return us the h1. If I want to select the link, I just need to type $("a")[0] , and it will return the link. If I want to select the list with special id, I just need to type $("#test")[0] , and it will return that list. Moreover, selecting element with the dollar sign in jQuery will return a list even if there's only one item. And it is much shorter and easier to wirte syntax. How to manipulate style? The .css() method is jQuery's interface to st...

What is jQuery? According to the web develop course, jQuery is a DOM manipulation library. It helps us do things like: select element manipulate element create element add event listeners animate elements add effect make HTTP Request The point of jQuery is to help us do things faster and easier. Why use jQuery? fixes "broken" DOM API brevity and clarity ease of use cross-browser support AJAX lot's of people use jQuery How to add jQuery? One way to add jQuery is to download jQuery link to it locally. Step One: Download the jQuery file We need to go to jQuery.com and select "Download" page . Then, we can download the most recent jQuery copy and save it in the same file with your HTML file. Step Two: Add the jQuery to the HTML page Open the HTML page, and add the src of your saved jQuery file name in the script tag. Step Three: Check if it is install correctly Open your page console, and type jQuery...