본문 바로가기

IT Study/JavaScript15

API 사용하기(Swiper) | 오픈 API(Application Programming Interface) 오픈 API는 웹을 통해 공개된 API로, 이를 이용하여 개발자가 모바일 어플리케이션등 다양한 컨텐츠를 용이하게 개발할 수 있게 하는 방식이다. 즉, 누구나 사용할 수 있도록 공개된 API라 할 수 있다. ​ API 종류 GPS 및 날씨 API, SNS 로그인 API, 문자 API > ex) 인증번호, 이메일 API 지도 API(카카오, 구글), 주소 API(주소기반 산업지원서비스, 카카오), CKEditor 5 별점 플러그인 API, 플러그인 - 아코디언,데이트피커, 모달창 등 다양하게 많다. ​ 이러한 오픈 API를 이용하여 웹 사이트를 나만의 입맛대로 작성할 수 있다. ​ 반응형 슬라이더인 Swiper API를 사용 ht.. 2023. 1. 6.
JavaScript - window객체/history/form | window객체 window 객체의 두 가지 역할 1) 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역 객체'라고도 함 2) 일반적으로 우리가 열고 있는 브라우저의 창(browser window)을 의미하고, 이 창을 제어하는 다양한 메서드를 제공 ​ window.open(url) - 새 창 열기 window.close() - 새 창 닫기 ​ | history 객체 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체 ​ history.back() : 윈도우 열람 이력에서 뒤로 이동 history.forward() : 윈도우 열람 이력에서 앞으로 이동 history.go() : ()안의 정수값에 따라 페이지 단계 이동 클릭 시 앞.. 2023. 1. 6.
JavaScript - EventListner(click,innerHTML,노드생성, 삭제) | EventListener 이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트 이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다. ​ click 이벤트 클릭했을 때 발생하는 이벤트 클릭 전 클릭 후 ​ innerHTML 해당 함수 사용 시 본인이 지정한 태그 html 문서 생성 클릭 전 클릭 후 ​ onclick, appendChild appendChile : 자식 요소를 추가 클릭 전 클릭 후 ​ ​ 부모 요소의 자식 요소를 삭제하기 클릭 시 삭제 ​ createTextNode - 노드 생성 createElement - 요소 생성 클릭 전 클릭 후 2023. 1. 6.
JavaScript - 셀렉터/콜백 함수 | 요소 선택자 document.getElementsByTagName(태그명) - 해당 태그명을 가진 요소들을 배열로 가져온다. document.getElementById(id명) document.getElementsByClassName(클래스명) - 해당 클래스명을 가진 요소들을 배열로 가져온다. document.querySelector(선택자) document.querySelectorAll(선택자) - 해당 선택자를 가진 요소들을 배열로 가져온다. ​ 버튼 클릭 시 가져온 아이디, 클래스명에 대한 요소 배경색 바꾸기 querySelcetorAll 사용 버튼 클릭 시 이벤트 발생 | 콜백 함수 선택해둔 요소에 약속된 신호가 감지(트리거)되면 약속해둔 내용이 수행(이벤트)되는 것 ​ 2023. 1. 6.
JavaScript - 마우스/key 이벤트 | 이벤트 이벤트 트리거 이벤트를 발생시키는 신호 ex) click, dbclick, mouseover, keydown, keypress ​ 이벤트 핸들러 실제로 일어나는 이벤트 내용 ​ html에서 사용하는 요소에게 이름을 부여하는 방식 1) id 2) class 3) name : 한 요소마다 이름을 부여(js나 서버를 위해 사용) ​ onmouseover : 마우스가 올라갔을 때 이벤트 발생 onmouseout : 마우스가 떨어졌을 때 이벤트 발생 이벤트 시작 전 마우스 올라갔을 때 마우스가 올라간 후 떨어졌을 때 ​ ​ onkeydown : 키보드 입력 했을 때 이벤트 발생 입력한 값에 따라 key 값으로 나온다 ** enter의 key값 == 13 ​ ​ 전화번호를 입력했을 때 끝자리를 *로 처리.. 2023. 1. 6.
JavaScript - Math 함수 | Math 함수 Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체 Math 객체는 다른 전역 객체와는 달리 생성자(constructor)가 존재하지 않음 따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메소드나 프로퍼티를 바로 사용할 수 있다. ​ 메소드 설명 Math.min(x, y, ...) 인수로 전달받은 값 중에서 가장 작은 수를 반환함 Math.min(x, y, ...) 인수로 전달받은 값 중에서 가장 큰 수를 반환함 Math.random() 0보다 크거나 같고 1보다 작은 랜덤숫자를 반환함 Math.round(x) x를 소수점 첫 번째 자리에서 반올림하여 반환함 Math.floor(x) x와 같거나 작은 수 중에서 가장 큰 정수.. 2023. 1. 6.
JavaScript - 변수/데이터타입/제어문/함수/객체/배열 | JavaScript 인터프리티 언어(파이썬, SQL, JS) 컴파일 언어(C, Java) ​ 인터프리티 언어 1) 채팅형 언어 2) 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간코드인 바이트코드로 변환한 후 실행 3) 실행 파일을 생성하지 않음 4) 코드가 실행될 때마다 인터프리트 과정이 반복 수행됨 5) 인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되므로 코드 실행 속도가 비교적 느림 ​ script언어를 해석하는 번역가는 브라우저에 포함되어 있음 >>각 브라우저마다 실행결과가 다를 수 있음에 유의 ​ JS는 크게 두가지로 쓰임 1) 연산, 기능 처리 ex) 비밀번호와 비밀번호 확인 등 ​ 2) 웹 페이지에서 요소(태그)의 기능(이벤트) ex) 위젯 ​ | 변수선언 var .. 2023. 1. 5.
JavaScript - setTimeout,setInterval/콜백함수/Promise/Async,Await 1. setTimeout, setInterval setTimeout(콜백 함수, ms(1000=1초)) - 넘겨준 함수를 해당 밀리 초 '만큼' 흐른 뒤 호출 clearTimeout(설정된 타임아웃 객체) - setTimeout에서 설정된 것을 취소 ​ setInterval(콜백함수, ms) - 넘겨준 함수를 해당 밀리초'마다' 흐른 뒤 호출 clearInterval(설정된 인터벌 객체) - setInterval 에서 설정된 것을 취소 저를 선택 해주세요 setTime 취소 setInterval 취소 결과 영상 확인 : https://blog.naver.com/yyhhhjun/222780293676 프론트 엔드 day 22 - setTimeout,setInterval/콜백함수/Promise/Async,A.. 2023. 1. 5.
JavaScript - Mouse/Fullscreen/Hidemenu 이벤트 마우스 이벤트 1. Practice HTML CSS, JS 결과 영상 확인 : https://blog.naver.com/yyhhhjun/222770561337 프론트 엔드 day 20 - Mouse/Fullscreen/Hidemenu 이벤트 마우스 이벤트 1. Practice HTML CSS, JS 2. Practice HTML CSS, JS 풀 스크린 이벤트... blog.naver.com 2. Practice HTML CSS, JS 결과 영상 확인 : https://blog.naver.com/yyhhhjun/222770561337 프론트 엔드 day 20 - Mouse/Fullscreen/Hidemenu 이벤트 마우스 이벤트 1. Practice HTML CSS, JS 2. Practice HTML .. 2023. 1. 5.

티스토리툴바