javaScript Day02

1.函数

1.1 函数定义

绝对值函数

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

一但执行到return，代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果！结果是undefined

调用函数

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

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

参数进来是否存在的问题？假设不存在参数如何规避？

function abs(x){
    //手动抛出异常来判断
    if(typeof x!=='number'){
       throw 'Not a number';
       }
    if(x>=0){
        return  x;
    }else{
        return -x;
    }
}

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

var abs = 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包含所有参数，我们有时候想使用多余的参数，这时候需要排除已有参数

rest ES6新特性，获得除了已定义参数外的所有参数

function aaa (a,b,...rest){
    console.log(a);
    console.log(b);
    console.log(rest);
}

注意：rest只能写在最后面，必须用...标识。

1.2 变量的作用域

在JavaScript中，var定义的变量是有作用域的

假设在函数体中是声明，则在函数体外不可以使用（非要使用的话，可以研究一下闭包）

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

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

function qj(){
    var x = 1 ;
    x = x+1 ;
}
    function qj2(){
    var x = 'A' ;
    x = x+1 ;
}

内部函数可以访问外部函数，反之不行

function qj(){
    var x = 1 ;
    
    function qj2(){
    var y = x+1 ;
      }
    
    var z = y + 1;//Uncaught ReferenceError : y is nou defined
}

假设内部函数变量和外部函数的变量重名，函数查找会从“内” 向“外” 查找，内部函数会屏蔽外部函数

function qj(){
    var x = 1 ;
    
    function qj2(){
    var x = 'A' ;
        console.log('inter'+x);//outer 1
      }
        console.log('outer'+x);//inter A
        qj2()
}
        qj()

养成规范：所有变量的定义都放在头部，不要乱放，便于代码的维护

 function qj2(){
    var x = 'A' ,
        y = 1 ,
        z,i,a;//undefined
     //之后随意用
 }

全局函数

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

全局对象 window

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

alert（）这个函数本身也是一个window的变量

var x = 'xxx';
window.alert(x);
var old = window.alert;
​
window.alert = function(){
}
    window.alert(123);//发现失效了
    //恢复
 window.alert = old;//重新赋值   
 window.alert(123);//有效

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

规范

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

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

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

局部作用域

function aaa(){
    for(var i = 0; i<100;i++)
        console.log(i)
}
        consle.log(i+1);//问题：i出了作用域还可以使用
}

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

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

建议都用let去定义局部作用域的变量

常量const

ES6之前怎么定义常量：只有用全部大写字母定义的变量就是常量，建议不要修改这样的值

var PI = '3.14';
console.log(PI);
PI = '231';//可以改变这个值
console.log(PI);

在ES6引入了常量关键字const

const PI = '3.14';
console.log(PI);
PI = '231';//TypeError ：Assignment to constant variable.
console.log(PI);

1.3 方法

定义方法

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

<script>
       var clm = {
           name:"蔡联明",
           birth:1998,
           //方法
           age:function () {
               //今年-出生年
              var now= new Date().getFullYear();
              return now-this.birth;
           }
       }
       //属性
        clm.name;
       //方法：一定要带（）
        clm.age();
</script>

this：代表什么？拆开看看

function getAge(){
    //今年-出生年
              var now= new Date().getFullYear();
              return now-this.birth;
}
var clm = {
           name:"蔡联明",
           birth:1998,
           age:getAge
}
//clm.age()  ok
//getAge()   NaN

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

apply 在JS中可以控制this指向

function getAge(){
    //今年-出生年
              var now= new Date().getFullYear();
              return now-this.birth;
}
var clm = {
           name:"蔡联明",
           birth:1998,
           age:getAge
};
   getAge.apply(clm,[]);//this指向了蔡联明，参数为空

2.内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolen"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

2.1 Date

基本使用

var now = new Date();//Tue Nov 23 2021 15:49:52 GMT+0800 (中国标准时间) 
        now.getFullYear();//年
        now.getMonth();//月 0~11
        now.getDate();//日
        now.getDay();//星期
        now.getHours();//时
        now.getMinutes();//分
        now.getSeconds();//秒
        now.getTime();//时间戳 全世界统一，从1970.1.1 0:00:00 开始 毫秒数
        console.log(new Date(1637653775526));//时间戳转化为时间

转换

now = new Date(1637653775526)
Tue Nov 23 2021 15:49:52 GMT+0800 (中国标准时间)
now.toLocaleString//注意，调用是一个方法，不是一个属性
f toLocaleString(){[native code]}
now.toLocaleString()//'2021/11/23 下午3:49:35'
now.toGMTString()//'Tue, 23 Nov 2021 07:49:35 GMT'

2.2 JSON

JSON是什么

早期，所有的数据传输习惯使用xml文件

1. JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

2. 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

3. 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在js中一切皆为对象，任何的js支持的类型都可以用JSON表示。

格式：

• 对象都用{ }

• 数组都用[ ]

• 键值对都用 key : value

JSON字符串和JS对象的转化

var user = {
    name:"clm",
    age:18,
    sex:'男'
}
//对象转化为JSON字符{"name":"clm","age":18,"sex":"男"}
var jsonUser = JSON.stringify(user);
//JSON字符串转化为JS对象 参数为json字符串
var obj = JSON.parse('{"name":"clm","age":18,"sex":"男"}');

JSON 和 JS 对象的区别

var obj = {a:'hello', b:'haha'}
var json ='{"a":"hello", "b":"haha"}'

2.3 Ajax

• 原生的JS写法 xhr异步请求

• jQuey封装好的 方法 $("#name").ajax("")

• axios请求

3.面向对象编程

3.1 原型对象

Javascript、Java、c#。。。。都是面向对象，JavaScript有些区别

• 类 模板 原型对象

• 对象：具体的实例

在JavaScript这个需要大家换一下思维方式

原型：

var Student = {
    name:"clm",
    age:3,
    run: function(){
        console.log(this.name + "run...");
    }
};
var xiaoming = {
    name:"xiaoming"
};
//原型对象
xiaoming._proto_ = Student;
​
var Bird = {
    fly:function(){
    console.log(this.name + "fly...");
}
};
//小明的原型是Student
xiaoming._proto_ = Bird;

3.2 class继承

class 关键字是在ES6引入的

定义一个类，属性，方法

//定义一个学生类
class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('hello')
    }
}
var xiaoming = new Student("xiaoming");
var xiaoming = new Student("xiaoli");
xiaoming.hello()

继承：

//ES6之后
//定义一个学生类
class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('hello')
    }
}
class XiaoStudent extends Student {
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是小学生')
    }
}
var xiaoming = new Student("xiaoming");
var xiaoming = new Student("xiaoli"，100);

本质：查看对象原型

3.3 原型链

_ proto_：

4 操作BOM对象（重点）

4.1 浏览器介绍

JavaScript的诞生就是为了能够让他在浏览器中运行。

BOM：浏览器对象模型

• IE 6~11

• Chrome

• safari

• FireFox

三方

• QQ浏览器

• 360浏览器

4.2 window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
258
window.innerWidth
919
window.outerHeight
994
window.outerHeight
919
//调整浏览器窗口试试

4.3 Navigator

Navigator 封装了浏览器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36 Edg/96.0.1054.29'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36 Edg/96.0.1054.29'
navigator.platform
'Win32'

大多数时候我们不会去使用navigator对象，因为可以人为修改。不建议使用这些属性来判断和编写代码

4.4 screen

代表屏幕尺寸

screen.width
1920px
screen.height
1080px

4.5 locaton(重要)

location代表 当前页面的URL 信息

host: "so.lenovo.com.cn"
href: "https://so.lenovo.com.cn/"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('https://mp.csdn.net/mp_blog/creation/editor/121268704')

4.6 document

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

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

获取具体的文档树节点

<dl id = "app">
    <dt>java</dt>
   <dt>javaSE</dt>
   <dt>javaEE</dt>
</dl>
<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie
'Hm_lvt_d8abefda638d1edaed98bbf859238528=1637663956,1637714043,1637735275,1637737706; avt_v=vid%3D%3E17cb6b0aaf90c08%7C%7C%7Cfsts%3D%3E1635152603895%7C%7C%7Cdsfs%3D%3E29932%7C%7C%7Cnps%3D%3E; avt_s=lsts%3D%3E1637738770564%7C%7C%7Csid%3D%3E0540003093%7C%7C%7Cvs%3D%3E6%7C%7C%7Csource%3D%3Edirect%7C%7C%7Cpref%3D%3E%7C%7C%7Cref%3D%3E; Hm_lpvt_d8abefda638d1edaed98bbf859238528=1637738771'

劫持cookie原理

www.taobao.com

<script src="aa.js"></script>
<!--恶意人员会获取你的cookie上传到他的服务器-->

服务器端可以设置cookie：httpOnly

4.7 history

history代表浏览器的历史记录

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

5. 操作DOM（重点）

DOM：文档对象模型

5.1 核心

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

• 更新：更新DOM节点

• 遍历DOM节点：得到DOM节点

• 删除：删除DOM节点

• 添加：添加DOM节点

要操作一个DOM节点，就必须先获得这个DOM节点

5.2 获得DOM节点

//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementsById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementsById('father');
​
var childrens = father.children[index];//获得父节点下的所有子节点
//father.firstChild
//father.lastChild

这是原生代码，之后我们都使用jQuery();

5.3 更新节点

<div id ="id1">
    
</div>
<script>
    var id1 = document.getElementById('id');
</script>

操作文本

• id1.innerText = '456' 修改文本的值

• id1.innerHTML = '123' 可以解析HTML文本标签

操作JavaScript

id1.style.color = 'yelllow';//属性使用字符串包裹
id1.style.fontSize = '20px';//驼峰命名
id1.style.padding = '2em';

5.4 删除节点

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

<div id="father">
    <h1>标题1</h1>
    <p id ="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
    //删除是一个动态过程,方法2
    father.removeChild( father.children[0])
    father.removeChild( father.children[1])
    father.removeChild( father.children[2])//此时没[2]
</script>

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

5.5 插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素，但是这个DOM节点已经存在元素了，我们就不能这么干了，会产生覆盖

追加

<p id='js'>JavaSrcipt</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');//已经存在的节点
    var list = document.getElementById('list');
    list.appendChild(js);//追加到后面
</script>

或者：

<script>
    var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
    //通过js创建一个新的节点
    var newP = document.creatElement('P');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,clm';
    //创建一个标签节点（通过这个属性可以设置任意的值）
    var myscript = document.creatElement('script');
    myscript.setAttribute('type','text/javascript');
</script>

6. 操作表单（验证）

6.1 表单是什么

• 文本框 text

• 下拉框 <select>

• 单选框 radio

• 多选框 checkbox

• 隐藏域 hidden

• 密码框 password

• ...........

表单目的：提交信息

6.2 获得要提交的信息

<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');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value = '123'
    //对于单选框，多选框等固定的值，boy_radio.value只能读取到当前的值
    boy_radio.checked;//查看返回的结果是否为true，如果为true，则被选中
    girl_radio.checked=true;//赋值
</script>

6.3 提交表单 MD5加密

<!--表单绑定提交事件
οnsubmit=绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接收
οnsubmit="return.aaa()"
-->
<form action="https://www.baidu.com/" method="post" οnsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件onclick 被点击-->
    <button type="submit">提交</button>
</form>
<script>
    function aaa(){
        alert(1);
        var name = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var mad5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就通过提交，false阻止提交
        return true;
    }
​
</script>

7. jQuery 公式：$(selector).action()

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。

jQuery 同时提供 companion UI（用户界面）和插件。

许多大公司在网站上使用 jQuery：

学习：

jQuery 删除元素 | 菜鸟教程 (runoob.com)