Home > Developer > JavaScript
Three ways to use 1.<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.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Pagefive</title></Head><Bodystyle= "Text-align:center;"> <Divstyle= "border:1px dashed lightsalmon;width:410px;margin:0 Auto"> <h4>Show Current Time</h4> <PID= "Demo"></P> </Div> <P></P> <Script>document.write ("hello!") document.getElementById ("Demo"). InnerHTML=Date (); </Script> <P></P> <Buttontype= "button"onclick=window.alert ("The user does not exist! ")>Login</Button></Body></HTML>
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"> <!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Landing page</title> <Linkrel= "stylesheet"type= "Text/css"href=".. /static/222.css "> <Script> functionMyLogin () {varOuname=document.getElementById ("name"); varOerror=document.getElementById ("Error_box"); varOpassword=document.getElementById ("Password"); if(OUname.value.length<6) {oerror.innerhtml="User name minimum of 6 characters" } if(OUname.value.length> -) {oerror.innerhtml="user name not exceeding 20 characters" } if(Opassword.value.length> -) {oerror.innerhtml= "password not exceeding 20 characters" } if(Opassword.value.length<6) {oerror.innerhtml= "password of at least 6 characters" } } </Script></Head><Body><Divclass= "One" > <Divclass= "Jar" ><H2>Login Page</H2></Div> <Divclass= "Input_box" >User name:<inputID= "Name"type= "text"placeholder= "Please enter user name"><BR>Password:<inputID= "Password"type= "Password"placeholder= "Please enter password"><BR> </Div> <DivID= "Error_box"><BR></Div> <Divclass= "Anniu" > <Buttononclick= "MyLogin ()">Login</Button> <Buttontype= "button"onclick=window.alert ("Do you want to cancel the login?" ")>Cancel</Button> </Div> <H2>Copyright</H2> </Div></Body></HTML>
div{ margin:0 Auto; Text-align:center;} h2{Text-align:center;margin-bottom:0;background-color:pink;}. one{ width:500px; height:200px; border-width:1px; margin-top:100px;} . input_box{ font-size:18px;}. anniu{ width:100px; height:30px;}JavaScript Basics, Login front-end verification
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
