javascript (12) 썸네일형 리스트형 [JS] 바닐라 JS | #4.0~4.6) 입력폼 만들기 #4.0 Input Values html에 있는 input element를 js로 받아온다. loginInput 변수에 input element를 할당하고, loginButton 변수에 button element를 할당한다. (input element).value input element의 object는 value 프로퍼티를 가진다. 아무것도 입력하지 않으면 value=""이다. 입력 받으면 입력받은 것 대로 값이 바뀐다. eventListener를 통해 button을 클릭하면 input element의 value 값을 console.log하게 할 수 있다. 그 코드는 아래와 같다. #4.1 Form Submission 이전까지는 input에 입력 받은 value 값을 바로 console.log 했다. .. [JS] 바닐라 JS | 깃(git)과 함께 하는 테트리스 클론 코딩 일지 (1) 오늘, 내일 노마드 코더 챌린지 일정도 없고 강의도 이미 다 들은 거길래 이때가 기회다 싶어서 얼른 테트리스를 만들어 보기로 했다. 테트리스를 만드는 데에도 나름 버전 구분이 필요할 거 같아서 아직은 생소한 깃/깃허브 연습을 하기에 좋은 기회라고 생각했다. 그리하여 21.07.31 5PM! 깃(git)을 사용하여 테트리스 만들기 시작이다! cod Scalper님의 https://youtu.be/1lNy2mhvLFk 영상을 보고 만들었다. 클론 코딩은 무작정 베끼면 아무 소용이 없다고 생각한다. 오래 걸리겠지만 이해하는 것을 주목표로 하고 열심히 따라가 보겠다. 만들면서 생기는 궁금증은 이 인용 말풍선에 넣어보겠다. 원격 레파지토리와 로컬 파일 연결하기 원래 이건 손쉽게 될 거라고 생각했는데 조금 삐걱거림.. [JS] 바닐라 JS | #chall2) window resize 를 listen하여 반응하는 사이트 만들어보기 🌈 미리 보기 1. 가로 900px 이하 2. 가로 900px 미만 && 1400px 이상 3. 가로 1400px 초과 ⌨️ 소스 1. window.innerWidth 함수 사용 2. 미디어 쿼리 사용 -> 가으더님 코드 같이 공부하는 팀원인 가으더님은 미디어쿼리를 공부한 후 적용해보셨다고 한다. (가으더님 블로그: https://yh4752.tistory.com/) 💻 결과 결과는 동일하다. 가으더님의 코드를 if-else문으로 묶을 수 없는지도 생각해보면 좋을 거 같다. 💬 특징 ✔️ javascript의 화면 단위 (px -> vw 단위 변환) CSS는 viewport 기능을 지원하고 그에 따라 vh, vw 단위가 존재한다. 그러나 Javascript는 vh, vw 같은 단위를 지원하지 않는 듯하다.. [JS] 바닐라 JS | #3.6~3.8) CSS와 JS를 분리하기 #3.6: CSS in Javascript getter & setter // JS const h1=document.querySelector("h1"); function handleTitleClick(){ console.log(h1.style.color); // getter h1.style.color = "blue"; // setter console.log(h1.style.color); // getter } h1.addEventListener("click",handleTitleClick); getter: 값을 받아오는 것 setter: 값을 설정하는 것 if 문 사용해서 blue -> tomato -> blue -> .... 만들기 1. 단순한 if - else 구문 // JS const h1=docume.. [JS] 바닐라 JS | #chall1) 여러가지 event 함수 만들어 사용해보기 🌈 미리 보기 처음으로 html에 js와 css를 연결해 보았다. js에 html 요소를 불러오는 것은 querySelector 함수를 이용했다. 그리고 addEventListener 함수를 사용해보았다. event를 추가하는 법은 두 가지이다. 1. title.addEventListener("click",handleTitleClick); 이 방법을 사용하면 나중에 removeEventListener를 통해서 event listener를 제거할 수 있기 때문에 더욱 선호된다. 2. title.onclick = handleTitleClick; 이런 방법도 있다. (변수).on(eventname) = (함수이름); 으로 작성하면 된다. 이번 chall에는 모두 첫 번째 방법을 사용해보았다. 또한 event는.. [JS] 바닐라 JS | #3.0~3.5) 오브젝트, 배열, 이벤트 #3.0: The Document Object JavaScript가 브라우저를 어떻게 움직이게 하는지 알아보자. HTML은 CSS와 JavaScript를 가져온다. JS를 사용하는 이유는 HTML과 상호작용하기 위해서이다. 즉, HTML의 요소들은 JS를 통해 변경하고, 읽을 수 있다는 것이다. document console에 document라고 입력하면 작성한 HTML을 가져올 수 있다. document는 사용자가 접근할 수 있는 HTML을 가리키는 객체로, 브라우저에 이미 존재하는 object다. HTML의 내용을 JS의 관점으로 보여준다. JS는 HTML에 접근하고 읽을 수 있게 설정되어 있다. document.title document.title 이라고 콘솔에 입력하면 html에서 title 태그.. [JS] 바닐라 JS | #2.7~2.16) 함수의 사용 & 조건문 #2.7: Functions part One () 함수를 실행시킨다. {} {} 안에 실행하고 싶은 것을 적는다. argument function을 실행하는 동안 어떤 정보를 function에게 보낸다. #2.8: Functions part two function안에 data 보내는 법: ()안에 인수 적는다. #2.9: Recap let -> 변경하고 싶은 변수에 const -> 변경하지 않을 변수에 semantic coding을 위해 var은 쓰지 말자. #2.0: Recap II console도 오브젝트의 일종이다. JS가 이미 사용자를 위한 오브젝트를 갖고 있는 것이다. #2.11: Returns return function을 실행할 때 function() 부분을 이것의 결과로 대체한다. func.. [JS] 드림코딩 | #6) 클래스와 오브젝트의 차이점 & 객체지향 언어 class와 object가 무엇인가요? class 안에는 속성(fields)(data), 행동(methods)가 들어있다. classs는 붕어빵을 찍어내는 틀이라고 생각하면 쉽다. class의 특성은 아래와 같다. template -> 기본 틀의 역할. 어떤 데이터가 들어올 수 있는지. declare once -> 한 번만 선언한다. no data in -> 안에 실제 데이터는 넣지 않는다. 이런 class를 이용해서 실제로 데이터를 넣어 만드는 것이 object이다. class를 이용해서 새로운 instance를 생성하면 object가 된다. object의 특성은 아래와 같다. instance of a class created many times -> 클래스를 이용해 굉장히 많은 오브젝트를 만들 수 있.. 이전 1 2 다음
