Javascript (13) 썸네일형 리스트형 UI vs API User Interface의 줄임말 vs Application Programming Interface 의 줄임말 UI는 사용자가 시스템을 제어하기 위해서 사용하는 조작장치이다. 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작장치들을 API 라고 부른다 예시로 alert 라는 함수를 쓰면 경고창이 뜨는데 Library vs Framework 당연한 얘기지만 프로그래밍을 할 때 처음부터 끝까지 내가 만들일은 없다. 누군가와 협력해서, 누군가가 이미 만들어 둔 소스를 가져와서 어떤 것을 창조할 일이 굉장히 많을 것이다. 실제로 엑스형 프로젝트를 만들때 디자인의 99%는 내가 만든게 아니라 남이 이미 만든 소스를 가져온것 이었다. 라이브러리와 프레임워크는 둘 다 남의 도움을 받아서 프로그래밍을 한다는 뜻이다. Library: 내가 프로그램을 만들 때 필요한 도구&부품들을 정리정돈 되어 있는 곳/ 내가 사용할 부품을 가져오는 곳 Framework: 내가 만들고자 하는 서비스가 있을것인데, 예를 들어 게임이나 채팅 등등. 그때 기본적으로 게임이나 채팅에서 공통적으로 쓰이는 기능을 제공하는것이다. Javascript 의 Library 중 가장 유명하고.. 파일로 쪼개기 어떤 기능을 내가 만든 웹 페이지에 모두 적용해야 할때 ex) 야간모드 버튼, bgm 재생, 로그인&로그아웃 등등 페이지마다 다 삽입한다면 수정을 한번 하는데 꽤 고역일 것이다. 그럴때 쓸 수 있는 기능이 파일로 쪼개기이다. 예를 들어 야간모드 버튼이 구현되는 코드를 아예 colors.js 로 저장하고, 다른 페이지들에 src 로 링크시키면 모든 페이지에서 사용가능하지만 한 곳에서 수정가능하다. 파일로 쪼개는게 시간&비용 모두를 절감할 수 있다고 한다. Object 그놈의 객체 자바에서도 자바스크립트에서도 징하게 배울 삘이다. 다만 자바에서는 객체의 단위를 클래스로 불렀구나 하고 알게된거 같다. 일단 레츠고 var nctdream = { "king":"jeno", "아가":"renjun" }; document.write("king : "+nctdream.king+" "); document.write("길림 : "+nctdream.아가+" "); nctdream.no = "nana"; document.write("노니드 : "+nctdream.no+" "); nctdream["늙음"] = "mark"; document.write("아저씨 : " + nctdream.늙음 + " "); 객체 만드는 법이다 {}안에 key: 값 이런식으로 만들어서 저장을 하고 nctdre.. 함수의 활용 함수를 배웠으니까 활용도 해봐야지 이전에 만들었던 주야간모드 버튼을 함수화 하는 작업을 해볼 것이다. function nightDayHandler(self){ var target = document.querySelector('body'); if(self.value === 'night'){ target.style.backgroundColor = 'black'; target.style.color = 'white'; self.value = 'day'; var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = 'powderblue'; i = i + 1; } } else { target... 함수 function 함수는 코딩에서 엄청 엄청 많이 쓰이기 때문에 그 기본 개념을 정확히 이해하고 있어야한다.. 기릿 이렇게 쓰면 1+1의 값을 그냥 호출하는 함수가 되지만, 변수를 주고 그 변수에 따라 값이 계속 바뀌는 함수를 쓰면 어떨까요? 좋겠지 뭐 function sum (left, right) { document.write(left+right+' '); } sum(2,3); sum(3,4); 이렇게 left, right 라는 파라미터 값을 설정하고 함수를 실행할때 값을 할당해주면 5 7 이라는 결과 값을 얻을 수 있다. 하나의 함수로 여러가지 결과 값을 얻을 수 있고, 이게 굉장히 효율적이라는거다. 2,3은 argument, left, right는 parameter이다 return을 알아보는 시간 .. 반복문 적용 반복문을 내가 만든 input 버튼에 적용을 해보는 방법을 배웠다. 추가된 기능은 이렇다 1. 링크가 걸린 텍스트들이 야간모드에서는 powderblue 라는 색으로 바뀔 수 있도록 2, 주간모드에서는 그냥 검정색으로 코드는 아래와 같다. 배열에다가 a 태그를 사용하는 모든 텍스트들을 담았다. alist 배열이 그것이다. 거기에 이제 반복문을 사용해서 style.color로 모든 텍스트 색을 파우더블루로 바꿔줬다. 이걸 주간모드에서도 반복되게 코드를 복붙후 텍스트 색깔만 바꿔준다. 그러면 완성이닷... 시시하신가요? ㅎ 반복문 내가 기억하기론 while 반목문과 for 반복문이 있는데, 우선적으로 while 반복문부터 보겠다. while 반복문은 while () 안에 있는 값이 true 일때까지 {}안에 있는 내용을 반복해서 실행하라는 문법이다. 아래 코드를 보시라 Loop 변수 i에 0을 넣어주고 i에 1씩 더해주면서 끝나는 조건문을 써준다. 그러면 ()안에 있는 i < 3이 참일때만 저 {}안에 있는 내용이 실행되는거다. 그래서 0부터 시작해서 1, 2 일때 까지 실행되는거니까 2, 3이 반복적으로 찍히는것이 3번만 반복되는거다. 이게 while 반복문이다. 그러면 반복문과 저번시간에 배운 배열을 어떻게 활용하는지 한 번 보자 Nct Dream 배열에 엔시티 드림 멤버들의 이름을 넣고 하나씩 불러오는 메소드를 while 문.. 반복문을 위한 배열 (array) 배우기 역시 아는 내용이지만 상기시키기 위해 듣는 인간 내가 그때도 지금도 이해하고 있는건 배열은 데이터들을 순서대로 집어 넣는 상자같은거 라는 것이다. 그냥 간단히 만든 예제 코드를 보는게 제일 빠를것 같다. Array Syntax get add count nct dream 이라는 배열을 만들었고, 그 안의 값들로는 멤버들의 이름을 String 값으로 넣었다. 숫자도 들어갈 수 있다. nctdream[1] 이런식으로 작성하면 1번째에 해당하는 값을 불러오라고 시킬수 있다. 배열에서는 순서가 0부터 시작하기 때문에 1에 해당하는 값을 불러오게 하면 2번째 값을 불러온다. 또 push, concat 같은 array method들을 사용하면 배열에 값을 더하거나 붙이거나 빼거나 할 수 있다. 나중에 굉장히 유용하게.. Refactoring 생산한 물건에 문제가 생기면 다시 리콜이라든가 뭘 해서 공장에 돌려보낸다. 코드도 심히 비효율적이라거나 문제가 있다면 리팩토링해서 돌려보내서 더 효율적인 코드로 개선할 필요가 있다. 아까 완성한 코드를 리팩토링 해보도록 하겠다. 그래 쓰면서도 뭔가 너무 길고 지저분해보였다. 공장에 다시 돌려보낼 필요가 있는 코드 저 위에 있는 document.querySelector('#night_day')라는 코드는 위에 있는 버튼 자기 자신을 가르키는 코드이다. 근데 이게 너무 길어지기도 하고, 아이디 값을 매번 새로 줘야하기 때문에 반복적이다. 그래서 자기 자신을 가르키는 명령어인 'this'를 활용해서 아래와 같이 바꿔준다. 이전 1 2 다음