본문 바로가기
반응형

분류 전체보기256

객체와 반복문 / 객체 프로퍼티와 메소드 이번 시간에는 반복문을 활용하여 생성된 객체 내에 있는 모든 데이터를 가져오는 방법을 알아보겠습니다. 먼저, 객체를 만들고 불러오는 지난 예제입니다. 이 데이터를 반복문을 활용해 동일한 결과를 출력하도록 만들어 보겠습니다. - 아래 사이트를 참조하여 for..in 형식으로 작성하겠습니다. loops - How to iterate over a JavaScript object? - Stack Overflow How to iterate over a JavaScript object? I have an object in JavaScript: { abc: '...', bca: '...', zzz: '...', xxx: '...', ccc: '...', // ... } I want to use a for loop t.. 2021. 9. 28.
How To- Slideshow (이미지 슬라이드쇼 만들기) w3schools의 JavaScript How To 예제 중 슬라이더를 만들어보겠습니다. https://www.w3schools.com/howto/howto_js_slideshow.asp Example 1. Slideshow 뼈대잡기 (Feat.HTML) 슬라이더에 보여주고싶은 내용 : 페이지 표기 / 이미지 파일 / 이미지 설명글 위 내용은 캡쳐에 표시한 ~ 까지이며 슬라이드를 세개 만들어줄 것이기 때문에 를 세개 작성하였다. Example2. CSS 요소 추가 태그 내에 태그를 생성하고 태그 내에 사이트에 작성된 내용을 그대로 복사하였습니다. (Example 1에서 만들어둔 이미지 파일이 사라지고 dot 세개만 보여지지만, 당황하지않아도 됩니다.) Example3. JavaScript 추가하기 Exa.. 2021. 9. 28.
img 2021. 9. 28.
객체 쓰기와 읽기 배열은 정보(데이터)의 양이 많아졌을 때 서로 연관된 정보를 정리정돈하기 위한 도구입니다. 그리고 배열이라는 도구는 순서에 따라 정돈된다는 특징이 있습니다. https://nossodia.tistory.com/121?category=921581 배열과 반복문 집에 시간이지날수록 살림은 늘어나고 살림이 늘어날 수록 정리가 힘들어집니다. 때문에 사물들을 잘 정리할 수 있도록 옷장, 책장, 냉장고 등을 구입하기도 하고, 방이 많은 집을 선호합니다. nossodia.tistory.com 배열이라는 도구는 정보를 담는 그릇이면서 정보가 순서대로 저장된다는 특징이 있지만, 객체는 순서 없이 저장할 수 있는 정보라고 할 수 있습니다. 먼저, 객체의 문법에 대해 살펴보겠습니다. 배열은 var coworkers["데이터.. 2021. 9. 27.
객체 / 객체의 활용 프로그래밍을 하다보면 코드가 많아지고, 이를 정리하기위해 함수를 이용합니다. 그리고 함수뿐 아니라 연관되어있는 변수가 많아지면 똑같이 복잡도의 한계에 도달하게 됩니다. 이러한 상황에서 서로 연관된 함수와 변수들을 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구가 바로 객체입니다. 이전 시간에 만들었던 nightDayHandler()함수 입니다. 위에 표시한 var alist로 시작하는 부분이 중복되는 것을 볼 수 있습니다. 중복된 코드를 함수로 독립시켜보도록 하겠습니다. 위에 중복되었던 부분을 setColor()라는 함수로 생성하였습니다. 그리고 실제 적용할 색상은 'powderblue'와 'red'로 각각 다르기때문에 매개변수로 (color)를 설정하고 함수를 호출할때 매개변수를 통해 색상값을 적용.. 2021. 9. 24.
함수 : 매개변수(Parameter), 인자(Argument), 리턴(Return) 함수라는 개념을 이해하기 쉽게 비유하자면 자판기를 생각해볼 수 있다. 자판기는 사용자가 원하는 메뉴를 누르면 요청한 제품을 제공한다. 여기서 메뉴를 누르는 요청이 '입력', 자판기가 요청을 받은 제품을 제공하는 것이 '출력'이라고 할 수 있다. 함수 역시 입력과 출력으로 이루어져있으며, 여기서 입력값과 관련된 것이 Parameter(매개변수), Argument(인자)이고, 출력값은 Return(리턴)과 관계가 있다고 할 수 있다. 그렇다면 Parameter(매개변수), Argument(인자), Return은 어떠한 개념인지 알아보도록하자. 위 예제에서 onePlusOne() 이라는 함수를 생성하였다. 이 함수는 document.write(1+1); 즉, 1+1인 2만 출력하는 함수이다. 그렇다면 이 함수.. 2021. 9. 17.
함수 함수는 영어로 function이라고 하며 다양한 코드를 정리정돈 하기 위한 도구라고 할 수 있습니다.(좀 더 큰 도구는 객체) 함수의 개념은 이전시간에 학습했던 마지막 예제(반복문을 활용한 주간/야간모드 style 지정)를 이용해 보겠습니다. 지난번 학습을 통해 최종적으로 위와같은 코드를 작성하였습니다. 만약 이 내용에서 태그를 1억개 작성하면서 powderblue라는 색상을 다른 색으로 변경해야한다고 하면 매우 번거롭고 실수할 가능성이 높습니다. 이럴 때에 함수를 활용하면 어떻게 되는지 확인해봅시다. 아래 예제가 위와 동일한 기능을 구현하되 함수를 이용하여 작성된 방식입니다. 먼저 태그 안에 함수를 선언합니다. 함수는 function 함수명() { 함수를 통해 실행하고 싶은 기능} 형태로 선언하면됩니다.. 2021. 9. 15.
배열과 반복문_2 배열과 반복문의 활용법에 대해 알아보기에 앞서 querySelectorAll에 대해 알아봅시다. 위 예시는 웹페이지내의 태그를 불러오는 방법에 대한 예제입니다. 첫번째로 실행한 document.querySelector('a');로 웹페이지내의 모든 태그를 불러오려고 하였으나 실제 결과를 보면 태그 하나만 가져오는 것을 볼 수 있습니다. 왜냐하면 querySelector는 태그 중 맨처음 등장한 태그만 가져오기때문입니다. 그렇다면 전체 태그를 불러오기위해서는 어떻게해야할까요? - google에서 "javascript get element by css selector multiple"이라고 검색하여 내용을 참고하시기 바랍니다. 위와 같이 검색해보면 querySelectorAll 이라는 메소드가 있을 것입니다.. 2021. 9. 15.
배열과 반복문 집에 시간이지날수록 살림은 늘어나고 살림이 늘어날 수록 정리가 힘들어집니다. 때문에 사물들을 잘 정리할 수 있도록 옷장, 책장, 냉장고 등을 구입하기도 하고, 방이 많은 집을 선호합니다. 프로그래밍 역시 코딩할때 굉장히많은 데이터를 관리하게되고 데이터의 종류도 매우 다양하기 때문에 이러한 데이터를 정리할 수 있는 수납공간을 만들어 나누게 됩니다. 데이터중에서도 서로 연관되어있는 데이터끼리 잘 묶어서 담아두는 일종의 수납상자가 배열(array)이라고 할 수 있습니다. 기본적인 배열의 문법은 [ 대괄호로 시작해서 대괄호로 끝나며 ] , 배열안에는 여러 값을 입력할 수 있고 값과 값 사이는 콤마( , )로 구분합니다. 또한 배열은 그자체로는 이용하기 어렵기때문에 주로 변수에 담아 사용합니다. 이렇게하면 cow.. 2021. 9. 9.
중복의 제거를 위한 리팩토링(this,변수활용) 리팩토링(Refactoring) 이란 비효율적으로 코딩된 코드에 대하여 동작하는 것은 그대로 유지하되 코드자체를 효율적으로 만들어서 그 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을 의미하며, 소프트웨어의 규모가 커지고 복잡해질수록 리팩토링의 역할을 매우 중요합니다. https://nossodia.tistory.com/119?category=921581 조건문 (feat. 조건문을 이용한 주간모드,야간모드 전환 버튼 생성) 조건문이란, 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는것이다. 조건문은 if로 시작하며, if 뒤의 괄호 안에 조건을 기입한다. (조건이 될 수 있는 값은 Boolean이다.) IF 뒤의 괄 nossodia... 2021. 9. 8.
반응형

티스토리툴바