JS 작성 과정에 대한 자세한 설명-JS 튜토리얼-php.cn

html +css 정적 페이지

js 동적 상호 작용

원리: js는 대화 상자를 팝업하는 등의 스타일을 수정하는 것입니다. 팝업 프로세스는 상자가 비활성화에서 표시: 활성화로 변경되는 것입니다. 마우스가 가리키면 변경됩니다. 색상은 스타일을 수정하는 도구입니다.

JS를 작성하는 과정

레이아웃: HTML+CSS
이벤트: 사용자 식별 수행할 작업(제품 디자인)
JS 작성: 이벤트에서 JS를 사용하여 페이지 요소의 스타일을 수정합니다 (추가 속성: 수정할 속성 결정)

이벤트란 무엇인가요? 도메인: 함수 태그이벤트 선언: 사용자 작업 예: 마우스 인/아웃 onmouseover, onmouseout,함수 동작: 캡슐화된 것은 더 복잡한 것으로 이해될 수 있습니다. action.

함수의 표준 위치 및 캡슐화

형식:

위치:

Package:

Function: fuction+name+()

캡슐화되지 않은 코드를 태그에 배치하면 독자에게 시각적 혼란을 야기합니다. 그런 다음 태그에서 함수를 호출하면 문서가 더 깔끔해집니다.

여러 태그가 동일한 함수를 반복적으로 호출할 때 전체 코드를 다시 입력할 필요 없이 함수 이름만 호출하면 됩니다.

변수: var + name + ()

변수는 복잡한 구조를 가진 일부 개체에 간단한 이름을 할당하면 호출 시 코드 양이 줄어듭니다.

{

)

var

oDiv

document.getElementById('div1'); 작업 1: div1은 oDiv 작업 2 /3은 div1의 너비를 변경합니다함수액션 계층구조 상세설명 및 Document.getElementById 설명 : (핵심사항) oDiv.style.width=' 300px'

에 값 2를 할당합니다.

oDiv.style.width=

'300px'

O Div.style.Background

= 'green';

액션 4, 배경 변경 친환경이 되어주세요

) 코멘트아웃

오브젝트 속성은 여러 레이어로 나누어지며, 각 레이어는 ''로 구분됩니다. .'. 다음은 이전의 하위 속성(properties)으로 이해하시면 됩니다. 중국어로 '적'입니다사실 각 기능의 동작이 나누어져 있기 때문에 실제로는 섹션 별로 보입니다. example

;

이 작업은 다음에 속합니다:

Document.getElementById('div1').style.width = '300px' 그리고 이 전체 단락은 다음에 속합니다: Window.Document.getElementById('div1') .style.width = '300px'

이 전체 는 완전한 이벤트입니다action,

창문은 상위 수준 개체document 두 번째 계층 개체입니다 getElementById 세 번째 레이어 객체(메서드)

위 내용은 JS 작성 과정에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!