목록Romantic Developer (47)
Romantic Developer : )
안녕하세요, 영감을 주는 개발자 방민방민입니다. 오늘은 지난 DOM 객체의 엘리먼트 객체를 찾아내는 것에 대하여 조금 더 심화학습해 보고자 합니다. 바로 시작합니다. 1. HTML Element (1) 바로 실습코드를 확인해 보도록 하겠습니다. HTML CSS JavaScript 이는 li 변수에 document.getElementById 를 통해서는 단 하나의 엘리먼트만lis 라는 변수에는 document.getElementsByTagName 를 통해 여러개의 엘리먼트가 리턴되어 저장되는 것을 확인할 수 있습니다. 실행결과는 아래와 같습니다. 2. HTML Element (2) 다음코드입니다. aaaa.com HTML CSS JavaScript 위의 코드에서 Id list 를 기준으로 엘리먼트를 tar..
안녕하세요 영감을 주는 개발자 방민방민입니다. 오늘은 jquery 의 실질적인 사용법에 대하여 알아보고자 합니다. 1. jquery 기본 문법 jQuery 의 문법은 단순하지만 강력합니다. 기본 문법 $('li').css('color','red'); $() 는 jQuery 의 함수입니다. 위에서 css li 객체를 넘겨주고 color 를 red 로 변환합니다. 아래의 어려운 예제를 통해 그 효율성을 생각해보겠습니다.아래의 예제코드는 따라치기 보다는 실행해보고 그 변화를 느끼는 정도로만 사용하면 됩니다. HTML CSS JavaScript var lis = document.getElementsByTagName('li'); for(var i=0; i
안녕하십니까 영감을 주는 개발자 방민방민입니다. 오늘은 웹 자바스크립트의 절대 강자 jquery에 대하여 사용해 보도록 하겠습니다. jQuery 는 자주 사용되는 자바스크립트 코드를 정리해 놓은 라이브러리입니다.그렇기 때문에 특정 로직을 사용할 때, 새롭게 해당 로직을 짤 필요가 없이 해당 라이브러리 코드만을 불러와서 사용할 수 있도록 해줍니다. 1. jQuery 홈페이지 아래의 jQuery 홈페이지에서 jquery 파일을 다운로드 받습니다.링크 주소 : https://jquery.com 그리고 아래와 같이 jquery 파일을 소스로 로드해 주면 사용이 가능합니다. 저의 경우에는 일단 같은 소스폴더에 위치해 있기 때문에, src = 'jquery.js' 를 바로 사용하였습니다.다른 폴더에 있다면 "../..
안녕하세요 영감을 주는 개발자 방민방민입니다. 오늘은 드디어 DOM 에서의 첫번째 시간입니다. DOM 은 Document Object Model 입니다. 이 DOM 은 자바스크립트로 웹페이지를 제어하기 위한 객체이며 전역객체 window 중에서 document 객체를 통해 접근이 가능합니다.Document 객체는 윈도우 위에 로드된 문서를 의미합니다. 오늘은 윈도우 위에 로드된 document 문서에서 제어의 대상을 찾는 방법에 대하여 실습하도록 하겠습니다.그럼 바로 시작합니다. 1. getElementByTagName 아래 예제를 보겠습니다. HTML CSS JavaScript HTML CSS JavaScript script 코드를 보면 ul 태그를 가지는 Elements 중에 ul[0] 즉, 첫번째 ..
안녕하세요 영감을 주는 개발자 방민방민입니다. 오늘은 자바스크립트에서 window 객체를 활용하여 창을 제어하는 방법에 대하여 알아보도록 하겠습니다. 1. Window.open jsPractice.html 첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다. 두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다. _blank는 새 창을 의미한다. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다. 세번재 인자는 새 창의 모양과 관련된 속성이 온다. demo2.html hello world 두 html 파일은 반드시 같은 폴더에 위치해 있어야 합니다.각각의 버튼은 demo..
안녕하세요 영감을 주는 개발자 방민방민입니다. 오늘은 DOM 에서 Navigator 객체에 대하여 알아보도록 하겠습니다. 세상에는 너무 많은 브라우저가 있습니다.사파리, 크롬, 인터넷 익스플로러, 파이어 폭스 등등등 이러한 브라우저마다 표준화를 최대한 따르지만 그 결과가 브라우저 플랫폼마다 다르게 도출될 수 있습니다.그러하기 때문에 자바스크립트를 통해 브라우저마다 다른 결과가 나오지 않도록 하는 것이 중요합니다.이러한 상황에서 사용하는 것이 바로 Navigator 객체입니다! 이러한 Navigator 객체는 브라우저의 정보를 제공함으로써 호환성 문제를 해결합니다! 지금부터 실습을 시작하도록 하겠습니다. 1. Navigator 객체콘솔창에 다음의 자바스크립트 명령어를 사용하면 브라우저의 정보를 확인 할 수..
안녕하세요, 영감을 주는 개발자 방민방민입니다. 오늘은 자바스크립트에서의 Location 객체에 대하여 알아보고자 합니다. Location 객체를 활용하면, 윈도우의 문서 URL 을 변경할 수도 있고, 그 위치와 관련된 다양한 정보를 얻을 수 있습니다. 그럼 바로 실습을 시작해 보도록 하겠습니다:) 1. 현재 문서의 URL 현재 문서의 URL 은 location 객체를 통해 접근이 가능합니다. location은 alert 창에서는 자연스럽게 string 으로 변환되기 때문에 위의 코드는 location.string 과 같은 내용이라고 생각하시면 됩니다. 이는 아래의 결과를 출력합니다. href 도 같은결과를 출력합니다. 실질적으로 location 은 많은 속성(프로퍼티) 들을 포함하고 있습니다. 아래는 ..
안녕하세요, 영감을 주는 개발자 방민방민입니다. 오늘은 웹 자바스크립트에서 BOM 객체의 첫번째 공부입니다.BOM 객체에 속한 다양한 객체, 메소드를 이용하여, 유저와 커뮤니케이션을 하는 내용을 구현해 보고자 합니다. 그럼 바로 시작하겠습니다. 1.alert 경고창이라고도 하는 alert 는 사용자에게 정보를 제공하는데 많이 사용됩니다. 아래의 코드를 보겠습니다. input 이라는 버튼을 보여주고, 이를 클릭함에 따라 onclick 에 있는 hello world 창이 출력됩니다. 2. Confirm 확인창은 true , false 값을 사용자로부터 받아 올 수 있습니다! 아래의 코드를 보시겠습니다.
안녕하세요 영감을 주는 개발자 방민방민입니다. 오늘은 웹 자바스크립트에서 오브젝트 모델에 대하여 알아보도록 하겠습니다.이 부분은 많이 어려울 수 있습니다. 최대한 상세하고 어렵지 않게 설명하고자 합니다. 집중해서 잘 따라와 주시면 감사하겠습니다. 웹 브라우저에서의 구성요소들은 하나하나가 모두 객체화 되어 있습니다.JavaScript , DOM(Document Object Model), BOM(Browser Object Model) 으로 구성된 3가지의 오브젝트는 브라우저의 가장 큰 틀 3가지이기 때문에 반드시 알아두어야 합니다.(출처 : 생활코딩) 브라우저를 객체화 한다는것이 무엇일까요? 지금부터 알아보도록 하겠습니다. 1. Img tag 브라우저 위에 이미지를 하나 올려 보도록 하겠습니다. 위의 간단한..
안녕하세요 영감을 주는 개발자 방민방민입니다. 오늘은 HTML 에서 자바스크립트를 로드하는 방법에 대하여 알아보고자 합니다. 웹 자바스크립트의 첫 포스팅인 만큼 바로 시작하도록 하겠습니다! 1. inline inline 은 자바스크립트 태그 내부에 javascript 코드를 기술하는 방식입니다. 아래 코드를 보도록 하겠습니다. onclick 은 이벤트의 발생시 " " 내부에 있는 javaScript 코드를 실행하게 됩니다. 즉 버튼이 클릭되었을때, 내부에 있는 alert('hello world') 코드를 실행하는 방식입니다. 이러한 방식의 장점은 태그에 연관된 자바스크립트 코드를 명확하게 확인이 가능하다는 점입니다. 그러나 제어와 HTML 정보가 함께 섞여있기 때문에 복잡해 질 수 있고, 그 정보로써의 ..