<!DOCTYPE html> <!-- This is an HTML comment --> <html lang="en" id="myHtml"> <head> <!-- This does not set the encoding, but tells the browser what encoding method to use to open the file to avoid garbled characters --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HtmlAll</title> <style type="text/css"> #div1{ background-color: aquamarine; width: 300px; height: 300px; border: 1px solid black; position: relative; top: 100px; left: 100px; } </style> </head> <body> <script type="text/javascript" src="j.js"></script> <table align="center"> <form id="myForm"> <tr><td>Login window</td></tr> <tr> <td> <input type="text" id="username"/> </td> </tr> <tr> <td> <input type="password" id="password"/> </td> </tr> <tr> <td> <input type="submit" value="Login"/> </td> </tr> </form> </table> <!-- The syntax of void operator is to execute the operator but not return any result --> <!-- Let our href path disappear, just use void without returning --> <!-- javascript:void(0) Our javascript is used to prompt the browser. This is a piece of JS code, which cannot be omitted --> <a href="javascript:void(0)" onclick="alert('test')">The execution page does not jump</a> <input type="button" onclick="vars()" value="123" /> <input type="button" id="auto" value="auto" /> <input type="button" id="tyo" value="tyo" /> <input type="button" value="Set the content of div" id="btnm"/> <!-- Regular expression, mainly used in string format matching --> <!-- Regular expressions are an independent subject, supported in JAVA language, C and JS too --> <!-- How to call methods on new objects --> <!-- . Matches any character except newline \w matches letters or numbers or underscores or Chinese characters \s matches any whitespace character \dmatches numbers \b matches the beginning or end of a word ^ matches the beginning of a string $matches the end of the string *Repeat zero or more times + Repeat one or more times ?Repeat zero or once {n}repeat n times {n,} repeated n or more times {n,m} is repeated n to m times --> <!-- \W matches anything that is not a letter or number or underscore or Chinese character \S matches anything that is not a whitespace character \D matches anything that is not a digit \B matches anything that is not the beginning or end of a word [^x] matches anything except x [^aeiou] matches any character except aeiou --> <!-- Regular expression parentheses have higher priority --> <script type="text/javascript"> // var regExp = /regular expression/flags; // var regExp = new RegExp("regular expression"); window.onload = function() { functionCheck() { var input = document.getElementById("email").value; var inputEmp = /^[A-Za-z0-9] + ([-._][A-Za-z0-9] + )*@[A-Za-z0-9] + (-[A-Za -z0-9] + )*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2, 3})$/; var boolean = inputEmp.test(input); if(!boolean) { \t\t\t\t\t\t//illegal document.getElementById("emailError").innerText = "Illegal email address"; } else { //Legal document.getElementById("emailError").innerText = "Email address is legal"; } } document.getElementById("btn").onclick = Check; document.getElementById("email").onfocus = function() { document.getElementById("emailError").innerText = ""; } document.getElementById("email").onkeydown = function(event) { if(event.keyCode === 13) { Check(); } } } </script> <!-- QQ number regular expression^[1-9][0-9]{4,}$ [1-9] indicates that the numbers one to nine appear once --> <!-- [A-Za-z0-9] means any character appears once --> <!-- [A-Za-z0-9- + ] represents any of the above characters --> <!-- The preceding - represents the interval, and when it appears alone, it represents the minus sign --> <div id="div1"> <input type="text" id="email"> <span id="emailError" style="color: red; font-size: 12px;"></span> \t\t\t<br> <input type="button" value="Verification Email" id="btn"/> </div> </body> </html>
HtmlAll
The execution page does not jump
window.onload = function() { document.getElementById("btnm").onclick = function() { //Set the content of the div var divElt = document.getElementById("div1"); //innerHtml and innerText are not codes, but attributes. The principle is the same as when we set the value of text. //innerHtml will treat the following string as html code and innerText as a string divElt.innerHTML = "<font color='red'>hahahahahahahahahaha</font>"; divElt.innerText = "<font color='red'>hahahahahahahahaha</font>"; } document.getElementById("password").onkeydown = function(event,b)//local variable { //Get key value //The key value of the Enter key is 13, and the ESC key value is 27 //For keyboard events, they all have the keyCode attribute to obtain the key value. if(event.keyCode === 13) { //Recognize the Enter key and prompt that you are logging in alert("Login") } } \t document.getElementById("myForm").onsubmit = function() { alert("Login") } \t document.getElementById("auto").onclick = function() { var ui = [false,true,1,2,"abc",3.14]; for(var i = 0; i < ui.length; i + + ) { alert(ui[i]); } for(var i in ui) { //This var i is not an element of the array, but the subscript of the array alert(i);//Display the index that is all subscripted alert(ui[i]); } } document.getElementById("tyo").onclick = function() { User = function(username,password) { this.username = username; this.password = password; } var u = new User("Zhang San","12345"); alert(u["username"] + "," + u["password"]); //This is the index when used on an array. When used on an object, it is the attribute name of the object and returns a string. for(var value in u) { //The attribute name is a string alert(value); //It is a string itself, just put it in directly alert(u[value]); } with(u) { //This method is only for understanding. Do not use it as much as possible. What you see is not what you get. alert(username + "," + password); } } } function vars() { alert("1"); }window.onload = function()
{
document.getElementById(“btnm”).onclick = function()
{
//Set the content of the div
var divElt = document.getElementById(“div1”);
//innerHtml and innerText are not codes, but attributes. The principle is the same as the value we set for text.
//innerHtml will treat the following string as html code and innerText as a string
divElt.innerHTML = “hahahahahahahahahaha“;
divElt.innerText = “hahahahahahahahaha“;
}
document.getElementById(“password”).onkeydown = function(event,b)//local variable
{
//Get key value
//The key value of the Enter key is 13, and the ESC key value is 27
//For keyboard events, they all have the keyCode attribute to obtain the key value.
if(event.keyCode === 13)
{
//Recognize the Enter key and prompt that you are logging in
alert(“Login”)
}
}document.getElementById(“myForm”).onsubmit = function()
{
alert(“Login”)
}document.getElementById(“auto”).onclick = function()
{
var ui = [false,true,1,2,”abc”,3.14];
for(var i = 0; i < ui.length; i + + )
{
alert(ui[i]);
}
for(var i in ui)
{
//This var i is not an element of the array, but the subscript of the array
alert(i);//Display the index that is all subscripted
alert(ui[i]);
}
}
document.getElementById(“tyo”).onclick = function()
{
User = function(username,password)
{
this.username = username;
this.password = password;
}
var u = new User(“Zhang San”,”12345″);
alert(u[“username”] + “,” + u[“password”]);
//This is the index when used on an array. When used on an object, it is the attribute name of the object. It returns a string.
for(var value in u)
{
//The attribute name is a string
alert(value);
//It is a string itself, just put it in directly
alert(u[value]);
}
with(u)
{
//This method is only for understanding. Do not use it as much as possible. What you see is not what you get.
alert(username + “,” + password);
}
}
}function vars()
{
alert(“1”);
}