야구게임 만들기_재료

1. form 태그

button이 달린 input 태그는 form으로 감싸주는 것이 추세라고 한다.

<form>
  <input type = "text">
  <button> 확인 </button>
</form>

이 경우 input 태그에 바로 이벤트를 다는 것이 아니라 form 태그에 이벤트를 달아준다.

 

 

2. submit 이벤트

(1)

form안에 있는 button을 누르면 submit이벤트가 호출된다.

<form>
  <input type = "text">
  <button> 확인 </button>
</form>
<script>
  let $form = document.querySelector('form')
  $form.addEventListener('submit', function)
</script>

 

(2) event.preventDefault() : 기본동작 막기

submit 이벤트는 호출되는 경우 페이지가 새로고침된다.

<form>
  <input type = "text">
  <button> 확인 </button>
</form>
<script>
  let $form = document.querySelector('form');
  $form.addEventListener('submit', (event) => {
  event.preventDefault();
  })
</script>

(3)event.target[index] : form안에 있는 태그들을 개별적으로 부르는 방법

<form>
  <input type = "text">
  <button> 확인 </button>
</form>
<script>
  let $form = document.querySelector('form')
  $form.addEventListener('submit', (event) => {
  event.preventDefault();
  event.target[0].value = "안녕"; 
  })
</script>

event.target[0]는 event가 target하는 form 태그의 첫번째 태그인 input 태그를 의미한다.

 

(4) 추가 : submit은 모든 버튼에 다 적용됨 

form태그 내부에 있는 모든 button을 클릭하는 경우 submit 이벤트가 작동함.

submit은 click과 다르게 enter키도 자동으로 인식함

 

3. Math.random( ), Math.floor( ), Math.ceil( ), Math.round( )

무작위로 숫자 뽑기 : Math.random()

Math.random()은 0~1사이의 숫자를 무작위로 뽑아낸다.

따라서

0<= Math.random()*9 +1 < 10

이다.

 

소수점 버림 : Math.floor()

소수점 올림 : Math.ceil()

소수점 반올림 : Math.round()

 

4. 반복문 : for, while

(1) for문

for(let i =0 ; i<5 ; i++){
	console.log(i+1)
    }

(2) while문

let i =0;
while (i<5){
	console.log(i+1);
    i++;
    }

해석

i에 0 대입 : i=0

i<5가 참이 됨

동작문 실행 : console.log(1)

 

i에 (0+1)대입 : i=1

i<5가 참이 됨

동작문 실행 : console.log(2)

 

i에 (1+1)대입 : i=2

i<5가 참이 됨

동작문 실행 : console.log(3)

 

i에 (2+1)대입 : i =3

i<5가 참이 됨

동작문 실행 : console.log(4)

 

i에 (3+1)대입 : i=4

i<5가 참이 됨

동작문 실행 : console.log(5)

 

idp (4+1)대입 : i=5 

i<5가 거짓이 됨

반복문 탈출 

 

5. 배열

<script>
let a = [1,3,5,6,7] //배열 설정
a.length //배열 안의 요소 갯수 5
a.indexOf(3) //배열 안에 3이 몇 번째에 있는지 -> 1
a.indexOf(8) //배열 안에 없는 요소를 물으면 -> -1
a.indexOf('3')//자료형이 다르면 -1이므로 자료형을 맞춰줘야함
a.push(4)//배열 제일 뒤에 4를 넣음 -> a = [1,3,5,6,7,4]
a.pop(4) //배열 제일 앞에 4를 넣음 -> a=[4,1,3,5,6,7]
a.splice(1,1) //배열의 index가 1인 3으로부터 1개 지움 -> a=[1,5,6,7]
a.includes(3) //배열에 3이 있는가 ->true
a[0] //a배열의 index가 0인 요소 : 1 
</script>

 

6. 함수, 매개변수, 인수

<script>
  function 함수명(매개변수){
  };
  함수명 (인수);
</script>

반복되는 것은 함수로 빼서 설정해줘야 한다!

반복되는 것들 중에서 차이가 나는 부분은 매개변수로 설정한다.

 

함수를 호출하는 경우에는 괄호 안에 인수를 넣어서 호출한다. 

이 경우 매개변수 자리에 인수를 넣어서 함수가 실행된다.

 

7. new Set( ), new Set( ).size

new Set()은 중복을 제거한 다음 배열로 나타낸다.

new Set()이라는 배열은 그 요소의 개수를 size를 통해 알 수 있다

<script>
 let c = '12344'
 new Set(c)
 console.log (c) //['1','2','3','4']
</script>

<script>
  let b = [3,4,4,3,2,1]
  console.log(b.length) //배열 b의 요수 개수는 6
  new Set(b) //new Set은 중복되는 부분을 제거한다 b=[3,4,2,1]
  new Set(b).size //new Set의 요수의 갯수는 length가 아니라 size로 알 수 있다.=>4개
</script>

 

8. 함수를 실행한 값을 if문 안에 넣기

return true

 

9. 배열명.join()

join()은 배열을 문자열로 바꿔주는 method이다.

join의 경우 기본값이 join(',')이다.

따옴표 안의 문자열(기본값은 쉼표,)을 각 배열 요소 사이사이에 넣은 다음 문자열로 바꾸는 것이다.

따라서 쉽표를 뺸 상태로 문자열을 만들고 싶으면

join('') 빈문자열을 사용해야한다.

<script>
  let d=[1,2,3,4,5]
  d.join() //d='1,2,3,4,5'
  d.join(',')//d='1,2,3,4,5'
  d.join('')//d='12345'
</script>

 

10. [textContent/value], [innerHTML], [append(' ')/append(document.createTextNode(' '))]

https://ssooccoo.tistory.com/15

자바스크립트로 html에 글쓰기