프로그래밍 언어/JavaScript
자바스크립트 자주 쓰는 메서드 정리
이번에는 일 할 때 자주 쓰던 메서드들을 정리해봤습니다. Notion Export 기능이 안먹혀서 일단 링크로 대신 올립니다. 자바스크립트 자주 쓰는 메서드 정리
자바스크립트
프로그래밍 언어/JavaScript
[자바스크립트 필기] #5 - 객체 리터럴
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 객체란? 원시 타입은 단 하나의 값만 나타냄 객체 타입은 다양한 값을 하나의 단위로 구성한 자료구조 원시 값은 변경 불가능한 값 객체는 변경 가능한 값 프로퍼티는 key와 value로 구성된다. 모든 값이 프로퍼티 value가 될 수 있는데 프로퍼티 value가 함수일 경우, method라고 부른다. 따라서 객체는 프로퍼티와 메서드로 구성된 집합체이다. 2. 객체 리터럴에 의한 객체 생성 다양한 객체 생성 방법이 지원된다. 객체 리터럴 - 가장 일반적이고 간단한 방법 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스 //객체 리터럴 생성법 var person = { name: 'lee', sayHello: funct..
Web Programming
[javascript30] 7일차
안녕하세요 오늘도 자스 연습을 해보도록 하겠습니다 자바스크립트30일 챌린지 바로 가기 JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 목차 바로가기 1. 오늘의 과제는? 2. 내가 만든 파일 3. finished파일 리뷰 4. 배운 점 & 느낀 점 1. 오늘의 과제는? 오늘은 몇가지 데이터를 가지고 자바스크립트 배열 메서드에 대해 알아보게 된다. 시작파일은 이러하다. Psst: have a look at the JavaScript Console 💁 주석을 보시고 해당 과제를 수행하시면 됩니다. 2. 내가 만든 파일 // Some and Every Checks // Array.prototyp..
Web Programming
[javascript30] 6일차
안녕하세요 오늘도 자스 연습을 해보도록 하겠습니다 5일차는 너무 CSS중점적이라서 건너뛰게 되었습니다. 자바스크립트30일 챌린지 바로 가기 JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 목차 바로가기 1. 오늘의 과제는? 2. 어떻게 완성되었는가 3. 배운 점 & 느낀 점 1. 오늘의 과제는? 사진에서 보시는 바와 같이 검색창에서 단어를 검색하면 그 와 관련된 도시와 주의 이름을 나타내고 오른쪽에서 유명도(?)를 나타냅니다. 시작파일은 이러합니다. HTML Filter for a city or a state CSS html { box-sizing: border-box; background..
Web Programming
[javascript30] 4일차
안녕하세요 오늘도 자스 연습을 해보도록 하겠습니다 자바스크립트30일 챌린지 바로 가기 JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 목차 바로가기 1. 오늘의 과제는? 2. 내가 만든 파일 3. finished파일 리뷰 4. 배운 점 & 느낀 점 1. 오늘의 과제는? 오늘은 몇가지 배열 같은 데이터들을 이용해서 자바스크립트 배열과 관련된 함수를 써보는 과제입니다. start 파일의 주석을 읽어보시면 데이터를 가지고 뭘 해야하는지, 어떤 함수를 써야하는지까지 나와있습니다. 이를 보시고 finished 파일처럼 작동하게 만드시면 됩니다. start.html Psst: have a look a..
Web Programming
[javascript30] 3일차
안녕하세요 오늘도 자스 연습을 해보도록 하겠습니다 1. 오늘의 과제는? 오늘은 js를 사용해서 실시간으로 CSS변화를 만드는 애플리케이션을 만들어야 합니다. 우선 start.html 파일은 이러합니다. Update CSS Variables with JS Spacing: Blur: Base Color 여기서 시작해서 finished 버전과 같게 동작하게 만들면 됩니다. 2. 내가 만든 파일 CSS 파일 body { text-align: center; background-color: #193549; color: white; font-weight: 100; font-size: 50px; } .controls { margin-bottom: 50px; } input { width: 100px; } img { fi..
Web Programming
[javascript30] 2일차
밖에 비가 참 많이 내리네요 날씨가 정말 습합니다. 빨리 건조한 겨울이 왔으면 좋겠네요:) 하여튼 오늘도 마찬가지로 자바스크립트 챌린지를 진행해 보도록 하겠습니다. 1. 오늘의 과제는? 오늘은 이런식으로 시계를 만들 것입니다. finished 버전은 시계침이 회전할 때 마다 달칵거리는 애니메이션이 있고 제가 만든 것은 딱딱하게 회전합니다. 우선 start파일은 이렇게 되어있습니다. 이걸 통해서 finished 버전처럼 작동되도록 만들면 됩니다. 2. 내가 만든 파일 - HTML & JS 부분 먼저 HTML에서 시계 침의 역할을 하는 객체들을 querySelector를 통해서 부를 수 있었습니다. 그리고 Data를 활용해서 현재의 시간을 얻어내고 그걸로 css style의 transform에서 회전을 줍니..
Web Programming
[javascript30] 1일차
이번에 웹서핑을 하면서 좋은 것을 보게 되었다 바로 javascript challenge 30 이라는 것이다. https://javascript30.com/ - 해당 사이트에 들어가면 무료로 콘텐츠를 사용할 수 있다. 제목에서도 알 수 있듯이, 30일 동안 매일 하나씩 JS 과제를 하는 것이다. 내가 하려는 것은 https://github.com/nicewook/JavaScript30 - 해당 깃헙을 fork해서 각 폴더에 있는 start파일을 써서 finished파일 처럼 작동할 수 있게 만드는 것이다. 막히는 것이 있으면 강의영상(무료다!!)을 참고하고 공부한 것들을 정리해서 여기 블로그에 쓸 것이다. 1. 오늘의 과제는? 오늘은 첫번째로 드럼 사이트를 만들게 된다. html css js로 키보드를 ..
