使用天氣apis

Question

我想創建一個簡單的網頁，從wunderground.com拉潮的結果。 雖然似乎沒有出現。我插入了load函數，這樣當頁面加載並在那裏工作（使我的網站風格化）時會顯示某些內容，但除了我的標題外，沒有其他內容顯示出來。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"></script> 
<h1>Tide High/Low</h1> 
<section id="fetch"> 
    <div id="tweets"></div> 

<style> 
body { 
    background: #00CCFF; 
} 

h1 { 
    font-size: 100px; 
    font-weight: bold; 
    text-align: center; 
    font-family: sans-serif; 
    color: white; 

} 

#search { 
    font-size: 15px; 
    left: 200px; 
    font-weight: bold; 
    font-family: sans-serif; 
    color: #00CCFF; 
    margin-left: 275px; 

} 
</style> 

<script> 
$("#tweets").load("http://api.wunderground.com/api/961d546ea36a6968/tide.json", 
    function(responseTxt,statusTxt,xhr){ 
     if(statusTxt=="success") 
      alert("External content loaded successfully!"); 
     if(statusTxt=="error") 
      alert("wuddup: "+xhr.status+": "+xhr.statusText); 
}); 

function getWeather(callback) { 
    var weather = 'http://api.wunderground.com/api/961d546ea36a6968/tide.json'; 
    $.ajax({ 
    dataType: "jsonp", 
    url: weather, 
    success: callback 
    }); 


getWeather(function (data) { 
    console.log('weather data received'); 
    console.log(data.list[0].weather[0].description); 
    console.log(data.list[0].weather[0].main); 
}); 

</script> 

Answer 1

對於初學者您getWeather函數聲明缺少收盤}。一旦這個問題得到解決，它至少會以一種或多或少的預期方式失敗。 （您也有一個未封閉的<section>標籤和一個空的<script>標籤，但這些並不是真正的問題）。

您應該瞭解哪些linting工具可用於您的開發環境，或者使用內置IDE的工具。或者，您可以使用jsHint之類的東西在線檢查您的javascript，但顯然如果您可以在自己的編碼環境中正確使用它，那就更容易了。

您還應該熟悉可用於首選瀏覽器的調試工具;我個人覺得Chrome dev tools不可或缺，但幾乎所有的瀏覽器都有類似的工具。