jQuery의 사용법에 대해 알아보겠습니다.
우선 jQuery도 저번에 말했던 cdn이 필요해요.
구글에서 w3schoolsj Querycdn을 검색합니다.
들어가서 아래와 같은 빨간 박스를 클릭합니다.
그러면 코드가 나오는데 그 중에서 이 부분만 복사해 줍니다.
그리고 주의할 점은 이렇게 url이 있는 script 태그에 내용을 쓰면 안 됩니다.
새로운 script를 열고 자바스크립트를 사용해야 합니다.
지난번에는 태그에 document.getElementById로 태그에 접속했습니다.
이렇게 접근해서 출력을 보면
원하는 사진과 태그 정보가 표시됩니다.
마찬가지로 jQuery에서도 태그에 접속할 수 있습니다.
이렇게 $를 써주세요.
그러면 이렇게 엄청난 게 출력이 됩니다.
이렇게 함수를 만들 수도 있습니다.
지난 번에는 onclick() 이벤트로 속성을 변경했다면 이번에는 그대로 click하고 click이 되면 안에 함수가 실행됩니다.
안의 함수는 image의 attr=>attribute라고 생각하는데 속성중의 width를 100px로 바꾸세요.
이렇게 실행 후에 사진을 눌러보니 이렇게 되었습니다.
사진이 100px가 되었습니다.
그리고 자바스크립트를 head 영역에 사용하지 않고 body 영역에 사용하는데 이것은 html가 위에서 아래로 실행되기 때문에
저희가 써놓은 img 태그는 만들어지기 전인데 위에 자바스크립트에서 img 태그를 찾고 있기 때문에 오류가 납니다.
하지만 개발은 역할을 나누면 나눌수록 빨라지기 때문에 Bascript는 자바스크립트별로 css별로 html는 html별로 분리해두는 것이 유지보수를 할 때도 좋기 때문에 head 영역에 모아두는 것이 좋습니다.
그렇기 때문에 자바스크립트를 위로 올리는 작업을 해야 합니다.
그때 쓰는 게 순수한 자바스크립트에서는 onload를 쓰면 되고,
jQuery에서는 ready를 쓰면 됩니다.
둘 다 웹페이지가 로딩되면 실행하라는 뜻입니다.
저희가 아까 했던 예에서 예를 들면
이렇게 자바스크립트를 위로 올리면 우리가 원하는 기능이 실행되지 않습니다.
이렇게 null이 나오기도 하고요. 아직 img 태그를 만들기 전에 img 태그를 위에서 찾고 있으니까요.
이렇게 onload를 쓰면 출력하고 싶은 img 태그가 나옵니다.
이렇게요.
이번에는 ready를 써볼게요.
이렇게 사용합니다.
이렇게 하면 똑같이 사진이 작아진 것을 볼 수 있습니다.
이렇게 써봤습니다.
저도 익숙해질 때까지 연습을 많이 해봐야겠네요.
주말에 연습과 공부를 많이 하려고 했는데 컴퓨터 조립과 주변기기를 사러 가느라 바빴어요.(´;ω; ))
컴퓨터를 조립하고 또 환경설정을 하면서 좋은 프로그램도 많이 알게 되었고 무엇보다 빠르고 좋네요 (웃음)
여기까지 하겠습니다.감사합니다。