> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/free-code-camp-practice/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/json-apis-and-ajax.md). # JSON APIs and Ajax 在 vscode 上測試的前置作業 1. 預覽 html 2. 安裝 jQuery 與 bootstrap ```markup ``` * [VScode 學習筆記 - HackMD](https://hackmd.io/MwYwnApsDsBMYFoCsAOAZgFgRtYCGCewSAjAmLAGwSx7gAMaAJtEA===) * [Bootstrap 环境安装 | 菜鸟教程](http://www.runoob.com/bootstrap/bootstrap-environment-setup.html) * [jQuery 安装](http://www.w3school.com.cn/jquery/jquery_install.asp) ## 1-Trigger Click Events with jQuery 在 `$(document).ready(function(){}` 裡新增一個 click 事件(暫時裝飾用) ![](http://i.imgur.com/CxI6759.png) ```markup

Cat Photo Finder

The message will go here
``` ## 2-Change Text with Click Events 按下按鈕後，文字會改變 ![](http://i.imgur.com/CxI6759.png) ```javascript

Cat Photo Finder

The message will go here
``` ## 3-Get JSON with the jQuery getJSON Method * [cat.json 的網址](https://www.freecodecamp.com/json/cats.json) * [jQuery ajax - getJSON() 方法](http://www.w3school.com.cn/jquery/ajax_getjson.asp) * [Node.js 入門, #10：認識 JSON Stringify](http://www.jollen.org/blog/2014/07/nodejs-json-stringify.html) * 想在 vscode 上複製，結果失敗了。 ```markup

Cat Photo Finder

The message will go here
``` ## 4-Convert JSON Data to HTML ![Imgur](http://i.imgur.com/GLbYJKC.png) * [javascript - How to parse JSON using Node.js? - Stack Overflow](https://stackoverflow.com/questions/5726729/how-to-parse-json-using-node-js) ```markup

Cat Photo Finder

The message will go here
``` ## 5-Render Images from Data Sources ![Imgur](http://i.imgur.com/Z9f17ss.png) ```markup

Cat Photo Finder

The message will go here
``` ## 6-Prefilter JSON ```javascript

Cat Photo Finder

The message will go here
``` ## 7-Get Geolocation Data * [小狐狸事務所: HTML5 Geolocation API (地理位置) 測試](http://yhhuang1966.blogspot.tw/2013/10/html5-geolocation-api.html) * [地理位置定位 (Geolocation) - Web APIs | MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Geolocation/Using_geolocation) * [地理位置：在地圖上顯示使用者或裝置位置 | Google Maps JavaScript API | Google Developers](https://developers.google.com/maps/documentation/javascript/geolocation?hl=zh-tw) ```markup

You are here:

```