JavaScript~2
目录
1、函数的定义
方式一：
一个绝对值函数
function abs(x) {
if (x>=0){
return x;
}else return -x;
}
一旦执行到return代表函数结束，返回结果！如果没有执行到return，函数返回undefined！
方式二：
var abc = function (x){
if (x>=0){
return x;
}else return -x;
}function(x){......}是一个匿名函数，但可以把结果赋值给abc，通过abc就可以调用函数。
函数的调用
abs(10) //10
abs(-10) //10
参数问题：javascript可以传递任意个参数，也可以不传递参数。
参数进来是否存在的问题：
假设不存在，如何规避?
var abc = function (x){
//手动抛出异常
if (typeof x!=="number"){
throw 'not no number!!!!';
}
if (x>=0){
return x;
}else return -x;
}arguments
arguments是一个js免费赠送的关键词，代表传递进来的所有参数，是一个数组。
var abc = function (x){
console.log("x=>"+x);
for (var i = 0; i <arguments.length ; i++) {//如果进来的参数多了就通过arguments遍历出来
console.log(arguments[i]);
}
if (x>=0){
return x;
}else return -x;
}
问题：arguments包含了所有的参数，我们有时候想使用多余的参数来进行操作，需要排除定义参数。
关键词：rest
ES6引入的新特性，获取到除了已定义的参数以外的所有参数。
function bbb(a,b,c,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log("c=>"+c);
console.log(rest);
}
2、变量的作用域
在js中，var定义的变量是有作用域的。
假设在函数体中声明，则在函数体外不可用。但想用的话可以研究“闭包”。
function a() {
var x = 1;
x = x++;
}
x = x+2;//自动报错：Uncaught ReferenceError: x is not defined如果两个函数使用同一个变量名，只要在函数内部就不冲突，局域起作用。
function a1() {
var x = 'A';
x = x++;
//alert(x);
}内部函数可以调用外部函数的成员变量，反之不可。
function a2() {
var x = 1;
//内部函数可以访问外部函数成员，反之不可访问；
function a3() {
var y = x + 1;//2
}
var z = y + 1;
}假设内部函数变量和外部函数的变量重名：
function a2() {
var x = 1;
function a3() {
var x = 'A';//2
console.log('inner'+x);
}
console.log('outer'+x);
a3();
}
a2();在js中函数查找变量从自身函数开始，从内向外查找，如果外部存在一个同名的变量，内部函数会屏蔽外部函数的变量。
2.1、提升变量的作用域
function b() {
var x = "x" + y;
console.log(x);
var y = 'y';
}
说明：js执行引擎自动提升y的声明，但不会提升变量y的赋值。（这个在js建立之初就有了）
规范：所有的变量声明要放在函数前面不能乱放，便于维护。
function b() {
var x = "x",
y = x + 1,
z,a,v;//undefined
//后面随意用
}2.2、全局变量
//全局变量
x=1;
function m() {
console.log(x);
}
m();
console.log(x);2.3、全局对象window
var x="xxx";
window.alert(x);
window.alert(window.x);//默认所有的全局变量，都会自动绑定在window对象上
弹窗函数alert()本身也是window变量。
var x="xxx";
window.alert(x);
//window.alert(window.x);//默认所有的全局变量，都会自动绑定在window对象上
var oldalert = window.alert;
oldalert(x);
window.alert = function () {
}
//alert()失效了
window.alert(123);
//恢复
window.alert = oldalert;
window.alert(45645);
Javascript实际上只有一个全局作用域，任何变量（包括函数也可以看作一个变量），如果没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，会报错RefrenceError
规范
由于我们所有的全局变量都绑定在window上，如果不同的js文件使用相同的全局变量会有冲突。
如何减少冲突：
//唯一全局变量
var AAA = {};
//定义全局变量
AAA.name = 'fsdfsdfsdfc';
AAA.add = function (a,b) {
return a + b;
}把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题。
2.4、局部作用域let
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//i出了作用域还能用
}
ES6关键字let，解决局部作用域冲突问题
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}建议都使用let去定义局部作用域的变量
2.5、常量const
在ES6之前，常量约定用大写字母表示，但是可以更改掉。
所以ES6引入了常量关键词const（只读变量）
const PI = '3.14';
console.log(PI);
PI = '123';
console.log(PI);//Assignment to constant variable.at3、方法
方法就是把函数放在对象的里面，对象里只有属性和方法。
var abc = {
name:'sb',
bitrh:2002,
//方法
age: function (){
var now = new Date().getFullYear();
return now - this.bitrh;
}
}
//属性
abc.name
//方法一定要带（）
abc.age()将上述代码拆开
this默认指向调用它的那个对象。
apply
在js中，apply可以控制this的指向。
function getAge(){
var now = new Date().getFullYear();
return now - this.bitrh;
}
var abc = {
name:'sb',
bitrh:2002,
//方法
age:getAge
};
getAge.apply(abc,[]);//this,指向了abc，参数为空4、内部对象
4.1、表准对象
4.2、Date
基本使用
var now=new Date();
now.getFullYear();//年
now.getMonth();//月从0到11，不是1到12
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一
转换
console.log(new Date(1654673023211))//通过时间戳获取标准时间
now.toLocaleString();//转标准时间
4.3、JSON
- JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在Javascript中一切皆对象，任何js支持的类型都可以用JSON来表示。
- 对象用{}
- 数组用[]
- 所有键值对都用key：value
JSON字符串和JS对象的转化
var user={
name:"usb",
age:41,
sex:'男'
}
//对象转化为jaon字符串
var jsonUser = JSON.stringify(user);
//JSON字符串转化为对象
var obj = JSON.parse('{"name":"hhhh","age":16,"sex":"男"}');JSON和JS区别：
var obj1 = {a:'hello',b:'lol'};
var json1 = '{"a":"hello","b":"lol"}';4.4、Ajax
- 原生的JS写法 xhr异步请求
- jQuey封装好的方法$("#name").ajax("")
- axios请求
5、面向对象编程
5.1、原型对象
Javascript、Java、C#等，Javascript有所区别。
类：模板
对象：具体实例
Javascript需要换一下思维
原型：
var Student = {
name:"张三",
age:19,
run: function (){
console.log(this.name+"哈喽world")
}
};
var liming = {
name: "liming",
};
//李明的原型是学生，原型对象是学生
liming.__propt__ = Student;5.2、Class
以前的原型方式：
//以前
function Student(name) {
this.name = name;
}
//给Student新增一个方法
Student.prototype.hello = function (){
alert('hello');
}现在的：
//ES6之后
class student {
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");class student {
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
class xiaoxues extends student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('我是小学生我上'+this.grade+'年级了');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoxues("xiaohong",1);
本质还是原型对象。
原型链
每一个对象都有自己的原型,而原型也是对象,也有自己的原型,一次类推而形成的链式结构就叫做原型链。
7、操作BOM对象
7.1、window对象
window.alert(45151)
undefined
window.innerHeight
51
window.innerWidth
972
window.outerHeight
47
window.outerWidth
911
7.2、navigator
navigator封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/ (KHTML, like Gecko) Chrome/Mobile Safari/537.36 Edg/
navigator.userAgent
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/(KHTML, like Gecko) Chrome/ Mobile Safari/537.36 Edg/
navigator.platform
'Win32'7.3、screen
屏幕
screen.width
911
screen.height
477.4、location当前页面URL信息
host: "www.baidu.com"//主机
href: "https://www.baidu.com/"//当前位置
protocol: "https:"//协议
reload: ƒ reload()//刷新网页
location.assign('https://bilibili.com/')//设置新地址7.5、document
document代表当前的页面，HTML DOM文档树
document.title='哈哈哈哈哈'
'哈哈哈哈哈'获取具体的文档树节点：
<dl id="app">
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取cookie
document.cookie
"_uuid=A33A4CEF-E746-A437-8233-211E75C19F9405110infoc; buvid3=59881AFE-F69F-49A1-8404-\服务器端可以设置cookie：httpOnly只读
7.6、history
代表浏览器的历史记录
history.back()//后退
history.forward()//前进8、操作DOM对象
DOM：文档对象模型
8.1、核心
浏览器网页就是一个DOM树形结构
- 更新DOM节点
- 遍历DOM节点：得到DOM节点
- 删除：删除DOM节点
- 添加一个DOM新节点
要操作一个DOM节点，必须先获取该DOM节点
8.2、获取DOM节点：
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对于css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children;//获取父节点下的所以字节点
father.firstChild;
father.lastChild;
</script>这是原生代码，之后尽量会使用jQuery
8.3、更新节点
操作文本：
id1.innerText='456151654684'//修改文本值
'456151654684'
id1.innerHTML='<strong>123</strong>'//可解析的HTML标签
'<strong>123</strong>'<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作JS
id1.style.color = 'red'
'red'
id1.style.fontSize='100px'
'100px'
id1.style.padding='2em'
'2em'
8.4、删除节点
先获取父节点，再通过父节点删除要删的节点。
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var fathe = p1.parentElement;
fathe.removeChild(p1);
</script>
//注意：删除是一个动态的过程children数组下标会更新
fathe.removeChild(fathe.children[0])
fathe.removeChild(fathe.children[1])
fathe.removeChild(fathe.children[2])8.5、插入节点
获取某个节点后，如果这个DOM节点是空的，则通过innerHTML就可以增加元素，但如果不为空使用innerHTML就会覆盖原内容。
此时可以用追加：
<p id="js">javascript</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p id="me">javaME</p>
</div>
<script>
var
js = document.getElementById('js'),
list = document.getElementById('list');
</script>
创建一个新标签：
<script>
var
js = document.getElementById('js'),
list = document.getElementById('list');
//通过js创建一个新节点
var newP = document.createElement('p');//创建一个P标签
newP.id = 'newP';
newP.innerText = 'hhhhhhhhh';
//通过创建标签节点可以设置任意的值
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
</script>
insertBefore:
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点
list.insertBefore(js,ee);//将js插在ee的前面
9、操作表单（验证）
- 文本框 text
- 下拉框 <select>
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
表单目的是提交信息
9.1、获取提交的信息
<form action="post">
<p>
<span>用户名：</span> <input type="text" id="username">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女
</p>
</form>
<script>
var username = document.getElementById('username');
var boy = document.getElementById('boy');
var girl = document.getElementById('girl');
//得到输入框的值： username.value
//修改输入框的值： username.value = '456'
boy.checked;//查看返回结果，是true则被选中，是false就是没被选中
</script>
9.2、表单验证，MD5加密
<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="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">
</p>
<input type="hidden" id="md5_password" name="password">
<!-- <p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女
</p>-->
<!-- <input type="submit">-->
<button type="button" onclick="aaa()">提交</button>
</form>
<script>
alert(1);
var username = document.getElementById('username');
var boy = document.getElementById('boy');
var girl = document.getElementById('girl');
//得到输入框的值： username.value
//修改输入框的值： username.value = '456'
//boy.checked;//查看返回结果，是true则被选中，是false就是没被选中
function aaa() {
var uname = document.getElementById('username');
var password = document.getElementById('password');
var md5_password = document.getElementById('md5_password');
/* password.value = md5(password.value);//密码加密
console.log(uname.value);
console.log(password.value);*/
// alert(uname.value);
//alert(password.value);
md5_password.value = md5(password.value);
console.log(md5_password);
//true可以提交
return true;
}
</script>
