본문 바로가기

전체 글207

[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.

[책/아두이노통신.03] 책 실습 예제&정답 코드 [1] 아두이노 통신 프로젝트 책에서 각 챕터별로 다루는 모든 실습예제의 코드를 아래에서 다운 받으실 수 있습니다. [2] 확인문제 정답 코드는 아래에서 다운 받으실 수 있습니다. 2022. 1. 26.

[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.

[아두이노중급.002]터치스크린으로 아두이노 LED/센서 제어하기 [아두이노중급.002]터치스크린으로 아두이노 LED/센서 제어하기 Nextion 터치스크린의 소프트웨어를 설치했다면, 이제 터치스크린과 아두이노를 연결합니다. 그리고 터치스크린 소프트웨어에서 간단한 버튼 UI를 만든 뒤 아두이노의 LED를 ON, OFF 하는 동작/ 센서값을 확인하는 프로그램을 만들어 보도록 하겠습니다. [1] Nextion 터치스크린에 전원 연결하기 (1) 이 예제에서 사용한 Nextion 터치스크린 모델은 아래와 같습니다. 모델명: NX4832T035(구매링크 클릭) Nextion HMI LCD, 감압식 터치, 3.5인치 NX4832T035 , 기본형 : 터치스크린 > 디스플레이 LED/LCD 스마트 디스플레이, 터치디스플레이, 터치lcd, 480x320, 라즈베리 파이A+, B+ 그.. 2022. 1. 21.

[아두이노중급.001]Nextion 터치스크린 - 소프트웨어 설치 일상생활에서 우리가 사용하는 입력장치들의 종류는 아주 많습니다. 그 중에서 버튼 입력이 가장 많을 텐데요. 버튼을 사람의 손가락 터치로 입력이 가능하게 하는 "터치스크린"이 요즘은 유행입니다. 그래서 기존의 버튼식 입력장치들이 터치스크린으로 많이 대체되고 있습니다. 버튼은 아무래도 많이 누르면 고장날 수도 있고 외부에 튀어나와 있다보니 충격을 받아 떨어질 수도 있고요. 또한 원하는 개수만큼 버튼을 달려면 돈이 들고, 공간이 협소할 경우 버튼 달기가 쉽지 않습니다. 하지만 터치스크린은 쉽고 간편하게 버튼을 만들 수 있고, 외관상으로 볼 때도 깔끔하고 사용하기 편리합니다. 이런 터치스크린을 아두이노에도 연결하여 사용할 수 있는데요. 이 때 가장 많이 사용하는 것이 Nextion 회사의 TFT 터치스크린 입니.. 2022. 1. 21.

이전 1 ··· 16 17 18 19 20 21 22 23 다음

728x90

티스토리툴바