JavaScript (6) 썸네일형 리스트형 [JavaScript] jQuery 라이브러리 사용 방법 오늘은 JavaScript의 라이브러리 중에서 가장 유명한 jQuery 라이브러리를 사용하는 방법에 대해 배웠다. 먼저, 라이브러리를 사용하는 이유는 빠른 소프트웨어 구현이다. 모든 코드를 스스로 작성 하는 것은 한계가 있기 때문이다. jQuery 라이브러리를 이용하면 더욱 직관적이고 쉬운 코드를 작성할 수 있다. 라이브러리 jQuery 사이트에 접속하여 Download 버튼을 누른 뒤 링크를 누르면 jQuery 라이브러리를 다운 받을 수 있다. 이떄 control + F로 'CDN' 검색하면 간편하게 다운 받을 수 있다. (Content Delivery Network) https://jquery.com/ 1. jQuery 라이브러리를 불러오는 코드 추가 2. jQuery를 이용한 기존 코드 수정 - $.. [JavaScript] .js 파일 추가하여 코드 수정을 편하게 오늘은 .js 파일을 추가하여 코드 수정을 더 편하게 하는 방법을 배웠다. 이전에 사용했던 코드이다. 객체 개념을 활용하여 코드를 쉽게 수정하도록 했지만 .html 파일이 더 많아졌을 때 색깔을 수정해야 된다면 또 번거로워진다. .js 파일을 추가하여 이를 해결할 수 있다. WEB HTML CSS JavaScript JavaScript //내용 생략 1. .js 파일 추가 var Links = { setColor: function(color){ var alist = document.querySelectorAll('a'); var i = 0; while(i [JavaScript] 객체 기본 개념 예제 오늘은 객체의 기본 개념에 대해서 배웠다. 객체란 무엇인지, 객체의 데이터를 추출하는 방법 (반복문), 메소드를 배웠다. 우리는 정보량이 많아 졌을 때 서로 연관된 정보를 순서대로 정리정돈 하기 위해 배열을 사용했다. 많은 정보를 순서와 상관없이 정리정돈을 하기 위해서는 객체를 사용한다. 객체란 무엇인가 배열은 대괄호 []를 사용했고, 객체는 중괄호 {}를 사용한다. 객체로 사용할 데이터를 출력할 때 띄어쓰기가 필요할 경우에 대괄호 []를 사용하면 된다. coworkers["data scientist"] = "taeho"; document.write("data scientist : " + coworkers["data scientist"]+" "); Object Create 반복문을 이용한 객체 데이터 출.. [JavaScript] 함수 활용한 refactoring - 야간 모드 예제 간결하게 오늘은 함수를 이용하여 야간모드 버튼을 간결하게 바꾸는 작업을 배웠다. 지금은 night / day 버튼을 사용하는 간단한 예제를 만들었지만 나중에 다양한 용도를 추가하기 위해 함수를 활용하고 코드가 더 길어진다면 최대한 반복을 줄인 효율적인 코드가 필요하다. 이전 포스팅에서 사용한 예제의 일부분이다. WEB 지금은 야간모드 전환 버튼이 한개지만 버튼이 여러개가 될 경우에는 수정이 번거로워진다. 따라서 부분의 반복을 줄이기 위해 nightDayHandler() 함수를 만들고 버튼에 자바스크립트 코드를 넣을 것이다. 1. nightDayHandler() 함수 만들기 태그를 추가하여 버튼의 자바스크립트 코드를 넣는다. 주의) onclick 이벤트 안에서 this는 더이상 이벤트가 소속된 태그를 가리키지 않기.. [JavaScript] 중복 제거를 위한 refactoring - 야간모드 예제 코드 간결하게 오늘은 코드의 중복된 부분을 제거하여 수정을 편하게 하는 방법인 refactoring에 대해 배웠다. 요즘 배우고 있는 코드는 짧고 간결하지만, 코드가 더 길어질 경우 중복된 부분이 많으면 수정하는 과정이 번거롭다. 이전에 작성한 코드이다. 1. 코드를 보면 만약 버튼의 개수가 여러개로 늘어났을 때 id값인 night_day를 수정할 과정이 번거로울 것이다. 2. document.querySelector도 여러번 반복되고 있다. WEB 1번 문제를 해결 하는 방법은 onclick과 같은 이벤트 안에서 실행되는 코드는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드(this)를 사용하는 것이다. document.querySelector('night_day')를 this로 변경한다. [JavaScript] JavaScript와 HTML의 연관성 JavaScript는 웹 페이지와 사용자가 상호작용할 수 있게 만드는 언어로 등장했다. 웹 페이지는 한 번 화면에 출력되면 스스로 변경할 수 있는 능력이 없다. 이를 가능하게 해주는 것이 자바스크립트이다. 자바스크립트는 사용자와 상호작용을 하고, HTML를 제어한다. HTML에서 자바스크립트를 사용하는 방법 웹 브라우저에 HTML과 차이점 HTML은 정적이고 JavaScript는 동적이다. HTML은 한 번 화면에 출력되면 스스로 변경할 수 있는 능력이 없지만, JavaScrip는 변경할 능력이 있다. JavaScript HTML 1+1 HTML은 컨텐츠 사용하는 언어 CSS는 컨텐츠를 디자인하는 언어 JavaScript는 컨텐츠를 사용자와 상호작용 할 수 있게 만드는 언어 이전 1 다음
