搜索到
18
篇与
的结果
-
二、数据类型 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 定义函数定义方式一绝对值函数function test(x){ if(x>=0){ return x; }else{ return -x; } } //一旦执行到return代表函数结束，返回结果 //如果没有执行return，函数执行完也会返回结果undefined定义方式二var test = funxtion(x){ //匿名函数，可以把结果赋值给test，通过test调用函数 if(x>=0){ return x; }else{ return -x; } }调用函数test(10); //10 test(-10); //10参数问题：Javascript可以传任意个参数，也可以不传参数假设不存在参数，如何规避？var test = function (x) { //手动抛出异常来进行判断 if(typeof x!== 'number'){ throw 'Not a number'; } if (x>=0){ return x; }else { return -x; } }arguments代表传递进来的所有参数是一个数组var test = function (x) { console.log("x:"+x); for (var i = 0; i<arguments.length; i++){ console.log(arguments[i]); } if (x>=0){ return x; }else { return -x; } }arguments存在的问题：当需要使用多余的参数来进行附加操作时，需要排除已有的参数restES6之前的用法if(arguments.length>2){} for (var i = 2; i<arguments.length; i++){ ...... } }ES6引入的新特性，获取除了已定义的参数之外的所有参数function test(a,b,...rest) { console.log("a:"+a); console.log("b:"+b); console.log(rest); }rest只能写在最后面，必须用 ...rest 标识1.2 变量的作用域function test() { var x = 1; x = x + 1; } x = x + 2; //Uncaught ReferenceError: x is not defined变量x在函数体中声明，在函数体外不可以使用如果两个函数使用的相同的变量名，只要在函数内部，就不冲突内部函数可以使用外部函数的成员，反之不行function test() { var x = 1; function test1() { var y = x + 1; //2 } var z = y + 1; //Uncaught ReferenceError: x is not defined }假设内部函数变量和外部函数变量重名function t() { var x = 1; function t1() { var x = '大写的一'; console.log('inner:'+x); //inner:大写的一 } console.log('outer:'+x); //outer:1 t1(); } t();注：函数查找变量从自身函数开始，由”内“向”外“查找，如果外部存在同名的函数变量，则内部函数会屏蔽外部函数的变量提升变量的作用域function t(){ var x = "abc" + y; console.log(x); var y = 'y'; }结果会报错：x undefinedjs执行引擎自动提升了y的声明，但是没有提升变量y的赋值function t(){ var y; var x = "abc" + y; console.log(x); y = 'y'; }注：所有的变量定义都放在函数的头部，便于代码维护全局函数//全局变量 var x = 1; function t(){ console.log(x); //1 } t(); console.log(x); //1全局对象windowvar x = 123; alert(x); alert(window.x); //默认所有的全局变量，都会自动绑定在winsow对象下alert() 这个函数本身也是一个window变量var x = '123'; window.alert(x); var old_alert = window.alert; window.alert = function (){ } window.alert(123); //失效 //恢复 window.alert = old_alert; window.alert(456);JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），如果没有在函数作用范围内找到，就会向外查找，如果在全局作用域中也没有找到，会报错ReferenceError。规范//唯一全局变量 var test = {}; //定义全局变量 test.name = '孙笑川'; test.add = function (a,b) { return a + b; }把自己的代码全部放入自己定义的唯一空间空间名字中，降低全局命名冲突的问题局部作用域 letfunction t() { for (var i = 0; i < 100; i++){ console.log(i); } console.log(i); //101 }ES6引入let关键字，解决局部作用域冲突问题function t() { for (let i = 0; i < 100; i++){ console.log(i); } console.log(i); //Uncaught ReferenceError: i is not defined }常量 const在ES6之前，全部用大写字母命名的变量就是常量var PI = '3.14'; console.log(PI); //3.14 PI = 'abc'; console.log(PI); //abc，值改变在ES6中引入关键字constconst PI = '3.14'; console.log(PI); PI = 'abc'; //TypeError: Assignment to constant variable console.log(PI);1.3 方法定义方法//将函数放在对象中 var test = { name: 'sun', birth: 1988, //方法 age: function () { var time = new Date().getFullYear(); return time-this.birth; } } //属性 test.name //调用方法 test.age()this代表什么？function getAge() { var time = new Date().getFullYear(); return time-this.birth; } var test = { name: 'sun', birth: 1988, age: getAge } test.age() //2020-1988 getAge() //NaNthis是无法指向的，默认指向调用它的对象apply在js中控制this的指向function getAge() { var time = new Date().getFullYear(); return time-this.birth; } var test = { name: 'sun', birth: 1988, age: getAge } getAge.apply(test,[]); //this指向了test，参数为空
