JavaScript (26) 썸네일형 리스트형 Bootstrap Modal 디자인 및 동작 DOCTYPE html> Step05_Modal.html Modal 테스트 Modal 띄우기 누르기 알림 확인 버튼을 누르면 삭제 됩니다. 확인 취소 알림2 확인 버튼을 누르면 저장 됩니다. 확인 취소 // bootstrap 에서 동작하는 Modal 의 참조값 얻어내기 const modal = new bootstrap.Modal("#myModal2", {backdrop:false}); function test() { // 여기에서 #myModal2 를 띄우기 modal.show(); } // id 가 myModal 인 요소가 화면에 나타났을때 실행할 함수 등록 document.querySelector("#myModal").addEventListener("shown.bs.modal", (e)=>{ cons.. JavaScript 정규표현식 특징 // 정규표현식으로 검증할 문자열 const str = "abcabcabc"; // 생성하는 방법 1 const reg1 = /a/; // 슬레시 안에 작성한 문자열이 정규표현식이다. // 생성하는 방법 2 const reg2 = new RegExp("a"); // 따옴표안에 작성한 문자열이 정규표현식이다. // 사용하는 함수 test, exec JavaScript 에서 사용하는 정규표현식이다. javascript 에서는 주로 .test, .exec 를 사용한다. .test 는 boolean type의 값을 리턴해주고 .exec 는 Array 배열을 리턴해준다. 정규표현식의 사용법칙) 1. 정규표현식은 대소문자를 구별한다. 2. 눈에 보이지 않는 space, tab, new line 기호도 정확히 일치해.. JavaScript localStorage 활용 예제 (3) 저장 삭제 번호 이름 주소 삭제 위와 같은 html 에서 번호, 이름, 주소를 입력하고 저장 버튼을 누르면 localStorage에 저장하고 삭제 버튼을 누르면 localStorage 에 저장된 정보를 삭제하고 페이지 로딩 시점에 localStorage 에 저장된 번호, 이름, 주소가 있다면 위의 input 요소에 출력되도록 해 보시오. document.querySelector("#saveBtn").addEventListener("click", ()=>{ // 1. 입력한 내용을 읽어와서 const num = Number(document.querySelector("#inputNum").value); const name = document.querySelector("#inputName").value; co.. JavaScript localStorage 활용 예제 (2) LocalStorage 활용 예제) 다음과 같은 html이 있다. 저장 삭제 번호, 이름, 주소를 입력하고 저장 버튼을 누르면 localStorage에 저장하고 삭제 버튼을 누르면 localStorage 에 저장된 정보를 삭제하고 페이지 로딩 시점에 localStorage 에 저장된 번호, 이름, 주소가 있다면 위의 input 요소에 출력되도록 해 보시오. document.querySelector("#saveBtn").addEventListener("click", ()=>{ // 1. 입력한 내용을 읽어와서 const num = Number(document.querySelector("#inputNum").value); const name = document.querySelector("#inputName".. JavaScript localStorage 활용 예제 LocalStorage 란? localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다. 저장한 데이터는 새로고침 해도 유지됩니다. localStorage 객체 활용해보기 웹브라우저의 javascript 실행환경에서는 해당 웹브라우저가 실행되는 기기의 파일 시스템에 접근을 할수가 없다 (파일 업로드를 위해 파일을 선택하는 경우는 제외) 따라서 파일시스템에 어떤 정보를 영구 저장을 할수가 없다. 저장 삭제 localStorage 에 저장된 메세지 : html 영역에 button 저장, 삭제 버튼 두개와 input 필드를 하나 생성하였다. 저장버튼을 누를 경우 p 요소에 저장된 텍스트가 출력하게 되고 삭제 버튼을 누를 경우 저장된 메세지가 삭제되는 기능을 만들어.. JavaScript JSON 활용 예제 JavaScript JSON 활용 예제) DOCTYPE html> Step10_example2.html 목록보기 번호 이름 주소 // 원격지 서버로 부터 받아온 json 문자열이라고 가정 const data = `[ {"num":1, "name":"김구라", "addr":"노량진"}, {"num":2, "name":"해골", "addr":"행신동"}, {"num":3, "name":"원숭이", "addr":"상도동"} ]`; // 목록보기 버튼을 눌렀을때 회원 목록을 tbody에 출력해 보세요. document.querySelector("#showBtn").addEventListener("click", ()=>{ const arr = JSON.parse(data); for (let i=0; i{ cons.. JavaScript JSON JSON 란? JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용된다. JSON은 본래 자바스크립트에서 파생되었지만 현재 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포멧입니다. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용된다. - key 값은 반드시 double quotation 으로 감싸야 한다. - value 로 작성할수 있는 형식 1. 문자열 "xxx" 2. 숫자 10 3. 논리 true, false 4. 빈값 null 5. 또 하나의 json { } 6. 또 하나의 json [ ] ex) [ value1, value2, value3 ... ] { "num":1, "nam.. JavaScript canvas 함수(9) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/69 JavaScript canvas 함수(8) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/66 JavaScript canvas 함수(7) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/65 JavaScript canvas 함수(6) 이전 포스팅을 이 rubbery.tistory.com canvas 영역의 시계이미지 위에 시침, 분침, 초침이 현재 시간에 따라동작하는 기능을 넣어보자 1. script 영역에 분침, 시침 캡 이미지를 추가한다. - clock_hour - clock_min - clock_point 2. set.. 이전 1 2 3 4 다음
