Node.js WebSocket Programming Tutorial with JavaScript

안녕하세요 여러분 오늘 저는 웹 소켓 프로그래밍을하는 방법을 보여 드리겠습니다 nodejs를 사용하면 JavaScript로 몇 가지 예제를 함께 살펴볼 것입니다 클라이언트와 소켓 사이에 상시 연결 소켓 연결을 작성하려고합니다

서버와 클라이언트와 클라이언트 사이에서 인터넷을 통해 피어 프로세스에 양방향으로 데이터를 즉시 전송 채팅 애플리케이션 또는 멀티 플레이어를 구축 할 때 유용합니다 온라인 게임 또는 주식 시세 앱 실시간 GPS 위치 추적지도 실시간 웹 경매 또는 그 사이의 모든 것 클라이언트-서버 통신을위한 vanilla nodejs 코드 프로덕션 환경에서는 웹 호스팅 공급자를 사용하여이 응용 프로그램을 배포합니다 AWS와 클라이언트가 그들의 인터넷 연결은 nodejs 네이티브 넷 라이브러리를 통해 쉽게 서버가 시작되고 포트 98에 바인딩 된 소켓 연결 열기 및 처리 시작하기 전에 클라이언트가 실행될 때 실행할 이벤트 핸들러를 할당합니다

클라이언트가 TCP를 통해이 앱에 연결 한 후 서버에 연결 연결 서버는 클라이언트에게 문자열을 보낸다 서버 말하기 서버는 클라이언트가 서버로 보내는 모든 데이터를 기록합니다 소켓 연결이 닫히기 직전에 서버가 클라이언트에게 닫힘을 알려줍니다 연결 이제 다음에 클라이언트 nodejs 코드와 그 뒤에 일부가 표시됩니다 클라이언트를 기존 웹 페이지를 통해 연결하는 브라우저 JavaScript 앱은 nodejs에서 동일한 넷 라이브러리를 사용합니다

TCP 소켓 연결이 로컬 호스트 포트 98 98 인 서버 클라이언트가 서버에 hello라는 메시지를 보낸다 서버가 클라이언트에 데이터를 보낼 때 클라이언트가 여기에 기록합니다 클라이언트-서버 상호 작용 실행 실시간으로 클라이언트가 서버와 연결하여 문자열을 교환 한 다음 클라이언트 웹 브라우저에서 수행하는 작업을 보여주기 전에 연결을 끊고 종료합니다 WebSockets를 사용하여 서버에 연결하여 클라이언트에 연결하는 방법 양방향 메시지 이것은 일종의 복잡한 작업입니다 서버 앱에서 라우팅하여 두 클라이언트의 브로커로 전환 클라이언트가 항상 공개적이지 않기 때문에 클라이언트에 직접 연결할 수 없습니다 서버 응용 프로그램이 항상 액세스 할 수있는 IP 주소로 서버 구성 요소가 피어 투 피어 양방향 메시징을 구현하려는 경우 필요 WebSocket 연결을 위해 브라우저에서 JavaScript가 어떻게 보이는지 봅시다 브라우저에서의 소켓 프로그래밍은 약간 복잡하지만 웹 소켓 프로그래밍은 아니고 우리에게 동일한 목표를 달성합니다

기본적으로 사용할 수있는 브라우저의 소켓 서버 코드와 WebSocket 서버 코드 모든 현대에서 작동하는 내장 객체가있는 WebSocket 프로토콜 브라우저 터미널에서 WebSocket 서버 스크립트를 실행하고 HTML을로드합니다 Chrome에서 파일을 보면 브라우저가 서버에 연결되어 있음을 알 수 있습니다 그들은 각각 서로에게 문자열을 보낸 다음 내가 연결되면 연결이 종료됩니다 내 브라우저에서 웹 페이지를 새로 고치면 똑같은 것을 다시 볼 수 있지만 이를 위해 클라이언트와 클라이언트 간 통신은 어떻습니까? 브라우저 대 브라우저 nodejs 클라이언트 대 nodejs 클라이언트 브라우저 대 nodejs 클라이언트 PubNub와 같은 서비스를 사용하면이 모든 것을 쉽게 수행 할 수 있습니다 장치가 TCP를 말할 수 있다면 양방향 장치와 장치를 연결할 수 있습니다 모든 메시지 볼륨에서 커뮤니케이션 PubNub는 무료로 가입하고 무료입니다 API 키를 사용하여 한 달에 최대 백만 건의 메시지를 영원히 보낼 수 있습니다 이로 인해 PubNub는 애호가 학생들과 기업들이 쉽게 선택할 수 있습니다

개념 증명을 구축하기 위해 클라이언트에서 클라이언트로 보내는 메시지를 보자 전송 코드는 nodejs와 비슷합니다이 코드는 거의 동일합니다 여기에 웹 브라우저 JavaScript를 위해 먼저 클라이언트 1이 있습니다 무료 API 키를 사용하여 전 세계에 분산 된 무한 확장 가능한 PubNub 네트워크 다음에 우리는 당신이 그들을 사용할 때 채널 채널이 만들어집니다 구독 당신이 원하는만큼을 만들고 그들은 영원히 구독 구독 장치가 의미 특정 채널에 게시 된 모든 메시지 수신 여기에 한 번에 하나 이상의 채널을 구독 할 수 있습니다

새 메시지가 전달 될 때 실행되는 이벤트 핸들러 다음 구독은 사용자가 누를 때마다 실행되는 기능을 설정합니다 그들의 리턴 키 PubNub publish 메소드는 PubNub 네트워크를 사용하는 채널의 메시지는이 메시지가 강도 번호 JSON 객체 원하는 모든 스크립트를 만들었습니다 다음을 나타내는 메시지를 게시한다는 점을 제외하면 거의 동일합니다 클라이언트 번호 2입니다 2 개의 PubNub 기반 스크립트를 2 개로 실행하겠습니다

즉각적인 피어 투 피어 양방향 메시지를 표시하는 터미널 창 집중된 터미널에서 Enter 키를 누를 때마다 PubNub의 전달 기능 윈도우 스크립트는 새로운 PubNub 메시지를 전송합니다 동일한 채널이므로 양쪽에서 동일한 데이터를 볼 수 있습니다 다른 스크립트가 다른 쪽의 컴퓨터에서 실행되는 경우와 동일한 방법 전세계 PubNub 메시지의 대기 시간은 일반적으로 클라이언트와의 거리에 따라 250 밀리 초 PubNub를 사용하면이 멋진 펍 / 서브 메시징 기능을 구축 할 수 있습니다 채팅 앱 멀티 플레이어 게임은지도에서 실시간 위치 정보 추적 매일 약 430 억 개 이상의 메시지가 PubNub 네트워크를 통해 전송됩니다 2,000 명 이상의 행복한 고객이 PubNub를 무료로 사용해보십시오 dashboard

pubnubcom/signup은 GitHub의 스타터 코드도 확인하십시오 다음 프로그래밍을 시작할 수 있도록 모든 프로그래밍 언어 시청 해 주셔서 감사합니다

Start Your First Programming with JavaScript – For Beginner Developers

얘들 아! 저기서 무슨 일이 벌어지고 있니? JavaScript 기초 교육에 오신 것을 환영합니다 이 비디오에서는 JavaScript를 사용하여 첫 번째 프로그래밍을 시작하는 방법을 보여 드리겠습니다

튜토리얼에서 우리는 "Hello world!"를 표시하는 아주 간단한 웹 앱을 만들 것입니다 메시지를 웹 브라우저의 대화 상자에 넣으십시오 HTML 파서가 자바 스크립트 실행과 어떤 관련이 있는지 살펴 보겠습니다 또한 지연 및 비동기로드에 대한 간략한 설명과 일부 상황에서 JavaScript 프로그래밍 문제를 해결합니다 배울 점이 더 많아 시작합시다

튜토리얼을 시작하기 전에 잠시 시간을내어 코드 선택에 대해 논의 해 봅니다 개발 프로세스를위한 편집기 이전 비디오에서는 JavaScript 코드를 작성할 수 있다는 것을 보여주기 위해 메모장을 사용했습니다 텍스트 편집기에서 그러나 실제 프로그래밍에서는 강력한 코드 편집기가 필요합니다

개발 프로세스를 가속화하는 훌륭한 지능형 도구 세트 이 교육에서 사용하기를 권하는 코드 편집자가 있습니다 코스 첫 번째 권장 코드 편집기는 Adobe라고하는 무료 오픈 소스 및 크로스 플랫폼입니다 대괄호

웹 개발을 전문으로하는 매우 강력하고 가벼운 코드 편집기입니다 이 Javascript 기본 과정의 모든 자습서에 대괄호를 사용합니다 내가 필요한 두 가지 첫 번째는 localhost 개발 환경이고, 두 번째는 실시간 미리보기입니다 특색

필자가 제안하는 또 다른 코드 편집기는 Microsoft의 Visual Studio Code입니다 IntelliSence와 내장 기능이있는 영리한 오픈 소스 및 크로스 플랫폼입니다 터미널은 백엔드 API 개발을위한 훌륭한 도구입니다 마지막으로 가장 중요한 것은 숭고한 본문입니다 자바 스크립트에 필요한 거의 모든 것을 갖춘 지식이 풍부한 코드 편집기입니다

개발 그러나이 강력한 코드 편집기는 개인 라이센스로 80 달러를 지불하게됩니다 다행히 코드 편집기를 찾았거나 컴퓨터에 코드 편집기가 설치되어 있기를 바랍니다 이 튜토리얼에서는 모든 코드 편집기가 작동하므로 수업을 계속 진행하십시오 다음은 JavaScript 기본 폴더입니다

폴더 안에는 수업 1과 2에 대해 두 개의 분리 된 폴더가 있습니다 수업 2 폴더를 마우스 오른쪽 버튼으로 클릭하고 "대괄호 프로젝트로 열기"를 선택합니다 하위 메뉴 컨텍스트에서 로컬 호스트 개발의 이점을 얻으려고하기 때문에 그렇게합니다 환경 및 실시간 미리보기

화면에서 볼 수 있듯이 프로젝트 폴더에 HTML 파일이 있습니다 실시간 미리보기 아이콘을 클릭하여 웹 브라우저에서 파일을 엽니 다 제목과 소제목에 짧은 글자가 오는 간단한 웹 페이지입니다 절 이 HTML 문서에서 JavaScript로 프로그래밍 할 수있는 두 가지 방법이 있습니다

첫 번째는 JavaScript 코드를 문서에 직접 작성하고 두 번째는이 문서를 외부 스크립트 파일 두 가지 방법을 시도해 봅시다 indexhtml 문서에서 JavaScript 코드를 작성할 수 있지만 가장 일반적인 장소 <head>를 닫고, <body>를 연 후, <body> 닫는 중 웹 페이지 하단에 JavaScript 코드를 배치하면 성능 향상, 성능 최적화가 범위를 벗어남에 따라 여기서 논의하지는 않을 것입니다

브라우저에 이것이 JavaScript 코드임을 알리기 위해 <script>를 사용하여 코드를 래핑해야합니다 여기서는 <body>가 닫히기 전에 코드를 넣을 것입니다 대괄호로 코딩 할 때 좋은 방법입니다 방금 열린 꺽쇠 괄호를 입력하고 괄호를 사용하면 가능한 태그에 대한 힌트를 얻을 수 있습니다 화살표 키를 사용하여 선호하는 태그를 선택하거나 타이핑을 계속할 수 있습니다

화면에 표시되는 것처럼 하나 이상의 문자를 추가 할 때 대괄호는 이해하기에 충분히 똑똑합니다 내가 원하는거야 Enter 키를 눌러 태그를 수락합니다 대괄호는 대괄호를 닫을 때 자동으로 <script>를 닫습니다 나는이 특징을 너무나 좋아한다

나는 <script>를 가지고 있으므로 "Hello World"를 표시하는 첫 번째 프로그래밍을 작성해 보겠습니다 메시지를 브라우저 대화 상자에 표시하십시오 이를 위해 "alert"라는 내장 함수를 사용합니다 이 함수는 "Hello World"메시지 인 인수를 취합니다 "Hello World"메시지를 따옴표로 묶어 문자열임을 확인했습니다

데이터 구문과 문법에 대한 자세한 내용은 다음 튜토리얼에서 배우게 될 것입니다 내가 여기서 쓴 것 파일을 저장하고 페이지를로드합니다 자 간다

대화 상자가 브라우저 창에 표시됩니다 상자를 닫으려면 괜찮을거야 나는 <script>를 주석 처리 할 것이다 이제 외부 스크립트 파일을 사용하여이 기능을 다시 시도해 보겠습니다 프로젝트 폴더에 js라는 새 폴더를 만듭니다

그런 다음 js 폴더에 scriptjs라는 새 파일을 만듭니다 잘 JavaScript 파일은 js 확장자로 끝나야합니다

외부 스크립트 파일이 있으므로 indexhtml의 파일에 연결합니다 <head>가 닫히기 전에 여기에 링크를 붙여서 무언가를 보여주고 싶습니다 그러나 외부 스크립트 파일은 페이지 하단에 링크해야합니다 가능한

<script>에 "src"속성을 추가하고 값을 위치에 설정해야합니다 이 경우에는 외부 스크립트 파일의 URL 인 js / scriptjs로 복사하십시오 파일을 저장하고 페이지를 다시로드합니다 페이지를 마우스 오른쪽 버튼으로 클릭하고 하위 메뉴 컨텍스트에서 "검사"를 선택합니다

'네트워크'탭을 선택하고 페이지를 다시로드합니다 화면에서 본 것처럼 scriptjs가 웹 페이지에로드 될 준비가되었지만 빈 스크립트 파일 scriptjs에 몇 가지 JavaScript 코드를 작성해 보겠습니다

다시 말하지만, "alert"함수를 사용하여 "Hello World"메시지를 웹 브라우저의 대화 상자 파일을 저장하고 페이지를 다시로드합니다 잘 했어! 대화 상자가 나타납니다 얘들 아! 좀 더 깊이 파 내려 가게 해줘 "Hello World"메시지를 표시하는 대신 자막 문서를 변경하겠습니다

페이지가로드 된 후 "documentquerySelector"를 사용하여 하위 제목의 ID가있는 요소를 가져 왔습니다 H3 요소의 경우 그런 다음 선택한 요소의 내용을 "JavaScript에서 Hello World App 프로그래밍"으로 설정했습니다 스크립트 파일을 저장하고 페이지를 다시로드합니다

지금 당장은이 시간을 보내지 않습니다 "콘솔"탭을 클릭하여 오류를 확인합니다 그리고 여기 나는 scriptjs 파일의 3 행에서 잡히지 않은 오류를 발견했습니다 이 오류가 어떻게 발생하는지 설명하겠습니다

페이지가로드되는 동안 HTML 파서는 태그를 위에서 아래로 파싱합니다 페이지의 <script>를 찾으면 스크립트 파일을 다운로드하고 즉시 다운로드가 완료된 후 코드를 실행하고 파싱을 계속합니다 실행 시간에 잡히지 않은 웹 페이지에는 자막 (h3 요소)이 아직 없습니다 잡히지 않은 오류가 발생했습니다 이 문제를 해결하는 가장 쉬운 방법은 <script>를 페이지의 맨 아래로 이동하는 것입니다 다시 한 번 페이지를 다시로드 해 봅시다 큰

자막이 변경되었습니다 일부 상황에서는 내용이 표시되기 전에 JavaScript 코드를 입력해야합니다 로드되었거나 어떻게 든 스크립트를 페이지의 맨 아래로 이동할 수 없습니다 어떻게 문제를 해결할 수 있습니까? "지연 (defer)"및 "비동기 (async)"로딩에 대해 이야기 할 때입니다 상황에서

<script>를 원래 위치로 되돌려 놓겠습니다 그런 다음 파일을 저장하고 페이지를 다시로드합니다 콘솔 창에 오류가 다시 표시됩니다 꺾쇠 괄호를 닫기 전에 지연 속성을 추가하겠습니다 사실, 원하는 경우 <script> 뒤에 속성을 넣을 수 있습니다

파일을 저장하고 페이지를 다시로드합니다 굉장해 자막 변경 및 오류 메시지가 사라졌습니다 "async"속성으로 한번 더 해보겠습니다 defer 속성을 async로 바꿉니다

파일을 저장하고 페이지를 다시로드합니다 오류없이 계속 작동합니다 당신은 두 속성이 얼마나 도움이되는지를 보았습니다 "지연"과 "비동기"로딩의 차이점을 확인해 봅시다 보시다시피 <script> 속성을 ​​사용하지 않으면 HMLT 파서가 JavaScript를 다운로드하고 실행하기위한 HTML 구문 분석

그런 다음 남아있는 HTML 태그를 계속 구문 분석합니다 비동기 로딩은 HTML을 구문 분석하는 동안 스크립트 파일을 다운로드하지만 즉시로드합니다 다운로드가 완료된 후 스크립트를 실행하기위한 HTML 구문 분석을 일시 중지합니다 비동기 로딩에 대해주의해야 할 점은 스크립트가 항상 주문에서 실행되는 것은 아니라는 것입니다 방법 defer 속성은 Async 로딩과 비슷한 HTML을 파싱하는 동안 스크립트를 다운로드합니다

그러나 모든 HTML을 웹 페이지로 구문 분석 한 후에 스크립트를 실행합니다 TAKE 6 튜토리얼을 시청 해 주셔서 감사합니다 바라건대, 당신은 튜토리얼을 즐겼고 비디오로부터 뭔가를 배웠습니다 질문이 있거나 영어 발음이 혼란 스러우면 의견을 남기십시오 이 아래로

가능한 빨리 답변 해 드리겠습니다 이 튜토리얼을 공유하고 나면 다른 사람들이 당신이 그랬던 것처럼 비디오 주간 비디오 튜토리얼을 업로드하여 블로그 및 개발과 관련하여 언제든지 참여할 수 있습니다 YouTube 채널을 구독 할 준비가되지 않았다면 나에게 알려주세요 나는 오늘 내가 채팅하기에 충분할 정도로 말하고 싶은 것을 다 썼다

다음 자습서에서 다시 확인하십시오 안녕

JSON Tutorial for Beginners (no programming knowledge needed)

초보자를위한 JSON Tutorial에 오신 것을 환영합니다 이 JSON 튜토리얼에서는, JSON을 배우자

우리는 몇 가지를 다룰 것입니다 중요한 JSON 주제 그래서이 튜토리얼을 끝까지 지켜보십시오 첫째, JSON이란 무엇입니까? JSON 전체 형식은 다음과 같습니다 JavaScript Object Notation JSON 데이터 형식은 언어에 독립적입니다

표준 데이터 교환 형식 XML 또는 CSV와 같은 다른 데이터 형식의 대안입니다 인간이 읽을 수 있고 이해할 수있다 뿐만 아니라 컴퓨터 장치 더글라스 크로포드 JSON 형식을 만들었습니다

JSON 데이터 JSON 데이터 값은 일련의 문자 인 문자열 일 수 있습니다 또는 정수 또는 부동 소수점 일 수있는 숫자 또는 이름 – 값 쌍의 집합 인 객체입니다 또는 JSON 배열 쉼표로 구분 된 값 집합입니다 또는 참 또는 거짓을 의미하는 부울 또는 Null은 빈 값입니다

JSON에서는 주석을 사용할 수 없습니다 JSON 데이터 값은 그 안에 다른 값을 중첩 할 수도 있습니다 이제 JSON 데이터 예제를 사용하여 각각에 대해 알아 보겠습니다 첫 번째 JSON 데이터 유형은 string입니다 일련의 문자입니다

문자열은 양쪽에 큰 따옴표로 구분됩니다 JSON 문자열은 백 슬래시 이스케이프 시퀀스를 지원합니다 에이 JSON 예제 문자열입니다 "name": "John" 너는 둘 다 볼 수있다 이름뿐만 아니라 존, 두 문자열은 양쪽에 큰 따옴표로 구분됩니다

또 다른 예는 "category"입니다 : "employee" 두 번째 JSON 데이터 유형은 숫자입니다 JSON의 숫자는 정수 또는 부동 소수점 수 있습니다 부동 소수점 수에는 지수 표기법, 매우 작거나 매우 큰 숫자를 표시하는 데 유용합니다 JSON 번호 샘플은 다음과 같습니다 "age": 30 여기서 age는 문자열이므로 큰 따옴표로 구분됩니다

다른 JSON 번호 예제는 "id"입니다 : 123 및 또 다른 예는 "version"입니다 : 11 11은 부동 소수점 숫자입니다 세 번째 JSON 데이터 구조는 객체입니다 JSON의 객체는 정렬되지 않은 일련의 이름 – 값 쌍입니다

다른 프로그래밍 언어에서 이러한 데이터 구조는 레코드라고도하며, 사전 또는 연관 배열 JSON 객체에서 이름은 문자열입니다 이름은 값에서 콜론으로 구분됩니다 JSON 객체는 왼쪽 중괄호로 시작하고 오른쪽 중괄호로 끝납니다 자, 보자

이름 – 값 쌍이있는 객체의 JSON 데이터 예제입니다 그래서, 여기 당신은 이메일의 보낸 사람 부분이고 이메일 주소 ~으로 표시됩니다 JSON 객체 왼쪽 중괄호로 시작하고 오른쪽 중괄호로 끝납니다 세 가지 이름 – 값 쌍이 있습니다

주소, 도메인 및 안전한 발신자 네 번째 JSON 데이터 구조는 JSON 배열입니다 JSON 배열은 쉼표로 구분 된 값의 집합입니다 다른 프로그래밍 언어에서는 목록 또는 시퀀스라고도합니다 JSON에서 배열은 왼쪽 대괄호로 시작하고 오른쪽 대괄호로 끝납니다

배열 내의 데이터 값은 쉼표로 구분됩니다 배열의 JSON 데이터 예제는 다음과 같습니다 자동차의 다른 모델의 이름 따라서 왼쪽 대괄호로 시작하고 오른쪽 대괄호로 끝나며 그 안에 값 문자열이며 쉼표로 구분됩니다 배열의 다른 데이터 예제는 정수 배열입니다

다시 왼쪽 대괄호로 시작하고 오른쪽 대괄호로 끝나고 값은 다음과 같습니다 정수는 다시 쉼표로 구분됩니다 다섯 번째 JSON 데이터 유형은 부울입니다 JSON 데이터 부울 유형의 값은 true 또는 false 일 수 있습니다 부울 값의 JSON 예제는 "isCustomer"입니다

true 부울 값의 다른 JSON 예제는 "closed"입니다 false 여섯 번째 JSON 데이터 유형이 null입니다 JSON null 값은 빈 데이터 값입니다 null의 JSON 데이터 예는 다음과 같습니다 "배우자": null 의미 그 사람에게는 배우자가 없거나 "차량": null 이제 JSON fie에 대해 조금 이야기 해 보겠습니다

JSON 파일은 텍스트 파일입니다 즉, 메모장 + 또는 메모장과 같은 텍스트 편집기에서 JSON 파일을 만들 수 있습니다 JSON 파일 확장명은 json 자, JSON 파일을 만드는 방법은? JSON 생성기가 많이 있습니다 그래서 우리는 그것들의 예를 보도록합시다

다음은 JSON 생성기 여기, 당신은 값의 수 – 인덱스, 인덱스 시작, 정수, 부동 소수점, 이름 및 당신은 당신 자신의 값을 지정할 수 있습니다 생성하려는 행 수를 지정할 수 있습니다 따라서 우리는 3 개의 행을 생성하고 생성 버튼을 클릭한다고 가정합시다 그리고 우리를 위해 JSON 객체를 만듭니다

그래서 이것은 items 배열과 항목 내에서 세 가지 다른 개체가 있음을 알 수 있습니다 JavaScript 프로그래밍을 사용하여 JSON 파일을 만들 수도 있습니다 이제 샘플 JSON 데이터에 대해 이야기 해 보겠습니다 샘플 JSON 데이터는 JSON 공식 웹 사이트 인 JSONorg에서 사용할 수 있습니다

여기에 많은 예제를 볼 수 있습니다 예를 들어, 이것은 용어집의 JSON 표현 과 여기에서는 메뉴의 JSON 표현 등을 볼 수 있습니다 JSON 뷰어가 많이 있습니다 그래서 그 예를 보도록하겠습니다 그래서 여기있다

여기에 붙여 넣은 샘플 JSON 데이터 따라서 주소를 가진 전자 메일의 표현입니다 보낸 사람 주소, 제목, 본문, 크기 및 첨부 파일을 클릭하고 뷰어 및 여기 우리가 볼 수 있습니다 에, 제목, 몸, 크기, 첨부 파일과 from은 개체이며 세 개의 이름 – 값 쌍 (주소, 도메인 및 안전한 보낸 사람)이 있습니다

예쁜 JSON은 웹 사이트에서 만들 수 있습니다 예를 들어, 여기에 JSON을 붙여 넣었습니다 형식이 올바르지 않습니다 우리가해야 할 일은 Beautify 버튼과 잘 형식화 된 JSON을 보여줍니다 자,이 튜토리얼의 모든 것입니다

제 다른 튜토리얼을보십시오 고맙습니다

Static Methods in JavaScript Tutorial : Object Oriented Programming Series – Part 11

안녕하세요 Techsith 자습서에 오신 것을 환영합니다! 오늘 우리는 정적에 대해 배울려고하고있다 자바 스크립트 클래스 메소드 우리는 첫 번째 인스턴스의 차이로 시작합니다 방법 및 클래스있어서, 상기 정적 메소드 인 클래스 방법

우리와 결국 우리가 클래스를 사용하지 않을 때에 해당하는 방법을보고 우리 우리는이 정적 메소드를 사용해야하는 위치의 실제 예를 살펴 함으로써 우리는이 튜토리얼에서 배운 방법으로 모든 예제는 Techsithcom에있을거야 당신은 디테일과 연습에서 그들을 볼 수 있도록 사이트 그들은 모두 jsfiddle에있을 것이다 나는 설명에 대한 링크를 제공 할 수 있습니다

또한 당신이 할 수있는 경우 내가 당신 말하자면 어느 언어로 동영상을 변환하는 데 도움 그들은 영어를 모르는 경우 국민도, 자바 스크립트를 배울 수 있습니다 당신이하지 않은 경우 셋째, 링크가 내 patreon 될하시기 바랍니다 설명에 될 것이다 좋아 그래서 내가 갈거야 그래서 코딩하자 내 첫 수업을 구축하고 클래스가가는, 그래서 다음에 정적 메서드를 추가 자동차합니다 난 단지거야 클래스 자동차를 말하고 난 그냥거야 내부에있다 간단한 정적 메소드와 정적 메소드를 작성하는 방식은 정적 넣어이다 방법의 앞 키워드 그래서 난 그냥 거 정적 말을하고있는 나는거야 메소드 호출 비교 가격이 지금은 지금 가격 비교 아니에요하지만 난 그냥 해요 거 그것은 모든 거 안에 이렇게 작동하는 방법을 보여 할 consoledir는 (IS) 및 그것은거야 인쇄이 있습니다

내가 그것을 호출 할 때 나는 싶어하기 때문에 나는 이것을 할 거 야 해요 라고 그래서 당신이 그것을 호출하는 방법이 될 것입니다 알고 싶어, 당신 내가 carcomparePrice을 (말)과의를 드리겠습니다 있도록 클래스 자체에 직접 전화 그것이 내가이 실행 파예드를 줄 것이다 무슨 말을, 내가 다시 클래스 자동차를 얻을 것 그래서 기본적으로 정적 메서드는 클래스라고 정적 메소드의 차이가 인스턴스 메소드 인 인스턴스 메소드는 내가 걸릴 그래서 클래스의 인스턴스에서 호출 클래스의 클래스와 그것에서 객체를 생성 기본적으로 인스턴스 내가 할 수있는 이러한 개체에서 인스턴스 메서드를 호출합니다 그러나 클래스의 방법이다 그게 내가 전화하고있는 무슨 그래서 정적 방법은 직접 클래스 자체에 호출 그것을 차에 지금은 단지거야 또 다른 추가거야 그럼 인스턴스 메서드를 만들 수 메소드 호출 getColor에서 () 당신이 볼 수 있듯이 그래서 그것의 앞에 정적이 없다 이 인스턴스 메소드입니다

(이) 그것은, 같은 일을 할 것입니다 그냥 consoledir을 말할 것이다 나는이 클래스 자동차의 인스턴스를 만들어야합니다 나는거야 () const를 newCar = 새 차를 말한다; 확인 그래서 지금 클래스의 인스턴스를 생성하고 내가 그래서 지금은이에 인스턴스 메서드를 호출 할 수 있습니다 색을 되찾아와의 새로운 인 첫 번째 있도록이 확실히 실행 할 것 자동차 나에게 자동차 객체를 제공하고, 두 번째는 내가하면 나에게 클래스 자동차를주고있다 기억 나는 클래스 내부에 직접 비교 가격을 볼 것이다 클래스를 확장 우리가 클래스 보았다 지난 튜토리얼에서 프로토 타입 방법이 아니다 및 자세히 서브 클래스 및 인스턴스 메서드를 추가 할 때이 프로토 타입에 간다 당신이 프로토 타입이있다 볼 수 있고 프로토 타입 내에서 내가 보는 것 같이 얻을 여기에 컬러 방법은 그러나 정적 방법은하지 않는 클래스 내부에 간다 그 주요 차이점은 그래서 자신의 프로토 타입으로 이동합니다 나는 개체의 자동차를 볼 때 나는 정적 메서드를 찾을 수 없습니다

당신이 아니라 수업 방법을 볼 것이다 getColor에서 () 이제, 적절한 생성자를 추가하고이 더를 만들어 보자 유용한 예 난 그냥 생성자를 말하는거야,이 두 가지를 할 것이다 속성 첫 번째는 바로 다음 색상을 될 것와 두 번째는 가격이 될 것입니다 그리고 무엇을 할 것 것은 내부, 그것은을 설정합니다 이 클래스의 초기 속성과 I)이 (단지 거 사용 objectassign 해요 수업

나는 (objectassign 사용하고 있습니다) 그래서 할 필요가 없습니다 thiscolor 컬러와 동일 가격과 동일 thisprice

만약 너라면 ) (objectassign 무엇인지 모르는 내가 여기에 대한 링크를 제공합니다 튜토리얼을 가지고 있습니다 좋아, 다음 GET 색상 방법이 될 것이다 단순히이 단지 그것을 할 점 말 "thiscolor를 돌려"지금은 정적 방법에 온다 그래서 그것은 가고있다 에 사용? getColor에서 ()는 실제로 내부 this

color 활용하는 방법을 알아보십시오 그 신체 정적 방법은 속성에 액세스하려면이 옵션을 사용하지 않습니다 정적 메소드이다 기본적 종류의 유틸리티 기능 등에 사용 다음은이에 내가하고 싶은 것을 comparePrice는 () 나는 다른 두 가지의 가격을 비교하려면입니다 carsso 나는 차에 하나의 객체와 자동차 두 개체를 전달할 수 있습니다

이제이 될 것입니다 이 차의 경우는거야 내가거야 무엇을 할 객체 수와 내부 그래서 난 그냥 말할거야 반환 mathabs (car1price – car2price) 당신은 내가이 점 상금 또는 기본적으로는 무엇을 아무것도 사용하지 않는 볼 수 있듯이 이 객체의 속성을 사용하지 않는 것 대신이 매개 변수를 사용한다면 그 설정 정도 객체 자체에 아무것도 못하고 있어요 통과 됐어요 그래서 지금 나는 거 CONST 레드 카 = 새 차 () 말을 해요의 두 차를 만들 수 있습니다

지금 기억 그렇게이 거 적색과 거의 그것의 2 개 개의 속성 색깔이있다 거 백 달러를 말한다 그 싼 차를 두 번째 자동차가 될 것입니다 파란색 자동차가 거의 푸른 색을 가지고 있고 그 가격거야 102 달러합니다 파란색 차는 내가 왜 모르는 빨간 차보다 조금 비싸다 일반적으로 가정 빨간 차 더 화려하고 더 비싼하지만 누가 무슨 상관이 될 수 있습니다 그리고 이제 compareprice에 () 난 단지 거 패스 빨간 차와 파란 차와 나는 이것이 지금 여기서 말하는 실행 그래서 때의 모두의 앞에 CONSOLELOG을 만들어 보자 새 차는 빨간 차 색상 말을해야 내가 실행할 때이 첫 번째 날 준다 나는 색상을 얻을로 나에게 빨간색 속성을 다시주는 빨간 차 때문에 빨간색 기본적으로 비교 가격 비교 빨간 차의 상금과 이 중 두 개 사이에 나에게 차를 제공하고 파란 차 두 가지입니다 상품은 자동차에 대한 좋은 유틸리티 함수 인 비교 그래서 여기에 달러 객체 어떤 속성을 조작하지만에 유틸리티를 제공하지 않는 가격 비교

내가 당 킬로미터에 갤런 당 마일을 변환하고 싶은 경우의 말을하자 하는 것 유틸리티로 갤런, 나는 다른 유틸리티 기능을 쓸 수 있습니다 정적 방법과 기본적으로 갤런 당 마일을 것이다 그것은 반환 갤런 당 킬로미터로 변환하지만 그와는 아무 상관 없습니다 당신이 확장 할 때 자동차 객체 자체하지만 지금은 자동차 관련 유틸리티를 제공합니다 서브 클래스의 서브 클래스를 만들 수있는 클래스는 정적 메소드를 가질 수 있으며, 클래스는 할 수 또한 그래서 어떻게 작동하는지 살펴 보자 정적 방법을 그래서 조금 다른 예를 살펴 보자하지만,이 또한이 될 것입니다 클래스 자동차 좋아 나는 클래스 차를하고 난 생성자를 가질 수 있도록하는 단순히 가격을 설정하고, 나는 정적 메서드가 sellCar라고 한거야하는 기본적으로 이것은 당신이이 볼 수있는 지금 인수로 자동차를하지 않습니다 소요 하지 않는 클래스는 객체 그래서 이것과 혼동하지 마십시오입니다 거기에 자본이 여기에와 있기 때문에 체내 그것은 기본적 것 "에 대한 판매"를 반환하고 난 그냥거야 thisprice의 가격을 넣어 해요 이제, 내가 말할 수있는 그래서이 차 객체를 확장 할 수 있도록 "클래스 도요타 자동차 확장" 클래스 자동차에서 도요타를 생성하고 또한 가격을 것이다 난 그냥 해요 거 내가 도요타의 자신의 특성과 그것을 가지고 싶지 않아 사촌 슈퍼 (가격)을 말한다 같은 이름을 가진 자신의 정적 메서드를 가질 수는 판매 자동차를 말하고 그것을 할 수 있습니다 또한 자동차 객체가 전달하지만 여기에있을 것입니다 그것은 반환 도요타 supersellCar을 말할 것입니다 () 그리고 여기 차를 통과 할 것입니다

모든 권리 내가 클래스 차를 가지고 있고 그래서 도요타라는 서브 클래스는 지금의이 도요타에서 개체를 만들 수 있습니다 그래서 나는 CONST 캠리 = 새로운 도요타을 (말) 가격이 수백 달러 수 있습니다 그 정말 저렴 캠리와 나는 해요 단지거야 말을 consolelog (Toyotasellcar ()) 및 난 그냥 거 여기 캠리 개체를 전달 해요 그리고 내가 너무 무엇을 얻을예요 이 토요타있는 클래스를 부르고 기억 오브젝트 거기에 없습니다 내부 객체를 전달한다

내가 이것을 실행하면 그래서 나에게 도요타의 판매를위한 제공 왜 왜 등상을 기억 왜 정의되지 않은이 자동차 도트 가격 있어야하는데 당신은 정적 메소드 내에서이 전화를 안하고 있기 때문에 그래서 그 이유 그것은 나를주는 정의되지 않은 것 나는 거 다시 실행 말을 나에게 도요타의 판매를주고 있어요 $ 100 그래서 그 정적 클래스 메소드에 대해 전부 괜찮 작동합니다 그리고 우리는 객체 지향 자바 스크립트이 큰 시리즈의 끝 폐쇄 만약 너라면 당신이 그렇게 할 수있는 처음부터 시작하지 않았습니다

여기에 대한 링크를 제공하지만 우리 것 여전히 자습서의 부부는 우리가 아직도 장식 수업을 할 필요가 떠났다 우리는 그 다음이다 이렇게 나는 당신이 튜토리얼 좋아하고 경우 희망하지 않은 믹스 같은 해주십시오 않았다 구독하고 건설적인 의견을 제공합니다 고맙습니다! 🙂

3D Programming with JavaScript Tutorial 1

안녕들 오늘 나는 야하는 나는 당신을 보여주는 것입니다 새로운 튜토리얼 시리즈를 시작 해요 자바 스크립트를 사용하여 3D 게임을 프로그래밍하는 방법 그래서 우리는 환경, 아바타, 물리학 게임을 만듭니다 그리고 훨씬 더 그리고 당신은 분명히 자바 스크립트를 배울 수 있습니다 우리가해야 할 일을 모든 그래서 일단 이 웹 사이트로 이동합니다 gamingjs

COM / 얼음 그곳에 여기 코드 편집기를 말해야한다 다음은 부동 면체 또는 무엇이든 그것이라고 사용하여 코드의 무리를해야한다 그래서 지금 우리는 새로운 프로젝트를 만들려고하고 나중에 참조 프로그램 / 어떤 모양을 만들 수 있습니다 그래서 당신은 무엇을 기본적으로 새로운 버튼을 클릭의이 프로젝트 "모양"의 이름을 보자 그리고 지금 우리는이 라인에 코딩을 시작하는거야 시작하기 전에 나는 당신에게 뭔가를 말할거야 브라우저는이 과정에서 모든 프로젝트를하는 것이 좋습니다 좋아, 크롬 가장 바람직인가? 다른 건, 크롬 이 프로젝트는 확실히 작동하지 않습니다 인터넷 익스플로러 그들은 인터넷 익스플로러에서 작동 실 거예요 일부는 파이어 폭스와 함께 작동하지만 그렇게 크롬 모든 시간을 사용할 수 있는지 확인하지 않는 것이 좋습니다 우리는 먼저 우리가 만들 것입니다 몇 가지 모양을 코딩하고 생성을 시작합니다 다음과 같은 내가 타이핑 무엇이든 그냥 복사를 이동하십시오 내가 뭔가 잘못했던 기다립니다

— 내가 체크해 볼게 아 예 지금은 잘한다 나는 지금 무엇을 모든 코드 수단을 설명 할 것이다 코드의 그 라인을 사용하면 모든 수 있었어야 구 또는 볼을 나는이 수단의 어떤 각을 설명 할게 우선 나 기본 뭔가를 설명 할 수 3D 일들은 두 부분으로,이 경우 모양을 커버 모양과 뭔가에서 내장되어 있습니다 우리는 모양과 커버 두 변수 여기있어 결합 그 두 가지 3D 프로그래밍에 표시되는 실제 개체 인 메쉬라고 뭔가를 만들 과 메쉬는 3D 일에 대한 멋진 단어입니다 우리가 여기보고로 메쉬 형태를 필요 또한 기하학이라고도하고 뭔가 그들에게 바로 여기에 표시이라고도 재료를 커버하는 이 튜토리얼에서 우리는 다른 모양을보고 작업되며, 우리는 나중에 튜토리얼까지 같은 쉐이더 및 모든 물건과 조명과 재료를 추가하지 않습니다 하나 더 모든 작업이 자동으로 브라우저에서 웹 페이지에 저장됩니다

그래서 우리는 지금 예를 들어 당신이 원한다면 변수로 약간의 실험거야 큰 공을 우리가 예를 들어 이런 식으로 뭔가를 할 수 있도록 톤 큰 공을 만들 것 (500) 당신도 그것을 볼 수 있도록 큰 지금 예를 들어, 지금은 정말 큰입니다 우리가 50을 넣어 경우? 정말 작아요 그래서이 숫자는 증가 또는 공의 크기를 감소시킨다 같은 그래서 당신은 정말 아니에요 볼 수 있습니다 구형의 많은 부분과 여기와 광장이 모든 청크를 가지고 있으며, 그것은 정말 부드러운 아니다 (뭔가는 전혀 관계가없는했다)

우리가 추가려고하는 것은 새로운 번호입니다 내가 정상적인 크기를 조정할 수 있습니다 우리가하려는 것은이 번호를 추가 할 것입니다 그래서 당신이 볼 수있는 것이 더 라운드입니다 당신이 볼 수 있듯이 그것은 당신을 훨씬 부드럽고입니다 그래서 그래, 그렇게 좋은 보인다 무엇 두 숫자가 의미하는 것은 덩어리의 수 에서 간 후 세 번째 숫자는 같은 주위 청크 수이고 여기이 부분이다 빠른 팁은 부드러움을 변경하지 마십시오 당신이 정말로 원하는 당신은에 있지 않는 한 그 변화 때문에 그래서 그래픽 및 처리 그것은 천천히처럼 이동합니다 그래서 지금 우리는이 라인을 수행하여 지금 옆이 공을 설정하는거야 그래서 우리는 당신이 이러한 변수를 실험 할 수있는 다른 곳으로 볼을 이동 한 볼 수 있습니다 당신이 비행기를 조정 알고있는 경우이 숫자는 지금 어디에 당신은 알고 있어야합니다

이 x 축이다 이것은 Y 축이며 그리고 우리는 3D로 작업하고 있기 때문에 이것은이 깊이 길이의 높이와 깊이 인 Z 축이며 그래서 지금 우리는 큐브를 만들거야 그래서 우리가 지금 할 겁니다 것은 다음과 같다 그래서 당신은 무엇을보고 바로 지금이다 분명히 단지 광장 당신은 왜 사각 경우를보고 있어요 ", 자신을 물어 될 수있다 큐브해야하는데? " 카메라 만 찾고 있기 때문에 잘 기본적입니다 상자의 측면 중 하나에 직접 직면 그래서 예를 들어, 실제 생활에서 당신은 하나 개의 측면에서 상자에서 찾고 있다고 가정 해 봅시다

당신은 그 쪽을 참조 만 다른 아무것도 그래서 우리가해야 할, 그래서 더 상자 모양을 다음과 같은 또 다른 라인입니다 그리고 지금 우리는 큐브의 것을 진정으로 볼 수 있습니다 이 세 숫자는 그래서 무슨 짓을 한거야? 잘 이 숫자는 회전 점점 위치를 제어 이 숫자는 큐브를 만드는 때문에 다시 아래로 회전 취득 이 좌표 평면 것처럼도 그래서 이것은이다 다운 05 05 왼쪽에서 오른쪽으로 그래서 당신은 실험 할 수 여기에 이러한 변수를 사용하면 다음과 같은 이들 변수를 실험 할 수 있습니다 예를 들어 사각형을 만들고 싶어 예를 들어 크기를 변경하려면 당신은 우리가 바로 여기에 정말 얇은 사각형을했습니다 여기를 참조 당신이 숫자 주위를 재생하려면, 비디오를 일시 중지합니다 그리고 지금 우리가 더 많은 모양을 할 수의 지금이 이동하자 그래서 지금은 이제 거기에 넣어 보자 그리고 지금 지금의하자

우리는 실린더가 세 번째 모양을 만들 수 있습니다 또한 때때로 튜브라고, 그리고 3D 프로그래밍에서 놀라 울 정도로 유용 모양입니다 당신은 나무 줄기, 깡통, 바퀴와 같은 실린더를 사용할 수 있습니다 또한 놀라 울 정도로 자신의 측면을 변경하여도 콘 상록 나무를 사용하여 만들 수 있습니다 피라미드 그럼 다음을 수행 할 수 그래서 지금 우리는 볼 수 있어야합니다 큐브와 동일하게 이전에 우리는 하나의 얼굴을 볼 그래서 우리는 비트를 회전 해 그래서 지금 우리는 그가 전체를 실린더 볼 수 있습니다 이제 우리는 약간의 전문을 할 수있어 첫째 날이 변수가 무엇을 의미하는지 알려주지 이러한 변수는 의미 얼마나 큰 실린더의 상단과 하단이 그리고 마지막 번호는 실린더가 얼마나 높이를 나타냅니다 우리의 실린더 그래서 있는 상단과 하단 크기와 높이 (20)는 100이다 당신은 예를 들어,이 번호를 변경한다면 어떻게 될까요? 우리는 100 두 숫자 20에 마지막을 전환 할 때 발생하는 볼 수 있습니다 (그냥 내가 입력하는 모든 입력 그래서 여기에 약간의 혼란을 가지고) 너 자신을보십시오

변수와 실험 비디오를 일시 중지합니다 (I는 엉망) 이들 변수를 실험하기 위해 연습을 많이 걸립니다 (더 어질러) 이 번호 그래서 당신이 만드는 것은 평평한 디스크이다 자, 이제이 다른 숫자와 실험을 할 수 있습니다 상위 1 바닥 (100) 높이 100 기본적으로 어떤 일이 이제 우리는 작은 피라미드를 만들었다는 것이다 바로 여기가 이집트에 속한다 (연도 OMG OF BEST PUN) 자, 이제 우린이 실린더에 대한 또 하나의 일을하고 나를 다시 정상으로 크기를 넣어 보자 바로 여기 정상이어야한다 마십시오 당신은 그들이이 원활하지 않은 같은 영역과 동일하게, 그들이 보이는 것을 알 수 있습니다

그래서 당신이 기본적으로하는 일은 그냥 추가입니다 또 하나 개의 숫자 여기이는 부드러움을 결정한다 당신이 여기에서 볼 수 있듯이 지금은 많이 부드러워입니다 나는 당신이를 드리겠습니다 당신은 자신을 시도 당신은 4면 피라미드를 만들 필요가 숫자는 무엇입니까? 당신이 원하는 경우,이 비디오를 일시 중지합니다 당신은 실험을 원하고, 당신이 알고 싶은 해달라고 사기꾼 경우, 물론 여기에 대답합니다 그래서,이 답이다 바로 여기에

그래,이 피라미드입니다 그리고 지금 빠른 팁 가능하면 치트 이 같은 들릴 수도 정말 나쁜, 실제로 그것은하지만 프로그래밍하지만 프로그래밍을하지 현실에서 분명히 사실 특히 3D 프로그램에서 당신은 항상 심지어 일을하는 쉬운 방법을 찾아야한다 때문에 뭔가를 할 수있는 일반적인 방법이 있다면 거기에 예를 이것처럼 할 수있는 더 좋은 방법이 될 수있다 좋아, 우리는 지금까지 잘하고있어 지금 우리가 갈거야 그것을 따로 설정이 개 마지막으로 모양을 좋아, 우리가 거기에 넣어했고 우리는 비행기로 평면을 할 것입니다 비행기는 기본적으로 평면이다 즉, 모든입니다 비행기는 지상에 특히 유용하지만, 그들은 또한 문을 표시하는 것이 편리 할 수 ​​있습니다 게임의 가장자리 그래서 우리는 다음을 입력 할거야 좋아요 그래서 지금 거의, 그것은 기본적으로 큐브와 같은 일이 우리가 바로 여기에 참조하는 것은 바로 여기에 단지 정사각형 그래서, 약간의 변수 실험을 할 수 있습니다 우리가 낫 네요 그래서 약간 회전 할 필요가 전에 대기 당신은 경 사진처럼 보이는 우리가 좀 더 회전이 지금 볼 수 있습니다 광장,하지만 우리는 더 많은 실험 겁니다 그럼 이러한 변수를 실험 할 수 있습니다 예를 들면 당신이 더 큰 당신이 시도 할 수 있도록하려는 경우 그 사각형을 만들고 즉 거의 전부 당신은 비행기에 대해 알 필요가있다

그것은 우리가 지금 할거야 그래서 정말 기본 모양이 있어요 지금은 세계에서 가장 큰 모양을 따로 보관 해두고 만들어 우리는 여기에 넣어거야 좋아, 그래서 지금 우리는 최종 모양을 만들려고 도넛 그래, 당신은 당신이 먹는 종류를하지 볼 수 있지만, 디지털 하나 그것은 그것의 과학적 이름은 토러스라고 TORUS 단지의 경우에 그래서 우리는 우리가 전에했던 것과 동일한을 기본적으로 수행되는거야 이 해 보자 그리고 우리는 바로 거기에 우리의 영광을 육각형 형상의 도넛 내가 말할 것이 정말 이상한 보인다 그래서 지금 우리는 그것을 많이해야 그러나 많은 진짜 좋아해 그것을 위해 부드러운 당신이 기본적으로 할 필요가 그래서 도넛이 될 수 있습니다 구 두 개 번호를 추가 두와 같은 일을하고 다음은 상기 두 개의 숫자가 될거야된다 그래서 지금 당신이 훨씬 보면 그 아름다움을보십시오 그것은 놀라운와 당신이 몇 가지 초콜릿을 넣어 경우, 좋은 맛을 것입니다 그래서 지금의이 마지막으로 트릭을 만들어 보자 당신이 준비? 이거 봐요

더하다 314 그것은 반 먹은 도넛은 무엇 일 것 같아요 그리고 어떻게 됐을까? 우리는 할 수 우리의 튜토리얼을 체결하기 위해 이러한 모양을 애니메이션 그럼 진짜 멋진 같은 멋진 뭔가를 할 수 있도록 이 해 보자 이 거 멋진된다 나는 당신에게 기다려, 뭔가 문제가있을 나타납니다 확인 해보자 당신은 항상해야 할 한 가지 때문에 코드를 확인하다 때때로 그들은 실행 못해 그것은 아마 당신의 문법에 오류가 확신 당신은 항상 확인하기 때때로 때문에 당신은 물건을 그리워 바로 이거 야 그거였다

그것은 실수였다 이 이제 모든 좋은, 그리고 당신이 지금 볼 수 모든입니다한다 이 부동 및 이동 beautifullness 그것은 내가 아는 이상한 보이지만, 그것은 멋진 보인다 나는 당신을 말할 수있다 다음 튜토리얼에서 우리는 볼 것이다 어떤 일이 발생하면 우리의 코드 편집기 충돌 및 모든 물건과 이 프로젝트의 전체 버전을 확인하려면 내 웹 페이지 stickmanlabsnet로 향할 (설명에 링크) 및 당신은 기본적으로 볼 수 있습니다 이 프로젝트의 전체 코드 그런데 우리는 이런 짓을! 그것을 감사합니다! 당신은이 튜토리얼을 시작했습니다 그리고 당신은 이미 AWESOMENESS을했습니다

우리는 이미 코드 편집기에서 프로젝트를 코딩하는 방법을 알고있다 당신은 다른 모양을 많이 만드는 방법을 알고 우리는 심지어 자바 스크립트 물건을 이동하고 회전하는 방법을 알고 무엇보다도 그것은 단지 우리의 형상을 한 후 꽤 멋진 애니메이션을 만들기 위해 우리에게 코드의 15 개 라인을했다 즉 좋은 시작이다 이제 우리는 3D 프로그래밍 코드하는 방법에 맛을 가지고 있는지의 웹 브라우저에 대한 프로그래밍에 대해 조금 이야기하자 그러나 당신이이 튜토리얼을 더 원하는 경우 다음 비디오에 가입하시기 바랍니다 될 것입니다 감상 BYE를위한 THX

3D Programming with JavaScript Tutorial 2

얘들 아 난 Stickman의 오늘 우리는 우리의 자바 스크립트 과정을 계속하는 것입니다 이 튜토리얼에서 우리는 consolel와 함께 연주 깨진 무엇을 발견 할 수 있습니다 우리가 시작하기 전에 나는 당신에게 간단한 팁을 이야기하고 싶습니다 프로그래밍은 압도적 일 수있다

때때로 당신이 벽에 컴퓨터를 던져 할 수 있습니다 (하지) 이 물건을하는 동안 마음이 두 가지 사실을 유지한다 1 : 당신이 모르는 일이있을 것이다 : 이 괜찮습니다 2 : 프로그램 중단하려고 : 이 괜찮습니다 다만 모든 사람들이 함께 투쟁하고 잘 수있을 것 기억 해요

이제 튜토리얼의이 파괴 물건을 부르 자, 새 프로젝트를 시작 시작합니다 그래서이 튜토리얼 우리는 자바 스크립트 콘솔이 필요합니다 그것은 당신이 할 필요가 Ctrl 키 + 시프트 + J이다 크롬에서 열 쉽게 그리고 거기가 열립니다 Mac 컴퓨터에서이 명령 + 옵션 + J이다 이제 디버깅을 시작하자

코드 옆에 빨간색 X는 ICE (또는 코드 편집기)을 의미 실행 코드를 중지하는 문제를 감지합니다 의 입증하는 정말 나쁜 자바 스크립트를 작성할 수 있습니다 즉 그 이유를 궁금해하는, 나쁜 자바 스크립트입니까? 아니 그렇게 말한다 때문에, 당신이 괄호 뒤에 오는 단어가해서는 안 때문에 나쁜 이 같은 코드를 작성하는 경우, ICE 문제와 당신이 라인 옆에 빨간색 X가 표시됩니다 그 선을 표시하는 고정되어야한다 오버 마우스 포인터를 이동 빨간색 X는 "문 앞에 세미콜론 누락"로 실제 오류 메시지가 표시됩니다

ICE는 괄호 후 단어를 넣어 당신을 말하지 않을 것이다 이 알고있는 모든 괄호는 줄의 끝에서해야한다는 것입니다, 여기에 그 사건이 아니었다 이 감지되면 라인은 완성되지 않았습니다 그것은 경고하는 오류를 트리거 "야! 당신은 줄 끝에 세미콜론을 잊었다!" 이 라인이 끝나야 위치를 알아 내기 위해 우리에게 달려 있습니다 당신이 빨간색 X를 볼 때 몇 가지 코드에서 확인 : 당신은 세미콜론을 잊어 버리셨습니까? 당신은 빨간색 X 선에 문제가 표시되지 않는 경우뿐만 아니라, 이전 행 봐

ICE는 문제가 시작되는 위치를 항상 알 수없고, 하나 개 또는 두 개의 라인으로 해제 될 수있다 편집기의 버전에서는 업데이트됩니다 때때로 당신은 문제가되지 않습니다 빨간색 X는 달리, 코드의 왼쪽에 나타나고 노란색 삼각형은 showstopper 없습니다 코드의 라인이 노란색 삼각형으로 표시하는 경우 코드는 아마 실행됩니다 하지만 제대로 실행되지 않을 수 있습니다 그것은 바로 나타나는 이러한 삼각형을 없애하는 것이 가장 좋습니다 의이 쓰레기를 좀 더 나쁜 자바 스크립트를 작성,하지만 액션이를 넣어 보자

먼저이 줄을 제거하고 다음 줄을 추가합니다 이 경우에, ICE는 노란색 삼각형을 통해 우리에게 것이다 식품 라인은 아무것도하지 않습니다 "대신 할당 또는 함수 호출 및 식을 예상" 우리는이 같은 과제로 여기 음식 라인을 변경하여 문제를 해결할 수 있습니다 ICE는 새로운 식품 라인을 수용하고 더 이상 오류가 표시되지해야합니다

그러나 비록 ICE는 더 이상 문제를보고하지 않을 수 있습니다 이 코드에 뭔가 문제가 여전히, 그리고 콘솔이 들어오는 곳이다 콘솔을 엽니 다 그리고 거기에 다음과 같은 오류가 표시되어야합니다 : "catch되지 않은 ReferenceError가 정의되지 먹는" 브라우저가 실현 나쁜 자바 스크립트 코드를 실행하려고하면 거기에 우리의 프로그램에서 문제가 있었다 우리는이 기능을 먹고 실행하는 브라우저를 말했지만, 우리는 어떻게 작업을 수행하는 브라우저를 말한 적이 없어요 코드를 실행하려고 할 때 발견 된 오류는 런타임 오류라고 우리는 나중에 튜토리얼 기능에 대한 자세한 내용을 이야기 할 것이다 지금은 함수가 또 다시 실행할 수있는 코드를 작성하는 방법입니다 알고 충분하다 빨간색 X과 노란색 삼각형 ICE에 의해 플래그 오류는 컴파일시 오류라고합니다 컴파일 시간 오류가 컴퓨터 코드를 읽고 그것으로 무엇을 이야기 할 때 붙잡힌 다

컴파일 코드 수행 할 작업을 결정하는 컴퓨터를 말한다 콘솔은 우리가 런타임 오류를 수정하는 데 도움이됩니다 이 문제를 해결하려면, 음식을 먹는 방법 Google의 자바 스크립트 프로그램을 알 수 있습니다 우리는이 선 후 기능을 추가하여이 작업을 수행 할 이 시점에서 더 컴파일 시간 오류, 자바 스크립트 콘솔에서 어떤 런타임 오류 및 메시지가 없을 것 "! 쿠키 놈 놈 놈"

우리는이 튜토리얼을 마무리하기 전에, 몇 가지 일반적인 3D 프로그래밍 오류를 살펴 보자 다음을 추가합니다 바로 거기 좋아 우리는 나쁜 자바 스크립트를 가지고있다 당신은 더 컴파일 시간이 없다는 것을 알 수 있습니다 이 코드에 대한 ICE의 오류

브라우저는 자바 스크립트 코드를 읽고 말한다 : "그래, 그게 내가 지금 그것을 실행하는 것입니다 나에게 완벽하게 정상적으로 자바 스크립트 코드처럼 보이는!" 그러나, 문제는 코드가 실제로 실행될 때 팝업 당신은 자바 스크립트 콘솔에서 런타임 오류를 볼 수 있습니다 의 무엇이 잘못되었는지 살펴 보자 당신이 이미하지 않은 경우 먼저 자바 스크립트 콘솔을 열었다 거기에서 당신은이 경우에 종종 있지만 매우 도움이되지 않는 메시지가 표시되어야합니다

"catch되지 않은 형식 오류 : 정의되지 않은 함수 아니다" 이 메시지는 SphereGeometry가 바로 여기에 잘못 입력했는지 우리에게 얘기를 시도하고있다 코드를 확인합니다 그것은 밝혀 우리는 전자를 놓친 대신 SpherGeometry을 입력했습니다 자바 스크립트 콘솔의 메시지는 매우 가난하고 도움이되지 않는 것입니다 여기에 해결하기 위해 두 가지 문제가 있습니다

첫째, 정말 우리에게 아무것도 말하지 않는다 "정의는 함수가 아닙니다"하고하는 것은 쉽지 않다 알다 심지어 자바 스크립트 전문가들은 하나 혼란을 얻을 두 번째 문제는 오류 메시지의 줄 번호입니다 의 이전 버전 ICE 코드 편집기, 때로는 얻을 수 해당하지 않는 경우가 여기에 라인에 대해 혼란스러워하지만 때때로 당신은 콘솔 행 번호가 항상 정확하지 않은 기억해야합니다

의 다시하자 이 고정된다 당신이해야 할 모든 전자를 추가입니다 이제 새로운 오류가 나타납니다 당신이 나타납니다 : "세 가지가 정의되어 있지 않습니다" 여기에 자바 스크립트 콘솔에서 우리가 "세"모두 대문자에 있어야를 잊었 우리에게 말하고있다 (세) 우리가 쓴 어떤 자바 스크립트 콘솔이 우리에게 말하고있는 것이다 그런 "세"와 같은 아무것도 없습니다

그래서 당신은 당신이 오류가 다음에 그것을 기억하십시오, 3 차원 라이브러리로 작업 할 때 이것은 매우 일반적인 실수이다 당신이해야 할 모든 대문자로 다시 넣어 그것은 잘되어야합니다 그리고 이제 뭔가가 나타납니다 이것은 무엇입니까? "thissetValues는 Object

THREEMeshNormalMaterial에서 함수가 아닙니다" 당신은 거기에없는 뭔가가있다 볼 수 있을까요? 그래, "새로운"입니다 당신이 그것을 해결하는 방법 때문이다 자 이제 결승전 "scene

ad는 함수가 아닙니다"음, 그것은 기본적으로 우리에게 말하고 그 그것은 잘못 철자와 같은 것은 "scenead"으로 없다 그것은 적절한 기능이 아니다 당신이해야 할 모든 다른 D 추가입니다 그리고 거기에 우리는 우리의 영광스러운 공을 가져야한다

그래서 우리는 경우에 무엇을해야합니까 우리의 코드 편집기 ICE 나누기? 너에게 뭐 하나 알려 줄께 웹 브라우저를 깨고 의외로 간단합니다 당신은 만 덩어리가있는 영역을 생성, 단절 당신이없는 정지 점과 재귀 함수를 작성하는 경우, (우리는 나중에 얘기하자) 브라우저가 중단됩니다 브라우저가 깨진 경우, 다음 ICE 코드 편집기 바로 고장? 네,하지만 쉽게 수정이있다

나는? "E"이동하기 만하면됩니다 또는 "? 편집 전용" 이 ICE 코드 편집기 편집 전용 모드에서 당신을 넣어 것입니다 어떤이 처리되지는 않습니다 그리고 당신은 당신이 원하는 모든을 편집 할 수 있습니다 그것은 실행되지 않습니다, 그것은 충돌하지 않습니다 브라우저 충돌했다 당신의 라인을 다시 넣고 자 할 때 기본적으로 할 필요가있다 정상적인 URL로 돌아가서 거기 당신은 그것이있다 그래서이 튜토리얼을합니다

다음 튜토리얼, 우리가 모양을하고 어디에서 일이 잘못 갈 때 확인하는 방법을 알고있는 지금, 우리는 우리 자신의 아바타를 구축하여 우리의 첫번째 게임을 시작 하겠지만, 그 다음 비디오에있을 것입니다 (YOUTUBE TALK) 내 이름은 Stickman의 내가 나중에 보자

lesson #26 / html5, css, javascript tutorial, web programming

안녕 모두,이 수업 # 26 내가 당신에게 내가 구현 일부 기능을 보여주고 싶습니다 몇 달 전에 – 나는 휴식을 찍은 나는 당신에게 보여 할 시간이 없었다 – 당신이 웹 사이트로 이동하여 기능 목록을 아래로 스크롤하면 당신은 표시되는 내용 나는 거 얘기 할거야 – 나는 타이프 라이터, 커피 스크립트와 바벨과에 대한 지원을 추가 이들의 도움으로 당신이 훨씬 더 신뢰할 수있는 코드를 생성 할 수 있습니다, 당신은 더 나은 만들 수 있습니다 코드는 – 예를 들어, 타이프 라이터를 사용하여 당신은 당신이 발견하는 데 도움이 정적 입력을 사용할 수 있습니다 일부 대신 런타임의 컴파일 시간 동안 실수의 종류, 그래서 당신은 더 만들 수 있습니다 신뢰할 수있는 코드 – 반면에 당신의 다른 프로그래밍 스타일을 사용할 수 있습니다 커피 스크립트와 , 루비와 같은 다른 언어에 의해 영감을하는 것은 예를 들어 당신은 더 많은 합성 설탕을 추가 할 수 있습니다 까다주기와 난이도 열거 등을 사용하여 코드에 -와 도움을 바벨 당신은 당신의 코드가 특정 대상 시스템에서 실행할 수 있는지 확인 할 수 있습니다 지금은 세부 사항을 수행 할 수 있습니다 않을거야, 플랫폼을 대상으로, 그래서 확인해 주시기 바랍니다 이 링크를 클릭하면 예제와 더 많은 설명을 찾을 수있을 것입니다 그들이 작동하는 방법 – 당신이 데모에 가면, 당신은 내가 해요 통해 예제 코드를 찾을 수 있습니다 당신은 당신이 아니라 당신을 스크립트 태그를 사용하지만,하지 않는 예를 들어, 사용하는 방법을 보여 그렇게이 사용하고자하는 언어의 종류를 지정 여기 유형 옵션을 추가해야 정말 아무것도하지 않는다, 당신은 볼, 당신은 빈 페이지를 얻을, 난 그냥 당신에게주고 싶어 당신은 내가 유형을 사용하고 사용에있어 여기에서 볼 예를 들어, 예를 볼 수있는 빠른 타이프 라이터의 당신은 변수가 항상 사용자가 지정하는 유형이있을 것이라는 점을 확인 할 수 있습니다 그래서 당신은 실수와 달리 발생하는 것이다 논리적 많은 문제를 제외 할 수 있습니다 자바 스크립트를 사용하는 경우, 감사보고에 대한

lesson #27 / html5, css, javascript tutorial, web programming

안녕하세요 모든 사람이 수업 # 27 내가 너희를 커피 스크립트가 당신을 위해 무엇을 할 수거야 쇼를 해요, 이것은 우리가 가진 무엇이며, 여기 함수, 우리는 단지 수의 제곱을 반환이다 – 나는 단지 화면에 인쇄하고 당신은 내가 여기에있는 괄호를 사용하지 않는 눈치 경우,하자 우리가 49를 얻을 수의 페이지 소스를 보자, 참조, 이것은 그것의, 그것은로 번역 한 무슨이다 오히려 복잡한 -이 조작 배열에 올 때, 그것의 -의 또 다른 하나를 보자 자바 스크립트 그렇게 정말 어색, 그것은 어렵다 – 대신 여기 그냥 걸릴 수 있습니다 및 범위를 지정하면 어디 보자, 새로운 데이터로의 일부를 대체 할 말 – 당신이보고, 그것은 대체 된 것 -의 페이지 소스를 보자 – 이것은 번역 한 무슨이다 그것은 매우 복잡, 그것은 스플 라이스 기능을 사용하고 다음 그것을 합치 것 단지 – 당신이 할 수있는 데이터는, 당신은 싶어 그 쓰지 마세요, 당신은 단지 싶어은 효율적 coffeescriptorg 및 예제의 나머지 부분을 확인로 이동,이 녀석은 정말했다 시청에 대한 좋은 작품 감사

lesson #28 / html5, css, javascript tutorial, web programming

이 수업 # 28 내가 난, 당신에게 당신의 커피에 대한 몇 가지 합성 설탕을 보여줄 거 야 거 당신 루프와 정말 멋진 커피 스크립트에 조건문을 보여 – 그래서 우리가 여기에있는 것은 우리가 화면의 중앙에 모든 인쇄 스타일이며, 우리는이 문서에 개체와 텍스트의 모든 종류의 글을 인쇄라는 여기에 하나의 함수 큰 문자를 사용하므로 코드 줄은 정말 말씀, 어디 보자 않습니다 – 우리 다음에 예를 들어 우리는 while 루프를 가지고 여기 정말 멋진 것은 당신이 파이썬을 사용할 수 있다는 것입니다 당신이의 일부가 원하는 모든 코드를 들여 코딩 스타일과 같은 사이클 그래서 우리는 여기에 목록을 얻을 때 – 우리는이 같은 하나 라이너로 쓸 수 있습니다, 우리 같은 얻을 그것을 당신이 동안 조건부 쓸 수 커피 스크립트에 정말 멋진 다른 코드 부분 후 문 그래서 정말 훨씬 더 읽을 수있는 코드를 만드는 당신은 코드의 작은 라인을 가지고, 정말 멋져요 – 당신은 또한 마법의 어떤 종류의 작업을 수행 할 수 있습니다 여기서 당신은 잠시 후 만 조건문을 작성하지 않습니다하지만 당신은의 값을 변경 변수 그래서 당신은 그 값을 넣어 – 우리가 여기서 얻을 수 있도록 조건으로 – 그 결과를 정말 이해가되지 않는 임의의 숫자의 임의의 숫자, 그것은을 위해 단지 데모 – OK, 당신은 또한 목록과 함께 사이클에 사용할 수있는 우리는 여기 너무 범위 n 변수의 범위의 값에 걸쳐 스텝 – 우리는와 동일한 목록을 얻을 while 루프의 경우는 – 당신은 또한 사용하여 목록과 범위에있는 항목을 대체 할 수 지도 방법, 우리가 공 등 1000 사이의 임의의 숫자로 각 항목을 대체 우리는 10 개 난수를 얻을 – 무엇도 멋진 것은 조건부 문을 사용할 수 있다는 것입니다 단일과 코드의이 부분을 고려해야 할이 줄도록 값을 생성하는 이하 이상이 식에 따라 하나, 결과를 생성 평가 우리는 나중에 하나를 인쇄, 그래서 우리는 크거나 작은 수 – 보는 재미, 감사를

lesson #29 / html5, css, javascript tutorial, web programming

이 수업 # 29이고 나는 거 쇼 당신에게 커피 스크립트에 대한 더 문법 설탕 해요 – 우리 이전 강의에서 여기에 인쇄 기능을 가지고 우리는 코드의 네 개의 추가 라인을 가지고 나는 야 당신은 그래서 당신은보다 효율적으로 쓰기 더 읽을 수있는 코드가 될 수 보여 해요 있음 – 이 "로"- 여기서 첫 번째는 1 내지 10의 루프를 인쇄하기위한 번호 3으로들을 건너 뛰는 키워드는, 어디 보자, 당신도 여기에 음의 값을 지정할 수 있습니다, 매우 편리 올 수 있습니다 간단한 – 다음 하나는 우리가 조건을 제공 너무 for 루프입니다 -이 "때"키워드 매우 유용합니다, 그렇지 않으면 속하는 것 루프의 외부 조건을 지정할 수 있습니다 그래서 우리는 그 큐브 (500)보다 작은 그 숫자를 인쇄 내부 보자 – 다음 중 하나를 그것은 당신에게 어큐뮬레이터 변수를 제공하기 때문에 줄이는 방법은 매우 시원하다 당신은 일시적이 아닌 외부 변수를 정의해야하는 값을 저장하는 데 사용할 수있는 이 범위는, 그래서 이것은 실제로 기능적인 스타일의 프로그래밍과 코드가있을 것이다 훨씬 적은 부작용 – 여기 정말 무슨 일이 우리가 함께 그 숫자를 추가,하자입니다 방금과 같은 조건을 지정할 수 있습니다, OK, 마지막 하나는 매우 간단합니다 – 참조 당신이 그 (것)들을 별도로 "&&"키워드를 사용하여 지정할 필요가 없습니다, 우리는 인쇄됩니다 이것이 사실이면 "OK", 어디 보자 – 감사 시청