Java Script/Jquery8 jQuery] 사이먼 게임 만들기 The Simon Game 먼저 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 기계가 선택해 준 컬러를 클릭해야한다. 또 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 첫번째 컬러와 방금 선택된 컬러, 두 개를 순서대로 클릭해야한다. 또 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 첫번째, 두번째 컬러와 방금 선택된 컬러, 세 개를 순서대로 클릭해야한다. 계속 이렇게 진행되고 사용자가 기계에서 나온 순서와 다른 컬러를 선택하면 게임이 끝난다. 자바스크립트, 제이쿼리 이용해서 코드 짜기 기계에서 랜덤 컬러 선택하기 ✔️ 색이 들어가는 array를 하나만든다 -> buttonColours ✔️ 0~3 랜덤 숫자를 뽑아서 randomNumber에 담는다. ✔️ 나온 숫자로 buttonColours array에서 해당 컬러 뽑아낸 후 .. 2021. 9. 8. jQuery] 애니메이션 효과 hide( ), show( ), toggle( ) hide( ): 숨기기 기능 h1 클릭시 h1 숨김 show( ): 숨은 글자 다시 보이게 하기 toggle( ): 접었다 폈다하기 접었다 폈다 토글하기 버튼 눌렀을 때 h1이 생겼다 사라졌다하기 fadeOut( ), fadeIn( ), fadeToggle( ) fadeOut() : 천천히 사라짐 fadeIn(): 천천히 나타남 fadeToggle( ): fade in, fade out 됨 slideUp( ), slideDown( ), slideToggle( ) slideUp( ): 아래에서 위로 접힘 slideDown( ): 위에서 아래로 펴짐 slideToggle( ): 위 아래로 접었다 펴졌다함 animate( { css내용 } ) 숫자 벨류를 갖는.. 2021. 9. 7. jQuery] elements 추가, 삭제하기 다음과 같은 웹사이트가 있다. elements 추가하기 before( ) h1 앞에 버튼 element를 추가하고 싶다면 before( ) 메소드를 사용한다. 버튼이 생성되었다. after( ) h1 뒤에 버튼 element를 추가하고 싶다면 after( ) 메소드를 사용한다. 버튼이 생성되었다. prepend( ) h1 안 text 앞에 버튼이 생긴다 append( ) h1 안 text 뒤에 버튼이 생긴다 elements 제거하기 2021. 9. 7. jQuery] eventListener 추가하기 / on( ) / loop 하는 법 자바스크립트에서의 eventListener 어떻게 써줄까? 타겟.eventListener("이벤트","함수") 자바스크립트에서 h1 클릭시 글자색을 바꾸고 싶다면 아래처럼 코드를 작성해야 했다. 하지만 제이쿼리에서는 eventListener를 써주지도 않는다. 타겟 뒤에 바로 어떤 event할 지 써주고 나서, 함수를 바로 써주면 된다. 자바스크립트에서 eventListener + for loop 조합을 제이쿼리에서는 어떻게 할까? eventListener + for loop 조합이었을 때 button 5개에 eventlistener가 적용될려면 querySelectorAll("button")[i]를 for loop으로 돌려서 하나씩 적용되도록 하였었다. 하지만 jquery에서는 선택된 모든 아이템에 c.. 2021. 9. 5. jQuery] attributes 변경하기 HTML가 이렇게 세팅되어있을 때 빨간 박스가 attributes이다. jQuery로 attribute 보는 법 이미지 태그 안 scr attribute보기 drum.png라고 나옴 a 태그 안에 있는 attribute보기 클래스 보기 class도 attribute이다. jQuery로 attribute 세팅 하는법 href를 구글에서 네이버로 변경해보기 attr() 메소드의 첫 번째 인풋은 뭘 바꿀지 두 번째 인풋은 뭘로 바꿀지를 적으면 된다. 클래스 추가/ 삭제는 .addClass("") .removeClass("")로 한다. 2021. 9. 3. jQuery] 텍스트 변경하기 텍스트 변경 text 메소드를 사용한다. 1) hi로 된 텍스트를 bye로 바꾸기 2) 버튼 안 텍스트 변경 텍스트 포함 다른 태그 추가 변경 html 메소드를 사용한다. 2021. 9. 3. jQuery] elements 선택, css 효과주기, 클라스 추가 삭제 element 선택하기 1 element 하나 선택할 때 2. element 2개 이상 선택할 때 이 것을 제이쿼리로 간편하게 이렇게 한다. 제이쿼리에서 css 스타일 주기 ✔️ css에 인풋 하나인 경우 해당 property의 value를 알려줌 ✔️ css에 인풋이 두개인 경우 첫 번째는 property, 두 번째는 value로 값이 세팅이 됨 $("h1").css("color", "green"); ✔️ 하지만 스타일 변경은 CSS에서 하기 자바스크립트(제이쿼리)에서 css 벨류를 넣어주는 것은 코드가 지저분해 보인다. css 관련 입력 사항은 css에 저장하고 클래스를 만들어서 자바스크립트(제이쿼리)에서는 클래스를 추가 했다 제거했다 하는 것이 좋다. ✔️ 클래스 2개 동시에 만들고 제거하기 ✔️ .. 2021. 9. 3. JQuery 소개, 시작 JQuery (제이퀘어리) 수 천가지의 자바스크립트 가운데 가장 인기 많은 라이브러리이다. Jquery를 만든 John Resig은 너무 긴 자바스크립트 코드를 간단하게 바꾼 사람이다. document.querySelector("h1") = jQuery("h1") = $("h1") 내가 만드는 웹사이트에 jQuery 연결하는 법 1. 모든 jQuery 파일을 다운 받거나 2. 부트스트랩에서 했던 것처럼 jQuery CDN을 연결해준다. 가장 많이 사용되는 google CDN을 쓰도록 하자. 인기많은 구글 CDN을 사용하는 이유는 유저가 내 웹사이트 들어오기 전에 다른 웹사이트에서 구글 jQuery CDN를 연결해 놓았다면 유저의 브라우저에 이미 cashed 되고 저장되어 있다. 내 웹사이트에서 다시 제이.. 2021. 9. 2. 이전 1 다음
