1, <script></script> three ways to use:
Put in the <body>
Put in the
Placed in an external JS file
<! DOCTYPE html>"en">"UTF-8"> <title>javascpit2017.10.24</title> <script>function Displaydate () {document.getElementById ("Hello"). innerhtml=Date (); } </script>"Demo">dailier</p><script>document.write ("<p> Guangzhou Business School </p>"); document.getElementById ("Demo"). innerhtml=Date ();</script><button type="Button"Onclick=window.alert (" Number") > Login </button></body>function MyFunction () {Document.getelementbyld ("demo"). Innerhtml=" my first JavaScript function " ;}
2, three ways to output data:
Use the document.write () method to write content to an HTML document.
Use the Window.alert () pop-up warning box.
Writes to an HTML element using InnerHTML.
- Use the ID property to identify the HTML element.
- Use the document.getElementById (ID) method to access HTML elements.
- Use innerHTML to get or insert element content.
The code is as follows:
<! DOCTYPE html>"en">"UTF-8"> <title> my page </title>Document.wirte (Date ())</SCRIPT><H1 align="Center">2017 New Edition "Container"style="width:400px"> <div id="Header"style="background-color:indianred"><H2 align="Center"> Login "content"> <form>Username:<input type="text"Name="username"Placeholder="Please enter user name"><br>Password:<input type="Password"Name="pwd"Placeholder="Please enter your password"><br> <input type="Radio"Name="role"Value="Stu">Student<input type="Radio"Name="role"Value="Tea">teacher<br> <input type="checkbox"Name="Vehicle"Value="Remember me"> Remember me <br> <input type="Button"Value="Login"><br> <aclass="Link-forget Cl-link-blue"href="get_password.html"> Forgot password </a> <aclass="Link-forget Cl-link-blue"href="Index.php?type=login"> New User Registration </a> </form> </div> <div id="Footer"style="background-color:indianred"><p align="Center"><i> Copyright Pear </i></p></div> </div> <div> </div><script>Window.alert ("Are you sure you want to go to this site? ")</script><script>Document.wirte (Date ());</script><p id="Demo">dailier</p><script>document.getElementById ("Demo"). innerhtml=Date ();</script></body>The results are as follows:
3, the login page to prepare:
Add an Error prompt box.
Write a good html+css file.
Set the ID of each INPUT element
4. Define JavaScript functions.
Verify user name 6-20-bit
Verify password 6-20-bit
The code is as follows:
<! DOCTYPE html>"en">"UTF-8"> <title> Search Encyclopedia </title> <link rel="stylesheet"Type="Text/css"href=".. /static/css/20.css"> <script>function Fnlogin () {var ouname=document.getelementbyid ("uname") var oerror=document.getelementbyid ("Error_box") var opassward= document.getElementById ("UPass") if(Ouname.value.length<6 | | ouname.value.length>20) {oerror.innerhtml="User name 6-20-bit" } if(Oupass.value.length<6 | | oupass.value.length>20) {oerror.innerhtml="password 6-20 bit" } if((ouname.value.length<6 | | ouname.value.length>20) && (oupass.value.length<6 | | oUpass.value.length >20) ) {oerror.innerhtml="user name and password must be 6-20 bit! "} } </script>class="Box"> class="Input_box"> <input id="uname"Type="text"Placeholder="Please enter user name"style="width:300px"> </div> <br> <divclass="Input_box"> <input id="UPass"Type="Password"Placeholder="Please enter your password"style="width:300px"> </div> <br> <div id="Error_box"><br></div> <divclass="Input_box"> "Fnlogin ()">login</button>class="Link-forget Cl-link-blue"href="get_password.html"> Forgot password </a> <aclass="Link-forget Cl-link-blue"href="Index.php?type=login"> New User Registration </a> <br> <div><p align="Center"><i> Copyright @daili18</i></p></div></div>document.write ("College beauty: Little East Lake")</script>Window.alert ("Are you sure you want to enter? ")</script></body>Css:
body{ padding-right:500px; Margin-top:100px; Padding-left:500px; Font-size:16px; background:palevioletred; Padding-bottom:120px; Color:firebrick; Padding-top:40px; Font-family:verdana,arial,helvetica,sans-serif; } h3 { padding-left:120px;} h4{ padding-left:80px; Color:firebrick;} h5{ padding-left:120px;}
The results are as follows:
5, the onclick call this function.
The code is as follows:
<! DOCTYPE html>"en">"UTF-8"> <script>function Duang () {alert ('There's nothing you're looking for here.')}</script>"Input_box"Type="Button"Value="Is you really? "onclick="Duang ()"></body>The results are as follows:
JavaScript Basics, login verification (2017.10.24)