Rating System with more functionalities using jQuery

안녕 Youtube, Happy Coder의 Mary입니다 오늘의 비디오에서는 평가 시스템에 기능을 추가하는 방법을 보여 드리겠습니다

JQuery를 사용합니다 설명의 목적으로 Microsoft Visual Studio를 여는 중입니다 먼저, 이전 비디오에서 내가 보여 주었던 평가 시스템의 코드를 요약 해 보겠습니다 이 코드는 화면에 표시된 것과 같은 웹 페이지를 생성했습니다 선택할 사용자

그러나 개발자의 관점에서 볼 때, 사용자가 선택한 서클의 수를 입력하십시오 또한 서클 수를 확인하는 메시지를 반환하는 함수를 추가하고 싶습니다 클릭 함 둘째, 이전 비디오에서 제공 한 html 및 css 스크립트가 edX는 5 개의 기본 원에 대한 코드를 포함합니다 그러나 오늘날의 비디오에서 이러한 코드는 존재하지 않습니다

즉, 코드를 추가해야합니다 웹 페이지가 시작되면 5 개의 동그라미를 표시하는 코드입니다 이제 업데이트 된 스크립트를 살펴 보겠습니다 그것은 기본적으로 4 부분으로 구성됩니다 : 첫 번째 부분에서는이를 "마우스 이벤트"라고 부릅니다 이전 비디오에서와 같이 클릭, 마우스 오버, 마우스 아웃 이벤트에 대한 3 가지 기능을 보여줍니다

내가 만든 약간의 변화는 3 가지 기능 각각에 이름이 부여 된 것입니다 이 작업을 수행하는 목적은 다음 두 함수에서 함수를 이름으로 호출하여 동일한 코드를 반복 작성해야합니다 두 번째 부분은 documentready를 사용하여 페이지가로드 될 때 5 개의 기본 원을 추가하는 것입니다 기능 for 루프와 append 메소드를 사용하여 서클에 대한 html 코드를 추가합니다

최대 루프 수는 5로 설정됩니다 그런 다음 클릭, 마우스 오버, 마우스 아웃 이벤트에 대한 3 가지 함수를 호출하므로 이전 비디오에서 볼 수있는 것처럼이 5 개의 기본 서클에 잘 작동합니다 세 번째 부분은 사용자가 등급 시스템을 사용자 정의 할 수 있도록하는 것입니다 입력 필드에서 선택하고 "최대 값 업데이트"버튼을 클릭하십시오 먼저 사용자가 입력 한 숫자를 저장하는 변수 "input"을 선언했습니다

클릭 기능에서 먼저 빈 방법을 사용하여 기본 서클을 제거하고 싶습니다 그런 다음 for 루프를 사용하고 메소드를 다시 추가하여 서클에 대한 html 코드를 추가합니다 그리고 이번에는 최대 루프가 "입력"에있는 숫자입니다 그런 다음 마우스 이벤트에 대한 3 가지 함수를 다시 호출하여 다음과 같은 결과를 얻습니다 마지막 비디오에 표시됩니다

마지막 부분은 사용자가 Ajax 호출을 통해 서버에 선택한 등급을 보내는 것입니다 이는 post 메소드 및 API를 사용하여 수행됩니다 서버 및 API는 edX에서 수강 한 과정에서 제공됩니다 (DEV208x jQuery 소개) 그리고 JSON 문서는 전송 된 데이터를 취할 value와 maxValue를 나타냅니다 서버

필자의 스크립트에서는 값을 + 1로 설정했습니다 a는 클릭 된 원의 색인을 포함하는 변수이고 index는에서 시작됩니다 0이므로 a + 1은 선택된 등급 인 클릭 된 원의 실제 주문 번호입니다 그런 다음 maxValue를이 함수에서 선언 한 변수 인 circleNumber로 설정합니다 최대 원 번호를 유지하려면 : 페이지가로드 될 때 기본값은 5입니다 (예 : 이를 성취하기위한 if 문)을 입력 한 다음 사용자가 입력 한 숫자로 변경합니다 어떤 것이 있으면

서버 호출이 성공하면 서버는 등급을 확인하는 메시지를 다시 전송합니다 그런 다음 html 메서드를 사용하여 메시지를 표시합니다 이제 테스트해볼 시간입니다 공백을 마우스 오른쪽 버튼으로 클릭하고 "브라우저에서보기"를 선택하십시오 웹 페이지에는 5 개의 등급 서클이로드됩니다

커서를 서클 위로 이동하면 노란색으로 바뀝니다 3 번째 원을 클릭하면 처음 3 개의 원이 녹색으로 바뀝니다 나는 커서를 멀리 옮기고, 녹색은 그대로있다 서클 위로 다시 이동하면 노란색으로 바뀝니다 입력란에 10을 입력하고 "최대 값 업데이트"버튼을 클릭하면 10이 표시됩니다

화면에 원 이러한 서클의 기능은 이전과 동일합니다 커서가 커서를 가리키면 노란색으로 바뀝니다 나는 6 번째 원을 클릭하고 처음 6 개 원은 녹색으로 변합니다 이 등급을 저장하고 싶습니다

버튼을 클릭하면 메시지가 나타납니다 "당신은 10 점 만점에 6 점을 선택했습니다"라는 말이 옳습니다 모든 기능이 예상대로 작동하므로 평가 시스템이 완료되었습니다 그 말로, 비디오가 유익했기를 바랍니다 댓글을 달거나 공유하십시오

채널에 가입하십시오