How to combine JavaScript with HTML _ PHP

Source: Internet
Author: User
This article mainly introduces how to combine JavaScript with HTML. it is the basic knowledge of JavaScript beginners. For more information, see JavaScript: write HTML output
Instance

document.write("This is a heading");document.write("

This is a paragraph

");

Tip: You can only use document. write in HTML output. If you use this method after the document is loaded, the entire document will be overwritten.
JavaScript: responds to events
Instance

Click here

Alert () functions are not commonly used in JavaScript, but they are very convenient for code testing.
Onclick events are only one of the many events you will learn in this tutorial.
JavaScript: modifying HTML content
Using JavaScript to process HTML content is very powerful.
Instance

X = document. getElementById ("demo") // search for the element x. innerHTML = "Hello JavaScript"; // change the content

You will often see document. getElementByID ("some id "). This method is defined in html dom.
DOM (Document Object Model) is a formal W3C standard used to access HTML elements.


JavaScript: change the HTML style
Modifying the style of HTML elements is a variant of modifying HTML attributes.
Instance

X = document. getElementById ("demo") // find the x. style. color = "# ff0000"; // change the style.

JavaScript: verify input
JavaScript is often used to verify user input.
Instance

if isNaN(x) {alert("Not Numeric")};

The script in HTML must be located between the script tag and the script tag.
Scripts that can be placed on HTML pagesAnd.
Script tag
To insert JavaScript into the HTML page, use the script tag.
Script and script tell JavaScript where to start and end.
The code lines between script and script contain JavaScript:

《script》alert("My First JavaScript");《script》


You do not need to understand the above code. You only need to understand that the browser will interpret and execute JavaScript between script and script.
Old instances may use type = "text/javascript" in the script tag ". You don't have to do this now. JavaScript is the default scripting language in all modern browsers and HTML5.
In JavaScript
In this example, JavaScript loadsWrite text:
Instance

..《script》document.write("This is a heading");document.write("

This is a paragraph

");《script》..

JavaScript functions and events
The JavaScript statement in the preceding example is executed during page loading.
Generally, we need to execute code when an event occurs, for example, when a user clicks a button.
If we put JavaScript code into a function, we can call this function when an event occurs.
You will learn more about JavaScript functions and events later.
OrIn JavaScript
You can add an unlimited number of scripts in the HTML document.
Scripts can be located in HTMLOrOr both.
The common practice is to put the functionOr at the bottom of the page. In this way, you can place them in the same location without interfering with the page content.
JavaScript functions in
In this example, we place a JavaScript function in.
This function will be called when you click the button:
Instance

《script》function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}《script》My Web Page

A Paragraph

Try it

JavaScript functions in
In this example, we place a JavaScript function in.
This function will be called when you click the button:
Instance

My Web Page

A Paragraph

Try it《script》function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}《script》

Tip: We put JavaScript at the bottom of the page code to ensure that

The script is executed after the element is created.
External JavaScript
You can also save the script to an external file. An external file usually contains code used by multiple webpages.
The extension of an external JavaScript file is. js.
To use an external file, set the. js file in the "src" attribute of the script tag:
Instance

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.