본문 바로가기

javascript, framework

 (68)
Step03_if3(keydown, keyCode==13)스터디 keyup 키보드에서 손을 땠을 때 실행 keydown 키보드를 눌렀을 때 실행 키보드를 누르고 있을 때 한번만 실행된다. keypress 키보드를 눌렀을 때 실행 키보드를 누르고 있을 때 계속 실행된다. 점수를 입력하고 Enter 키를 누를 경우 성적이 출력되는 기능을 만들어 볼 계획이다. 마찬가지로 placeholder을 활용하여 안내문을 적어뒀다. script에서는 keydown 이벤트 타입을 사용하였다. 해당 이벤트 핸들러를 e에 담아 활용하였다. 이벤트 핸들러를 확인하고자 console.log(e)를 작성하였다. console.log(e)에 대한 값이다. keyCode : 13을 확인할 수 있다. 여기서 keyCode : 13은 enter의 코드번호를 뜻한다. 키보드 키 코드 자료 참고 http..
Step03_if2(placeholder, 양수 판별)스터디 input에 텍스트를 입력 후 버튼을 누르면 양수인지 아닌지를 판별해주는 코드를 작성하고자한다. placeholder를 활용하여 input에 입력할 정보를 미리 안내하는 문구를 적었다. script에서는 Number()함수를 활용하여 string type으로 입력된 value값을 number type으로 변환하였다. 그리고 if else 조건문을 활용하였다. 양수인 경우만 "양수 입니다."가 출력되고 나머지 경우는 "양수가 아닙니다"가 출력되기에 num > 0을 조건으로 작성했다. 양수를 제외한 음수, 0, 문자열 등의 텍스트는 "양수가 아닙니다"로 출력된다.
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을 사용하여 부드럽게 동작하도록 만들었다. *이미지는 빈박스로 대체했다.

티스토리툴바