JavaSricpt学习（基础）

JavaScript

JavaScript简称为js，简单来说就是运行在浏览器上的脚本语言。ps：虽然带有Java，但是js跟java没有关系，当时只是想借助java的名气，不过学习Java后，再学习js相对容易一些。

1，使网页具有交互性，例如响应用户点击，给用户提供更好的体验
2，可以处理表单，检验用户的输入，并提供及时反馈节省用户时间。例如，表单中要你输入电子邮箱而你却输入一个手机号，那么应该给你一个提醒。
3，还可以根据用户的操作，动态的创建页面。例如，发邮件时，添加附件操作。
4，设置cookie，cookie是存储在浏览器上的一些临时信息，例如你浏览过的网站地址，使用过的用户名

书写方式：
1.可以在HTML里面书写，而且js的书写很随意，只要在网页里面就可以实现。
2.也可以像css一样单独写一个js文件，然后链接到HTML里面

<script src="js文件路径">无</script>

js变量：
规范：
1.只能由字母、数字、_（下划线）、$（美元符号）组成。
2.不能以数字开头。
3.命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

    <!--JavaScript严格区分大小写-->
    <script>
        // 定义变量： 类型（var） 变量 = 变量值;
        var a = 12;

        //函数体中声明的变量，则在函数体外不能使用
        //两个函数使用了相同的变量名，只要在函数内部就不冲突
        //内部函数可以访问外部函数的成员，反之不行
        //内外部函数变量重名，则由内向外查找，外部存在，则内部函数屏蔽外部这个重名变量
        //养成规范：所有变量定义都放在函数的头部，便于维护代码
        //全局对象window。其中alert的本身也是一个window变量
        //减少不同js文件相同的全局变量 可以自己设置 如：var Wang ={};
        //局部作用域 let /常量关键字 const
    </script>

js不像Java一样要注重类型的定义，js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型。

检测数据类型：

    /*	typeof(value); 或者typeof value;     返回这个变量的类型. 
    	表示同一个变量, 可以进行不同类型的数据赋值. 如下代码
    */
    <script type="text/javascript"> 
   	var a = 777;
    alert(typeof a); // 输出结果：number
 
    a = "英雄联盟";
    alert(typeof a); //	输出结果：string
 
    a = true;
    alert(typeof a); // 输出结果：boolean
    
   	a=hhh;
    alert(typeof a);  // 输出结果：undefined
</script>

严格检查模式：

    /*使用 "use strict"
        IDEA需要ES6的支持
        "use strict"防止一些因为js的随意性导致的错误
        该语句要放在JavaScript的第一行
        局部变量一般使用let关键字
    */
    <script>
        "use strict";
        let i = 2;
    </script>

操作字符串：

  <script>
        'use strict';
        //d多行字符串的编写  书写：`文字`
        let msg = `
        蓝蓝的天空
        青青的湖水
        `
        //字符串模板 书写：字符串${指定变量} 【和Java中字符串中“+”类似】
        let name ="小心";
        let age = 7;
        let mag = `faker${name}${age}`//输出结果：faker小心7
        //字符切割 substring（2，3） 前闭后开
    </script>

数组：

定义数组

    <script>
        'use strict';
        var arr = [1,3,4,5,6,'1'];
   	</script>

方法 ：
1.indexOf() 查询索引
2.slice() 截取数组的一部分，返回一个新的数组 和string中的substring一样

arr.slice(2,4)
(2) [4, 3]

3.尾部插入push() 尾部弹出一个元素pop()
4.头部插入unshift() 头部弹出一个元素shift()
5.排序sort() 元素反转reverse()

arr.sort()
 [1, "1", 3, 4, 5, 6]
arr.reverse()
(6) [6, 5, 4, 3, "1", 1]

6.concat()不能修改数组，只是返回一个新的数组
7.join()连接符，使用特定的字符串打印拼接数组

arr.join('-')
"1-3-4-5-6-1"

js中的对象:
js对象中属性都是键值对来描述，每个属性之间以逗号隔开，最后一个属性不加逗号。同时，所有的键都是字符串，值是任意对象。

    <script>
        'use strict';
        /*创建对象
	       var 对象名 = {
	       属性名 ： 属性值，
	       属性名 ： 属性值
        */ }
        var person = {
            name: "xiaohu",
            age: 20,
            score: 2200
        }
        //1.赋值和Java中差不多
        //2.可以使用一个不存在的对象，而且不会报错。会显示undefind
        //3.动态删减和添加属性，delete person.name/person.hh="hh"
        //4.判断属性是否在这个对象中 xxx in xxx （'age' in person）
        //5.判断一个属性是否属于对象自身拥有的hasOwnProperty()/person.hasOwnProperty('age')--》true
        let arr = [1,3,5,6,345,23,5,2];
        arr.forEach(function (n) {//forEach遍历数组元素
            console.log(n)
        })
    </script>

函数：

    function 函数名(形式参数){函数体}
    调用函数：函数名(实际参数);
    <script>
    	//一个数的绝对值
        'use strict';
        function absoluteValue(x) {
            if (typeof x !== 'number'){
                throw 'not a number';
            }
            if (x >=0){
                return x;
            }else {
                return -x;
            }
        }
    </script>

function(形式参数){函数体}
调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
定义函数并赋值给变量：var fn = function(形式参数){函数体}
调用函数：fn(实际参数);

<script>
    // 匿名函数 : 没有名称的函数
    var lol = function(x, y) {
        alert(x + "和" + y + "五五开");
    }
    // 调用函数 :
   lol("faker", "lbw");//弹窗出现：faker和lbw五五开
</script>

原型链

简单的回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。
来自《javascript高级程序设计》

原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 proto 指向构造函数的 prototype ，如关系图：

BOM和DOM
BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

    <script>
        //BOM：浏览器对象模型
        //获取浏览器外窗口属性：window.outerHeight  window.outerWidth
        //获取浏览器内窗口属性：window.innerWidth   window.innerHeight
        //屏幕尺寸screen.width   screen.height
        //location代表当前网页URL信息  location.assign()刷新网页
        //document代表当前网页 可以获得具体的文档树节点如：document.getElementById()
    </script>

DOM：Document Object Model（文档对象模型），此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）

    <script>
        //获得Dom节点
        var h2 = document.getElementsByTagName('h2');
        var father = document.getElementById('father');
        var p1 =document.getElementById('p1');
        var p2 = document.getElementsByClassName('p2');
        var child = father.children;//获取父节点下的所有节点
        p1.nextElementSibling;//获取p1的下一个节点，也就是p2
        
	    //修改文本
	    father.innerText = 'gggg';
	    //innerHTML可以解析HTML文本标签
	    father.innerHTML ='<em>3434</em>';
	    //操作css
	    father.style.color = 'red';
    </script>

<script>
    //删除节点过程：先获取父节点，在通过父级节点删除自己
    var self = document.getElementById('id');
    let father = self.parentElement;
    father.removeChild(self);

    //删除是一个动态的过程
    father.removeChild(father.children[0]);
    //删除多个节点的时候要注意children[]的值
</script>

JQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的avaScript框架。jQuery设计的宗旨是“write Less，Do More”，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
简单来说：
jQuery 是一个 JavaScript 库，用很少的代码做更多的事。
jQuery 极大地简化了 JavaScript 编程。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //引入jQuery
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
	<a href="" id="testJquery">点我呀</a>
	<script>
	    //jQuer语法：  $(选择器).action()
	    $('#testJquery').click(function () {
	        alert(3)
	    });
	</script>
</body>