html +css Static page
js Dynamic interaction
Principle: js is to modify the style, such as popping up a dialog box. The pop-up process is that the box is disabled Change it to display:enable. Or change the color when the mouse points to it. It is a tool to modify the style.
Layout: HTML+CSS
Event: Determine what actions users do (product design)
What is an event
A complete event =
Scope: Action tag
Event statement: a user operation, for example: mouse in and out onmouseover, onmouseout,
Function action: a well-encapsulated action that can be understood as a more complex action.
The event statement is also a certain part of this scope An attribute, a function is a series of actions made by this attribute
function Standard location and encapsulation
Position:
Detailed explanation of function action hierarchical structure and explanation of Document.getElementById: (Key points)
Object properties are divided into many layers, and each layer is separated by '.' .What follows is the previous sub-attribute (attribute), which can be understood as '的' in Chinese In fact, each function action is divided, so what you see is section by section. Actually, for exampleoDiv.style.width='300px'; this action belongs to:
Document.getElementById('div1').style.width = '300px' And this entire paragraph belongs to: Window.Document.getElementById('div1').style.width = '300px'This entire is a complete eventaction, | |||||||||||||||||||||||||||||
window is the upper-level object | |||||||||||||||||||||||||||||
document is the second-level object | |||||||||||||||||||||||||||||
getElementById is a three-layer object (method) | |||||||||||||||||||||||||||||
styleFour-layer object (first-layer attribute) | |||||||||||||||||||||||||||||
##height Five-layer object (second-layer attribute)
|
# # |
##
|
#charset="utf-8" > |
Untitled Document | #
## | width
;
| height
;
| background
red ; } |
# |
## |
function toGreen() |
{ |
var oDiv=document.getElementById('div1'); |
|
oDiv.style.width='300px'; |
oDiv.style.height='300px'; |
oDiv.style.background='green'; |
} |
function toRed() |
{ |
var oDiv=document.getElementById('div1'); |
|
oDiv.style.width='200px'; |
oDiv.style.height='200px'; |
oDiv.style.background='red'; |
} |
id="div1" onmouseover="toGreen()" onmouseout="toRed()">
The above is the detailed content of Detailed explanation of the process of writing JS. For more information, please follow other related articles on the PHP Chinese website!
Related labels:
source:php.cn
Previous article:There are three inheritance methods between javascript objects
Next article:How does wireshark capture local data packets?
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
|