- Three ways to use <script></script>:
- Put in the <body>
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Javascripttest</title></Head><Body><Scripttype= "Text/javascript">Alert ("JavaScript code placed in the body")</Script></Body></HTML>
- Put in the <!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Javascripttest</title> <Scripttype= "Text/javascript">Alert ("JavaScript code placed in the head")</Script></Head><Body></Body></HTML>
- Placed in an external JS file
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Javascripttest</title> <Scriptsrc=".. /static/js/javascript.js "></Script></Head><Body></Body></HTML>
Alert ("JavaScript code placed in JS file")
- Three ways to output data:
- The
- uses the document.write () method to write the contents to an HTML document.
< body > < script > document.write (Date ()) </ script > </ body >
- The
- uses the Window.alert () pop-up warning box.
< body > < h3 > Javascripttest pop-up warning box </ h3 > < button Span style= "COLOR: #ff0000" >type = "button" onclick =window.alert ("Your Information error") > login </ button > </ body >
- 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.
<PID= "Test">Ppp</P><Script>document.getElementById ("Test"). InnerHTML="HELLO"</Script>
- 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/10.24.css "> <Scriptsrc=".. /static/js/10.24.js "></Script></Head><Body><Divclass= "box"> <DivID= "title">LoginText</Div> <H3>Login</H3> <Divclass= "Input-box">Account Number:<inputID= "Uname"type= "text"placeholder= "Please enter user name"> </Div> <Divclass= "Input-box">Password:<inputID= "UPass"type= "Password"placeholder= "Please enter password"> </Div> <DivID= "Error-box"><BR></Div> <Divclass= "Input-box"> <Buttononclick= "Fnlogin ()">Login</Button> <ahref="">Register/resister</a> </Div></Div></Body></HTML>
function Fnlogin () {var ouname = document.getElementById ("uname"); var oerror = document.getElementById ("Error-box"); var oupass = document.getElementById ("UPass"); var isoerror = true; oerror.innerhtml = "<BR>"; if (OUname.value.length<6|| OUname.value.length>20) {oerror.innerhtml= "user name to 6-20-bit"; Isoerror = false; Return } if (OUpass.value.length<6|| OUpass.value.length>20) {oerror.innerhtml= "password at least 6-20 digits"; Isoerror = false; Return } }
JavaScript Basics, Login verification