AJAX를 사용하여 HTML5 및 CSS3 프로그래밍을위한 초기화 함수 만들기

많은 HTML5 및 CSS3 페이지에는 초기화 기능이 필요합니다. body onload 메커니즘은 문서가로드되기 시작하자마자 페이지를로드하기 위해 DOM / JavaScript에서 자주 사용됩니다. 이것은 페이지의 나머지 부분을 설정하기 위해 일찍 실행되는 기능입니다. 바디 온로드 (body onload)는이 작업을 잘 수행하지만 전통적인 기술에는 몇 가지 문제가 있습니다.

• HTML을 변경해야합니다. JavaScript 코드는 HTML과 완전히 분리되어야합니다. JavaScript로 작동하도록 HTML을 변경할 필요가 없습니다.

• 아직 타이밍이 맞지 않습니다. body onload에 지정된 코드는 전체 페이지가 표시 될 때까지 실행되지 않습니다. DOM이로드 된 후 코드가 등록되었지만 페이지가 표시되기 전에 코드가 표시되면 더 좋을 것입니다. $ (문서) 사용법. ready () jQuery는 이러한 단점을 극복 한 바디로드에 대한 훌륭한 대안을 제공합니다. 코드가 어떻게 작동하는지 보려면

준비. html $ (문서). 준비 (changeMe); function changeMe () {$ ("# output"). html ("변경됨");}

문서 사용. 준비 메커니즘

변경 되었습니까?

이 코드는 초기화 코드를 실행하는 데 jQuery 기술을 사용합니다.
body 태그에 더 이상

onload

• 속성이 없습니다. 이것은 jQuery 프로그래밍의 공통된 특징입니다. jQuery는 JavaScript 코드를 웹 페이지에 첨부 할 수 있기 때문에 HTML은 더 이상 JavaScript에 직접 연결되지 않습니다. -> 초기화 함수는

  $ (document)로 생성됩니다. ready ()

• 함수를 호출합니다. 이 기술은 DOM이 로딩을 끝내면 (즉, 폼의 모든 요소에 액세스 할 수 있도록) 페이지가 표시되기 전에 브라우저에 함수를 실행하여 폼의 모든 효과가 사용자에게 즉각적으로 표시되도록합니다). $ document 는 전체 문서에서 jQuery 객체를 만듭니다. $ () 함수 내에서 문서를 지정하여 전체 문서를 jQuery 객체로 변환 할 수 있습니다. 이 경우에는 따옴표를 사용하지 않습니다.

• 지정된 함수가 자동으로 실행됩니다. 이 특별한 경우에는 changeMe () 함수를 실행하여 ready () 메소드의 매개 변수에 배치하려고합니다. 이것은 variableMe를 변수로 참조하므로 따옴표 나 괄호가 없습니다. jQuery가 함수를 매개 변수로 기대하는 여러 다른 장소 (특히 이벤트 처리)를 볼 수 있습니다. 이러한 함수는 일종의 이벤트가 발생한 후에 호출되기 때문에

• 콜백 함수 라고도합니다.또한 키보드 이벤트, 마우스 동작 및 AJAX 요청 완료에 응답하는 콜백 함수를 볼 수 있습니다.

문서의 대안. ready 초기화 코드를 실행하는 것이 일반적이기 때문에 몇 가지 바로 가기가 표시되는 경우가 있습니다. $ (문서)를 줄일 수 있습니다. 준비 (changeMe);

를 다음 코드에 추가합니다.

$ (changeMe);

이 코드가 함수 내에서 정의되지 않고 changeMe가 페이지에 정의 된 함수 인 경우 jQuery는 문서와 마찬가지로 직접 함수를 자동으로 실행합니다. 준비 접근법.

익명 함수를 직접 생성 할 수도 있습니다:

$ (document). 준비 (function () {$ ("# output").html ("I changed");});

이 (익명 함수) 메소드는 번거롭지 만이 기법을 사용하여 jQuery 코드를 자주 보게된다. init ()이라는 함수를 생성하고 다음과 같은 라인으로 호출 할 수 있습니다:

$ (init);

이 기법은 간단하고 이해하기 쉽지만 웹에서 코드를 검사 할 때 다른 변형이 발생할 수 있습니다.