흔하게 회원가입을 할 때 이메일이 자동완성되는 곳이 종종 있다. onblur 이벤트를 이용해서 쉽게 응용할 수 있을 것 같다. 이메일 @ 직접 입력 네이버 구글 한메일 이메일을 받기 위해 h6태그로 "이메일"을 넣어주고 도메인과 이메일을 따로 받고 @을 기본으로 넣어주게 되니 위와 같은 그림으로 입력칸을 만들었다. select 문으로 option으로 각 도메인을 선택가능하게 해 놓고 onchange 이벤트를 사용했다. onchange 이벤트는 만약 다른 값으로 바꾼다면 반응하므로 domain_select() 메소드가 실행된다. email-domain-select id를 가진 값(select문에서 선택한 값)의 value를 domain 객체에 담고 2번째 입력상자에 그 값을 넣게 되면 누를 때마다 변경된다.
API란? API는 vscode에서만 사용하는 개념이 아니고 더 넓은 곳에서 포괄적으로 쓰이고 있다. API(Application Programming Interface)은 애플리케이션 소프트웨어를 빌드하고 통합하기 위한 정의 및 프로토콜 세트인 애플리케이션 프로그래밍이라고 개념을 정의할 수 있다. API를 사용하면 구현 방식을 알지 못하는 제품 또는 서비스와도 통신할 수 있고 애플리케이션 개발을 간소화하여 시간과 비용을 절약할 수 있다. 새로운 툴과 제품을 설계하거나 기존 툴과 제품을 관리할때 API를 사용하면 유연성을 높이고 설계 , 관리 , 사용방법을 간소화하며 혁신의 기회를 얻을 수 있다. 사용예제 https://postcode.map.daum.net/guide 다음 우편번호 API를 vscode..
회원가입을 할 때 빈칸이면 밑에 알림을 주는 코드를 작성해 볼 수 있다. 더보기 회원가입 이메일 비밀번호 비밀번호 확인 회원가입 글을 h2로 , 각 email_form , password_form , password_check_form id속성을 가진 것으로 묶어서 onblur 이벤트를 이용해서 함수를 실행시킨다. 이메일에 규정에 맞게 작성되야만 다음 비밀번호가 활성화 , 비밀번호 확인도 마찬가지로 비밀번호가 활성화되면 접근할 수 있으며 비밀번호 칸과 비밀번호 확인칸이 같다면 제출버튼이 활성화되게 된다. 더보기 이메일에는 5~20글자 이내로 , 비밀번호는 isNaN을 이용해 숫자만 가능하게 , 비밀번호 확인은 비밀번호 값과 같을 것으로 해놓고 다르게 입력하면 이벤트를 주었다.
1. 이미지 파일 수정 dom을 이용해서 이미지파일도 수정가능하다. 이미지 교체 이미지를 첨부하고 버튼을 추가해서 누르면 changeImg() 메소드가 실행된다. const changeImg = () => { const img = document.getElementById('img1'); console.log(img1); // 이미지 경로값 console.log(img.src); // src 값을 변경하여 출력되는 이미지 변경하기 img.src = '../images/카카오프렌즈_라이언.png'; }; dom을 이용해서 객체에 저장한 후 속성을 변경해서 이미지를 수정가능하다. ../ 와 ./ 의 절대경로 상대경로를 유의하는 것이 좋겠다. 2. 요소의 css 속성 제어하기 스타일 변경 h2 속성의 글에 o..
1. 본문내용 오늘은 4월 11일 화요일 오늘은 35일 2. 예제 1. button을 클릭했을 때 fun1함수를 호출하고 h2태그의 innerText값을 콘솔에 출력 2. button을 클릭했을 때 fun2함수를 호출하고 h3태그의 innerText값을 alert으로 출력 3. button을 클릭했을 때 fun3함수를 호출하고 h2, h3태그의 innerText값을 id1이 적용된 div의 innerText값으로 적용하여 화면에 보이게 4. button을 클릭했을 때 fun4함수를 호출하고 id2가 적용된 div에 아래 ex id가 적용된 태그처럼 ul, li를 이용하여 1부터 10까지 출력하는 내용을 만들기 2 - 1 1번 예제 버튼1 const fun1 = () => { const h2all = do..
css는 부트스트랩을 참고하였다. 전체 범위를 가로 600px으로 제한하였다. NAVER 상단에 NAVER를 띄우도록 text-center , mt-5를 사용했다. 아이디 비밀번호 비밀번호 재확인 이름 아이디 , 비밀번호 , 비밀번호 재확인 , 이름 칸을 만들고 부트스트랩 클래스인 form-control을 적용시켰다. 생년월일 월 1 2 3 4 5 6 7 8 9 10 11 12 부트스트랩으로 지원하는 그리드 형식인 전체를 class row로 묶고 개당 항목에 class col 속성을 입혀서 같은줄에 3개가 나오도록 세팅했다. 성별 남 여 선택 안함 select문과 option태그를 이용하여 한가지를 선택받아 gender에 답을 담도록 했다. 휴대전화 대한민국 +82 미국 +1 프랑스 +33 그리드 속성중..
1. 본문 html javascript css spring springboot 본문에 id , class 속성을 부여한 h2 글을 만들었다. 2. h2요소 가져오기 const h2all1 = document.getElementsByTagName("h2"); console.log(h2all1); const h2all2 = document.querySelectorAll("h2"); console.log; 3. 모든 h2 요소의 innerText 출력하기 for (let i = 0; i < h2all1.length; i++) { console.log(h2all1[i].innerText); } 각 innerText만 출력되었다. 4. id1이 적용된 요소 가져오기 const ele1 = document.getE..
1. dom이란? DOM ( Document Object Model , 문서객체모델 ) html ( 문서 ) 에 표현된 요소들을 계층적으로 표현하고 각 요소의 속성 등을 javascript로 제어하기 위해 제공되는 여러 함수 DOM함수등을 이용하여 javascript로 화면을 제어하고 화면에 표현된 여러 정보들을 가져올 수 있음 2. 예제 안녕하세요 반갑습니다 오늘은 월요일 이제 곧 3시 두시간 남았네 2 - 1 문서 전체 출력 console.log(document); 2 - 2 현재 문서에 있는 h2요소들만 출력 console.log(document.getElementsByTagName("h2")); const h2all = document.getElementsByTagName("h2"); consol..
1. 콘솔창에 출력법 java에서는 System.out.println("X"); 문법을 사용했지만 vscode에서 console창에 출력하려면 console.log("X"); 를 사용한다. console.log("Hello Javascript!!"); 2. 변수 선언 - let java에서는 int num = 10; 등으로 변수를 선언했었는데 vscode에서는 다르다. var num1 = 10; // 옛날 방식 console.log("num1", num1); let num2 = 20; console.log("num2", num2); let str1 = "안녕하세요"; console.log("str1", str1); vscode에서는 타입이 생략되기 때문에 쓰지 않는다. 3. 변수 선언 - const co..
