일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- unboxing
- boxing
- 제네릭
- 클래스
- wrapper
- 콜렉션
- 루프
- start.spring.io
- 내장객체
- Java
- 제너릭
- 박싱
- Jenkins
- Scanner
- 언박싱
- 싱글톤
- 인텔리제이
- 자동형변환
- maven
- bootstrap
- suvlet
- https://start.spring.io
- 무한
- 스프링
- 싱글턴
- 메소드
- 빌드
- dependency
- 컬렉션
- Short
- Today
- Total
목록K-DigitalTraining 강의/6. Javascript(웹표준) (38)
Developer Gonie
1. 일단, 요소가 form 요소 내부에 존재해야 DOM으로 접근할 수 있다. 2. document.myform.
* Java에서는 멤버변수가 있는 클래스를 먼저 정의하고, 이를 이용해 객체를 만들 수 있었다. 하지만, javascript에서는 Object 타입의 객체를 먼저 만들고 여기에 멤버변수를 추가하는 방식을 사용한다. 방법1 방법2 방법3: ArrayList 같은 느낌으로 객체들의 배열을 만드는 법
* 이외에도 추가적인 것들이 많은데 그것은 강의의 pdf 파일을 참고하자 * 정규 표현식 '/ ~ /' 을 복사해서 다음의 사이트에 넣고 실행하면 정규표현식에 어떤게 입력가능한지 그림으로 보여준다. https://regexper.com/ * 정규표현식 작성시 / / 사이에 작성한다. * 정규표현식과 입력한 문자열을 비교할 때는 search() 메소드를 사용한다. \d : 십진수 숫자 1개 // 십진수 숫자 1개 입력가능 \d /\d/ // 실제 사용시 입력해야 하는 형태 {n} : 앞에 위치한 요소를 N개 입력가능하게 함 // 십진수 숫자 5개 입력가능 \d{5} /\d{5}/ {n1, n2} : 앞에 위치한 요소를 최소 n1개~ 최대 n2개 입력가능하게 함 // 십진수 숫자 최소1개~ 최대5개 입력가능..
회원가입 폼 유효성검사 * 전송 전에 유효성 검사를 해주려면 버튼에 onClick 속성을 추가해 유효성을 검사하는 함수를 호출하고, 그 함수의 리턴값에 따라 form 요소의 action 속성에 명시된 url로 이동할 수 있게 해야한다. onClick="return 함수명()" 핵심1. 요소에 대한 유효성 검사 사용자가 요소에 값을 입력하지 않은 경우 false를 return 하게 해야하는데, 사용자가 입력한 값을 가져올 땐 DOM을 이용해 입력된 value를 가져오고 이 값의 길이를 비교한다. if(myform.id.value.length == 0){ // myform.id.value == "" 이것도 가능 alert("아이디가 누락됐습니다."); myform.id.focus(); // 포커스를 이동시켜..
동일코드
동일코드 세번째 페이지
document 객체에 포함된 객체 HTML 문서에 존재하는 form, img 등의 요소들은 자동으로 배열로 관리되며 document.forms[0]. document.images[0]. 이런식으로 해당 요소에 접근할 수 있다.
document의 getElementById() 메소드 * 나중에 크롤링하는 프로그램들 보니까 document의 getElement~ 메소드들로 원하는 이미지 요소를 정확히 찝어오더라. document의 getElementById() 메소드를 이용해 얻어진 객체의 innerHTML 속성에 넣고싶은 텍스트를 할당하면 실제 그 요소의 영역에 출력된다. 이 방식은 Jquery의 html() 함수와 비슷하며, append()는 아닌게 innerHTML 속성에 재할당 하면 기존의 텍스트는 덮어씌워지기 때문에 그렇다. document의 메소드는 이게 전부가 아니니 추가적인 메소드는 아래의 링크를 참고하자. http://www.tcpschool.com/javascript/js_dom_document
window 객체의 onload 속성 이전에 body 태그에 onLoad 속성을 추가해서 body 영역이 모두 로드된 뒤에 호출될 콜백함수를 지정해 주었는데, 이와 같은 기능으로 아래와 같이 자바스크립트 코드를 작성해두면 비슷한 시점에 자동으로 호출된다. 단, 이걸 사용할 땐 body 태그에 onLoad 속성이 없어야 정상작동 한다. 둘 중 하나만 실행되기 때문에. window.onload = function(){ } * setInterval(), setTimeout() 은 시간에 의해 자동으로 불려지는 콜백 함수이기 때문에 작성만 해두면 따로 호출을 위한 코드를 작성하지 않아도 자동으로 불려진다는 것을 알아두자. window 객체의 setInterval() 메소드 특정 시간마다 지속적으로 여러번 반복되..
window 객체의 opener 속성 window 객체는 여러가지 속성들이 있는데 그중에서도 opener 속성은 open() 메소드로 자신의 윈도우를 열리게 한 부모의 윈도우를 저장하고 있다. 이를 이용하면 자식 윈도우 입장에서 부모 윈도우의 모든 요소들에 접근이 가능하여 직접 부모 윈도우에 있는 데이터를 읽어올 수 있고, 자식 윈도우에서 입력한 값을 부모의 특정 요소에 옮겨놓을 수도 있다. 사용 예시코드 * 텍스트 라벨 요소가 내부에 위치해야 이런 구현이 가능하다는 것을 알아두자. 팝업창 열기 버튼을 누르면 자식창이 열리며, 자식창에는 onLoad 속성을 추가해 두었는데, 여기서는 부모창의 텍스트 라벨 요소에 들어있는 value 값을 가져와 자신의 요소에 옮겨놓는 일을 한다. 그리고나서 닫기 버튼을 또..
window 객체의 open 메소드 새로운 브라우저 창을 여는 기능으로 공지사항 같은 팝업창을 띄울 때 사용할 수 있기도 하다. window 키워드는 생략하고 open만 사용해도 된다. 자주 사용하던 document.write()도 맨 앞에 windows.이 생략된 형태였던 것임 예시코드 onLoad속성을 주어 body 영역이 로드되고 나서 호출되도록 하여 공지사항 팝업처럼 열리게 하는 예시임. 예시코드(함수를 새로 만들어 인자 전달부분의 길이를 줄인 버전) window 객체의 close 메소드 window 객체의 open()메소드와 동작이 반대되는 메소드이다. window.open() 메소드는 객체를 하나 반환하는데 이를 변수에 할당시켜 두었다가 변수.close()를 하면 원하는 창을 닫치게 할 수 있..