JS 구절 속으로

저처럼 Ruby로 시작해서 JavaScript로 넘어가면 얼마나 달라질지 경고를 받게 됩니다. 커리큘럼의 이 섹션을 시작할 때 나는 그것이 실제로 얼마나 다른지 이해하게 되었습니다. 처음 몇 개의 프로젝트는 이전에 배운 것의 연속인 것 같았기 때문에 JavaScript는 완전히 새로운 세계로 들어가는 것과 같았습니다.

Been There Done That은 사용자가 전 세계에서 여행하고 싶어하는 모든 장소에 대한 식료품 목록처럼 작동하는 애플리케이션입니다. 수행해야 할 모든 작업은 국가/주 및 여행하려는 도시의 사용자 유형입니다. 그런 다음 해당 위치를 목록에 추가하는 버튼과 함께 양식이 제출됩니다. 해당 장소가 목록에서 지워졌거나 더 이상 여행할 생각이 없는 경우 해당 장소를 제거할 수 있는 삭제 버튼이 제공됩니다.

Js 이전에는 이벤트 리스너가 들어본 적이 없었지만 자료 전체에서 저에게 눈에 띄었고 많은 이벤트 리스너와 사용 방법을 배우면서 많은 의미를 갖게 되었습니다. 행동을 취하기 위해 발생하는 특정 이벤트를 수신하는 코드에 대한 생각은 이를 사용하여 만들 수 있는 모든 프로그램에 대한 좋은 아이디어를 제공했습니다. 물론 즉시 떠오르는 것은 클릭 이벤트이지만 DOMContentLoaded 및 양식 이벤트가 내 관심을 끌었습니다. 클릭 이벤트와 같은 일부 이벤트는 매우 간단하지만 DOMContentLoaded 이벤트는 전체 HTML 스크립트가 로드되기 전에 DOM이 로드되도록 하기 위해 뒤에서 수행되는 이벤트입니다. 양식 제출 이벤트는 사용자가 서버에 양식을 제출할 때 사용되며 대부분 버튼을 사용하여 POST 요청을 합니다. 이 이벤트가 작동하려면 추가 단계를 수행해야 합니다. 이러한 단계 중 하나는 페이지를 다시 로드하는 기본 제출 작업을 방지하기 위해 전달되는 이벤트에 POST 요청 .preventDefault()를 먼저 추가해야 하는 경우입니다.

function addPlace(e) {
    e.preventDefault()
    const locationInput = e.target.children[0]
    const cityInput = e.target.children[1]
    fetch("http://localhost:3000/places", {
        method: "POST",
        headers: {

그것들은 이벤트 리스너와 JavaScript라는 큰 세계의 작은 부분에 불과합니다. Js는 나에게 완전히 낯설었지만 학습 전반에 걸쳐 자료를 통해 쉽게 따라할 수 있었고 작동하는 애플리케이션을 구축하는 방법을 실제로 이해할 수 있었습니다. 이 새로운 언어로 배우고 할 일이 너무 많으며 무엇을 모두 만들 수 있는지 기대하고 있습니다.