ソフトウェアdevの毎週更新

7846 ワード
webdev api javascript beginners テキストリンク
Ajax(Ajaj)、API、およびプロトタイプをカバーしました.以下は、ユーザーの入力に基づいてテレビ番組情報を取得し、最初の10の結果の画像を表示するためにTVMaze APIを利用する簡単な/実用的な例です.
私たちは別のヘッダーを使用してテストし、戻ってデータの簡単な視覚を得るためにPostmanツールを使用します.
私もプログラミング学習アプリに時間を費やしたSoloLearn . The JavaScript course 迅速な課題を提示し、条件やループのセクションに焦点を当てた.それは概念を実践し、情報をシンクするのに役立つ素晴らしい方法でした!

ジャバスクリプト



//This function makes the API data request for whatever search we input and also clears the images when a new search is performed
const form = document.querySelector('#searchForm');
const displayArea = document.getElementById('requestImages');
form.addEventListener('submit', async function(event){
    event.preventDefault();
    displayArea.innerHTML = '';
    const searchTerm =  form.elements.query.value;
    const config = {params:{q:searchTerm}}
    const response = await axios.get('https://api.tvmaze.com/search/shows', config);
    makeImages(response.data);
    form.elements.query.value = '';
})

//This function filters out just the medium image URLs and appends them to the page (and only if a medium image is availale) and clears the search box after submission
const makeImages = function(shows){
    for(let result of shows){
        if(result.show.image){
            const tvShowImage = document.createElement('IMG');
            tvShowImage.src = result.show.image.medium;
            displayArea.append(tvShowImage);
        }
    }
}

HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>TV Show Search App</h1>
    <form id="searchForm">
        <input type="text" placeholder="TV Show Title" name="query">
        <button>Search</button>
        <div id="requestImages"></div>
    </form>
    <script src="TV_Show_Search_App.js"></script>
</body>

</html>
私はあなたが読んで楽しんだ!
気をつけてくださいGitHub , そしてもっと!
PHP :オペランドL
[一緒にHiveを学ぶ]の15-Hiveテーブルとパーティションの統計を分析する(Statistics)