JavaScript11 [js] 카드 공격 게임 완성 (ft. 자바스크립트로 자스스톤 게임 구현 ver.4) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.4)입니다. - 게임 공격 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현내용 · 상대방의 영웅 또는 쫄병을 한번씩 공격하기 · 내 턴일때 카드 클릭 불가능 -> 클릭 가능하도록 변경 · 공격하여 상대방 카드 공격하여 제거하기 완성 코드 html 초록: 체력, 주황: 공격력, 적 영웅의 체력이 0이되면 영웅을 보호하기 위해 쫄병들을 코스트(우드색)내에서 뽑는다. 코스트:10/10 턴 교체 현재 턴: 나의 턴 코스트:10/10 css #my, #rival { display: inline-block; vertical-align: top; margin-right: 50px; } #my { margin-bott.. 2021. 3. 12. [js] 자바스크립트로 끝말잇기 구현하기 자바스크립트를 이용하여, 끝말잇기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트 화면 결과(Result 클릭) 2020. 12. 16. [vue] vue.js 기초 정리 요약(pass props/emit event) vue.js 기초 정리편 vue 공식 문서, 기술 블로그와 인프런의 vue.js 기초강의, Vue.js 시작하기 - Age of Vue를 듣고 참조하여 정리하였습니다. Vue.js 공식 문서 https://vuejs.org/v2/guide/ Introduction — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Vue.js란? Progressive Javascript framework for buiding user interfaces and front-end applications Vue.js의 핵심 Reactivity (반응성) Vue의 가장 큰 특징으로서, 데이터에 대한 변화를 vue에서 감지하여 화면에 바로 반영합니다. 즉, 데이터.. 2020. 11. 10. [js] let vs const vs var (ft. var의 문제점, 호이스팅) 변수선언 방식인 let, const, var에 대한 차이점과 var의 문제점, hoisting에 대해 알아봅니다. variable, 변수는 프로그래밍 언어에서 우리가 처리해야 하는 데이터를 담을 수 있도록 도와주는, 즉 데이터를 담고 있는 값을 의미합니다. ES6에서 기존의 변수 var를 보완하기 위하여 나온 변수 선언 방식이 let과 const입니다. 더 이상 var 키워드는 사용하지 않는 것을 추천합니다. var의 문제점 ES6 이전에 사용해왔던 더 이상 사용하지 않는 변수 선언 방식입니다. 왜 더이상 사용하면 안 될까요? 변수는 선언하고 나서 값을 할당하는 것이 정상입니다. 하지만 var를 사용할 때는 이상하게도 선언하기 전에 변수의 값을 할당해도 작동이 됩니다. 예제 - var : 호이스팅 발생 .. 2020. 10. 6. [js] 자바스크립트 onclick · addEventListener 비교 사용법 자바스크립트에서 클릭 이벤트 핸들러 3가지 방법과 addEventListener 와 onclick의 차이점을 알아보겠습니다. 이벤트 리스너는 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다. 이벤트가 특정 element에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다. 가장 보편적으로 자주 사용되는 이벤트 리스너는 click 이벤트입니다. click event는 사용자가 element에 클릭하였을 때의 동작하는 이벤트입니다. click 이벤트 사용 방법 1. onclick 이벤트 - HTML 코드에서 inline 방식 (in HTML) 자바스크립트를 지원하는 모든 브라우저에서 HTML 코드에서 바로 이벤트 리스너를.. 2020. 10. 5. [js] 자바스크립트 버튼 클릭시(onclick) 마다 배경 색상 변경하기 자바스크립트를 이용하여 버튼을 클릭할 때마다 화면 배경 색상 변경을 구현하겠습니다. 화면 출력내용 · 배경색상(backgroundcolor) 총 6개 배열 · 버튼 1개 사용 · 버튼 클릭시마다 색상값 중 1개가 랜덤으로 선택되어 body에 적용 버튼 클릭시마다 화면 배경 색상 바꾸기 예제 색상 변경 function colorChange() { var color = ["#FC5C7D", "#6A82FB", "#38ef7d", "#fffbd5", "#b20a2c", "#CAC531"]; var num = Math.floor(Math.random() * color.length); //Math.random()이용하여 배열의 데이터 개수(length) 이용하여 배열의 인덱스, 변수 num이 랜덤으로 나옴 var.. 2020. 7. 13. 이전 1 2 다음 반응형
