[TIL] #DAY - 045 - Js location.search (내일배움캠프AI 3기)

---

---

Js에서 사용하는 쿼리 파라미터 자세히 알아보자.

 

---

---

---

1. location.href = `home.html?movie=${movie.movie_id}&id=${movie.id}`

 

window.onload = async function loadMovieRefresh(){

    movies = await getMovieRefresh()
    const movie_list = document.getElementById("movies")

    movies.forEach(movie =>{
        const newMovie = document.createElement("div");

        const movieImage = document.createElement("img")

        movieImage.setAttribute("src", `${TmdbApiImageUrl}${movie.image}`)


        newMovie.onclick=function() {
            location.href = `home.html?movie=${movie.movie_id}&id=${movie.id}`
        }

        newMovie.appendChild(movieImage)
        movie_list.appendChild(newMovie)
    });
}

 

2.  const result = location.search.replace("?movie=", "").replace("id=","").split("&")

URL상에 보이는 파라미터나

location.href를 이용하여 이동할때 보내는 파라미터 값을

스크립트로 가져와서 사용해 보도록하자.

기본적으로 자바스크립트 내장 함수인

location.search를 이용하여 URL 물음표 뒤에 있는 파라미터들을 가져올 수 있다.

참고 URL : https://fellowtuts.com/jquery/getting-query-string-values-in-javascript/?a=a

window.onload = async function loadMovieRecommend(){

    const result = location.search.replace("?movie=", "").replace("id=","").split("&")
    const movie_id = result[0]
    const id = result[1]
    
    articles = await getMovieDetail(id)
    movies = await getMovieRecommend(movie_id)
    category_one = await getMovieCategoryOne()
    category_two = await getMovieCategoryTwo()
    

    mainImage = document.getElementById("mainimage")
    mainMovieInfo = document.getElementById("mainmovieinfo")

    // 영화 메인 이미지(홈)
    const imageMovie = document.createElement("div");
    const movieImage = document.createElement("img")
    movieImage.setAttribute("src", `${TmdbApiImageOgUrl}${articles.image}`)
    imageMovie.appendChild(movieImage)
    mainImage.appendChild(imageMovie)

    // 영화 메인 정보(홈)

    const titleMovie = document.createElement("h1");
    const userMovie = document.createElement("h3");
    const descMovie = document.createElement("p");
    titleMovie.innerText = articles.title
    userMovie.innerText = "누구 님이 관심있는 영화 입니다."
    descMovie.innerText = articles.description
    mainMovieInfo.appendChild(titleMovie)
    mainMovieInfo.appendChild(userMovie)
    mainMovieInfo.appendChild(descMovie)


    // 관심 컨텐츠
    const movie_list = document.getElementById("movies")

    movies.forEach(movie =>{
        const newMovie = document.createElement("div");
        newMovie.classList.add("item");

        const movieImage = document.createElement("img")


        movieImage.setAttribute("src", `${TmdbApiImageUrl}${movie.image}`)


        newMovie.onclick=function() {
            location.href = `articledetail.html?${movie.id}`
        }

        newMovie.appendChild(movieImage)
        movie_list.appendChild(newMovie)
    });

    

    // 카테고리 1
    const category_one_list = document.getElementById("category_1")
    
    category_one.forEach(movie =>{
        const newMovie = document.createElement("div");
        newMovie.classList.add("item");

        const movieImage = document.createElement("img")


        movieImage.setAttribute("src", `${TmdbApiImageUrl}${movie.image}`)


        newMovie.onclick=function() {
            location.href = `articledetail.html?${movie.id}`
        }

        newMovie.appendChild(movieImage)
        category_one_list.appendChild(newMovie)
    });




    // 카테고리 2
    const category_two_list = document.getElementById("category_2")
    
    category_two.forEach(movie =>{
        const newMovie = document.createElement("div");
        newMovie.classList.add("item");

        const movieImage = document.createElement("img")


        movieImage.setAttribute("src", `${TmdbApiImageUrl}${movie.image}`)


        newMovie.onclick=function() {
            location.href = `articledetail.html?${movie.id}`
        }

        newMovie.appendChild(movieImage)
        category_two_list.appendChild(newMovie)
    });
    
}

function mainMovieButton () {
    const result = location.search.replace("?movie=", "").replace("id=","").split("&")
    const id = result[1]

    location.href = `articledetail.html?${id}`
}