JavaScript 애플리케이션이 없는 경우 우리가 알고 있는 인터넷은 오늘날의 수준에 도달하지 못할 것입니다.자바스크립트는 이미 인터넷 체험에서 빠질 수 없는 일부분이 되었다. 개발자가 사용자에게 동적이고 강화된 상호작용 체험을 제공하기 위해 기초와 고급 응용 프로그램을 구축했기 때문이다.이는 그것이 없으면 소셜미디어 애플리케이션, 전자상거래 플랫폼, 온라인 동영상 흐름, 검색과 지도 엔진이 실현될 수 없다는 것을 의미한다.Netflix와 같은 온라인 동영상 흐름 플랫폼은 고품질의 미디어 콘텐츠를 나누어 주는 것을 통해 인터넷에 기여했다. 이런 오락은 전통적으로 할리우드 영화사와 주요 텔레비전 네트워크에서 제작된 것이다.오늘 우리는 순수한 자바스크립트를 사용하여 넷플릭스 복제를 구축할 것이다. 본고를 구축하거나 이해하는 주요 전제는 HTML, CSS와 일반 자바스크립트를 이해하는 것이다.

개시하다

본고에서 HTML, CSS, 순수 자바스크립트를 사용하여 넷플릭스 클론을 만드는 방법을 소개할 것입니다. 그 작성 방식은 모든 개발자가 (기술 수준이 어떻든지) 따라야 합니다.

요소 정의

배경 제목

제목은 이미지를 밀어내거나 모서리에서 점을 잘라내야 하더라도 컨테이너 전체를 덮어쓰는 배경 이미지로 구성되어 있습니다cover.만든 "로그인"과 "시작"단추는 onclick() 요소의 도움말 아래 우리의 로그인 페이지에 연결되며, 이 요소는 함수를 호출합니다.

function displayButton(){
    var final = document.getElementById('final');
    var main = document.getElementById('main');
    final.classList.toggle('closed');
    main.classList.add('closed');
}

위 기능의 목적은 넷플릭스 제목을 숨기고 '로그인' 이나 '시작' 단추를 누르면 로그인 페이지를 표시하는 것이다.
다음 그림은 넷플릭스의 제목을 보여줍니다.

로그인 기능

로그인 기능은 이메일 주소와 암호input 요소로 구성되며, 여기서 이메일은 regex 문자 시퀀스를 사용하여 문을 확인합니다.if/else 문장은 이메일addressif/else 요소에 입력한 값이 전자메일로 존재하는지 확인합니다. 그렇지 않으면 경보가 뜨고 전자메일이 무효임을 의미합니다.e-메일이 비어 있으면 e-메일이 비어 있을 수 없다는 다른 경고가 표시됩니다.

if(eVal === ''){
  alert('Email cannot be left blank');
  } else if(!isEmail(eVal)){
    alert('Email is invalid');
  } else if(isEmail(eVal)){
    console.log(true);
  }

function isEmail(EmailVal){
  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(EmailVal);
}

password 입력 요소는 공백을 방지하기 위해if/else 문장을 사용합니다.두 입력 요소가 모두 검증 테스트를 통과한 경우 로그인 버튼 아래에 "로그인해 주셔서 감사합니다. 로그아웃 버튼을 클릭하십시오"라는 메시지가 나타납니다.

if(pVal === ''){
  alert('Password cannot be left blank');
  } else {
    console.log(true);
  }
  if(isEmail(eVal) == true && pVal !== true){
    thanks.innerHTML = 'Thanks for signing in. Click the sign out button'
  }

영상과 선물

이 섹션은 비디오, 이미지 및 GIF 사용에 적용됩니다.속성input은 비디오 요소에 추가됩니다. 여기서 autoplay playsinline muted loop 속성은 비디오를 전체 화면이 아닌 항상 필요한 위치에서 재생합니다.일부 CSS 속성의 도움말 아래 비디오와 GIF도 원하는 위치에 맞게 크기를 조절할 수 있습니다.
우리가 사용하고 있는 동영상과 GIF를 시연하다.

아코디언 메뉴 만들기

우리는 흔히 볼 수 있는 문제(흔한 문제)와 답을 저장할 수 있는 아코디언을 만들어야 하기 때문에 아코디언 메뉴가 필요하다.
accordion 메뉴는 수직으로 쌓인 항목 목록을 포함하는 그래픽 제어 요소로, 해당 목록을 클릭하면 해당 항목과 관련된 내용을 표시하거나 숨길 수 있습니다.프로젝트 목록에 적합한 답안을 제공합니다. 제어 요소를 누르면 답안이 표시됩니다.FAQ 요소에 링크된 함수는 컨텐트를 쉽게 표시하고 숨길 수 있습니다.
아래의 기능은 아코디언의 내용을 표시하거나 숨길 수 있다.

function toggle1(){
    var x = document.getElementById('ans1');
    var y = document.getElementById('rot1');
    y.classList.toggle('rotate');
    x.classList.toggle('closed');
}

위에서 보듯이 이 함수는 playsinline 속성을 사용하여 제어 요소 answers의 클래스를 전환한다. 그 중에서 classlist 클래스의 CSS 속성은 closed로 그 내용을 숨기거나 표시한다.

바닥글

바닥글 사용display: none CSS 속성은 행과 열의 형식으로 스타일 설정을 하여 웹 페이지를 부동과 포지셔닝을 사용하지 않고 쉽게 디자인할 수 있습니다.CSS 속성grid은 4열과 행을 만듭니다.다음 추가 CSS 속성이 더 보기 좋게 적용됩니다.

.footer-column{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 4rem;
}

비디오 테이프

사용 중인 애플리케이션의 데모

결론

자바스크립트의 기본 지식과 이 몇 가지 절차의 응용이 있으면 넷플릭스 클론을 구축할 수 있습니다.본고의 코드 라이브러리를 더욱 잘 이해하기 위해서, 당신은 Github에서 그것을 볼 수 있습니다.