JavaScript
JavaScript
函数
定义函数一（建议）
function abs(x) { if (x>=0){ return x; }else { return -x; } }定义函数二
var abs = function (x) { if (x>=0){ return x; }else { return -x; } }手动抛出异常
var abs = function (x) { if (typeof x!="number"){ throw 'Not a Number' } if (x>=0){ return x; }else { return -x; }}rest
获取除了已经定义的参数之外的所有参数
function aaa(a,b,...rest) { console.log("a=>"+a); console.log("b=>"+b); console.log(rest)}变量的作用域
变量的作用域：内部函数可以访问外部函数的成员，反之则不行
function qj() { var x = 1; //内部函数可以访问外部函数 function qj2() { var y = x+1; //2 } var z = y+1; //Uncaught ReferenceError: y is not defined}内部函数变量和外部函数的变量重名
function qj() { var x = 1; function qj2() { var x = 'A'; console.log('内:'+x); } console.log('外:'+x); qj2();}qj();//函数查找变量从自身开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。规范
由于我们的所有的全局变量都会绑定到我们的window上。如果不同的JS文件，使用了相同的全局变量，冲突~
//唯一全局变量var KuangApp = {};//定义全局变量KuangApp.name = 'Y'KuangApp.add = function (a,b) { return a + b;}把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
建议用let去定义局部作用域变量
function aaa() { for (let i = 0; i <100 ; i++) { console.log(i); } console.log(i+1);}在ES6引入了常量关键字const
const PI = '3.14'; //只读变量console.log(PI);PI = '3.14';方法
var kuangshen = { name:'yrz', birth:'1998', age:function () { var now = new Date().getFullYear(); return now-this.birth; }}//属性kuangshen.name//方法,一定要带 ()kuangshen.age()function getAge () { var now = new Date().getFullYear(); return now-this.birth;}var kuangshen = { name:'yrz', birth:'1998', age:getAge}kuangshen.age() //OKgetAge() //NaN 因为window里面没有.birthapply
在JS中可以控制this指向！
function getAge () { var now = new Date().getFullYear(); return now-this.birth;}var kuangshen = { name:'yrz', birth:'1998', age:getAge}var xiaoming = { name:'xm', birth:'2000', age:getAge}getAge.apply(kuangshen,[]); //this指向了kuangshen，参数为空getAge.apply(xiaoming,[]);内部对象
Date
var now = new Date();now.getFullYear();now.getMonth();now.getDate();now.getHours();now.getMinutes();now.getSeconds();now.getTime(); //时间戳 世界统一 1970 1.1 0:00:00console.log(new Date(1617946876931)) //时间戳转为时间//Fri Apr 09 2021 13:41:16 GMT+0800 (GMT+08:00)now = new Date(1617946876931) //时间戳转为时间//Fri Apr 09 2021 13:41:16 GMT+0800 (GMT+08:00)now.toLocaleDateString()//"2021/4/9"now.toLocaleString()//"2021/4/9下午1:41:16"now.toLocaleTimeString()//"下午1:41:16"now.toGMTString()//"Fri, 09 Apr 2021 05:41:16 GMT"JSON
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示；
格式：
- 对象都用{}
- 数组都用[]
- 所有键值对 都是用key:value
JSON字符串和JS对象的转化
var user = { name : 'yrz', age : 3, sex : '男'}//对象转化为json字符串 {"name":"yrz","age":3,"sex":"男"}var jsonUser = JSON.stringify(user);//json字符串转化为对象 参数为json字符串var obj = JSON.parse('{"name":"yrz","age":3,"sex":"男"}');面向对象编程
原型对象
javascript、java、c#…面向对象；javascript有些区别
-
类：模板
-
对象：具体的实例
但在javascript中这个需要换一下思维方式
原型：
var Student = { name : 'yrz', age : 3, run : function () { console.log(this.name+"run..."); }};var xiaoming = { name : "xiaoming"};//小明的原型是 Studentxiaoming.__proto__ = Student;xiaoming.run()class继承
//ES6 之后 //定义一个学生的类 class Student { constructor(name) { this.name = name; } hello(){ alert(this.name+'hello') } } class Primary extends Student{ constructor(name,grade) { super(name); this.grade = grade; } myGrade(){ alert('I am Primary'); } } var xiaoming = new Student('xiaoming'); var xiaohong = new Primary('xiaohong');操作BOM对象（重点）
screen
screen.width1536screen.height864location（重要）
host: "www.baidu.com"href: "https://www.baidu.com/"protocol: "https:"reload: ƒ reload() //刷新网页//设置新地址location.assign('https://www.bilibili.com/')document
document代表当前的页面
document.title"哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"获取具体的文档树节点
<dl id="app"> <dt>java</dt> <dd>javaSE</dd> <dd>javaEE</dd></dl><script> var dl = document.getElementById('app');</script>获取cookie
document.cookiehistory
history代表浏览器的历史记录
history.back() //后退history.forward() //前进操作DOM对象（重点）
浏览器网页就是一个Dom树形结构
获取DOM节点
<div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p id="p2">p2</p></div><script> //对应 CSS 选择器 var h1 = document.getElementsByName('h1'); var p1 = document.getElementById('p1'); var p2 = document.getElementsByName('p2'); var div = document.getElementById('father'); var children = div.children; //获取父节点下的所有子节点</script>更新DOM节点
<div id="id1"></div><script> var id1 = document.getElementById('id1')</script>//操作文本id1.innerText='text' //修改文本的值id1.innerHTML='123' //可以解析HTML标签//操作JSid1.style.color='red'id1.style.fontSize='200px' //驼峰命名问题id1.style.padding='2em'删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
<div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p id="p2">p2</p></div><script> var self = document.getElementById('p1'); var father = p1.parentElement; father.removeChild(p1) //删除是一个动态的过程</script>插入节点
获得了某个DOM节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但如果这个DOM节点已经存在元素了，就不能这么干，会产生覆盖。
追加：
<p id="js">JavaScript</p><div id="list"> <p id="se">SE</p> <p id="ee">EE</p> <p id="me">ME</p></div><script> var js = document.getElementById('js'); var list = document.getElementById('list'); list.appendChild(js); //追加到后面</script>创建一个新的标签，实现插入：
<p id="js">JavaScript</p><div id="list"> <p id="se">SE</p> <p id="ee">EE</p> <p id="me">ME</p></div><script> var js = document.getElementById('js'); var list = document.getElementById('list'); list.appendChild(js); //追加到后面 var newP = document.createElement('p'); //创建一个p标签 newP.id = 'newP'; newP.innerText = 'hello!YRZ'; list.appendChild(newP); //创建一个标签节点（通过这个属性，可以设置任意的值） var myScript = document.createElement('script'); myScript.setAttribute('type','text/javascript'); //可以创建一个style标签 var myStyle = document.createElement('style'); //创建了一个空的style标签 myStyle.setAttribute('type','text/css'); myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容 document.getElementsByTagName('head')[0].appendChild(myStyle)</script>
