컴퓨터 프로그래밍/Javascripts (12) 썸네일형 리스트형 [vue.js] computed 속성과 filter(), 화살표 함수 자 이번 포스팅에서는 저번에 못다루엇던 computed 속성과 filter를 한번 더 다뤄보겠습니다. 언제나 화살표 함수는 익숙해지지가 않네요. 복습을 먼저 해보겠습니다. 화살표함수는 function을 생략하는 방식이였죠. function Sum (a,b) ={ return a+b; } var Sum = function (a,b){ return a+b } var Sum = (a, b) => { return (a+b) } 최종적으로는 맨 아래 형태로 생략해서 쓸 수 있죠. 이제는 점점 익숙해 질꺼같네요. 차근차근 눈에 익히면 다른 코드에서 보더라도 당황안하고 해석 할수 있게 되겠죠? 자 이제 새로 도입되는 개념입니다. computed 속성입니다. 이전 포스팅에서는 소개를 안드렸지만 ref속성들을 통해서 값.. [vue.js] v-bind 그리고 v-bind의 속성 연결 안녕하세요 시란입니다. 요즘 vue.js 공부를 시작했습니다. vue.js tutorial 공식 사이트를 통해서 코드 해석과 의미들을 보면서 익히고 있습니다. https://ko.vuejs.org/tutorial/ Tutorial | Vue.js Haven't migrated to Vue 3 yet? Explore Never-Ending Support for Vue 2 by HeroDevs Learn more ko.vuejs.org 위의 사이트에서 혼자서도 공부 할 수 있답니다. 왼쪽은 해당 파트에 대한 설명이 나와있고, 오른쪽은 내가 실습할 수 있는 공간이 나와있습니다. 문제도 나오고, 이걸 풀어보고 해답도 나와있는 형태입니다. 그런데 저번시간 es6 함수표현부터 해서.. 이번에 막힌 부분은 v-bin.. [js] es6 의 화살표 함수 표현식과 필터함수 안녕하세요 시란입니다. 오랜만에 js 시리즈 입니다. 요즘 vue.js를 공부하고 있는데요, 공부하던중 es6의 화살표 함수를 접했는데 ... 이부분이 해석이 안되더라고요. 정말 정형적인 화살표함수와 배열의 필터 함수인데 말이죠.. 사실 es6의 표현식은 공부하지 않으면 한눈에 안들어옵니다. 그래서 이왕 이렇게 공부한거 한번 정리해보자는 생각에 포스팅을 작성합니다. 먼저 es6의 화살표 함수를 알아봅시다. function Test(a, b) { return a+ b } 이건 우리가 매번 보던 함수 형태이죠? 여기서 함수를 변수에 담아볼께요 const test = function Test(a,b) { return a+b } 그리고 이걸 한줄로 표현해볼께요. const test = function Test(.. 자바스크립트 10일차 - 헤더 영역, 마우스휠 조절시 영역 표기, scrollTop, animate를 통한 페이지 위치 옮기기 스크롤을 올릴땐 헤더 영역이 나타났다가 스크롤을 내리면 헤더영역이 사라지는 그런 사이트들을 보신적이 있을꺼에요; 스크롤을 내리면 아래처럼 메뉴가 사라지고. 스크롤을 올리면 아래와 같이 메뉴(머릿말)이 나타나도록 만들어보겠습니다. 먼저 헤더영역을 만들어주시고요. ㅎㅎ header 헤더에 스타일을 줍시다. 백그라운드, 글씨색, 텍스트 위치 등등 조절해주시고요. 중요한점이 헤더의 위치는 고정으로 해야됩니다. (이것만 설정하면 휠을 올렸다 내렸다 하더라도 위치를 고정하고 있답니다.) 그리고 현재는 보이지 않도록 하기 위해 translateY 값을 -100%로 줍니다. 이상태를 주면 헤더는 보이는 페이지 위쪽에 우리눈에 안보이는 곳에 위치하게 됩니다. 그리고 transition 값을 0.5s줍니다. 0.5의 속도.. 자바스크립트 9일차 - jquery burgermenu, header 이번 시간은 버거메뉴와 header에 대해서 알아보도록 하겠습니다. 버거메뉴란 아래 이미지처럼 생긴 메뉴로 클릭했을때 header든 메뉴든 뜨게 하는 아이콘 입니다. 해당 버튼을 만들어보도록 하겠습니다. 저 버튼을 누르게 되면 아래와 같이 모양이 x자로 바뀌면서 오른쪽의 메뉴가 호출될 수 있도록 만들 계획입니다. 먼저 오른쪽 메뉴부터 만들어보도록 하겠습니다. HOME WORKS ABOUT 그리고 article도 이렇게 만들어봅시다. 버거메뉴 자 이번시간은 css가 정말 많이 들어갈꺼에요 전에 스크립트부터 짜봅시다. 먼저 const를 통해서 각 트리거메뉴와 메뉴를 각각 이름을 지어줍시다. 그리고 클릭이벤트를 넣어줍니다. triggerMenu는 햄버거 버튼을 의미합니다. 이 버튼을 누를경우 togglecla.. 자바스크립트 8일차 - jquery css와 클릭이벤트 저번시간에 이어 jquery에서 css와 이벤트들을 한번 넣어보도록 하겠습니다. 1. 선택자 2. 선택자 3. 선택자 마찬가지로 div class를 준비해줍니다. 그리고 나서 어제 배운 선택자를 응용해봅니다. const ex1 = $('.ex1 p') 이렇게 하면 ex1 에는 p태그들이 선택되었습니다. 원래 바닐라 스크립트 였다면 아래와 같이 썼었겠죠 ex1.style = "boarder:1px solid #f00" 하지만 jquery와 바닐라 자바스크립트는 혼용되서 쓸 수 없습니다. 따라서 jquery로 선택된 태그들에는 jquery에 맞는 문법을 사용해야합니다. 아래와 같이 써주면 됩니다. ex1.css({ 'border':'1px solid red', 'color': 'blue', }) css()안.. 자바스크립트 7일차 - jquery와 선택자 이번 시간은 jquery를 활용해서 프로젝트를 진행하려고 합니다. jquery는 다운로드 받아도 되지만 그냥 script에 포함시켜서 사용할 수도 있습니다. 구글이 이미 다운로드 해서 배포해놨고, jquery사이트에서 이 스크립트를 사용하면 다운로드 없이 사용이 가능하다. https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwid.. 자바스크립트 6일차 - 함수의 매개변수 함수 실행 시 인자값을 통해 값을 전달 할 수 있다. 정의도니 함수 (매개변수)를 통해서 값을 받을 수 있다. 매개변수는 정의된 함수 안에서만 사용 할 수 있다. 먼저 div에 감소 버튼, 그리고 숫자와 증가 버튼을 만들어준다. 감소 0 증가 자 이렇게 만들어지겠죠? 그리고 나서 이번에는 저번시간에 배운 forEach를 사용해 볼 예정입니다. 자 먼저 const로 각각의 버튼과 code값들을 받아줍니다. const elBtn = document.querySelectorAll('.ex button'); const elCode = document.querySelector('.ex code'); let count=0; 참고로 querySelectorAll로 받으면 elBtn은 리스트가 될테죠? 0번버튼, 1번.. 이전 1 2 다음
