Explication détaillée des bases de JavaScript-js tutoriel-php.cn

Explication détaillée des bases de JavaScript

高洛峰

Libérer： 2017-01-21 09:12:53

original

1296 Les gens l'ont consulté

Tout d'abord, parlons du placement de JavaScript : <script> et </script> peuvent être placés entre la tête et le corps, ou dans le corps ou dans la tête

Le six fonctions majeures de JavaScript :

1 Sortie directe dans le script

document.write("<h1>This is a heading</h1>");//document.write表输出，括号中h1标签同样有效

Copier après la connexion

2 Réagir aux événements

<button type="button" onclick="alert(&#39;Welcome!&#39;)"> //点击这里</button>//onclick代表当点击是触发事件，alert会弹框

Copier après la connexion

3 Changer le contenu HTML 🎜>

x=document.getElementById("demo") //查找元素 ，通过id得到某一个元素，就像我之前做的笔记说id只能用一次所以是唯一的。
x.innerHTML="Hello JavaScript"; //改变内容，通过触发事件会是这个元素的值发生改变

Copier après la connexion

4 Changer l'image HTML

element=document.getElementById(&#39;myimage&#39;) //得到img这个元素
element.src="/i/eg_bulboff.gif";   //改变Src属性，也就相当于给它换了张图片

Copier après la connexion

5 Changer le style HTML

x=document.getElementById("demo") //同样通过id找到元素
x.style.color="#ff0000";   //改变样式

Copier après la connexion

6 Vérifier la saisie

If( isNaN(x)) {alert("Not Numeric")}; // isNaN( ) 这是一个方法，专门用来判断括号中是否全为数字，是为true

Copier après la connexion

Trois méthodes couramment utilisées pour rechercher des éléments en JavaScript (à l'exclusion de jquery pour rechercher des éléments)

1 : Rechercher par identifiant;

x=document.getElementById("demo") //通过id查询是唯一的，x也是代表唯一一个元素。

Copier après la connexion

2 : Recherche par nom :

X= document.getElementsByName("myInput");//这里是ments说明他返回的是一个集合，因为name属性可以重复定义
X[0].innerHTML="Hello JavaScript";//因为是数组，所以要指定第几个，就算只有一个也要写零

Copier après la connexion

3 : Recherche par nom d'élément :

var x=document.getElementsByTagName("input"); //同样也是返回一个数组
alert(x.length); //这里有几个input标签就输出几
JavaScript的注释和java是一样的有//和/* */

Copier après la connexion

Variables JavaScript

Les données JavaScript incluent des chaînes, des nombres, des booléens, des tableaux, des objets, Null et Undefined, mais utilisent uniformément var

var cars=new Array(); cars[0]="Audi"; //数组表达式
var cars=["Audi","BMW","Volvo"]; //同样也是数组表达式
person=new Object(); //对象表达式

Copier après la connexion

Fonction JavaScript

function getElements(){  } //可以带参数那就往里面传参（var1,var2），如果要返回值return，函数类型不变

Copier après la connexion

Opérateur JavaScript, opérateur arithmétique, opérateur d'affectation, opérateur de comparaison, opérateur logique, opérateur conditionnel, instruction IF, instruction Switch, boucle For, tandis que do-while, Break et Continue sont les mêmes que les règles Java (la seule différence est pour (x en personne))

Ensuite, nous ferons quelques petits cas :

1 : Là est la vérification du nom du compte , jugez si les deux mots de passe sont cohérents

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML >
<html>
 <head>
 <title>雨点的名字</title>
 </head>
 <script>
 function checkForm(){
 var form=document.forms["form1"]; //根据表单的名字 获取指定的表单，这算第四种获得元素方法
 //根据表单获得username的value值，因为下面这个username只有一个那就默认就取这一个，不用form.username[0].value这样反而报错，因为不是集合
 var username =form.username.value;
 if(username.length<3 || username.length>12){
  alert("输入的用户名不合法..."); //.length是属性所以不能括号，这和String不同
  return false;
 }
 var password1 =form.password[0].value;//因为password下面有两个所以是一个集合所以要[0]；
 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>

Copier après la connexion

Les résultats en cours sont les suivants :

Explication détaillée des bases de JavaScript

2 : Implémentation Un petit calculateur d'addition

<%@ 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; //获取form1表单中name属性为x的值,又一种方法（其实[]和.是有点不同的这里不细讲）
  var y=form1["y"].value;
  var z=parseInt(x)+parseInt(y); //parseInt(x)类型转换，把String转成int
  var result=form1["result"]; //得到元素
  result.value=z; //value这里插入value值，不是用innerHTML，他们的使用类型不同
 }
 </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>

Copier après la connexion

Les résultats sont les suivants :

Explication détaillée des bases de JavaScript

Ce qui précède est le résumé de cet article. Tout le contenu, j'espère que le contenu de cet article pourra apporter de l'aide aux études ou au travail de chacun, et j'espère également soutenir le site Web PHP chinois !

Pour plus d'articles liés aux bases de javaScript, veuillez faire attention au site Web PHP chinois !