My Coding World

우리가 사용하는 웹브라우저는 몇개나 될까요? 익스플로러? 크롬? 그리고 파이어폭스 정도? 아닙니다. 전세계 엄청 많은 브라우저들이 있는데요, 이런 다른 브라우저에서 프로그램이 동작하게 하려면, 그에 맞는 설계가 필요한데요. 자바스크립트에서 브라우저 적용에 대한 내용입니다. 위의 구절이 바로 어떤 브라우저를 사용하는지 검사?하는 코딩인데요, 자주 사용할 것 같습니다. jQuery로 변경하면 이렇습니다. removeClass('selected'; - > for문을 대신해서 이렇게 간단하게 표기가능합니다. (this) - > 현재선택된 것을 의미합니다. 자바스크립트의 엄청난 코드가 4줄로 줄어듭니다. 이제 jQuery의 강력함을 느껴보세요~

안녕하세요. 제이쿼리에 대해 1도 모르는 1인입니다. 하지만, 오늘부터 공부해보려고 이렇게 노트에 적어봅니다. 오픈 튜토리얼 사이트에서 배운 것을 토대로 정리해 보려고요, 프로그램을 작성하는 중에 코드를 재사용할 수 있는 것들 위주로 정리하려고 합니다. 자바스크립트를 사용할때 제이쿼리 모르면 간첩이라고 하는 것 같아요. 그만큼 라이브러리 개념을 알아야 코드를 간결하고 이식성 좋게 하는 것 같군요. http://jquery.org에서 다운로드가 가능합니다. 자바스크립트 로직들이 나옵니다. 웹서버에 업로드를 시켜서 그걸 활용할 수도 있지만, 구글의 제이쿼리를 사용할 수 있는데요, 그냥 URL을 복사해서 넣으면 됩니다. min은 미니멈의 약자입니다. 개발하면서 사용할때는 min이 아닌 것을 사용하면 좋겠죠. ..

fetch라는 함수를 아쉽게도 익스플로러11에서 사용이 안된다는 소식... 안타깝지만, 이것을 극복 할 수 있는 방법이 있어서 소개합니다. 위의 표에서 보시면, IE11은 지원하지 않네요. ajax의 꽃인 fetch기능을 활용하면 중복되는 코드를 많이 줄일 수 있는데요, CanIUse.com에서 이런 기능을 확인 할 수 있다는 것도 참 흥미롭네요. 프로그램하면서 자주 들어가 봐야할 것 같군요. A mordern replacement for XMLHttpRequest. fetch API pollyfill 이렇게 구글 검색하시면... github에서 자료를 다운로드할 수 있어요. 다운로드 받은 파일을 fetch폴더에 저장후 index.html에 위와 같이 기술하면 사용할 수 있어요. 최신브라우저에서는 당연히..

해시의 기능을 아시나요? html 웹페이지를 작성할때 특정한 부분으로 점핑할때 해시의 기능을 사용합니다. a.html#three 헬로.... 위의 주소 a.html#three 이렇게 주소를 입력하면헬로가 화면에 나오겠죠.... 아니 제일 위로 나옵니다. id로 지정된 곳으로 이동한다는 것이네요. 해시기능은 일종의 책갈피의 기능이 아닐런지요~ #three 여기서 #표시를 없애고 가져오고 싶다면? console.log(location.hash.substr(1)); 이런식으로 해시가 뭔지를 가지고 프로그램을 응용할 수 있습니다. 풀 주소인경우, location:8080/idex.html#javascript fetchpage(location.hash.substr(2)); 이렇게 하면 three란 단어를 가져옵니다.

안녕하세요. 요즘 ajax 활용을 공부하고 있는데요, 함께 알면 좋은 것을을 정리하는 노트입니다. 제가 기억하기 좋은 방법으로 기록해야 할 것 같아요~ onclick했을때 표현방법onclick="fetchpage('html')" 이렇게 호출하면 정말 코드의 크기를 많이 줄일 수 있겠네요~ article이란 태그에 넣는 데이터는 이제 자유자재로.... 위의 함수의 활용은 어마어마할 것으로 예상됩니다. 웹프로그램에 날개를 달아줄 것입니다. Ajax는 정말 멋진 방식이네요~

fetch('html').then(function(response){ // 서버에게 html이라는 파일을 요청 response.text().then(function(text){ alert(text); // 서버가 응답해 준 데이터가 text에 저장된다. }) }) ajax는 수많은 로딩타임을 줄여주는 것이 가장 큰 장점입니다. fetch API 사용하는 방법을 알아야 합니다. fetch('html'); -> html이란 파일을 서버에서 불러오라는 명령어.... 그럼 then은??? 뭘까요? fetch('html').then(); 응답이 끝나면 then( '함수명'); 함수명을 실행한다는 의미입니다. 응답이 끝나면 함수명을 실행합니다. //Asynchronous Javascript And Xml 비동기식이..

안녕하세요~ html과 자바스크립트는 정말 너무도 중요한 협업입니다. 선택박스에서 어떤 값을 선택했을때 그 결과에 따라 다른 동작을 만들고 싶을때 이 방법이 유용하겠네요. 내가 어떤 값을 선택했을때 그 결과로 인해 다른 동작을 원하는 분.... 이 방법을 사용해 보세요~ select element를 만들고 onchange에 변경 이벤트가 발생했을 때 호출될 함수명을 추가합니다.

모든 프로그램에서 배열을 쓰는 이유는 뭘까요? 배열을 만약 사용하지 않는다면 과연 어떤 일이 벌어질까? 이런 질문이 더 현실감이 있고, 머릿속에 더 들어올 것 같네요. 배열은 같은 데이터가 수도없이 있을때 일일이 그 데이터에 변수명을 대입한다면 엄청나게 많은 변수가 생기는 것을 막아줍니다. 많은 변수.... 이것들은 프로그램이 커지면 당연히 엄청난 부담으로 느껴질 거예요. 이름을 전부 기억한다는 것도 힘든일이테니까요~ 배열은 이러한 반복적인 상황을 타계할 좋은 방법입니다. 반복을 줄여주는 좋은 친구인셈이죠. 배열은 결국 어떤 프로그램이든 For문이나 loop, while 등과 함께 어우러질 수밖에 없는 것이죠. 자바스크립트에서 배열선언하는 방법은 아래와 같습니다. 여러방법이 있으니, 취향대로 하시면 될 ..