11.28JavaScript Learning

JavaScript output
JavaScript is typically used to manipulate HTML elements, and if you want to access an HTML element, use the document.getElementById (ID) method to identify the HTML element using the id attribute

Document output
document.write ("<p>hello<p>"): writes <p> elements directly into the HTML document output

A JavaScript statement is a command that is sent to the browser to tell the browser what to do
JavaScript code is a sequence of javascript statements, and the browser executes each statement in the order in which it was written
When there is no event function, you need to put the ID in front of the script, or you will get an error
<p id= "MyPoint" >content</p>
<script>
document.getElementById ("MyPoint"). Innerhtml=date ()
</script>

JavaScript code block
JavaScript can be combined in batches, code blocks are denoted by {}, and code blocks are executed in conjunction with a sequence of statements
function MyFunction ()
{
document.getElementById ("Demo"). innerhtml= "Hello Dolly";
document.getElementById ("Mydiv"). Innerhtml= "How have you been?";
}

JavaScript is a scripting language, and the browser executes the script code line by row while reading the code; For traditional programming, all code is compiled before execution

JavaScript uses//makes single-line comments; Use/xx/Multiline comments

A variable is a container for storing information
Everything in JavaScript is an object: A string, a number, an array, a date, and so on, and the object is the data that owns the property and method

JavaScript functions, event-driven, repeatable code
function function_name ()
{
code block
}
This function is called directly when an event occurs, and can be called from anywhere in JavaScript
JavaScript is case sensitive. The keyword function must be lowercase and must be called with the same casing as the function name.

Call a function with parameters that you can pass a value to
function function_name (var1, VAR2)
{
code block
}

A function with a return value, hoping to return the function return value to the place where he was called, can be achieved through a return statement, the return statement will be returned directly
function function_name ()
{
var a=5;
return A;
}
var B = function_name ();
You can use the return value even if you don't save it as a variable

Local JavaScript variable: A variable declared inside a function that is deleted after the function is run
Global JavaScript variables: variables declared outside the function, all scripts and functions on the Web page can access it, and the Web page is deleted after it is closed
If you assign a value to a variable that has not been declared, the variable is automatically declared as a global variable: carname = "Deng"

HTML DOM Document Object model
When a Web page is loaded, the browser creates a Document object model of the page
Dom model is constructed as an object tree
With the programmable object model, JS gets enough ability to create dynamic HTML
1) Change the elements in the HTML
2) Change the HTML properties
3) Change the style of CSS
4) Respond to all time in the page

Find HTML elements: to manipulate HTML elements, you must find the element
1) Find the element by ID
2) find the element by tag
3) Find the element through the class name

The simplest way to find an HTML element is to find the element by ID
var a = document.getElementById (ID)
If the element is found, the method returns the element as an object
If not found, returns null

Find HTML elements by tag name
var x = document.getElementById (' main ')
var y = x.getelementsbytagname (' P ')
First find the elements of id= ' main ', and then find all the <p> elements in main

Dom changes the contents of HTML
document.write () output stream is written to the document
The simplest way to modify HTML content is to use the innerHTML property
document.getElementById (ID). innerhtml= new HTML

Changing the properties of HTML
document.getElementById (id). Attribute = new value

<script>
document.getElementById (' a '). src= ' Xxx.jpg '
</script>

Change the style of HTML: document.getElementById ("Demo"). style.color= "Blue";

JavaScript HTML DOM event: responding to HTML events
Execute JavaScript code When something happens, such as when a user clicks on an HTML element
If the user executes code while clicking on an element, add JavaScript code to an HTML attribute
Onclick=javascript
Examples of HTML events
1. When the user clicks the mouse
2. When the Web page has been loaded
3. When the image is loaded
4. When the mouse moves over the element
5. When the input field is changed
6. When submitting an HTML form
7. When the button is triggered

<H1 onclick= "this.innerhtml= ' haha! '" >the First JavaScript sampleWhen the mouse clicks on the element, the text content changes
Assigning an onclick event to an element

OnLoad and OnUnload events: triggered on user entry or exit page, can be used to process cookies
The OnLoad event allows the user to detect the browser type and browser version of the visitor and load the correct version of the browser based on that information

Determines whether browser cookies are available when the browser is loaded
<body onload= "Checkcookie ()" >
</body>

OnChange event: Often combined with validation of input fields, occurs when the contents of a domain change
<input name= "Input_name" type= "text" onchange= "Uperrcase ()" ><br>

onmouseover and onmouseout Events
Used to trigger a function when a user moves the mouse over an HTML element or moves out of an element
div.red_block{
Background-color:aquamarine;
width:100px;
height:80px;
Text-align:center;
margin:2px;
padding:2px;
Align-content:center;
}

<div class= "Red_block" onmouseover= "Myover (This)" onmouseout= "Myout" >please Click me!</div>

function Myover (obj) {
Obj.innerhtml= "I am very happy!"
}
function Myout (obj) {
Obj.innerhtml= "You leave, I am very sad ..."
}

OnMouseDown and onmouseup and click events make up all parts of the mouse click
Click the mouse to trigger the onmousedown event
Trigger OnMouseUp event when Mouse is released
Trigger onclick event When mouse click is complete
img.mypic{
margin:2px;
padding:2px;
width:100px;
height:80px;
}

function Mydown () {
document.getElementById ("Myimg"). style.opacity=0.4;
}
function Myup () {
document.getElementById ("Myimg"). Style.opacity=1;
}

onfocus Get field Focus
<input name= "Input_name" id= "Myinputid" type= "text" onchange= "Uperrcase ()" onfocus= "Myfocus ()" >
function Myfocus () {
document.forms["MyForm" ["Input_name"].style.background= "green";
}

HTML DOM Elements
Create a new HTML element: Add an element to the HTML DOM, you must create the element called the element node, and then append the element to an already existing element
<div id= "Div1" >
<p id= "P1" >
This is Paragram 1
</p>
<p id= "P2" >
This is Paragram 2
</p>
</div>
Create a new P3 element
var para = document.createelement ("p3")
To add text to the P element, first create a text node
var node = document.createTextNode ("This is Paragram 3")
Append the text node to the P element
Para.appendchild (node)
Find an existing element
var element = document.getElementById ("Div1")
Append a new element to an existing element
Element.appendchild (para)

Delete HTML elements
var element1= document.getelementbyid (' P1 ')
var element2= document.getelementbyid (' P2 ')
Element1.removechild (Element2)

If you can delete an element without referencing the parent element, it's great.
Common workaround: Find the child element that needs to be deleted, and then use its ParentNode property to find the parent element
var child = document.getElementById (' p1 ')
Child.parentNode.removeChild (Child)

11.28JavaScript Learning