JavaScript的简单了解

一 概念

1.JavaScript

是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能。
为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

2.浏览器分成两部分

渲染引擎：用来解析HTML与CSS，俗称内核。
JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行

3.javascript有三种引入方式

<!-- 引入 js第一种方式 行内引入 注意是单引号 行内引入方式必须结合事件来使用 其他两种引入不需要-->
        <button onclick="alert('第一种引入方式')">第一种引入方式</button>
<!--第二种引入方式 内部引入 在head或body中，定义script标签，然后在script标签里面写js代码-->
    <script type="text/javascript">
         alert("第二种引入方式");
    </script>

<!--外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点-->
<script type="text/javascript" src="1.js"></script>

alert("第三种方式 外部引入");

4.基本知识

1. console.log 浏览器的console打印输出信息-
2. alert() 主要用来显示消息给用户
3. 通过控制台输出的颜色判断 数据类型
   数字 浏览器的console输出的是蓝色
   String 黑色
   undefined 和 null 灰色
   

5. prompt(info)浏览看弹出输入框，用户可以输入

6. 作用域`

全局作用域  作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
局部作用域  作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域
块作用域由 {} 包括`在其他编程语言中 如 在 if 语句、循环语句中创建的变量

7. 变量

 变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间

       var name='lx';
        var  age=18;

8. 一些符号和流程控制（大致都和java一样）

<!--    === !== 全等 要求值和数据类型都一致-->
<!--for if 什么的和Java一样-->

9. 数据类型转换

数据类型转换  使用表单、prompt 获取过来的数据默认是字符串类型的
转换为字符串类型 toString() String(num) +和字符串拼接的结果都是字符串
转换为数字型  parselnt(string)函数 Number()强制转换函数
转换为布尔型      Boolean()函数

      var num=123;
        var str = 'sr'+num;
        alert(typeof str)//string
        var str1= '13';
        num1 = Number(str1)
        alert(typeof num1) //number

10. 一些特殊的

<!--JS中数值的最大值：Number.MAX_VALUE-->
<!--JS中数值的最小值：Number.MIN_VALUE-->
<!--一个声明后没有被赋值的变量会有一个默认值 undefined-->
<!--一个声明变量给 null 值，里面存的值为空-->

11. js解释器运行

解释运行js代码的时候 
第一步 预编译  把所有var 和 function 的 变量名称 提升到当前作用域的最前面 即声明但不赋值
第二步 代码执行 按照代码书写的执行顺序执行

12. innerHTML和innerText

//         <h1>文哈哈</h1>
//h1.innerText 即只识别文本内容不识别标签内容(标签的效果也不识别，相邻的标签分隔开)      得到 文哈哈
//h1.innerHTML 识别 h1包含的所有内容
//所以我们可以通过 JS 修改元素的大小、颜色、位置等样式。
//    JS 修改 style 样式操作 ，产生的是行内样式，CSS权重比较高
//    可以在修改前把其样式 为空 然后再嵌入自己的样式 btn.style.backgroundColor = '';
//元素 可以自定义属性  setAttribute removeAttribute getAttribute 等方法操作属性

二 基础

1. 函数

    // 函数在使用时分为两步：声明函数和调用函数
    // 1.函数的声明 function 函数名(参数){ 函数体 } 2.调用  函数名();
    function f() {
        //会显示2次alert
        <!--这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false，如果不是数字返回的是true-->
        alert(isNaN(age));
        <!--typeof 可用来获取检测变量的数据类型 null 是object 其它均正常返回-->
        alert(typeof name);
        //    实参个数多于 形参个数 只取到形参的个数 500
        //实参个数小于形参个数 多的形参定义为undefined，结果为NaN


    }
    f();
    // 这是函数表达式写法，匿名函数后面跟分号结束
    var fn = function () {
        console.log("匿名函数")
    };
    // 匿名函数调用的方式，函数调用必须写到函数体下面
    fn();
    //传递参数时 不用说明参数类型
    function f1(param1, param2) {
        //arguments展示形式是一个伪数组，因此可以进行遍历 所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参
        arguments.length;
    }

2. JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象

    // 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能
    // JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

查文档 https://developer.mozilla.org/zh-CN/

3. DOM

   // 文档对象模型（Document Object Model，简称 DOM） DOM 接口可以改变网页的内容、结构和样式
    // 文档：一个页面就是一个文档，DOM中使用doucument来表示
    // 元素：页面中的所有标签都是元素，DOM中使用 element 表示

常用的方法

    //console.dir() 可以打印我们获取的元素对象
        // 使用 getElementByld() 方法可以获取带ID的元素对象
        document.getElementById('标签的id名')
    //    根据标签名获取 返回的是数组 即调用时 用下标
        document.getElementsByTagName("div")
    //    根据类名返回元素对象合数组
        document.getElementsByClassName('类名');
    //    根据指定选择器返回第一个元素对象 .类名 #id名 也一直接输入标签名
       document.querySelector('.uid');
    //   根据指定选择器返回所有元素对象
        document.querySelectorAll('div');
    // 也可以是body,html元素对象
        document.body;

4.练习

<button>按钮1</button>
    <script type="text/javascript">
        //获取button对象 并命名为btn
        var btn=document.querySelector('button')
        //设置btn的点击事件
        btn.onclick =function f() {
            //用变量res 获取 prompt输入的结果 注意是字符串
            var res=prompt('你的密码');
            // 结果进行判断
            if (res=='123'){
                alert('密码输出正确')
            }else{
                alert('密码错误')
            }
        }
    </script>

5… 节点的概念

    //1.网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
    //2.所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
    //3.节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
    //4. <h1><h2></h2><h3></h3></h1> h1是 h2和h3的父节点 h2和h3兄弟节点
    //5.   可以复制node.cloneNode()   添加 node.appendChild(child) node.insertBefore(child,指定元素)
    //  删除 node.removeChild(child)创建节点 document.createElement('tagName');


    var ol = document.querySelector('ol');
    // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
    console.log(ol.firstChild);
    console.log(ol.lastChild);
    console.log(ol.lastElementChild.outerHTML);//输出：<li>我是li5</li>
    console.log(ol.children[0]);			//第一个子元素节点
    //   其他都是一大堆 outerHTML:    outerText: "我是li1"

6… 事件

事件 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
事件三要素
事件源(谁)
事件类型(什么事件)
事件处理程序(做啥)

//(1) 事件源 事件被触发的对象   谁  按钮
    var btn = document.getElementById('btn');
    //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
    //(3) 事件处理程序  通过一个函数赋值的方式 完成
    btn.onclick = function () {
        alert('点秋香');
    }
    // 执行事件步骤
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    var div = document.getElementsByTagName('div');
    // 2.绑定事件 注册事件
    // div.onclick
    // 3.添加事件处理程序
    //getElementsByTagName 注意这个返回值是数组 即div是数组所以要进行遍历
    for (let i = 0; i < div.length; i++) {

        div[i].onclick = function () {
            console.log('我被选中了');
        }
        div[i].style.width = '200px';

    }

<button>按钮1</button>
<button>按钮2</button>
<div>事件对象</div>
<a href="/www.baidu.com">阻止默认行为</a>
<script type="text/javascript">
    //给元素添加事件，称为注册事件或者绑定事件。
    // 注册事件有两种方式：传统方式和方法监听注册方式
    //1.传统方式  即不添加监听 此时下面的点击函数会把上面的覆盖 只能得到冒泡阶段
    var btns = document.querySelectorAll('button');
    btns[0].onclick =function (){
        alert("第一个函数");
    }
    btns[0].onclick =function (){
        alert("第二个函数");
        btns[0].onclick=null; //解绑事件
    }
    //2.监听注册方式
    // 好处 定义的两次函数中都能被调用
    //    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    //  type 即 click或者 mouseout等事件 相当于传统的去掉 on  listener即监听事件 即当发生type时 所执行的操作
    //  最后一个参数是关于冒泡或捕获的 默认为false即冒泡  如<div id="1"><h1 id="2"></h1></div>
    // 冒泡： 当你点击"2"中的元素“1”肯定也会触发 因为1包含2 从小到大执行   捕获就是：冒泡的逆过程 从大到小执行
    //有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
    btns[1].addEventListener("click",function (){
        alert('第一次调用');

    },false)
    btns[1].addEventListener("click",remain)
    function remain (){
        alert('第二次调用');
        //移除事件
        btns[1].removeEventListener("click",remain);
    }
//    事件对象
    var div = document.querySelector('div');
    div.onclick = function(e) {
        console.log(e);
    }
    // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
    // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的
    // 3. 事件对象 是 我们接受事件的一系列相关数据的集合 跟事件相关的 比如判断用户按下了那个键等
    // 4. 可修改参数名 比如 e
//    阻止事件的默认行为  有大用！！！
     var pre_even =document.querySelector("a");
        pre_even.addEventListener("click",  function (e) {
            //阻止其调转行为
            e.preventDefault();
        //    阻止冒泡 e.stopPropagation();
        //      事件委托  为每个字节点 设置一个事件麻烦 直接给其父节点设置其事件  e.target.style.backgroundColor=black e.target点击的对象
        })
        //禁止右键菜单 即右键不能使用
        document.addEventListener("contextmenu",function (e){
            e.preventDefault();
        })
        //禁止选中
        document.addEventListener("selectstart",function (e){
            e.preventDefault();
        })
//    e.clientX  返回鼠标相对于浏览器窗口可视区的X坐标 e.pageX（重点） 返回鼠标相对于文档页面的X坐标 e.screenX 返回鼠标相对于电脑屏幕的X坐标
//    keyup 某个键盘按键被松开时触发  onkeydown 某个键盘按键被按下时触发 keyCode 返回该键值的ASCII值

</script>

7. 练习 判断用户名是否是手机号

<body>
    <form action="success.html">
        用户名<input type="text" class="un" name="username"><br>
        密码 <input type="password" class="pwd"><br>
        <input type="submit" class="st">
    </form>
<script type="text/javascript">
    //获取提交时的标签 并命名为st
   var st= document.querySelector('.st')
    //st点击时
    st.onclick =function (e) {
       //获取用户名  .value是获取用户输入的值
        var un=document.querySelector('.un').value;
        //判断用户名是否输入的是手机号  （不要管看的懂，知道是正则就行）
        if (!(/^1[3|5|8][0-9]\d{4,8}$/.test(un))){
            //不是手机号
            alert(false)
            //通过事件e 阻止其默认的跳转
            
            e.preventDefault();
        }else {
            //即输入的是手机号 会跳转到success页面
        }
    }


</script>

8. 对象

<script>
    //基于ES6
    //和java中的类 相关概念相同 万物皆是对象
    // 类必须使用new 实例化对象
    //constructor函数 构造器函数
    //方法之间不能加逗号分隔，同时方法不需要添加 function 关键字
    // ES5 构造函数相当于类 其中静态成员 相当于 成员属性 实例成员相当于形参
    //每一个构造函数都有一个prototype属性定义的是不变的 所有对象的实例就可以共享这些方法
    Star.prototype.sing = function() {console.log('我会唱歌');}
    // 1. 利用 new Object() 创建对象
    var obj1 = new Object();

    // 2. 利用对象字面量创建对象
    var obj2 = {};

    // 3.利用构造函数创建对象
    function Star(uname,age) {
        this.uname = uname;
        this.age = age;
        this.sing = function() {
            console.log('我会唱歌');
        }
    }
    var ldh = new Star('刘德华',18);

//new 在执行时会做四件事

// 在内存中创建一个新的空对象。
// 让 this 指向这个新的对象。
// 执行构造函数里面的代码，给这个新对象添加属性和方法。
// 返回这个新对象（所以构造函数里面不需要 return ）。

    //6种函数

        // 函数的不同调用方式决定了this 的指向不同
        // 1. 普通函数 this 指向window
        function fn() {
        console.log('普通函数的this' + this);
    }
        window.fn();
        // 2. 对象的方法 this指向的是对象 o
        var o = {
        sayHi: function() {
        console.log('对象方法的this:' + this);
    }
    }
        o.sayHi();
        // 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
        function Star() {};
        Star.prototype.sing = function() {

    }
        var ldh = new Star();
        // 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
        var btn = document.querySelector('button');
        btn.onclick = function() {
        console.log('绑定时间函数的this:' + this);
    };
        // 5. 定时器函数 this 指向的也是window
        window.setTimeout(function() {
        console.log('定时器的this:' + this);

    }, 1000);
        // 6. 立即执行函数 this还是指向window
        (function() {
        console.log('立即执行函数的this' + this);
    })();
//        call() apply() bind() 都可以改变函数内部的 this指向
//     call和apply会调用函数，并且改变函数内部的this指向
//     call和apply传递的参数不一样，call 传递参数，apply 必须数组形式
//     bind不会调用函数，可以改变函数内部this指向


</script>

    //    创建对象
    //    1.匿名
    var star = {
        // 多个属性或者方法中间用逗号隔开
        name: 'pink',
        age: 18,
        sex: '男',
        sayHi: function () {
            alert('大家好啊~');
        }
        // 方法冒号后面跟的是一个匿名函数
    };
    star.sayHi();

    var obj = new Object(); //创建了一个空的对象
    obj.name = '张三丰';
    obj.age = 18;
    obj.sex = '男';
    obj.sayHi = function() {
        console.log('hi~');
    }

    //1. 构造函数名字首字母要大写
    //2. 构造函数不需要return就可以返回结果
    //3. 调用构造函数必须使用 new
    //4. 我们只要new Star() 调用函数就创建了一个对象
    //5. 我们的属性和方法前面必须加this
    function Star(uname,age,sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function(sang){
            console.log(sang);
        }
    }
    var ldh = new Star('刘德华',18,'男');
    console.log(typeof ldh) // object对象，调用函数返回的是对象

    //new 在执行时会做四件事:
    // 在内存中创建一个新的空对象。
    // 让 this 指向这个新的对象。
    // 执行构造函数里面的代码，给这个新对象添加属性和方法
    // 返回这个新对象（所以构造函数里面不需要return）

三 BOM

1. 概念

BOM Browser Object Model 浏览器对象模型。
把 浏览器当作一个对象来看待。顶级对象 window
比 DOM 更大。它包含 DOM
BOM 学习的是浏览器窗口交互的一些对象
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法。
BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

2. window.onload()

  // 1.window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等）
    //2.window.onload 属于传统注册事件方式，只能写一次 所以可以用addEventListener去注册多次
    // 3.有了window.onload就可以防止找不到元素了
    var  btn = document.querySelector("button");
    btn.addEventListener('load',function (){
        alert('无论button在哪，都不会找不到')
    })
    btn.addEventListener('DOMContentLoaded',function(){
        alert('比load加载更快一些')
        // DOMCountentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等


    })

3. window.onresize

是调整窗口大小加载事件（就是该页面的窗口大小），当触发时就调用的处理函数。
我们经常利用这个事件完成响应式布局。通过window.innerWidth （当前屏幕的宽度）进行操作

4. 定时器

    // setTimeout(调用函数,[延迟的毫秒数]) 即n秒后执行函数 默认是0，单位为毫秒
    //clearTimeout(timeoutId)方法取消了先前通过调用 setTimeout()建立的定时器 timeoutId即接收的变量
    //setInterval(函数，间隔的毫秒数)定时器 每隔 n毫秒 调用一次
    //clearInterval (IntervalId) 方法取消了先前通过调用 setInterval() 建立的定时器

5. this指向

    // 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
    // 方法调用中谁调用this指向谁
    // 构造函数中this指向构造函数实例

6. 其他`

  //js执行机制
    //属于单线程 ，前一个任务结束，才会执行后一个任务
    //js中同步:前一个任务结束后再执行后一个任务
    //  异步：在做这件事的同时，你还可以去处理其他事情
//    异步操作：普通事件，如click,resize等  资源加载，如load,error等  定时器，包括setInterval,setTimeout等
    //异步就是把回调函数 放在任务队列里  而非回调函数的放在执行栈里 等执行栈里的方式执行完毕之后才会执行任务队列里面的
    //如setTimeout设置3秒 会在 任务队列里执行  如果在次期间有个点击函数  也会在任务队列里面
    //任务队列里面的事件 是会循环遍历的 如果有些行为事件先发生则先执行 同时发生则先进先出的原则

    //window 对象给我们提供了一个 location属性用于获取或者设置窗体的url，并且可以解析url统一资源定位符（uniform resouce locator）
    //location.href     获取或者设置整个URL
    //location.search    返回参数 获取的参数  ?key=value
    // 即需要处理  var params = location.search.substr(1);key=value  var arr = params.split('=');变成数组，用下标可获取["uname", "ANDY"]

7. 判断手机端还是电脑端

   //navigator.userAgent主要用来判断手机端还是电脑端

    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        window.location.href = "";     //手机
    } else {
        window.location.href = "";     //电脑
    }
    //history forward()前进  back() 后退
    history.go();//参数如果是 1 前进1个页面 如果是 -1 后退1个页面