# 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:

``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/json-apis-and-ajax.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.