JavaScript (19) 썸네일형 리스트형 자바스크립트 기초 개념 - UI vs API #19 이러한 사용자가 이용하는 조작장치를 UI라고 한다. 이 경고창은 누가 만들었을까? 이 경고창은 웹 브라우저를 만드는 사람들이 우리 대신에 경고창을 미리 만들어두었다가 우리가 alert라는 함수를 실행하면 경고창을 띄어주겠다고 자바 스크립트의 사용설명서를 통해서 약속한 것이다. 우리는 그 약속에 의해서 경고창을 띗울 수 있다. alert는 경고창을 사용하는 조작장치라고 할 수 있다. 웹 브라우저가 가지고 있는 경고창 기능을 alert라는 자바스크립트의 기능에 따라서 사용하고 있다. 이렇게 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작장치들을 API라고 한다. 이것은 모든 프로그래밍 언어에 공통적으로 적용되는 용어이다. API와 순서는 단어와 문법처럼 부품과 부품의 결합방법처럼 뗄레야 뗄 수.. 자바스크립트 기초 개념 -라이브러리와 프레임워크 #18 우리는 누군가가 만드는 소프트웨어 위에서 소프트웨어를 제작한다. 또한, 다른 사람들이 만든 파일을 부품으로 해서 내가 만들자고 하는 것을 빠르게 만드는 능력이 기본중에 기본이다. 라이브러리는 내가 만들고자 하는 프로그램에 필요한 부품들이 정리되어 재사용하기 쉬운 부품이 정리 되어있는 느낌이다. 프레임워크는 우리가 만들고자 하는 것이 있을 때, 그것이 무엇이냐에 따라서 그것을 만드려고 할 때 언제나 필요한 공통적인 것이 있고, 우리가 만들고자 하는 기획의도에 따라서 달라지는 부분이 있다. 그 공통적인 것과 달라지는 부분을 구분해서 우리가 만들고자 하는 의도를 정확하게 설계해주는 것이 프레임워크라고 할 수 있다. 반제품에 가깝다. 라이브러리는 땡겨와서 쓰는 느낌에 지나지 않는다. 라이브러리 대표적으로 jQu.. 자바스크립트 기초 개념 - 파일로 쪼개서 정리하기 #17 우리는 고생해서 버튼을 만들었다. 그런데 이 버튼을 다른 페이지에 일일이 넣지는 못했다. 그러면 이거와 관련된 저 많은 함수들을 일일이 페이지에 복사해서 붙여야할까? 그런데 이 페이지가 수십, 수백, 수천개라면 일일이 복사할 수 있는가? 복사를 다했더라도, 수정과 유지보수는 어떻게 해야할까 우리는 이 도구들을 파일로 쪼개는 연습을 해야한다. 우리는 colors와 관련된 메서드 및 변수를 복사한뒤 'colors.js' 라는 파일에 넣어놓고(script태그 제외) 본문의 해당 코드를 삭제하고 다음과 같이 작성해준다. 이러면 아까 삭제를 했음에도 불구하고 정상적으로 코드가 실행된다. 웹 브라우저가 js, css, ga태그 등을 가져와서 실행시키고 있다. 이 js 파일을 모든 페이지에 적용시킨다. 웹 서버는 j.. 자바스크립트 기초 개념 - 객체 프로퍼티와 메서드 #16 객체에는 데이터를 담을 수 있고, 배열을 담을 수 있다. 객체에는 함수도 담을 수 있다. coworkers.showAll = function(){ } var showAll = function(){ } function showAll(){ } 함수를 정의하는 3가지 표현이다. 자 이제 함수안에 아까 작성했던 반복문을 적용해보자. Property & Method 이렇게 작성하면 coworkers라는 객체가 아닌 경우에는 사용하지 못한다. 그래서 특정 객체가 아닌 this를 사용하자. 이렇게 함수를 사용하면 화면에는 다음과 같이 나타난다. 그런데 showAll도 하나의 데이터이기 때문에 다음과 같이 표현된다. 이렇게 객체에 소속된 함수는 메서드이고, 객체에 소속된 변수를 프로퍼티라고 한다. 맥락적으로 조금씩의 .. 자바스크립트 기초 개념 - 객체 #15 객체는 함수라는 기반 위에서 존재하는 것이다. 함수의 심화라고 생각하면 좋다. 한줄짜리 코드는 통상적으로 함수로 만들지 않지만, 그 코드의 가독성이 안좋거나 의미가 불명확할 때, 코드로 만들어주는 것도 좋은 방법이다. 만약 setColor()라는 함수를 만들었을 때, 수많은 코드를 작성하다보면 함수 이름이 중복되는 경우가 생길 수 있다. 그래서 보통 BodySetColor(), LinksSetColor(), BodySetBackgroundColor() 등으로 다양하게 함수명을 만든다. 하지만 그래도 쓰임이 조금 비슷한데, 복잡한 경우가 많다. 이를 방지하기 위해 서로 관련있는 함수와 변수를 그룹핑하는 것이 객체이다. 객체를 사용하면 다음과 같이 변한다. Body라는 객체 생성, Links라는 객체생성 B.. 자바스크립트 기초 개념 - 함수 #14 while(i < alist.length){ console.log(alist[i]); alist[i].style.color = 'powderblue'; i = i + 1; } 아까 본 이 함수에서 powderblue를 쉽게 바꾸고 싶다. 하지만 우리가만든 '밤' '낮' toggle 버튼의 함수의 길이는 대략 이정도다. 토글을 매 페이지에 쓰고도 싶고, 또는 수정을 하고 싶은데, 페이지가 수십, 수백개면 문제가 생긴다. 이 문제를 구원해주는 역할을 하는 것이 함수이다. 위의 input 안에 있는 내용을 복사해서 에 배치하자 첫 줄에 function nightDayHandler(self){ 를 입력하고 아까의 코드를 중괄호로 넣는다. 이 안에 원래 있던 'this'는 self로 수정하고 함수뒤 괄호에 넣.. 자바스크립트 기초 개념 - 배열과 반복문 #13 index.html 웹 페이지에 있는 모든 태그를 가져와보자. querySelector는 1개만 가져온다. querySelector라는 메소드(함수)는 a태그의 해당하는 첫 번째 하나만 가져오는 특성이 있다. 'javascript get element by css selector multiple' 검색 https://www.w3schools.com/jsref/met_document_queryselectorall.asp 이 값을 변수에 넣어보자 이 점에 착안해서 우리는 뭘 할 수 있을까? 반복문이다. 이와 같이 된다. 이제 콘솔창에 있는 코드를 복사해서 실제 html파일에 작성하자. 자바스크립트 기초 개념 - 반복문 #12 Loop 이 숫자를 많이 만들어야 한다고 할 때, 이 숫자의 코드가 만약 엄청나게 길었다고 할 때, 그 많은 코드를 작성했는데 오류가 발생했을 때, 반복문으로 해결할 수 있다. while() {} 을 알아보자 while문은 ()안에 boolean 타입이 들어간다. true면 실행이 되고, false면 정지가 된다. 즉, 반복문은 순서대로 실행되는 프로그램의 실행 순서의 흐름을 제어하는 제어문이다. 조건문과 함께. 하지만 while(true)는 무한히 반복되기 때문에 안에는 적절한 조건식을 써줘야 한다. >배열과 반복문 Loop & Array Co workers egoing leezche duru taeho 하지만 멤버가 많아지면 매우 복잡해진다. 이를 정돈하는 배열과, 이 입력과 출력을 쉽게해주는 반복문.. 자바스크립트 기초 개념 - 배열 #11 var coworkers = ["egoing", "leezche"]; 이렇게 만든다. Array Syntax get 자 이제 배열의 길이를 알아보자. https://www.w3schools.com/jsref/jsref_length_array.asp .length라는 property를 사용하면 될 듯하다. document.write(coworkers.length); 위와 같이 나온다. 배열에 데이터를 추가하고 싶을 때는 어떻게 해야할까? 'javascript add array data' 검색 https://www.w3schools.com/jsref/jsref_push.asp 배열.push하면 데이터가 추가된다. add 이렇게 나타난다. 검색&기본서를 잘 활용하자. 자바스크립트 기초 개념 - 리팩토링 #10 리팩토링 : 코딩을 하고 나면 생겨나는 비효율적인 코드. 동작하는 코드는 그대로 두고 코드를 효율적으로 만들어서 코드의 가독성을 높이고 유지보수를 하기 편리하게 만들고 중복된 코드를 낮추고 이러한 방향으로 코드를 다시 개선하는 작업을 리팩토링이라고 한다. 소프트웨어가 커지고 복잡해지는 과정에 있어서 틈틈히 리팩토링을 해야지 좋은 프로그램을 만들 수 있다. 우리가 만든 코드에서 비효율적인 코드를 개선해보자. 만약에 아까만든 '밤' 기능을 스크롤 밑에도 위치하고 싶을 수 있다. 우리는 아마 카피해서 붙여넣기를 할 것이다. 뜨거운 감자 - 노래 청춘 고백 비눈물 멤버 김C 고범준 그런데 위의 버튼은 누르면 '밤'과 '낮'으로 바뀌는 아래에 있는 버튼은 '밤'으로 유지되어 있는 모습이다. 반대로 아래의 버튼을 .. 이전 1 2 다음
