본문 바로가기

시작179

221117 실전예제 - CRUD 게시판 만들기 오늘 내가 배운 것 1. CRUD - 게시판 만들기( create 영역, read 영역) 1. CRUD - 게시판 만들기 코드 진행 순서 더보기 1. index.html 파일 만들고, board폴더와 public 폴더 만들기 - board는 다른 카테고리? 의 창들(list, view, write html 파일 모음) 2. html 요소 넣어주고, js파일 연결하기 (파일이 다르니 경로 잘 보고 연결후에 확인) 3. list (글 목록)에서 발생하는 이벤트는 총 2가지 (글 제목클릭 -> 뷰, 글쓰기 클릭 ->쓰기) - a태그로 경로 지정해주기 로컬 스토리지로 데이터 주고받기 로컬 스토리지에 데이터 저장하기 window (web APIs) window.localStorage.setItem('name','.. 2022. 11. 18.
221116 실전예제 - try_catch(), 데이터셋(dataset, data- ), CRUD 댓글창 만들기 오늘 내가 배운 것 1. try-catch() 2. 데이터셋 3. CRUD - update 영역, delete 영역 코드 진행 순서 1. Creat : 댓글을 입력할 수 있다 - 댓글 입력 폼에 내용을 입력 한 뒤 `submit` 을 누르면 리스트에 추가된다. - 만약 입력 폼에 내용이 비어 있는 상태에서 `submit`을 누르면 경고 팝업을 띄움(alert or model) - 댓글이 성공적으로 처리가 되면 입력 폼을 `reset`한다. 데이터를 저장하는 영역까지가 creat로 생각하자. 2. Read : 댓글을 리스트로 볼 수 있다. - 댓글 내용은 `아이디`, `댓글내용`, `날짜` 로 표현한다. - 댓글 리스트는 최신순으로 나타낸다. - 댓글 총 갯수를 표현한다. - 삭제 버튼이 존재한다. 3. .. 2022. 11. 17.
221115 실전예제 - Counter 만들기, CRUD-댓글창 만들기 오늘 내가 배운 것 1. Counter 2. CRUD - CRUD란? - 댓글창 만들기 - Create 영역 - Read 영역 1. Counter 만들기 코드 짜기 전 순서 생각해보기 1. 처음엔 value : 0으로 시작한다. 2. + 버튼 만들기, - 버튼만들기 3. + 버튼을 누르면 value 값이 1 증가한다. 4. - 버튼을 누르면 value 값이 1 감소한다. 5. CSS는 제외 5. 간단하게 구현 가능한 부분이라 외부 파일이 아닌 html 내부에서 script 태그에 작성할 예정이다. Value : + - handler 함수 1개에 +와 -를 한 번에 표현했다. e.target.id가 increment이면 true 영역에 +를 위한 코드를 작성하고, increment가 아니면 else의 fa.. 2022. 11. 16.
221114 실전예제 - 로또 번호 생성기 오늘 내가 배운 것 1. 버블 정렬을 이용한 배열 요소 정렬 2. 로또 만들기 1. 버블 정렬 버블 정렬 - 오름차순으로 정렬하기(내림차순도 가능함) 1. 서로 인접한 두 값을 검사하여 정렬하는 알고리즘 - 인접한 2개의 값을 비교하여 크기가 순서대로 되어 있지 않으면 서로 교환한다. 2. 1회 반복을 하고 나면 제일 큰 수가 맨 뒤로 이동한다, 두 번째 반복에서는 맨 끝에 있는 수는 제외하고 실행된다. 이렇게 1회 반복할 때마다 반복에서 제외되는 데이터가 하나씩 늘어나서 마지막 반복 시에 오름차순으로 정렬이 되어있다. 3. 단점:정렬이 끝나도 설정된 횟수만큼 계속 반복문이 돌기 때문에 비효율적이다. //1차 목표 : 콘솔에 아래 모양대로 찍기 // 0,1 // 1,2 // 2,3 // 3,4 // 4,.. 2022. 11. 15.
221114 실전예제 - 웹페이지 MENU 만들기, 슬라이드 영역만들기 오늘 내가 배운 것 1. MENU(gnb) 만들기 2. 슬라이드 영역 만들기 1. MENU(gnb) 만들기 GNB : Global Navigation Bar의 약자로, 웹사이트 전체에 동일하게 적용되는 내비게이션 바 코드 구현 순서 (자바스크립트 순서) 1. 각 id와 class에 접근할 수 있게 변수로 할당한다. 2. gnb 밑에 4개의 li가 있는데, 그 li에 각각 접근하려면 gnbs[0] , gnbs[1] .... 로 접근하는데, 이를 이용해서 이벤트를 등록한다면, gnbs[0].addEventListener / gnbs[1].addEventListener ... 처럼 이벤트를 등록한다. 위에 예시 같은 경우 li에서 마우스가 오버됐을 때 function이 실행되고, 실행되는 코드의 내용은 gnb.. 2022. 11. 14.
221111 실전예제 - 웹페이지 메인 이미지(Visual) 영역 만들기 javascript 웹 페이지 메인 이미지(visual) 영역 만들기 예시로 만든 코드는 3가지 이미지로 3초마다 이미지가 한 장씩 바뀌며, 버튼을 눌렀을 때 해당 이미지로 이동한다. 그리고 이전, 다음 버튼을 누르면 이전, 다음 이미지를 보여준다. 오늘 내가 배운 것 1. DOMContentLoaded 2. 고차 함수 (higher-order function) 3. getAttribute() 1. DOMContentLoaded DOMContentLoaded는 전체에 한 번만 실행된다. DOMContentLoaded 이벤트를 사용하는 이유는 코드가 실행됐을 때 `script` 태그의 위치가 `head` 안에 있다면 스크립트를 실행될 때 HTML을 다 불러들이 후에 실행시키기 위해서 사용한다. DOMCon.. 2022. 11. 13.
728x90

티스토리툴바