javascript 수학 메서드중 하나인 Math.random()에 대해서 알아보겠습니다. 랜덤메서드는 0과 1 사이의 난수 값을 반환해주는 메서드로서 불규칙한 값을 뽑아내고 싶을때 사용합니다. Math.random(); 그냥 이렇게만 사용하면 0~1 사이의 난수로 소수점도 많이 나옵니다. 경우의 수가 아주 많아서 좋을 수도 있지만 범위를 조금 좁혀서 사용하는게 편할 듯 합니다. Math.floor(Math.random()*10); 이렇게 사용하게되면 floor를 이용해서 지저분한 소수점을 날려버리고 0.1, 0.2 가 아닌 정수로만 나오게 작업해주기 위해서 10을 곱해서 작업해줍니다. 그러면 1~9 사이의 난수가 나오게 됩니다. 10부터 20까지만 나오게 하고 싶다면 Math.floor(Math.ran..
혹시라도 여러분들은 다른 프로그래밍 언어를 사용해 본 경험이 있나요? 저는 처음 배운 프로그래밍 언어가 C++이었는데, 제가 기억하고 있던 this는 클래스로부터 생성되는 인스턴스 중 현재 객체를 가리키는 것으로 알고 있었습니다. 하지만 JavaScript에서는 this의 의미가 기존에 알고 있던 것과는 좀 다르게 사용됩니다. 따라서 이번 포스트에서는 JavaScript에서 this는 무엇이며, 어떻게 사용하는지에 대해 알아보도록 하겠습니다. 그때 그때 달라요 JavaScript에서 this의 값은 결정되어 있지 않습니다. 문맥에 따라 그 값이 바뀌죠. MDN 문서를 보시면 아래와 같은 부분을 확인할 수 있습니다. 대부분의 경우 this의 값은 함수를 호출한 방법이 결정합니다. 실행하는 중 할당으로 설정..
이번 스크립트 예제는 카드게임 만들기 입니다. //01. html/css 디자인 구성 //02. 클릭한 카드 뒤집기 //03. 두개의 카드 뒤집기 확인하기(첫번째, 두번째) //04. 클릭한 카드 두개의 이미지 가져오기 //05. 두개의 이미지 비교하기 //06. 틀린 이미지 애니메이션 효과주기 (shake) //07. 빨리 클릭하면 버그 발생 고치기 const cards = document.querySelectorAll(".cards li"); let cardOne, cardTwo; let disableDeck = false; function flipCard(e){ let clickedCard = e.target; if(clickedCard !== cardOne && !disableDeck){ clic..
getAttribute() , attr() 둘다 선택한 요소에서 원하는 속성을 가져오고 싶을 때 사용합니다. //자바스크립트 let select = document.querySelector(".class"); let getAttr = select.getAttribute("class"); select.textConetent =getAttr; //제이쿼리 let getAttr = $(".class").attr("class"); $(".class").text(getAttr); 이러한 차이가 있습니다. 제이쿼리를 이용하면 더 간편하게 작업을 할 수 있습니다. 하지만! 제이쿼리의 가장 큰 단점은 속도입니다. 속도가 순수 자바스크립트로 코딩한 것보다 현저히 느립니다. 특히 애니메이션을 할 경우, 브라우저가 지원하는..
콜백함수에 대해서 알아봅시다. 콜백함수는 다른 함수에 인수로 넘겨지는 함수 를 말합니다. funcA()와 funcB()가 순서대로 있는 와중에 A가 아니라 B를 먼저 실행 시키고 싶을때 사용할 수 있습니다. 동시에 이루어지는걸 동기, 동시에 이루어지지 않는 방식을 비동기라고 합니다. function func(){ document.write("함수가 실행되었습니다.2"); } function callback(str){ document.write("함수가 실행되었습니다.1"); str(); } callback(func); 콜백함수 안에서 매개변수 str에 함수 func가 들어갑니다. 원래대로 차레 차례 실행을 하면 함수가 실행되었습니다. 2 함수가 실행되었습니다. 1 이렇게 나와야 하지만 콜백함수에 매개변수..
JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. JSON 특징 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다. 자바스크립트 객체 표기법과 아주 유사하다. 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 ..