선택자 또는 타겟 설정은 jQuery에서 가장 중요하고 가장 많이 사용되는 부분이다.어렵지 않은 부분이니 바로 보면서 시작하자.먼저 7line은 제이쿼리 CDN 호스트 주소이다.제이쿼리를 사용하는 방법에는 두 가지 방법으로 사용 할 수 있다.첫 번째 방법은 위처럼 CDN 호스트를 사용하는 법이고두 번째 방법은 직접 다운을받아 사용 하는 방법이다.CDN호스트를 사용하는것이 편리하기 때문에 학습 목적에는CDN을 많이 쓰는 편이다. 10lind 의 $(document).ready() 는 문서가 준비되면매개변수로 넣은 콜백 함수를 실행하라는 의미이다.jQuery 이벤트 메소드 중 하나이며 웹 개발에서 거의많이 쓰이기 때문에 구조는 알아두자. 보통 jQuery로 타겟을 잡아서 작업을 할때는 도큐먼트 레디안에서 많..
ECMAScript 5 부터는 정식으로 JSON 객체를 지원한다고 한다.JSON은 자바스크립트 객체의 형태를 가지는 문자열을 뜻한다.이부분은 나중에 자세히 알아보고 이번 포스팅에서는 ECMAScript 5 JSON 객체의 2가지 메소드를 간단히 알아보겠다. 2가지 메소드는 JSON.stringify() 와 JSON.parse() 이다.JSON.stringify()는 자바스크립트 객체를 JSON문자열로 변환하고 JSON.parse()는 JSON문자열을 자바스크립트 객체로 변환시켜준다. 먼저 JSON.stringify() 메소드를 짧게 사용해보자. 다음 JSON.parse() 메소드를 사용해보자.
ECMAScript 5 에 대해 아주 간단하게 알아보면 HTML5 와 함께 출현한 자바스크립트 표준안을 ECMAScript 5 라고 부른다.EMCAScript 5 는 기존의 자바스크립트에서 객체 관련 부분을 많이 보완 했다. 끝. EMCAScript 5 에는 여러 메소드가 존재하는데그 중 반복 메소드에 대해서만 알아보겠다.(내가 얼마전에 블로그에 indexOf 메소드에 관해 글을 포스팅 했는데indexOf 메소드는 ECMAScript 5 에서 탐색 메서드에 속한다.) EMCAScript 5 의 반복메소드에는 forEach() 와 map() 이 존재한다. forEach()는 배열의 각각의 요소를 사용해 특정 함수를for in 반복문처럼 실행한다. map()은 기존의 배열에 특정 규칙을 적용해 새로운배열을 ..
속성과 메소드(feat. this) 보통 배열 내부에 있는 값을 요소(element)라고 한다. 반면 객체 내부에 있는 값은 속성(property) 이라고 부른다. 다른 프로그래밍 언어에서는 요소와 속성이차이가 있어 요소와 속성이라고 구분지어 부른다. 하지만 자바스크립트는 요소와 속성이 다르지않아서둘 중 아무거나로 불러도 상관이없다. 객체의 속성 중 함수 자료형인 속성을 우린 메소드라 부른다.메소드 내에서 자기 자신이 가진 속성을출력하고 싶을 때는 자신이 가진 속성임을 분명하게표시해야한다. 이때 사용하는 것이 this 키워드 이다. 간단하게 속성과 메소드 this 키워드를 사용해 짧은 코드를 실행해보자. web 이라는 객체를 생성하고 그 안에 name, eat 속성을 만들어 주었다.eat 속성은 함수 자..
지금까지 JAVA, JSP, SPRING 등 공부를 하면서이것저것 만들어 보기도하고, 공부하느냐다른 사람의 소스코드도 분석해서 테스트도 해보고여러가지를 해봤는데 그때마다 자바스크립트와 제이쿼리를많이 사용해왔다. 하지만 요즘 부쩍 자바스크립트와 제이쿼리가부족하다는 느낌을 받아서 복습겸 다시 공부를 해보려한다. 일단 내가 선택한 책은"모던 웹을 위한 JavaScript, jQuery 입문" 이라는 책이고개인적으로 "자바스크립트 완벽가이드"라는 책을 사서 공부해 보고싶었지만 먼저 가지고 있던 책을 공부한 후, 완벽가이드 책을 사서공부를 할 계획이다. 블로그에는 꼭 필요하다고 생각되는 부분만 포스팅을 할것이다.
이번 포스팅에서는 자바스크립트와 제이쿼리의 실행 속도비교를 해보겠다. 간단하게 비교하는 방법이라 소스가 짧다.먼저 input태그를 하나 만들어주고자바스크립트와 제이쿼리에서 id가 text인 타겟에 속도테스트라는value값을 넣어줄 수 있도록 해주자. 다음 실행 속도비교를 위해 timer 라는 function을 하나 만들어주고performance.now()를 이용해 실행 속도를 체크하자. (performance.now()는 API문서를 참고했고 링크는 제일 밑에있다.) 아래는 만약을 위해 적어준다 실행을 하고 크롬 개발자도구의 콘솔창에서 확인을 하면 차기아 많이나야 약 3배 정도의 차이가 나는데단위가 ms 이니 거의 똑같다고 보면된다. 하지만 방금 테스트를 위해선 그냥 input태그에 5글자를 넣어준것이다..
예전에 자바스크립트를 책으로 공부를 하다 뒤쪽에 ajax에 관해 설명을 해주면서 POSTMAN을 사용했던기억이 있다. POSTMAN은 웹 공부를 했던 분들이라면한 번쯤 들어봤을거라 생각한다. 일단 POSTMAN에 대해 간단하게 소개해보자면REST API 나 URL요청 또는 http 프로토콜 등을쉽게 테스트 할 수 있도록 만들어진 도구이다. ajax에 대해 공부할 때 get,post 방식을 쉽게 테스트 해볼수 있다. 개발자 분들 중 에서도 POSTMAN으로 API연동이나다른 여러 가지의 테스트를 할 때 사용한다는 분들도 있다 먼저 아래 링크로 가서 POSTMAN을 설치하자. https://www.getpostman.com/ 각자 OS 에 맞게 설치후 POSTMAN을 실행시켜보자. 아래는 POSTMAN의 첫..
정보처리기사 시험도 끝났고 오랜만에 블로그에글이나 써볼까 하고 이곳저곳 돌아다니던중 좋은 글을발견해서 내 블로그로 퍼왔다. 글 작성자가 외국인이라국내 상황과 약간 맞지 않는 부분이 있다. 이점 참고하자 출처:(https://rhostem.github.io/posts/2018-01-25-top-java-script-libraries-tech-to-learn-in-2018/) 원글:(https://medium.com/javascript-scene/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6) ------------------------------------------------------------------ 작년 나는 2017년에 배워야할 최고..
