JavaScript学习笔记（下）

 有关前端学习的传送门：

JavaScript的学习笔记上篇：JavaScript学习笔记（上）_爱学习的小船的博客-CSDN博客

CSS 的学习笔记：CSS学习笔记_爱学习的小船的博客-CSDN博客_css笔记

HTML的学习笔记：

HTML5基础知识_爱学习的小船的博客-CSDN博客_html5基础

jQuery的笔记：近期会更新~~

目录 

六、面向对象编程

6.1 什么是面向对象

6.2 面向对象原型继承

6.3 面向对象class继承

七、操作Bom元素⭐

7.1 window⭐

7.2 navigator

7.3 screen

7.4 location⭐

7.5 Document（内容; DOM）

7.6 History

八、操作Dom元素⭐

8.1 获取Dom节点

8.2 更新Dom节点

8.3 删除Dom节点

8.4 创建和插入DOM节点⭐

九、操作表单（验证）

9.1 获得要提交的信息

9.2 提交表单⭐

---

六、面向对象编程

6.1 什么是面向对象

        JavaScrip、Java、c# ……面向对象；但是JavaScript有一些区别！

        关于面向对象，类是模板、 对象是具体的实例

        在JavaScript中，

6.2 面向对象原型继承

    原型继承：可以理解为一个父类

var Student = {
    name:"boot"
    age:3
    run:function(){
        console.log(this.name + " run...");
    }
};

var xiaoming = {
    name:"xiaoming"
};

//原型对象
xiaoming.__proto__ = Student;

   原型链

        原型链就是一个链条，在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象，原型对象都包含一个指向构造函数的指针，自己的对象最终指向object

        xiaoming--->Student--->object-->null

6.3 面向对象class继承

    class继承（ES6引入）：

        1、定义一个类，属性，方法

// 定义一个学生的类
class Student{
    constructor(name){
        this.name = name；
    }

    hello(){
        alert('hello')
    }
}

var xiaoming = new Student("xiaoming");
var boot = new Student("boot");
xiaoming.hello()

        2、继承

class XiaoStudent extends Student{
    constructor(name, grad){
        super(name);  //实现父类的方法
        thiis.grade = grade;
    }

    myGrade(){
        alert("我是一名小学生")
    }

}

var xiaohong = new XiaoStudent("xiaohong", 1);

        本质还是对象原型

七、操作Bom元素⭐

    BOM：浏览器对象模型

•  内核：IE6~11、Chrome、Safari、FireFox
•  三方：QQ浏览器、360浏览器  

7.1 window⭐

        window 代表浏览器窗口，

window.alert(1) //window弹窗，内容是1

window.innerHeight  //内部高度

window.innerWidth  //内部宽度

window.outerHeight  //外部高度

window.outerWidth  //外部宽度

7.2 navigator

        navigator，封装了浏览器的信息（不建议使用）

navigator.appCodeName

navigator.appVersion

navigator.userAgent

navigator.platform //系统的版本
'Win32'

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

7.3 screen

        screen，代表屏幕的尺寸

screen.width

screen.height

7.4 location⭐

        location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/?tn=15007414_12_dg"  // 跳转
protocol: "https:"   // 协议
reload: ƒ reload()  //刷新网页

// 设置新的地址
location.assign("http://www....")

        

7.5 Document（内容; DOM）

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

document.title
'百度一下，你就知道'
document.title = 'hello' //改变标题信息
'hello'


document.cookie  // 可以获取cookie信息
<!-- 恶意人员会获取你的cookie上传到他的服务器 -->

<!-- 获取具体的文档树节点 -->
<dl id="app">
    <dt>java</dt>
    <dt>javaSE</dt>
    <dt>javaEE</dt>
</dl>

<script>
    var dl = document.getElementById('app');
</script>

        服务器端可以设置cookie ：httpOnly

7.6 History

        history代表浏览器的历史记录，可以操作浏览器的前进和后退

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

八、操作Dom元素⭐

    DOM：文档对象模型，

    核心：浏览器就是一个DOM树形结构

• 更新：更新Dom节点
• 遍历dom节点：得到DOM节点
• 删除：删除一个DOM节点
• 添加：添加一个新的节点

8.1 获取Dom节点

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

// 对应css 选择器
var h1 = document.getElementsByTagName('h1');
var id1 = document.getElementById('id1');
var class1 = document.getElementByClassName('class1')

var father = document.getElementById('father'); // 获取有子节点的dom
var childrens = father.children; // 获取父节点下所有的子节点
// father.firstChild
// father.lastChild

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

8.2 更新Dom节点

        先获取dom ，然后使用相应方法

var id1 = document.getElementById('id1');

//操作文本
id1.innerText = '456' //修改文本的值
id1.innerHTML = '<strong>123</strong>' // 可以解析HTML文本标签

// 操作JS
id1.style.color = 'red'; //修改颜色,属性使用 字符串 包裹
id1.style.fontSize = '20px';  //修改字体大小
id1.style.padding = '2em' //修改边界

        

8.3 删除Dom节点

        删除节点的步骤：先获取父节点，通过父节点删除子节点

<div id="father">
    <h1>标题一</h1>

    <p id='id1'>id1</p>
    <p class='class1'>class1</p>
</div>

<script>
    var id1 = document.getElementById('id1');
    var father = id1.parentElement;  //获取要删除节点的父类元素
    father.removeChild(id1)  // 通过父类删除子元素

    // 删除是一个动态的过程，以下分别删除出0、1、2 是不对的，因为删除完0之后，原来1的元素就变成0了
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

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

8.4 创建和插入DOM节点⭐

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

        1、将已存在的节点，追加到其他位置上

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

         效果：

         2、创建新的标签，实现插入

<script>
    // 通过js创建一个新的节点
    var newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'hello!';
    list.appendChild(newP);

    // 创建一个标签节点(通过这个属性，可以设置任意的值)
    var myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');
    list.appendChild(myScript)

    // 可以创建一个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>

        3、插入操作

<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 ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list= document.getElementById('list');
    // 要包含的节点.insertBefore(newNode,targetNode)
    list.insertBefore(js,ee); //js 插入到ee的前边
</script>

         效果如下：

         除此之外，也有其他的一些方法实现替换，删除等操作：

node.removeChild(node.children[i]); //删除节点

node.cloneNode(); //克隆节点

node1.parentNode.replacechild(node2,node1) // 用node2节点替换node1节点

九、操作表单（验证）

    表单是什么？ form、DOM树；   表单的目的：提交信息

• 文本框 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 input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //控制台获取
    input_text.value; //得到输入框的值
    input_text.value ="123"; // 修改输入框的值

    // 对于单选框、多选框等固定的值，用 .value只能获得当前的值，用 .check可以返回是否选中
    boy_radio.value; // 'man'
    boy_radio.checked; // 查看返回的结果，true为选中，flase为未选中
    boy_radio.checked = true; //设置选中
</script>

9.2 提交表单⭐

        1、通过按钮绑定事件 onclick

<form action="#" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username" >
    </p>
    <p>
        <span>密码：</span> <input type="password" id="password" name="password" >
    </p>

    <!-- 按钮绑定事件， onclick被点击-->
    <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
    // function的名字与 onclick关联
    function aaa() {
        var uname = document.getElementById("username");
        var pwd = document.getElementById("password");

        console.log(uname.value);
        console.log(pwd.value);
        pwd.value = "*******"; // 用来防止后台 在post包中看到密码

    }
    
</script>

        2、通过表单提交的方法 onsubmit

<!--表单绑定提交
onsubmit= 绑定一个提交检测的函数
-->
<form action="#" method="post" onsubmit="return bbb()">
    <p>
        <span>用户名：</span> <input type="text" id="username" >
    </p>
    <!-- 多选框的值 就是定义好的value -->
    <p>
        <span>密码：</span> <input type="password" id="password" >
    </p>

    <!-- 绑定事件， onclick被点击-->
    <!--    <button type="submit" onclick="aaa()">提交</button>-->
    <button type="submit">提交</button>
</form>

<script>
    function bbb() {
        var uname = document.getElementById("username");
        var pwd = document.getElementById("password");
        pwd.value = "*******"; // 用来防止后台 在post包中看到密码
    }
</script>

        3、MD5加密

        先在head中加入以下代码

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

        在处理函数中，使用md5()方法，如下

pwd.value = md5(pwd.value);  //planA:对pwd框的value进行加密，还赋值给自己

md5pwd.value = md5(pwd.value);  //planB:也可以多声明一个隐藏框，把输入框的赋值给加密的框中，这样更安全

        以planB 和表单提交方法综合为例，代码如下

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--表单绑定提交
onsubmit= 绑定一个提交检测的函数 加了一个return 来过滤请求
-->
<form action="#" method="post" onsubmit="return bbb()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <!-- 多选框的值 就是定义好的value -->
    <p>
        <span>密码：</span> <input type="password" id="password" >
    </p>
    <!-- 隐藏提交 -->
    <input type="hidden" id="md5-password" name="password">

    <button type="submit">提交</button>
</form>

<script>   
    function bbb() {
        var uname = document.getElementById("username");
        var pwd = document.getElementById("password");
        var md5pwd = document.getElementById('md5-password');

        md5pwd.value = md5(pwd.value); //用MD5加密
        // 可以校验判断表单内容，true 通过提交，false 阻止提交
        return true
    }
</script>


</body>