Today I Learned/JS17 [JS] Form Validation 2 - 에이블런 프론트엔드 부트캠프 21일차 1. 이메일 검증querySelector로 email input을 가져온다.email 정규표현식을 활용해서 검증한다.// email validation 함수 정의function email_validation(name) { let input = form.querySelector(`[name=${name}]`); let txt = input.value; console.log(/@/.test(txt)); let exptxt = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/; // test()는 주어진 문자열이 정규표현식을 만족하는지 판별하고 결과를 true 또는 false로 반환 const errMsgs = input.closest.. 2024. 8. 12. [JS] Form Validation - 에이블런 프론트엔드부트캠프 20일차 더보기더보기HTML JOIN 회원가입 회원가입양식폼 Terms & Policy Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias vero vel voluptate harum nulla asperiores distinctio excepturi molestiae totam? Magnam, tenetur quis explicabo earum iure corporis velit consequatur. Totam quisquam ipsa tempore tenetur commodi voluptatibus! Aut dolor sunt optio, perferendis nihi.. 2024. 8. 12. [JS] Kakao Map - 에이블런 프론트엔드부트캠프 18일차 1. 맵 출력HTML에 지도 영역을 div#map 으로 작성해주고 JS에서 카카오 공식문서를 따라 작성한다.https://apis.map.kakao.com/web/ var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(37.58506980062978, 126.88550246441767), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도)};var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 2. 교통정보 표시맵에 교통.. 2024. 8. 8. [JS] 동적으로 HTML 구성 - 에이블런 프론트엔드부트캠프 17일차 커서 위치에 따라 이미지를 출력하고 화면 맨 왼쪽에서부터 오른쪽 끝으로 마우스를 이동하면 하나의 영상처럼 보이도록 구현해봤다.이미지를 200장을 준비하여 이를 HTML 코드에 넣어야 하는데, HTML 안에 img 태그로 일일이 넣을 순 없는 일이다. 따라서 JS를 통해 동적으로 HTML을 작성해보았다. 먼저 main 태그를 찾아 HTML 코드를 넣을 곳을 가져왔다.const main = document.querySelector("main"); FOR문을 통해 HTML 코드를 문자열로 작성해주었다// construct articleslet tags = '';for (let i = 0; i `;}; 그 후 문자열을 innerHTML을 통해 HTML로 집어넣어주었다.main.innerHT.. 2024. 8. 7. [JS] swiper.js - 에이블런 프론트엔드부트캠프 17일차 swiper js는 반응형 슬라이드 쇼와 스와이프 기능을 쉽게 구현할 수 있게 해주는 js 라이브러리이다. 다양한 슬라이드들이 존재하지만 그 중 몇가지만 설명해보겠다.0. CDN 설정아래 코드를 HTML 헤드에 작성한다.1. NavigationHTML에 navigation swiper에 필요한 요소들을 작성해준다. 슬라이드들을 작성하고 마지막에 이전과 다음 버튼을 작성한다. Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 크게 보기 위해 전체를 감싸는 .swiper에 fullscreen을 작성해주고 슬라이드 정.. 2024. 8. 6. [JS] isotope.js - 에이블런 프론트엔드부트캠프 16일차 더보기HTML DIAMOND FB IG E-mail ALL ODD EVEN Lorem, ipsum dolor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, fugiat! Lorem, ipsum dolor. Lorem ipsum dolor sit amet consectetur adipisi.. 2024. 8. 6. 이전 1 2 3 다음
