javascript, framework/javascript (50) 썸네일형 리스트형 Step02_example11 (가위바위보 게임, if else if) 배운 것들을 활용하여 가위바위보 게임을 만들고 승패를 표시할 수 있는 기능을 넣어보자 사용자의 value값에서 컴퓨터의 value값을 뺀 다음, 각 승부별로 나오는 값의 특징을 활용하여 if문을 구성했다. 기존의 if else는 두가지의 선택을 강제했다면 if else if 문은 다양한 선택지를 제시한다. Step02_example10 (change, value) 기존에 addEventListener 함수를 쓸때 click을 사용했던 것과 다르게 change를 사용했다. button 태그에 click을 사용했듯이, option 태그와 함께 쓰기에 용이하다. option에 value 값을 정해놓지 않는다면 해당 텍스트가 출력된다. 예시에서는 value 값을 "", "0", "1", "2"로 지정했다. Step02_example9(Math.random, Math.floor) 랜덤한 숫자를 얻을 수 있는 방법이다. Math.random() 0이상 1 미만의 랜덤한 실수 Math.random()*10 0이상 10 미만의 랜덤한 실수 Math.floor(숫자) 내림해서 정수로 변경 Math.floor(Math.random()*10) 0이상 9이하의 랜덤한 정수 Math.floor(Math.random()*3) 0이상 2이하의 랜덤한 정수 0, 1, 2 의 숫자가 무작위로 출력되는 버튼을 만들었다. Math.floor(Math.random()*3) 을 활용하였다. 가위, 바위, 보가 랜덤으로 출력되는 버튼을 만들었다. 위의 랜덤 숫자 버튼과 비슷한 방법을 활용하였다. 가위, 바위, 보를 array type으로 선언하고 Math.floor(Math.random()*3)의 출력값과 연.. Step02_example8(이미지 확대 축소,for, if else) Step02_example6 의 변형 예제로 5개의 이미지를 각각 클릭시 확대 축소를 가능하게 만들었다 확대만 가능 2022.07.08 - [javascript] - Step02_example6 (for, length) 한개만 가능 2022.07.08 - [javascript] - Step03_example7 (if else) for 반복문과 if else 문을 활용하여 이미지를 확대 축소 가능하게 만들었다. 링크 걸어둔 Step03_example6, 7을 참고하였다. Step02_example7 (if else) if(){} ()안이 true면 {}을 실행한다. if(){}else{} ()안이 true면 첫번째 {}를 실행하고 false면 두번째 {}를 실행한다. 해당 예제는 Step03_example6에서 이미지를 클릭시 크기를 키우는 코드만 작성했다면 이번에는 재클릭시 작아지게 작성했다. if 문에 기능을 더한 if else를 사용했다. 2022.07.08 - [javascript] - Step02_example6 (for, length) 초기값을 false로 설정하고 isLarge가 false일 경우 이미지를 확대해준 다음 isLarge를 true로 바꿔준다. 재클릭시 isLarge가 false일 경우 마찬가지로 이미지를 확대해주고 true라면 이미지를 다시 축소해주고 isLarge를 false로 바꿔준다. Step02_example6 (for, length) for 반복문을 예제를 활용하여 복습하려고 한다. for 반복문을 활용하여 클릭한 이미지만 확대되게 만들었다. 변수명.length를 사용하여 img가 늘어나도 javascript를 수정할 필요 없게 작성하였다. 이후 transition을 사용하여 부드럽게 동작하도록 만들었다. *이미지는 빈박스로 대체했다. Step02_example4 (변수 연산, if, return) 다음은 변수를 활용한 연산의 복습이다. 2022.07.07 - [javascript] - Step02_example1,2 (변수 연산, if, CamelCase) div1~div10까지의 innerText가 바꾸기 버튼을 누를때마다 하나씩 김구라로 바뀌는 예제이다. 필자가 작성한 코드로 index=0을 index=-1로 작성하여 버튼을 클릭할때 array를 0부터 시작하게 만들었다. 선생님의 코드로 굳이 index 초기갑을 -1로 실행할 필요 없이 연산식을 뒤에 배치하여 0부터 시작하고 연산을 하게 만들었다. 또 if문을 활용하여 10이상일때는 실행하지 못하게 강제하여 추후 버튼클릭이 10회 이상일때 오류가 나지 않도록 만들었다. 같은 동작을 if 와 return을 활용해서 작성한 예시이다. 이 방식이 .. Step02_example3 (반복문, for) for 반복문의 형식 for ( let 변수명 = 초기값; 변수명 < 종료값; 변수명++ ) {}; ex) for (let i=0; i 이전 1 2 3 4 5 6 7 다음
