프로젝트 실습

[javascript] 성적 등록 기능 (appendChild/createElement) ✔️ 성적 등록 기능 등록하기 - 등록하기 버튼을 누르면 성적이 등록된다. - 모든 항목이 유효성 검사를 통과해야 등록될 수 있다. - 기존 값들은 아래 축적되고, 새로운 성적 등록 칸이 비어있는 상태로 생성된다. 1) 유효성 검사부터 하기 if(! check("input-form")){ return; } 2) tr 태그 가져오기 / td 태그 가져오기 / tbody 가져오기 td 태그 용도 : td에 저장된 값을 가져올 때 써야함. tr 태그 용도 : 새로운 td를 만들면 tr에 저장해야함 tbody : 새로운 td가 채워진 tr을 저장해야함 const inputForm = document.querySelector..

function insertScore() { //복제!! const tbodyNode = document.querySelector("tbody"); //복제할 노드 const trNode = document.querySelector("tbody tr"); const cloneNode = trNode.cloneNode(true); var tds = cloneNode.querySelectorAll("td"); tbodyNode.append(cloneNode); } - 내용 그대로 복제되지 않도록 조정 필요

👩‍💻 국어, 영어, 수학 점수를 입력하면, 총점과 평균 input 값이 자동으로 계산되도록 한다. = 나는 onchange() 를 통해 국어, 영어, 수학 input 값의 변경을 감지하도록 코드를 짰다. onchange 를 안쓰고 이상한 연산 작업만 잔뜩하다가... 드디어 해결 ✔️ onchange 가 들어간 위치 등록하기 ✔️ 총점, 평균 자동 계산 - 자바스크립트 function sumAvg() { let f = document.scoreForm; let kor = Number(f.kor.value); let eng = Number(f.eng.value); let mat = Number(f.mat.value); f.tot.value = kor + eng + mat; f.ave.value = Math..

[javascript] 성적처리 폼 만들기 (유효성 검사) 👩‍💻 성적처리 폼 만들기 - 학번은 5자리 숫자만 입력 가능 - 이름은 한글 2~5자리만 가능 - 생년월일을 입력 - 점수는 숫자만 입력 가능 - 점수는 0~100사이만 가능 👩‍💻 자바스크립트 코드 (유효성 검사) - 학번 if(! /^\d{5}$/.test(f.hak.value)){ alert("학번은 5자리 숫자만 가능") f.hak.focus(); e.preventDefault(); return false; } - 이름 let checkName = /^[가-힣]{2,5}/; if(checkName.test(f.name.value)){ alert("이름은 한글로 2~5자리만 가능") f.name.focus(); e.preventDefaul..

✔️ 디데이, 나이 계산 폼 만들기 : 과제로 작성했던지라, 너무나 투박한 코드지만, 결과값은 잘 나온다. : 단순하게 Date() 객체 이용해서 변형에 변형에 변형...! 기준년월일 초기화 기준일부터 일째 되는 날은 ? 계산 까지 며칠 ? 계산 * 기준일을 1일로 계산 생년월일 나이는 ? 계산

✔️ 로또 프로그램 만들기 : indexOf 가 중요했다. 1) 처음에 배열을 우선 선언하기 : let nums = []; 2) 하나의 변수를 잡아서 그 변수에 랜덤 값을 반환한다. 3) 이후, indexOf 를 이용해서 배열에 랜덤값 변수가 있는지 여부를 확인하는 if 문을 작성한다. 4) 중복값이 없는 랜덤값이라면 배열에 push 해주기 로또 1등을 향하여! (혼자 1등) 구매

✔️ 일자별(날짜별) 거래내역 조회버튼 : DOM 에 onclick 속성 이용 : Date() 객체 이용 오늘 1주일 1개월 3개월 6개월 1년 ~ 검색

수업 시간에 간단한 과제로 제출했던 메인 페이지 만들기! CSS 파일과 HTML 파일을 따로 만들었다. 회사소개 -> CEO 인사말 누르면 페이지도 바뀜! (코드는 여기에 안올렸지만) [가장 어려웠던 부분] 메뉴 태그를 정렬하는게 가장 어려웠다. 직접 코드를 하나하나 분석할 시간도 없이 받은 과제라서 이해하면서 만드느라 시간이 너무 오래걸림. 거의 4시간 넘게 걸렸던 것 같다. [배운 부분] 메뉴 펼치기 ! table 태그로 메뉴 만드는 방법을 복습할 수 있었다. ✨ 결과물 👩‍💻 CSS 코드 @charset "UTF-8"; @import url(https://fonts.googleapis.com/earlyaccess/hanna.css); @import url('https://fonts.googleapi..

[CSS] display: flex 으로 메뉴 만들기 (1/2/3) ✔️ 메뉴 만들기 (1) - 메뉴가 고정되지 않음 홈 Menu 1 Menu 2 메뉴바를 화면 상단에 고정 - display: flex main 영역 main 영역 main 영역 main 영역 main 영역 main 영역 main 영역 footer 영역 💡 헤더 부분에 포지션 fixed 를 줬다. position: fixed; top: 0; left: 0; right: 0; 태그에는 display: flex; align-items: center; /* justify-content: center; */ flex 를 주니까 메뉴들이 옆으로 붙어서 출력되었다. 💡 태그에 display: block; 준 이유 : 그래야 패딩 값이 먹히기 때문이다..

[HTML] 태그로 게시판 만들기 - 연습 ✔️ ul 태그로 게시판 만들기 1. 게시판 내용으로 들어갈 부분 , 태그로 작성하기 게시판 번호 제목 작성자 작성일 조회수 3 HTML 강좌입니다. 프론트 2022-09-12 33 2 CSS 강좌입니다. 이자바 2022-04-05 3 1 자바스크립트 강좌입니다. 오자바 2022-02-03 30 2. CSS 코드 짜기 - 기본 - 기본적으로 패딩이랑 마진 값 0으로 바꾸기 - body 부분 기본값 설정하기 - title 값 설정하기 * { padding: 0; margin: 0; } *, ::after, ::before { box-sizing: border-box; } body { font-family:"Malgun Gothic", "맑은 고딕", NanumGo..