JavaScript를 사용하여 대화형 웹 사이트 만들기

(A 지침)

소개하다.

개방 지수.한 항목에서 처음으로 html을 사용했는데 공백의 흰색 페이지를 보면 무섭게 보일 것이다. 그러나 한 걸음 한 걸음 업무 절차를 구성하는 데 도움을 주었다. 몇 번 연습한 후에 이 절차는 중복될 수 있고 거의 눈을 감고 있다...진짜 아니야.

설정

우선, 교부할 수 있는 성과를 보거나, 내 일을 통해 실제로 무엇을 완성해야 하는지, 내 방향이 목표를 어떻게 실현할 계획을 세우는 첫걸음이라는 것을 안다.이를 위해, 나는 보통 한 화면에서 필요한 기능에 대한 설명을 열고, 공백 색인을 열 수 있다.html, 내 개발자 도구 컨트롤러를 열고 내가 하고 있는 작업을 검사하고 내 메인 모니터와 내가 처리하고 있는 코드를 분리한다.

너는 너의 컴퓨터와 통화했니?

항상.이것은 내가 그와 대화하는 유형에 대한 빠른 설명입니다. 내가 원하는 일을 어떻게 하는지, 그리고 내가 무엇을 해야 하는지 물어보십시오.

간단한 방주

내가 아무리 사용console.log(anything)을 강조해도 모든 실용성을 시험하는 것은 지나치지 않다.올바른 HTML 요소를 가져왔는지, 내가 작성하고 있는 함수가 내가 필요로 하는 모든 변수에 접근할 수 있는지 확인하든지, 컨트롤러 로그에서 시작해서 작동하는지 확인합니다.

사용하기 쉽게 HTML 요소 선택

내 경험에 따르면 대부분의 경우 모든 HTML 요소와 CSS 스타일은 준비가 되어 있고 나머지 유일한 작업은 자바스크립트를 사용하여 상호작용을 하고 예상한 대로 작업을 하는 것이다.

변수에 요소 지정하기

클래스 요소 (.className 사용) 나 특정 요소 (#idTagName 사용) 에서 document.querySelector() 를 사용하여 요소를 포지셔닝하고, 그것들을 명확한 변수 이름으로 지정하면 장기적으로 보면 요소나 기능 (예: 이벤트 Listeners) 을 추적하고 추가하는 것이 훨씬 쉽다.
(참고: 정적 HTML 요소에 이벤트 모니터를 추가하는 것도 도움이 됩니다.)

서버와의 통신 설정

서버가 나에게 보낸 통신 유형을 보기 위해 보통 이곳에서 첫 번째 수령 요청을 보냅니다.만약 나의 수령 요청이 로컬 저장 데이터베이스(shoutout json-server by typicode)라면 나의 첫 번째 수령은 다음과 같다. fetch('http://localhost:3000).then(res=>res.json()).then(console.log)내 위로 덕분이야.일지, 나는 내가 어떤 정보를 받았는지, 내가 가려고 하는 곳으로 어떻게 통합시킬 것인지, 내가 요구한 교부 가능한 성과를 바탕으로 계획할 수 있다.

이런 상황에서 제 위로 덕분입니다.로그에서, 나는 내가 받은 응답이 하나의 대상 그룹이라는 것을 정확하게 볼 수 있다.이제 나는 어떻게 계속하는지, 그리고fetch의 리셋 함수가 무엇인지 확실히 알게 되었다.

DOM 렌더링

여기서 추적 함수, 특히 그들이 사용하는 매개 변수는 매우 중요하게 변했다.내 경험에 따르면, get 요청에 대한 응답이 교체될 때, 이 함수는 여러 번 호출될 자바스크립트 '템플릿' 함수를 만들어야 한다는 요청을 자주 받는다.HTML이 얼마나 제공되었는지에 따라, 나는 이러한 표현 함수를 사용하여 웹 페이지의 일부 내용을 채울 수도 있고, 전체 요소를 만들 수도 있다.나는 보통 일련의 함수에서 이 동작을 실행한다. 응답을 받는 함수로부터 시작해서 지정한 방식으로 그것을 교체한다. (보통 한 요소를 다른 함수에 전달한다.)
(전문 알림: 만약에 함수의 특정 요소에 접근하고 싶다면 데이터셋이라는 속성을 수동으로 추가하는 것을 좋아합니다. 보통 id 속성을 만들고 함수가 현재 처리하는 대상에서 값을 부여하는 것을 좋아합니다.deleteButton.dataset.id = thingObject.id이것은 내가 잠시 후에 이벤트 탐지기 부분 (목표를 통해) 에 이 값을 접근할 수 있게 한다

사건 탐지기

전체 DOM 렌더링 과정에서 필요한 기능에 따라 단일 요소를 생성할 때 필요한 기능에 이벤트 탐지기를 추가합니다.이벤트 감청기를 만드는 부분은 이벤트가 발생할 때의 내용을 추가하는 것이다. 나는 거의 항상 그것을 리셋 함수로 설정한다. deleteButton.addEventListener('click', deleteThing) 함수를 설명할 때 js 지식에 따르면 이벤트 감청기가 호출하는 함수의 첫 번째 파라미터가 실제 이벤트가 될 것을 알고 있기 때문에 이벤트 감청기 리셋 함수를 구축할 때 컨트롤러부터 시작한다.이벤트 로깅:

function deleteThing(e)
{
    console.log(e)
}

개발자 도구 컨트롤러에서 이벤트를 검사하면 목표를 찾을 수 있고 데이터 집합에 깊이 들어가면 DOM 부분의 모든 요소에 같은 id를 추가할 수 있습니다!현재, 이러한 사건으로 인해 내가 하는 모든 서버 통신은 이 대상을 대상으로 할 것이다!
(전문 알림:dataset 속성에서 같은 id 값을 문자열로 저장하기 때문에parseInt () 는 id를 문자열로 설정합니다. 그렇지 않으면 다른 가져오는 대상에 접근하는 인덱스로 사용할 수 없습니다. 이 대상은 보통 int입니다.)idInt = parseInt(e.target.dataset.id, 10)

서버 통신

건립

지금까지 유일한 상호작용은 데이터를 얻는 것입니다. 지금은 요소 id를 포함한 모든 것을 갖추고 있습니다. 저는 쉽게 POST/PATCH/DELETE를 얻을 수 있습니다!
나는 그것들을 각자의 이벤트 탐지기가 호출하는 함수에 두는 경향이 있다. [즉, deleteButton은 deleteThing (), likeButton은likeThing ()] 을 호출한다.패치나POST 요청을 보낼 때 저는 대상을 만들었습니다. 저는 최종적으로 함수 초기의 요청에서 이를 문자열화하고 이벤트에서 데이터를 수집하며 속성에 추가된 기존 값이든 폼에 추가된 데이터든 처리할 것입니다. (만약에 제 함수가 폼에서 이벤트를 제출하여 작업을 수행한다면)

이벤트 변경 내용 표시

나의 경험에 의하면 나는 발견했다.n() 함수는 POST와 패치가 가져온 경우 해석된 약속이 서버에 변경 사항을 되돌려주기 때문에 매우 유용할 수 있습니다!이 점은 매우 중요하다. 원인은 두 가지가 있다.우선, 모든 일은 한 시간 안에 끝내야 한다.정의에 따르면then()은 서버의 데이터를 성공적으로 업데이트한 후에만 발생할 수 있고, 그 다음은 사용으로 처리한 후에만 발생할 수 있다.json(그리고 하나의 console.log, 되돌아오는 내용 유형을 보기 위한 것)은 이미 생성된 표현 함수에 직접 전달할 수 있습니다!나는 아래에서 완전한 과정의 예를 하나 들었다.

function submitNewObjectFromForm(e)
{
    e.preventDefault()
    let newObject =
    {
        firstAttribute: `${e.target.first.value}`,
        secondAttribute: `${e.target.second.value}`
    }
    fetch('http://localhost:3000/objects',
    {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'accept': 'application/json'
        },
        body: JSON.stringify(newObject)
    })
    .then(resp=>resp.json()).then(data=>renderObject(data))
}

이 점에서 제 다음 임무를 준비하고 모든 일을 몇 가지 작은 단계로 분해함으로써 저는 제 기본 구조와 사고 과정을 순조롭게 구축하고 초급 서버와의 통신을 통해 상호작용 웹 페이지를 만들 수 있습니다!

TL:DR

도전에 직면했을 때, 그것을 몇 단계로 분해해라!다음은 공백 색인에서 시작하는 일반적인 절차입니다.html 페이지에서 기능이 완비된 사이트로!