본문 바로가기
반응형

Front-End/JavaScript28

JavaScript(9) - API 사용하기(2) 오픈소스 이용하여 카카오 맵 API 사용하기 마커에 인포윈도우 표시하기, 여러개 마커 표시하기 이용 여러개 마커 표시하기 기능은 마커에 인포윈도우가 뜨게 재설정 CSS로 인포윈도우 text 크기 조절, bold 처리 [결과] [코드] 2023. 2. 21.
JavaScript(9) - API 사용하기(1) 오픈소스 이용하여 카카오 우편번호 API 사용하기 기본 디자인이 마음에 걸려서 부트스트랩을 이용하여 약간의 디자인을 입혔음 직접 입력을 해야하는 나머지주소 창을 제외한 텍스트 입력창은 readonly 키워드를 적용하여 읽기만 가능하게 만듦 [결과] [코드] 카카오 우편번호 서비스 2023. 2. 21.
JavaScript(8) 1. String 객체의 메소드 ✅문자열 추출 charAt(인덱스번호) let str = "Gone with The wind" document.write(str.charAt(0)) // G -> '0'인덱스의 문자 추출 substring(시작인덱스번호, 마지막인덱스번호+1) let str = "Gone with The wind" document.write(str.substring(10, 13)) // 10~12인덱스의 문자 추출 slice(시작인덱스번호, 마지막인덱스번호+1) let str = "Gone with The wind" document.write(str.slice(10, 13)) // 10~12인덱스의 문자 추출 ✅문자열 치환 toLocaleLowerCase() let str = "Gone w.. 2023. 2. 20.
JavaScript 복습 ✅전개연산자(Spread Operator) 배열의 전개연산자 push를 이용할 때 전개 연산자를 사용하지 않은 코드는 array 전체가 들어가 2차원 배열이 되었지만, 전개 연산자를 사용하게 되면 array 내부의 요소 하나하나가 삽입이 된다. const arr = [1,2,3]; let test_arr = [4,5,6]; let test_arr2 = [4,5,6]; test_arr.push(arr); console.log(test_arr); //[4, 5, 6, [1, 2, 3]] // 2차원 배열로 arr배열 삽입됩 //ES6 test_arr2.push(...arr); console.log(test_arr2); //[4, 5, 6, 1, 2, 3] // 1차원 배열로 arr배열 삽입됨 객체의 전개연산.. 2023. 2. 19.
JavaScript - to do list 만들기 할 일 목록 만들기 2023. 2. 18.
JavaScript(7) - 실습 : 회원가입 id중복확인과 id적용은 아직 수업진도가 안나가서 나중에 추가할 예정 부트스트랩을 이용하여 좀더 깔끔하게 만들었음 textarea 의 오른쪽 끝부분에 외부에서 사이즈 조정을할 수 있는 resize버튼이 있었는데 resize:none 처리를 하여 없앴음 [결과] [html 코드] 회원가입 이름 아이디 비밀번호 주민등록번호 이용 약관 동의 내용 생략 이용 약관 동의 [js 코드] /* member.js */ const validate = () => { // 이름 // 1. 두글자 이상 // 2. trim() 적용 // 조건 불만족시 // 입력창 아래에 "두 글자 이상의 한글 또는 영문만 사용 가능합니다." 출력(color:red) // 해당 폼이 서버로 전송되는것을 차단 // 커서가 입력창으로 가게하기 le.. 2023. 2. 17.
자바스크립트 예제(6) 로또번호 발생시키기 1 ~ 45개의 숫자 중 6개의 중복되지 않는 랜덤 번호를 추출하여 오름차순 정렬하시오 [결과] [코드] 로또번호 [다른풀이1] function lotto() { let lotto = [] // 6개의 로또번호를 저장할 배열 for (let i=0; i { var lotto = [] // 6개의 로또번호를 저장할 배열 while (lotto.length < 6) { var num = parseInt(Math.random() * 45 + 1); // 1~45 까지의 정수 랜덤 추출 if (lotto.indexOf(num) === -1) { // 추출한 값이 다른 인덱스의 값과 같은지 중복확인 lotto.push(num); // 중복값이 배열에 없다면 num을 lotto배열에 push }.. 2023. 2. 16.
JavaScript(6)-2 1. 표준 객체 Math 객체 Number 객체 ✅Date객체 Date객체 메소드 종류 getDate() : 일자 getDay() : 요일 (일요일 : 0 ~ 토요일 : 6) getFullYear() : 연도 getMonth() : 월 (1월 : 0 ~ 12월 : 11) getTime() : 1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환 getHours() : 시간중 시 (0시(0) ~ 23시(23)) getMinutes() : 시간 중 분 (0분(0) ~ 59분(59)) getSeconds() : 시간 중 초 (0초(0) ~ 59초(59)) getMilliseconds() : 시간 중 초를 밀리초(millisecond) 단위로 반환 메소드 사용방법 let .. 2023. 2. 16.
JavaScript(6)-1 문서 객체 조작하기 ✅문서 객체 모델 (DOM: Document Object Model) 자바스크립트를 활용해서 HTML요소를 조작할 수 있게 하는 방법을 모아둔 객체들의 집합 document.body.innerHTML += '' // innerHTML : 문자열 ✅document.addEvenListener() 메소드 문서객체에 이벤트를 연결하는 메소드 문서객체가 모두 만들어진 다음에 함수를 실행하게함 이벤트가 실행될 때 호출되는 콜백함수를 이벤트리스너 또는 이벤트 핸들러라고 함 메소드 실행 흐름 addEvenListener() 메소드가 없을 때 위에서 아래로 코드실행이 됨에 있어서, head태그의 document.body.innerHTML 코드를 실행하려면 body태그가 있어야하는데 아직 만들어 지지.. 2023. 2. 16.
반응형