개발자노트 (261) 썸네일형 리스트형 HTML - 선택자와 콜백함수를 이용한 이벤트 예제 ( 주사위 게임 ) 주사위게임 굴리기! Player COM CSS ( Script ) 설명 주사위의 눈은 1~6이기 때문에 random을 * 6+1로 지정, floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환한다는 특징이 있어 random을 할 때 사용 기존에 body에 있던 내용을 수정하기 위해 document.선택자를 사용 기본 body에 있던 img는 움짤인 gif로 실행됨 그 후 random으로 나온 값에 따라 랜덤값.png 파일로 대체시킨다. ( 주사위의 눈이 1이면 1.png ) 상단에 Title 역시 player와 com 의 값에 따라 무,승,패로 대체된다. 수행결과 HTML 업다운게임 예제 ( HTML형변환 예제 ) 전에 올린 up-down과 유사하지만, 여기서 주의할 점은 사용자가 prompt()를 통해 입력한 값은 [문자열]로 취급되기 때문에 Numner(input)으로 형변환하여 계산하게 하였다. 다른 풀이 ( 약간의 유효성 검사 ) 예전에 학습했던 tmp를 사용하여 최대값과 최소값이 cross 되지 않도록 설정하여 입력값에 따라 min max 가 변하지 않도록 유효성 검사를 추가 수행결과 HTML Style + JS(JavaScript)를 통한 여러가지 색 박스만들기 예제 원래라면 box를 body에 태그들을 사용해서 box를 여러개 만들어야했지만, JS (자바스크립트) 를 사용하여 박스생성을 함수로 만들어 사용하게 되면 for문 만으로 여러개의 박스들을 만들 수 있음 이 때 colorList라는 항목을 추가해 background-color도 지정하여 박스마다 다른 색들이 적용될 수 있도록 하였다 수행결과 HTML 배열과 관련 배열함수 메서드명 기능 반환값 arr.sort() 배열의 요소를 적절한 위치에 정렬 정렬된 배열을 반환 arr.pop() 배열의 맨 끝 값을 제거 제거된 요소를 반환 arr.shift() 배열의 맨 앞 값을 제거 제거된 요소를 반환 arr.unshift() 배열의 맨 앞에 값을 추가 새로운 길이를 반환 arr.push() 배열의 끝에 하나 이상의 요소 추가 새로운 배열의 길이를 반환 arr.slice(n,m); n~m 까지의 요소출력 HTML 제어문 JAVA에서 사용한 for / while을 똑같이 사용가능 자료형 타입을 int 가 아닌 var로 사용하는것만 주의하면 됨 HTML 자료형 확인하기 수행결과 여기서 볼 것은 typeof 와 ==, ===의 비교연산자다 먼저 typeof null이라는 것도 object 타입이기 때문에, null이여도 타입인 object type을 확인할 수 있다. 또, x = 12; , y= '12'; 를 보게 되면 x는 숫자(number) 로 type이 정의된 것을 볼 수 있고 y는 문자열(string) 로 type이 정의된 것을 확인 할 수 있다. 그리고 ==, === 연산자의 차이는 ==는 x 와 y의 값만 비교해서 같은 12 라는 것으로 판단하여 true를 return하지만 ===는 x와y의 값 뿐만 아니라 type까지 비교해서 false를 return 하는것을 볼 수 있다. HTML 변수선언과 자료형 + Uncaught ReferenceError 수행 결과 여기서 Error가 뜬 것을 볼 수 있는데 Uncaught ReferenceError : 는 정의되지 않은 것을 호출 했을 때 발생하는 에러이다. 즉 위 코드에서 z는 선언되지 않았는데 호출을 했기 때문에 발생한 것이다. HTML JS(내부스크립트, onclick ) 함수사용 기본예제 box를 클릭하면 box 색상을 바꾸는 함수를 만들어서 사용 수행결과 이전 1 ··· 8 9 10 11 12 13 14 ··· 33 다음
