본문 바로가기

자바스크립트

바빌론JS - 땅위에 집 만들기 ( 자바스크립트로 ) 오늘은 공식 튜토리얼의 집 짓기(영문)편을 크레이가 소화한 내용을 재구성한 집 만들기편을 진행하겠습니다.비주얼 스튜디오 코드로 진행할텐데요. 지난 게시글의 아래 코드를 참조해 주세요.지난 게시글 : https://itadventure.tistory.com/686 바빌론JS 를 vscode 에서 쉽게 - 코드스니펫 목록비주얼 스튜디오에서 바빌론JS의 플레이 그라운드처럼 코드 자동 완성 기능이 있으면 좋을텐데..생각해 보셨나요? 있더라구요 :)바빌론JS 코드 익스텐션 설치비주얼 스튜디오의 extension 확장 프itadventure.tistory.com가상공간에 그림같은 집을 짓고 거기서 걱정없이 살 수 있다면 좋겠지만,세상은 그렇게 우리를 여유롭게 내버려 두지는 않지요 :)그냥 상상의 나래를 펼쳐 잠깐 .. 더보기
크레이의 IT탐구 개발글 링크 모음 이 게시글은 크레이가 취미로 다루었던 개발 관련 게시글 링크 모음입니다. ( 참고로 크레이 전문 분야는 PHP / DB 백앤드 파트입니다. ) 필요하신 분들에게도 도움이 되시길, 크레이도 참고하려 정리하였습니다. 글이 여기 저기 분산되어 찾아 보기 어려워 틈틈히 게시글들을 한군데 정리하기로 하였습니다! Node.js, 자바스크립트와 캔버스, 가상세계 산사VR(세컨드라이프2), 코드이그나이터4, 라라벨프레임워크 도전기, 네이버API 연동, 유니티3D 게시글이 정리되어 있습니다. # PHP8, 윈도우에서 해보기 리눅스가 낮설어 가까이 하기 어려운 PHP 인가요? 내 컴퓨터 윈도우에서 PHP8을 작동해 보세요. 윈도우에 PHP 8 설치 + MYSQL 연결 예제 ( APM 설치 - 2023. 9. 1기준) ht.. 더보기
철창속에 갇힌 가여운 고양이의 운명은? ( 자바스크립트 캔버스 ) 화면 아무 곳이나 클릭해 주세요. 좀 더 기능을 붙여서 소스 공개 예정입니다 :) HTML 삽입 미리보기할 수 없는 소스 아무것도 안보이시면 여쪽으로 => http://dreamplan7.cafe24.com/canvas7/canvas3.htm 방문해주시는 모든 분들께 늘 감사드립니다. 재미있으셨다면 공감 한방, 댓글은 굿잡! 감사합니다~ 더보기
강아지는 어딜 보는 걸까요? ( 자바스크립트 캔바스 ) 시작 후 화면 아무 곳이나 클릭해 주세요 :) 이 스크립트도 공개 예정입니다~ HTML 삽입 미리보기할 수 없는 소스 아무것도 안보이시면 여쪽으로 => http://dreamplan7.cafe24.com/canvas7/canvas2.htm 방문해주시는 모든 분들께 늘 감사드립니다. 재미있으셨다면 공감 한방, 댓글은 굿잡! 감사합니다~ 더보기
node.js/자바스크립트 - 21. 클래스(Class) 클래스(class)는 자바(Java), C++. C# 등 객체지향형 프로그래밍 언어에서 사용되는 방식입니다. 자바스크립트도 클래스 사용이 가능한데요. 정통 클래스에는 미치지 못하나 클래스를 표방한 개념을 사용하는 사례가 많습니다. ( node.js, react 프레임워크 등 ) 클래스란 무엇일까요?개념은 간단합니다. 설계도입니다. 하지만 능숙히 사용하려면 어느정도 숙련된 기술을 필요로 합니다. 예를 들어 컴퓨터를 만들 수 있는 설계도가 있다고 칩시다. 이 설계도가 바로 클래스입니다. 그리고 설계도를 이용해 만들어낸 컴퓨터는 오브젝트가 됩니다. 컴퓨터의 설계도는 1개지만 그로 인해 컴퓨터 오브젝트는 무한으로 만들어낼 수 있습니다. 클래스는 2단계로 나뉘어 선언을 하는데요. 첫번째는 설계도에 해당하는 클래스.. 더보기
node.js/자바스크립트 - 20. 디스(THIS)? '이것'? 오브젝트의 this 오브젝트 변수에는 편리한 내장변수가 this가 있습니다. this 내장변수 활용법을 알아보겠습니다. 오브젝트 변수를 앞으로 오브젝트라고 지칭하겠습니다. 오브젝트 내에 선언된 함수는 오브젝트 자신을 가리키기 위해 this 라는 내장변수를 사용할 수 있습니다. 만약 달러를 한화로 환전해서 계산해주는 환율 오브젝트를 하나 만들어보겠습니다. 환율 오브젝트는 환율을 나타내는 exchange 속성과 달러를 원화로 바꿔주는 함수 doller2won(), 그리고 원화를 달러로 바꿔주는 함수 won2doller() 으로 구성됩니다. 환율은 1달러가 1,200원 이라고 가정합니다. 기능을 제외한 코드를 살펴보면 아래와 같습니다. let ex={ exchange: 1200, doller2won(dollor){ }, won2.. 더보기
node.js/자바스크립트 - 19. 오브젝트 속성에 함수를 넣는다고? 7장에서 오브젝트 변수는 중괄호 기호로 데이터를 묶어 여러 값을 대입할 수 있다고 다룬 바가 있었는데요. 아래와 같이 정의할 경우, let objA={ title: "고요의 하늘", author: 'Newflex', episode: 8, playing: true }; 변수objA 에 들어 있는 title 의 값을 사용하려면 아래와 같이 써야 한다고 살펴보았습니다. objA.title 오브젝트에는 다양한 종류의 변수를 담을 수 있습니다. 정수, 문자열, 참/거짓에 해당하는 논리값, 오브젝트 안에 오브젝트도 담을 수 있고 배열도 담을 수 있었지요. 더 나아가 오브젝트 내에는 함수도 담을 수 있습니다. 먼저 아래 코드를 보실까요?total 이라는 키 값에 함수 1개를 통째로 넣었습니다. let objA={ t.. 더보기
node.js/자바스크립트 - 18. 명령어를 만들어 볼까요? 함수 정의하기 자바스크립트에서는 함수(function) 기능으로 직접 명령어를 만들어 쓸 수 있는데요. 함수란 마치 초등학교 산수 시간의 X값을 넣어 Y라는 결과를 얻는 요술상자와 같습니다. 아래 요술상자는 X에 10을 넣으면 5가 나오고, X에 32를 넣으면 16이 나오지요. 1부터 100까지 더하는 코드를 앞장에서 잠시 살펴봤었는데요. 만약 total 이라는 함수가 있어서 아래와 같이 합계를 쉽게 구할 수 있다면 어떨까요? 매우 편리하지 않을까요? let sum = total(1, 100); // 1부터 100까지 더해서 변수 sum 에 대입해! 게다가 1부터 1000을 더하든, 1부터 10000을 더하든 쉽게 사용할 수가 있습니다. let sum2 = total(1, 1000); let sum3 = total(1.. 더보기