웹개발 7

#3-2 계산기(+α 버전)

※소소한 개인 프로젝트 기록입니다. 1) 과정 2021.06.27 - [개발일기] - #3-1 계산기 에 이은 프로젝트입니다. #3-1 계산기 ※소소한 개인 프로젝트 기록입니다. 1) 과정 이번 프로젝트는 '계산기'이다. 왜 3-1 이냐면, 현재 코드까지는 오직 두개의 수만 계산할 수 있기 때문! 이번에도 역시나 'Zero cho'님의 강의에서 아이 sebada.tistory.com 이전 글에서 언급한 계산기 응용 버전이다. 코드를 많이 수정한 것은 아니고, 이전 버전이 오직 숫자 2개만 연산이 가능했다면, 이번엔 연달아 숫자를 받아서 연산하는 것이나, = 를 눌러 나온 최종 값에 또 다른 연산을 시작하는 방식으로 여러개의 수를 계속해서 연산할 수 있는 계산기를 만들었다. const operCal=(va..

개발일기 2021.07.02

[JavaScript] 클릭한 요소 인덱스 구하기 (querySelectorAll, onclick...)

querySelectorAll을 쓰면서 가끔 겪는 문제가 있다. 선택한 요소 중 특정 요소만 효과를 주고 싶은데, 그러면 그 요소의 인덱스를 알아야 한다는 것! 그래서 구글링을 해보다가 할 수 있는 방법을 찾았긴 찾았다. 이게 과연 성능 등을 고려해도 좋은지는 모르겠지만....! 그래도 오늘의 성과이니 기록해두려고 한다. 아래의 예제는 모든 button 요소들을 저장한 buttons 에서, 내가 클릭한 인덱스(buttons[n])의 요소가 가지고 있는 textContent를 alert 창으로 띄우는 기능이다. const buttons=document.querySelectorAll('button'); for(let i=0;i{ alert(buttons[idx].textContent); } })(i); } ..

웹/JavaScript 2021.06.26

#2 쿵쿵따 게임

※소소한 개인 프로젝트 기록입니다. 1) 과정 이번 프로젝트는 '세음절의 단어로 끝말잇기를 이어가는 쿵쿵따 게임'! 얼마 전에 알게 된 'zero cho'님의 강의를 참고하여 zero cho님 강의에서 나오는 방식+나만의 아이디어로 탄생한 프로젝트이다. (https://www.youtube.com/c/ZeroChoTV/featured) 내 글을 보시진 않겠지만... 강의 최고예요 zero cho님.. 이제야 알게 돼서 너무 아쉽... 아무튼, 쿵쿵따 게임 진행 방식을 간략하게 설명하자면 다음과 같다. 1. 쿵쿵따 게임을 함께 할 인원 n명을 입력한다. (취소를 누르면 게임을 진행하지 않는다) 2. 자신이 입력한 인원이 맞는지 확인하고, 1번부터 n명까지 차례로 입력창에 단어를 입력하여 끝말잇기를 이어간다..

개발일기 2021.06.25

[JavaScript] 숫자 자료형(number)

※배워가는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드려요😁 1) 자바스크립트 자료형 자바스크립트의 자료형은 크게 기본 타입과 참조 타입으로 나뉨 - 기본 타입 : 숫자, 문자열, 불린값, undefined, null - 참조 타입 : 객체 (배열, 함수, 정규표현식) 2) 숫자 c언어와 같은 경우에 int, long, float, double 등 정수냐 실수냐에 따라 다양한 숫자타입이 존재하지만, 자바스크립트의 경우에는 딱 하나의 숫자형, number 만 존재한다. let intNum=10; let floatNum=0.5; console.log(typeof intNum); // number console.log(typeof floatNum); //number 자바스크립트에서는 모든 숫자를 64..

웹/JavaScript 2021.06.15

[JavaScript] undefined vs null (undefined과 null의 차이점)

※배워가고 있는 학생입니다. 틀린 부분은 댓글로 알려주시면 감사하겠습니다😁 자바스크립트 데이터 타입 중 null과 undefined의 차이를 잘 몰라서 정리해두려고 한다. 사실 그렇게까지 중요한지는 잘 모르겠지만 .. 그냥 궁금해서 찾아보았다! 배우는 입장에서 중요하고 중요하지 않고를 따져가면서 하기엔 넘 건방지니까,, null과 undefined는 모두 자바스크립트에서 '값이 비어있음'을 나타낸다 1) undefined - 값이 할당되지 않은 변수의 기본값. 즉, 변수를 선언할 때 값을 대입하지 않으면 undefined로 저장 - 반환할 결과값이 없을 때. - 타입이자, 값 let empty; //undefined console.log(typeof empty); //undefined 2) null - ..

웹/JavaScript 2021.06.15

[JavaScript] typeof 연산자

1) typeof 인수의 자료형을 반환해주는 typeof 연산자는 두가지 형태의 문법을 지원한다. 1) 연산자: typeof x 2) 함수: typeof (x) 괄호의 여부에 상관없이 결과는 동일하다. typeof undefined // "undefined" typeof 0 // "number" typeof 10n // "bigint" typeof true // "boolean" typeof "foo" // "string" typeof Symbol("id") // "symbol" 2) 각 타입별 typeof 연산자 결과 타입 자료형 결과 기본 타입 숫자 number 기본 타입 문자열 string 기본 타입 불린값 boolean 기본 타입 null object 기본 타입 undefined undefined..

웹/JavaScript 2021.06.05

[css] <div> 태그를 이용하여 가로선, 세로선 그리기

✍ 태그를 이용하여 가로선, 세로선 그리기 html에 가로 / 세로 로 이용할 div 만들어주기 가로선이냐 세로선이냐에 따라 width / height 로 선 두께, 길이 지정 ex. 가로선일 경우. height: 1px(선두께) width: 100px(선 길이) 굳이 border-right 나 border-bottom을 이용할 필요없이 background-color를 이용해서 선의 색상을 지정할 수 있다. 선의 위치는 아래의 코드대로 원하는 곳에 배치 가능 .width{ //가로줄 width:100%; //예시: 부모요소 전체에 가로줄을 그을때 height: 1px; background-color:black; // 예시: 검은색 줄 //position 으로 선 위치 어떻게 정할 건지 정하고 top, l..

웹/CSS 2021.05.23
728x90