반응형 웹-프론트(Web-Front)/Javascript21 [JS-017] Input 요소 입력값 연습문제 [1] 원 둘레와 넓이 계산 프로그램 원의 반지름 Input 창에 숫자값을 입력한 뒤, "계산" 버튼을 누르면 아래에 원둘레와 원넓이 값이 나타나는 프로그램입니다. HTML/CSS 부분을 따라 입력한 뒤, Javascript 부분은 스스로 코딩해 보세요. See the Pen JS_017_Input연습문제_1 by wootekken (@wootekken) on CodePen. [2] 피자 추가주문 자동 계산기 위 그림은 체크박스를 누르면 피자 가격에 추가 주문가격이 자동으로 더해지고 체크박스를 해제하면 합계에서 가격이 빠지는 프로그램입니다. 아래 코드에서 HTML/CSS를 따라 코딩한 뒤, Javascript 부분은 스스로 코딩해 보세요. See the Pen JS_017_Input연습문제_2 by wo.. 2022. 2. 18. [JS-016] Input 요소의 입력값 수정하기 [1] Input 요소의 값을 다른 Input 창에 복사하기 Input 요소의 값을 가져오거나 수정하기 위한 실습을 하기 위해 아래의 기본코드를 자신의 개발환경으로 복사하세요. See the Pen Untitled by wootekken (@wootekken) on CodePen. 위 코드는 기본적으로 HTML과 CSS로만 이루어진 주분/배송 정보 프로그램 입니다. 체크박스(◻)를 클릭하면 주문정보에 입력한 데이터를 복사해서 배송정보 입력칸으로 자동 복사되게끔 Javascript로 코딩해 보려고 합니다. 그러기 위해서는 다음과 같이 Input 요소의 id값을 이용하여 주문정보에 접근한 뒤 .value 를 이용하면 Input에 입력된 값을 가져올 수 있습니다. [2] 입력 글자의 개수 제한 설정하기 Inp.. 2022. 2. 18. [JS-015] 스톱워치 *이번 시간에는 HTML/CSS/JS를 이용하여 스톱워치를 만들어 보도록 하겠습니다. [1] HTML은 다음과 같이 코딩을 합니다. 코딩할 양이 적고 아주 쉽습니다. [2] 위의 HTML 코드를 실행한 결과는 다음과 같습니다. [3] 스톱워치를 작동시키기 위해서는 자바스크립트 코드를 작성해야 합니다. 다음과 같이 코딩해 주세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 let seconds = 0; // seconds let centiseconds = 0; // 1/100 seconds let spanSeconds =.. 2022. 2. 8. [JS-014] To Do List 프로젝트 [0] 부트스트랩에 접속합니다 -부트스트랩 링크: https://getbootstrap.com/docs/5.1/getting-started/introduction/ [1] 부트스트랩의 CSS 링크 복사하기 [2] HTML 파일의 안에 붙여넣기.(우리가 만든 CSS 링크 바로 위에) [3] 태그 안에 다음과 같이 코딩하기 [4] 부트스트랩의 왼쪽 메뉴중, Components > Input group > Button addons 중에 2번째 코드를 복사하기 [5] HTML의 태그 바로 아래에 붙여넣으세요. 그리고 아래 노란색 칠한 부분처럼 추가수정을 해주세요. [6] 실행해 보면 아래와 같이 나옵니다. [7] 다시 부트스트랩으로 가서 왼쪽 메뉴중에 Components > List group > Basic e.. 2022. 2. 4. [JS-013] 미니프로젝트(랜덤숫자 맞히기) See the Pen Untitled by wootekken (@wootekken) on CodePen. 2022. 1. 27. [JS-012]키보드/마우스 이벤트 [1] 키보드 이벤트 키보드에서 특정 키를 누를 때 발생하는 것이 키보드 이벤트 입니다. 이벤트명 발생 시점 값 keydown 키가 눌렸을 때 keyCode keypress 키가 계속 눌린 상태일 때(연속 실행) ASCII keyup 키에서 손을 뗄 때 keyCode ◾ keypress 이벤트는 ASCII 표에 없는 shift, Fn, CapsLock 키는 인식하지 못함. ◾ keyCode 값 확인 사이트: https://keycode.info/ [2] 마우스 이벤트 마우스를 움직이거나 버튼 조작을 할 때 발생하는 이벤트 입니다. 이벤트명 발생 시점 click HTML 요소를 마우스로 클릭(눌렀다 떼기)때 이벤트 발생 dbclick HTML 요소를 마우스로 두 번 클릭했을 때 이벤트 발생 mousedow.. 2022. 1. 26. [JS-011]함수 표현식(익명함수/화살표함수) [1] 함수표현식 ▶️ JS도 다른 프로그래밍 언어처럼 함수를 만든 다음에 함수 이름을 사용해서 함수를 실행하면 됩니다. ▶️ 이 외에도 JS에서는 함수를 실행하는 여러 방법이 있습니다. 이런 방법들은 "함수 표현식"이라고 말합니다. [예제1] 익명함수(Anonymous function) See the Pen 011_예제1 by wootekken (@wootekken) on CodePen. ✔️ [예제1] JS 코드 설명 ◼️ 1번~4번줄: 자바스크립트에서 함수를 만들고 사용하는 일반적인 방법 ◼️ 6~8번줄: 자바스크립트에서 익명함수를 만드는 방법. 익명이기 때문에 함수이름은 존재하지 않고 변수 f2에 함수식 자체를 넣어버리는 구조임. ◼️ 9번줄: 익명함수가 들어가 있는 변수 f2를 이용하여 함수를 .. 2022. 1. 26. 010.JS-함수(기본 사용법) [1] 함수란? 🤜 프로그래밍에서 함수는 특정 작업을 수행하는 명령어의 모임입니다. 🤜 함수는 이름을 사용하여 호출(실행)할 수 있는 재사용 가능한 코드 조각입니다. 🤜 함수는 다른 함수 내에서 함수 호출을 포함하여 프로그램의 어디에서나 호출할 수 있습니다. [2] 함수의 장점 ✅ 함수를 사용하면 동일한 코드를 여러 번 실행할 수 있습니다. ✅ 함수는 긴 프로그램을 더 작은 구성 요소로 나눕니다. ✅ 다른 프로그래머가 기능을 공유하고 사용할 수 있습니다. ✅ 함수는 프로그램에서 입력을 받아 처리를 할 수 있어서 재사용성이 높다. ✅ 함수를 많이 사용한 프로그램은 명확한 기능과 구조를 파악하기 쉽기 때문에 테스트와 디버깅을 더 쉽게 할 수 있게 해준다. [예제1] 자바스크립트 함수 1 See the Pen.. 2022. 1. 25. 009.자바스크립트 응용문제(짝수홀수/배수찾기) [문제1] 사용자로부터 입력받은 수가 짝수인지 홀수인지 판단해 주는 프로그램을 만드세요. 아래 그림과 같이 출력되도록 하세요. *정답보기(더보기 누르기) 더보기 See the Pen JS_009_응용문제_정답 by wootekken (@wootekken) on CodePen. [문제2] 사용자로부터 자연수 1개(1~100 사이의 값)를 입력받습니다. 1~100 까지 숫자 중에서 사용자가 입력한 숫자의 배수를 모두 표시하고, 그 배수가 총 몇개인지 출력하는 프로그램을 만드세요. 아래 그림과 같이 출력되도록 하세요. *정답보기(더보기 누르기) 더보기 See the Pen JS_009_ by wootekken (@wootekken) on CodePen. 2022. 1. 20. 이전 1 2 3 다음 728x90 반응형
