[5분영화] – 해롤드와 쿠마 [1/2]

한동안 못 먹어본 걸 먹고 싶어 좀 다른 거 말이야 "이거다"란 생각이 들만한 거 완벽한 걸 먹고 싶어 배가 고프세요? 그럼 화이트 캐슬에 오세요 슬라이더 스페셜을 주문하시면 버거 6개,감자튀김 하나, 음료를 299달러에 드립니다 이 버거가 지금 여러분 뱃속에 들어 있다고 생각해 보세요 감칠맛 나고 달콤한 음식을 원하지 않으세요? 먹고 싶어 뭘 망설이세요? 화이트 캐슬로 오세요 여러분이 갈망하시는 거예요 어떻게 가는지 알아? 몇 년 동안 가본 적이 없어 잘 들어

뉴 브런즈윅의 몰 바로 옆에 하나 있다니까 좋았어 나 너무 배고프다 난 버거 20개는 먹을 거야 난 버거 20개에 감자튀김 다섯 개 얹어서 먹어주지 이제 뉴워크 한복판에 들어섰어 저기 좀 봐 쟤네들 우리랑 좀 닮았는데 이런 세상에! 어서 여길 빠져나가자 어서

어서 밟어! 엿먹어! 잘 봐 거의 다 왔어 오 하느님 배고파 죽겠다 자 어서 와요 친구들 드라이브 인 주문 코너입니다 화이트 캐슬은 어떻게 된거죠? 뭐라구요? 여기 옛날에는 화이트 캐슬이 있었단 말이에요 어디 있는 거죠? 아무래도 나쁜 소식을 전해야겠군요 이 버거샥이 4년 전에 이 건물을 샀어요 세상에! 동네에 다른 화이트 캐슬 점포는 없나요? 없어요 젠장 어떻게 하지? 모르겠어 그냥 여기서 먹을래? 이봐! 체리힐에 가면 24시간 영업하는 화이트 캐슬이 있지 여기서 45분 거리야 네가 좋다면 거기 가는 게 좋을 것 같아 쿠마 나 지금 해야 할 일이 많다구 딩-동! 내가 좀 껴들어도 될까? 지난 3년 동안 버거샥에서 일한 사람으로서 내가 배운 게 하나 있다면 만약 당신들이 화이트 캐슬에 가길 원할 경우 여기 버거따윈 잊어버리란 거야 사실 화이트 캐슬 버거의 부드러움을 한번 생각해 봐 그 작고 살짝 익혀진 양파를 말이지 당신들 입안에서 향을 뿜으면서 녹아내릴 거야 한입 깨물때 마다 이놈의 가게를 때려 치워버리고 싶은 생각이 들지 그러니까 자네들은 생각 고쳐먹고 화이트 캐슬로 가야 해 넌 차안에서 일할 수 있잖아 좋아 그렇게 하자 좋았어! 잘 생각했어 잠깐 잠깐 어떤 일이 있어도 오늘 밤은 절대 그냥 넘기지 않기야 화이트 캐슬 버거로 배를 채울 때까진 말이야 어때? 좋아 지금 뭐하는 거야? 잠깐 소변보고 올께 서둘러! – 실례지만요, 저 – 뭐? 여쭤볼게 있어서요 – 왜 여기서 볼일을 보시는 거죠? – 뭐? 제 말은 왜 제 옆에서 볼일을 보시냐구요 다른 덤불을 찾아가셨어도 되잖아요 이 덤불이 오줌싸기 좋아 보여서 그러는 당신은 왜 여기에 싸는 거야? 제가 이걸 선택했을 땐 아무도 옆에 없었거든요 당신이 여기에 쌀 때는 다른 사람은 안 된다는 거야? – 아뇨 전 그냥 – 이게 당신꺼야? 이 덤불이랑 특별한 관계라도 있어? – 아뇨 제 생각엔 – 당신 밀림의 왕자야? – 뭐라구요? – 뭐? 당신 나무랑 하는 변태야? 이게 당신의 특별한 덤불이라도 돼? 신경 쓰지 마세요 전 오늘은 정말 다치고 싶지 않아요 이런 젠장! 어떻게 들어 온거지? 날 깨물었어! 광견병에 감였됐을 거야! 인마, 그 암세포 너구리 좀 치워! 창문을 열어! 맛좀 봐라! 내 스패어 타이어가 어디 갔지? 글쎄 모르지 – 여기요! 실례합니다! – 여기요! 이쪽이예요! 당신들 도움이 필요한가? 도와 주셔서 고맙습니다 저 사람 목에 있는 고름 덩어리 좀 봐 잘 봐 그중 하나가 터지려고 해 입 닥쳐, 바로 옆에 있는데 다 듣겠다! 체액 같은 게 나오고 있어 – 와 구역질 난다 ! – 입 다물어 딱 한 번만 봐봐 한 번만 보라니까 거봐 네가 지금까지 본 것 중에 젤 구역질나는 거지? 너 지금 귓속말로 얘기하면 이 사람이 못 들을 거라고 생각하는 거냐? 지금 몇십 센티 옆에 앉아 있는데 어떻게 그걸 못 듣겠어! 지금 다 듣고 있을 거라구 걱정하지 마 하나도 안 들릴 거야 귀가 귓밥으로 꽉 차 있잖아 자네들 얘기 다 들었어

Mercedes-Benz EQ Dinner | Tech Open Air 2018

변화는 긍정적 인 무엇인가입니다, 그것이 발달하기 때문에, 당신은 새로운 무언가를 창조 할 수 있고, 당신에게는 새로운 기회가 있습니다 지금까지 배운 모든 것 전혀 다른 것을 만드는 데 사용할 수 있습니다

충전 포인트를보기 시작한 처음 몇 번을 기억합니다 "충전 지점이야!" 그것은 흥미 롭습니다, 그것은 흥미 진진한 느낌, 우리가 함께 뭔가를 만들고있는 것 같아 우주 정거장에서 지구를 바라 볼 때 너는 국경을 보지 않는다 너는 다른 사람들을 보지 않는다 너는 하나의 행성을 본다

당신은 한 사람을 봅니다 나는 밀레니엄 세대와 포스트 밀레니엄 세대를 생각한다 기술과 소셜 미디어를 사용하고 있기 때문에 변화를 창조하고 진보를 창조한다 이러한 종류의 플랫폼을 통해 더 나은 삶을 창출하는 것뿐만 아니라 이미 좋은 삶을 살아가는 사람들을 위해 우리는 살 가치가있는 미래를 만들 수 있습니다 더 많은 사람들에게

기술을 통해? 그래, 내 말은, 기술은 항상 운전사 였어 더 나은 삶의 질 사실, 나는 내 아이들을 미래의 상태로두고 싶다 통신이 가능한 곳에, 사람들은 똑똑해지고, 균형이 있다는 것 모두를위한

벤츠, 신형 E클래스 쿠페 카브리올레 예상 렌더링..내년 출시【24/7 카】

벤츠, 신형 E클래스 쿠페 카브리올레 예상 렌더링내년 출시 자동차 렌더링 디자이너 테오필루스 친이 16일(현지 시각) 메르세데스-벤츠 E클래스 쿠페의 카브리올레 버전을 선보여 주목된다 최근 E-클래스 쿠페를 공개했던 메르세데스는 내년에 카브리올레 버전도 출시할 계획이다 카브리올레의 데뷔 시기는 2016년 제네바 모터쇼 정도로 예상된다 스포티한 외관의 E-클래스 쿠페는 기존 C-클래스나 S-클래스의 영향을 많이 받앗기 때문에, 컨버터블 버전 또한 이들 모델과 거의 동일한 모습을 지닐 것으로 보인다 테오필루스 친은 이번에 공개된 E-클래스에 기존 S-클래스 카브리올레의 외관을 적절하게 섞었다

E-클래스 쿠페는 차량 동력원으로 20리터 엔진이 장착되었으며, E200d 모델부터 E300, 그리고 E400까지 최대 194마력~333마력을 발휘한다 여기에는 9G-트로닉 9속 자동변속기가 동일하게 적용된다 메르세데스는 또한 카브리올레 모델 이후 인라인-6 동력의 E50이나 V8 엔진을 탑재한 E63과 같은 AMG 모델도 준비할 것으로 기대된다

비교시승 칼 빼든 렉서스 뉴 GS vs. BMW 528i·벤츠 E300..승자는?

<비교시승> 칼 빼든 렉서스 뉴 GS vs BMW 528i·벤츠 E300

승자는? 일본 도요타(Toyata)의 고급 브랜드인 렉서스(Lexus)가 칼을 빼들었다 상대는 프리미엄 브랜드인 BMW와 메르세데스-벤츠 렉서스는 지난 2001년 국내에 소개된 이후 2005년 ES의 인기를 발판으로 무려 3~4년간 국내 수입차 시장 점유율 1위를 기록한 브랜드이다 그런만큼 수비지향적인 마케팅을 펼쳐온 렉서스가 최근 미들 럭셔리 모델인 ‘뉴 제너레이션 GS’를 선보이면서부터 공격적인 자세를 나타내고 있다는 건 적잖은 변화다

이 같은 변화는 최근들어 월별 베스트셀링카 5위권에도 오르지 못하는 렉서스가 뉴 GS를 통해 과거의 명성을 되찾겠다는 적극적인 의지로 해석된다 렉서스는 지난 16일 전라남도 영암에 위치한 코리아인터내셔널서킷에서 뉴 제너레이션 GS와 BMW 528i, 메르세데스-벤츠 E300의 비교 시승회를 개최했다 렉서스가 이 처럼 특정 브랜드, 특정 모델을 선정해 주행성능과 코너링 등 퍼포먼스를 직접 비교 테스트한 건 국내시장 진출 이후 처음있는 일이다 ▲ 공격적 스타일의 스핀들 그릴 적용 강력한 존재감

뉴 GS의 외관은 전체적으로 강렬하다 프론트 범퍼 상하로 자리잡은 스핀들 그릴은 첫 인상을 강하게 심어주지만 너무 공격적이면서도 지나치게 날카로운 분위기다 시간이 지날수록 부담스러울 수 있다는 얘기다 후드 상단의 캐릭터 라인과 직선이 강조된 헤드램프는 밸런스가 잘맞는다 측면라인은 매끄럽고 다이내믹하다

휠 하우스는 볼륨감을 최소화시켰는데, 이는 공기의 저항을 줄이는 한편 당당한 이미지를 제공한다 뒷면에서는 LED를 적용한 테일램프 사이에 크롬바를 적용, 럭셔리한 감각을 높인다 여기에 듀얼 머플러가 적용됐고, 범퍼 중앙하단에는 에어로 핀을 장착한 것도 눈에 띈다 차체 사이즈는 전장이 4845mm로 기존 GS에 비해 5mm가 줄었지만, 전폭(1840mm)과 전고는 (1455mm)는 20mm, 30mm가 커졌다 실내는 심플하면서도 고급 재질을 적용해 럭셔리한 맛을 높인다

블랙 음영이 들어간 대시보드와 플로어, 스티어링 휠은 다이내믹한 감각이다 에어벤트 사이에는 LED 인디케이터가 적용된 아날로그 시계가 자리잡고 있는데, 이는 렉서스로서는 처음으로 선보인 사양이다 여기에 마우스 감각의 리모트 터치 컨트롤러는 눈에 띈다 ▲ 안정적인 코너링 등 퍼포먼스 경쟁력 갖춰 렉서스 뉴 제너레이션 GS와 BMW 528i, 메르세데스-벤츠 E300의 직접 비교시승은 5

615km 거리의 영암 서킷에서 이뤄졌다 비가 내리는 가운데 진행된 이번 시승에서는 출발과 함께 시속 40km로 코너를 돌면서 풀 액셀로 1 2km 구간의 직선코스를 달리고, 시속 80km와 50km로 각각 슬라럼을 통과하는 등 뉴 GS의 종합적인 퍼포먼스를 살펴봤다 뉴 GS는 저속 상태에서 풀 액셀로 주행하자 툭 튀어나간다 페달 반응은 BMW 528i와 벤츠 E300, 뉴 GS 순으로 나타났지만, 전체적인 주행 성능면에서는 비슷한 수준을 유지했다

직선 코스에서 이들 차량은 시속 160km는 단숨에 올랐다 비가 적잖게 내렸지만, 접지력이 좋아 주행조정 안정성도 좋은 편이다 엔진 사운드는 모두 맛깔스러운데, 528i와 E300은 굵직하면서도 두터운 반면, 뉴 GS는 가늘면서도 여성스런 맛을 느낄 수 있다 뉴 GS의 코너링은 세밀하면서도 정확한 감각을 자랑한다 핸들링과 급코너링에서는 BMW와 벤츠에 비해 전혀 뒤지지 않는다

특히 뉴 GS의 장점은 차체역학통합제어시스템(VDIM)이 새롭게 적용됐는데, 민첩성과 조정 안정성을 크게 높여준다 서스펜션은 앞과 뒤에 더블 위시본과 멀티링크를 적용해 퍼포먼스뿐 아니라 승차감을 개선했고, 컨트롤 암은 스프링 하중을 줄이기 위해 단조 알루미늄으로 제작됐다 뉴 GS는 6단 스포츠 다이렉트 시프트 트랜스미션을 적용했는데, 스포츠와 스포츠 플러스 모드를 통해 좀 더 다이내믹한 드라이빙 맛을 느낄 수 있다 ▲ 뉴 GS의 경쟁력은 렉서스가 선보인 뉴 제너레이션 GS는 새로운 디자인에 달리기 성능 등 퍼포먼스가 뛰어났다

특히 핸들링과 급코너링에서는 민첩성과 안정적인 자세를 유지하는 등 탁월한 수준이다 뉴 GS의 이 같은 성능은 BMW 528i나 벤츠 E300 등 미들 럭셔리 경쟁 모델에 비해 뒤지지 않는다는 생각이다 다만, 뉴 GS의 시장 경쟁력을 더 높이기 위해서는 렉서스라는 브랜드 밸류를 더욱 높이는 작업이 요구된다 뉴 GS의 국내 판매 가격은 GS 250 5980만원, GS 350 6580만원, GS F SPORT 7730만원이다

Mercedes-Benz E-Klasse E200 COUPE Automaat | AMG Styling | LED verlichting | Navigatie

이 메르세데스 – 벤츠를 자세히 살펴보십시오 이 자동차의 강력한 가솔린 엔진은 자동 변속기에 연결됩니다

발랄한 실내에서 우리는 순항 통제, 좌석 난방과 네비게이션 시스템을 발견한다 그런 완전한 메르세데스 벤츠는 물론 또한 1를 갖추고있다 스타트 – 스톱 시스템, 스포츠 서스펜션 및 주차 센서 타이어 압력 모니터링 시스템 및 적응 형 깜박이는 브레이크 라이트, 당신은 항상 도로에서 안전합니다 당연히 우리는 BOVAG Warranty로이 차를 배달합니다

S클래스와 E클래스급 전기차, 2020년부터

S클래스와 E클래스급 전기차, 2020년부터 메르세데스-벤츠는 지난 2016년 EQ라는 전기차 전용 브랜드를 출범시켰다 자동차 세계의 패러다임이 전기차로 옮겨가는 시대를 대비한 벤츠의 적극적인 움직임이다

기존 메르세데스-벤츠는 내연기관을 얹은 차를 담당하고, EQ는 전기차, AMG는 고성능 모델, 마이바흐는 럭셔리 라인업을 담당하게 된다 추가로 공개한 EQ boost(부스트)라는 이름은 고성능 모델에 적용될 하이브리드 시스템에 붙는다 EQ 컨셉트 EQC 테스트 현장 EQ 브랜드 출범 당시, EQ 컨셉트도 함께 공개됐다

GLC 크기의 늘씬한 SUV로 보기만해도 EQ지수가 높아질 것만 같은 미래적 감성의 디자인이 돋보인다 이 차는 EQC라는 이름으로 내년 출시될 예정이며, 현재 지구상 곳곳에서 냉탕과 온탕을 왕래하면서 담금질이 한창이다 아래는 EQC 테스트 주행 영상 GLC 다음 모델은 뭘까? A클래스 크기의 소형 해치백 EQA가 다음 타자로 나설 것 같다 벤츠는 EQ A 컨셉트카를 이미 공개했고, 양산형이 2020년 등장한다는 소식이 숱하게 나왔기 때문에 EQA가 2번 타자설은 기정사실화 된 상태

벤츠는 명실상부한 고급차의 대명사로 통하는데그렇다면 고급 대형 세단 스타일의 전기차도 기대할 수 있을까? 벤츠가 지난 3월 28일 열린 한-EU 미래 자동차 포럼에서 공개한 전기차 로드맵에는 EQE와 EQS가 이름을 올리고 있었다 그 옆에는 2020년대에 출시된다는 202X라는 숫자가 함께 표기됐다 S클래스 플러그인 하이브리드 EQ의 작명법에 따르면 EQE는 E클래스급 모델, EQS는 S클래스 급 모델로 볼 수 있다

사실 EQE와 EQS가 이번에 처음 등장한 이름은 아니다 2016년 EQ의 출범 때부터 나온 이름으로 EQS는 애초 테슬라 모델S와 경쟁하게 될 차로 언급되던 차였다 S클래스는 현재 경쟁 브랜드를 압도하는 벤츠의 대표모델로 그 어느 때보다 화끈한 판매량을 보여주고 있다 전동화 자동차가 이 세계의 주류로 자리 잡게 되는 그때가 멀지 않았기에 EQS의 등장이 더 기다려진다 과연 언제쯤 만날 수 있는 걸까?

독일 아우토빌트를 비롯한 여러 외신에 따르면 EQS는 2020년 차세대 S클래스의 등장과 함께 선보일 것으로 예상된다 불과 2년 뒤다 벤츠가 2025년까지 전기차 10종을 내놓겠다고 한 만큼 매년 부지런히 새 차를 내놓아야 한다 EQS는 기존 E클래스 보다는 크고 S클래스 보다는 작은 덩치에 S클래스급의 안락한 공간과 고급스러운 실내를 갖출 전망이다 차체 크기가 작아지는 것은 엔진이 남기고간 빈자리 때문이다

전기모터는 엔진보다 훨씬 작은 부피를 차지하기에 공간 활용성이 높아진다 다만, 거대한 배터리를 바닥에 깔아야 하기 때문에 시트 포지션은 기존 내연기관 자동차보다 높아질 전망이다 E클래스급 모델 EQE의 소식도 나왔다 EQE는 코드명 V296으로 불리며 2021년 등장할 전망이다 EQE는 에어서스펜션이 기본 사양으로 탑재되며, 뒷바퀴까지 방향전환에 참여하는 사륜조향장치가 옵션으로 적용된다

사이드미러가 카메라로 대체될 가능성도 있지만, 그 전에 관련법이 통과돼야 장착이 가능하다 LED 광원이 자리 잡는 매끈한 그릴은 다른 자동차 혹은 보행자와의 의사소통을 위해 여러가지 색깔의 빛을 발산할 예정 한편, 벤츠는 2025년까지 전기차 10종을 내놓는다는 구상에 따라 EQA, EQC, EQE, EQS, EQG등 사용가능한 모든 이름을 상표등록 해 둔 상태다

Mercedes-Benz E-Klasse Estate 200 CDI Business Class Avantgarde

스포티 한 가족 차를 원해? 2011 년 메르세데스 – 벤츠를 한번보세요 발랄한 실내에서 우리는 순항 통제를 발견한다

네비게이션 시스템과 나무가 내장되어 있습니다 이 차에는 스포츠 서스펜션, 레벨 컨트롤 및 합금 바퀴가 장착되어 있습니다 호기심이 자극을 받았습니까? 빨리 우리를 불러이 차를 보러 오십시오

Mercedes-Benz E Class 2017 Test Drive, In Depth Review Interior Exterior

안녕하세요, Alaatin61의이 에피소드에서 우리는 광범위하게 새로운 E 클래스 AMG 라인을 검토 할 것입니다 코드 이름 W213 이것은 가장 완전한 E 클래스입니다 그는 에어 서스펜션을 가지고있다

Distonic Plus, Park Pilot 및 AMG Line 패키지 앞을 볼 때 '똑똑한'MultiBeam 헤드 라이트가 보입니다 자동 하이 빔도 그걸 가지고 있어요 새로운 디자인의 LED 주간 주행 등 4 개의 헤드 라이트가 이전의 안면 마비 E로 교체되었으며,이 또한 1 단위 그러나 주간 등화가 켜지면 네 눈이 아름답게 강조됩니다 그것이 Avantgarde 판이기 때문에 메르세데스 로그는 격자에있다 그러나 독점적 인 선을 가진 보닛에 별을 얻는 것이 가능하다 커버 된 로고 뒤에 ACC Distronic Plus 시스템 용 레이더가 있습니다 이상은 360도 카메라 시스템 용 카메라입니다

그것은 매우 우아한 아직 운동가 다운 디자인이다 Keyless Go 기능이있는 핸들의 크롬 세부 사항이 좋음 자동차에는이 기능이있는 자동 접이식 거울도 있습니다 거울 밑에는 카메라가 있고 맹점 탐지 보조 장치가 있습니다 삼각형은 누군가가 '죽은'구석에있을 때 붉은 빛을 낸다 그리고 Panorama 지붕과 더불어 차는 완전하게 끝내게된다, 믿어지지 않는 정도로 사치 스럽다 20 인치 AMG 스포크 휠 당신은 또한 18 인치와 19 인치와 다른 색상으로 구입할 수 있습니다

스타 더스트 효과 테일 라이트는 2 개의 LED이며 밤에는 매우 아름답게 보입니다 우리는 곧 그것을 가진 테슬릿을 만들 것입니다 2 개의 소매점은 진짜 다 그리고 크롬은 멋지게 보인다 후방 카메라가 아래에 숨겨져있어서 더러워지지 않습니다 색깔은 흑요석 흑이다

이 E200 휘발유는 184 마력 300 nm의 토키 당기는 힘 0-110km, 77 초 최고 속도는 시속 240km입니다 그것은 시속 150 마일 새로운 E 종류에는 새로운 9 G Tronic 자동 변속기가있다 엔진은 2 리터 4의 silinder 휘발유 엔진이다 자동 부팅 뚜껑, 자동차의 무게는 1505kg 가솔린 용량은 66 리터입니다 수화물 용량 540 리터 후부 좌석은이 지레와 함께 접을 수있다 그리고 이것은 쇼핑 백을위한 것이다 스페어 휠은 옵션입니다

이제 우리는 모든 세부 사항을 자세히 살펴볼 것입니다 나파 가죽 사용 모든 것은 가죽으로 끝난다 64 색 무드 조명을 사용할 수 있습니다 Burmester 사운드 시스템도 있습니다 저장 칸막이는 상당히 큽니다

가죽의 AMG 선 의자와 파노라마 지붕과 더불어 검은 지붕은 멋지게 보인다 매우 넓은 차 당신이 쓸 수있는 새로운 터치 패드 시스템 이것은 123 인치 명령 온라인 탐색 메뉴, 2D 및 3D 옵션입니다 예를 들어 사고가 났을 때 자동차가 도로의 다른 E 클래스로부터 메시지를받습니다 너는 탐색 설정 이것은 와이드 스크린 조종석을 가지고있다 나는 지금 toucpad로 주소를 입력하고있다 매우 쉽고 아름다운 시스템 이게 메뉴 야

두 화면을 표시 할 수도 있습니다 Apple Carplay 및 Android가 있습니다 당신은 또한 목소리로 명령을 줄 수 있습니다, Linguatronic 인터넷 및 무선 인터넷 옵션 에어 블랑 카 향수 시스템으로 당신은 기내에서 기후 컨트롤 향수를 사용하여 날려 버릴 수 있습니다 다른 기능은 동적 선택입니다이 옵션을 사용하면 다른 운전 옵션을 선택할 수 있습니다 섀시, 스티어링 조절 가능 에어 서스펜션으로 당신은 어려운 상황에서 차를 늘릴 수 있습니다

안전 시스템 메뉴 차 표지판을 읽는다 설정 한 경우 속도를 조정하면 속도보다 빠르지 않습니다 다른 속도로 속도를 다시 높이면 시스템을 끌 수 있습니다 주차 조종사와 함께 차는 스스로 주차하고 다시 나옵니다 원격 주차 기능을 이용하면 카운터를 사용하여 주차장에서 자동차를 몰 수 있습니다 차는 또한 활동적인 브레이크 원조 시스템을 가지고있다 당신이주의를 기울이지 않으면 차가 충돌을 막기 위해 스스로 브레이크를 건다

또한 고속도로에서 사각 지대 지원 및 주의력 지원도 센서를 통해 차가 아직 깨어 있는지 여부를 측정합니다 그래서 너는 집에 온 것이 아니라 안락하게 지내게된다 여기 메르세데스 벤츠가있는 에어 밸런스 시스템의 향수가 있습니다 사용 가능한 다른 색상이 있습니다 위대한 시스템 디밍 미러, 루프 제어 및 선글라스 구획 조난 신호 버튼 마이크 커튼은 태양으로부터 당신을 보호합니다

태양의 미소는 또한 이용할 수있다 와이드 스크린 kokpit의 메뉴 원하는대로 모든 것을 설정할 수있다 헤드 업 화면에서 밝기와 위치를 조정할 수 있습니다 우리는 새 E 클래스를 밤과 낮에 광범위하게 테스트 할 것입니다 우리는 도시에서 그리고 고속도로에서 수업을 경험할 것입니다

Burmester 사운드 시스템은 모든 페니 가치가있는 옵션입니다 진동이없는 매우 순수한 소리 시장에서 가장 우수한 시스템 1 개 이제 주차 파일럿 시스템을 시연 해 보겠습니다 360 카메라 시스템 가능한 다른보기 이 버튼을 누르십시오 지금 차는 빈 주차 공간을 찾고있다 발견하다 확인하다 지금 역으로 나는 단지 속도를 조절하고 차는 스티어링 휠을 제어한다

당신은 또한 주차장에서 자동으로 탈출 할 수 있습니다 확인하고 자동차가 깜박이는 빛 자체를 켭니다 이 작업에서 자동차는 바퀴를 손상시키지 않습니다 준비가 된 매우 안전한 차, 위험한 상황이 있다면 그는 당신을 위해 브레이크 할 수 있습니다 주의를 기울이지 않으면 하나 디스 트로닉 플러스 시스템이있는 고속도로에서 몸이 불편 해지면 차가 점차 안전하게 멈추게됩니다

당신이 스티어링 휠을 더이상 잡지 않으면, 차는 그것을 센서로 볼 것이다 교차로에서 차는 다른 교통이하는 것을 측정하고 스스로를 제동 할 수 있습니다 앞 차량과 너무 가까이 다가 가더라도 차가 빨간색 삼각형으로 경고합니다 새 E 클래스로 야간 POV 와이드 스크린 조종석이 환상적으로 보입니다 클래스에서 최고입니다

기술은 놀라 울 정도로 훌륭합니다 MultiBeam 전조등이 도로를 잘 조명합니다 향수 시스템, 장거리 용 능동형 코너링 라이트 및 하이빔 1 단어 대단하다 차는 또한 출발 중지 시스템을 가지고있다 그래서 당신은 9 움직임으로 zuing를 몰 수있다

당신은 어느 속도가 진행되고 있는지 항상 압니다 여기는 50km입니다 그리고 위로 머리 위로 향하는 스크린은 얼룩말 횡단을 보여준다 매우 안전하다 모든 옵션을 사용할 수 있습니다 카메라, 명령 온라인 및 와이드 스크린 kokpit은 그 일부입니다 우리는 지금 시간당 55km를 주행 중입니다

이것은 지붕이 열린 상태의 소리입니다 좋은 나는 지금 그것을 닫는다 이 새로운 화면이 아날로그 버전보다 미세 해졌습니다 우리는 현재 시간당 70km를 주행합니다 바람이나 엔진 소음이 없다

그것은 20 인치 림이기 때문에 약간의 타이어 소음이 있습니다 분위기 조명이 가장 좋아하는 옵션입니다 3 대신 64 색 자동 헤드 라이트 및 와이퍼 블레이드 2 일째 나는 차에 대해 매우 긍정적이다 komfor는 매우 중요하지만 동적 선택 시스템으로 스포츠 + 성격이 바뀌었다 그리고 차는 매우 잘 응답한다 그는 교대로 뒤집어 쓰지 않는다

월가의 늑대 THE WOLF OF WALL STREET 2차 공식 예고편 (한국어 CC)

반지 한반지 한반지 실례합니다 네? 저거 댁 차예요? 네

'재규어'요? 네 돈 얼마나 버시는데요? 글쎄요 저번 달엔 7만 2천 벌었나? 7만 2천 달러 받은 명세서 보여주시면 저 당장 직장 관두고 댁 밑에서 일합니다 잘 들어요 나 관둘랍니다

네, 증권업을 하게요 내 이름은 조던 벨포트 22살의 앳된 나이에 난 내 오만한 야망에 딱 어울리는 유일한 곳으로 향했지 게임 이름은 '고객 주머니의 돈을 자기 주머니로 옮기기' 근데 동시에 고객도 돈벌게 해주면 모두에게 득이 되죠

안 그래요? 안 그래 아카데미 수상 감독 마틴 스콜세지 난 내 회사를 버려진 자동차 정비소에서 시작했어 너흰 미국의 상위 부유층 1%가 타겟이다 전 세 가지를 사랑하죠 내 조국, 예수 그리스도, 사람들 부자 만들기요

여보세요? 하지만 얘들을 내 이미지에 맞게 만들어야 됐어 하지만 얘들을 내 이미지에 맞게 만들어야 됐어 이 대본으로 자네들을 일일이 가르쳐 최고로 만들겠다 여기가 세계 최고의 회사 아닙니까? 여기가 세계 최고의 회사 아닙니까? 난 전설이 되고 있었어 기혼 아니세요? 네, 근데 기혼이면 친구도 못 사귀나요? 우린 친구가 안 될 건데요

난 돈을 하도 많이 벌어 어쩔지를 모를 지경이었어 회식 한 번 하는데 2만 6천 달러? 아빠, 우린 인제 안 가난해요 – 부식 얘기 좀 해봐 – 부식을 주문했는데 부식이라니? 그건 암이라도 낫게 해? 그 부식이 암을 낫게 했어요 그게 문제였죠 그 그래서 그렇게 비쌌던 거예요 3시간 만에 2천 2백만! 3시간 만에 2천 2백만! 진짜 의문은 이거지 "이게 다 합법이었나?" 돈 어딨어? 절대 아니지 그자가 자네 측근들 사진을 다 갖고 있어

그자가 자네 측근들 사진을 다 갖고 있어 안 좋아 괜찮아 관자놀이 좀 문질러 괜찮다고

여기가 바로 기회의 땅입니다 여기가 바로 기회의 땅입니다 방금 연방공무원에게 뇌물을 주려 하셨습니다 방금 연방공무원에게 뇌물을 주려 하셨습니다 여기는 미국입니다! 여기가 내 집입니다! 대단해요, 애늙은이님

애늙은이요? 아카데미 후보 지명자 리오나르도 디카프리오 쇼는 계속 됩니다! 아카데미 후보 지명자 조나 힐 날 잡아가려면 주방위군을 보내야 할 겁니다! 날 잡아가려면 주방위군을 보내야 할 겁니다! 왜냐면 난 어디도 안 갈 거니까! 왜냐면 난 어디도 안 갈 거니까! 우린 댁 부하 아니거든요, 아저씨! 가슴에 내 돈 붙이고 있으니 엄밀히 말해 내 부하죠 마틴 스콜세지 감독 곧 개봉

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로 알려진 다른 웹 프레임 워크로 이동하면, 그것은 조금 더 강력합니다 우리는 그것이 할 수있는 것을 보게 될 것입니다 그러나 그것은 오늘을위한 프론트 엔드를위한 좋은 날이 있습니다