javascript的缩写是JS js简称什么

转载

mob6454cc7042a2 2023-07-23 10:00:43

文章标签 javascript的缩写是JS javascript js 数组字符串 文章分类 JavaScript 前端开发

JavaScript是一门最流行的脚本语言之一

一个合格的后端人员，必须要精通JavaScript

介绍：
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。

注意：
ECMAScript它可以理解JavaScript的一个标准
最新版本已经到es6版本了
但是大部分浏览器还只停留在支持es5代码上
开发环境—线上环境，版本不一致

1.快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    常用的JavaScript代码方式-->
    
    
<!--    第一种方式，script代码块-->
<!--    script标签内，写JavaScript代码-->
<!--    <script>-->
<!--        alert("hello，world")-->
<!--    </script>-->

<!--   第二种方式： 外部引入-->
    <script src="WEB-INF/js/dy.js"></script>
</head>
<body>
</body>
</html>

javascript的缩写是JS js简称什么_javascript

变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1.定义变量  变量类型  变量名=变量值;
    var num=1;
    var  name='张三';
   
</script>
</body>
</html>

1：在js中通过var定义变量
2：如果一个变量没有声明/定义直接访问的话会出现语法错误
3：定义变量没有手动赋值，系统默认值undefined
4：undefined在js中是一个具体存在值

数据类型

Number
js不区分小数和整数，Number

123  //整数
123.10 //浮点数123.10
1.123e3 //科学计数法
-99   //负数
NaN   //not a number  不是一个数字
Infinity //表示无限大

字符串

'abc'
"abc"

布尔值

true
false

逻辑运算

&&   两个都为真，才为真
||   一个为真，结果为真
!    真即假，假即真

比较运算符5颗星*****

=   
==  等于（类型不一样，值一样，也会判断为true）
===  绝对等于（类型一样，值也要一样，才会判断为true）

这是一个js的缺陷，坚持不要使用==比较
须知：

NaN===NaN,这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否为NaN

浮点数问题：

console.log((1/3)===(1-2/3));
结果为false

尽量避免使用浮点数进行运算，存在精度问题！

NULL和undefined

null 空
undefined 未定义
定义变量没有手动赋值，系统默认值undefined

数组
java中数组必须为一种相同类型的对象

JS中不需要相同类型

var number=[1,23,33.3,"数值",null,true,false]; 
new Array(1,23,33.3,"数值",null,true,false);

取数组下标：如果越界了，会undefined

对象
对象是大括号，数组是中括号
每个属性之间用逗号隔开，最后一个不需要隔开

var person={
        name:"张三",
        age:10,
        sex:"男",
        tags:['js','java','web','....']

    }

取对象的值

person.name
> "张三"
person.age
>10

严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--use strict;严格检查模式，预防JavaScript的随意性导致产生的运行位置
必须写在JavaScript的第一行！
-->

<!-- 局部变量建议都建议let去定义-->

<script>
    'use strict';
    //全局变量
   let i=1;
</script>
</body>
</html>

数据类型详解

1.1 字符串

正常字符串我们使用单引号，或者双引号包裹
注意转义字符 \

\'
\n
\t
\u4e2d \u#### Unicode字符
\x41    Asc11字符

多行字符串编写

//tab piao esc下面
var msg=`hello
world
你好啊
你好
`

模板字符串

let name="张三";
let age=5;
let msg=`你好啊，${name}`

字符串的长度

str.length

字符串的可变性，不可变
大小写转换

javascript的缩写是JS js简称什么_javascript_02

stdunt.indexOf(‘t’）
substring

stdunt.substring(1)  //从第一个字符串截取到最后一个字符串
stdunt.substring(1,3) //[1,3]

1.2数组

Array可以包括任意的数据类型

var arr=[1,23,4,5,6]
arr[0]
arr[0]=1

1.长度

arr.length

注意：加入arr.length赋值，数组大小就会发生变化，如果赋值过小，元素会丢失
2. indexOf，通过元素获取下标索引

arr.indexOf(23)
1

字符串的“1”和数字1是不同的
3. slice() 截取Array的一部分，返回一个新的数组，类型于String中的substring方法
4. push()，pop() 尾部

push:压入到尾部
pop:弹出尾部的一个元素

5.unshift(),shift() 头部

unshift：压入到头部
arr.unshift("aaaa")
6
arr
Array(6) [ "aaaa", 1, 3, 5, 44, "a" ]


unshift：弹出头部的一个元素
arr.shift()
"aaaa"
arr
Array(5) [ 1, 3, 5, 44, "a" ]

6.排序sort()

arr.sort()
Array(5) [ 1, 3, 44, 5, "a" ]

7.元素反转reverse()

arr.reverse()
Array(5) [ "a", 5, 44, 3, 1 ]

8.concat()

arr.concat(1,2,3)
Array(8) [ "a", 5, 44, 3, 1, 1, 2, 3 ]

arr
Array(5) [ "a", 5, 44, 3, 1 ]

注意：concat()并没有修改数组，只会返回一个新的数组
9.连接符join
打印拼接数组，使用特定的字符串连接

arr.join('-')
"a-5-44-3-1"

10.多维数组

arr=[[1,2],[3,4],[5,6]];
(3) […]
0: Array [ 1, 2 ]
1: Array [ 3, 4 ]
2: Array [ 5, 6 ]
length: 3

取值
arr[1][1]
4

11.删除数组元素
方法1：用delete 删除数组中元素

//定义数组
var array=["aa","dd","cc","aa"];
//方法1：delete删除数组元素
delete array[1];
//输出结果 : ["aa",undefined,"cc","aa"]
getArray(array);

注意：使用这种方法删除下标，delete: 只是被删除的元素变成了 undefined 其他的元素的键值还是不变。
方法2：用splice删除数组的元素

var array = ["aa","dd","cc","aa"];
   //方法2：删除数组元素
    array.splice(1,1);
   //输出结果：["aa","cc","aa"]
   getArray(array);

splice: 该方法会改变原始数组

数组：存储数据（如何存，如何取，方法都可以自己实现）

1.3对象

若干个键值对

var 对象名={
       属性名:属性值,
       属性名:属性值,
       属性名:属性值,
       属性名:属性值
     }

//定义了一个preson对象，它有4个属性
  var preson={
         name:'张三',
         age:15,
         email:"6666666@qq.com"
         sex:'nan'
     }

Js中的对象，{…}表示一个对象，键值对描述属性xxxx：xxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号！
1.对象赋值

preson.name
"张三"
preson.name="小明"
"小明"

2.使用不存在对象属性，不会报错！undefined

preson.alg

undefined

3.动态的删减属性.

delete preson.name
true

preson
Object { age: 15, email: "6666666@qq.com", sex: "nan" }

4.动态的添加

preson.haha="hhh"
"hhh"

preson
Object { age: 15, email: "6666666@qq.com", sex: "nan", haha: "hhh" }

5.判断属性值是否在这个对象中， xxx in xxx!

'age' in preson
true

6.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

preson.hasOwnProperty('tostring')
false

1.4 流程控制

if判断

let age=3;
     if(age>3){  //第一个判断
         alert("haha");
     }else if(age<5){  //第二个判断
         alert("no aaa");
     }else {  //否则
         alert("no");
     }

while循环，避免程序死循环

while (age<100){
         age = age+1;
         console.log(age);
     }

for循环

for (let i = 0; i <100 ; i++) {
         console.log(i);
     }

forEach循环

sz.forEach(function (value) {
          console.log(value)
     })

数组循环

var sz=[1,55,1552,15552,444,1113,11];
     for (let i = 0; i <sz.length ; i++) {
         console.log(sz[i]);
     }

1.5Map和Set

ES6的新特性

Map:

//ES6 Map
    //学生的成绩，学生的名字
    var names = ['tom', 'jack', 'lx', 'zs'];
    var scores = [100, 80, 20, 18];

    var map = new Map([['jk',100], ['zs', 80], ['lwq', 15]]);
    map.set('abc',123);
    map.delete('zs');  //通过key删除元素
    let name = map.get('jk'); //通过key获取value
    console.log(name);

Set:无序不重复的集合

var set=new Set([1,3,3,3,2,5]); //set可以去除重复的
    set.add(9);  //往set里面添加元素
     set.delete(3);  //删除
      console.log(set.has(2)); //判断是否有这个元素

1.6 iterator

使用iterator遍历map set集合

//通过for of /for in 下标
 var arr=[3,4,5];
     for(var x of arr){
         console.log(x)
     }

遍历map

var map=new Map([['lwq',12],['xz',80],['ww',90]]);
     for (let mapElement of map) {
         console.log(mapElement)
     }

遍历set

var set=new Set([1,20,9,3,2,5]);
     for (let number of set) {
         console.log(number);
     }

函数

1.定义一个函数

//java定义函数
public 返回值类型 方法名(){
 return 返回值;
}

定义方式一

绝对值函数

function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}

一旦执行return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs=function(x){
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数！

调用函数

abs(10); //10
abs(-10) //10

参数问题：JavaScript可以传任意个参数，也可以不传入参数。

arguments

arguments是一个js免费赠送的关键字
代表，传递进来的所有的参数，是一个数组

2.变量的作用域

有一句话是这样说的，出了大括号就不认识了。
在JavaScript中,var定义变量实际是有作用域的
假设在函数体中声明，则在函数体外不可以使用

function qj() {
     var x=1;
     x=x+1;
 }
 x=x+2; //ReferenceError: x is not defined

如果两个函数使用相同的变量名，只要在函数内部，就不会冲突

function wq() {
     var x=1;
     x=x+1;
 }
 function ewq() {
     var x='a';
     x=x+1;
 }

内部函数可以访问外部函数的成员，反之则不行

function wq() {
     var x = 1;
     //内部函数可以访问外部函数的成员，反之则不行
     function ewq() {
         var y = x+1; //2
     }
     var z=y+1;  //ReferenceError: y is not defined
 }

假设，内部函数变量和外部函数的变量，重名！

function wq() {
        var x = 1;

        function ewq() {
            var x = 'a'
            console.log('内' + x); //外1
        }

        console.log('外' + x);  //内a
        ewq()
    }

    wq()

假设在JavaScript中函数查找变量从自身函数开始，由内往外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

提高变量的作用域

function wq() {
        var a = "x"+y;
        console.log(a);
        var y='y';
    }
      wq()

结果xundefined
说明：js执行引擎，自动声明了y的声明，但是不会提升变量y的赋值。

全局函数

//全局变量
    var x=1;
    function wq() {
        console.log(x);
    }
     wq();
    console.log(x)

全局对象window

var x='xxx';
    alert(x);
    alert(window.x); //默认所有的全局变量，都会自动绑定window对象下;

alert()这个函数本身也是一个window变量；

var x = 'xxx';
    window.alert(x);
    var ale_rt = window.alert;
    window.alert = function () {

    }
    // 发现alert(失效了)
    window.alert(123);

    // 恢复
    window.alert = ale_rt;
    window.alert(652)

说明JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错ReferenceError

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用相同的全局变量，冲突··我们应该怎么解决冲突呢？

//唯一的全局变量
    var zs = {};
    //定义全局变量
    zs.name = 'zhangshan';
    zs.add = function (a, b) {
        return a + b;
    }

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域set

function aaa() {
        for (var i = 0; i <100 ; i++) {
            console.log(i);
            
        }
        console.log(i+1); //我们发现 i出了这个作用域还可以继续使用

    }
    aaa()

ES6 let关键字，解决局部作用域冲突问题！

function aaa() {
        for (let i = 0; i <100 ; i++) {
            console.log(i);
            
        }
        console.log(i+1); //ReferenceError: i is not defined

    }
    aaa()

建议大家都使用let去定义局部变量

常量const

在ES6之前，我们要定义一个规范，比如只要用全部大写字母命名的变量的就是常量，建议不要进行修改，但是实际上还是可以改变
在ES6引入了常量关键字const

const  PAI=3.14;  //只读变量
    console.log(PAI);
    PAI=51;  //这里编译器会直接报错  编译不通过  TypeError: invalid assignment to const `PAI'

3.方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var lwq = {
        name: '小强',
        birthday: 2000,

        //方法
        age: function () {
            //今年减去出生的年
            let number = new Date().getFullYear();  //获取到当前的年份
            return number - this.birthday;

        }
    }
    //属性
    lwq.name
    //方法 ,一定要带（）
    lwq.age()

this.代表什么，我们可以拆开上面的代码看一看

function getAge () {
        //今年减去出生的年
        let number = new Date().getFullYear();  //获取到当前的年份
        return number - this.birthday;

    }
    var lwq = {
        name: '小强',
        birthday: 2000,
        age:getAge
    };
    //lwq.age()   ok
    //getAge()    NaN

this是无法指向的，是默认指向调用它的那个对象

apply

在JS中可以控制this指向

function getAge () {
        //今年减去出生的年
        let number = new Date().getFullYear();  //获取到当前的年份
        return number - this.birthday;

    }
    var lwq = {
        name: '小强',
        birthday: 2000,
        age:getAge
    };
    //lwq.age()   ok
    getAge.apply(lwq,[]);  //this.指向了lwq,参数为空

内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof 3.0
"number"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof NULL
"undefined"
typeof undefined
"undefined"

1. Date

基本使用

let date = new Date();
    console.log(date)  //Tue May 12 2020 18:50:04 GMT+0800 (中国标准时间)
    date.getFullYear(); //年 2020
    date.getMonth();   //月    0-11 代表月
    date.getDate(); //日    12
    date.getDay(); //星期几  2
    date.getHours(); //时   18
    date.getMinutes(); //分 50
    date.getSeconds();//秒  4
    date.getTime();  //1589280604335 时间戳 1970年1月1日（00:00:00 GMT）至当前时间的总秒数
    console.log(new Date(1589280604335)) //时间戳转换为时间

2.JSON

json是什么

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

在JavaScript一切皆为对象。任何js支持的类型都可以用JSON来表示。
格式：

对象都用{}
数组都用[]
所有的键值对，都是用key:value

JSON字符串和JS对象转化

var user = {
        name: "lwq",
        age: 15,
        sex: "男"
    }
    //转换为JSON字符串
    var JsonUser = JSON.stringify(user);  //{"name":"lwq","age":15,"sex":"男"}
     //json字符串转换为对象 参数为json字符串
    var  DuiXiang=JSON.parse('{"name":"lwq","age":15,"sex":"男"}');

很多人都搞不清楚，JSON和JS对象的区别

var obj={a:'hello',b,'hai'}  //这是一个对象
var json='{"a":"hello","b","hai"}'

面向对象编程

1.什么是面向对象

JavaScript.Java.c#…面向对象；JavaScript有区别

类：模板
对象：具体的实例
在JavaScript中我们需要换一下思考

Class继承

class关键字是在ES6引入的

1.定义一个类，属性，方法

//定义一个学生的类
    class Student{
       constructor(name) {
           this.name=name;
       }
       hello(){
           alert("Hello")
       }
    }
    //可以创建多个对象
     let xiaobai= new Student('xiaobai');
     let xiaoqiang = new Student('xiaoqiang');
      console.log(xiaobai);
     xiaobai.hello();

2.继承

class Student {
        constructor(name) {
            this.name = name;
        }

        hello() {
            alert("Hello")
        }
    }

    class XiaoXueSheng extends Student {
        constructor(name, age) {
            super(name);
            this.age = age;
        }

        myGrade() {
            alert("我是一个小学生")
        }
    }

    let xiaobai = new XiaoXueSheng("xiaobai", 15);
    console.log(xiaobai);
    xiaobai.myGrade();

本质：查看对象的原型

javascript的缩写是JS js简称什么_javascript_03

操作BOM对象

浏览器介绍

JavaScript和浏览器的关系：
JavaScript诞生就是为了就是能让他在浏览器中运行

BOM：浏览器对象模型

IE 6-11
Chrome
Safari
Firefox
Opera

第三方浏览器：

QQ浏览器
360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight  //高度
233
window.innerWidth  //宽度
1280
window.outerWidth  //内置宽度
1291
//可以调整浏览器窗口试试

Navigator

Navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows)"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0"
navigator.platform
"Win32"

基本上不会使用Navigator对象，因为可以被人为修改

screen

代表屏幕尺寸

screen.width
1280 px
screen.height
720 px

location(重要)

location 代表当前页面的URL信息

host: "www.baidu.com"  //主机
href: "https://www.baidu.com/"  //当前位置
protocol: "https:"  //协议
reload: ƒ reload()  //重新加载
//设置新的地址
location.assign('');

document

document 代表当前的页面,HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='张三'
"张三"

获取具体的文档树节点

<dl id="app">
 <dt>Java</dt>
    <dd>JavaEE</dd>
    <dd>JavaSE</dd>
</dl>
<script>
 var dl = document.getElementById('app');

获取cookie

document.cookie
"_uuid=35833BAA-9F57-7BC0-A4D8-43996213A25640455infoc; buvid3=D05836E0-FC5F-46D1-87E8-0AB7D1A3F1B8190954infoc; LIVE_BUVID=AUTO6915709341419914; CURRENT_FNVAL=16; stardustvideo=1; laboratory=1-1; rpdid=|(J|)lJu|~mY0J'ul~|mJRul~; im_notify_type_477127448=0; CURRENT_QUALITY=80; DedeUserID=477127448; DedeUserID__ckMd5=d8b02e9cac4e69ee; bili_jct=ddbc7d697b1cf03f92408ab18cf98f7c; bp_t_offset_477127448=385505514190712543; bp_video_offset_477127448=387217050070905214; PVID=2; sid=bgbiwsgv"

history

history代表浏览器的历史记录

history.back()  //后退
history.forward()  //前进

操作DOM对象

DOM：文档对象模型，

核心

浏览器网页就是一个DOM树结构 !

更新：更新DOM节点
遍历dom节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点
要操作一个Dom节点，就必须先获得这个Dom节点

获得Dom节点

var h1 = document.getElementsByTagName("h1");  //标签选择器
    var p1 = document.getElementById("p1");        //id选择器
    var p2 = document.getElementsByClassName("p2");  //class选择器
    var father = document.getElementById("father");
    var childrens = father.children;   //获取父节点下的所有子节点
    // father.firstChild
    // father.lastChild

这个是原生的代码，基本上以后不会这么写，都是有jQuery();

更新节点

<div id="id1">


</div>

<script>
  var id1=document.getElementById('id1')

操作文本

id1.innerText='456' 修改文本的值
id1.innerHTML='<strong>123</strong>' 可以解析HTML文本标签

操作css

id1.style.color='red'  //属性，使用字符串 包裹
"red"
id1.style.fontSize='30px'  //注意：没有下划线了全部下划线变成了驼峰命名
"30px"
id1.style.padding='3em'
"3em"

删除节点

删除节点的步骤：先获取父节点，在通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
    </div>
<script>
var self= document.getElementsByTagName("p1");
var father=p1.parentElement;
father.removeChild(self);


//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>

删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

插入节点

我们获得了Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么做了，因为会出现覆盖

追加：

<p id="js">JavaScript</p>
<div id="list">
    <p id="ee">JavaEE</p>
    <P id="se">JavaSE</P>
    <p id="me">JavaME</p>
</div>
<script>
    var js = document.getElementById('js');  //已经存在的节点
    var list = document.getElementById('list');
    list.appendChild(js);  //追加
    
</script>

效果：

javascript的缩写是JS js简称什么_字符串_04

创建一个新的标签，实现插入

<p id="js">JavaScript</p>
<div id="list">
    <p id="ee">JavaEE</p>
    <P id="se">JavaSE</P>
    <p id="me">JavaME</p>
</div>
<script>
    var js = document.getElementById('js');  //已经存在的节点
    var list = document.getElementById('list');
    list.appendChild(js)

    //通过JS创建一个新的节点
    var newp = document.createElement('p'); //创建了一个p标签
    newp.id='newp';
    newp.innerText="Hello，JS";
    list.appendChild(newp)  

     //创建一个标签节点（通过这个属性，可以设置任意的值）
    var htmlScript = document.createElement('script');
    htmlScript.setAttribute("type","text/javascript");
</script>

效果：

javascript的缩写是JS js简称什么_js_05

操作表单（验证）

表单是什么form Dom树

文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…
表单的目的：提交信息

获得要提交的信息

<form action="" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" required>
    </p>
    <!--    多选框的值，就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" id="nan" value="nan">男
        <input type="radio" name="sex" id="nu" value="nu">女
    </p>
    <p>
        <input type="submit" value="提交">
    </p>

</form>
<script>
    var username = document.getElementById('username');
    var nan = document.getElementById('nan');
    var nu = document.getElementById('nu');

    //对于单选框，多选框等固定的值，nan.value只能获取当前的值
    nan.checked;  //查看返回的结果，是否为true，如果是true，就是被选中的
    nan.checked=true;  //赋值


    //得到输入框的值
    username.value
    //修改输入框的值
    username.value = '123'

</script>

提交表单 md5加密，表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--onsubmit=绑定一个提交的函数，true,false-->
<!--将这个结果返回给表单，使用 onsubmit接受-->
<!--onsubmit="return aaa()"-->
<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username" required/>
    </p>
    <p>
        <span>密码：</span><input type="password" id="password"  required/>
    </p>
    <input type="hidden" id="md5-password" name="password">
    <p>
        <button type="submit">提交</button>
    </p>
    <!--    绑定事件-->
</form>

<script>
    function aaa() {
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        var md5pwq = document.getElementById("md5-password");
        //MD5 算法
        md5pwq.value = md5(password.valueOf());
        //可以判断表单的内容，true就是通过提交，false阻止提交
        return true;
    }

</script>
</body>
</html>

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> 可以对提交过来的密码进行加密

效果：

javascript的缩写是JS js简称什么_js_06

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：javascript制作注册和登录界面用js编写登录注册页面

下一篇：java 项目需求说明 java系统需求分析

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯