Home >Backend Development >PHP Tutorial >Compilation of basic usage methods of combining JavaScript and HTML, how to use javascript_PHP tutorial
Compilation of basic usage methods of combining JavaScript and HTML, how to use javascript_PHP tutorial
- WBOYOriginal
- 2016-07-12 09:07:331337browse
Compilation of basic usage methods of combining JavaScript and HTML, how to use javascript
JavaScript: write HTML output
Example
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
Tip: You can only use document.write with HTML output. If you use this method after the document is loaded, the entire document will be overwritten.
JavaScript: react to events
Example
<button type="button" onclick="alert('Welcome!')">点击这里</button>
The alert() function is not commonly used in JavaScript, but it is very convenient for code testing.
The onclick event is just one of many events you'll learn about in this tutorial.
JavaScript: Change HTML content
Using JavaScript to process HTML content is extremely powerful.
Example
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
You will often see document.getElementByID("some id"). This method is defined in the HTML DOM.
DOM (Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript: Change HTML style
Changing the style of HTML elements is a variant of changing HTML attributes.
Example
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
JavaScript: Validate input
JavaScript is often used to validate user input.
Example
if isNaN(x) {alert("Not Numeric")};
Scripts in HTML must be placed between the 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0 tags.
Scripts can be placed in the 6c04bd5ca3fcae76e30b72ad730ca86d and 93f0f5c25f18dab9d176bd4f6de5d30e sections of the HTML page.
3f1c4e4b6b16bbbd69b2ee476dc4f83a tag
To insert JavaScript into an HTML page, use the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag.
3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0 tell JavaScript where to start and end.
The line between 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0 contains JavaScript:
<script>
alert("My First JavaScript");
</script>
You don't need to understand the code above. Just understand that browsers interpret and execute the JavaScript between 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0.
Older instances may use type="text/javascript" in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. This is no longer necessary. JavaScript is the default scripting language in all modern browsers as well as in HTML5.
JavaScript
in 6c04bd5ca3fcae76e30b72ad730ca86d
In this example, JavaScript writes text to the HTML's 6c04bd5ca3fcae76e30b72ad730ca86d when the page loads:
Example
. . <script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); </script> . .
JavaScript functions and events
The JavaScript statement in the above example will be executed when the page loads.
Often, we need to execute code when an event occurs, such as when the user clicks a button.
If we put the JavaScript code into a function, we can call the function when the event occurs.
You'll learn more about JavaScript functions and events in later chapters.
JavaScript in
93f0f5c25f18dab9d176bd4f6de5d30e or 6c04bd5ca3fcae76e30b72ad730ca86d
You can place an unlimited number of scripts in your HTML document.
The script can be in the 6c04bd5ca3fcae76e30b72ad730ca86d or 93f0f5c25f18dab9d176bd4f6de5d30e section of the HTML, or both.
A common practice is to put functions in the 93f0f5c25f18dab9d176bd4f6de5d30e section, or at the bottom of the page. This way they can be placed in the same location without interfering with the content of the page.
JavaScript functions in 93f0f5c25f18dab9d176bd4f6de5d30e
In this example, we place a JavaScript function into the 93f0f5c25f18dab9d176bd4f6de5d30e section of the HTML page.
This function will be called when the button is clicked:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript function in
6c04bd5ca3fcae76e30b72ad730ca86d
In this example, we place a JavaScript function into the 6c04bd5ca3fcae76e30b72ad730ca86d section of the HTML page.
This function will be called when the button is clicked:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
Tip: We put the JavaScript at the bottom of the page code to ensure that the script is executed after the e388a4556c0f65e1904146cc1a846bee element is created.
External JavaScript
Scripts can also be saved to external files. External files often contain code used by multiple web pages.
The file extension for external JavaScript files is .js.
To use an external file, set the .js file in the "src" attribute of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag:
Example
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>
It is okay to reference script files in 93f0f5c25f18dab9d176bd4f6de5d30e or 6c04bd5ca3fcae76e30b72ad730ca86d. It works exactly as if you wrote the script in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag.
Tip: External scripts cannot contain 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags.