JavaScript와 {x} - sitepoint로 웹 페이지를 제어합니다

키 테이크 아웃

저자는 HTML 프레젠테이션을 원격으로 제어하는 ​​예를 사용하여 Android 장치를 사용하여 원격 지침을 라이브 웹 페이지로 보내는 방법을 보여주었습니다. > 사용 된 기술 스택에는 {x} 앱, node.js, express, socket.io, deck.js 및 heroku의 Android 장치가 포함됩니다. JavaScript 라이브러리 인 Socket.io는 서버와 클라이언트 간의 실시간 통신을 가능하게합니다. 이는 Android 장치의 신호에 대한 실시간 응답에 중요합니다. JavaScript API가있는 ON {x} 앱은 안드로이드 장치를 제어하고 들어오는 문자 메시지, GPS 위치, 배터리 수명 등과 같은 이벤트에 대한 응답을 제어 할 수 있습니다. 누지가 발생할 때 서버 요청을 보내는 데 사용되었습니다.

저자는이 방법이 안전하지 않다고 경고하고 너무 일반적인 것에 대한 보안 계층을 추가 할 것을 권장합니다.

나는 내 전화를 잃어 버렸다. 나는 쇼핑몰에있는 소파에 그것을 남겨두고 다시 돌아와서 돌아왔다. 누군가가 끔찍한 도둑질 기술을 통해 새로운 전화를 받았습니다. 나는 문자 메시지를 보낼 때마다 기기의 좌표를 보낸 웹을 통해 휴대 전화로 원격으로 JavaScript 코드를 원격으로 보냈습니다. 나는 그들이 전화를 끄고 영원히 사라질 때까지 시즐러 식당으로 추적했다. 나는 새로운 전화를 샀지 만 그 시점까지 {x}에 전화를 걸 때까지 거의 사용하지 않은 강력한 앱에서 새로운 잠재력을 보았습니다. 이 기사에서는 잃어버린 전화의 공포 이야기와 비교하여 앱의 매우 다른 사용을 공유 할 것입니다. Android 장치를 사용하여 라이브 웹 페이지에 원격 지침을 보내는 방법을 보여 드리고자합니다. HTML 프레젠테이션을 원격 제어의 예를 사용 하겠지만 개념을 확장하여 흥미로운 일을 많이 할 수 있습니다.

. 우리는 다음과 같은 기술을 사용할 것입니다.
• 안드로이드 장치 {x} on node.js
• Express socket.io
deck.js Heroku
• 안드로이드 폰이 없다면 걱정하지 마십시오! 이론적으로 HTTP 호출을 통해 동일한 종류의 노드/socket.io Sorcery를 사용할 수있는 다른 장치를 사용할 수 있습니다. 이 기사는 독자가 Node.js 및 JavaScript에 대한 지식을 가지고 있다고 가정하지만 소스 코드는 참조를 위해 제공됩니다. socket.io 란 무엇입니까?
우리가 이것에 너무 멀리 들어가기 전에, 나는 다음 몇 개의 코드 스 니펫에 나타날 때 socket.io가 무엇을하는지 설명하겠습니다. Socket.io는 서버와 클라이언트 간의 실시간 통신을 가능하게하는 JavaScript 라이브러리입니다. 서버와 클라이언트 모두에서 이벤트를 정의 할 수 있습니다. 예를 들어 io.sockets.emit ( 'eventthathAppened')는 응용 프로그램이 반응 할 수있는 새로운 이벤트를 만듭니다. 이벤트에 반응하려면 다음과 같은 이벤트 핸들러를 설정합니다 - socket.on ( 'eventthathAppened', function () {}).채팅 프로그램은 일반적인 예제 Socket.io 응용 프로그램입니다. 서버는 모든 클라이언트의 들어오는 메시지를 듣고 채팅 앱을 실행하는 모든 클라이언트에 즉시 표시합니다. 페이지가 올라가는 동안 Android 장치의 신호에 즉시 응답하기 위해이를 사용합니다. 서버 설정 이 데모의 디렉토리 구조는 다음 그림에 나와 있습니다. 모든 서버 사이드 코드는 기본 JavaScript 파일 인 index.js에 저장됩니다. 프론트 엔드 HTML, CSS 및 JS는 공개 폴더에 저장됩니다.

package.json 파일은 노드 애플리케이션에 대한 종속성 및 기타 메타 정보를 정의합니다. 이 파일의 내용은 다음과 같습니다. Express and Socket.io 모듈은 종속성에서 필요합니다.

이 데모는 Heroku에서 호스팅 될 예정이므로 컨텐츠가 아래에 표시된 Procfile이 필요합니다 (매우 간단합니다!). 웹 : Node Index.js 노드 서버 index.js에 저장된 노드 서버는 다음과 같습니다

index.js의 다음 줄은 socket.io를 가져 와서 서버 포트를 설정하는 데 사용됩니다.

Socket.io가 Heroku에서 작동하기 위해서는 Websockets에 의존하기보다는 XHR- 폴링을 구성하기 위해이 추가 라인을 추가해야한다는 것을 알았습니다 (환경에는 필요하지 않을 수 있음). 이 라인은 GET 또는 POST 요청에 대한 구체적인 응답이없는 경우 빈 응답으로 응답하기 전에 서버가 10 초 동안 기다리라고 지시합니다.

프레젠테이션 제어 슬라이드 이 데모는 Deck.js를 사용하지만 슬라이드 사이를 이동하기 위해 JS 호출이있는 한 다른 HTML 프리젠 테이션 템플릿을 자유롭게 대체하십시오. Deck.js의 경우 공개 폴더로 다운로드하여 압축을 풀어주십시오. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174018721210926.png?x-oss-process=image/resize,p_40" class="lazy" alt="JavaScript와 {x} - sitepoint로 웹 페이지를 제어합니다" > <route> 노드 서버에서 가장 중요한 경로는 프레젠테이션 슬라이드와 상호 작용할 수있는 게시물 요청입니다. 이 경로는 아래에 나와 있습니다. <p> </p> <calls> 이전 코드는 요청과 함께 전송 된 JSON 데이터에 따라 io.sockets.emit ( 'nudgeleft') 또는 io.sockets.emit ( 'nudgeright')를 호출합니다. 여기서 만드는 핵심은 경로가 JSON에 응답한다는 것입니다. 이 작업을 수행하지 않으면 요청이 서버의 응답을 기다리는 데 타임 아웃됩니다. 이 시점에서 서버를 로컬로 실행하거나 배포를 위해 Heroku로 푸시 할 수 있습니다. <s> socket.io 구성 <as> 추가 JavaScript가 아래와 같이 Public/JS/Magic.js의 프레젠테이션에 추가되었습니다 : <pre class="brush:php;toolbar:false"><span>{ </span> <span>"name": "androidremotecontrol", </span> <span>"version": "0.0.1", </span> <span>"dependencies": { </span> <span>"express": "3.1.x", </span> <span>"socket.io": "latest" </span> <span>}, </span> <span>"engines": { </span> <span>"node": "0.10.x", </span> <span>"npm": "1.2.x" </span> <span>} </span><span>}</span> 첫 번째 줄은 Window.location.hostName의 Socket.io 서버에 연결됩니다. 이 데모의 목적을 위해 간단하게 유지하고 하나의 도메인에 모든 것을 갖추게됩니다. 두 이벤트 핸들러는 왼쪽 또는 오른쪽의 슬라이드를 깎는 요청을 듣습니다. 이것들을 알아 차면 Deck.js의 이전 또는 다음 함수를 실행하여 슬라이드를 움직입니다. on {x} 비밀 소스 {x}의 는 Android 장치를 제어하고 들어오는 문자 메시지, GPS 위치, 배터리 수명 등과 같은 이벤트에 JavaScript API를 통해 응답 할 수있는 Android 응용 프로그램입니다. 이 데모에서는 누지가 발생할 때 서버 요청을 보내기 위해이를 사용합니다. {x} 로 시작하는 것

앱을 장치로 다운로드하십시오 : https://www.onx.ms/#!downloadapppage 다운로드하는 동안 데스크탑 브라우저의 https://www.onx.ms로 이동하여 Facebook 계정을 사용하여 {x}에 로그인하십시오 (걱정하지 마십시오. 이것은 장치와 장치 간의 코드를 동기화하는 데 사용됩니다. {x}) 당신은 {x}의 대시 보드로 가져갑니다. 당신이 관심이 있다면 이미 사용할 수있는 흥미 진진한 코드 스 니펫을 탐색하기 위해 레시피로 이동 하여이 자습서의 사용자 정의 코드를 바로 파악할 것입니다. 페이지의 왼쪽 상단에있는 쓰기 코드 링크를 클릭하여 코드 편집기를 나타냅니다. <open> 그 창을 열어두고, 우리는 거기에 코드를 추가하려고합니다. </open>

에서 코딩 위에서 언급했듯이 {x} on {x}에는 JavaScript API가있어 Android 장치에서 많은 이벤트를 호출하고 감지 할 수 있습니다. 이 데모를 위해, 우리는 주로 장치에 집중하고 있습니다. 가장 먼저해야 할 일은 코드 편집기가 {x}에 열린 상태에서 해당 창으로 돌아가서 "규칙 이름 :"을 보게 될 것입니다. 내 on {x} 코드는 다음과 같습니다. http://androidremotecontrol.herokuapp.com을 자신의 서버로 교체하려고합니다.

장치. 그 대부분의 구성 요소는 이벤트 핸들러를 설정하는 데 사용됩니다. {x}에서 언제든지 누지 왼쪽을 감지하면 Nudgeleft 핸들러가 호출됩니다. 휴대 전화가 왼쪽으로 눌린다는 것을 보여주는 휴대 전화에 알림을 기본적으로 표시하는 코드 줄이 있습니다. 당신은 이것을 필요로하지 않지만 나는 멍청이가 감지되었는지 확인하기 위해 테스트에 사용합니다. 해당 코드 라인은 아래에 나와 있습니다.
다음으로 현재 onsuccess 콜백 함수는 HTTP 응답이 성공적이라는 것을 기록하는 데 사용됩니다. 이는 Node Server에서 앞서 설정 한 response.json ({success : true})에 대한지도. 이 성공을 더 추가하여 {x}에 더 많은 데이터를 제공하여 더 많은 데이터를 제공 할 수 있습니다. 마찬가지로, onerror 콜백은 발생하는 오류를 기록하는 데 사용됩니다.
다음으로, 우리는이 제스처에 대한 90 만 밀리 초의 탐지를 켭니다. 장치에서 처음 코드를 활성화하면 실행됩니다. 이 코드가 90 만 밀리 초 이상으로 실행되기를 가능성이 있습니다. 현재 개인적으로 설정 한 방식은 장치의 화면이 켜질 때마다 켜지는 것입니다. 슬라이드를 제어하려면 화면을 켜면 900 초가 걸리면 야생으로 갈 수 있습니다. 개발 중에 찾은 것에서이 기능에 시간 제한을 제공해야합니다. 다른 방법을 찾으면 의견에 알려주십시오. 업데이트하고 싶습니다.

서버 주소와 일치하도록 코드를 업데이트 한 후에는 모두 준비가되면 "저장 및 전화로 보내기"를 클릭하여 웹을 통해 전화로 전송됩니다. 거기에서 프리젠 테이션으로 URL을 열고 Android 장치의 화면을 켜고 좌우를 눌렀습니다. 모든 것이 잘되면 슬라이드가 앞뒤로 전환되는 것을 볼 수 있습니다!

{x} 로그에서보기 {x}에서 로그 파일을 보려면 Android 전화에서 앱을 열고 추가 한 규칙을 선택하고 "로그보기"를 선택할 수 있습니다. 또는 규칙 페이지로 이동하여 규칙을 선택하고 "로그"탭을 클릭하여 로그인 할 때 {x} 사이트에서 볼 수 있습니다. > 보안은 어떻습니까? 이 방법은 어떤 식 으로든 안전하지 않습니다. 다른 사람이 프레젠테이션의 주소와 발송중인 게시물 요청을 해결하는 경우 전 세계 어디에서나 슬라이드를 쉽게 전환 할 수 있습니다. 이것과 다른 아이디어와 {x}와 관련하여 생각하는 다른 아이디어는 이와 같은 일반적인 것에 대해 보안 계층을 추가하고 싶다는 점을 명심하십시오.

.

결론

이 데모의 배후에있는 아이디어는 JavaScript, Socket.io 및 꽤 멋진 Android 앱을 사용하여 휴대 전화를 사용하여 웹 페이지에 여러 가지 방법으로 영향을 줄 수 있음을 보여주는 것입니다. 튕기는 프리젠 테이션 슬라이드 왼쪽과 오른쪽은 시작일뿐입니다. 앱 실행 중이든 배터리가 실행중인 경우 앱이 실행되는 경우 웹 페이지가 표시되는 것을 변경할 수 있습니다. D에 대해 듣는 것을 좋아합니다. 나가서 무언가를 코딩하십시오!

코드 이 데모의 모든 코드가 UP에서 GitHub에서 사용할 수 있습니다. 내 실행 중 버전은 Heroku에서도 사용할 수 있습니다.

JavaScript로 웹 페이지를 제어하는 ​​것에 대한 자주 묻는 질문 (FAQ) 웹 페이지를 제어 할 때 JavaScript의 역할은 무엇입니까?
JavaScript는 웹 페이지를 제어하는 ​​데 중요한 역할을합니다. 웹 페이지에서 복잡한 기능을 구현할 수있는 프로그래밍 언어입니다. 웹 페이지가 정적 인 경우, 즉 정적 정보를 표시하면 JavaScript를 사용하여 페이지를보다 대화식으로 만들 수 있습니다. 사용자 조치에 응답하고 동적 컨텐츠를 생성하고 멀티미디어 제어, 애니메이션 이미지 등을 훨씬 더 많이 사용할 수 있습니다. JavaScript는 사용자의 컴퓨터에서 실행되므로 페이지로드가 더 빨라지고 서버의로드를 줄입니다.

웹 페이지 내에서 JavaScript를 어떻게 사용할 수 있습니까?

JavaScript는 HTML에 직접 내장 할 수 있습니다. 태그 내 SRC 속성을 사용하여 태그 또는 링크 된 태그를 사용하여 링크되었습니다. 스크립트는 HTML 문서의 헤드 또는 본문 섹션에 배치 할 수 있지만 일반적으로 페이지의 렌더링 차단을 방지하기 위해 본문 하단에 스크립트를 배치하는 것이 좋습니다. JavaScript 웹 페이지를 제어하는 ​​JavaScript는 여러 가지 방법으로 웹 페이지를 제어 할 수 있습니다. 예를 들어, HTML 요소의 컨텐츠와 스타일을 변경하고 서버에 제출하기 전에 양식 데이터를 검증하고 쿠키를 조작하고 팝업 창 생성 등을 확인할 수 있습니다. JavaScript는 온라인 게임, 대화식지도 및 2D/3D 그래픽과 같은 복잡한 응용 프로그램을 만드는 데 사용될 수 있습니다.

JavaScript는 HTML 및 CSS와 어떻게 상호 작용 하는가?

JavaScript는 HTML 및 CSS와 상호 작용합니다. 동적 및 대화식 웹 페이지를 만듭니다. HTML은 웹 페이지의 구조, 스타일을위한 CSS 및 기능을위한 JavaScript에 사용됩니다. JavaScript는 HTML 문서의 모든 요소와 속성에 액세스하고 변경할 수 있습니다. 또한 웹 페이지에서 모든 CSS 스타일을 변경할 수 있습니다.

사전 프로그래밍 지식없이 JavaScript를 배울 수 있습니까?

예, 사전 프로그래밍 지식없이 JavaScript를 배울 수 있습니다. 그러나 HTML 및 CSS가 대화식 웹 페이지를 만들기 위해 JavaScript와 협력 할 때 HTML 및 CSS를 기본적으로 이해하는 것이 좋습니다. 튜토리얼, 비디오 및 대화식 코딩 플랫폼을 포함하여 온라인으로 사용할 수있는 많은 리소스가 있으며, 처음부터 JavaScript를 배우는 데 도움이됩니다.

는 JavaScript가 웹 개발에만 사용됩니까?

JavaScript는 주로 사용됩니다. 웹 개발의 경우 사용은 이에 국한되지 않습니다. 또한 Node.js를 사용하여 서버 측 프로그래밍, React Native 및 Ionic과 같은 프레임 워크를 사용하여 모바일 앱 개발 및 Electron과 같은 프레임 워크를 사용하여 데스크탑 응용 프로그램을 작성하는데도 사용할 수 있습니다. javaScript는 얼마나 안전한가?

JavaScript는 안전하지만 다른 프로그래밍 언어와 마찬가지로 올바르게 사용하지 않으면 악용 할 수 있습니다. 잠재적 인 보안 문제를 방지하기 위해 안전한 코딩을위한 모범 사례를 따르는 것이 중요합니다. 여기에는 사용자 입력 검증 및 소독, 평가 ()의 사용을 피하고 취약점에 대한 코드를 정기적으로 업데이트하고 확인하는 것이 포함됩니다.

JavaScript를 사용하여 애니메이션을 만들 수 있습니까?

예, JavaScript CAN CAN. 웹 페이지에서 애니메이션을 만드는 데 사용됩니다. 시간이 지남에 따라 HTML 요소의 CSS 속성을 변경하여 애니메이션의 효과를 만듭니다. JavaScript는 또한 부드럽고 브라우저에서 최적화 된 애니메이션을 만들기 위해 특별히 설계된 requestAnimationFrame 메소드를 제공합니다.

문서 개체 모델 (dom)은 무엇입니까?
문서 개체 모델 (dom)은 다음과 같습니다. HTML 및 XML 문서의 프로그래밍 인터페이스. 그것은 문서의 구조를 나타내며 JavaScript와 같은 언어가 문서의 내용, 구조 및 스타일을 조작 할 수 있도록 허용합니다.

JavaScript는 오류를 처리하는 방법은 무엇입니까?

JavaScript는 조합을 사용하여 오류를 처리합니다. 시도, 잡기 및 마침내 진술. 시도 블록에는 잠재적으로 오류를 던질 수있는 코드가 포함되어 있고 캐치 블록은 오류를 처리하며, 마지막 블록에는 오류가 발생하든 아니든 오류에 관계없이 실행되는 코드가 포함되어 있습니다.

위 내용은 JavaScript와 {x} - sitepoint로 웹 페이지를 제어합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!