搜索到
17
篇与
的结果
-
二、数据类型 1. 数值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>数值</title> </head> <body> <script> /* 数值（Number） - 在js中，所有的整数和浮点数都是Number类型 - js中的数值并不是无限大的，当超过一定范围后，会显示近似值 - Infinity是一个特殊的数值，表示无穷大 - 进行计算时，需注意精度的问题 */ let a = 10 a = 100 a = 99999 * 999999 a= Infinity a = 1 - 'a' //NaN（Not a number） console.log(a) /* 大整数（BigInt） - 用来表示比较大的整数 - 大整数使用n结尾，它可以表示的数字范围是无限大 */ /* 其他进制的数字 - 二进制 0b - 八进制 0o - 十六进制 0x */ let b b = 0b1010 b = 0o10 b = 0xff console.log(b) //打印时都是十进制 </script> </body> </html> 2. 类型检查<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类型检查</title> </head> <body> <script> let a = 10 let b = 10n console.log(a) console.log(b) //typeof检查的是变量的值的类型，而不是变量的类型，在js中，变量是没有类型的 //typeof返回的结果是一个字符串 console.log(typeof a) console.log(typeof b) </script> </body> </html> 3. 字符串<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>字符串</title> </head> <body> <script> /* 字符串 - 在js中使用单引号或双引号表示字符串 - 转义字符 \ 做斜杠 \t 制表符 \n 换行 - 模板字符串 使用 ` 表示，可以跨行，引号不能跨行 */ let a = '孙笑川' a = '这是一个"字符串"' a = "这是一个\"字符串\"" console.log(a) let b = `我的名字是： 孙笑川` console.log(b) let name = '孙笑川' let str = `我的名字是${name}` console.log(str) </script> </body> </html> 4. 其他的数据类型<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>其他的数据类型</title> </head> <body> <script> /* 布尔值（Boolean） - 用于逻辑判断 - 只有true、false两个值 */ let flag = false console.log(flag) console.log(typeof flag) /* 空值（Null） - 表示空对象 - 空值只有一个，即null - 使用typeof检查空值时，会返回"object"，这其实是js发展历史中的一个bug，typeof无法检查 */ let a = null console.log(a) console.log(typeof a) /* 未定义（Undefined） - 当声明一个变量没有赋值时，它的值就是undefined - 使用typeof检查时，返回的是"undefined" */ //let b let b = undefined console.log(b) /* 符号（Symbol） - 用来创建一个唯一的标识符 - 使用typeof检查时，返回的是"Symbol" */ let c = Symbol() //调用Symbol函数创建了一个符号 console.log(c) //这七种数据类型的原始值不可变（即创建之后不可修改） </script> </body> </html> 5. 类型转换 - 字符串<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类型转换-字符串</title> </head> <body> <script> /* 将一种数据类型转换为其他类型 */ let a = 10 a = true a = 100n //a = null console.log(typeof a, a) /* 1.调用toString()方法，注意：null和undefined没有该方法 */ a = a.toString() console.log(typeof a, a) /* 2.调用String()函数 对于拥有toString()方法的值调用String()函数时，实际上就是在调用toString() 对于null、undefined等值，则是直接进行转换 */ let b = 10 b = null b = undefined console.log(typeof b, b) b = String(b) console.log(typeof b, b) </script> </body> </html> 6. 类型转换 - 数值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类型转换-数值</title> </head> <body> <script> /* 1.使用Number()函数 - 字符串： 如果字符串是一个合法的数字，则会自动转换为对应的数值 反之，则是 Nan 如果字符串是空串或纯空格的字符串，转换后则是0 - 布尔值： true转换为1，false转换为0 - null 转换为0 - undefined 转换为Nan 2.专门将字符串转换为数值的两个方法 - parseInt() 转换为整数 解析时会自左向右逐一读取字符串，直到读取完字符串中所有有效的整数 有些时候可以使用该方法对数值进行取整（不推荐） - parseFloat() 转换为浮点数 解析时会自左向右逐一读取字符串，直到读取完字符串中所有有效的浮点数（小数） */ let a = '123' a = 'abc' //Nan a = '11px' //Nan a = '' //0 a = ' ' //0 a = true //1 a = false //0 a = null //0 a = undefined //Nan console.log(typeof a, a) a = Number(a) console.log(typeof a, a) let b = '123' b = '123px' //123 b = 456 //当传的值不是字符串而是数值时，parseInt()会先将456转换为'456'，再进行整数转换 console.log(typeof b, b) b = parseInt(b) console.log(typeof b, b) b = parseFloat(b) console.log(typeof b, b) </script> </body> </html> 7. 类型转换 - 布尔值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类型转换-布尔值</title> </head> <body> <script> /* 1.使用Boolean()函数将其他类型转换为布尔值 - 数字：除了0和Nan转换后是false，其余都是true - 字符串：空串转换为false，其余是true - null、undefined转换为false - 对象会转换为true 所有表示空的没有错误的值都会转换为false，即0,Nan,空串,null,undefined */ let a = 1 //true a = -1 //true a = 0 //false a = NaN //false a = Infinity //true a = 'abc' //true a = 'true' //true a = 'false' //true a = '' //false a = ' ' //true a = null //false a = undefined //false console.log(typeof a, a) a = Boolean(a) console.log(typeof a, a) </script> </body> </html> -
一、JavaScript入门 参照B站李立超老师2022年JavaScript课程1. 基本语法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>基本语法</title> </head> <body> <script> /* 1.多行注释 */ //2.单行注释 //3.js严格区分大小写 //4.在js中，多个空格和换行会被忽略 //5.js中的每条语句都应该以分号结尾（如果没写，解释器会自动添加） </script> </body> </html>2. 字面量和变量<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字面量和变量</title> </head> <body> <script> /* 字面量：表示字面所代表的意思（在js中，所有的字面量都可以直接使用） 变量： - 可以用来“存储”字面量 - 存储的字面量可以修改 */ /* 变量的使用： - 声明变量：let 变量名 / var 变量名 - 变量的赋值： a = 10 - 使用时，声明和赋值同时进行 let a = 10 */ let a = 10 console.log(a) </script> </body> </html>3. 变量的内存<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script> /* 变量中并不存储任何值，而是存储值的内存地址 */ let a = "孙笑川"; </script> </body> </html> 4. 常量<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常量</title> </head> <body> <script> /* 在js中，用const声明常量 常量只能赋值一次，重复赋值会报错 除常规常量外，一些对象类型的数据也会被声明为常量 */ const PI = 3.1415926 console.log(PI); </script> </body> </html>5.标识符<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>标识符</title> </head> <body> <script> /* 在js中，所有可以自主命名的内容，都可以称为是一个标识符 例：变量名、函数名、类名...... 标识符命名规范： 1.只能含有字母、数字、下划线、$，且不能以数字开头 2.不能是js中的关键字、保留字 3.一般使用小驼峰命名，类名使用大驼峰，常量使用全大写 + 下划线 */ let a = 10 let a1 = 10 let $a1_ = 10 //let ##a = 10 </script> </body> </html>
-
操作表单（验证） 表单的目的：提交信息获得要提交的信息<form action="post"> <p> <span>用户名：</span><input type="text" id="username"> </p> <!--多选框的值就是定义好的value--> <p> <span>性别：</span> <input type="radio" name="sex" value="man" id="boy">男 <input type="radio" name="sex" value="woman" id="girl">女 </p> </form> <script> var input_text = document.getElementById('username'), boy_radio = document.getElementById('boy'), girl_radio = document.getElementById('girl'); //得到输入框的值 input_text.value; //修改输入框的值 input_text.value = 'test'; //对于单选框、多选框等，只能取到固定的值,例如：value boy_radio.value ---> man boy_radio.checked; //查看返回的结果，如果为true，则被选中，否则反之 girl_radio.checked = true; //赋值（当前选中的性别修改为女） </script>提交表单<!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接收 --> <form action="" method="post" onsubmit="return test()"> <p> <span>用户名：</span><input type="text" name="username" id="username"> </p> <p> <span>密码：</span><input type="password" id="input-password"> </p> <input type="hidden" name="password" id="md5-pwd"> <button type="submit">提交</button> </form> <script> function test() { var uname = document.getElementById('username'), pwd = document.getElementById('input-password'), md5pwd = document.getElementById('md5-pwd'); //md5加密，同时通过hidden表单优化password框 md5pwd.value = md5(pwd.value); //校验表单内容，true通过，false阻止提交 return true; } </script> </body> </html>md5加密及表单优化：补充说明：1、通过md5加密提交的数据2、设置隐藏的input提交密码，优化用户体验，即：md5pwd.value = md5(pwd.value);将提交的password值赋值给隐藏的(hidden)input框，具体表现为：用户点击提交时，密码框中的字符串在页面跳转时不会突然变长
-
操作DOM对象 核心浏览器网页就是一个Dom树形结构更新：更新Dom节点遍历：得到Dom节点删除：删除一个Dom节点添加：添加一个新的节点注：要操作一个Dom节点，必须先获得这个Dom节点获得DOM节点var h1 = document.getElementsByTagName('h1'); var p1 = document.getElementById('test01'); var p2 = document.getElementsByClassName('test02'); var father = document.getElementById('father'); var childrens = father.children[index]; //获取父节点下的子节点 //father.firstChild;更新节点<div id="test"> </div> <script> var test = document.getElementById('test'); </script>操作文本test.innerText='abc' //修改文本的值 test.innerHTML='<strong>abc</strong>' 解析HTML文本标签操作JStest.style.color = 'red'; //属性使用字符串包裹 test.style.fontSize = '18px'; // font-size 转 fontSize驼峰命名 test.style.padding = '2em';删除节点步骤：先获取父节点，再通过父节点删除自己<div id="father"> <h1>标题</h1> <p id="test01">xxx</p> <p class="test02">xxxxx</p> </div> <script> var self = document.getElementById('test01'); var father = test01.parentElement; father.removeChild(self); </script>注：删除多个节点的时候，children是动态变化的插入节点在获得DOM节点时，如果这个节点已经存在元素，就不能再使用innerHTML操作，会产生覆盖。追加：<p id="test01">数学</p> <div id="list"> <p id="test02">语文</p> <p id="test03">英语</p> <p id="test04">美术</p> </div> <script> var test01 = document.getElementById('test01'), list = document.getElementById('list'); list.appendChild(test01); </script>追加前：追加后：创建一个新的标签实现插入var test01 = document.getElementById('test01'), list = document.getElementById('list'), //通过js创建一个新的节点 test05 = document.createElement('p'); //创建一个p标签 test05.id = 'test05'; test05.innerText = '体育'; list.appendChild(test05) //list.appendChild(test01); //创建一个标签节点 var script = document.createElement('script'); script.setAttribute('type','text/javascript'); list.appendChild(script); //创建一个style标签 var style = document.createElement('style'); //创建一个style标签 style.setAttribute('type','text/css'); style.innerHTML = 'body{background-color: yellow}'; //设置标签内容 document.getElementsByTagName('head')[0].appendChild(style);insertBeforevar test01 = document.getElementById('test01'); var test02 = document.getElementById('test02'); var list = document.getElementById('list'); //要包含的节点.insertBefore(newNode,targetNode) list.insertBefore(test01,test02);
-
操作BOM对象 Browser Object Model：浏览器对象模型windowwindow代表浏览器窗口window.alert("Hello World") undefined window.innerHeight 906 window.innerWidth 559 ……Navigator（不建议使用）Navigator封装了浏览器的信息navigator.appVersion "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36" navigator.platform "Win32" ……注：一般情况下不使用navigator,存在被人为修改的隐患screen代表屏幕规格screen.width 1920 screen.height 1080locationlocation代表当前页面的URL信息host:"www.bing.com" href:"https://www.bing.com" protocol:"https:" reload:ƒ reload() //重新加载，刷新网页 //设置新的地址 location.assign('https://xxx.com')documentdocument代表当前的页面，HTML DOM文档树获取具体的文档树节点<dl id="test"> <dt>JavaScript</dt> <dd>demo01</dd> <dd>demo02</dd> </dl> <script> var dl = document.getElementById('test'); </script>获取cookiedocument.cookie劫持cookie原理：通过js恶意代码在服务器端可以设置cookie：httpOnlyhistory（不建议使用）history代表浏览器的历史记录history.back() //后退 history.forward() //前进
-
面向对象编程（JavaScript） 原型对象var Student = { name: "孙笑川", age: 33, run:function () { console.log(this.name + "run ...") } } var sun = { name: "sun" } //原型对象 sun.__proto__ = Student;function Student(name){ this.name = name; } //给Student新增一个方法 Student.prototype.hello = function () { alert("hello") }class 继承classs关键字在ES6引入1、定义一个类class Student{ constructor(name){ this.name = name; } hello(){ alert("hello") } } var sun = new Student("sun"); sun.hello()2、继承class Student{ constructor(name){ this.name = name; } hello(){ alert("hello") } } class highStudent extends Student{ constructor(name,score){ super(name); this.score = score; } myScore(){ alert("100分！") } } var sun = new highStudent("sun",100);本质：查看对象原型原型链
-
内部对象（JavaScript） 标准对象typeof 123 "number" typeof '123' "string" typeof NaN "number" typeof true "boolean" typeof [] "object" typeof {} "object" typeof Math.abs "function" typeof undefined "undefined"1.1 Date基本使用var now = new Date(); now.getFullYear(); //年 now.getMonth(); //月 now.getDate(); //日 now.getDay(); //星期几 now.getHours(); //时 now.getMinutes(); //分 now.getSeconds(); //秒 now.getTime(); //时间戳，从1970-01-01 0:00:00到现在的毫秒数（全世界统一） console.log(new Date(1607479949417)); //时间戳转为当前时间转换now.toLocaleString //此处调用的是一个方法 ƒ toLocaleString() { [native code] } now.toLocaleString() "2020/12/9 上午10:16:59" now.toGMTString() "Wed, 09 Dec 2020 02:16:59 GMT"1.2 JSONjson是什么是一种轻量级的数据交换格式层次结构简洁清晰易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率格式：对象都用 {}数组都用 []所有的键值对都用 key:valuejson字符串和js对象的转化：var user = { name: "孙笑川", age: 33, sex: '男' } //对象转化为json字符串 {"name":"孙笑川","age":33,"sex":"男"} var jsonUser = JSON.stringify(user); //json字符串转化为对象 参数为json字符串 var obj = JSON.parse('{"name":"孙笑川","age":33,"sex":"男"}');1.3 Ajax原生的js写法 xhrJQuery封装好的方法 $("name").ajax("")axios 请求
-
数据类型（JavaScript） 1.1 字符串1、正常字符串使用单引号或双引号包裹2、转义字符 \\' \n \t \u4e2d \u#### Unicode编码 \x41 AscII码3、多行字符串<script> 'use strict' var msg = ` hello world test` </script>4、模板字符串<script> 'use strict' let name = "孙笑川"; let age = 30; let mgs = `你好,${name}` </script>5、字符串长度console.log(str.length)6、字符串的可变性，不可变7、大小写转换str.toUpperCase(); //大写 str.yoLowerCase(); //小写8、student.indexOf('t'); //在student字符串中，t是第几个元素 //第1个9、substring[a,b) //a <= str < b student.substring(1); //从第一个字符串截取到最后一个字符串 student.substring(1，3); //[1,3) 1.2 数组Array可以包含任意的数据类型var arr = [1,2,3,4,5,6]; //通过下边元素取值和赋值 arr[0]; arr[0] = 1;1、长度arr.length注：如果给arr.length赋值，数组的大小就会发生变化，如果赋值过小，数组里原本的元素就会丢失2、indexOf，通过元素获得下标索引arr.indexOf(2);注：字符串的"1"和数字 1 是不同的3、slice() 截取Array的一部分，返回一个新的数组，用法类似于substring4、push()、pop() 尾部push：压入元素到尾部 pop：弹出尾部的元素5、unshift()、shift() 头部unshift：压入元素到头部 shift：弹出头部的元素6、排序 sort()arr (3) [2, 1, 3] arr.sort() (3) [1, 2, 3]7、元素反转 reverse()8、拼接 concat()(3) [3, 2, 1] arr.concat(["A","B","C"]) (6) [3, 2, 1, "A", "B", "C"] arr (3) [3, 2, 1]注：concat()并没有修改原来的数组，只是返回了一个新的数组9、连接符 joinarr (3) [3, 2, 1] arr.join('-') "3-2-1"打印拼接数组，使用特定的字符串连接10、多维数组arr = [[1,2],[3,4],[5,6]]; arr[1][0] 31.3 对象var 对象名 = { 属性名：属性值, 属性名：属性值, 属性名：属性值 } var person = { name:"sun", age:3, address:"kunming" }在js中，{……}表示一个对象，以键值对的形式描述属性 xxx:xxx，每一个属性末尾以逗号隔开，最后一个属性不加逗号==JavaScript中所有的键都是字符串，值是任意对象==1、对象赋值person.name = "yaoshui" "yaoshui" person.name "yaoshui"2、使用一个不存在的对象属性，不会报错person.email undefined3、动态的删减属性 deletedelete person.name true person4、动态的添加，直接给新的属性添加值即可person.email = "xxx@qq.com"; "xxx@qq.com" person5、判断属性值是否在对象中 xxx in xxx'age' in person true //继承 'toString' in person true6、判断一个属性是否是对象本身就存在的person.hasOwnProperty('toString') false person.hasOwnProperty('age') true1.4 流程控制if判断var age = 3; if(age)>3{ alert("哈哈"); }else { alert("哭哭"); }while循环，避免程序死循环var age = 3; while(age<100){ age = age +1; console.log(age); }for循环for(let i = 0; i < 100; i++){ console.log(i); }forEach循环ES5.1引入var age = [1,2,3,4,5]; //函数 age.forEach(function(value){ console.log(value); })for...in<script> 'use strict' var age = [1,2,3,4,5,6]; /* * for(Type str:el) java * for(var index in object){} javascript */ for (var num in age){ if (age.hasOwnProperty(num)){ console.log(age[num]); } } </script>1.5 Map和SetES6的新特性1、Map<script> 'use strict' //ES6 //统计学生成绩、名字 // var name = ["孙笑川","药水哥","Giao哥"]; // var score = [100,99,98]; var map = new Map([['孙笑川',100],["药水哥",99],["Giao哥",98]]); var name = map.get("孙笑川"); //通过key获得value map.delete("药水哥"); //删除 map.set("admin",101); //新增或修改 console.log(name); </script>2、Set：无序不重复的集合set.add(2); //添加 set.delete(1); //删除 console.log(set.has(3)); //是否包含某个元素1.6 iteratorES6新特性1、遍历数组//通过for of实现便利数组 //for in是打印输出下标 var arr = [1,2,3,4]; for (let values of arr){ console.log(values); }2、遍历Mapvar map = new Map([['孙笑川',100],["药水哥",99],["Giao哥",98]]); for (let values of map){ console.log(values); }3、遍历Setvar set = new Set([3,1,7,7,9,7]); for (let values of set){ console.log(values); }
