Front Ends – Lecture 6 – CS50’s Web Programming with Python and JavaScript

[음악 재생] BRIAN YU : OK, 웹 프로그래밍에 모두 환영합니다 파이썬과 자바 스크립트

그래서 2 주 전에 우리가 어디에서 출발했는지 선택하겠습니다 그래서 우리는 Flask에서 Python을 사용하여 웹 응용 프로그램을 작성하는 작업을했습니다 그리고 마지막으로 JavaScript, 우리 웹 브라우저에서 실행할 수있는 언어였습니다 우리가 클라이언트 측에서 몇 가지 코드를 실행할 수있게 해주었습니다 서버에서 모든 것을 실행하는 것과는 대조적으로 우리가 할 수있었습니다

조금 더 역동적으로 대화식 사용자 인터페이스를 만들 수 있습니다 그리고 오늘, 우리는 그러한 아이디어를 바탕으로 계속해서 발전 할 것입니다 파이썬과 자바 스크립트로 계속 작업하면서, 특히 웹 응용 프로그램의 최신 동향을 살펴 보는 것 개발 및 파이썬과 자바 스크립트를 어떻게 사용할 수 있는지 웹 응용 프로그램을 빌드 할 때 이러한 목표를 달성 할 수 있습니다 그래서 우리가 살펴볼 첫 번째 일은 단일 페이지 응용 프로그램 또는 단일 페이지 응용 프로그램입니다 요즘 점점 인기를 얻고있는 프로젝트가 지금까지 우리가 만든 웹 응용 프로그램을 많이 만들었습니다

여러 페이지가 있습니다 첫 번째 프로젝트에서는 애플리케이션을 구축하고있었습니다 책의 서적과 상호 작용하는 것을 다루는, 다른 책을 검색 할 수있는 페이지가있는 곳입니다 그리고 책의 개별 세부 정보를 볼 수있는 또 다른 페이지가 나타납니다 그것에 대한 리뷰를 작성하십시오

현재 작업하고있는 프로젝트에서, 여러 페이지를 만들 수 있습니다 당신은 사람들이 그들의 이름을 타자를 치는 1 개의 페이지가있다, 예를 들어 사람들이있는 또 다른 페이지 주어진 채널의 메시지를보고 있습니다 그리고 한 페이지짜리 앱이 주로하는 내용은 보통 여러 페이지 또는 여러 개의 다른 Flask 경로에 있어야합니다 당신은 그들을 생각하고 그들을 결합 할 수 있습니다 해당 페이지에서 새로운 정보를 가져올 단일 페이지로 추가 정보가 필요할 때마다 서버에서 브라우저에서 렌더링 할 수 있습니다

그리고 마지막으로 우리는 기술을 살펴 보았습니다 우리가 비동기 적으로 물어볼 수있는 AJAX 라 불리는 우리가 포함하고 싶을 때마다 더 많은 정보를 얻기 위해 서버 우리 웹 페이지에 대한 추가 정보 그리고 우리는 통화 변환기를 살펴 보았습니다 예를 들어, 우리가 통화로 입력 할 수있는 곳 전환에 대한 정보를 검색 할 수 있습니다 해당 통화의 비율을 서버에서 확인한 다음 해당 정보를 표시합니다

바로 웹 브라우저 안에 있습니다 그래서 우리는 같은 접근법을 취할 것입니다 단일 페이지 응용 프로그램을 빌드하기 시작할 때 우리가 어떻게 그 것들을 만들어 낼 수 있는지 살펴 봅니다 그래서 우리는 애플리케이션의 예를 살펴봄으로써 말하자면 단일 페이지 응용 프로그램이나 다중 페이지 응용 프로그램이 아닙니다 이제이 다중 페이지 응용 프로그램을 살펴 보겠습니다

그것은 Flask 응용 프로그램이 될 것입니다 세 가지 다른 페이지가 있습니다 그리고 이것은 Flask 어플리케이션과 매우 유사합니다 우리가 다루고있는 이것은 매우 간단합니다 3 가지 경로가있는 Flask 응용 프로그램입니다

단지 슬래시 인 기본 라우트는 다음과 같습니다 firsthtml이라고하는 첫 번째 HTML 페이지를 반환 할 것입니다 그런 다음 두 번째 경로를 갖게됩니다 두 번째 경로는 우리에게 두 번째 경로를 반환 할 것입니다

HTML 페이지, secondhtml 그리고 세 번째 경로 인 / third는 우리를 위해 세 번째 HTML을 반환 할 것입니다 페이지 이 경우, 그냥 third

html이라고합니다 그래서 세 가지 경로가있는 매우 간단한 페이지입니다 다른 페이지가 표시됩니다 우리가 웹 애플리케이션을 원한다면 세 가지 다른 페이지에 표시된 콘텐츠, 이것이 우리가 어떻게 할 수 있겠는가 그리고 만약 우리가이 멀티 페이지 웹 어플리케이션을 실행함으로써 여러 페이지로 들어가 플라스크를 돌린다

그런 다음이 URL을 가져 와서 웹 브라우저에 붙여 넣으십시오 우리가 얻는 것은 이런 것입니다 이것은 첫 번째 페이지입니다 그리고 첫 번째 페이지의 코드를 보면, 우리는 여러 페이지로 이동하여 첫 번째 HTML 페이지로 이동합니다 우리가 먼저 가지고있는 것은 layout

html 파일을 확장하는 것입니다 플라스크에서는 템플릿을 생성 할 때, 우리는 다른 HTML 파일의 확장 인 HTML 파일을 가질 수 있습니다 그 (것)들로부터 상속받은, 말하자면, 우리는 공통 코드가있는 경우 반복하지 않아도됩니다 여러 페이지에 나타납니다 따라서이 first

html 파일은이 layouthtml 파일을 확장합니다 페이지 본문 안쪽에는 표제가 표시됩니다 그런 다음 실제로 페이지 내부에 표시하려는 내용 이 레이아웃 파일을 살펴보면 웹 페이지 본문의 내부에,이 탐색 모음이 있습니다 이것은 우리가 각각에 대해 하나의 목록 항목을 가지고있는 정렬되지 않은 목록 일뿐입니다 내가 가고 싶을지도 모르는 페이지들

첫 페이지, 첫 페이지, 두 번째 페이지, 및 세 번째 페이지 그리고 나서이 빈 몸체 블록은 결국 내가 내 firsthtml 또는 secondhtml 또는 thirdhtml이 무엇이든간에 채울 것입니다

파일이 거기에 포함되기를 원합니다 예를 들어 firsthtml의 경우 body block 이 표제와 그 본문으로 채워진다 그래서이 첫 페이지가 나옵니다 bar는 layout

html 내에 정의되었습니다 그리고 그 페이지의 내용 확장 또는 상속하는 firsthtml 파일에 의해 정의됩니다 그 레이아웃 파일에서

두 번째 페이지를 클릭하면 몇 가지 사항을 알 수 있습니다 이제는 나를 데려 간 링크를 클릭했기 때문에 URL이 / 초로 변경됩니다 다른 HTML 페이지를 렌더링 한 새로운 경로로 이동합니다 이 경우, secondhtml

이 페이지의 내용에는 두 번째 페이지 안에 있던 것은 무엇이든간에 다른 양의 텍스트 마찬가지로 세 번째 페이지를 클릭하면 세 번째 경로로 이동합니다 거기서 세 번째 페이지의 내용을 표시합니다 그래서 이것은 새로운 것이 아닙니다 이것은 단지 확장 일뿐입니다

Flask, 이미 보았 듯이 서로 다른 페이지를 연결할 수 있어야합니다 나를 데려 갈 세 가지 경로가있는 웹 응용 프로그램을 만듭니다 3 개의 다른 페이지로 하지만 이제 우리가 어떻게 할 수 있는지 살펴 보겠습니다 이 3 페이지 응용 프로그램 아이디어 한 페이지짜리 응용 프로그램으로 3 페이지 분량의 콘텐츠를 모두 표시하는 단일 페이지 특히 내가 원하는 페이지를 클릭하면 그러면 어떻게 작동할까요? 다중 페이지 또는 단일 페이지 0을 살펴 보겠습니다 그리고 한 페이지 zero의 내부에서 application

py를 보자 단일 페이지 응용 프로그램이 될 것입니다 멀티 페이지 응용 프로그램의 버전입니다 그래서 우리가 맨 위에서하는 첫 번째 작업은 indexhtml을 반환 할 기본 경로를 정의하십시오

잠시 후에 indexhtml의 내용을 살펴 보겠습니다 그러나 지금은 우리에게 HTML 파일을 반환 할 것입니다 그러나 아래에 아래에, 우리는 몇 가지 흥미로운 일들이 진행되고 있습니다 9 번 줄부터, 나는 텍스트는 Python에서 세 개의 다른 문자열로 구성된 목록 일 것입니다

첫 번째 줄에서 첫 번째 페이지에 표시하고 싶은 부분입니다 두 번째 줄에는 두 번째 페이지에 표시하고 싶은 내용이 있습니다 그리고이 세 번째 줄에서, 이것은 제가 세 번째 페이지에 나타나기를 원하는 것입니다 그리고 아래로 내려 가면,이 세 가지 경로 / / first, / second, / third가 있습니다 각각은 그 문자열 중 다른 하나를 반환합니다

주의 제목이있는 헤더가있는 전체 HTML 파일을 반환하지는 않습니다 네비게이션 바를 누른 다음 그 아래에있는 텍스트를 누릅니다 나는 그 특정 페이지에 대해 염려하는 문자열을 반환하고있다 그래서 / 처음에, 저는 그 문자열을 반환 할 것입니다 – 내 텍스트 목록의 첫 번째 항목 / second는 내 텍스트 목록에서 index1의 두 번째 항목을 반환합니다

그리고 마찬가지로, / 3은 마지막 항목 인 인덱스 2의 항목으로 이동합니다 내 텍스트 목록에 그리고 지금까지, 이것은 복잡성이 추가 된 것처럼 보입니다 이 모든 것이 지금 어떻게 연결되어 있습니까? indexhtml을 살펴보고 실제로 어떻게 우리가 HTML 파일 내부에서 사용하십시오

그래서 내가 indexhtml의 내부에 가지고있는 것 – 지금 JavaScript를 건너 뛰고 있습니다 이 페이지의 HTML 내용 이전과 비슷한 탐색 모음이 있습니다 정렬되지 않은 목록입니다 각 목록 항목 내가 클릭 할 수있는 링크가 될 것입니다 – 첫 번째 페이지, 두 번째 페이지, 세 번째 페이지

그러나 다중 페이지 응용 프로그램과 달리 이러한 링크는 무엇이 다른가요? 다른 것은 즉시 당신을 공격합니다 우리가 이전에했던 것과 비교했을까요? 네? 청중 : [INAUDIBLE] URL BRIAN YU : 예, URL에 이러한 href 속성이 없습니다 링크를 클릭하면 내가 가고 싶은 페이지의 링크가됩니다 그것들은 실종되었다

지금 당장은 빈 문자열 일뿐입니다 그리고 또한 그들에게 모든 수업을하고 그들에게 nav-link라고 부른 것을 주목하십시오 왜 그 순간이 중요한지 알게 될 것입니다 그리고 나는 페이지의 본문을 가지고있다 지금은 비어있을 것입니다

페이지 본문에는 아무 것도 없습니다 그러면 어떻게 채워지는데 어떻게 링크가 작동합니까? 그들 중 누구도 아무 데나 연결하는 것처럼 보이지 않는다면? 그들은 빈 href 속성이 있습니다 JavaScript가 제공됩니다 이제이 JavaScript 코드 중 일부를 살펴 보겠습니다 여기서 loadPage라고하는이 함수로 시작합니다

이것은 load page라고하는 JavaScript 함수입니다이 함수는 인수로 사용됩니다 그 이름은 아마도 내가 쓰는 페이지의 이름 일 것입니다 첫 페이지, 두 번째 페이지 또는 세 번째 페이지를로드하려는 경우, 예를 들면 그래서 우리가 여기에서 보는 것은 우리가 마지막으로 한 일을 연상시키는 것입니다

강의, 우리가 AJAX에 대해 이야기 할 때, 서버에서 추가 정보를 얻으려고 할 때 내 indexhtml 파일을로드하려고합니다 첫 번째 페이지 – 서버에서 첫 번째 문자열을 가져옵니다 글쎄, 내 indexhtml 파일은 지금 아무것도 몰라

첫 번째 텍스트가 무엇인지에 대해 그래서 Flask 서버에 정보를 요청해야합니다 그것이 무엇인지에 관해서 그래서 그렇게하기 위해 새로운 HTTP 요청을 만듭니다 나는 GET 요청을 만들 예정이다 그리고 GET 요청을 할 경로는 무엇입니까? 이 달러 기호와 곱슬 머리를 슬래시 (slash)하고 리콜 (recall)하는 것이 될 것입니다

중괄호 구문은 JavaScript ES6의 템플릿 리터럴 구문입니다 기본적으로 플러그인 이름에 변수 이름의 값이 표시됩니다 그리고 만약 내가 페이지가 첫번째 인 페이지를로드하려고한다면 – 첫번째 페이지 – 그럼 내가 정말로 할 일은 / 처음에 GET 요청을하는 것입니다 URL / first – 우리는 먼저 applicationpy 내부에 정의했다

우리는 그 순간으로 돌아갈 수 있습니다 요청이 완료되면 여기에 실행하려는 기능이 있습니다 먼저 응답 텍스트를 가져옵니다 서버에서 반환 된 내용 내가이 전화를 서버에 올렸습니다 response라는 변수 안에 저장하십시오

그리고 내 HTML 페이지의 본문을 가져 가라 querySelector는 내 문서를 검색합니다 시체라고 불리는 신분증을 찾았습니다 그 몸체의 내부 HTML을 채운다 그 반응이 뭐든간에 -이 가변적 인 반응이 무엇이든 – 어떤 텍스트가 요청에서 온 것입니다

그래서이 함수는 이제 저 페이지 중 하나를로드 할 수있게합니다 그 첫 번째 페이지, 두 번째 페이지 또는 세 번째 페이지, 서버에서 내용을 가져온 다음 본문 블록에 내용을 채우십시오 그렇다면이 함수는 언제 실제로 사용됩니까? 음, 몇 군데에서 사용됩니다 우리가 여기있는 것은 완성 된 내용이로드 될 때, 내 웹 애플리케이션로드가 완료되면 내가 할 일은 먼저 load_page입니다 이 load_page 함수를 호출합니다

서버에서 정보를 얻고 첫 번째 페이지를로드합니다 그러나 첫 번째 페이지를로드하는 것 외에도, 내가해야 할 다음 일은 확실히하는 것이다 그 링크 중 하나를 클릭하면 해당 링크 후속 페이지를로드합니다 그래서 저는 querySelectorAll을 할 것입니다 nav-link 클래스를 가진 모든 것을 선택합니다

아래 내용을 상기하십시오 나는이 URL들 각각이 클래스 nav-link를 가지고 있다고 말했다 따라서 모든 링크를 선택하려면 클래스 nav-link가있는 모든 것을 선택할 수 있습니다 이제 개별 링크가 모두 포함 된 자바 스크립트 배열을 얻었습니다 그리고 각각의 개별 링크에 대해, 나는 약간의 논리를 적용하고 싶다

여기에 제가 적용 할 논리가 있습니다 즉, 해당 링크를 클릭하면 클릭 이벤트에서, 내가 갈 곳에서이 기능을 실행할 것이다 페이지 linkdatasetpage를로드하십시오

linkdatasetpage가 진행 중임을 기억하십시오 이 특정 링크의 데이터 페이지 속성이 무엇이든간에 데이터 속성을 사용할 수 있기 때문에 이 링크와 관련된 정보를 저장할 수 있습니다 그래서이 링크들 각각은 제가 접근하기를 원하는 경로를 저장하게 될 것입니다

이 경우 첫 번째 및 두 번째 및 세 번째 그리고 이것이 실제로 실제로 어떻게 작동합니까? 글쎄, 만약 내가 가서 한 페이지 0으로 들어가면 이 응용 프로그램을 실행하면 처음에는 그냥 첫 페이지에 불과합니다 이제는 원래 시체를 여기에서 떠 올립니다이 시체는 비어 있습니다 그리고 페이지를로드하면 자동으로 채워집니다

첫 번째 텍스트의 내용으로 그 일이 일어난 이유는 DOM이로드가 완료되면 즉시, 먼저 load_page를 호출하여 첫 ​​번째 페이지의 내용을로드하고, 첫 번째 페이지의 내용이 무엇이든간에 서버에 요청했습니다 본체에 끼우십시오 이제 두 번째 페이지를 클릭하면 두 번째 페이지의 내용을보십시오 세 번째 페이지의 세 번째 페이지 그리고 나는 브랜드의 새로운 페이지를 요청하지 않습니다

난 그냥 서버에서 필요한 정보를 가져오고있어 그것을 내가 필요로하는 곳에 연결합니다 그리고 왜이 단일 페이지 접근 방식을 사용할 수 있습니까? 다중 페이지 방식보다 유리하다 우리가 맨 처음 본 것처럼? 이것이 갖는 장점은 무엇인가? 일부 웹 응용 프로그램에 유용합니까? 관객 : 우리는 웹 페이지를 새로 고침 할 필요가 없습니다 BRIAN YU : 정확히, 우리는 페이지를 새로 고침 할 필요가 없습니다

따라서이 페이지에 변경되지 않는 많은 내용이있는 경우 (예 : 이 탐색 바는 내가 어느 페이지에 있든 상관없이 동일하게 유지됩니다 그런 다음 페이지 전체를 지속적으로 다시로드 할 필요는 없습니다 모든 HTML 헤더 정보와이 탐색 바 정보 – 변경할 필요가있는 실제 정보를로드 할 수 있습니다 이 경우, 즉 텍스트가 페이지의 실제 내용에 나타납니다 확실히 이점이 하나 있습니다

단점은 무엇입니까? 왜이 단일 페이지 접근 방식이 좋지 않을 수 있습니까? 아니면이 일에서 내가 잃는 것이 무엇인가? 네? 관객 : [INAUDIBLE]이 잘못 될 수 있습니다 나는 [INAUDIBLE]을 낭비한다 BRIAN YU : 예 그렇다면 과소 평가가 될 수 있습니다 이런 예를 들자면 분명히있을 수 있습니다

여기서는 개별 단락을로드하는 중입니다 그리고 그렇게 많은 노력을 기울이지 않았을 것입니다 HTML 페이지 전체를로드합니다 따라서 확실히보아야 할 하나의 절충점입니다 그리고이 페이지가 어떻게 다르게 운영되는지 멀티 페이지 방식보다 리콜 여러 페이지 접근 방식에서 클릭했을 때 개별 링크에서 URL이 변경되었습니다

두 번째 페이지를 클릭하면 URL이 / second로 이동합니다 그리고 세 번째 페이지를 클릭하면 세 번째 페이지로 이동했습니다 반면에 이 단일 페이지 접근법에서 개별 링크를 클릭하면, URL 바에서 여기까지 아무 것도 바뀌지 않는다는 것을 알 수 있습니다 나는 같은 페이지에 머무르고있어 URL이 반드시 변경되는 것은 아닙니다 그리고 아마도 그것이 당신이 원하는 것일 것입니다

하지만 다른 많은 응용 프로그램에서는 웹 응용 프로그램 사용자에게 유용합니다 그들이 어디에 있는지 표시하기 위해 URL을 볼 수 있어야합니다 귀하의 웹 사이트 탐색과 관련하여 사용자가 URL에서 / 초를 보는 것이 도움이 될 수 있습니다 사실, 그들은 두 번째 페이지에 있거나 세 번째 / 세 번째 페이지에 있다는 것을 알고 있습니다 그들은 세 번째 페이지에 있습니다

그리고 많은 사용자가 그 목적을 위해 해당 URL을 활용할 것입니다 현재 추가 정보와 컨텍스트를 제공하는 방법 아르 그렇다면 어떻게 그 기능을 재현 할 수 있을까요? 실제로 URL이 변경되지 않도록 허용 전체 페이지를 다시로드해야합니까? 다행히도 최신 버전의 HTML, HTML5, HTML5 기록 API에 액세스 할 수 있습니다 HTML5의 기능으로 브라우저의 내역을 효과적으로 기록하고 다른 URL을 반영하도록 URL을 업데이트하십시오 창조하고 싶다

그래서 이것이 작동하는 방식은 URL 상태를 웹으로 푸시 할 수 있다는 것입니다 브라우저의 기록 그래서 / 첫 번째 경로에서 시작할 수 있습니다 사용자가 두 번째 링크를 클릭하면 아마도 단일 페이지 응용 프로그램에서도 두 번째 페이지로 이동합니다 몇 가지 새로운 HTML 페이지에 액세스하려고하지 않더라도 JavaScript를 사용하여 URL을 업데이트하고 싶다고 웹 브라우저에 알리십시오

이 새로운 상태를 URL / 초에두고 싶습니다 마찬가지로 세 번째 링크를 클릭하면이 새 URL / 세 번째 URL을 푸시 (push) 할 수 있습니다 사용자가 클릭하는 내용에 따라 URL을 업데이트 할 수 있습니다 주어진 시간에 내 애플리케이션 내부에서 일어나는 일들에 따라 이 추가 기능을 허용하기 위해 이제 확장 할 수있는 방법을 살펴 보겠습니다 이 단일 페이지 응용 프로그램 아이디어에 따라 URL의 상태를 변경합니다

이제 단일 페이지 하나를 살펴보고 indexhtml을 살펴 보겠습니다 따라서 대부분이 궁극적으로 동일하지만 몇 가지 차이점이 있습니다 특히, 내 load_page 함수 내부에서 요청이 다운로드 될 때 서버에서 새 페이지를로드하려고합니다 내가 서버에서 얻은 정보를 채운 후에 HTML 페이지의 본문 블록에, 지금 내가하고 싶은 것은 URL을 업데이트하고 싶습니다

그래서 저는 두 가지 일을 할 것입니다 내가하고있는 첫 번째 일 – 이것은 좋은 측정을위한 것입니다 미학적으로 – 모든 웹 페이지에는 제목이 있습니다 그것은 웹 페이지와 웹 브라우저의 상단에 나타나는 것입니다 그래서 웹 페이지의 제목을 업데이트하고 싶을 수도 있습니다

새로운 페이지를 반영합니다 그래서 나는 그것을 얻기 위해 document-title을 사용하여 설정할 수 있습니다 내가 뭐라 부를까 그리고 historypushstate는 HTML5 역사를 조작하는 방법입니다

특히 새로운 URL을 넣고 싶다고 말하면서 여기서 첫 번째 인수는 이 새로운 URL을 밀어 내고 싶습니다 잠시 후에 보겠습니다 왜 그렇게 유용할까요? 그러나 지금은 우리가 정말로 신경 쓰지 않습니다 그래서 우리는 그것을 null이라고 부를 것입니다 두 번째 인수는 푸시하려는 페이지의 제목입니다

세 번째 인수는 특히 URL입니다 우리가 강요하려고합니다 이 경우 제목과 URL은 동일합니다 그러나 이것은 궁극적으로 영향을 줄 것입니다 어떤 URL이 웹 브라우저 상단의 URL 표시 줄에서 변경됩니다

그래서이 줄을 사용하여 현재 URL을 업데이트 할 수 있습니다 나는 내가 일어난 모든 페이지를 반영하기 위해있다 그리고 만약 제가 하나의 페이지에 들어가서이 어플리케이션을 실행한다면, 내가 얻는 것은 즉시 / 처음부터 시작하는 것입니다 그래서 내 URL은 / 처음입니다 두 번째 페이지를 클릭하면 URL이 / second로 변경됩니다

마치 내가 완전히 다른 페이지를 클릭하고 지나간 것처럼 실제로, 일어나는 모든 일은 여기 코드의 내부에있는 것이 었습니다 두 번째 페이지의 두 번째 내용을로드 한 후, 몸에 채워 넣고, 나는이 / 제 2의 길을 나의 역사로 밀어 넣었다 결과적으로 URL은이를 반영하여 업데이트됩니다 그래서 URL을 순서대로 업데이트 할 수 있습니다 우리가 원하는 것을 반영하도록 만들지 만 이것은 완벽하지 않습니다

이것에 대해 어떤 것이 효과가 없을지에 대한 아이디어 URL에 다른 것들을 넣고 사용자를 기다리는 것 여러 페이지 응용 프로그램 인 것처럼 비슷한 동작을 수행 할 수 있습니까? 청중 : 브라우저에서 뒤로 버튼이 작동합니까? BRIAN YU : 네, 좋은 질문입니다 뒤로 버튼이 작동합니까? 뒤로 버튼을 누르면 어떻게됩니까? 음,이 경우, 뒤로 버튼을 누르면 / 처음으로 돌아갑니다 , 확실히 URL은 변경되었지만 페이지에서는 아무 것도 변경되지 않았습니다 나는 두 번째 페이지에 머물렀다 그래서 두 번째 페이지 링크를 클릭했습니다

두 번째 페이지가로드되었습니다 하지만 뒤로 버튼을 클릭하자마자 URL이 / first로 변경되었습니다 그러나 아무 것도 없기 때문에 페이지의 내용은 두 번째 페이지에 남았습니다 내 JavaScript 코드, 내 indexhtml 페이지, 뒤로 버튼을 눌렀을 때해야 할 일에 대해 말합니다

그러면 어떻게 될까요? 우리는 정말로 모른다 그래서 그것은 다음 단계가 될 것입니다 자신을 허용하기 위해 우리는 그것을 어떻게 수정해야합니까? 웹 브라우저에서 뒤로 및 앞으로 단추를 허용 할 수있는 상황 우리가 기대했던대로 일할 수 있습니까? 그래서 여기에있는 생각은 우리가 첫 번째, 두 번째, 세 번째, 예를 들어 이전 페이지로 돌아가고 싶을 때, 이 URL 세트를 스택으로 생각하면 (단 하나의 링크) 그 다음에 또 다른 링크가 이어지고, 다른 링크가 뒤 따른다 우리가 돌아 가면 그게 정말 터지는거야 스택 위쪽의 스택에 있던 것은 무엇이든간에

이제는 더 이상 세 번째 페이지에 나오지 않지만 두 번째 페이지에 있습니다 대신 그래서 우리는 첫째, 둘째, 셋째에서 단지 첫 번째와 두 번째로갔습니다 이를 위해 HTML5의 추가 기능을 사용합니다 기록 API

푸시 상태를 JavaScript 함수로 사용했습니다 이를 통해 업데이트 할 스택에 새로운 URL을 추가 할 수있었습니다 URL 바에 URL이 무엇이든간에 그러나 우리는 이제 팝 스테이트 이벤트를 처리 할 것입니다 스택에서 뭔가를 시도해 볼 때 어떤 일이 발생합니까? 다시 시도하려면 뒤로 버튼을 클릭하면 어떻게됩니까? 이전에 내가 본 페이지에요? 어떻게 그 상황을 처리합니까? 그래서 우리는 한 페이지에서 그것을 처리합니다 이제 단일 페이지 2에 대해 index

html을여십시오 그리고이 load_page 함수의 내부에서, 내가 전에했던 것처럼 정보를 밀어 넣을뿐 아니라 내가 국가를 밀 때 페이지의 제목이 무엇이고 페이지의 URL이 무엇인지, 나는 또한 국가를 강요 할 때, 이 스택 맨 위에 데이터를 푸시 할 수 있습니다 관련성있는이 페이지에 대한 정보를 저장할 수 있습니다 내가 나중에 나중에 돌아갈 필요가 있다면 이 경우,이 페이지에 관해서는 어떤 정보를 저장해야합니까? 나는 그걸로 돌아갈 필요가 있니? 두 개의 값을 가진 JavaScript 객체를 저장하려고합니다

하나는 페이지 제목이 무엇이든, 이 이름 값은 첫 번째, 두 번째 또는 세 번째가 될 것입니다 그리고 두 번째로 중요한 것은 실제 텍스트를 저장하는 것입니다 이 페이지에 있던 내용 이 변수에서 돌아온 것은 무엇이든 응답합니다 이것은 내가 다시 돌아갈 경우에 대비해야 할 정보입니다 왜냐하면 두 번째 페이지로 이동하면 HTML 페이지의 내용을 채울 것이기 때문입니다

두 번째 단락과 함께, 그리고 나는 첫 페이지로 돌아 간다 글쎄, 첫 페이지에 어떤 텍스트를 기입해야하는지 지금 알기 위해 내 웹 페이지가 필요합니다 그 정보는 내가 잃어 버렸을 것이다 어딘가에 그것을 저장하려고하지 않았다 그래서이 데이터를 활용하여 history

pushstate와 연결할 수 있습니다 내가 푸시하는 URL에이 데이터를 저장할 수있게 해줍니다 그리고 지금은 국가가 급히 타격을 입을 때 – 즉, 누군가가 웹 브라우저에서 뒤로 버튼을 누르면 그들이 이전에 있었던 어떤 페이지로 돌아 가기 위해, 그러면 이것은 일어날 것입니다 그래서 우리는이 popstate를 다룰 것입니다 창문 위의 누군가가 팝업을 시도 할 때 – 다른 말로하면, 이 창에서 뒤로 버튼을 누릅니다

실행해야 할 기능은 다음과 같습니다 나는 단지 일어난 사건에 대한 매개 변수 e를 얻습니다 estate로 방금 튀어 나온 모든 것을 얻을 수 있습니다 그래서 저는 그 것을 데이터 내부에 저장하려고합니다

그래서이 데이터는 자바 스크립트가 될 것입니다 제목이 들어 있고 포함 된 개체 그 페이지에서 내가 원했던 텍스트 그러면 그 정보로 무엇을해야합니까? 음, datatitle을 가지고, 그 제목은 스택에 밀려 나고 내 HTML 문서의 새 제목 그래서 documenttitle을 그 제목이 무엇이든간에 설정하겠습니다

그리고 나서 텍스트로 무엇을해야합니까? 첫 페이지로 돌아 가면 첫 페이지의 텍스트가 무엇이든, datatext 내부에 있던 것이 무엇이든지, 그게 내가 원하는거야 내 HTML 페이지의 본문을 채 웁니다 그래서 documentquerySelector body로 가야합니다

해당 웹 페이지의 본문 블록이 무엇이든간에 HTML 엘리먼트의 내부 HTML을 채운다 그 텍스트 응답이 무엇이든간에 그래서이 모든 일이 무엇을 할 것이며,이 모든 것이 말하는 것입니다 만약 내가 뒤로 버튼을 누르면,이 onpopstate 이벤트는, 그 페이지와 관련된 정보를 얻고, estate, 내가 다시 돌아 가려고하는 상태 그 제목을 가져 와서 그것을 문서의 제목으로 설정하고, 페이지의 본문을 텍스트로 채 웁니다

그 JavaScript 객체의 내부 그리고 실제로 어떻게 그 사실이 나타 납니까? 이제 한 페이지 2로 이동하여 해당 응용 프로그램을 실행하려고하면, 이제 첫 번째 페이지부터 시작합니다 두 번째 페이지로 이동하면 / second로 이동합니다 특히 제목이 두 번째로 업데이트됩니다 이것은 document

title이며, 웹 페이지의 제목입니다 세 번째 페이지를 클릭하면 이제 세 번째 페이지에 있습니다 또한 문서 제목이 3 번째로 업데이트되었음을 ​​알 수 있습니다 이제 Back을 클릭하면 저는이 스택을 첫째, 둘째, 셋째로 구축했습니다 뒤로 버튼을 클릭하면 주식 상단에서 3 번째로 팝됩니다

그리고 지금 제가 남긴 것은 두 번째입니다 두 가지 일을하는 onpopstate 이벤트를 트리거합니다 그것이하는 첫번째 일은 documenttitle을 무엇이든 변경하는 것입니다 제목은 -이 경우에는 초입니다

그리고이 페이지의 텍스트를 변경합니다 ID 본문 안에 무엇이 있든 블록– 텍스트가 해당 JavaScript 객체 내부에 저장되었는지 여부를 지정합니다 그리고 나는 다시 되돌아 갈 수있다 나는 돌아가서, 이제 나는 첫 페이지에있다 첫 페이지의 텍스트도 거기에 있습니다

따라서 HTML5 기록 API를 활용하면 URL을 조작 할 수있는 능력, 이 popstate 이벤트를 사용하여 뒤로 버튼을 누르면 발생합니다 이러한 단일 페이지 응용 프로그램을 만들 수 있습니다 사용자가 동일한 페이지에 머물러서 우리가 실제로 필요로하지 않고 필요한 서버의 데이터 페이지를 다시로드하고 콘텐츠를 다시로드하려면 우리는 이미 그 페이지에있었습니다 다시 한번, 우리가 그것을 필요로한다면 지금까지 그 중 어떤 것에 관한 질문입니까? 관객 : 앞으로 버튼을 누르면 어떻게됩니까? BRIAN YU : 좋은 질문입니다

나는 앞으로 나아가면 어떻게 될까? 그래서 제가 앞으로 나아가면, 그것은 같은 것을 역으로합니다 따라서 이전 상태뿐만 아니라 내가 들어간 주 에서뿐만 아니라, 내가 앞으로 나아가면 이제는 가고있다 내가 방금 스택에서 튀어 나온 것을 가져다 주려고 그리고 저를 위해 다시 가져와주세요 이제 제목이 두 번째를 업데이트하고 텍스트가 두 번째를 업데이트합니다

그리고 그 같은 onpopstate 이벤트 때문에 다시 모든 것입니다 앞으로 버튼과 앞으로 버튼은 의도 한대로 정확하게 작동합니다 좋은 질문입니다 좋아, 우리는 기어를 조금 바꿀 것이다 그리고 창 및 문서에 대한이 아이디어에 대해 더 자세히 이야기 할 것입니다

우리가 다루고있는 그래서 우리는이 창과 문서 변수를 공정하게 다루었습니다 우리가 창문을 만들었 어 지금은 말할 것도없고 네가 돌아갈 때 어떻게 될지 그리고이 문서 변수를 사용하여 querySelector를 시도해 보았습니다

정보를 추출하고 추출합니다 창과 문서는이 JavaScript 객체의 예일뿐입니다 우리는에 대한 작업을 수행 할 수 있고 그 속성에 액세스 할 수 있습니다 특히 우리는 그들의 크기에 대한 정보에 접근 할 수 있습니다 및 그들의 위치에 관하여

예를 들어 여기에서이 예제를 살펴 보겠습니다 이것은 단지 일반적인 창입니다 이 창 크기를 원한다면 이 윈도우의 다양한 구성 요소의 크기 – 음, windowinnerwidth는 변수가됩니다 창문 너비가 뭐든간에 나에게 줄 수있는 픽셀 수의 관점에서입니다

그 정보를 사용하여 창 너비에 도달 할 수 있습니다 마찬가지로 창을 사용할 수 있습니다 창문의 높이가 무엇이든간에 나를 위해 추출 할 수 있습니다 그래서 픽셀 수의 관점에서 볼 때 얼마나 큰 창이죠 물론 창은 표시되지 않습니다

HTML 페이지 전체 아마도 내가 스크롤 할 필요가있는 긴 HTML 페이지가 있다면, 그러면 제가 실제로 가지고있는 것은이 긴 문서입니다 당신이 생각할 수있는이 회색 영역은 단지 문서 일뿐입니다 문서 내부에서는 잠재적으로 작은 구성 요소 만 그 문서의 내용은 실제로 창 내부에서 볼 수 있습니다 그래서 순서대로 액세스 할 수있는 다른 속성이 있습니다

문서에 대한 정보를 얻으려면 그래서 documentbodyoffsetHeight offsetHeight HTML 요소의 위치 변경 높이를 가져옵니다 그래서 HTML 페이지 본문의 offsetHeight가 나에게옵니다

이 전체 문서의 전체 높이 그 중 창문 높이는 아마도 그 중 일부일 것입니다 마찬가지로 windowdotscrollY와 같은 변수에도 액세스 할 수 있습니다 to say 얼마나 멀리까지 페이지를 스크롤 내가 현재 스크롤합니까? 50 픽셀 아래로 스크롤 한 경우 window

dotscrollY 예를 들어, 50이 될 것입니다 그래서이 모든 정보를 사용할 수 있습니다 창에 관한 것들의 현재 픽셀 값을 볼 수 있습니다 정보를 사용하고 싶을 때 유용합니다

사용자가 페이지에서 스크롤 한 위치 또는 현재 윈도우가 얼마나 큰지 내부에서 다른 일을 할 수 있는지 여부 자바 스크립트 코드 그래서 예를 들어, 아마도 JavaScript에 방법이 있었으면 좋겠습니다 내가 페이지의 맨 아래에 있었을 때 나는 말할 수 있었다 내가 페이지의 맨 아래까지 줄곧 내려 갔을 때 이 변수들에 관해서는 여기에서, 그리고 그것들 모두를 필요로하지는 않을 것입니다 innerWidth, innerHeight, scrollY, 문서 본문 offsetHeight

이 값들 사이의 관계에 대해 무엇이 사실일까요? 페이지 하단으로 스크롤했는지 알 수 있습니까? 이미지를 보면서 scrollY, innerHeight, 및 offsetHeight 의미 그리고 내가 너와 함께 할 수 있는지 알아봐 내가이 HTML 페이지의 맨 아래에 있음을 알 수있었습니다 내가 밑바닥까지 계속 스크롤했다 청중 : scrollY가 window

innerHeight 인 경우 BRIY YU : scrollY가 windowinnerHeight 인 경우 좋습니다, 지금까지는 좋은 일입니다 scrollY가 윈도우 innerHeight와 같으면 내가 지금 아래로 스크롤 한 양을 의미 할 것입니다

그러나 창문은 높이와 같습니다 내 창문이 원래 이곳에 있었다면 그건 의미 할텐데, 그리고 나는 아래로 스크롤했다 나는 하나의 전체 윈도우 값을 스크롤 다운했습니다 그러나 아직도 더 많은 정보가있을 수 있습니다 아래 – 몸이 두 창 크기의 콘텐츠보다 큽니다

그래서 우리는 탐지 할 수있는 약간의 수정을해야 할 것입니다 우리가 페이지의 맨 아래에있을 때 네? 관객 : 그것은 내부의 Height와 scrollY는 [INAUDIBLE] BRIAN YU : 예, 그렇습니다 그래, 속옷이라면 Height- 창문

EnerHeight plus windowscrollY 본문의 offsetHeight와 동일합니다 즉, 내가 스크롤 한 금액 플러스 그러나 키가 큰 창은 동일합니다 이 전체 문서의 높이로 아마 내가 맨 아래로 스크롤해야했을 것입니다 그래서 그것은 훌륭한 직감입니다

그리고 그것은 정확합니다 이것이 우리가 이러한 변수를 사용할 수있는 방법입니다 사실 페이지의 맨 아래로 스크롤하면됩니다 그럼 실제 상황을 살펴 보겠습니다 그런 다음 몇 가지 실용적인 응용 프로그램을 살펴보십시오

우리는 scrollhtml과 scrollhtml이 할 일을 살펴볼 것입니다 이 페이지의 본문, 즉 scrollhtml 안에 있습니다

나는 단지 단락 전체를 가지고있다 단락 1, 2, 3, 단락 번호 100까지 줄곧 있습니다 아마도 단락의 전체가 스크롤해야 할 것입니다 그리고 내가 자바 스크립트 코드 내부에 가지고있는 것 – 우리가 정상에 올라갈 때마다 창문이 있습니다 스크롤을 할 때마다, 제가 할 일은 먼저 로그 할 것입니다

이 높이에 대한 정보 따라서 자신의 웹 브라우저에서 이것을 사용한다면, 그리고 당신은 구글 크롬 내부의 콘솔을 본다 또는 사용중인 웹 브라우저가 무엇이든간에 당신이 그들을 비교하는 데 도움이 될 수있는 몇 가지 값을 볼 수 있습니다 그러나 여기에 windowinnerHeight와 window

dotscrollY가 더 큰 경우 또는 같거나 – 정말로 똑같은 것이 좋았을 것입니다 – body의 offsetHeight – 방금 설명한 동일한 방정식 – 시체를 가져와 배경색을 바꾸어 봅시다 녹색으로 표시하고 배경색을 흰색으로 설정합니다 그래서 여기에있는 생각은 내가 스크롤 할 때, 내가 바닥에 도달하면, 배경색을 녹색으로 변경하고 싶습니다 이제 내가 페이지의 맨 아래에 도달했음을 발견했기 때문입니다

그래서 제가 scrollhtml을 열면, 나는이 개별 단락 전체를 본다 그리고 스크롤하면 지금 배경의 흰색 – 만약 내가 맨 아래로 끝까지 가면, 내가 스크롤 한 것 – 스크롤 된 플러스 창 높이 – 문서의 전체 높이와 같습니다 즉, 나는 바닥에 도달했다 페이지가 녹색으로 바뀝니다

내가 위로 스크롤하면, 이제는 흰색이에요 더 이상 페이지 하단에 없습니다 나는 아래쪽으로 다시 스크롤한다 이제 페이지가 녹색으로 변합니다 페이지의 맨 아래에 도달했음을 감지 할 수있게되었습니다

자바 스크립트를 사용하고 창과 관련된 것들을 비교함으로써 문서 그래서 이것은 모두 흥미 롭습니다 그러나 이것이 왜 모두 실용적인가요? 어디서 유스 케이스가 될지도 모릅니다 사용자가 스크롤 한 시간을 알 수 있도록 관련성이 높거나 유용한 정보 페이지 하단까지? 네? 관객 : 많은 페이지가 넘는로드가 있습니까? BRIAN YU : 예, 그렇습니다 현대 웹 응용 프로그램이 많아지면서로드가 더 많이 발생합니다

또는이 자동 로딩을 통해 트윗 페이지의 맨 아래로 스크롤하십시오 예를 들어, 그것은 자동으로 당신을위한 추가 트윗을로드합니다 계속해서 스크롤 할 수 있습니다 이제 우리가 할 일은 한 번 살펴 보는 것입니다 우리가 자바 스크립트를 사용하여 그런 생각을 어떻게 완성 할 수 있었는지, 페이지의 맨 아래로 스크롤 할 수있는 무한한 스크롤의 아이디어 다음 정보 세트를로드하십시오

그리고 이것에는 많은 장점이 있습니다 새로운 정보를 동적으로로드하는 것이 왜 유용할까요? 당신은 반대쪽으로 페이지의 하단에 도달 처음에 모든 것을로드하는 것만 큼? 네? 관객 : 공연 [INAUDIBLE] 그것은 정말 한 번에 모든 것을로드하는 속도가 느립니다 BRIAN YU : 성능 – 확실히 많은 콘텐츠가있는 경우, 사용자는 그 모든 내용을보고 싶지 않을 수도 있습니다 한꺼번에로드 할 이유가 없습니다 그리고 그들이 그 모든 내용을보고 싶다고하더라도, 증분으로로드하는 것이 조금 더 좋지만, 오히려 그들이이 모든 시간을 기다려야하는 것보다 게시물의 첫 번째 커플을 볼 수 있습니다

이제이 무한 스크롤을 사용해 보겠습니다 우리가 언제 어떻게 발견 할 수 있는지에 대한 지식과 능력 우리는 페이지의 맨 아래에 도달했습니다 그래서 나는 0 번 게시물로 진행할 것입니다 0 번 게시물은 소셜 미디어 피드를 시뮬레이션하는 것입니다 나는 몇 개의 게시물을 갖고 있으며 실제로 무한한 수의 게시물을 가지고있다

무한히 계속 스크롤 할 수 있습니다 그러면 이것이 어떻게 작동할까요? 글쎄, 나는 indexhtml을 렌더링하는이 기본 라우트를 가지고있다 잠시 후에 살펴 보겠습니다 이것은 Flask 응용 프로그램입니다

그리고 지금 나는이 / posts 경로를 가지고있다 이 / post 경로는 AJAX를 통해 액세스 할 수있는 경로가 될 것입니다 또는 저에게 몇몇 포스트를 얻을 HTTP 요구를해서 그리고 특히, 나는 무엇이든지간에 논쟁으로 제공 할 필요가있다 이 게시물의 시작과 끝은 다음과 같습니다

그리고 어쩌면 1에서 20까지의 게시물을 얻고 싶을 수도 있습니다 이러한 ors는 경우의 기본값입니다 나는 시작과 끝이 무엇인지 명시하지 않는다 하지만 내가 1에서 20까지의 게시물을 원한다면, 내가 할 일은 이 게시물 목록을 생성합니다 그리고 지금 당장이 게시물 목록을 생성 할 방법은, 나는이 웹 애플리케이션에 데이터베이스가 연결되어 있지 않기 때문에, 단지 각 우편 번호 i를 호출하는 것입니다

그래서 시작 번호부터 반복 할 것입니다 번호를 끝내고이 게시물 목록에 추가하기 만하면됩니다 게시물 번호 1, 게시물 번호 2, 게시물 번호 3, 등등 그럼 당신은 실제로 응용 프로그램에 이것을 포함하고 싶지는 않지만 단지 웹 서버에서 데이터를 가져 오는 데 시간이 걸릴 수 있다는 생각을 시뮬레이트합니다 데이터베이스에서 쿼리하려면 시간을 할 것입니다

잠깐 (1), 이것은 단지 아무것도하기 전에 잠시 멈추는 것을 의미합니다 마지막으로 모든 게시물에 대한 JSON 응답을 반환 할 것입니다 그래서이 / 포스트 루트는 내가 어떻게 새로운 포스트에 접근 할 것인가입니다 아마도 1 ~ 20 개의 게시물을 요청할 것입니다 그리고 나서 다음 단계에서 21에서 40을 요구하십시오

어떻게 작동합니까? Post0의 indexhtml을 살펴 보겠습니다 흥미로운 일들이 일어날 곳입니다 이 웹 페이지의 본문에는 실제로 신체에는 거의 없습니다 게시물을 저장하는 HTML 요소 만 div에 있습니다

하지만 지금은 ID가 상점과 같아서 그게 전부입니다 실제로이 요소 안에는 아무 것도 없습니다 그래서 제가 실제로하고있는 일은 자,이로드 기능을 살펴 보겠습니다 그래서이로드 함수 안에서 시작 변수와 끝 변수를 정의 할 것이고, 카운터 및 수량 측면에서 정의됩니다 그래서 여기에 카운터를 동등한 것으로 정의했습니다 첫 번째 게시물을로드하려면 게시물 번호 1이어야합니다 그리고 나서이 두 번째 변수가 호출됩니다

수량, 단지 얼마나 많은 게시물이 될 것인가? 주어진 시간에로드 할 예정입니까? 그래서 우리는이 경우에 한 번에 20 개의 게시물을로드 해 봅시다 처음 20, 그 다음 20, 그 다음 20입니다 그래서 시작과 끝 값을 정의합니다 카운터를 업데이트합니다 다음에 새로운 글을 올리기 시작할 때, 그것은 아마 21에서 시작할 것입니다

이제는 HTTP 요청을 할 것입니다 그리고 이것은 우리가 전에 만든 HTTP 요청과 매우 유사합니다 우리는 / post에 대한 게시물 요청을 할 것입니다 그리고 우리가 그 요청을 끝내면, 우리는 그 응답에서 돌아온 데이터를 얻을 것입니다 그런 다음 해당 데이터의 각 항목에 대해 기억하십시오

데이터는 개별 게시물의이 긴 JavaScript 배열이 될 것입니다 각각에 대해이 add_post 함수를 실행합니다 잠시 살펴보고 DOM에 게시물을 추가하려고합니다 사용자가 실제로 볼 수있는 창에 게시물을 추가하십시오 이 요청을 할 때 우리는 우리는 HTTP 요청에 시작 지점이 무엇인지, 끝 지점이 무엇인지, 요청을 보낸다

요청이 돌아 오면이 add_post가 호출되며, 그래서 add_post는 20 번 호출 될 것입니다 매 20 개의 새로운 글을 올릴 때마다 add_post 포스트 번호 1, add_post 포스트 번호 2, 등등 그렇게하기 위해 DOM에 HTML 컨텐트를 추가하려고합니다 그래서 저는 새로운 변수를 정의하고, 게시하고, 이것은 내 페이지 안에 새로운 div를 작성한 결과 일 것입니다 나는 그것을 게시 할 className을 주겠다

그리고 나는 페이지의 상단에 있기 때문에 그렇게하고 있습니다 일부 CSS 스타일 코드를 발견 할 수 있습니다 여기에 게시물에 배경색을 지정하고, 예를 들어, 그것을 구별하기 위해 그리고 그 게시물의 innerHTML은 내용입니다 이 게시물의 내용이 무엇이든간에 – 아마도 1 번이나 2 번이나 3 번 등등입니다

그런 다음 해당 게시물을 DOM에 추가하여 querySelector 게시물을 작성하고이 새 게시물에 추가하십시오 내 게시물에는 모든 게시물이 들어 있습니다 궁극적으로 새로운 소식이 추가되는 방식입니다 로드 기능을 실행할 때마다 20 개의 새 게시물을 요청합니다 이들 각각에 대해 add-post 함수를 호출 할 것입니다

내 HTML 페이지의 내용에 새 게시물을 추가하려고합니다 이제 언제이로드 함수가 호출됩니까? 글쎄, 두 번 불러 여기 25 번에 한 번 전화가 왔어 이벤트 리스너를 추가합니다 DOM 내용이로드 완료되면 – 다른 말로하면 페이지가 처음으로로드되고 계속 진행하여 해당로드 함수를 호출합니다

나에게 아무것도하지 않고 처음 20 개의 게시물을로드하십시오 그러나 스크롤을 사용하여 페이지를 스크롤 할 때마다 확인해 봅니다 이 방정식이 성립한다면, 즉, 우리가 이전에 이야기 한 바와 같이, 페이지의 맨 아래에 도달했습니다 로드 기능을 호출하십시오 다음 게시물 20 개를로드하십시오

따라서이로드 기능은 추가 20 개의 게시물을로드합니다 이 조건은 우리가 단지 사실, 우리는 다음 20 개의 게시물을로드 할 것입니다 해당 HTML 페이지의 맨 아래에 도달했습니다 그렇다면 궁극적으로 실제로 어떻게 작동합니까? 계속해서 제로 영점에 들어가서 실행하십시오 그리고 지금이 페이지로 가면 즉시 볼 수 있습니다

내가 동적으로로드 된 개별 게시물을 가지고 있다는 것입니다 스크롤바를 보면 스크롤하기에는 너무 멀지 않습니다 그러면 제가 페이지의 맨 아래로 갈 것입니다 그리고 이것은 1/2 초와 같기 때문에 빨리 일어납니다 다음로드되기 전에

그러나 내가 20 번 하단의 게시물 번호에 도달했음을 주목하라 그 후 05 초 후, 제가 페이지의 바닥에 도달했기 때문에, 그것은 다음 20 개의 게시물에 대한 질의를했고, 이제 다음 20 개의 게시물이 여기에 있습니다 나는 다시 아래로 스크롤한다 나는 40 살이야

30 초 후, 다음 20 개의 게시물도 그 아래에 나타납니다 그리고 이제 저는이 무한의 두루마리에 대한 아이디어를 재창조했습니다 페이지의 맨 아래로 계속 스크롤 할 수 있습니다 그 다음에 게시물 세트를 렌더링합니다 지금까지 본 모든 것에 대한 질문? 어떻게 우리가 그 일을 할 수 있었습니까? 고객 : 카운터, 자바 스크립트 변수입니까? BRIAN YU : 올바른, 카운터는 자바 스크립트 변수입니다

관객 : [INAUDIBLE] BRIAN YU : 동봉되었으므로 여전히 스크립트 태그 안에있었습니다 그래서이 전체 자바 스크립트 콘텐츠는 모두 script 태그 안에있었습니다 그리고 실제로, 당신이 원할 것입니다 이 모든 것을 별도의 JavaScript 파일로 옮기는 것입니다 별도의

js 파일 – 자바 스크립트가 없도록 정리해야합니다 및 HTML을 모두 함께 사용합니다 그러나 이것은 script 태그 내부에 있기 때문에 JavaScript 변수가됩니다 이 경우 모든 함수가 액세스 할 수있는 전역 변수입니다 좋아요, 그래서 무한 스크롤을 만들 수있었습니다

우리가 페이지의 맨 아래에 있는지 확인할 수있게함으로써 그런 다음 다음 게시물 세트를 렌더링합니다 우리가 할 수 있다면 지금 좋을지도 새 게시물을 만드는 것 외에도 우리가 게시물을 숨길 수 있도록 허용하고 싶습니다 게시물이 많고 우리에게 흥미가없는 게시물이 있다면 우리는 게시물 번호 27에 대해 신경 쓰지 않습니다 우리는 그 글을 숨길 수 있고 다른 글은 그 자리를 대신 차지할 것입니다

그러면 우리가 어떻게 할 수 있을까요? 이제 게시물 하나를 살펴보고 indexhtml을 살펴 보겠습니다 그래서 대부분이 똑같습니다 그러나 먼저 주목할 것은이 add_post 함수 안에서, 우리는 약간의 콘텐츠를 추가해야했습니다 그래서 새로운 div를 추가하는 것 외에도 새 게시물을 추가 할 때, 이 페이지의 내용을 저장하려고하는 document

createElement를 다시 사용하여 새 버튼을 만들 수도 있습니다 이것은 hide라고합니다 나는 className에 hide를 줄 것이다 CSS를 보면 몇 가지 속성을 추가했습니다 숨기기 버튼을 게시물의 오른쪽으로 이동하려면 미적 이유로

그리고 그 버튼의 내용 – 실제로 그게 뭐라고할까요? 음,이 경우 숨기기라고 할 것입니다 그래서이 숨기기 단추를 추가하기 위해 게시물에 추가했습니다 이 div에 Hide 버튼을 추가했습니다 숨기기 버튼을 클릭하면 어떻게됩니까? 음, 여기에 hideonclick이라는 코드가 있습니다

이것은 내가 실행해야하는 기능입니다 이것은이 기능이 호출되는 모든 것을 나타냅니다 이 경우 숨기기 단추 자바 스크립트에서도이 속성에 액세스 할 수 있습니다 parentElement라는 HTML 요소가 포함 된 것을 가져옵니다

문제의 요소 그리고 이것이 Hide 버튼이면 thisparentElement는 무엇입니까? 관객 : 게시물 div BRIAN YU : 게시물 div 예 바로 그 거예요

그래서이 게시물 div에 숨기기 버튼을 추가했습니다 숨기기 버튼은 이제 게시물 div의 HTML 요소의 하위 요소입니다 숨기기 버튼이있는 경우 숨기기 버튼의 parentElement 게시물 자체입니다 그래서 저는 remove를 호출 할 것입니다

이것은 HTML 요소를 취하여 제거하는 내장 함수입니다 전부 숨기기 버튼을 클릭하면 해당 게시물이 삭제됩니다 그리고 그 작은 추가와 함께, 이제 내가 posts1에 들어가서 그것을 실행하면, 지금 나의 포스트의 각각에는 지금 그것과 관련되었던 숨기기 단추가있다 예를 들어 게시물 3 옆에있는 숨기기를 클릭하면 3이 사라집니다

이제는 포스트 2에서 포스트 4로 직선으로 이동합니다 아래쪽으로 스크롤하면 자동 스크롤이 새로 생성됩니다 게시물이 나타나고 해당 게시물도 숨길 수 있습니다 그것들은 사라지고 새로운 글이 그것을 대체합니다 지금까지 이것에 관한 질문? 네? 관객 : 코드로 돌아가서 궁금한 점이 있습니다 – 정의 된 상수가있는 곳에,하지만 당신은 인용하고 있습니다 – 나는 내가 상수 [INAUDIBLE]에 대해 혼란 스러울 뿐이라고 생각한다

BRIAN YU : 좋은 질문입니다 그래서 질문은이 const에 관한 것입니다 나는 const post와 const hide를 가지고있다

우리는 일정한 변수가 바뀔 수 없다는 것을 배웠습니다 아직 내가 여러 번 게시물을 추가하는 전화를하고있는 것 같아 – 시간과 시간을 다시 첫 번째 게시물에서 두 번째, 세 번째 등등 이 포스트와 숨기기 버튼은 다른 것들을 가리키고 있습니다 그렇다면 왜 허용됩니까? 그리고 대답은 변수 범위 지정과 관련이 있습니다 따라서이 변수는이 추가 기능의 내부에만 존재하기 때문에, 다음에 add-post 함수가 호출 될 때, const post라고 할 때, 이것은 post라는 완전히 새로운 변수입니다 원래의 것과 아무 관련이 없습니다

그래서 const 포스트는이 같은 범위의 내부를 의미 할 것입니다 게시물을 여기 뭔가 다른 것과 같게 바꾸려면 나중에 함수에서 허용되지 않습니다 그 이유는 게시물에서 내가 변하지 않을 것이라고 말한이 동일한 변수 게시글에 그 변수를 상수라고합니다 그러나이 기능의 전체 몸 안쪽에 게시물이 변경되지 않으면, 그렇다면 변수가 상수 일 수 있습니다 포스트 변수는 처음 정의 할 때 태어납니다

그리고 post 변수는 함수가 끝날 때 죽습니다 따라서 add_post가 끝나면 post 변수가 완전히 사라집니다 그리고 다음 번에 67 행을 실행하면 이것이 신선한 변수입니다 따라서 여전히 일정하게 유지하는 것이 좋습니다 관객 : 나는 [부적절한] BRIAN YU : 네, 문제 없습니다

관객 :하지만 궁금해서 – 그래서 너는 설정하고있어 네가 그걸 뭐라고 부를지 모르겠다 비록 상수 일지라도, 당신은 값은 그 점이 무엇이든간에 BRIAN YU : 오, 좋은 질문입니다 비록 그것이 일정한 o 줄 68과 69이지만, 게시물의 className과 innerHTML을 수정할 수 있습니다

그래 넌 할수있어 그리고 그것은 의미에서 일정한 변수입니다 항상 똑같은 것을 언급 할 것입니다 그것은 항상 div 요소를 생성 한 결과가 무엇이든간에 말합니다 그래서이 새로운 div 요소를 만들고 게시 할 것입니다

그 발달을 참조하십시오 예를 들어, 게시물을 다른 div 요소를 참조하도록 만들 수는 없습니다 그러나 div 요소를 참조하는 경우, 이 div 요소의 속성을 변경할 수 있습니다 클래스 이름 또는 innerHTML 특성을 할당합니다 그래서 그것은 여러분이 할 수있는 일입니다

너는 변할 수 없다 나는 마치 게시물과 같은 라인이 전혀 다른 것일 수 없다 네, 좋은 질문입니다 관객 : 그것은 포인터처럼, div [INAUDIBLE] ?? BRIAN YU : 그래, 그 의미에서 포인터와 비슷하다고 생각할 수 있습니다 그것은 div 객체를 가리키고 있습니다

그것은 항상 거기에서 가리킬 것이다 그러나 나는 아직도 할 수있다 수정할 수있는 해당 div 개체 내에 실제로있는 정보를 변경하십시오 그것의 innerHTML 등등 좋습니다, 그래서 우리가 지금까지 주목 한 것은 무엇입니까? 자바 스크립트를 사용하기 시작하면서 보다 복잡한 사용자 인터페이스를 구축하고, DOM에 항목을 추가 할 수 있습니다

나중에이 코드는 일반적으로 좀 지저분 해지기 시작합니다 내가 div를 만들고 그 className을 할당해야한다고 게시물로 innerHTML을 콘텐츠로 지정합니다 정말로 내가 무엇을 할 수 있기를 바랄까? 이 코드 전부에 대해 HTML을 작성하는 것입니다 div와 set 클래스는 게시물과 같고 그 안에는 내용이 있습니다 그러나 물론, 나는 현재 할 수 없다

내가 정확한 HTML을 미리 알지 못하기 때문에 나는 DOM에 넣고 싶습니다 나는 모든 게시물의 내용이 무엇인지 반드시 알 필요가 없다 될거야 그래서 이것이 우리가 자바 스크립트에 대한 새로운 아이디어를 소개 할 곳입니다 우리는 자바 스크립트에서 템플릿을 만들 수있는 우리가 원하는 HTML을 정확히 쓸 수있게 해줍니다

템플릿의 다른 측면을 대체 할 수 있습니다 그들을 좋아하는대로 맞춤 설정하기 위해 우리는 이미 백틱 심볼의 맥락에서 이것을 조금 보았습니다 이러한 ES6 템플릿 리터럴 (예 : 일부 이전에 우리가 플러그인 할 수 있었던 예제들 예를 들어, 달러 기호 다음에 중괄호 ({}) 여기에 뭔가 연결하십시오 우리는 똑같은 아이디어로 건축 할 것입니다 그러나 이번에는 다음 단계로 넘어 가야합니다

그래서 모든 종류의 자바 스크립트 라이브러리가 있습니다 이 목적을 위해 설계되었습니다 JavaScript에서 템플릿을 쉽게 만들 수 있도록 노력하고 있습니다 그러면 HTML 요소를 작성할 수 있습니다 DOM에 삽입하십시오

인기있는 것들은 콧수염과 언더 코어와 로다시와 핸들 바를 포함합니다 그리고 다른 모든 것들 이 수업에서는 Handlebars를 살펴볼 것입니다 이러한 템플리트 라이브러리 중 하나의 예제입니다 결코 유일한 것이 아니라 다른 것입니다

그들의 장점과 비용이 다릅니다 그러나 일단 당신이 그것을 본다면, 당신은 그들이하는 일에 대한 일반적인 감각을 얻을 것입니다 어떻게 작동하는지, 그리고 다른 것들은 그 후에 매우 쉽게 받아 들여집니다 그래서 지금 우리가 만들 계획입니다 우리가 주사위를 굴릴 수있게 해주는 일련의 응용 프로그램입니다

아마도 주사위를 굴릴 수있는 주사위 시뮬레이터 프로그램이 필요할 것입니다 그게 우리가하려고하는 것입니다 이제 주사위 0의 예를 살펴 보겠습니다 먼저이 애플리케이션을 실행 해 보겠습니다 어떻게 작동하는지 보여주기 위해 살펴볼 것입니다

실제로 작동하게 만드는 코드에서 이 페이지를 새로 고침하면 오, 미안 이것은 Flask 응용 프로그램이 아닙니다 나는 단지 dicehtml을 열려고합니다

그래서 이것은 HTML 페이지 일뿐입니다 플라스크가 없습니다 HTML과 자바 스크립트 그리고이 페이지에있는 것은 롤 버튼입니다 그리고 Roll을 클릭하면 2를 굴렸다 고합니다

롤을 다시 클릭합니다 너는 2를 굴렸다 나는 2s의 무리를 굴렸다 하지만 이제는 다른 주사위를 계속 굴릴 것입니다 나는 매번 다른 가치를 얻을 것입니다

그리고 매번 DOM에 추가 할 것입니다 그래서 우리는 다음과 같은 것을 만들 수있는 방법을 살펴볼 것입니다 Handlebars와 같은 템플릿 라이브러리 그리고 핸들 바를 어떻게 사용할 수 있는지 살펴 봅니다 이것을 더욱 강력하고 더 기능적으로 만들기 위해 이것을 확장하십시오

이제 dicehtml을 살펴 보겠습니다 이 HTML 페이지의 본문에는 Roll이라는 버튼이 있습니다 그리고 비어있는 롤 목록이 순서대로 비어 있습니다 지금까지 너무 미친 아무것도

버튼을 누른 다음 순서가 정렬되지 않은 목록은 결국 내가 물건을 추가하려고합니다 그렇다면 자바 스크립트 내부에서 무엇이 필요합니까? 여기 코드가 있습니다 내가 할 일은 JavaScript 템플릿을 정의하는 것입니다 이것은 핸들 바 (Handlebars) 템플릿이 될 것입니다 나는 그것을 만들려고합니다

언제든지 새로운 역할을 만들고 싶습니다 이것은 DOM에 추가되어야하는 것을위한 템플릿이다 주사위를 굴릴 때마다? 그래서이 경우 칸트의 템플릿이 같다고 말하려고합니다 handlebarscompile은 새로운 템플릿을 컴파일하거나 만드는 방법입니다

그리고이 템플릿은 Jinja 유형과 비슷합니다 플라스크에서 작업 할 때 사용한 템플릿 그것을 클라이언트 측 아날로그의 일종으로 생각하십시오 템플릿은 서버와 비슷했습니다 그리고이 템플릿은 매우 단순하게 될 것입니다 목록 항목입니다

a를 굴린 다음이 이중 중괄호를 굴 렸습니다 Jinja처럼, 그들은 가치를 여기에 연결하는 것을 의미했습니다 그들은 핸들 바에서 똑같은 것을 의미합니다 여기에 값을 입력하십시오 값을 입력 한 다음 / li 항목을 닫을 것입니다

그리고 이것이 우리가 Handlebars를 사용하여 만든 템플릿입니다 결국 우리는 그것을 사용할 것입니다 언제 사용합니까? 롤 버튼을 클릭 할 때마다 그래서 우리는 롤 버튼을 선택합니다 – 이드 롤 클릭하면이 코드를 실행합니다 여기에이 방정식과 같은 굴림이 있습니다

그래서 mathrandom은 JavaScript 함수입니다 0과 1 사이의 난수 0에서 1 사이의 임의의 숫자가 주어지면 실제로 원하는 것은 아닙니다 나는 1과 6 사이의 정수를 원한다

그래서 저는 먼저이 난수를 취하여 6을 곱하려고합니다 이제 0과 6 사이의 임의의 실수가 있습니다 0과 6은 포함하지만 6은 포함하지 않습니다 아마도 599999까지입니다

그러나 그것은 여전히 ​​내가 원하는 것만은 아니다 그래서 저는 그것에 1을 더할 것입니다 이제 1에서 699999 사이의 난수가 생겼습니다 그리고 그걸 취함으로써 – 수학

바닥 JavaScript의 또 다른 내장 기능입니다 그것은 저에게 하나, 둘, 셋, 넷, 다섯, 또는 여섯을 줄 것입니다 그래서 이것은 여러분이 할 수있는 일반적인 패러다임입니다 어떤 범위에서 임의의 숫자를 생성하고자 할 때마다, JavaScript가 내장되어있어 생성 만 가능합니다 0과 1 사이의 임의의 실수 그러나 수학에 몇 가지 일을함으로써, 곱함으로써, 바닥을 가져 가면 어떤 범위의 난수로 변환 할 수 있습니다

나는 원한다 그래서 롤은 나에게 임의의 롤을 줄 것이다 그리고 이제 나는 1, 2, 3, 4, 5 또는 6의 롤 값을 가져야합니다 실제로 DOM에 추가하십시오 DOM에 추가 할 내용은 무엇입니까? 음,이 템플릿을 실행할 것입니다

이 템플릿은 이제 당신이 생각할 수있는 함수입니다 이 템플릿에 무엇을 연결할 지 정의하는 인수를 취할 것입니다 그런 다음 실제로 관심이있는 HTML 콘텐츠를 나에게 돌려줘야합니다 그래서이 템플릿을 실행하여 이 자바 스크립트 객체에서 다음과 같습니다 내가 너를 연결하기를 원하는 가치 – 여기서이 값은이 값과 일치합니다

그리고 그 가치는 롤입니다 이 변수 롤이 무엇이든간에 결과 mathrandom과 수학적 조작을하는 것 그래서 저것은 저에게 당신이 2 / li를 감은 li을 예를 들어 줄 것입니다 그리고 나는 그 내용을 받아 들일 것입니다

내 순서없는 롤 목록의 HTML에 추가하십시오 결과적으로 나는 그 버튼을 클릭 할 수있게되었습니다 새 템플릿을 생성합니다 그리고이 값이 4- 값인지 또는 롤 값이 무엇이든간에 – 여기에 값을 입력하면이 목록 항목의 템플릿에 연결됩니다 그래서 이것은 HTML 템플릿의 아주 단순한 예일뿐입니다

그리고이 애플리케이션을 더욱 흥미롭고 역동적으로 만들고 싶다면, 어쩌면 단지 롤의 텍스트 값을 연결하는 대신에 – 너는 1, 2, 3을 굴렸다 아마 내가 할 것이다 주사위의 실제 이미지를 넣는 것에 신경을 써야합니다 그리고 저는 주사위 1의 내부를 가지고 있습니다 이미지 전체가 있습니다

그래서 저는 1, 2, 3, 4, 5, 6의 이미지를 가지고 있습니다 이것들은 단지 일어난 PNG 이미지입니다 이 HTML 파일과 같은 디렉토리에 저장되어있다 나는 함께 일할거야 그리고 이것을 사용하여 주사위의 이미지를 실제로 연결하려고합니다

텍스트 값 대신에 그리고 dice1을보세요 dicehtml 이것은 모두 거의 동일 할 것입니다 유일한 차이점은 템플릿이 무엇인지, 내가 컴파일하는 것은 무엇인가

그리고 나는 당신이 굴렀다 고 말할 것입니다 그리고 여기에 값을 입력하는 것보다 플러그를 꽂을 것입니다 이미지입니다 따라서 이미지 소스는 같습니다 그리고 출처는 대개 따옴표로 묶어 사용합니다

이 자바 스크립트 템플릿 자체는 그 자체이기 때문에주의해야합니다 이미 따옴표로 묶여 있습니다 이 따옴표를 벗어나서 JavaScript는 이것을 실제 인용 부호로 취급합니다 그리고 문자열의 끝이 아닙니다 그래서 슬래시, 따옴표, 이미지는 어디에 저장되어 있습니까? 음, 이미지 1

PNG 또는 2PNG 또는 이미지가 무엇이든간에 여기서는 이미지의 파일 이름에 값을 입력합니다 그 이미지 태그를 표시하고 닫고 싶습니다 그래서 이것의 결과는 당신이 굴렀다는 말을하기를 희망합니다

그리고 나서 실제로 거기에 이미지를 연결합니다 그리고 이제 dicehtml을 열면 Roll을 클릭하면, 너는 다섯을 굴렸다 당신은 2를 굴렸다 너는 6을 굴렸다

그리고 이제 저는 그곳에 실제로 배치 된 이미지를 얻습니다 하지만 이것은 아직 조금이기 때문에 여전히 완벽하지는 않습니다 지저분한 JavaScript 템플릿의 모든 내용 여기에 삽입하려는 문자열은이 문자열 안에 포함되어야합니다 그리고 우리는이 끈이 꽤 길어지기 시작한다는 것을 알기 시작했습니다 결과적으로 약간 불편합니다

나는 그것에 대해 걱정해야만한다 나는이 따옴표 또는 무엇이든에 관하여 고민해야한다 정말하고 싶은 것은 순수한 HTML을 작성하는 것입니다 핸들 바를 컴파일하는 방법을 찾아야합니다 우리는 어떻게 그 일을합니까? 글쎄, 이제 주사위 2를 보자

그래서 제가 여기서하려고 할 것은 무엇보다도 먼저 내 실제 자바 스크립트 중,이 추가 스크립트 태그가 있습니다 이 스크립트 태그에는 result라는 ID가 있습니다 그것은 주사위를 굴린 결과를 나타낼 것입니다 그리고 그것은 특별한 타입을 가지고 있습니다 이것은 Handlebars에 의해 정의 된 형식 일뿐입니다

핸들 바는 그것을 찾는 방법을 알고 있습니다 그것은 tech / x-handlebars-template로 입력됩니다 따라서 스크립트 태그 내부에 핸들 바를 나타내는 HTML 코드 템플릿을 만들고 싶습니다 그래서 특히 무엇을 가지고 있습니까? 나는 목록 항목을 가지고 있는데, 이 이미지에는 alt 값과 title 값이 있습니다 이것들은 내가 이미지 위로 마우스를 가져 가면, 그러면 내가 쓴 숫자의 텍스트를 보여줄 것입니다

그리고 이것은 브라우저를보고있는 사람들에게도 유용합니다 예를 들어, 이미지를 지원하지 않습니다 그들은 대체 값 텍스트도 볼 수 있습니다 그리고 이미지의 소스는 이미지이고 여기에 값을 입력하십시오 플러그인의이 Handlebars 템플릿 구문을 사용할 수 있습니다

여기에있는 값을 HTML로 변환합니다 Handlebarscompile의 내부 우리는 왜 우리가 그 순간에 그렇게 할 수 있는지를 보게 될 것입니다 하지만 여기서 이점은 문자 그대로 글을 쓸 수 있다는 것입니다

내가 신경 쓰는 HTML, 언제든지 값을 연결 이스케이프 걱정할 필요없이 이중 중괄호를 사용해야합니다 모든 것을 만드는 것에 대해 걱정할 필요없이 따옴표 하나의 긴 문자열에 나는이 스크립트 태그 안에 여기에 썼다 결국 웹 페이지에 추가하려고하는 HTML 코드입니다 그럼 이제 어떻게 될까요? 큰 긴 문자열을 handlebar

compiling하는 것이 아니라, 내가 원하는 모든 것을 나타내는 템플릿에, 내가 말할 수있는 것은 documentquerySelector 파운드 결과이다 innerHTML 즉, 이드 결과를 얻는 것, 위의 스크립트 블록입니다 innerHTML을 가져 오십시오

행사 그리고 그것이 여러분이 컴파일해야하는 것입니다 즉,이 스크립트 태그의 내용을 여기에서 가져 오는 것입니다 이 템플릿을 사용하고 싶습니다 그러니 계속해서 템플릿으로 사용하십시오

이제 템플릿을 호출하면 개별 값을 연결할 수 있습니다 거기뿐만 아니라 그래서 내가 주사위 2에 들어가서 그것을 열면 이제 내가 굴러 갈 때 당신이 6을 굴린 것을 볼 수 있습니다 – 나는 여러 가지 일을 할 수있다 그리고 이미지 위에 마우스를 올리면 나는이 대체 텍스트를 얻습니다

나는 이미지 위로 마우스를 가져 가면 6이 나타나거나 4 또는 6 또는 4가 나타난다 그것이 내가 만든 이미지의 제목 텍스트이기 때문입니다 그리고 그것은 모두 스크립트 태그를 통해 대체되었습니다 그리고 이것을 사용하여, 나는 몇몇 템플릿을 분석 할 수 있습니다 그들을 다른 스크립트 블록에 넣으십시오

그러면 스크립트 블록이 조금 더 쉬워집니다 그래, 질문 있니? 관객 : 예, 임무, 당신은 [무관심한] —- 그것은 문서의 일부입니까? [알아들을 수 없는] BRIAN YU : 좋은 질문입니다 documentquerySelector를 사용할 수있는 이유는 무엇입니까? 문서는 HTML 페이지의 전체 내용에서 실제로 모든 것을 말합니다 그래서 그것은 단지 신체 부위 밖에있는 것들을 포함합니다

따라서 스크립트가 본문 외부에 있더라도, 나는 여전히 문서로 querySelector를 수행 할 수있다 관객 : 좋아요, [INAUDIBLE] 이런 식으로하거나 이런 일을 해왔습니다 [알아들을 수 없는] BRIAN YU : 좋은 질문입니다 이런 식으로하는 것의 차이점은 무엇입니까? 우리가 전에 본 Jinja로 일을하고 있습니까? 그래서 Jinja는 우리가 Flask와 함께 사용한 템플릿 언어였습니다 우리는 마찬가지로 이중 중괄호를 사용하여 여기서 값을 연결한다고 말할 것입니다

차이점은 Jijja 템플릿이 서버에서 생성된다는 것입니다 그래서 Flask 서버가 필요했습니다 Flask 서버에서 페이지를 요청했을 때, 플라스크는 Jinja 템플릿을 사용하여 물건을 끼워 넣을 수 있습니다 그런 다음 다시 클라이언트로 전달하십시오 지금 우리가 가지고있는 것은 렌더링되고 생성되는 템플릿입니다

클라이언트 컴퓨터 거기에 성능 이점이 있습니다 새 템플릿을 렌더링하도록 서버에 요청할 필요가 없습니다 그런 다음 다시 보내주십시오 고객의 웹 브라우저에서 모든 작업을 수행 할 수 있습니다

그리고 이런 예에서 실제로 어디에 Flask 서버가 전혀 포함되어 있지 않습니다이 HTML 페이지 일뿐입니다 그게 저와 같은 종류의 템플릿 작업을 할 수있게 해줍니다 진자는 사용할 수 없기 때문에 여기서는 사용할 수 없습니다 플라스크 서버가 전혀 실행되지 않습니다

나는 HTML 페이지를보고 있지만 좋은 질문 만하고있다 OK 그래서 멋졌다 하지만 이제는 진자에서와 마찬가지로 도움이 될 것입니다 값을 연결할 수있을뿐만 아니라 과도 값을 반복 할 수 있다는 것을 알았습니다

모든 것을 목록에 인쇄하고 싶은 경우, 목록의 모든 요소를 ​​반복 할 수 있습니다 그것에 템플릿 논리를 적용해라 핸들 바는 똑같은 것을 지원합니다 라이브러리 그리고 지금 제가하고 싶은 것은 주사위를 3 번 ​​먼저 봅시다

제가 지원하고자하는 것은 아마 사람들을 구르는 대신에, 나는 예를 들어 8 번 굴릴 수 있기를 원한다 그리고 나는 그것들을 클릭 할 수 있기를 원한다 8 개의 다른 롤을 얻으려면 입력 할 수 있어야합니다 5 개의 다른 롤을 얻고 임의의 수의 롤을 지정하는 5 개 내가 원하는 페이지에서 생성 된 것을 얻으십시오 어떻게 작동할까요? 모든 롤을 얻는 것 외에도 여기에 주목하십시오

우리는 또한 하나씩 차례로 배열하고, 우리는 또한 그냥 나 한테 끝내는 멋진 총 그 주사위의 총 수 어떻게 그런 일을 할 수 있을까요? 글쎄, 주사위 셋을 한번 보자 근본적으로 매우 유사 할 것입니다 이 템플릿에 대해 다른 점을 살펴 보겠습니다

그래서 템플릿의 내부 – 그것은 결과라고 다시 부릅니다 – 우리는 압연했습니다, 그리고 우리는 각각 특별한 구문 파운드를 가지고 있습니다 이 파운드는 핸들 바 (Handlebars)에서 블록 도우미 (block helper)라고 불리는 것입니다 파운드 (pound)와 같은 블록 헬퍼가 내장되어 있습니다 그건 루프를합니다 조건을 수행하는 경우 파운드가 있습니다

우리는 진자에서 조건을 수행 할 수있는 것처럼 그리고 당신이 내장 된 블록 도우미에 만족하지 않는다면 핸들 바, 핸들 바에 의해 제공됩니다 자신 만의 도우미를 만들 수있게 해줍니다 코드 내에서 사용하십시오 그러나 지금은 각각 모두 우리가 필요로하는 모든 것이고, 각각은 반복 할 것입니다

값이라는 변수 위에 그리고 그 값들 중 하나가 Handlebars에 의해 호출됩니다 따라서 이러한 개별 가치들 각각에 대해, 우리는 그 숫자가 될 이미지를 포함시킬 것입니다 png 그리고 마지막에, 우리는 총을 가지고 있습니다 total이라는 값을 연결합니다

따라서이 템플릿을 작동 시키려면 두 가지가 필요합니다 이 템플릿에 합계를 전달해야합니다 롤의 총 수를 나타내는 숫자입니다 그리고 우리는 또한 자바 스크립트 배열을 호출해야합니다 값, 여기서 해당 배열의 각 항목은 실제 롤의 수 였다

그래서 우리가 그 템플릿을 사용할 때, 그것은 무엇입니까? 우리는 염두에 두어야 할 것입니다 그렇다면 코드가 작동하도록하려면 어떻게해야할까요? 여기 몸 아래에는 입력란이 있습니다 그 ID는 카운터입니다 그게 얼마나 많은 롤을 입력 할 수있는 장소가 될거야 나는 실제로 걱정한다

나는 전에처럼 버튼과 이전처럼 정렬되지 않은 목록을 가지고있다 이제 내가 굴러 갈 때 어떻게됩니까? 음, 단일 롤을 추적하는 것보다, 나는 일련의 롤을 추적 할 것입니다 그래서 저는 roll이라는 변수를 정의하고 있습니다 이 빈 배열로 시작하려고합니다 내가가는 동안 총을 추적 할 것입니다

그래서 얼마나 많은 롤을이 카운터에서 얻었습니까? 나는 그 입력 필드가 무엇이든간에 가치를 얻음으로써 실행되고 싶다 실제로 반복 할 수있는 for 루프가 있습니다 이 랜덤 롤은 계속 반복됩니다 그 새로운 롤의 가치 인 새로운 가치를 얻습니다 나는이 롤 배열 끝에 밀어 넣고, 그런 다음 그 총계가 새 롤이라는 사실을 반영하도록 업데이트합니다

내 기존 총계에 추가하고 싶습니다 그래서이 말미에는 total이라는 변수가 있습니다 이것은 내가 한 모든 롤의 총 ​​가치입니다 그리고 나는이 배열에서 각 롤이 될 롤 배열을 가지고 있습니다 마지막으로이 템플릿을 실행하여 모든 값을 전달합니다

이것은 다양한 롤의 배열이 될 것입니다 정수의 합계를 건네줍니다 결과를이 가변 내용으로 저장 한 다음 해당 내용을 롤에 추가합니다 내가 HTML 페이지에 가지고있는 정렬되지 않은 목록 그래서 제가 지금 dice

html을 열면 그것이 저에게 지금 말할 수있는 것입니다 여기 롤 수의 롤 수입니다 그리고 나는 어떤 번호로든 플러그인 할 수있다 이것이 각각 하나씩 이미지를 추가하여 반복 할 수있게 해줍니다 그리고 나서 마지막에 합계를 표시하십시오

따라서이 핸들 바를 어떻게 사용하고 활용하는지 볼 수 있습니다 템플릿을 사용하면 더 복잡하고보다 정교한 사용자를 만들 수 있습니다 인터페이스를 사용하여 템플릿을 올바르게 정의하면됩니다 우리가 원하는 모든 것을 할 수있게 해줍니다 지금까지 질문이 있습니까? 우리가 잠깐 쉬기 전에 마지막으로 한가지

템플리트 작성 및 적용에 대한 동일한 아이디어를 취해 봅시다 우리가 전에했던 것처럼 무한한 게시물 목록에 우리가 dev에 대한 새로운 요소를 만들어야한다는 것을 기억하십시오 Hide 버튼을위한 새로운 요소를 만들어야했습니다 그리고 조금 더러워지기 시작했습니다

어떻게하면 그 과정을 단순화 할 수 있을까요? post2 indexhtml을 살펴 보겠습니다 이제 내가 가진 것은 그 요소를 생성하는 것보다는 documentcreateElement, 그냥 스크립트 템플릿과 Handlebars 템플릿이 있습니다 게시물이 될 div를 정의한 다음 내용, 중괄호, 중괄호, 내용을 사용합니다

이제이 특정 템플릿에 대해 알아챌 수있는 이상한 점이 하나 있습니다 그것을 원시 블록 안에 넣어야한다는 것입니다 왜 내가 전에하지 않았을 때 여기에서 그 일을해야한다는 아이디어가 있었습니까? 그것은 약간 미묘합니다 따라서이 이중 중괄호 구문에는 실제로 두 가지 의미가 있습니다 언제 우리가 그것을보고 있는지에 따라

Flask가 웹 애플리케이션을 실행할 때 템플릿을 렌더링하려고 할 때 우리는 이중 중괄호는 진자의 말의 의미였습니다 마찬가지로, Handlebars에서 JavaScript에서 Handlebars를 사용할 때 템플릿을 만들려면이 이중 중괄호 여기에 값을 입력하는 것도 의미합니다 그리고 플라스크 재료가 먼저 발생하기 때문에 – 플라스크와 진자를 사용하여이 HTML 페이지를 렌더링하기 때문에 핸들 바가 실행되기 전에 클라이언트에 도달합니다 방금 이중 중괄호 내용이있는 경우, Jinja는이 페이지에 내용이라는 값을 입력하려고합니다 물론 콘텐츠는 무언가가 아니기 때문에 우리가 원하는 것이 아닙니다

Jinja가 연결해야합니다 핸들 바에 의해 연결되어야하는 것입니다 이 템플릿을 만드는 자바 스크립트에서 우리가 갈 때 그래서이 원시 블록은 진자의 말입니다 여기의 내용을 무시하십시오

시도하지 말고 템플릿으로 엉망진창하지만 그냥 혼자두고 클라이언트에게 다시 전달하자 템플릿을 사용하여 게시물을 만들고 숨기기 버튼을 추가 할 수 있습니다 그리고 그 결과로, 이제는 새로운 요소를 만들어야하는 것이 아니라, 우리가해야 할 일은 새로운 포스트 템플릿을 만드는 것뿐입니다 그 내용을 전달한 다음 내 할 일에는 그 모든 게시물이 들어 있습니다 그래서 모든 것을 할 필요가 없습니다

documentcreateElement innerHTML에 클래스 이름을 지정하는 것 이 모든 것은 HTML 전자 메일 서식 파일로 처리됩니다 그리고 만약 내가 지금 post2에 들어가서 그것을 실행한다면, 결과는 이전에 본 것과 거의 같습니다 이 무한한 게시물 목록이 있습니다

우리는 그들을 스크롤 할 것입니다 새 게시물도 생성합니다 그래서 우리가 자바 스크립트에서 배운 것을 가져갑니다 Handlebars로 템플릿을 만들고이 상황에도 적용 할 수 있습니다 우리가 휴식에서 돌아 왔을 때, 우리는 약간의 애니메이션 우리가 그래픽으로 조금 더 많은 것을 할 수있는 방법 실제로 이러한 웹 사이트를 더욱 역동적으로 만듭니다

우리는 먼저 짧은 휴식을 취할 것입니다 다시 오신 것을 환영합니다 그래서 우리는 웹 애플리케이션을 어떻게 구축 할 수 있는지에 대해 이야기 해 왔습니다 파이썬과 자바 스크립트 특히 최근에는 JavaScript를 사용하여 우리의 웹 페이지를 좀 더 역동적으로 만드십시오

사용자가 무언가를 클릭 할 때 반응하도록 또는 사용자가 웹 사이트를 허용하기 위해 무언가를 스크롤 할 때 응답으로 자체 업데이트 그래서 우리는 그 열차를 따라 계속할 것입니다 우리 웹 사이트를보다 역동적으로 만들려고 노력하는 것, 사물을 바꾸고 조작 할 수있게 해준다 페이지에서 일이 진행됨에 따라 그리고 특히, 우리는 애니메이션에 관한 주제를 다룰 것입니다 그래서 여러 가지 다른 방법이 있습니다 그래픽을 사용하여 HTML 페이지의 다른 요소에 애니메이션을 적용하는 방법 등등

우리는 오늘 그들 중 몇 명을 살펴볼 것입니다 그리고 우리가 시작할 것은 CSS를 다시 살펴 보는 것입니다 이전에 여러 가지 스타일을 적용하기 위해 사용했던 우리 웹 사이트의 – 특정 요소의 색상을 변경할 수있게하려면, 특정 요소에 배경을 추가하거나, 또는 예를 들어, 요소의 크기를 변경하십시오 그러나 CSS를 사용하면 CSS의 최신 버전에서 최소한 다음을 수행 할 수 있습니다 우리가 CSS 애니메이션이나 능력이라고 부르는 것이 있습니다

한 CSS 속성에서 다른 CSS 속성으로 변경하는 방법 페이지가 실행되는 동안 일정 기간 동안 그래서 우리가 할 수있게 될 것입니다 우리가 우리 페이지에서 애니메이션을 시작하도록 허락합니다 스타일 속성을 변경할 수 있습니다 그리고 처음에, 이것은 할 멋진 것처럼 보일지도 모르지만, 그러나 우리는 곧 실질적인 영향을 볼 것입니다 CSS 애니메이션을 사용하여 스타일을 조작하는 방법 실제로 우리와 마찬가지로 매우 관련성이 높고 도움이 될 수 있습니다

웹 응용 프로그램을 구축하십시오 그래서 우리가 살펴볼 첫 번째 것은 animate0html입니다 그래서 animate0html은 몸 안의 매우 간단한 HTML 페이지입니다

환영한다고 말하는 제목이 있습니다 흥미로운 점은 내부에 포함 된 것입니다 이 특정 페이지의 스타일 블록 내부 여기서 모든 관련 CSS 애니메이션이 실제로 발생합니다 여기 키 프레임에서이 작업을 수행하고 있습니다

성장하고있는 애니메이션은 우리가 성장하고있는 CSS 애니메이션입니다 그리고 애니메이션의 성장은 어떻게됩니까? 우리는 무언가에서 무언가로 갈 것입니다 일부 CSS 속성 집합에서 다른 CSS 속성 집합으로 이동합니다 이 경우 글꼴 크기 20 픽셀에서 글꼴 크기로 이동합니다 100 픽셀

그래서 성장하는 CSS 애니메이션은 글꼴 크기를 성장에 적용됩니다 이제 우리는이 h1 스타일링을 사용합니다 우리가 아래에 있다는 그 환영 표제에 적용될 것입니다 우리는 몇 가지 CSS 속성을 제공합니다 먼저 애니메이션 이름을 지정하면됩니다

그리고 이것이 여기에 자라는 것과 일치하기 때문에, 우리가이 h1에 이 키 프레임 애니메이션 -이 애니메이션의 글꼴 크기 20 그것에 적용될 글꼴 크기 100까지 애니메이션 기간은 애니메이션이 지속되는 기간입니다 이 경우 2 초가 합리적인 시간으로 보입니다 애니메이션을 위해 그리고 애니메이션 필름 모드는 특별한 CSS입니다 애니메이션이 어떤 방향으로 나아가 야한다는 것을 의미하는 속성? 그리고 앞으로 나아가면서, 애니메이션이 끝나면 우리가 끝내는 그 상태를 유지하십시오

즉, 글꼴 크기가 20 픽셀에서 100 픽셀로 이동하면, 애니메이션 실행이 끝난 후에는 100 픽셀을 유지해야합니다 예를 들어, 20 등을 맞댄가는 대신에 따라서이 세 가지 속성을 정의하면 우리는 이제이 성장 애니메이션을 겪을 h1로 향하고 있다고 말하고 있습니다 그리고 그 결과 animate0html을 열면, 이것은 단지 HTML 페이지입니다

우리는 플라스크 백엔드를 추가하지 않았으며 여기에 파이썬도없고 JavaScript도 없습니다 CSS 애니메이션 그리고 이제 animate0을 열면 2 초 동안 환영받을 것입니다 크기가 커진다 그리고 결과적으로 그 크기로 유지됩니다

그래서 CSS 애니메이션이 할 수있는 것에 대한 기본적인 소개였습니다 그리고 모든 CSS 속성에 사용할 수는 없지만 많은 속성의 경우, 예를 들어, 텍스트의 크기를 포함하여 CSS 애니메이션을 적용 할 수 있습니다 지금까지 질문이 있습니까? 자, 시작하기 전에 하나의 예제를 더 살펴 보겠습니다 이것의 실제적인 사용법을 살펴 보자 여기 animate1

html이 있습니다이 animate1html은 마찬가지로이 h1을 정의합니다 환영합니다 그리고 흥미로운 스타일 코드가 있습니다

Move라는 키 프레임 애니메이션을 정의했습니다 그리고 영화 애니메이션에서 어떤 일이 일어날 것입니까? 왼쪽에서 왼쪽으로 0 %에서 왼쪽으로 50 % 이동합니다 이것이 의미하는 바는 왼쪽은 길입니다 HTML 엘리먼트의 상대적 위치를 가리킨다 그리고이 h1, 당신은 우리가 친척의 지위를 부여 받았음을 알았습니다

우리는이 제목의 상대적인 위치를 정의 할 것임을 의미합니다 창문의 다른 부분으로 특히 처음에는 애니메이션을 움직이기 시작했을 때, 그것은 화면의 왼쪽 가장자리에서 0 %의 윈도우가 될 것입니다 즉, 화면의 왼쪽 가장자리에있게됩니다 그런 다음 화면 왼쪽 가장자리에서 50 % 떨어진 위치로 이동합니다

즉, HTML 요소의 왼쪽면 창 중간에 정렬됩니다 그리고 이것은 크기의 변화가 아니라 위치의 변화입니다 우리는 HTML 엘리먼트의 위치를 ​​바꾸는 것을 허용하고있다 그것을 화면의 왼쪽에서 화면의 중앙으로 이동 이 이동 애니메이션을 적용하면됩니다 그리고 animate0이하는 일과 매우 비슷합니다

크기를 바꾸는 것 외에는 제외하고, 우리는이 상대적으로 위치 된 요소의 위치를 ​​바꾸지 않을 것입니다 따라서 animate1을 열면 결과는 다음과 같습니다 몇 초 동안 그 환영 동작 왼쪽에서 중앙으로 우리는 그것을 다시 볼 것입니다 왼쪽에서부터 화면의 왼쪽 가장자리에서 50 % 떨어져 있습니다

그래서 이것이 우리가이 어휘들을 구축 할 수있게 해줍니다 HTML 요소를 애니메이션으로 만들고 한 곳에서 다른 곳으로 옮깁니다 그러나 여기서 도움이되는 것은 단지 시작점과 끝점을 정의 할뿐만 아니라 중간 지점도 정의합니다 그 애니메이션에서 이제 우리는 어떤 곳에서 시작하고, 다른 곳으로 옮기고, 그 다음 다른 곳으로 이동하십시오

그래서 뭔가를 다른 것으로 옮기는 것을 말하는 것 외에도, 우리는 또한 어떤 비율로 정의 할 수있는 능력을 가지고 있습니다 우리는 애니메이션을 통해 진행해야합니다 특정 CSS 속성을 적용하고 있습니까? 그럼 그게 어떻게 생겼어? animate2html을 살펴 보겠습니다 그리고이 이동 키 프레임에서 우리는 뭔가를하고 있습니다 뭔가 다른 것보다는 약간 다른 것, 우리는 애니메이션을 통해 0 %의 속도로 말하고 있습니다

우리는 왼쪽 가장자리에서 0 %가되어야합니다 애니메이션의 50 %에서 우리는 애니메이션을 통해 왼쪽 가장자리에서 50 % 떨어져 있어야합니다 그리고 애니메이션을 통해 100 % 진행될 때, 우리가 그걸 끝내면, 우리는 왼쪽 가장자리에서 0 % 떨어져 있어야합니다 이 같은 움직임 애니메이션을 적용 해보면 어떻게 될 것인가? 우리가 전에 가지고 있었던 표제에? 이 애니메이션의 일부로이 세 가지 키 프레임을 기반으로합니다 청중 : [INAUDIBLE] 중간 [INAUDIBLE] BRIAN YU : 가운데로 가서 돌아와

중간에 50 %가됩니다 그것이 끝나면 다시 올 것이다 그래서 animate2html을 열면 중간 중간에갑니다 그리고 다시 돌아온다

우수한 모든 것이 좋고 좋았지 만, 우리가 지금까지 알아 차린 것 우리가 완전히 통제 할 수 없다는 것입니다 이 애니메이션이 끝날 때까지 우리는 그 페이지를 엽니 다 CSS 속성이 이미 있기 때문에 웹 페이지가 시작될 때 할당 된 애니메이션을 자동으로 시작하기 만하면됩니다 중간에 오신 것을 환영합니다

그러나 어쩌면 우리는 특정 시점에서 애니메이션이 발생하기를 원할 것입니다 우리가 실행할 애니메이션이 아닐 것이라고 결정할 때, 애니메이션이 실행되어야합니다 그리고 우리가 그것을 실행하고 싶지 않을 때, 실행해서는 안됩니다 그렇게하기 위해 우리는 단지 CSS 이상을 필요로 할 것입니다 우리는 CSS를 사용하여 애니메이션을 지연시킬 수 있습니다

페이지가로드 된 후 3 초가 될 때까지 애니메이션을 시작하지 말고, 하지만 그건 우리가 원하는 것이 아닙니다 우리가 원하는 것은 프로그래밍 방식으로 제어 할 수있는 능력입니다 애니메이션이 시작되고 중지 될 때 그렇게하려면 JavaScript와 같은 프로그래밍 언어가 필요합니다 그리고이 애니메이션들이 가지고있는 CSS 속성 하나가 애니메이션 재생 상태라는 속성이있다 이 속성은 일시 중지되거나 실행 중일 수 있습니다

따라서 CSS 애니메이션의 재생 상태가 일시 중지 된 경우, 아무것도 일어나지 않을 것입니다 그러나 JavaScript를 사용하여 일시 중지 대신 실행으로 변경하면 이제 애니메이션이 실행 중입니다 이제 animate3html을 살펴 보겠습니다 CSS는 여전히 동일합니다

왼쪽에서 가운데로 돌아갈이 애니메이션이 있습니다 다시 왼쪽으로 그리고 나서 각각에 애니메이션 이름이 있습니다 이동,이 모든 추가 정보 애니메이션 반복 횟수도 무한대입니다

그래서 animation-iteration-count는 CSS 속성입니다 애니메이션을 실행해야하는 횟수를 지정할 수 있습니다 그것은 2 번, 3 번, 4 번 실행해야합니다 무한한 것은 계속해서 뛰는 것을 의미합니다 그래서 센터로 가서 다시 센터로갑니다

그리고 다시 왼쪽으로, 반복적으로, 그리고 무한히 여기에 우리가 원하는 JavaScript가 있습니다 먼저이 h1 요소를 선택하겠습니다 animationPlayState를 일시 정지로 설정합니다 바로 박쥐에서 벗어나서, 처음 페이지를로드 할 때, 우리는 애니메이션을 일시 중지 할 것입니다

처음로드 할 때 실행하고 싶습니다 우리가 원하는 것은 버튼을 붙이고 싶지만 일어날 일입니다 유용하게 사용할 수 있습니다 그래서 우리는이 버튼을 가지고 있습니다 버튼을 클릭 할 때 우리는 말할 것입니다

현재 PlayState 이 제목의 상태가 일시 중지 된 후 계속 변경됩니다 그것을 실행하는 PlayState 그렇지 않으면 PlayState를 다시 일시 중지로 변경하십시오 그래서 애니메이션이 일시 중지 된 경우입니다 같이 시작하는 것입니다

버튼을 클릭하면 일시 중지에서 달리기로 바뀝니다 실행중인 경우 그리고 버튼을 클릭하면 실행중인 상태에서 일시 중지 상태로 변경됩니다 여기에있는 몸에는 버튼을 클릭하면됩니다 여기를 클릭하십시오

그리고 환영하는 표제 그래서 ue3html을 열면 이제 우리는 단지 환영을 볼 수있는 능력을 가지고 있습니다 지금은 아무 것도하지 않습니다

해당 playState가 일시 중지되었습니다 버튼을 클릭하면 playState가 실행 상태로 변경됩니다 그리고 지금 환영은 중간 사이에서 앞뒤로 튀어 오를 것입니다 페이지의 왼쪽과 페이지의 왼쪽 여기를 클릭하면 이제 애니메이션이 일시 중지되었습니다

이제 일시 중지되었습니다 그러나 나는 마음대로 시작하고 멈출 수 있습니다 클릭 할 때마다 해당 애니메이션을 시작하고 중지 할 수 있습니다 이제 JavaScript를 사용하여 프로그래밍 방식으로 제어 할 수있게되었습니다 애니메이션이 끝나면 끝납니다

그리고 이것은 재미 있습니다 하지만 이제 실제로 사용자 인터페이스에 도움이 될만한 경우를 생각해 봅시다 이 애니메이션의 일부를 만들 수 있습니다 그리고 당신이 알아챈 한 가지는 우리가 휴식 이전에 게시물의 무한 스크롤 목록을 보았습니다 이 애플리케이션을 실행했을 때 우리는 무한한 게시물 목록을 보았습니다

그리고 지금 당장 20 명 밖에 없습니다 하지만 내가 게시물을 숨기려면 – 게시물 번호 2를 숨기면 포스트 2가 사라집니다 그리고 지금 나는 포스트 1을 가지고있다 플러스 3으로 곧장 뛰어 올까요? 그때 인터페이스 경험을 사용하는 것에 대해 이상적이었던 것은 무엇입니까? 이견있는 사람? 관객 : 게시물이 사라지는 것을 실제로 보지 못했습니다

BRIAN YU : 네, 포스트가 사라지는 것을 실제로 보지 못했습니다 특히 모든 게시물이 같은 길이이기 때문에, 그리고 그들은 모두 같은 크기입니다 나는 포스트를 숨길 수 있습니다 왜냐하면 당신은 정말로 주목하기 위해주의를 기울일 필요가 있기 때문입니다 플러스 3에서 포스트 5로 점프

따라서 애니메이션이 실제로 재생 될 수있는 경우입니다 실제로 뭔가를 움직일 수 있다면 사용자 인터페이스를 도와주세요 게시물이 가고 있음을 의미합니다 어쨌든 더 즐거운 사용자 경험을 제공 할 것입니다 누구든지 페이지를보고 있습니다

이제 post3을 살펴보고 indexhtml을 살펴 보겠습니다 그리고 당신이 여기에서 알아 차 렸던 것은 우리가 여기에 CSS 숨기기라는 애니메이션을 추가하려고합니다 불투명도 1에서 불투명도 0으로 이동합니다 불투명도는 무언가가 얼마나 투명한지에 대한 척도 일뿐입니다

불투명도 1은 완전히 볼 수 있음을 의미합니다 불투명도 0은 완전히 투명 함을 의미합니다 당신은 전혀 그것을 볼 수 없습니다 따라서이 숨기기 애니메이션을 우리 포스트에 적용하면 모든 우리 포스트에 학급 게시 할 예정입니다 그리고 이것이 애니메이션을 가질 것이라고 말합니다

named는 2 초의 애니메이션 지속 기간을 숨 깁니다 그것을 숨기기 위해 2 초가 걸립니다 앞으로 나아갈 것입니다 투명하게 보이므로 투명하게 유지됩니다 그리고 처음에는 장소 상태가 시작될 예정이므로 일시 중지되었습니다

그것이 실행되고 싶지 않아요 그렇지 않으면 모든 게시물이 바로 사라집니다 언제 이것이 실제로 일어나는가? 숨기기 버튼을 클릭하면 숨기기 버튼을 눌렀을 때의 논리를 적용하는 방식이 조금 다릅니다 클릭하지만 기본적으로 나는 무엇이든지 클릭했을 때 말하고있다 클릭 한 요소를 클릭하여 클릭하십시오

그리고 만약 그 요소가 클래스 이름 hide를 가지고 있다면, 우리는 클릭하고 있습니다 숨기기 버튼에 그런 다음 Hide 버튼 부모 요소를 가져와야합니다 즉, 게시물 자체가 animationPlayState를 실행되도록 변경합니다 이제 애니메이션이 실행되기를 원합니다

이 애니메이션을 숨 깁니다 이제는 이러한 eventListeners를 추가 할 수 있습니다 그래서 우리는 말할 수 있습니다 좋습니다이 게시물 전체에 대해, animationEnd라고하는 eventListener에서 – 다른 말로하면, 애니메이션이 끝나면이 함수를 실행합니다

상위 요소 만 제거합니다 다시 말하면,이 모든 작업은 숨기기 단추가 클릭하면 우리는 Hide 버튼의 parentElement를 얻습니다 -이 전체 게시물 – 우리는이 숨어있는 애니메이션을 실행하기 시작합니다 애니메이션이 실행 완료되면, 그 물건이 완전히 투명 할 때, 이제 요소를 모두 제거합니다 그래서 결과는 제가 플러스 3에 들어가서 실행하면됩니다 이제 모든 게시물을 볼 수 있습니다

예를 들어 2 번 게시물을 숨기려고하면 2 초 동안 투명 해지고 이제는 게시물이 사라졌습니다 따라서 게시물의 투명도를 변경하는 애니메이션이 있습니다 그것은 그 게시물이 사라지고 있다는 것을 분명하게합니다 나는이 사용자 경험을 더 좋게 만드는 방법에 대한 또 하나의 생각을 가지고있었습니다 우리가 어떻게이 문제를 개선 할 수 있을지에 대한 의견이 있으십니까? 훨씬 더 부드럽게 만드시겠습니까? 그래, 우리가 그 아이디어에 익숙하다면 좋을거야

그 일은 일종의 미끄러짐으로 자리 잡을 것입니다 지금 바로 posts6의 Hide 버튼을 클릭하면 사라집니다 그리고 요소가 제거 되 자마자 모든 것이 튀어 나옵니다 그런 일이 일어나는 이유는 우리는 요소의 불투명도를 변경합니다 요소는 여전히 존재합니다

이제 막 투명 해졌습니다 그리고 우리가 요소를 제거하자마자, 이제 모든 것이 범프처럼됩니다 그 자리를 채우기 위해 그래서 우리는 일이 일종의 미끄러 져 움직인다는 생각을 결코 얻지 못했습니다 자 이제 좀 더 시도해 보도록하겠습니다

포스트 4, indexhtml을 살펴봄으로써 정교한 애니메이션 그리고 이건 좀 더 복잡해, 그러나 우리는 그것을 천천히 걸을 것입니다 게시물을 숨기는 아이디어를 시뮬레이션하는 방식입니다 게시물의 높이를 줄이는 것입니다

그래서 우리가 높이 0의 게시물을 얻을 수 있다면 – 높이가 없어, 텍스트가 어떤 높이도 가지지 않고, 패딩이 없도록해야한다 또는 포스트 주변의 간격으로 효과적으로 이 게시물에는 더 이상 높이가 없다는 것을 의미합니다 그리고 그것은 제자리에 미끄러지는 아이디어를 시뮬레이션합니다 그리고 0 %에서,이 애니메이션이 시작되면, 우리는 완전히 불투명 해지기 시작할 것이고이 모든 높이 정보 최대 높이가 100 %가 될 것입니다 선 높이가 100 %입니다

CSS를 나중에 보았다면, 우리는 패딩 20 픽셀과 10 픽셀의 마진을 가지고 있습니다 그래서 그 패딩과 마진은 여전히 ​​거기에 있습니다 애니메이션의 75 % – 애니메이션의 처음 75 % 우리는 단지 투명성 효과를 낼 것입니다 우리는 게시물이 사라 지도록 할 것입니다 그리고 결과는 모든 것이 이전과 동일하다는 것입니다

하지만 불투명도는 0입니다 이제 게시물은 완전히 투명합니다 그리고 이제 100 % 진행될 때 불투명도는 여전히 0입니다 여전히 완전히 투명합니다 그러나 이제이 요소의 높이는 0입니다

라인 높이가 0입니다 패딩이없고 여백도 없습니다 그리고이 애니메이션의 마지막 25 % 동안, 우리는 단지이 투명한 게시판을 가져갈 것입니다 더 적은 공간 그래서 높이가 줄어들 것입니다

주위의 모든 간격이 줄어들 것입니다 그리고 그것은 궁극적으로 우리에게 사물의 효과를 줄 것입니다 제자리에 미끄러 져 그리고 이제 우리가 계속해서 게시물 4에 들어가서 미안하다면 실행하십시오 페이지를 엽니 다

모든 게시물을로드합니다 이제 숨기기를 클릭하면 먼저 사라집니다 높이가 줄어들고 포스트가 제자리로 들어갑니다 다시 숨기기를 클릭하십시오 처음 75 %는 줄어들고, 그 다음에는 위로 올라갑니다

그리고 슬라이딩은 높이가 줄어들 기 때문에 발생합니다 그리고 결국, 그 게시물은 완전히 사라집니다 CSS 애니메이션을 사용하여 더 즐거운 사용자를 만들 수있었습니다 무슨 일이 일어나는지 분명히하는 경험 – 페이드 아웃을 보여줌으로써, 미끄러 져 올라가는 것을 보여줌으로써 그리고 이것들은 가능한 실용적인 어플리케이션의 일부일뿐입니다 웹 사이트를보다 동적으로 만들기 위해 CSS 애니메이션을 사용하는 방법 재미 있고, 매력적이며, 누구에게나 매력적입니다

지금까지 어떤 것이 효과가 있었는지에 관한 질문이 있습니까? 네? 청중 : CSS [INAUDIBLE]에 그렇게 내장되어 있습니까 ?? BRIAN YU : 예, 최신 CSS 버전입니다 요즘의 모든 최신 브라우저는 이러한 키 프레임 애니메이션을 이해할 수 있습니다 그들을 일하게하십시오 좋은 질문입니다 OK, CSS 애니메이션이었습니다

애니메이션을 만드는 데는 여러 가지 다른 방법이 있습니다 우리는 지금 그러한 예를 하나씩 살펴볼 것입니다 이것이 svgs 또는 Scalable Vector Graphics의 아이디어입니다 그게 우리가 정말로 무엇이든 그릴 수있게 해줄거야 우리는 페이지의 캔버스 위에 놓기를 원합니다

지금까지 우리가 페이지에 무엇인가 넣고 싶을 때, 우리는 HTML 요소를 만들 수있었습니다 그냥 직사각형 세그먼트 또는 단추 또는 텍스트 같은 divs, 예를 들면 하지만 어쩌면 우리는 임의의 모양을 얻을 수 있기를 원합니다 우리가 원하는 페이지로 따라서이를 수행하기 위해 circle0

html을 살펴 보겠습니다 이 요소는이 svg 요소를 정의 할 매우 간단한 HTML 페이지입니다 이 벡터 그래픽 요소 – 여기서 벡터 그래픽은 그래픽이 될 것입니다 그것은 선과 각도의 관점에서 정의됩니다 프로그래밍 방식으로 정의 할 수있는 모양입니다

그리고이 SVG의 내부에, 그리고 저는이 벡터를 말하고 있습니다 그래픽은 800 픽셀의 높이를 가지게 될 것입니다 나는 서클 요소입니다 그래서 이것은 단지 벡터 그래픽 요소 중 하나입니다 각 HTML이 이해하고 지원합니다

이 원의 중심 x 좌표는 200이고, 중심 y 좌표 200, 반경 50, CSS 스타일링도 적용 할 수 있습니다 우리는 그저 파란색의 CSS를 채워 넣을 수 있습니다 그래서이 svg 요소를 사용하여 그래픽을 만들 수 있습니다 이 경우, 매우 간단한 그래픽 – 그냥 원 따라서 circle0

html을 열면 페이지에 무엇이 표시됩니까? 200 픽셀 떨어져있는이 파란색 원입니다 그리고 거기에 있습니다 그것은 반경이 50입니다 파란색으로 표시됩니다 그래서 현재 웹 브라우저에서이 코드 만 사용하고 있습니다

이해할 수 있습니다 그들은 svg를보고, 정의 된 모양과 선을 보는 방법을 알고 있습니다 svg 요소에 의해 작성하고 그것을 채 웁니다 하지만 우리가하고 싶은 일은 조금 더 통제력이 있습니다 여기에서 HTML 요소를 정의 할 수 있습니다

그러나 프로그래밍 방식으로 원을 만들 수 있다면 좋을 것입니다 우리가 28 개의 다른 원을 만든 for 루프에서 원한다면, 예를 들어 우리도 그렇게 할 수 있습니다 또는 애니메이션이나 전환 효과를 적용하려는 경우, JavaScript를 사용하여이를 제어 할 수 있습니다 그래서 우리는 그것의 예를 보게 될 것입니다 그래서 circle1

indexhtml은 자바 스크립트를 사용하여 프로그래밍 방식으로 만들 수 있습니다

우리가 전에 본 같은 원 그렇게하기 위해 우리는 D3이라는 라이브러리를 사용할 것입니다 D3은 매우 인기있는 JavaScript 라이브러리입니다 특히 데이터 시각화에 유용합니다 그래프와 차트 및 다른 유형을 만드는 것이 좋습니다

대화 형 그래픽으로 흥미롭고 멋지게 보입니다 그것은 많은 기능을 가지고 있습니다 우리는 이러한 기능 대부분을 실제로 보지 않을 것입니다 하지만 우리는 D3을 사용하기로했습니다 svg 요소를 만들 수 있습니다

그래픽을 만들고 그래픽을 움직일 수있게되면서, 이것은 D3가 일반적으로 사용되는 것 중 하나입니다 그리고 지금은 시체에서 svg 요소를 정의했습니다 그것의 내부 자바 스크립트 내부에 우리가 가지고있는 것은 나는이 변수 svg를 만들고있다 D3

select는 작업 할 HTML 요소에 대한 액세스 권한을 얻기위한 D3의 방법입니다 D3 문서를 읽어 보면 알 수 있습니다 온라인으로 사용할 수 있습니다 그리고 저는 svg가 가지고있는 것을 선택합니다 그것은 여기에있는 것입니다

그리고 이것이 저의 svg 요소입니다이 HTML 요소는 여기에 있습니다 이제 특수 D3 함수를 사용할 수 있습니다 말하고, svgappend, 내 새로운 벡터 그래픽 800 픽셀 캔버스에 새로운 것을 추가하십시오

여기에 서클을 추가하십시오 이전처럼 특정 속성을 지정할 수 있습니다 그 x 좌표를 200, y 좌표를 200, 반경을 90, 이번에는 녹색으로 채우십시오 그래서 이것은 내가 같은 것을 모두 할 수있게 해준다 전에는 JavaScript로 프로그래밍했지만 그리고 이것은 약간의 융통성과 약간의 통제력, 반경을 임의의 숫자로 지정하려면 그 수학 함수를 사용할 수 있습니다

전에 난수를 생성하기 위해 사용 매번 무작위 반경을 부여하십시오 그래서 저는 이것을 좀 더 정밀하게 보입니다 그래서 circle1html을 열면 여기에 큰 녹색 원이 생깁니다 그리고 제가 덧붙일 수있는 모든 종류의 것들이 있습니다

서클 외에도 직사각형, 그래서 사각형을 추가 할 수 있습니다 예를 들어, x와 y 좌표를주고, 너비와 높이를 준다 그 결과, rectanglehtml을 열면, 너는 큰 직사각형을 얻는다 당신이 만들 수있는 모든 다른 것들에 대해 걱정할 필요가 없습니다

타원을 만들 수 있습니다 정의한 임의의 모양을 만들 수 있습니다 서로 다른 여러 점들이 있습니다 그러나 여기서 아이디어는 프로그래밍 방식으로, 어떤 일을 할 수있는 그래픽 요소를 만들 수 있습니다 그리고 우리는 그러한 것들이 어떻게 작동하는지에 대한 예를 보게 될 것입니다

그래서 우리는 이미지를 만들 수있었습니다 서클, 또는 직사각형, 또는 다른 형상 일 수있다 우리가 JavaScript를 사용하고 D3을 사용하여 할 수있는 일은, 특히, 그 것들을 움직이게하는 것입니다 움직이게하고, 그들로 하여금 일하게하십시오 그리고 circle2

html을 살펴 봅시다 그것은 우리가 이전에 가진 것과 매우 비슷하게 될 것입니다 그래서 우리는 우리의 svg =를 정의합니다 그런 다음이 svg 요소에 원을 추가합니다 x와 y 좌표를 200과 200, 반경을 50, 파란색으로 채우고 그 동그라미를 c라는 변수 안에 저장하십시오

이제 D3에서 우리가 할 수있는 것은 전환을 적용하는 것입니다 우리가 이러한 요소들을 움직일 수있게 해주는 이러한 svg 요소들에, 우리가 그들로 하여금 어떤 식 으로든 그들의 속성을 바꾸도록 허용하십시오 그래서 전환 (ctransition) – 원으로의 전환을 적용하고 싶습니다 지속 기간에이 전환이 얼마나 오래 지속되어야합니까? 이것은 1 초이어야합니다

그리고이 모든 반복 된 선들은 각각 점으로 시작합니다 그들은 모두 하나의 선이 될 수 있습니다 그러나 D3에서는 종종 일반적인 패러다임을 보게됩니다 이러한 반복 호출을 다른 회선으로 한 번에 한 줄씩 지우는 것이 좋습니다 각 단계마다 무슨 일이 일어나는지

그래서이 전환 또는이 애니메이션은 1 초 동안 지속될 것입니다 1,000 밀리 초 그리고 그것에 대해 무엇이 바뀌어야합니까? 이제 x 좌표를 200 대신 500으로 변경해 보겠습니다 y 좌표를 몇 백이 아닌 500으로 변경하십시오 채우기 색을 파란색 대신 빨간색으로 변경하십시오

그래서 우리는 동그라미를 움직일 것이고 또한 스타일의 변화를 할 것입니다 채우기 색 이제 circle2를 열면 파란색 원이 보입니다 화면의 반대쪽으로 이동했습니다 색상이 파란색에서 빨간색으로 바뀌 었습니다

그래서 제가 만들 수있는 애니메이션이었습니다 그리고 그것은 바로 일어났습니다 내가 페이지를 열 자마자 일어났다 그러나 애니메이션을 지연시키는 다른 방법도 있습니다 그리고 나는 당신에게 이것에 대한 맛을 전할 것입니다

모든 특정 구문에 대해 걱정할 필요가 없습니다 그러나이 애니메이션으로 가능한 것이 무엇인지 감을주기 위해, 우리는 우리가 어디에서 갈 수 있는지를 볼 것입니다 이제 circle3html을 살펴 보겠습니다 그래서 circle3

html에서 우리는 시작하려고합니다 우리의 svg 요소에 원을 추가하여 x 및 y 좌표를 지정하고, 반경 50을주고, 이전과 똑같이 파란색으로 채 웁니다 c라는 변수의 내부를 모두 저장합니다 그런 다음 여기에서 전환을 적용 할 것입니다 1 초 동안 지속될 것입니다

전환하는 동안 얼마나 오래 기다려야합니까? 그래서 여기까지 나중에 전환을 연기하는 한 가지 방법이 있습니다 지연을 1 초 정도 지연 한 다음 전환을 실행할 수 있습니다 그리고 그 변화는 단지 x 좌표를 변화시킬 것입니다 이것은 x 좌표 200에서 x 좌표 500까지 오른쪽으로 이동합니다 그리고 HTML 페이지에서 픽셀을 탐색하는 경우 – 00, 원점은 HTML 페이지의 왼쪽 위 모서리입니다

전환이 발생할 수도 있습니다 예를 들어 무언가를 클릭하면, onclick 유형 이벤트 핸들러와 같습니다 그리고 D3에서 그렇게 쓰는 방법은 – 그리고 다시, 이것은 당신이 찾을 수있는 모든 구문입니다 D3의 문서에, 당신에게 그것을위한 맛을 줄 것이다 – 클릭하면 말됩니다 – 다른 말로하면,이 버튼을 클릭하면 – 이 기능을 실행하십시오 d3select 이것은 클릭 한 것을 가져 오기위한 특별한 D3 구문입니다

우리는 전환을 적용 할 것입니다 그 전환은 30 초 동안 지속될 것입니다 그리고 그 변화에서 일어날 일은, 우리는 원의 채우기 색을 빨간색으로 변경하려고합니다 따라서 circle3html을 열면 가장 먼저 일어나는 일은 1 초 후입니다

파란색 원이 x 좌표 200에서 x 좌표 500으로 이동합니다 그리고 나서 파란색 원을 클릭하면 3 초 동안, 그것의 색깔을 파란색에서 빨간색으로 바꾼다 나는이 이벤트 핸들러를 추가하여 어떤 방식 으로든 그것을 조작 할 수있게했다 그래서 우리는 잠재적으로 사용자 인터페이스를 생성하기 위해 이것을 어떻게 사용할 수 있을까요? 우리는 실제로 클릭하고 상호 작용할 수 있습니까? 음, stoplighthtml을 살펴 보겠습니다

stoplighthtml은 그것의 몸 안에있을 것입니다 여기에 포함 된 것은이 svg 요소입니다 흥미로운 것들은 모두 JavaScript에서 발생합니다 – D3에서 발생합니다 그래서 우리는 먼저 모든 것이 들어갈 용기가있는 svg 컨테이너를 얻습니다

먼저 직사각형을 추가 할 것입니다 이 직사각형에는 x와 y 좌표가 있습니다 너비는 200이고 높이는 500입니다 그래서 그것은 그것이 넓은 것보다 키가 될 것입니다 그리고 우리는 그것을 검은 색으로 채울 것입니다

그래서 여기서 시도하려고하는 것은 무엇입니까? 그 교통 신호등 중 하나를 만들어야합니다 빨강, 초록, 황색 불이 켜지거나 꺼질 수 있습니다 그리고 우리는 이러한 벡터 그래픽을 사용하여 애니메이션을 만들 수 있는지 알아볼 것입니다 그래서 저는 red라는 변수를 정의하고, 빨간색 빛의 원을 나타냅니다 그래서 저는이 서재에 동그라미를 추가 할 것입니다

x와 y 좌표가 어디에서 그려지는지 알아 냈습니다 얼마나 커야 할까? 그리고 저는 그것을 회색으로 채워서 시작할 것입니다 그것은 시작하기 위해 채워지지 않을 것입니다 똑같은 것은 노란색과 초록색 버튼에 대해서도 마찬가지입니다 그것들은 방금 svg 컨테이너에 추가하는 서클이 될 것입니다

그들에는 x와 y 좌표가 있습니다 그들은 모두 반경이 75이고 모두 회색으로 채워질 것입니다 우선 첫째로 그런 다음 빨간색 버튼을 클릭하면 여기에 내가 무슨 일이 일어나게 될 것입니다 빨간색으로 채울 빨간색 스타일을 변경하십시오

빨간 원이 이제 빨간색으로 표시됩니다 그리고 다른 두 동그라미들 – 회색으로 채워야합니다 어쩌면 그들은 이미 회색이었을 것입니다 아마 그들은 그렇지 않았습니다 그러나 우리는 무엇을해도 회색으로 그 색을 바꿀 것입니다

마찬가지로 노란색 버튼의 경우 클릭하면, 노란색 버튼을 노란색으로 변경하고 다른 두 버튼을 회색으로 변경하십시오 녹색 원을 클릭하면 녹색 원이 녹색으로 바뀌고, 다른 두 개는 회색이어야합니다 그래서이 사각형과 원을 추가하는 자바 스크립트 코드 만 사용하면됩니다 클릭 이벤트에서 일어나는 일을 정의하고, 추가 작업 없이도 이제는 stoplighthtml을 열고 싶습니다

내가 얻는 것은 신호등이다 이것은 내가 만든 검은 사각형이었습니다 그런 다음 특정 x 및 y 좌표의 세 원을 추가했습니다 여기에서 개별 서클을 클릭하면 빨간색을 클릭합니다 빨간색 표시등이 켜집니다

나는 다음 빛을 클릭한다, 지금 노란 빛은 켜고, 나머지 두 개는 회색으로 변합니다 그리고 사용자 인터페이스와 같은 종류의 신호등을 만들 수있었습니다 뭔가를 클릭하면 색상이 바뀔 수 있습니다 클릭 만하면 이러한 이벤트를 조작 할 수 있습니다 이러한 개별 요소의 CSS 속성을 조작 할 수 있습니다

지금까지 우리가 이것을 어떻게 구축 할 수 있는지에 대한 질문이 있습니까? 그리고 이것은 많은 것들이 얼마나 많은 픽셀인지 알아내는 것입니다 큰 일이 얼마나 큰지 알아내는 것 그러나 이것은 사용자 인터페이스를 원한다면 일반적인 의미입니다 텍스트 필드에 입력하는 버튼과 슬라이더 및 사람들뿐 아니라, 당신은 그것을 추출하여 원하는 사용자 인터페이스를 구축 할 수 있습니다 직접 사용자 인터페이스에서 원하는 모양을 정의하고, 다양한 요소를 클릭 할 때 어떤 일이 발생해야합니까? 좋아

그럼 실제로 해보자 D3를 사용하는 일종의 재미있는 응용 프로그램, 우리 페이지에 선과 원을 추가하는 기능을 사용합니다 그래서 우리가 시도하고 할 일은 웹 페이지에서 캔버스를 그릴 수있는 응용 프로그램입니다 일종의 화이트 보드처럼, 우리는 내가 원하는 것을 그릴 수있는 웹 페이지를 갖게 될 것입니다 이제 draw0

html을 살펴 보겠습니다 그래서 draw0html에서 우리는이 svg 영역을 가지고 있습니다 그냥 벡터 그래픽이 저장 될 곳이 될 것입니다 그리고 스크립트 태그 안에는 우리가 계속 진행하고 있습니다

그래서 우리는 svg라는 변수를 가지고 있습니다 그것은 단지 전체 svg 컨테이너입니다 나는이 함수 draw_point를 가지고 있습니다 우리는 잠시 후에 다시 돌아올 것입니다 그러나 특히 이것을보십시오

맨 아래에,이 사건이 일어날 때마다, 마우스 이동시 svg – 즉, 언제든지 마우스가 svg 캔버스 위로 이동하면 draw_point 함수를 실행하려고합니다 그러면 draw_point 함수는 어떻게됩니까? 글쎄, 내가해야 할 일은 알아내는거야 현재 마우스가 있고 D3가 발생합니다 이것을 얻을 수있는 쉬운 방법이 있습니다 우리는 d3

mouse를 수행합니다이 위치는 현재 위치를 얻습니다 svg 요소에있는 마우스의 그리고 우리는 그것을 좌표로 저장할 것입니다 x 위치와 y 위치가됩니다 이제 그림 그리기 아이디어를 시뮬레이션합니다

이제 마우스 위치를 알았으므로 검은 점을 찍어 보겠습니다 바로 거기에 마우스가 있습니다 그래서 우리는이 svg에 원을 더할 것입니다 좌표의 첫 번째 부분이 무엇이든 x 속성을 설정합니다 y 속성은 좌표의 y 부분이 될 것입니다

반지름은 5가 될 것입니다 우리는 그것을 검은 색으로 채울 것입니다 그래서 우리는 우리의 svg 요소를 취했습니다 누군가 그 위에 마우스를 움직일 때마다, 우리는 draw_point 함수를 실행 중입니다 draw_point 함수는 마우스는 반경이 5 픽셀 인 작은 원을 추가하고, 그것을 거기에 놓습니다

그래서 우리가 draw0html을 열어서 우리가 눈치 챌 것입니다 이 커서를 움직이면 마우스가 움직입니다 결과적으로 마우스를 움직일 때마다 바로 거기에 작은 점이 있습니다 그리고 마우스를 빨리 움직이면 마우스 이동 이벤트가 해고되기 때문에 일정한 간격마다 그리고 끊임없이 끊임없이 해고되는 것은 아니며, 이 개별 점들을 볼 수 있다는 것을 실제로 볼 수 있습니다

내가 그들을 더 빨리 움직이기 시작하면 이 마우스 이동 이벤트가 해고 될 때마다, 바로 거기에 점을 찍을 것입니다 그리고 그 결과 저는 일종의 능력을 가지고 있습니다 마우스를 움직여서 원하는 것을 칠하십시오 어떻게 그 일을 할 수 있었는지에 대한 질문? 좋아, 이거 좋다

이 점진적 개선을 시도해 보겠습니다 어떤 코드를 변경해야하는지, 어떤 이벤트를 우리는 그것을 더 좋게 만들기 위해 변화시켜야합니다 즉시 명백한 한 가지는 내가 그림을 그릴 수있는 방법이 없다는 것입니다 그냥 마우스를 움직일 뿐이에요 나는 아무것도 클릭하지 않는다

그러나 마우스가 SVG 컨테이너 위로 움직일 때마다, 바로 그곳에 그림이 그려져 있습니다 그래서 내가하고 싶은 것은 그것을 클릭하고 드래그 할 필요가 있도록 만드는 것입니다 실제로 선을 그 으려면 클릭하지 않으면 아무 것도하지 않을 것입니다 직관적으로나 본능적으로 어떤 생각을하면 클릭하고 잡고있을 때 드로잉 만하는 아이디어가 필요합니다 항상 반대가 아닌가? 이 마우스 이동 이벤트가 있음을 알고 있지만 이미 사용하고 있습니다

네? 관객 : [INAUDIBLE] BRIAN YU : 네, 그래서 우리는 사건을 찾을 수 있습니다 마우스 또는 트랙 패드 또는 마우스를 클릭 할 때 우리가 클릭하여 흥미로운 것을 할 때 그럼 우리가 할 수있는 일의 예를 봅시다 그래서 여기에 우리는 아주 간단한 일이 있습니다 이것은 이전의 예와 유사하지만, 단, drawing이라는 부울 변수를 추가했습니다

우리가 실제로해야하는지 여부를 추적 할 것입니다 바로 지금 당장 그리고 기본적으로 드로잉은 거짓이 될 것입니다 이 draw_point 함수의 내부에서 드로잉이 false 인 경우 – 다른 말로하면, 우리가 지금 당장은 안된다면 – 이 기능에서 돌아와 아무것도하지 마라 하지만 그렇지 않으면 우리가 그림을 그려야한다면 똑같은 일을해야합니다

우리는 전에했다 가서 바로 그 지점을 내리십시오 그런 다음 아래쪽에이 이벤트 처리기가 있습니다 마우스가 움직일 때마다 우리는 여전히 그 draw_point 함수를 호출 할 것입니다 그러나 이제 우리는 드로잉 변수가 true 값 또는 false 값에 따라 올바른 값으로 설정됩니다

현재 무슨 일이 일어나고 있는지 그리고 제가 말할 수있는 것은 mousedown 이벤트입니다 – 제가 클릭 할 때 – 그리기 변수를 true로 설정하십시오 그리고 마우스를 클릭하면 – 클릭을 마쳤을 때 – 드로잉 변수를 false로 설정하십시오 그렇게하면, 클릭하면 그림이 사실입니다 이제 마우스를 움직이면 점을 그릴 때 그리기가 사실입니다

그래서 그것은 선을 그릴 것입니다 그러나 마우스가 올라 오자마자 그리기가 이제 거짓으로 설정됩니다 그래서 마우스를 움직일지라도, draw_point 함수가 호출되고, 나는 실제로 내 svg 캔버스에 배치되는 점을 보지 않을거야 그래서 결과는 draw1html을 열면, 이제 캔버스 위로 마우스를 움직일 수 있고 아무 일도 일어나지 않습니다

그러나 실제로 클릭하고 실제로 시작하기 전까지는 아닙니다 여기에이 선들이 그려지는 그림 그리기 그리고 다시 한번 마우스를 더 빨리 움직이면, 이 선들이 실제로 연결되어 있지 않다는 것을 알기 시작합니다 그리고 이상적이지 않습니다 그리고이 문제를 해결할 수있는 수준은 없습니다

우리는 실제로 마우스가 움직이는 빈도를 변경할 수 없기 때문에 이벤트가 시작되었습니다 마우스 이동 이벤트는 브라우저에 의해 시작되며, 그래서 우리는 실제로 그것을 제어 할 수 없습니다 그렇다면 우리가 경험할 수있는 훌륭한 경험적 방법은 무엇입니까? UI 관점에서이 문제를 해결하기 위해 사용할 수 있습니다 마우스를 빨리 움직이면 갑자기 매끄러운 연결과는 반대로 이러한 개별적인 점들을 모두 얻었습니까? 네? 청중 : 이전 포인트 저장 [INAUDIBLE] BRIAN YU : 예, 훌륭한 아이디어입니다 그래서 우리는 이전의 점을 저장하고 그 사이에 선을 그릴 수 있습니다

이것이 바로 우리가하려고하는 것입니다 우리는 서로 옆에있는 두 점을 가지고 있습니다 우리는 그들을 연결하려고 노력하고 있습니다 그들 사이에 간격이있을 가능성, 그냥 선으로 연결해 봅시다 그것은 완벽하지 않을 수도 있지만 적어도 일종의 더 나은 감각을 줄 것입니다

우리가 실제로이 캔버스에 그리는 것입니다 마지막 예제로 살펴 보겠습니다 draw2html에서 가장 정교한 응용 프로그램이 될 것입니다 D3와 JavaScript를 사용합니다

그리고 그것은 더 많은 선택권을 가질 것입니다 따라서이 HTML 페이지의 본문에는 제목이 있습니다 E-33a 추첨이라고 할 것입니다 그리고 나는 또한 이러한 선택 드롭 다운을 지금 가지고있다 나는 사용자 경험을 통해 좀 더 유연해질 수 있도록 할 것입니다

내가 그리고 싶은 색을 선택할 수있는 관점 그리고 예를 들어 브러시 스트로크의 두께를 얼마나 두껍게 할지를 결정합니다 그래서이 선택은 단지 색상 선택기라고 불릴 것입니다 모든 옵션이 있습니다 옵션 검정, 빨강, 파랑, 녹색 – 가능한 색상은 다음과 같습니다 네가 그릴 수있는 여기에는 두께 선택기라는 선택 드롭 다운이 있습니다

나는 다른 두께의 전체를 가지고있다 우리는 기본적으로 3의 두께를 선택하게 될 것입니다 하지만 두께 10까지는 무엇이든 선택할 수 있습니다 그리고 나는 Erase라고 불리는 버튼을 가지고있을 것이다 화면에있는 모든 것을 지우십시오

그래서 나는 사용자가 어떻게 할 것인지 선택하도록함으로써 더 많은 옵션을 제공하고있다 그들은 물건을 그리는 것에 대해 가고 싶다 이 코드를 작성하는 데 필요한 코드는 무엇입니까? 글쎄, 그것 모두는 draw2js 안에있을거야 별도의 자바 스크립트 파일로 분리했습니다

물건을 다른 곳에두기 위해서 우리의 HTML 파일이 조금 더 복잡해지기 시작했기 때문에, 일을 분리하여 보관하는 것이 종종 더 깨끗합니다 그럼 draw2js를 보겠습니다 DOM로드가 완료되면 이 부울 변수를 유지하려면 draw 밖으로 시작하는 것은 거짓 될 것입니다

이전과 같아요 지금 우리가 그릴 지 여부를 추적하고 있습니까? 아니면 마우스가 현재 다운 되었습니까? 우리는 두 개의 배열, 즉 점의 배열과 선의 배열을 추적합니다 왜냐하면 우리의 노선은 우리의 포인트를 하나로 연결하기 때문입니다 우리 둘 다 계속 추적해야합니다 우리가 나중에 모든 것을 지울 때, 우리는 모든 것을 없애기를 원합니다

그래서 우리는 우리가 만든 모든 것을 추적해야합니다 그리고 우리가 페이지를 렌더링 할 때 – 렌더링은 우리가 할 첫 번째 일입니다 우리는이 이벤트들을 추가 할 것입니다 그래서 마우스를 아래로 내릴 때마다 클릭 할 때마다 일어날 일이 있습니다 이 draw 변수를 true로 설정하십시오

왜냐하면 지금 나는 이것을 실제로 그리기를 원하기 때문입니다 내가 어느 좌표에 있는지 알아 낸 다음이 draw_point 함수를 호출하십시오 그리고 draw_point는 지난 번과 달리 3 가지 인자를 취할 것입니다 첫 번째 인수는 x 좌표가 될 것입니다 여기서 실제로는 점을 그리시오

두 번째 인수는 어디의 y 좌표가 될 것입니다 포인트를 그리기 그리고 세 번째 인수는 다음을 나타내는 부울 변수가됩니다 이전 점과 연결하는 선을 그려야하는지 여부 그래서 마우스가 처음으로 내려 가면, 마우스가 떨어지는 지점을 그립니다 하지만 이전 지점에 연결하고 싶지 않습니다 이것이 내가 그리는 첫 번째 요점이기 때문입니다

연결하는 데는 아무 것도 없습니다 한편 마우스가 올라 오면 우리는 draw 변수를 false로 설정합니다 그리고 마우스가 움직일 때 우리가 그림을 그려 내지 않으면 돌아 오지 – 그냥 그만 나가십시오 좌표를 가져온 다음 점을 그립니다 x 좌표 및 y 좌표에서

하지만이 세 번째 변수를 true로 설정하면 나는이 새로운 지점을 실제로 연결하고자 함을 의미한다 이전에 제안 된 것처럼 일종의 선으로 이전 지점으로 지우기 버튼을 클릭하면 발생합니다 우리는 모든 포인트를 반복하고 각 포인트를 제거 할 것입니다 모든 줄을 반복하고 각 줄을 제거하십시오 그리고 빈 배열로 점과 선을 모두 설정하십시오

그리고 마지막으로 어떻게 실제로 점을 그리는가? 글쎄, 우리가하고 싶은 첫 번째 일은 우리가 사용하고자하는 색과 두께를 알아내는 것입니다 그래서 나는 색상 선택 도구의 가치에 도달 할 수 있습니다 color라는 변수 안에 저장하십시오 두께 선택기 값으로 저장하고 저장하십시오 두께라는 변수의 내부

그것들은 우리가 이전에 사용했던 두 가지 드롭 다운이었습니다 그리고 draw_point는 x, y, connect는 부울 값입니다 여기에 연결할 필요가 있습니다 이전 지점으로 또는 아닙니다? 그리고 이것을 우리가 이전 지점에 연결해야한다면, 가장 최근의 요점을 알아낼 것입니다 우리가 가지고있는 포인트 배열의 마지막 요소 일뿐입니다

우리는 그 점들을 연결시킬 선을 만들 것입니다 그리고이 선의 시작 x와 y 좌표 마지막 점의 x와 y 좌표가 될 것입니다 선은 새로운 지점의 x 및 y 좌표로 끝날 것입니다 그리고 그 줄을 줄의 배열에 추가 할 것입니다 그런 다음 마침내 여기에 사실을 추가 할 것입니다

그래서 우리는 원을 추가 할 것입니다 x와 y 센터가있을거야 이 특별한 두께와이 특별한 색을 갖게 될 것입니다 그 드롭 다운에서 사용자가 선택한 것이 었습니다 그리고 우리는 그것들을 우리의 배열에 추가 할 것입니다

뿐만 아니라 우리는 그들 모두를 추적 할 수 있습니다 그런 다음 우리가 실제로 모든 것을 유발하는 렌더링을 수행하는지 확인합니다 렌더링합니다 그리고 그 모든 결과 – 소스 코드 예제를 살펴볼 수 있습니다 코스 웹 사이트에 게시되었습니다

내가 draw2html을 열면 멋진 표제를 얻습니다 지금, 저는 검정색이고 두께는 3입니다 이 지우개 버튼이 있습니다 그리고 지금 내가 그림을 그리기 시작하면, 빨리 움직이더라도 그것은 여전히 ​​모든 것을 연결하려고합니다

그리고 내가 물건을 매우 빨리 움직이면, 실제로 이 개별 점을 연결하는 선이 있음을 확인하십시오 하지만 색상과 두께도 변경할 수 있습니다 그리고 그것으로 인해 물건들이 다른 색으로 칠해지기 때문에, 다른 두께 – 다시 변경되었습니다 마찬가지로 Erase 버튼을 누를 때마다, 모든 점, 모든 선, 그들 모두가 사라지게 만듭니다 그래서 저는 계속해서 그릴 수있는 신선한 캔버스가 남아 있습니다

그래서 모든 것은 svg의 벡터 그래픽을 사용하여 가능하게되었습니다 나는 포인트와 라인을 추가하고 이벤트에 반응하도록 할 수있다 사람들이 물건을 클릭하거나, 물건을 끌거나, 마우스 다운 이벤트, 마우스 업 이벤트 그러나이 모든 것이 궁극적으로 내가 그림을 그릴 때 꽤 기능적인 응용 프로그램 인 것처럼 보이게 만들겠습니까? 다른 색깔 및 다른 간격에있는 것이 그 중 어떤 것에 관한 질문입니까? 좋습니다

그런 종류의 자바 스크립트에 대한 결론을 내릴 수 있습니다 다음 주부터 우리는 다시 살펴볼 것입니다 백엔드에서 파이썬을 다시보고, 플라스크에서 멀어지면서 Django로 알려진 다른 웹 프레임 워크로 이동하면, 그것은 조금 더 강력합니다 우리는 그것이 할 수있는 것을 보게 될 것입니다 그러나 그것은 오늘을위한 프론트 엔드를위한 좋은 날이 있습니다

How To: Front Door TRIM Panel Removal – Mercedes Benz E Class C207

바로 지금 나는 Mercedes Benz E350 위에서이 문 패널 손질 조각을 바꿀 예정이다 C207 쿠페,이 트림이 금이 갔고 여기가 바로 벗겨 졌기 때문에

보시다시피 이것은 삼나무가 아니지만 플라스틱입니다 먼저이 플레이트를 제거하기 위해 3 개의 T15 Torx 나사를 제거합니다 다음으로 우리는 플라스틱 받침대를 사용하여 스피커를 끕니다 스피커를 들고 거울 위로 드레이프하십시오 그런 다음 여기에서 액세스 패널을 살펴 봅니다

여기에 자주색 커넥터와 파란색 커넥터가 있습니다 메르세데스 E350 이제 우리는이 플라스틱 종류의 금속 조각을 부드럽게 여기에서 들여다 봅니다 C207 쿠페로부터의 거기에 두 개의 나사 T25가 있고 여기에 또 하나의 T25가 있습니다

둘 다 나와야합니다 그런 다음이 작은 플라스틱 판을 바로 여기에서 들여다 봅니다 또 다른 T25 나사가 밑에 있습니다 네가 엉망으로 만들었을 때를 대비해 문 패널 바닥에서 조금씩 엿보는 다 그리고 일단 당신이 그들에게 몇 가지를 터뜨리면 모든 것이 아무 문제없이 벗어나기 시작할 것입니다

우리는 도어 패널을 들어 올린다 문 손잡이는 케이블로 연결되어 있으며 아래로 눌러 케이블을 분리합니다 케이블을 잡아 당겨서 홀더에서 제거하십시오 이것은 맨손으로 보이는 것입니다 그리고 이것은 벌거 벗은 문 패널이 보이는 것입니다

다음으로 플라스틱 끝을 자르기 위해 일부 집게발을 사용합니다 그런 다음 금속 조각을 사용하기 때문에 드라이버를 사용합니다 다듬기가 바로 시작되고 새로운 트림이 곧 다시 시작됩니다 금속 리테이너 클립을 재사용하십시오 그런 다음 소켓 세트를 잡아 당겨 내려 놓습니다

이제 우리는 뒤로 나아가고 있습니다 문 손잡이 케이블을 다시 끼 웁니다 그것을 넣으십시오 문 트림을 다시 끼 웁니다 그것을 꼭대기에 꼭 맞게 조심하십시오

스냅을 다시 끼워 넣으십시오 T25 나사를 다시 넣으십시오 덮개 판을 다시 켜십시오 우리의 금속 의사 플라스틱 트림을 다시 붙이는 것에 조심하십시오 메르세데스 – 벤츠 e350 바디 스타일 C-207에 바로 들어가야합니다

이제 케이블을 문 패널에 다시 연결합니다 우리 액세스 패널을 다시 닫아 그게 얼마나 멋진 지보세요 스피커를 다시 넣고 마지막으로 금속판을 붙입니다 그 새 트림이 얼마나 달콤한 지 보아라, 그 새로운 burl wood 트림

그리고 거기에 우리가 간다 메르세데스 벤츠 C207 E350 쿠페에 새 트림 조각 총 시간은 약 1 시간이 걸렸습니다 그렇게 촬영하는 것이 너무 나쁘지 않았습니다 이 직업은 아마도 약 30 분 밖에 걸리지 않을 것입니다

부품이 비쌌습니다 온라인으로 200 달러를 받았으므로 나쁘지 않았습니다 그것이 첫번째 장소에서 파산 한 것을 빨아 들인다 이 비디오가 유용하다면 구독 버튼을 누르십시오 10 만 명의 가입자를 확보하려고합니다

그래서 나는 정말로 당신의 도움에 감사하고 좋은 것을 가지고 있습니다 행운을 빕니다 제발 좋아하고 구독하십시오

HOWTO REMOVE FRONT BUMPER & HEADLIGHTS (AUDI A6)/아우디 A6범퍼 탈거 방법

후드를 엽니 다 범퍼 상단에서 나사를 제거합니다

휠을 잘 돌리면 휠에서 잘 움직일 수 있습니다 범퍼를 제자리에 고정시키고 휠 내부에서 모든 나사 / 볼트를 제거합니다 범퍼를 제거한 것은 이번이 처음입니다 우리는 또한 모든 나사 / 볼트가 어디에 있는지를 알려주는 설명서가 없었습니다 범퍼를 조금 당기면서 휠에서 모든 것을 제거했는지 확인하십시오

상단 플라스틱 조각을 제거합니다 그것은 스냅으로 제자리에 고정되어 있습니다 범퍼를 프레임에 고정시키는 볼트를 푸십시오 헤드 라이트를 고정시키고있는 보이는 볼트를 풀어 낸다 범퍼 아래에도 나사 클립이 있습니다

오른쪽으로 90도 회전하여 동전을 돌려서 빼냅니다 다른 휠의 나사 / 볼트를 잘 제거 할 수 있도록 휠을 반환하십시오 바퀴에서 범퍼를 잘 당기면 빠져 나옵니다 아직 안개가 부착되어 있다는 것을 기억하십시오 차 안쪽에 내려 놓으십시오

헤드 라이트를 제자리에 고정시키는 나사를 제거합니다 (40 초 동안 보았 듯이, 빛 아래에 숨겨진 다른 것이있다) 이제 헤드 라이트를 자유롭게 제거 할 수 있습니다 와이어를 분리하십시오