Foundation/- Javascript (7) 썸네일형 리스트형 jQuery jQuery - DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다. 라이브러리란 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어다. jQuery의 사용법 - jQuery를 사용하기 위해서는 일단 js파일을 업로드 해야하는데, 사용하기 간편한 CDN으로 jQuery를 사용하겠다. CDN은 Content Delivery Network의 약자로 전세계에 있는 서버로부터 데이터를 가져와 사용하는 것이다. 다운로드를 하지않아도 되는 장점이 있다. https://code.jquery.com/ --> 여기서 최신버전의 소스를 다음과 같이 얻을 수 있다. # 위의 자바스크립트 코드를 다음과 같이 태그에 위치하.. (DOM)제어 대상 찾기 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 가장 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용하는 것이다. 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. 하나씩 알아보도록 하자. document.getElementsByTagName getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다. # document(문서). get(가져온다)Elements(요소들을)ByTagName(태그네임으로)('li')(태그네임이 li인) 그리고 가져.. (BOM)창 제어 창 제어 window.open 메소드는 새 창을 생성한다. 현대의 브라우저는 대부분 탭을 지원하기 때문에 window.open은 새 창을 만든다. 아래는 window.open 메소드에 대한 사용을 알 수 있는 코딩이다. # open1함수는 기본적인 window.open() 메서드이다. demo2.html의 새 창을 열어 준다. # open2, open3, open4함수를 보면 두번째 인자로 demo2.html을 어떠한 방식으로 창을 열것인가에대한 내용이다. _self는 현재 페이지에서 demo2.html파일을 열고 _blank는 새 탭에 demo2.html이 열린다. 여기서 open3함수의 버튼을 계속해서 클릭한다면 새 탭에 계속해서 demo2.html 파일이 생겨 날 것이다. 하지만 open4()의 '.. (BOM)Navigtor 객체 Navigtor 객체 브라우저의 정보를 제공하는 객체이다. 주로 호환성 문제들을 위해서 사용한다. console.dir(navigator); 명령을 통해서 이 객체의 모든 프로퍼티를 열람할 수 있다. 이 중 주요한 프로퍼티로는 appName, appVersion, userAgent, platform이 있다. appName # appName는 웹브라우저 이름이다. 결과로는 Netscape가 나온다. IE(Internet Explorer)는 Microsoft Internet Explorer 그리고 파이어폭스나 크롬은 Netscape로 표시한다. appVersion # 브라우저의 버전을 의미한다. 크롬을 사용하는 것을 볼 수 있다. userAgent # 브라우저가 서버측으로 전송하는 USER-AGENT HTT.. (BOM)Location 객체 Location 객체 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티다. 이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다. 우선, 현재 윈도우의 문서가 위치하는 URL을 알아내는 방법이다. # location객체의 href프로퍼티나 toStriong()메서드를 통하여 현재 URL를 알아 낼 수 있다. # 위에서 보는 것과 같이 protocol, host, port, pathname, hash 프로퍼티를 통해 URL을 의미에 따라서 뽑아 낼 수 있다. 그외에도 location.href 와 location.reload()가 있다. location.href = '이동할 주소 url'; 해당 url로 이동한다. 여기서 url을 입력할때 h.. Object Model # 출처(http://learn.javascript.ru/browser-environment) 웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다. WINDOW - window 객체는 모든 객체가 소속된 객체이고, 전연객체이면서, 창이나 프레임을 의미한다. 예를들어 alert('hello world')를 입력한다면, window.alert('hello world')와 완전히 같은 의미이다. 변수도 마찬가지로 a = 1; 이라고 정의 했을때 (window.)a=1; 이랑 완전히 같은 말이다. 자바를 배우신 .. Javascript (basic) 자바스크립트 로고 우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다. 예를 들어 자바스크립트를 이용하면 ‘버튼을 클릭하면 밑에 날짜를 보여줘’라는 식의 명령을 내릴 수 있다. 자바스크립트를 이용하면 웹에 풍부한 효과를 넣을 수 있지만, 2000년대 초반만 해도 자바스크립트는 개발자들에게 무시당하는 언어였다. 별다른 기능도 없고.. 이전 1 다음
