본문 바로가기

분류 전체보기

 (279)
자바스크립트 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번..
자바스크립트 5일차 - 반복문 for문과 foreach, 함수 for문과 while문이 있음. 자바스크립트에서는 보통 for문을 추천하는 편. for (초기값; 종료조건; 증감) 형태로 이루어진다. 예시 for (let num=0; num
자바스크립트 4일차 - 배열 입력 > 응용한 출석부 만들기 배열 선언 방법 let arr =[]; 배열 입력 방법 arr.push(value) 간단하죠? 이를 응용해서 출석부를 만들어 보겠습니다. 저번시간에 배운 input 태그와 queryselector, innerHtml 을 활용할 것입니다. 출석부(0) 저장 먼저 출석부 부분을 만들어줍니다. 태그들을 사용해서 이름을 입력받을수 있도록 input태그 먼저 사용 button을 사용한 저장버튼 그리고 ul태그를 사용해 출력 부분을 만들어줍니다. 그럼 이렇게 출석부(0) 인풋태그 (저장버튼)이 완성되겟죠? 이후 스크립트를 통해 원하는 기능들이 정상동작 하도록 작업해줍니다. 목표는 다음과 같습니다. 1. 인풋 태그에 입력한 값 확인 2. 저장버튼을 누를 시 인풋 태그의 입력값을 array에 저장함 3. 저장한 값을 ..
자바스크립트 3일차 - 삼항연산자, input tag, form tag와 이벤트 ( 조건 ) ? "참" : "거짓" 조건에 따라서 true면 참에 해당되는 결과를, false면 거짓에 해당되는 결과를 실행한다. 예시 (a < 0) ? a=1 : a=0 a 가 0보다 작다면, a에다가 1을 대입하고 아니라면 0을 대입하라는 의미. Input Tag input 태그는 아래와 같은 예시로 쓰인다. 이런 tag들을 인식하기 위해서 부분에서 태그들을 받아와서 값을 변경해준다. 선택자를 통해 태그들을 선택하고 데이터를 받아와서 연산을 한 후 결과값을 출력할 것이다. // 1. 언제 - 마우스 클릭시? 스크롤시? // 2. 무엇을, 어떻게 - 변수를 const elResult = document.querySelector('.result') elResult.onclick = function(){ ..
자바스크립트 2일차 - 문자열 합치기 및 qeurySelector, innerhtml - 문자열 합치는 방법 - 여러 방법이 있지만 보통은 백틱을 이용한 변수, 문자열 합치기를 사용한다. 백틱은 우리 키보드자판의 좌측 상단에 있는 달러표시를 누르면 나오는 기호이다. `문자 ${변수}문자` 이런식으로 문자와 문자 사이에 변수를 넣을수 있다. ${ 변수명 } 을 백틱 안에 넣어준다. 자바스크립트를 사용하다 보면 html의 클래스 이름 및 태그를 가져와야 할때가 있다. 그럴경우 우리는 querySelector를 사용해 해당 내용을 가져온다. querySelector의 파라미터 표시 방법 클래스는 점으로 아이디는 샵으로 시작하고 태그는 태그명칭으로 시작한다. document. querySelector('div').innerText = 2000; 일일이 치기 힘들다. 그래서 변수에 담아둔다면 어떨..
자바스크립트 1일차 - vscode 및 snippet설정하기 (중요) 1. VS Code 다운로드 및 설치. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 여러 자바스크립트 중 VS Code를 사용하는 이유는 다른 편집기에 비해 상대적으로 가볍고 확장기능이 뛰어나..
23.03.19/ PIXAR 스토리텔링 / SR 책 소개 4장 진심 진심이 담기지 않은 스토리는 감동이 아닌 구매 유도하는 느낌을 주며 속았다는 생각이 든다. 직접적인 내용보단 간접적으로 독자나 사용자등에게 던져주자. 독자들은 이를 통해 자신만의 경험을 토대로 그 이야기를 새로 구성하게 되고 공감하게 된다. 반대로 제작자는 이 제품이나 서비스를 통해 고객이 어떤 이미지 또는 느낌을 얻었으면 좋을지 생각해보면 이를 토대로 제품에 대한 고객에게 전달하고픈 스토리텔링에 좀더 치중할수 있으며 고객은 이런 감정을 발견하고 기쁨을 느낄것이다. 5장 구조 우리가 흔히 아는 도입 사건고조 위기 절정 결말 구조에 대한 설명이 나옴. 6장 영웅 영웅에 대한 설명. 가장 재밌게 읽은 부분이다. 감상평 책을 읽고 드는 생각, 떠오르는 구절, 느낀 점을 자유롭게 작성해주세요..
23.03.17/ PIXAR 스토리텔링 / SR 책 소개 2장 변화 변화는 고객의 가슴을 설레게 한다. 변화의 가능성이 보이면 사람들은 마음이 끌린다. 캐릭터 아크 3장 교감 아무리 후크와 변화를 추구해도 사람들이 모른다면 공감하지 못한다. 보편적 주제를 담으면 여러 관객 독자 등이 공감할 수 있다. 나의 고객들은 누구인가? 감상평 아무래도 픽사에 근무하던 분이 작성해서인지 읽으면서 드는 생각은 정해진 흥행수표 방식을 적은 느낌이였다. 물론 가장 무난하고 안전한 길이 최선일 수 있으나 그렇지 않을 수도 있지 않은가? 가령 책에서 말하길 주인공 캐릭터는 항상 역경과 고난을 이겨내고 성장한다고 하지만 사실 그렇지 않은 경우도 있을 뿐더러 요즘은 전형적인 클리셰를 깨는 작품들도 많이 등장하고 있다. 이런 작품들의 경우 대중들에게 신선한 충격으로 다가오며 흥..

티스토리툴바