시작 ($, click 이벤트, onload, ready, attr) [javascript Javascript] jQuery 사용법 및

 jQuery의 사용법에 대해 알아보겠습니다.

우선 jQuery도 저번에 얘기했던 CDn이 필요해요.

구글에서 w3schoolsj Querycdn을 검색합니다.들어가서 다음과 같은 빨간 박스를 클릭합니다.

그러면 코드가 나오는데 그 중에서 이 부분만 복사를 해줍니다.

그리고 주의할 점은 이렇게 url 이 있는 script 태그에 내용을 쓰면 안 됩니다.

새로운 Script를 열어 JavaScript를 사용합니다.

저번에는 태그에 document.getElementById로 태그에 접속했습니다.

이렇게 접근해서 출력을 보면

제가 원하는 사진과 태그 정보가 뜹니다

유사한 j Query에서도 태그에 액세스 할 수 있습니다.

이렇게 $을 쓰시면 됩니다.

그러면 이렇게 해서 의 엄청난 것이 출력이 됩니다.

이렇게 함수를 만들 수도 있어요

저번에는 onclick()이벤트로 속성을 변경했는데 이번에는 그대로 click하고 click이 되면 안에 함수가 실행이 됩니다.

안의 함수는 image의 attr=>attribute일텐데 속성 중에 width를 100px로 바꿔라.

이렇게 실행 후 사진을 누르니 이렇게 되었습니다.

사진이 100px가 됐네요.

또 자바스크립트를 head영역에 쓰지 않고 body영역에 사용을 하는데, 이것은 html이 위에서 아래로 실행되기 때문에

우리가 써놓은 img태그는 만들어지기 전인데, 상단의 자바 스크립t에서 img태그를 찾으면 오류가 나옵니다.

그런데 개발은 역할을 나눌수록 빨라지고, 자바 스크립트 따로 css, css 따로 html은 html 따로 분리해 두는 것이 유지보수 할 때도 좋으니 head 영역에 모아 두는 것이 좋겠습니다.

그래서 자바 스크립트를 위로 작업을 해야 합니다.

그때 쓰는건 순수한 자바스크립트로는 on load를 쓰면 되고

j Query에서는 ready를 쓰시면 됩니다.

둘 다 웹 페이지가 로딩되면 실행하라는 뜻입니다.

저희가 아까 말했던 예로 예를 들어서

이렇게 자바스크립트를 위에 놓으면 우리가 원하는 기능이 수행되지 않습니다.

이렇게 null이 나오기도 하고요.아직 img태그를 만들기 전에 img태그를 위에서 찾고 있으니까요.

이렇게 onload를 쓰면 출력하고 싶은 img태그가 나옵니다.

이렇게요.

이번에는 ready를 사용해보겠습니다.

이렇게 사용할 수 있습니다.

이렇게 하니까 똑같이 사진이 작아졌어요

이렇게 사용을 해봤습니다

저도 익숙해질 때까지 연습 많이 해봐야겠어요.

주말에 연습과 공부를 많이 하려고 했지만 조립과 주변기기를 사러 다니느라 바빴습니다.( ´ ; ω ; ` )

컴퓨터를 조립하고 또 환경설정을 하면서 좋은 프로그램도 많이 알게되고 무엇보다 빨라서 좋네요(웃음)

여기까지 하겠습니다감사합니다