국비 교육/프론트엔드18 [자바스크립트] (예제) 배달음식 주문 예제 요구사항- 기능- changeTime() 함수 : 현재 시간 = 프로그램이 시작된 시간을 기준으로 1초마다 시간이 업데이트 되도록- confirmEvent() 함수 : 코드 내의 menulist 변수와, menuqty 변수에 값을 변경했을 때 계산할 수 있도록 이벤트 걸기-calcPrice() 함수: 각 음식의 주문 수량을 변경했을 때 계산하는 함수- orderCheck() 함수 : 주문하기 버튼을 클릭했을 때 사용자 입력검증 ∘ 주문자 이름: 주문자 이름은 반드시 입력 받기, 만약 입력 받지 않을 경우 "주문자 이름을 입력해 주세요" 라는 경고창 띄우기 ∘ 전화번호: 숫자 11 자리로 입력 받기, 그렇지 않으면 "전화번호는 11 자리 숫자로 입력해 주세요" 라는 경고창 띄우고 전화번호에 포.. 2024. 3. 10. [자바스크립트] (예제) 종합 평가 점수 계산하기 요구사항- 기능1. 최종 파일은 3개 (*.html, *.css, *.js)로 분리하여 작성한다.2. 7개의 과목은 0~100사이의 점수로 입력 받는다. 점수 범위를 벗어나거나 문자열이 입력될 경우 경고창 출력 3. “결과 확인” 버튼을 클릭하면 종합점수가 출력된다. 종합점수 = 각 과목은 10% + 프로젝트 2회 20% + 출석률 20%- 디자인 (크기와 글꼴, 색상은 임의의 값을 사용한다.)1.웹 문서 전체 배경색 지정2. 글꼴은 지정된 글꼴 외에 구글 웹 폰트 사용3. 전체 화면은 가운데로 정렬 4. 입력상자의 초기값은 오른쪽 정렬5. 결과확인 버튼 : 모서리 라운드처리, 배경색상 그라데이션(임의의 값), 마우스를 올리면 그림자 처리, 결과확인 .. 2024. 3. 9. [자바스크립트] Node , 고객관리 프로그램 예제 DOM Node 접근 처리 예제 DOM Node 접근 처리 insertAdjacentHTML의 첫 번째 속성 종류 beforeend : 닫는 태그 바로 앞 beforebegin : 시작 태그 바로 앞 afterend : 닫는 태그 바로 뒤 afterbegin: 시작 태그 바로 뒤 뼈해장국 우삼겹짬뽕 오므라이스 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 들어갈 데이터let data ='순대국밥'; 1) beforebegin : 시작 태그 바로 앞.. 2024. 3. 9. [자바스크립트] classList, 예제- 다크모드 버튼 구현 classList 자바스크립트 classList 객체 연습 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 html 본문에서 사용한 id 위치 자바스크립트 classList 객체 연습 let target = document.getElementById('target');let content = document.getElementById('content'); - output() : 문서에 작성하는 함수function output(data){ target.innerHTML = data;} 1) 클래스명 가.. 2024. 3. 9. [자바스크립트] 회원가입 검증 예제 회원가입 검증- 아이디 길이는 3~5 글자 사이로 입력받는다.- 비밀번호의 길이는 3~5글자 사이로 입력받고, 비밀번호 확인과 값이 같아야 한다.- 이름은 입력받기만 하면 된다.- 성별과 취미는 읽어오기만 할것- 전화번호 : 국번은 select상자이므로 읽어오기만 하고, 나머지 번호는 반드시 숫자 8자리(입력상자 하나로)- 정확히 모든 데이터를 입력하면 경고창에 결과를 출력하시오 ( 모든 정보와 결과는 경고창으로 ) html 본문 회원 가입 아이디 .. 2024. 3. 9. [자바스크립트] 함수 - 4 (수학관련 함수) Math수학과 관련된 값이나 함수를 제공한다. - Math 에 선언된 상수console.log(`원주율 : ${Math.PI}`);console.log(`오일러 상수 : ${Math.E}`); - Falsy & TrulyFalsyTrulyFalsy 값으로 판정하는 데이터Truly 값으로 판정하는 데이터0, null, undefined, ' ' [], 비어있지 않은 문자열, 0을 제외한 모든 숫자 - abs절대값 반환console.log(Math.abs(-1)); // 1console.log(Math.abs('-2')); // 2console.log(Math.abs(null)); // 0console.log(Math.abs('')); // 0console.log(Math.abs(' ')).. 2024. 3. 9. [자바스크립트] 함수 - 5 (BOM, DOM, DOM 예제) BOM 관련 처리- Window 하위 객체들 중 document 객체를 제외한 객체(DOM)- screen, window, history, lotation 등이 있다. open(), close(), print() Window 객체가 제공해주는 메소드 : alter(), confirm(), prompt()태그 내 아이디를 통해 가져온다.let btn_01 = document.getElementById('btn_01');let btn_02 = document.getElementById('btn_02');let btn_03 = document.getElementById('.. 2024. 3. 4. [자바스크립트] 함수 -3 (배열처리, 문자열처리) 배열 처리 함수slice, splice, push, pop, sift, unshift 등의 배열을 처리하는 여러가지 함수함수내용 join("문자열")전달인자의 문자열을 구분자로 하여, 배열을 문자열로 반환reverse()배열을 뒤집는다.slice(start , end)배열의 일부분을 반환, -1 은 마지막 데이터를 의미한다. 원본을 건드리지 않는다.splice(n[, m, ...x])부분 배열로 추출하거나 다른 값으로 대체한다. 원본에 영향을 미친다.sort()오름차순 정렬concat(...item) 여러 배열을 하나로 합친다. push(item), pop()배열의 끝에 데이터를 삽입하거나 추출, 원본이 수정된다. (Stack 자료구조처럼 동작)unshift(item), shift배열의 앞에 데이터를 삽.. 2024. 3. 2. [자바스크립트] 함수 - 2 (화살표 함수) 화살표 함수일반적인 함수를 화살표로 작성하는 방법 - 함수 리터럴 방식 변경단계내용1단계funtion 키워드 삭제 2단계 ) { 사이에 화살표(=>) 삽입3단계 { } 안에 구문이 1 줄이라면 { } 생략 하고 리턴 삭제let three = (x,y) => x - y;console.log(three(16,3));// 아래의 four를 화살표 함수로 수정하시오let four = function() { console.log(`${x} + ${y} = ${x+y}`);}let four1 = (x,y) => console.log(`${x} + ${y} = ${x+y}`);four1(3,6);단계내용4단계매개변수 1개 밖에 없다면 생략 가능5단계매개변수가 하나도 없다면 생략 불가let five = x => .. 2024. 3. 2. 이전 1 2 다음
