- Three ways to use <script></script>:
- Put in the <body>
- Put in the
- Placed in an external JS file
- 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 login page prepares:
- Add an Error prompt box.
- Write a good html+css file.
- Set the ID of each INPUT element
- Defines a JavaScript function.
- Verify user name 6-20-bit
- Verify password 6-20-bit
- The onclick invokes this function
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Login</title> <Linkrel= "stylesheet"type= "Text/css"href= "/static/css/cc.css"> <Script> functionFologin () {varOuname=document.getElementById ("uname"); varOerror=document.getElementById ("Error_box"); varOupass=document.getElementById ("UPass"); varIsoerror= true; Oerror.innerhtml= "<br>"; if(OUname.value.length< 6 ||OUname.value.length> -) {oerror.innerhtml= "User name 6-20-bit"; Isoerror= false; return; } if(OUpass.value.length< 6 ||OUpass.value.length> -) {oerror.innerhtml= "password to 6-20-bit"; Isoerror= false; return; } } </Script></Head><Body><Div><H2>Login</H2></Div><Divclass= "box"> <Divclass= "Input_box"> <inputID= "Uname"type= "text"placeholder= "Please enter user name"> </Div> <Divclass= "Input_box"> <inputID= "UPass"type= "Password"placeholder= "Please enter password"> </Div> <DivID= "Error_box"><BR></Div> <Divclass= "Input_box"> <Buttononclick= "Fologin ()">Login</Button> </Div></Div></Body></HTML>
h2 { align:center; padding-right:0; padding-left:0; Font-weight:bold; font-size:15px; padding-bottom:15px; margin:0; Color:blue; padding-top:0;} Div.box { padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; padding-bottom:40px; Color:black; padding-top:40px; Font-family:verdana, Arial, Helvetica, Sans-serif;} div.input_box{ Align:center; margin:550px; padding-left:550px; Color:cornflowerblue; } div.box{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; padding-bottom:40px; Color:cornflowerblue; padding-top:40px; Font-family:verdana,arial,helvetica,sans-serif; }
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Jsdemo</title></Head><Body><PID= "Demo">Ddd</P><Script>document.getElementById ("Demo"). InnerHTML=Date ();</Script><Script>document.write (Date ());</Script><Buttontype= "button"onclick=windows.alert ("number")>Press</Button></Body></HTML>
JavaScript Basics, Login verification