본문 바로가기

개발자노트/웹

(74)
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 색상을 바꾸는 함수를 만들어서 사용 수행결과
HTML 외부 Script [JS] 불러오기 src > webapp > 경로에 같은 레벨로 js 폴더를 만든 뒤, 안에 .js확장자를 가진 파일을 만들어준다. 그 후 태그 안에 scrip를 src로 불러와주면 된다. 이 때, 경로와 확장자를 잘 써주어야함. js폴더 안에 있는 myscript.js 파일