Home > Developer > JavaScript
Originally invented by Netscape.
JavaScript is a scripting language that belongs to the network (weak type, interpreted type).
JavaScript can put dynamic text in an HTML page.
JavaScript responds to events that occur when a user is on a Web page.
JavaScript can validate the data entered by the user.
JavaScript can be used for elements in HTML pages: Add, delete, change, check!
JavaScript can be used to create COOKLIESSD.
1JavaScript: Writing HTML output
Instance
<! DOCTYPE html>JavaScript can be directly written to the HTML output stream:</p><script> document.write ("");d ocument.write ( " <p>this is a paragraph.</p> " ); </script><p><strong>document.write</strong>. If you use it after the document has been loaded (such as in a function), the entire document is overwritten. </p></body>You can only use <strong>document.write</strong> in the HTML output stream.
If you use it after the document has been loaded (such as in a function), the entire document is overwritten.2JavaScript: Responding to events
Instance<! DOCTYPE html>JavaScript can react to events. For example, click on the button:</p><button type="button" onclick="alert (' Welcome ! ') > click here </button></body>The alert () function is not commonly used in JavaScript, but it is very handy for code testing.
The onclick event is just one of the many events you will learn in this tutorial.
Alert () must use the ' number ', otherwise it won't work.3JavaScript: Change HTML content
Using JavaScript to work with HTML content is a powerful feature.
InstanceHtml><body>"Demo">JavaScript can change the content of HTML elements. </p><script>function MyFunction () {x=document.getelementbyid ("Demo");//Find ElementX.innerhtml="Hello javascript!";//Change Content}</script><button type="Button"onclick="myFunction ()"> Click here </button></body>document.getElementById ("some id") This method is defined in the HTML DOM, meaning: Get the element by an ID
InnerHTML accesses a specific element and changes its contents.
Note: The word must be spelled correctly! such as document.getElementById ("")4JavaScript: Change HTML image
This meeting dynamically changes the source of HTML <image> (SRC):function Changeimage () {a=document.getelementbyid ('MyImage'); if(A.src.match ("A1") ) {a.src="./b1.jpg"; } Else{a.src="./a1.jpg" } }</script>"MyImage"onclick="changeimage ()"Src="./a1.jpg"><p> Click on the image to change </p></body>Note: document.getElementById () must be preceded by a variable a!;
Src.match ("") means that the picture matches the meaning of the picture;
JavaScript can change most attributes of any HTML element, not just pictures.JavaScript: changing HTML styles
Changing the style of HTML elements is a variant of changing HTML attributes.Instance
"Text/javascript">function g () {J=document.getelementbyid ("jianding"); J.style.color="Red"; J.style.fontsize="20px"; } </script> <p id="jianding"> I will not change! </P> <input type="Button"onclick="g ()"Value="please give it a try"/> </body>Note: Please note that the fontsize of the camel, if not uppercase will not appear effect!
Style "definition. style. The attribute you want to change"
JavaScript: Validating input
JavaScript is often used to validate user input.
Instance"Text/javascript">function dot () {varX=document.getelementbyid ("Test"). Value; if(x==""||IsNaN (x)) {Alert ("Not a number"); } Else{alert ("Success"); } }</script><p> please see below </p><input type="text"Id="Test"/><input type="Button"onclick="dot ()"Value="Please click"/></body>Note: In this example, the id=test must be followed by. value in order to correctly pass in the value entered so as to judge!
IsNaN (x) means: (x) is not a number;
"" means: Empty
The gap between the input box and the confirmation bar can be eliminated by two methods 1. Please add "fontsize=0" to the style of the box that wraps the two tabs, but be careful to include the font size in the two box styles. 2. Write the two labels on the same line!Warning
Please use document.write () to write only to the document output.
If document.write is executed after the document has finished loading, the entire HTML page will be overwritten:
Instancefunction A () { document.write (" it's finished! "); } </script>"button" onclick=" A ()" value=" do not point "/>Note: Depending on the current test, the overwrite effect will be triggered regardless of where the button label or script is placed!
JavaScript statements
JavaScript code (or JavaScript only) is a sequence of javascript statements.
The browser executes each statement in the order in which it is written.
This example will manipulate two HTML elements:function Way1 () {document.getElementById ("H2"). innerhtml="not a problem ."} function Way2 () {document.getElementById ("P1"). innerhtml="not a paragraph" } </SCRIPT></HEAD><BODY><H1 id="H2"> Topics "P1"> Paragraph </p><input type="Button"onclick="way2 ()"Value="here we go."/><input type="Button"onclick="way1 ()"Value="after point here"/></body>declaring (creating) JavaScript variables
Creating a variable in JavaScript is often referred to as a "declaration" variable.
Instance:function Test () {varA=document.getelementbyid ("P1"). innerhtml="It's impossible! "; varb=1, c=2 ; Alert (b+c)}</script>"Button"onclick="Test ()"Value="Try"/> <p id="P1"> Not changed </p></body>Note: You can declare multiple variables in one statement, which starts with Var and is separated by commas.
Variable B+c If you use "" in alert, the package becomes a text display b+c!JavaScript arithmetic
Instance:function sum () {varA=1; varb=a+1; varC=document.getelementbyid ("P1"); C.innerhtml="b="+C; } </script>"P1"></p><input type="Button"onclick="sum ()"Value="Click to try"/></body>Note After testing "b=" +b in the + number can not be less, or will error!
JavaScript Data types
Raw data type: Undefine, Null, Boolean, number, String
Judgment statement: tpyof
Instance
varA=1; varb; varC="Henry"; document.write (typeofA +"<br/>"); document.write (typeofB +"<br/>"); document.write (typeofc+"<br/>");
document.write (b==undeifned);
document.write (null== undefined);</script></body>Note: The var x== data type, which can be taken to test the data type, whose return value is true or False.
A judgment statement can only be used on a variable that has already been defined, or it will cause an error!
Declaring variable types
When you declare a new variable, you can use the keyword "new" to declare its type:Instance
varCarname=NewString;varCarname="Volvo";varx=NewNumber ;varx=123;vary=NewBoolean;vary=true;varcars=NewArray;varcars=NewArray (1,"Good",3); document.write (Carname+"<br/>"); document.write (x+"<br/>"); document.write (y+"<br/>"); document.write (Cars+"<br/>");</script></body>JavaScript Primary Knowledge
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
