일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 무한
- wrapper
- Scanner
- 인텔리제이
- 제너릭
- suvlet
- https://start.spring.io
- Short
- 클래스
- 싱글턴
- start.spring.io
- 콜렉션
- 박싱
- Java
- 루프
- Jenkins
- dependency
- 빌드
- 언박싱
- 자동형변환
- boxing
- unboxing
- 스프링
- 싱글톤
- 제네릭
- 메소드
- maven
- 내장객체
- bootstrap
- 컬렉션
- Today
- Total
목록K-DigitalTraining 강의/6. Javascript(웹표준) (38)
Developer Gonie
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dwAEjZ/btrGQDoYKUI/BytPyv9kyArskBzdUaiDP1/img.png)
이 게시글에서 얻을 수 있는 내용 핵심1. 요소에서 특정 원소가 선택될 시 발생하는 이벤트 처리 이번 예시는 첫번째 선택박스에서 하나를 선택했을 때 발생하는 이벤트를 이용해 두번째 선택박스에 그에 맞는 적절한 메뉴들을 띄워주는 예시이다. 또한, 두번째 선택박스가 선택되면서 발생하는 이벤트를 이용해 노란색 공간에 첫번째, 두번째 선택박스에서 선택된 값들을 띄워준다. "발생하는 이벤트 처리를 위해 요소에서 onChange 속성을 부여해야 한다." 핵심2. 요소내 선택된 곳의 index 밑 value 혹은 text를 얻는 과정 요소의 객체를 id 속성의 값을 이용해 가져와 이 객체의 selectedIndex 멤버 값을 읽어와 선택된 index를 알아내고, 이 index를 이용해 요소의 객체의 text 혹은 v..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/DYGoS/btrGQpdn9Kc/KnvXgtQKYZjMVAY1RZAyf0/img.png)
* javascript에서 BOM(브라우저 객체모델)은 html 내에 요소가 존재하면 이를 객체화 하여 관리한다. 따라서, 혹은 으로 id 또는 name속성을 부여했다면 이것을 통해 해당 요소에 접근할 수 있고, form 내부의 요소도 id 또는 name 속성을 가진다면 이를통해 바로 원하는 요소에 접근할 수 있다. 주의할 점으로, form 요소 내부의 요소에는 form 요소를 통하지 않고 바로 접근할 수 없다. * select 요소에 대한 객체 내부에는 options 멤버가 준비되어 있는데 이 멤버는 크기가 정해지지 않은 배열을 가져 options = new Array() 와 같이 준비되어 있어 바로 원소들을 추가할 수 있다. * 보통 요소의 요소들은 화면이 뜨는 동시에 추가되어 있어야 하므로 body..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/IP14a/btrGIvTMomG/A75ikZ7icaUbyWDhMxArhk/img.png)
기본 내장객체 내장객체란, javascript 에서 바로 사용할 수 있도록 내부에 구현되어 있는 객체로 다음과 같은 것들이 있다. 객체 내부에는 속성(java로 치면 멤버변수) 및 메소드 들이 존재하여 이를 추가적으로 사용할 수 있어 유용하다. 자주 사용되는 내장 객체는 다음과 같은 것들이 있다. Array : 배열을 사용할 수 있게 함. 이 객체의 대표적인 멤버함수는 sort() 등이 있음 Date : 날짜와 시간을 다룰 수 있게 함. 이 객체의 대표적인 멤버함수는 getHours() 같은게 있음 Math : 수학적인 함수를 사용할 수 있게 함, 이 객체의 대표적인 멤버함수는 Math.random()으로 난수 생성할 때 사용 Number : 문자로된 숫자를 진짜 숫자로 바꿔줌 String : 문자열을 ..
아래서는 버튼에 대한 예시만 기록해 두었지만 실제로는 다른 요소 p, div 등에 대해서도 같은 방법으로 똑같이 적용할 수 있다. 그냥 onClick 속성을 추가하여 클릭이벤트 발생시 수행할 함수를 지정해주면된다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bvzQP6/btrGiQPVLtc/9FhfRII1Ki3WJNFsRFJzRK/img.png)
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/DEV2S/btrGivetEUO/5HTYrDU0LSaSk0liDan3I0/img.png)
예시
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nvSOa/btrGgsDfx6U/968nNcGuqeDAmzhHU6Xw51/img.png)
Array 1차원 배열 관련 함수 1) 배열1.concat(배열2) : 배열1과 배열2를 연결한 배열 반환 2) 배열.slice(숫자1, 숫자2) : 숫자1~숫자2 인 원소들에서 범위에서 숫자2를 제외한 원소를 반환(아래 예시 참고) 3) 배열.sort() : 오른차순 정렬된 배열 반환 4) 배열.reverse() : 내림차순 정렬된 배열 반환(이름이 reverse 라고 기존의 원소를 반대로 뒤집는게 아님) 사용예시
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cK38LP/btrGjFgBiBr/shIvAGhtZT7WSMEwtnca4k/img.png)
배열 원소를 전부 출력하는 4가지 방법 1) 객체 자체를 바로 출력하는 것 2) 객체.toString() 한 것을 출력하는 것 3) 일반 for문을 이용하는 것 4) 확장 for문을 이용하는 것(java와 문법이 살짝 다르며, 왼쪽항으로 반환되는 값도 다르니 이 부분은 아래를 참고) java에서의 확장 for문 작동 방식 : https://ldgeao99-developer.tistory.com/52 사용예시
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cqSMKV/btrGhzVoSzV/tfiB50yNMm1K0L28HMenS1/img.png)
배열을 생성하는 4가지 방법 * java에서 원래 배열은 같은 데이터 타입의 집합이었다. 하지만, javascript에서는 다른 타입의 데이터도 배열로 만들 수 있다. Array는 일반 배열이라기 보다는 java에서의 ArrayList 와 같은 느낌이다. * 1번 방법에서 배열을 생성후, 값을 초기화 해주지 않으면 해당자리가 undefined로 남아있게 된다. 1) 변수 = Array(숫자) 2) 변수 = Araay(원소1, 원소2, 원소3, , , ,) 3) 변수 = new Array(방법1, 방밥2 중에 선택) 4) 변수 = [원소1, 원소2, 원소3, ,,,,] 추가) 아래의 사진으로 된 예시에는 없는 새로 알게된 가능한 배열 사용 방법 5) 변수 = Array() // 크기를 지정하지 않은 배열선..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/IQKPv/btrGit8IWXG/nYi8k4vvMlhfqIYlP5bB7K/img.png)
* Math의 round, ceil, floor는 모두 결과값으로 정수를 반환 * Math.floor()는 parseInt()와 같은 기능이다. * A~B 사이의 난수 정수를 생성하는 공식은 다음의 링크를 통해 확인 : https://ldgeao99-developer.tistory.com/119 사용예시
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MzUw7/btrGks82Koa/p6I5cUEtruOtu2E190ai5K/img.png)
문자열을 숫자로 변환하는 함수 1) Number(숫자 혹은 문자열) 2) 문자열 혹은 문자열 타입의 변수 앞에 '+'를 붙여주는 것, 작동방식이 바로 위의 1번 함수와 거의 비슷하다. 3) parseInt(숫자 혹은 문자열) 4) eval(숫자 혹은 문자열) 사용예시 * 생각보다 다양한 것이 가능하므로 그냥 보고 넘기지 말고 세세하게 살펴봐라 * java에서는 System.out.print()의 인자로 문자열을 연결하는 '+' 연산자를 사용할 땐 모두 같은 문자열 타입이어야만 했는데 javascript에서는 서로 다른 타입이어도 연결이 가능하다. '문자열 + 문자열', 혹은 '문자열 + 숫자'의 경우 문자열을 연결하며, '숫자 + 숫자'의 경우 덧셈연산을 수행한다. * parseInt()는 그냥 실수를 ..
문자열을 작성하는 2가지 방법 * java와는 달리 둘 다 사용이 가능하며, 모두 string 타입으로 인식된다. 1) " " 큰 따옴표를 사용 2) ' ' 작은 따옴표를 사용 s1 = "apple"; s2 = 'apple'; 문자열 작성 비교 * java에서는 == 연산자가 객체의 주소만을 비교하여 둘의 내부 값을 정확히 비교할 수 없어 s1.equal(s2)를 사용하였다. 하지만, javascript에서는 == 연산자로 문자열 비교를 정상적으로 수행할 수 있다. s1 = "apple"; s2 = 'apple'; s3 = 'banana'; document.write(s1 == s2);// true document.write(s1 == s3);// fasle