Languages/Javascript3 [Javascript] 간단한 mbti 설문 만들기 codelion강의를 들으면서 나와 닮은 세렝게티 동물을 알려주는 일종의 mbti테스트를 만들어 보았다. 웹 프레임워크를 사용하지 않고 자바스크립트만을 이용해서 만들었는데, 자바스크립트를 배우는 과정에서 데이터베이스를 거치지 않고 자바스크립트 객체를 사용해서 결과를 도출해내는 과정을 한눈에 볼 수 있었고, 별도의 kakao adfit와 같은 광고와 직접적으로 기업과 광고계약을 맺을 시에 template에 어떻게 노출시키는지에 대해서 알 수 있었다. 다음 사진은 웹 서비스를 대표하는 세가지 화면인 [시작화면], [문제화면], [결과화면]이다. 총 12개의 질문으로 검사자와 맞는 동물을 찾아주는 서비스이며, 12개의 질문은 E/I, S/N, T/F, J/P를 구별하는 문제가 각각 3개씩 들어있다. 큰 틀을 .. 2022. 7. 2. [Javascript] To-do-list만들기 자바스크립트를 배우는 과정에서 좋은 참고자료가 될 것 같아 정리한 글이다. 다음과 같이 목록에서 하나씩 추가 또는 삭제할 수 있는 간단한 투두리스트를 만들어보자. 사전에 준비된 html, css를 가지고 시작한다. 주의해야 하는 부분?? window.onload = function(){...} -> html이 다 로드되고 나서 js파일이 동작하게 한다. 지금과 같이 js파일을 head에서 연결해주는 경우 꼭 필요한 함수이다. document.getElementsByClassName('...')[0] : -> getElementsByClassName()는 getElementById와 다르게 Nodelist를 반환한다. class가 id와 다르게 html상에서 중복되어 사용될 수 있기 때문인데, 따라서 클래.. 2022. 6. 29. [Javascript]간단한 자소서 글자수 계산기 만들기 다음과 같이 타이핑한 글자 수를 적어주는 자소서 글자 계산기를 만들어보자. 만드는데 필요한 개념 3가지로 나누어봤다. 1. 이벤트(event): 마우스 클릭, 키보드 누름, 값 변화, 페이지 로딩 등의 사건을 말한다. etc.. 2. 이벤트 핸들링(event handling): 글자 수를 센다, 입력된 수를 더한다 etc.. 따라서 html에서는 와 같은 형식으로 적어놓고, 에서 이벤트핸들링에 대한 함수를 정의해 놓았다면, 우리가 원하는 이벤트에 대한 어떤 행동을 취할 것인지를 결정할 수 있다. 3. substring: 문자열에서 몇글자까지 자른다. 예시로 content.substring(0,5)는 "띄어쓰기를 포함해서 0이상 5미만의 문자열을 잘라낸다"라는 뜻이다. Code textarea onkeyd.. 2022. 6. 27. 이전 1 다음
