본문 바로가기

Web Development/Front-end

(22)
[Zerocho-14] EventListener(keyup&down) & 증감연산자(전위형/후위형) & Blocking / Non-Blocking & 이벤트루프 1. EventListener(Keyup&down&press) 지난시간에, EventListener속성중에, mousemove, down , up 등, 마우스의 움직임 이벤트에 대해 살펴봤습니다. 그럼 이번시간에는 테트리스 게임을 만들면서 필요했던, 키보드 키들의 이벤트를 설정하는 방법에 대해 살펴보겠습니다. 우선 'keyUp' 입니다. 키보드의 키를 눌렀다가, 떼는 순간 발생하는 이벤트입니다. window.addEventListener('keyup', (event)=> { console.log(event); }) 그럼, 어떤 버튼을 눌렀는지 객체내에 값을 반환해주는데, 이를 이용해서 사용자가 어떤 버튼을 눌렀는지 확인하고 상호작용할 수 있습니다. 다음은 'keyDown' 입니다. 키보드를 꾹 ~ 누르고..
[Javascript] 계산기만들기 자바스크립트 문법을 처음 배운 뒤, 뭔가 만들어본 경험이 없어, 막상 자바스크립트로 뭘 만들라고 하면 만들지를 못하겠더라구요. 그래서 ! 저번 투두리스트에 이어서, 또 ~ 흔한 주제중 하나인 계산기 만들기를 차근차근 해봤습니다. 우선 순서도를 그렸습니다. 이런식으로 해서 코드를 써나간 결과물은 다음과 같습니다. 못생긴 계산기.. 별거없죠? ㅋㅋ.. 그냥 계산기입니다. 아무튼 코드를 살펴보는 시간을 가져보겠습니다. 1. HTML AC 7 8 9 ÷ 4 5 6 x 1 2 3 - 0 . + HTML파일입니다. 1. 기본적으로, header부분에는, 결과창을 만들어주고, 사용자가 값을 입력할 input_blank와, submit 버튼(=)을 만들어줬습니다. 그리고 css요소를 조금 즉흥적으로 보면서 적응한 부분..
[Zerocho-13] 2048 (MouseEvent, Switch) 오늘은 그 이름도 유명한 2048게임입니다. 2048게임은 《2048》은 이탈리아의 웹 개발자 Gabriele Cirulli이 개발한 싱글 플레이어 슬라이딩 블록 퍼즐 게임이다. 《2048》은 본래 자바스크립트와 CSS로 작성되었으며 2014년 3월 9일 MIT 라이선스에 속하는 자유-오픈 소스 소프트웨어로 출시되었다. (위키백과) 에 이렇게 소개되어있네요 ㅎ_ㅎ 아무튼, 원래 2048게임은 보통 키보드 상하,좌우 버튼으로 구현하는게 보통입니다. 근데 강의에서는 마우스 이벤트 수업느낌으로 해서 마우스 드레그한 것을 상,하,좌,우로 구분지어 구현하더라구요. 그래서 ! 오늘은 마우스이벤트에 대해 알아보겠습니다. 1. Mouse Event 마우스이벤트는 , 마우스의 클릭(누를때), 마우스의 클릭(뗄떼), 마우..
1. HTML 안녕하세요, 깨비도입니다. 블록몽키님에게 강의를 들은 후 직접 한 번 써보는 후기로, 본 작성자는 디자인 전공자이고 저와 같은 비전공자의 입장에서 쉽게 이해할 수 있도록 작성되었음을 알립니다. 0. Visual Studio Code 모든 파일은 확장자명이 있습니다. 이미지 파일 : jpeg, png, gif … / 어도비 파일 : psd, ai, pdf … 코딩을 짤 수 있도록 도와주는 프로그램, 비쥬얼 스튜디오 코드의 확장자명은 HTML CSS JS 기본적으로 세가지가 존재합니다. 이 세가지는 모두 코딩을 저장하는 한 형태의 확장자명이기도 하지만, 코딩 하는데에 꼭 필요한 '언어'라고 부릅니다. 그럼 오늘은 HTML을 먼저 살펴보겠습니다. 1. HTML이란? HTML은 웹을 만들기 위해 사용하는 기본적..