JavaScript/JavaScript - 생활코딩9 [JavaScript] 라이브러리와 프레임워크 (jQuery) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 지금까지 포스팅을 통하여 제가 생산자의 입장에서 하나하나 개념 정리를 해보았는데요, 오늘은 타인이 만든 소프트웨어를 부품을 이용하여 만들고자 하는 것을 빠르게 구현시킬 수 있는 방법을 알아보겠습니다. Library와 Framework이라는 키워드가 있습니다. 두 가지 키워드는 다른 사람의 도움을 받아 소프트웨어를 만든다는 점이 비슷하지만 다소 차이가 있습니다. 라이브러리 각각 개별적인 기능들로 쉽게 말해 부속품 따라서 라이브러리는 그러한 부속품들을 가져다가 적용시키는 것 프레임워크 개별적인 기능들이 연결되어 기초적인 제품 골격을 갖춘 상태, 이를 기본 틀로 삼아서 그 위에 덧붙여 만드는 것 쉽게 말해 반제품 이러한 차이점이 있습니다. 저는 오늘 라이브러리 .. 2021. 9. 16. [JavaScript] Include File / 파일로 쪼개어서 정리하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 지난 포스팅에서 JavaScirpt를 통하여 BackgroundColor와 Color를 변화시키는 로직을 최종적으로 구현시켜보았는데요, 오늘은 제가 만들었던 JavaScript를 파일로 쪼개어서 보다 효율적 이도록 해보았습니다. 지난 포스팅에서 최종적으로 작업한 script입니다. 파일로 쪼개어서 script를 나누는 이유 : ① 해당 내용이 다른 페이지에도 동일하게 적용시킬 시, 모든 페이지에 copy 하여 배포를 하기엔 효율적이지 못함. ② script 내의 내용이 변경될 경우, (ex. color가 red로 변경될 경우) 모든 페이지에 color를 변경시켜줘야 하는 번거로움 발생 ③ 페이지마다 어떠한 로직을 갖고 있는지에 대한 가독성이 좋아지며, 코드.. 2021. 9. 16. [JavaScirpt] 객체 활용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 이전 포스팅을 통하여 객체의 Create, Iterate, Property & Method 에 대해서 배워 보았는데요, 오늘은 이를 활용하여 이전에 완성 하지 못했던 코드를 완성 해보려고 합니다. 객체의 형식으로만 코드를 변경 해두고, 객체 생성을 하지 않아서 해당 코드로는 원하는 결과물을 출력할 수 없었습니다. 함수의 이름으로 중복되지 않도록 해두었던 코드들을 변경하여 하기와 같이 객체 생성을 해보았습니다. Body 객체 안에 let Body = {setColor:function (color){document.querySelector('body').style.color= color;}, setBackgroundcolor:function (color){do.. 2021. 9. 15. [JavaScript] 객체 Create, Iterate, Property & Method 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 지난 포스팅에서 객체의 기본적인 정의와 형태에 대하여 공부해보았는데요, 오늘은 객체의 Create, Iterate, Property & Method에 대해 알아보겠습니다. (추가 설명) 객체와 비슷한 원리로 정보의 양이 많아졌을 때 서로 연관된 정보를 정리 정돈하기 위해 사용한 도구, 배열이 있었습니다. 배열은 순서에 따라서 정보를 정리한다는 특징이 있습니다. 또한, index를 활용하여 원하는 정보를 가져올 수 있었으며 순서대로 정보를 불러온다는 특징이 있었습니다. 반면에 객체는 순서 없이 정보를 저장할 수 있는 특징을 갖고 있으며, 객체에 저장된 정보를 다시 꺼내올 수 있도록 정보에 대한 이름(속성명)을 생성을 해주어서 저장해줍니다. * Create 배.. 2021. 9. 15. [JavaScript] 객체의 기본적인 정의 및 형태 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 오늘은 객체의 기본적인 정의 및 형태에 대하여 포스팅 해보는 시간을 갖도록 하였습니다. * 객체의 정의 프로그래밍을 하다보면 코드가 많아지며, 코드를 정리 정돈하기 위해 함수를 사용함수를 많아지면 함수와 연관 되어 있는 변수들이 많아지므로, 복잡도의 한계에 도달하게 됨. 기본적인 정의 : 이러한 한계 상황에서 서로 연관된 함수와 연관된 변수를 동일한 이름으로 그룹화하여 정리 정돈하기 위한 도구 이전 포스팅에서 작성한 코드 중 var alist ~ i = i +1 ; 까지의 코드가 if절과 else 절에 반복되는 것을 최소화하고 싶었습니다. 해당 부분은 함수를 통하여 반복 되는 코드를 아래와 같이 해결할 수 있었습니다. setColor라는 함수를 이용하여 코.. 2021. 9. 15. [JavaScript] 함수의 활용 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 오늘은 저번 포스팅에 함수의 개념과 원리를 사용하여 nightDayHandler 함수를 만들어 보았습니다. 이와 같이 nightDayHandler 함수를 만든 후 실행을 해보니, 하기와 같은 에러가 발생하였습니다. 버튼을 처음 클릭했을 때 아무 변화가 없었으며, 두 번째 클릭을 하니 그제야 변경 또다시 클릭을 하니 backgroundColor와 color들은 변경이 되었지만, 버튼의 value값의 변동이 없음 문제 해결 전 에러가 발생되는 이유 : oncilck이라는 이벤트 안에서의 this라는 값은 를 가리키도록 약속되어있음. 따라서 독립된 함수를 만들게 되면 (nightDayHandler) function 값 안에 있는 this는 input 버튼이 아님.. 2021. 9. 14. 이전 1 2 다음
