본문 바로가기
반응형

Front-End44

JavaScript(5) ✅함수 선언 형태 선언적 함수(옛날 사용 방식) function f (매개변수, 매개변수) { return 리턴값 } 익명 함수 const f = function(매개변수, 매개변수) { return 리턴값 } 프로시저 형태의 함수 매개변수를 갖지않는 함수 const f = function() { consol.log('안녕하세요 + ${x}') consol.log('안녕하세요 + ${x}') consol.log('안녕하세요 + ${x}') } 수학적 함수 매개변수가 있는 함수 const f = function(x) { return x + 5 } ✅API (Application Programming Interface) 애플리케이션 프로그램을 만들때의 약속 ✅나머지 매개변수 API 에 많이 사용되므로 형태를.. 2023. 2. 15.
자바스크립트 예제 (4) 반복문 연습문제 1. 아래와 같이 출력하시오 12345 23456 34567 45678 56789 [풀이] for (let i=1; i 2023. 2. 14.
JavaScript(4) 1. 스택, 힙, 비파괴적 처리, 파괴적 처리 기본자료형 복합자료형 숫자, 문자열, boolean 배열, 함수, 객체 stack 차례로 저장됨 저장 가능 값이 작음 숫자, 문자열, boolean 저장 (기본자료형) hip 마구잡이로 저장됨 저장 가능 값이 큼 배열, 함수, 객체 저장 (복합자료형) 💡 스택영역에 저장될 수 없는 큰 값인 복합자료형은 힙 영역에 저장됨 → 값이 저장되어있는 힙 영역에 주소(번지)를 주어서 그 주소값을 스택 영역에 저장 → 힙영역 값을 불러올때는 스택영역에 저장된 주소를 레퍼런스(참조)함 비파괴적 처리 처리 후에 원본 그대로 유지 파괴적 처리 처리 후에 원본 변경됨 자바스크립트 특성상 값을 변경할 때 값을 생성하는것이아닌, 그 값을 직접적으로 변경 → 따라서 레퍼런스하는 주소.. 2023. 2. 14.
자바스크립트 예제 (3) 1. if문 이용하기 1-1) 운행거리에 따른 택시 요금을 계산하시오 (단, 2000m 이하는 기본요금 900원 / 2000m 초과 운행시 200m 마다 기본요금에 100원씩 가산하여 요금을 계산한다.) [풀이] const f = (x) => { let y = 900; // 요금 기본값 설정 if(x>2000) { y = 900 + Math.ceil((x-2000)/200)*100 } console.log(`총 운행거리: ${x}m`) console.log('기본요금: 900원') console.log(`추가요금: ${y-900}원`) console.log(`전체요금: ${y}원`) } 2. for문 이용하기 2-1) 정수 1~x 사이의 모든 수를 더하시오 (누적 합) [풀이] const f = (x) .. 2023. 2. 13.
JavaScript(3) for 문 조건식이 true일때 실행문이 반복해서 수행됨 for (let i = 1; i < 10; i++) { document.write(i + " "); } for/of 문 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해줌 반복할 수 있는 객체 : Array, Map, Set, arguments 객체 등 루프마다 객체의 열거할 수 있는 프로퍼티의 값을 지정된 변수에 대입 let arr = ['바나나', '사과', '귤']; for (let i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함. document.write(arr[i]); } for (const value of arr) { // 위와 같은 동작을 하.. 2023. 2. 13.
html과 css를 이용하여 웹 화면 구현해보기(2) [참조사이트] https://dinfree.com/lecture/frontend/122_css_exam.html Quiz-2) 사이드 메뉴 웹페이지 구조 만들기 고정된 사이드 메뉴를 가지는 간단한 웹페이지 구조를 만드는 것이 목표 입니다. 실행결과를 보고 최대한 동일하게 만들어 보도록 합니다. 사이드 메뉴는 마우스가 올라갈 경우 배경과 글자색이 변경 되도록 해야 합니다. 본문에 학과, 학번, 이름 등을 넣고 작성 합니다. 헤더영역과 사이드메뉴는 고정되어 있고 본문이 스크롤되어 헤더 영역으로 들어갈때 헤더 아래쪽으로 들어가야 함. ✅실행 결과 코딩 시간은 1시간30분정도 걸린것 같다. css 파일을 따로 만들어 사용했다. 이번엔 reset을 사용하여 초기화 후 코딩하였다. header 부분을 상단에 고정하.. 2023. 2. 10.
자바스크립트 예제 (2) 1. 산술연산자 활용하기 1-1) 각 지폐갯수를 구해서 표작성해서 본문 id=demo에 출력하시오. [결과] [코드] 자바스크립트는 숫자의 기본타입이 실수값이기때문에 money/10000를 그대로 연산시키면 소수점이 나올것같아서 parseInt() 를 사용했다. 2. if / else-if문 활용하기 2-1) 평균 95점이상이면 장학생을 출력하시오. [코드] if (aver>=95) { document.write("장학생"); } 2-2) 국어점수가 70점이상이면 합격, 아니면 불합격을 출력하시오. [코드] if (kor>=70) { document.write("합격") } else { document.write("불합격") } → 삼항연산자도 이용해보았다. document.write(kor>=70 ? .. 2023. 2. 9.
JavaScript(2) 1. 타입변환 let num = 20; // Number 타입의 20 num = "이십"; // String 타입의 "이십" let num; // 한 변수에 여러 번 대입할 수는 있지만, 변수의 재선언은 할 수 없습니다. 재선언문은 무시됩니다. 자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있음 ✅자동 타입 변환 10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨. "3" * "5"; // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨. 1 - "문자열"; // NaN →NaN은 Not a Number의 축약형으로, 정의되지 않은 값이나 표현할 수 없는 값이라는 의미 ✅강제 타입 변환 강제 타입 변환에 사용되는 함수 (자바스크.. 2023. 2. 9.
자바스크립트 예제 (1) 문1) 임의의 정수가 짝수(2의 배수)인지 확인하시오 → 자바 문법에만 익숙한터라 if문을 써야하나 고민됐다. 하지만 학원 진도상에서는 if문을 배우지 않아서 if문없이 해결하려니 막막했다. 자바스크립트 문법은 처음이라 막막해서 일단 자바 문법으로 풀어보았다. 자바문법 let x=4; if (x%2 == 0) { document.write(true); } else { document.write(false); } 자바스크립트문법 document.write(x%2==0); → 자바스크립트 풀이 보고 허탈함 느끼는중 문2) 해당 년도가 윤년인지 확인하시오 4로 나누어 떨어지는 해는 윤년이다. 하지만 100으로 나누어 떨어지는 해는 윤년이 아니다. 하지만 400으로 나누어 떨어지는 해는 윤년이다. let yea.. 2023. 2. 8.
반응형