본문 바로가기

웹프로그래밍36

[JS] 17. 객체는 왜 필요한가? 프로그래밍언어중에서 자바스크립트는 쉬운편에 속하지만 그 개념은 다른 프로그래밍 언어랑 크게 다르진 않은거 같습니다. 지난시간에 배운 함수, 그리고 이번에 배울 객체까지 하게 되면 기본적인 프로그래밍언어에서 다루는 대부분의 개념은 다루었다고 볼 수 있습니다. 물론 이 외에도 더 많은 개념들이 있긴하지만..이정도만 알아도 기본적인 프로그래밍은 가능한것 같아요. 이번시간에는 지난번 작성된 예제를 함수로 바꾸고 그걸 객체로 바꾸는 과정을 통해서 객체가 무엇인지 개념을 파악하는 시간을 갖도록 하겠습니다. 일단 기존에 작성된 코드중에서 중복된 내용은 함수로 독립시키는 작업을 먼저 해보겠습니다. 먼저, Day 클릭시 타이틀의 문자를 powderblue로 바꾸는 부분을 아래와 같이 함수로 뺐습니다. function L.. 2020. 10. 21.
[JS] 16. 함수의 활용 이번시간에는 함수 첫번째 시간에 보여줬던 예제에 대해서 작성해보겠습니다. 기존에 인풋태그에 있는 내용을 head로 아래와 같이 옮겨옵니다. 그리고 input태그에는 위의 함수를 적습니다. 그리고 결과를 확인해보니? 뭔가 이상합니다. 바뀌는것 같긴한데, night도 day로 안바뀌네요!! 왜 그럴까요? 문제는 작성된 함수에서 사용된 this가 함수 안에서만 사용되고 input에서는 사용될 수 없기때문입니다. 사용되는 범위가 다른거죠. 그래서 아래와 같이 수정이 필요합니다. 일단 먼저 input 태그에 this값을 인자값으로 넣어줍니다. 이렇게요. 그리고 함수에서 사용되는 매개변수를 self로 작성합니다. input태그에서 this값이 함수에서 매개변수 self로 적용되는겁니다. 그리고 nightDayHan.. 2020. 10. 21.
[JS] 15. 함수의 기본사용법, 매개변수, 인자, 리턴 이번시간에는 함수의 기본사용법과 매개변수, 인자, 리턴에 대해서 살펴보겠습니다. 1. 함수의 기본사용법 먼저 아래와 같은 코드를 작성합니다. 결과는 아래와 같겠죠? 이렇게 작성된 코드를 함수를 적용해서 아래와 같이 바꿔볼께요! 반복되는 2-1, 2-2에 대한 내용을 two()라는 함수로 작성했습니다. function two() 그리고 대괄호안의 내용이 함수를 선언하는 내용입니다. 즉, two라는 함수를 선언했고 two()함수의 내용은 2-1,2-2가 출력되는 태그의 내용이 됩니다. 이렇게 선언된 함수를 사용하기 위해서는, 해당하는 함수를 원하는 위치에 코딩하면 됩니다. two(); 이렇게요 위 코드의 결과는 처음 작성된것과 동일하죠. 단지 함수로 해당하는 코드를 묶었을 뿐입니다. 2. 함수의 매개변수(p.. 2020. 10. 19.
[JS] 14. 함수란 무엇이고 왜 필요한가? 기존에 작성된 코드에서 어떻게 함수로 변경하는지, 왜 함수가 필요한지에 대해서 먼저 간단히 살펴보겠습니다. 아래와 같이 기존에 작성된 버튼을 여러개 만들려고 합니다. 기본적으로 2개를 만들어봤는데요. 아래와 같이 작성된 코드의 input태그를 복사해서 하나 더 만들면 되겠죠. 그런데 2개도 복잡하지만, 이게 3,4개 더 많아진다면?..100개, 1000개가 된다면? 뭔가 하나로 동일한 기능을 작성해야 함을 느끼시죠? 이럴때 함수가 필요합니다. 한번 함수로 바꾸는걸 간단히 보여드릴께요!! 기존에 input 태그 안에 작성된 코드를 head 태그 아래에 이렇게 작성합니다. nightDayHandler이라는 함수를 만든것이구요. 이걸 사용할때는 아래와 같이 사용하면 됩니다. 이렇게 해서 결과를 보면 기존에 i.. 2020. 10. 14.
[JS] 13. 배열과 반복문의 활용 배웠던 배열과 반복문을 활용해서, 기존에 만들었던 주간모드, 야간모드를 바꾸는걸 한번 작성해볼께요!! 기존에 작성된게 아래와 같은데요. night모드일때 배열과 반복문을 활용해서 조금 더 보기 좋게 바꿔보도록 하겠습니다. 1) 먼저 만든 웹페이지에서 개발자모드로 들어갑니다. 콘솔창에서 document.querySelectorAll('a') 를 입력해봅니다. a 태그로 작성된걸 모두 불러오는 명령입니다. 그리고 콘솔창에 아래와 같이 입력해봅니다. alist에 a 태그관련 문장이 배열에 저장된걸 확인 할 수 있습니다. 1,2,3 계속 있겠죠? 그리고 아래와 같이 입력해봅니다. 전체 alist 배열이 6개인걸 확인할 수 있네요! 이번에는 반복문을 활용해서 전체 alist를 출력해보겠습니다. 아래와 같이 작성하.. 2020. 10. 13.
[JS] 12. 배열과 반복문 이번시간에는 배열과 반복문을 써서 어떤 역할을 할 수 있는지 알아보도록 하겠습니다. 먼저 아래와 같은 코드를 작성하였습니다. Loop & Array Co Workers david daniel paul kim 결과는 이렇겠죠. 배열과 반복문을 활용해서 아래와 같이 바꿔보았습니다. Loop & Array Co Workers 위와 같이 작성하고 화면을 보면 아래와 같이 된걸 볼 수 있는데요. 위와 같이 작성된 상태에서, 한줄만 추가하여 처음과 같은 결과가 출력되게 해볼께요 아래의 한줄로 바꿔줍니다. 스크립트 안에 사이에 +coworkers[i] +를 추가해줍니다. i=0부터 하나씩 증가하니깐, coworkers[0], coworkers[1], coworkers[2], coworkers[3]이 차례로 출력되겠죠.. 2020. 10. 13.
[JS] 11. 반복문에 대하여 이번시간에는 반복문에 대하여 살펴보겠습니다. 먼저 아래와 같이 작성하였습니다. Loop 결과는 아래와 같은데요. 그냥 일반적인 html, 그리고 javascript로 작성된 문서입니다. 그런데 필요에 따라서 아래와 같이 작성이 필요하다고 해봅시다. 결과는 우리가 예상한대로 아래와 같이 나오겠지요. 그렇지만, 저렇게 복사해서 붙여넣기 하는게 왠지 프로그래밍과는 거리가 멀어보이네요!! 이럴때 사용하는게 반복문입니다. 그럼 반복문을 사용해서 2,3을 3번 자동으로 반복해서 출력하는걸 작성해보겠습니다. Loop while () 안은 결과가 참이면 계속 반복하고 결과가 false이면 반복을 멈춥니다. 즉, while() 안에 어떠한 조건을 걸면, 해당하는 조건이 만족할때까지 반복합니다. 실행을 하면 결과는 아래와.. 2020. 10. 13.
[JS] 10. 배열에 대한 이해 이번시간에는 배열에 대해서 살펴보겠습니다. 프로그래밍 언어에서 아주 중요하게 사용되는게 배열인데요, 대략 아래와 같은 그림을 연상하면 됩니다. 잘 정돈된 수납상자 같은 것? 그리고 이렇게 잘 정돈된 수납상자 같은게 집안에 여러개 있죠. 냉장고..수납상자 등등..이러한 것들을 또 잘 정돈되어 있는 집.이 있죠~? 네, 이렇게 잘 정돈하는데 필요한게 프로그래밍 언어에서 배열이라고 합니다. 그럼, 자바스크립트에서 한번 실행해볼께요! 1. 자바스크립트 배열 작성 후 출력해보기 Array Syntax Get 위와 같이 작성하고 화면에서 보면 아래와 같이 출력됩니다. 자바스크립트에서 배열의 작성은, [ ] 안에 넣는 순서대로 작성됩니다. 순서는 0부터 시작되요. 아래 예제에서 보면, var coworkers = [.. 2020. 10. 13.
[JS] 9. 리팩토링(refactoring) 이번시간에는 리팩토링(refactoring)에 대해서 알아보겠습니다. 우리가 작성한 코드를 보니 조금 복잡하고, 중복으로 사용된 코드가 많이 있습니다. 이러한 중복을 제거하고 코드의 가독성(읽기 좋게)을 좋게 하는게 리팩토링이라고 합니다. 우리가 작성한 코드를 리팩토링 해보면서 어떻게 실제코딩에 적용할 수 있는지 살펴보겠습니다. 먼저 위에 만든 day, night 버튼을 아래에도 만들려고 합니다. 그래서 코드를 복사해서 아래에 붙여넣기 합니다. 그런데, 결과를 보니 위 버튼과 동일하게 작동하지 않습니다. night 버튼의 이름이 계속 night으로 남아있고 위에 있는 버튼이 계속 바뀌네요! 아래와 같이 id값을 night_day2로 바꾸어 주면 정상적으로 동작합니다. 그런데, 바꾸어야 할 버튼이 100개.. 2020. 10. 8.