javaSript介绍

最新推荐文章于 2022-04-04 21:33:12 发布

AUTO_K

最新推荐文章于 2022-04-04 21:33:12 发布

阅读量594

点赞数 1

分类专栏：学习笔记总结文章标签： java tcp/ip javascript

学习笔记总结专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、概述

1.1 什么是JavaScript？

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译） JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易入门。

1.2 作用

1、为网页添加各式各样的动态功能。

2、为用户提供更流畅美观的浏览效果。

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.3JavaScript的用法

JavaScript通常简称为js,或者js脚本

HTML页面中的JavaScript

在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以，放在最后也可以，对位置要求不严格。

我们可以在 HTML 文档中放入不限数量的script标签，通常的做法是把内容统一放入head或者页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

PS:有些案例中可能会在 script 标签中出现type="text/javascript"。现在完全可以省略了，JavaScript已经是所有现代浏览器以及 HTML5 中的默认脚本语言。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript的用法</title>
    <script>
        alert("hello JavaScript1-1");
    </script>
    <script>
        alert("hello JavaScript1-2");
    </script>
</head>
<body>

</body>
</html>
    <script>
        alert("hello JavaScript2-1");
    </script>
    <script>
        alert("hello JavaScript2-2");
    </script>

外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。当我们使用外部文件时，在HTML页面的script 标签的 "src" 属性中设置该 .js 文件。

myScript.js文件 //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可
function fun1(){
alert("hello JavaScript");
}

外部文件引入一次即可，在head或者body中都可以，基本上都是放在head中。

<!DOCTYPE html>
<html>
<head>
    <script src="js/myScript.js"/>
</head>
<body>
    <script>
        fun1();//调用脚本中的内容s
    </script>
</body>
</html>

标签属性中的JavaScript

直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的偏少。

<a href="javascript:alert('ok')">登录</a>

1.4 JavaScript显示数据

1 使用window.alert()弹出框

PS：这里的window可以省略，等价于alert("hello world");

2 使用document.write()将内容写入到html文档

3 使用innerHTML写入到html元素

4 使用console.log写入到浏览器控制台

1.5JavaScript的注释

JavaScript注释与java的单行和多行注释相同。

单行注释以 // 开头。

多行注释以 /* 开始，以 */ 结尾。

2.JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。 JavaScript语法跟Java很相似，但是也有区别。JavaScript是弱语言类型，即有些时候有些错误不影响运行，但是依然推荐大家按照规范去编写代码，语言弱，程序员不能弱。

2.1 JavaScript变量

声明变量的关键字：var 语法：var 变量名称；

<script>
    var myCompany; //声明变量
    myCompany='开课吧'; //赋值
    var x=5;//声明的同时赋值
    var y=6;
    var z=x+y;//变量也可以存储表达式
</script>

变量的命名规则：

变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感（y 和 Y 是不同的变量）
不能使用关键字保留字

变量的命名规范：

见名知意。例如：breadPirce,userService等，避免无意义的a,b,c等
推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName

JavaScript的语句作用

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。

而对于传统编程来说，会在执行前对所有代码进行编译。

JavaScript中也有分支结构和循环结构，语法与java类似。

PS：一般一行只写一条语句，每句结尾编写分号结束。

2.2 JavaScript的数据类型

1.基本类型

字符串String

字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号。

<script>
    var gameName="英雄联盟";
    var hairstylist='tony';
    //PS：注意引号嵌套
    var message1='我的发型师是"tony"老师';
    var message2="我的发型师是'tony'老师";
</script>

数字Number

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。

<script>
    var breadPrice=15.9;
    var gameLevel=66;
    //极大或极小的数字可以通过科学计数法来书写：
    var myMoney1=666e5; //66600000
    var myMoney2=-666e-5; //-0.00666
</script>

布尔Boolean

只能有两个值：true 或 false。

<script>

    var isUnderstand=true;
    var isSingle=false;
</script>

空Null

<script>
    var email=null;
</script>

未定义Undefined

表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

共有4中情况会出现undefined的值。

1、变量声明且没有赋值；

var obj;
alert(obj);//obj值为undefined

2、获取对象中不存在的属性时

var obj;
alert(obj.name);
//报错信息： "Uncaught TypeError: Cannot read property 'name' of undefined"

3、函数需要实参，但是调用时没有传值，形参是undefined；

4、函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined。

function printNum(num){
alert(num);
}
var result=printNum();//调用函数未传递参数，执行函数的时候num的值是undefined
alert(result);//result的值也是undefined，因为printNum()没有返回值

Symbol

Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值

2.引用数据类型

对象(Object)、数组(Array)、函数(Function)

JavaScript的String对象

String对象属性--长度属性

var str="我喜欢看NBA,最喜欢的球员是\'小学生\'库里";
//注意：字符串中出现的\'是一个字符，转义为一个单引号
console.log(str);
//获取字符串的长度：，切记：所有转移符号的长度都算一个，即\'长度为1
console.log("字符串的长度="+str.length);//22

String对象方法

JavaScript中的String对象方法与java的String方法很多都类似甚至一样，这里不再一一赘述。提供大家一个参考表格，需要的自行查阅。点击这里：查看String对象方法参考表格

JavaScript的Array对象

Array 对象用于在变量中存储多个值，也就是数组。

声明数组

方式1： var names = new Array(); names[0]='a'; names[1]='b';

方式2： var cars = ["a","b","c"];

方式3： classes = new Array("1","2","3");

Array对象的方法

点击这里 :查看Array对象的方法参考表格

JavaScript的Date对象

创建日期对象

var date1 = new Date(); //当前的日期

var date2 = new Date(milliseconds);//1970年+毫秒数

var date3 = new Date(dateString); //符合日期类型的字符串年月日小时分钟秒不能加毫秒，加上报日期不合法

var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);//年月日

小时分钟秒毫秒这里可以设置毫秒月份取值为0-11

日期对象的常用方法

其他更多的方法。点击这里查看：日期对象方法的参考表格

JavaScript的Math对象

与java中的Math相似，跟数学相关的内容都这里。有很多方法属性与java中的也类似。

Math常用属性

var pi=Math.PI;//返回圆周率

Math常用方法

var num=Math.random();// 返回 0 ~ 1 之间的随机数。

var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。

var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。

点击这里查看：Math参考文档

3.JavaScript拥有动态类型

var param; // param类型为 undefined

param = 5; // 现在 param 为数字

param = "John"; // 现在 param 为字符串

PS:虽然JavaScript支持这种写法，但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要盛放什么类型的值，以后尽量不随意改变。

4.JavaScript中的运算符

算数运算符：+ - * / % 、 ++ 、 --

赋值运算符：= 、 +=、 -= 、*= 、 /= 、 %=

字符串的连接符：+

逻辑运算符： && || ！

条件运算符：？:

比较运算符： == 、！= 、 > 、= 、 <=

以上运算符的运算规则与java一样，在这里不再赘述。接下来强调两个新的比较运算符：

var x=5;
var res=(x===5); // true
res=(x==='5');// false
res=(x!==5); // false
res=(x!=='5');// true

3.JavaScript函数

常用的全局函数

1 isNaN(param)

用于检查其参数是否是非数字值。是数值的返回false，不是数值返回true。

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

2 parseFloat(String)

可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

字符串中只返回第一个数字。
开头和结尾的空格是允许的。
如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

console.log(parseFloat("66"));//66
console.log(parseFloat("199.99"));//199.99
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 128 "));//128
console.log(parseFloat("10年"));//10
console.log(parseFloat("今天是8号"));//NaN

3 parseInt(string,radix)

可解析一个字符串，并返回一个整数.

string 必需。要被解析的字符串。
radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

console.log(parseInt("66"));//66
console.log(parseInt("199.99"));//199
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt(" 128 "));//128
console.log(parseInt("10年"));//10
console.log(parseInt("今天是8号"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16

PS:旧浏览器由于使用旧版本的ECMAScript（ECMAScript版本小于ECMAScript 5，当字符串以"0"开头时默认使用八进制，ECMAScript 5使用的是十进制），所以在解析("010") 将输出8。

JavaScript的自定义函数

使用function关键字定义函数。

function 自定义函数名称(参数列表){
//函数体
}

注意：

函数的形参直接写参数名称，不需要声明类型，即不需要写var.
函数的返回取决于函数体中是否有return关键字

JavaScript的匿名函数

  var fun1 =function (参数列表){
//函数体
}

用变量名称 =function就是匿名函数调用直接 fun1();

4.JavaScript自定义对象

对象也是一个变量，但对象可以包含多个值（多个变量）。

定义对象

对象中可以有属性，也可以有方法。

对象的属性

可以说 "JavaScript 对象是变量的容器"。

但是，我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为对象属性。

访问对象的属性

访问对象的方法

5.JavaScript Window--浏览器对象模型

1.window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。（没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象）。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。 Window 对象表示浏览器中打开的窗口。

2. window对象属性

常用属性：

history对象

window.history 对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。

常用方法： history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同

history.go(1/-1)-- 参数为1：等同于history.forward()，参数为-1，等同于history.back()

<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(1)">前进go</a>
<a href="javascript:window.history.go(-1)">后退go</a>

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

window.location 对象在编写时可不使用 window 这个前缀。

href 当前窗口正在浏览的网页地址

replace(url) 转向到url网页地址

reload() 重新载入当前网址，如同按下刷新按钮

<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
<a href="javascript:window.location.reload()">刷新</a><br />
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
<a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br
/>

window对象方法

常用方法：

打开和关闭浏览器案例

<a href="javascript:window.open('https://www.baidu.com')">打开百度</a>
<a href="javascript:window.open('index.html')">打开-index</a>
<a href="javascript:window.close()">关闭当前页面</a>

弹框案例

<script>
    //window对象常用的弹框方法
    //1、基本弹框
    window.alert("只有一个确定按钮的对话框");
    //2、对话框：有确定和取消两个看你，点击确定返回true，点击取消返回false
    var res=window.confirm("确认要关闭吗？");
    if(res){
        alert("点击了确定按钮");
    }else{
        alert("点击取消按钮");
    }
    //3、输入框：prompt(提示信息，默认值)
    var age=prompt("请输入年龄：",19);
    alert("输入的年龄信息是："+age);
</script>

定时器案例

<div id="today1">
div--显示时间1
</div>
    <a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>
<div id="today2">
div--显示时间2
</div>
    <a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a>
<script>
    function showTime1(){
  

    var time=new Date();
    var y=time.getFullYear();
    var mon=time.getMonth();
    var d=time.getDate();
    var h=time.getHours();
    var m=time.getMinutes();
    var s=time.getSeconds();
    document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日
    "+h+":"+m+":"+s;
}
    //定时器setInterval(定时调用的函数,时间间隔毫秒)
    var flag1=window.setInterval("showTime1()",1000);
</script>
<script>
    function showTime2(){
    var time=new Date();
    var y=time.getFullYear();
    var mon=time.getMonth();
    var d=time.getDate();
    var h=time.getHours();
    var m=time.getMinutes();
    var s=time.getSeconds();
    document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日
    "+h+":"+m+":"+s;
    flag2=window.setTimeout("showTime2()",1000);
}
    //在指定的毫秒数后调用函数或计算表达式。
    var flag2=window.setTimeout("showTime2()",1000);
</script>

6. JavaScript之事件

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

1.HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。例如页面加载完成、你点击个按钮、文本框输入了文字等等，都是HTML事件的案例。通过当事件发生时，我们希望可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之后验证有效性等，那么这些要做的事情我们就可以通过JavaScript实现。

2.常用的HTML事件

案例：

<script>
    function fun1(){
        alert('选择的内容发生了变化');
    }
    function fun2(){
        alert("触发了单击事件");
    }
    function fun3() {
        document.getElementById("btn").innerHTML="鼠标移动到按钮上了";
    }
    function fun4() {
        document.getElementById("btn").innerHTML="点击我试试";
    }
    function fun5() {
        alert("键盘按下了");
    }
    function fun6() {
        alert("获取到了焦点");
    }
    function fun7() {
        alert("input失去了焦点");
    }
    function myLoad(){
        alert("页面加载完毕");
    }
</script>
    <body onload="myLoad()">
    <input id="userName" onkeydown="fun5()" onfocus="fun6()"
    onblur="fun7()"/>
    <input id="password" type="password" />
    <button id="btn" type="button" onclick="fun2()"
    onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
    <select id="month" onchange="fun1()">
        <option>1月份</option>
        <option>2月份</option>
</select>

7.JavaScript之DOM模型

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 DOM:Document Object Model,文档对象模型。当网页被加载时，浏览器会创建页面的文档对象模型。 HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

document对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

document对象常用方法

1 查找 HTML 元素常用方法

2 修改 HTML 内容和属性

修改内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

修改 HTML 元素的内容的语法：

document.getElementById(id).innerHTML=新的 HTML。

PS：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

修改 HTML 属性

修改 HTML 元素属性的语法：

方式1：document.getElementById(id).attribute=新属性值 //直接得到属性值赋值比如src属性

document.getElementById(id).src=新属性值

方式2：document.getElementById(id).setAttribute(属性名，属性值);

3 修改 HTML 元素的css

修改 HTML 元素css的语法：

document.getElementById(id).style.property=新样式

document.getElementById("myli").style.color="blue";
document.getElementById("myli").style.fontFamily="微软雅黑";
document.getElementById("myli").style.fontSize="24px";

HTML DOM 元素 (节点)

创建新的 HTML 元素

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

<button type="button" onclick="createNewP()">动态添加一个元素--
    appendChild</button>
<button type="button" onclick="createNewP2()">动态添加一个元素--
insertBefore</button>
<div id="div1">
    <p id="p1">这是段落1</p>
    <p id="p2">这是段落2</p>
</div>
<script>
    function createNewP(){
        var newElementP=document.createElement("p");//创建一个新的段落元素
        var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点
        //将文本的节点添加到新创建的元素中
        newElementP.appendChild(text);
        //获取一个页面已经存在的元素
        var div=document.getElementById("div1");
        //添加新创建的元素p到已经存在的元素div中
        div.appendChild(newElementP);
}
    function createNewP2(){
        var newElementP=document.createElement("p");//创建一个新的段落元素
        var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点
        //将文本的节点添加到新创建的元素中
        newElementP.appendChild(text);
        //获取一个页面已经存在的元素
        var div=document.getElementById("div1");
        var p1=document.getElementById("p1");
        //添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面  后面就用after
        div.insertBefore(newElementP,p1);
}
</script>

替换 HTML 元素 -replaceChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
    <button type="button" onclick="changeElemnt()">替换p1</button>
<script>
    function changeElemnt(){
    var newElementP=document.createElement("p");//创建一个新的段落元素
    var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点
    //将文本的节点添加到新创建的元素中
    newElementP.appendChild(text);
    //获取要被替换的元素p1及其父元素div
    var div=document.getElementById("div1");
    var p1=document.getElementById("p1");
    //将div中的元素p1替换为新创建的元素
    div.replaceChild(newElementP,p1);
    }
</script>

删除元素 -removeChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="deleteElement()">删除p1-方式1</button>
<button type="button" onclick="deleteElement()">删除p1-方式2</button>
<script>
    function deleteElement(){
        var div=document.getElementById("div1");
        var p1=document.getElementById("p1");
        //从父元素div中删除子元素p1
        div.removeChild(p1);
    }
    function deleteElement2(){
        var p1=document.getElementById("p1");
        //p1.parentNode：作用就是获取要删除元素p1的父元素div
        p1.parentNode.removeChild(p1);
    }
</script>

8.扩展练习表单验证

1表单验证意义与场景

1.降低服务器压力

拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销。

2.提升用户体验

早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会有一种很难受的粘滞感。

2 表单验证常用事件与属性

表单经常需要做一些非空验证、长度验证、合法性验证等结合正则表达式进行更合理的验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
    function validateName(){
        //所有的表单项元素都value属性
        var name=document.getElementById("userName").value;
        var msg=document.getElementById("nameMsg");
        if(name==null || name ==""){
            msg.innerHTML="用户名不能为空！";
            msg.style.color="red";
            return false;
        } else if(name.length<6){
            msg.innerHTML="用户名长度必须为大于6的！";
            msg.style.color="red";
            return false;
        }
        msg.innerHTML="用户名可用";
        msg.style.color="green";
        return true;
    }
    function validatePwd(){
        var password1=document.getElementById("password1").value;
        var msg=document.getElementById("pwdMsg1");
        if(password1==null || password1 ==""){
            msg.innerHTML="密码不能为空！";
            msg.style.color="red";
            return false;
        } else if(password1.length<8){
            msg.innerHTML="密码的长度必须为大于8的！";
            msg.style.color="red";
            return false;
        }
        msg.innerHTML="密码合法";
        msg.style.color="green";
        return true;
    }
    function confirmPwd(){
        var pwd1=document.getElementById("password1").value;
        var pwd2=document.getElementById("password2").value;
        var msg=document.getElementById("pwdMsg2");
        if(pwd1!=pwd2){
        msg.innerHTML="两次输入的密码不一致！";
        msg.style.color="red";
        return false;
        }
        msg.innerHTML="两次输入的密码一致";
        msg.style.color="green";
        return true;
    }
    function validateGender(){
        var gender=document.getElementById("gender").value;
        if(gender==-1){
        alert("性别为必选项！");
        return false;
        }
    return true;
    }
    function register(){
    return
        validateName()&&validatePwd()&&confirmPwd()&&validateGender();
    }
</script>
</head>
<body>
<h1>英雄会注册</h1>
<form action="提交.html" method="get" onsubmit="return register()">

*用户名:<input type="text" id="userName" placeholder="请输入用户名"
onblur="validateName()" />
<span id="nameMsg">用户名长度至少6位</span><br />

*密码：<input type="password" id="password1" placeholder="请输入密码"
onblur="validatePwd()"/>
<span id="pwdMsg1">密码长度至少8位</span><br />

*确认密码：<input type="password" id="password2" placeholder="请确认密
码" onblur="confirmPwd()" />
<span id="pwdMsg2">确认密码与密码一致</span><br />

*性别：<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br /><br />

<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>

AUTO_K

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaSript介绍

1、概述1.1 什么是JavaScript？JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译） JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易入门。1.2 作用1、为网页添加各式各样的动态功能。2、为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功.
复制链接

扫一扫