멀티캠퍼스 풀스택 과정170 프론트엔드5-1. jquery의 기초와 선택자-1 제이쿼리(jQuery) 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스, 이벤트 기반의 자바스크립트 라이브러리 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 구 있다. jquery는 자바스크립트가 있는 곳에 기술, jquery는 항상 제일 마지막에 실행된다!! jquery 주소 복사해서 " target="_blank" rel="noopener">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 넣어놓기\ 5. 자동으로 HTML 실행할 때마다 jquery 소스 파일만 뜸 jquery 구현 실행문 jquery는 현재페이지가 로딩이 완료되면 ready이벤트가 발생하고, ready 이벤.. 2022. 2. 15. 프론트엔드4-5. google map api 사용-2(geocoding) 지오코딩(geocoding) 역지오코딩(Reverse geocoding) - 사람이 읽을 수 있는 주소를 지리적 좌표(경도, 위도)로 변환하는 것 - 지리적 좌표(경도, 위도)를 사람이 읽을 수 있는 주소로 변환하는 것 1. HTML 파일 2. JS파일(googleMap1.js) 1. 지도의 표시 초기값을 넣을 함수 생성 let latitude; // 위도 let longitude; // 경도 let addr; // 찾으려는 곳의 이름 let homePage; // 찾으려는 곳의 웹사이트 let popImg; // 찾으려는 곳의 이미지 function mapInitial() { // 초기값 넣기 latitude = 37.5729503; longitude = 126.9793578; addr = ['서울 선.. 2022. 2. 15. 프론트엔드4-4. google map api 사용-1 구글 맵 api 불러오기 (키가 필요) 함수이름 뒤에 ®ion=kr"을 적어야 한다. 안그러면 일본해(동해)로 표기된다. callback 함수: 나중에 호출되는 함수(로딩이 끝나면 자동으로 호출되는 함수)-> 특정함수에 전달되어 특정함수가 어떤 조건에 의해 호출하는 함수 1. HTML 파일 는 div보다 더 뒤에 적어야 한다.(그래야 실행됨) 2. JS 파일 (googleMap1.js) 1. 지도의 표시 위치를 위도, 경도 값으로 설정하고 initMap 함수 작성 let latitude = 37.5729503; // 서울시청의 위도 let longitude = 126.9793578; // 서울시청의 경도 let map; // 다른곳에서도 사용(구글 맵 객체를 전역변수로) function initMa.. 2022. 2. 14. 프론트엔드4-3.[javascript] 정규표현식을 이용한 유효성 검사 정규표현식(Regular Expression) 문자열의 특정 패턴을 찾을 수 있는 문법 처음과 끝을 '/'로 감싼 정규식 정규식의 특수문자 [ ] 문자셋(Character Set) 문자셋 안에 -(hyphen)을 이용해 범위를 정해줄 수 있다. ^ 입력의 시작, 문자열의 시작을 알려주는 특수문자 $ 입력의 끝, 문자열의 끝을 알려주는 특수문자 + 앞의 표현식이 1회 이상 반복됨을 나타내는 특수문자 {1,} * 앞의 표현식이 0회 이상 반복됨을 나타는 특수문자 {0,} {n , m} 앞의 표현식이 길이 검증할 때 사용, 만약 m이 주어지지 않았을 땐 무제한으로 취급 ( )? ( )안에 있는 문자열이 있어되고 없어도 될 때 사용 \w 한자리의 문자, 숫자 \d 한 자리의 숫자 정규표현식 생성 방법 예) 알파.. 2022. 2. 13. 프론트엔드4-2.[javascript] 팝업메뉴 만들기 완성본 더보기 안에 내용은 2022.02.11 - [멀티캠퍼스 풀스택 과정/프론트엔드] - 프론트엔드4-0.[javascript] 영화포스터 움직이는 바 만들기 메뉴에 마우스를 갖다대면 서브메뉴가 나온다. OUTER: 가디건 자켓 & 점퍼 베스트 코트 세일 TOP: T-shirt Cami Knit Shirt & Blouse DRESS: All 바캉스룩 Set BOTTOM: 레깅스 힐링투엘브 히든벤딩시리즈 스커트 팬츠 SUMMER: HOLI웜웨어 at 22 ℃ 바캉스룩 웹 페이지 구조 잡기 더보기 header(GIRLS DAILY) 전체 메뉴를 감싸는 div nav ul li (OUTER TOP DRESS BOTTOM SUMMER) ul li 서브메뉴 메인컨텐츠(지난 번에 만든 영화 포스터를 iframe태.. 2022. 2. 11. 프론트엔드4-1.[javascript] var, let, const 변수 선언 변수 선언하는 키워드 : var, let, const 1. var(변수 재선언 가능) 변수 선언을 여러 번 해도 각각 다른 값이 출력될 수 있다.(선언 여러번, 값의 재할당 가능) var a = 100; console.log("a: ",a); // a: 100 // var: 같은 변수명으로 여러번 재정의 할 수 있다. var a = 200; console.log("a: ",a); // a: 200 2. let(변수 재선언 불가능, 값 변경 가능) ' 같은 변수명의 선언은 한 번만 가능하고 값의 변경이 가능하다. (선언 한 번, 값의 재할당 가능) let hello = "안녕"; console.log("hello: " + hello) // hello: 안녕 //let hello = "잘가"; //conso.. 2022. 2. 11. 이전 1 ··· 8 9 10 11 12 13 14 ··· 29 다음
