[JavaScript] DOM
2022. 7. 20. 20:11
JavaScript
DOM 이란? DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식 자바스크립트가 DOM을 통하여 HTML 과 CSS로 구성된 웹의 구조에 접근하고 컨트롤 가능 객체 접근 querySelector(’선택자’) : 선택자로 첫 번째 요소 querySelectorAll(’선택자’) : 선택자와 일치하는 모든 요소 문서 객체 속성변경 문서 객체 속성 변경 문서 객체 스타일 변경 문서 객체 스타일 변경 문서 객체 제거 let cup = document.getElementById('cup'); cup.parentNode.removeChild(cup); 추후 줄서 프로젝트로 더욱 다룰 예정 - Just Do It -
[JavaScript] 문자열
2022. 7. 20. 20:11
JavaScript
문자열과 문자열 객체 차이 const calc1 = '1+2*3'; const calc2 = new String('1+2*3'); console.log(eval(calc1)); // 7 console.log(eval(calc2)); // String {'1+2*3'} console.log(eval(calc2.valueOf())) // 7 문자열 자르기 slice() const str160 = 'This is the only one story'; // slice(시작인덱스, 끝인덱스) : 시작인덱스 ~ 끝인덱스-1 console.log(str160.slice(8, 11)) // the substring() const str160 = 'This is the only one story'; // substrin..
[JavaScript] 다양한 함수 선언 방법
2022. 7. 20. 20:09
JavaScript
함수 선언 // 함수 정의 function sum(a, b) { return a + b; } // undefined 예외처리 --> 파라미터 값을 초기화 function sum(a = 0, b = 0) { return a + b; } // 익명 함수 정의 let sum = function(a, b) { let z = a + b; return z; }; // 익명 함수를 화살표 함수로 표현 let sum = (a, b) => a + b; // 자기 호출 함수 (function () {console.log("자기 호출 함수");})(); // 콜백 함수 function callTenTimes(func) { for (let i = 0; i < 10; i++) { func(i + 1); } } let callb..
[JavaScript] 체크리스트 만들기
2022. 7. 20. 20:09
JavaScript
코드 html, javascript 여행준비물 점검목록 추가 전체삭제 css @font-face { font-family: bm; src: url(../font/bamin/BMJUA_ttf.ttf); } * { box-sizing: border-box; font-family: bm; } #wrapper { width: 60%; margin: 0 auto; } h2 { text-align: center; } form { background-color: #007acc; padding: 30px 40px; text-align: center; } input { border: none; width: 350px; padding: 10px; font-size: 16px; } .addBtn { padding: 10px..
[JavaScript] Date 객체 이용하여 기념일 계산하기
2022. 7. 20. 20:08
JavaScript
코드 html, css 예담 다닌지 며칠? 기념일 계산 100일 200일 1년 500일 css @font-face { font-family: bm; src: url(../font/bamin/BMJUA_ttf.ttf); } * { font-family: bm; font-size: 25px; } #container { margin: 0 auto; width: 55%; border: 3px dashed black; text-align: center; box-sizing: border-box; } .day1 { height: 300px; } h2 { font-size: 50px; font-weight: 600; } .day1 p { font-size: 30px; } .cnt_bar { width: 70%; he..
[JavaScript] setInterval 메서드 이용해 타이머 만들기
2022. 7. 20. 20:06
JavaScript
setInterval() 사용법 setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다. 함수 API는 setTimeout() 함수와 대동소이한데요. 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받습니다. ex) setInterval() 함수를 사용하여 콘솔에 현재 시간을 2초마다 출력 setInterval(() => console.log(new Date()), 2000); 코드 html, javascript 분 초 START RESET css @font-face { font-family: bm; src: url(../font/bamin/BMEuljiro10yearslater.ttf); } * {..
[JavaScript] 입력 폼에서 조건 체크하기
2022. 7. 20. 20:05
JavaScript
코드 html 회원 가입 아이디 이메일 비밀번호 비밀번호 확인 메일링 수신 예 아니오 가입하기 취소 javascript // 아이디, 비밀번호, 비밀번호 확인 태그 받기 let id = document.querySelector("#user-id"); let pwd = document.querySelector("#user-pw1"); let ckPwd = document.querySelector("#user-pw2"); // 각 태그에 변화 시 체크 조건 실행 id.onchange = checkId; pwd.onchange = checkPwd; ckPwd.onchange = comparePwd; // 아이디 체크조건 function checkId() { if (id.value.length > 15 || i..
[JavaScript] 배열
2022. 7. 20. 19:56
JavaScript
배열 배열 : 하나의 변수에 여러 값을 저장할 수 있는 객체 자료 배열 선언 let seasons = ["봄", "여름", "가을", "겨울"]; let color = ["초록", "빨강", "갈색", "흰색"]; 배열 관련 메서드 concat() let seasons = ["봄", "여름", "가을", "겨울"]; let color = ["초록", "빨강", "갈색", "흰색"]; // 배열 두개 concat let concatArr = seasons.concat(color); console.log(concatArr); // ["봄", "여름", "가을", "겨울", "초록", "빨강", "갈색", "흰색"]; console.log(concatArr.length); // 8 join() let se..