The goals
1. Get used to Javascript syntax
2. Control HTML with jQuery
3. Send data to server API with Ajax and get the result
๐คPractice-upgrading fan page
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
// Javascript
document.getElementById("element").style.display = "none";// jQuery
$('#element').hide();jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.
How to try out jQuery?
We can try out jQuery with CDN which allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images and videos.
Put the jQuery CDN in between head tag to try it.
Click this link to try jQuery with jQuery CDN
๐ Let's try!
1. Open alert message with the value of input
2. Extract specific part of string
3. Add list item from input
JSON View
With this Chrome extension, we can read JSON file much easier!
Ajax
AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX's most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.
The two major features of AJAX allow you to do the following:
- Make requests to the server without reloading the page
- Receive and work with data from the server
Practice 1
Use Seoul Open API to get the real-time concentration of fine dust.
- It should show all the 'Gu' in Seoul city
- Everytime when we click update, it removes the old result and show new one
- If it's over 90 then show it as red color so people can tell it's higher than average
Practice 2
Use Seoul Open API to get the real-time status of '๋ฐ๋ฆ์ด' which is an unmanned bicycle rental system that can be conveninetly used anywhere.
- It should show all the stations in Seoul city
- Everytime when we click update, it removes the old result and show new one
- If it's below 5 then show it as red color so people can tell only a few bicycles are available
Practice 3
Use Character's API to get the different messages and images. So every time when we click the button, we will get the different results!
- It should show all different messages and images randomly
- Everytime when we click 'Show up Rtan', it removes the old result and show new one
Isn't it cute guys?๐ฅบ๐งก๐ฅบ๐งก๐ฅบ
๐คPractice-Upgrading fan page
โ Ajax, jQuery, CSS
โ Using Seoul city's temperature API to show it on our fan page.
๐๐ป I understand how to use API to get the information I want
๐๐ป I can use jQuery syntax to show what I want every each moment
๐๐ป But I need to practice more to utilize this skill for complicated situation
๐๐ปโโ๏ธSo?
I should search some websites which offer Open API. So I can practice more how to use it.
Whatever you do, the only secret is to believe in it and satisfy yourself. Donโt do it for anyone else.
-Keith Haring
