Lassen Sie uns zunächst über die Platzierung von JavaScript sprechen: <script> und </script> oder im Körper oder im Kopf Sechs Hauptfunktionen von JavaScript:
1 Direkte Ausgabe im Skript
1 | document.write( "<h1>This is a heading</h1>" );
|
Nach dem Login kopieren
2 Auf Ereignisse reagieren
1 | <button type= "button" onclick= "alert('Welcome!')" >
|
Nach dem Login kopieren
3 HTML-Inhalt ändern 🎜>
1 2 | x=document.getElementById( "demo" )
x.innerHTML= "Hello JavaScript" ;
|
Nach dem Login kopieren
4 HTML-Bild ändern
1 2 | element=document.getElementById('myimage')
element.src= "/i/eg_bulboff.gif" ;
|
Nach dem Login kopieren
5 HTML-Stil ändern
1 2 | x=document.getElementById( "demo" )
x.style.color= "#ff0000" ;
|
Nach dem Login kopieren
6 Eingabe überprüfen
1 | If( isNaN(x)) {alert( "Not Numeric" )};
|
Nach dem Login kopieren
Drei häufig verwendete Methoden zum Suchen von Elementen in JavaScript (ausgenommen JQuery zum Suchen von Elementen)
1: Suchen nach ID;
1 | x=document.getElementById( "demo" )
|
Nach dem Login kopieren
2: Suche nach Namen:
1 2 | X= document.getElementsByName( "myInput" );
X[0].innerHTML= "Hello JavaScript" ;
|
Nach dem Login kopieren
3: Suche nach Elementnamen:
1 2 3 | var x=document.getElementsByTagName( "input" );
alert(x.length);
JavaScript的注释和java是一样的有
|
Nach dem Login kopieren
JavaScript-Variablen
JavaScript-Daten umfassen Zeichenfolgen, Zahlen, Boolesche Werte, Arrays, Objekte, Null und Undefiniert, verwenden jedoch einheitlich var
1 2 3 | var cars= new Array(); cars[0]= "Audi" ;
var cars=[ "Audi" , "BMW" , "Volvo" ];
person= new Object();
|
Nach dem Login kopieren
JavaScript-Funktion
1 | function getElements(){ }
|
Nach dem Login kopieren
JavaScript-Operator, arithmetischer Operator, Zuweisungsoperator, Vergleichsoperator, logischer Operator, bedingter Operator, IF-Anweisung, Switch-Anweisung, For-Schleife, while do-while, Break und Continue sind die gleichen wie Java-Regeln (der einzige Unterschied besteht für (x in person))
Als nächstes werden wir ein paar kleine Fälle behandeln:
1: Da ist die Überprüfung des Kontonamens, beurteilen Sie, ob die beiden Passwörter konsistent sind
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <%@ page language= "java" import= "java.util.*" pageEncoding= "UTF-8" %>
<!DOCTYPE HTML >
<html>
<head>
<title>雨点的名字</title>
</head>
<script>
function checkForm(){
var form=document.forms[ "form1" ];
var username =form.username.value;
if (username.length<3 || username.length>12){
alert( "输入的用户名不合法..." );
return false;
}
var password1 =form.password[0].value;
var password2=document.getElementsByName( "password" )[1].value;
if (password1!=password2){
alert( "两次密码不一致.." );
return false();
}
return true;
}
</script>
<body>
<!--onsubmit只在form中使用,如果返回为false则不提交数据,否则提交数据-->
<form action= "" name= "form1" onsubmit= "checkForm()" >
用 户 名:<input type= "text" name= "username" /><br><br>
密 码:<input type= "password" name= "password" /><br><br>
确认密码:<input type= "password" name= "password" /><br><br>
<input type= "submit" value= "提交" /> <!-- 这里定义了为submit类型,当点提交时,自动触发onsubmit方法 -->
</form>
</body>
</html>
|
Nach dem Login kopieren
Die laufenden Ergebnisse lauten wie folgt:
2: Implementierung Ein kleiner Additionsrechner 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <%@ page language= "java" import= "java.util.*" pageEncoding= "UTF-8" %>
<!DOCTYPE HTML >
<html>
<head>
<title>雨点的名字</title>
<style type= "text/css" >
input{
width:50px;
}
</style>
</head>
<script>
function calc(){
var form1 =document.forms[ "form1" ];
var x=form1[ "x" ].value;
var y=form1[ "y" ].value;
var z=parseInt(x)+parseInt(y);
var result=form1[ "result" ];
result.value=z;
}
</script>
<body>
<form action= " " name= "form1" method= "post" >
<input type= "text" name= "x" />+<input type= "text" name= "y" />=<input type= "text" name= "result" /><br/>
<input type= "button" value= "计算" onclick= "calc()" /> <!-- onclick监听事件改编属性 -->
</form>
</body>
|
Nach dem Login kopieren
Die Ergebnisse sind wie folgt:
Das Obige ist die Zusammenfassung dieses Artikels. Alle Inhalte. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann, und ich hoffe auch, die chinesische PHP-Website zu unterstützen! 
Weitere Artikel zu den Grundlagen von JavaScript finden Sie auf der chinesischen PHP-Website!