js初学者第5周笔记

bom 常用对象

history：保存当前窗口的历史记录（历史url）
    作用：
      前进：history.go(1);
      后退：history.go(-1);
     *刷新：history.go(0);

location：保存当前窗口的正在打开的url

1、常识：一个url由5部分组成
        http://127.0.0.1:8020/bom02/new/01-3.html
        https://www.baidu.com/s?wd=178&rsv_spt=1&rsv_iqid=0xd702eab1000426fa&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&oq=178%2526lt%253B&rsv_btype=t&inputT=204&rsv_t=8b56iJOG%2B6b45FILzCXex%2FpEHFfVJ6HMrt%2FXQdYMKdOy%2B8bu9OZqejCb14LrHOIywVaU&rsv_sug3=7&rsv_sug1=4&rsv_sug7=100&rsv_pq=a3ee42be00024fae&rsv_sug2=0&rsv_sug4=981
        
        协议：http/https（请求响应模式）/ftp（传输文件）/ws（广播收听模式：直播） - 网页的功能不同
        主机号/域名：www.baidu.com/127.0.0.1 - 主机号不方便记忆所以多半都会购买域名，而且127.0.0.1只能访问自己
        端口号：:8020 - 默认端口：http - 80 https - 443，默认端口可以省略不写
        文件的相对路径：new/01-3.html  /s -百度加密了
        查询字符串：?wd=178&rsv_spt=1... - 表单提交到服务器的东西 - 请求消息

        一般来说一个网址一定由5部分：
            协议://域名:端口号/文件路径?查询字符串

API：跳转
         location="新url"
         location.href="新url"
         location.assign("新url");

         替换后禁止后退：location.replace("新url")

         刷新：location.reload();

navigator：保存了当前浏览器的信息（浏览器的名称/版本号）
    属性：navigator.userAgent;

        根据字符串截取出浏览器名称&版本号：本来的目的是为了做兼容，但是没用
        因为所有的API前辈们都已经设置好了兼容

******event：事件对象
    事件：多半用户触发 或 浏览器自动触发的操作
    1、*绑定事件：3种
        1、在HTML元素上绑定
            <elem on事件名="js语句"></elem>

            缺点：
              1、没有实现JS与HTML的分离 - 要HTML（内容）/CSS（样式）/JS（行为）分离
              2、无法动态绑定事件 - 一次只能绑定一个元素
              3、无法同时绑定多个函数对象

        2、*使用JS的事件属性绑定：
            elem.on事件名=function(){
                js语句
            }
            
            优：1、实现JS与HTML的分离
                2、动态绑定事件
            缺：1、无法同时绑定多个函数对象 - 算不上是缺点，为什么不写一起

        3、使用JS的API绑定事件：
            主流：elem.addEventListener("事件名",callback)
            老IE：elem.attachEvent("on事件名",callback);
            兼容：if(elem.addEventListener){
                 elem.addEventListener("事件名",callback)
                  }else{
                 elem.attachEvent("on事件名",callback);
                  }

            优：1、实现JS与HTML的分离
                2、动态绑定事件
                3、同时绑定多个函数对象
            缺：需要处理兼容性问题

2、事件周期：
       主流：3个
        1、捕获阶段：由外向内，记录着要执行的事件
        2、目标触发：当前点击的元素优先出发
        3、冒泡触发：由内向外的冒泡触发事件
       老IE：2个
        没有捕获阶段

    3、*****获取到事件对象event：

                e=event;

            var target=e.srcElement;

        主流：事件函数中传入一个形参e，就可以自动接住事件对象event
        老IE：window.event;
        兼容：event;不光老IE可用，主流浏览器也可以使用 - 小三上位

        获取到了事件对象event就可以做很多很多的操作了：
          1、*获取鼠标的位置

          2、*阻止冒泡：重要在于面试中/鄙视中，但是开发中绝对不会阻止冒泡，更需要利用冒泡
            主流：e.stopPropagation();
            老IE：e.cancelBubble=true;
            兼容：if(e.stopPropagation){
                e.stopPropagation()
                  }else{
                e.cancelBubble=true;
                  }

          3、***事件委托（利用冒泡）：
            为什么：优化，每绑定一个事件，相当于就创建了一个事件监听对象，创建的对象越多，网页的性能越底下
              建议：建议把事件都绑定在自己的父元素身上一次即可
            获取目标元素：触发的元素 - 永远不变就是你触发到的元素
                      当前元素：this -> 指向多的一批
              主流：e.target;
              老IE：e.srcElement;
              兼容：e.srcElement;不光老IE可用，主流浏览器也可以使用 - 小三上位
              以后事件之中再也不要使用this了

            做一个：计算器、选项卡、轮播...

          4、*阻止浏览器的默认行为：
            哪些：比如：F5带来的刷新，F12带来的控制台，右键带来的菜单框，F11全屏，a自带跳转，submit自带提交...
            主流：e.preventDefault();
            老IE：e.returnValue=false;
            兼容：if(e.preventDefault){
                e.preventDefault()
                  }else{
                e.returnValue=false;
                  }
            
            新事件：
              1、鼠标右击：window.oncontextmenu
              2、键盘事件：window.onkeydown

          5、*获取键盘的键码
            e.keyCode;//不需要记忆，直接输出查看 或 百度 keyCode表

*****客户端存储技术 - 以前使用cookie（缺点：大小有限2kb，30天必死），HTML5提出了一个新概念webStorage：2种（优：大小有限8mb，生命周期无限，缺点：老IE不支持）
    1、localStorage：本地级 - 浏览器关闭甚至电脑关闭，第二天打开依然存在
    2、sessionStorage：会话级 - 浏览器一旦关闭自动死亡
    作用：
      1、数据可以跨页面传输
      2、皮肤、主题
      3、浏览器的历史记录

    语法：非常简单，类似于对象：

        添加：xxxxStorage.属性名="值";
        获取：xxxxStorage.属性名;
        删除：xxxxStorage.removeItem("属性名");//只会删除这一个
        清空：xxxxStorage.clear();//删除所有
    

XAMPP软件 - 中间件
  安装步骤：双击 -> 一路点下去
    Apache - 用于运行PHP环境的服务，点击start
         出现错误：
            1、直接弹出一个警告框，你的电脑里缺少api-ms-win-crt-conio-l1-1-0.dll文件
               解决：粘贴到c:/windows/sysWow64/里面
            2、错误日志：error：apache shutdown unexpectedly - 端口号被占用了
               解决：打开：D:\xampp\apache\conf\httpd.conf文件
                 查找：ctrl+F：listen 80
                 随意换为4位数
                 建议：你能用默认端口就不要去修改他，好处：不需要写出来
            3、切忌安装时一定要安装在盘符下，不可以安装在某个文件夹内
            4、如果以上三种解放方案都不行，说明系统问题-重装系统

    TOMCAT - 用于运行java环境的服务

    如果你的apache成功开始，恭喜你，你的服务器已经开启了（私网）

    如何访问apache服务器：其实apache控制着一个文件夹：D:\xampp\htdocs
        打开浏览器：
            127.0.0.1:端口号
            localhost:端口号
            主机号：代表自己的电脑

    搭建一个自己的服务器端应用：
        把你的任意一个项目 - 复制到D:\xampp\htdocs，把之前的东西删掉

    其他人也可以来访问了：
        打开cmd：iconfig
        将你的ipv4发送到群里，让别人来访问
        172.168.20.xxx

    添加网页小图标：
        随便一张图片：名字改为：favicon.ico
        放到D:\xampp\htdocs

    修改顶级域名：- 假象（没花钱，只有自己用）
        打开C:\Windows\System32\drivers\etc\hosts
        问题1：系统文件不允许你保存，另存为到桌面，拖进去覆盖掉
        问题2：你打开是个白板，没有任何代码

MySQL基本内容
    访问：
    1、图形化界面（更简单更方便） - 傻瓜操作
       要求：同时打开mysql和apache
       访问：127.0.0.1:端口号/phpmyadmin
         localhost:端口号/phpmyadmin

         有的同学可能打不开

    2、*****命令行方式 - 复杂很多，但是才能学到真正的SQL语句
        如何进入数据库：
            必须打开mysql
            1、打开cmd
            2、输入：cd d:/xampp/mysql/bin 回车
            3、登录：mysql -uroot -p 回车 不要加分号
            4、退出：exit

            5、学习SQL语句：关系型数据公用的SQL语句
                1、数据库：
                    创建数据库：CREATE DATABASE IF NOT EXISTS 数据库名称 CHARACTER SET utf8;

                    查看数据库：SHOW DATABASES;

                    切换数据库：USE 数据库名称;

                2、数据表：
                    数据库的数据类型：
                        数值：Int-整型
                              Float/Double-浮点型
                              DECIMAL-精确值
                        字符串：
                              CHAR - 长度固定的
                              VARCHAR - 长度可变的
                        日期：
                              DATE - YYYY/MM/DD
                              DATETIME - YYYY/MM/DD hh:mm:ss
                              TIMESTAMP - 时间戳（标识：唯一不重复的）

                    创建数据库表：
                        CREATE TABLE 表名(
                            字段名 数据类型,
                            ...
                        );

                        举例：
                        CREATE TABLE user(
                            id INT PRIMARY KEY AUTO_INCREMENT,
                            name VARCHAR(30),
                            pwd VARCHAR(30),
                            email VARCHAR(30),
                            vip VARCHAR(1)
                        );

                        主键约束：PRIMARY KEY
                        主键自增：AUTO_INCREMENT

                3、*****数据：4句以后最常用的操作
                    增：INSERT INTO 表名 VALUES(字段值,...);
                        举例：INSERT INTO user VALUES(0,"鲁俊杰","123123","ljj@qq.com","1");

                    删：DELETE FROM 表名 WHERE id=几;
                        举例：DELETE FROM user WHERE id=3;

                    改：UPDATE 表名 SET 字段名=字段值,... WHERE id=几;
                        举例：UPDATE user SET name="雍燕",email="yongyan@qq.com" WHERE id=4;                    

                    查：3种语法：
                        SELECT * FROM 表名;//获取此表所有的数据
                        SELECT * FROM 表名 WHERE id=几;//获取id为几的那一条数据
                        SELECT 字段名,... FROM 表名;//获取此表所有的对应的字段值

PHP：最简单的一门后端语言
   火爆架构：LAMP
   php文件后缀名.php
   1、如何运行php文件：
    ***打开apache，并且将你的项目放到htdocs文件夹中，打开浏览器输入：127.0.0.1:端口号，打开你需要的文件
      
    特殊：其实PHP文件也支持前端代码和PHP代码，以后我们上网时，看到网页后缀.php也不必惊讶 - 比js严格

   2、PHP语法基础：
    1、输出方式：
        1、echo(想要输出的内容); 或 echo 想要输出的内容; - 只能输出4种标准类型，不能输出别的
        2、var_dump(想要输出的内容);//输出数据类型和值

2、变量和常量：
           *1、变量：值可以改变
           语法：$变量名=值;
           注意：使用时$也不能省略

        2、常量：值一旦创建，不可以改变
           语法：const 常量名=值;

    3、*数据类型：
        四种标准/基础类型：
            整型：Int
            浮点型：Float/Double
            布尔：Boolean
            字符串：String - 不太一样
                单引号：直接放纯文本

                双引号：支持放入变量
                    echo "我的名字叫{$name}今年{$age}岁喜欢{$hobby}";

        两种复合类型：
            1、Array - 数组
               创建：
                 1、直接量：$arr=[值1,....]; - 索引数组
                 2、内置函数：$arr=array( - hash数组。其实就是对象
                        "key"=>value,
                        ...
                      )

               访问：$数组名[下标/"自定义"]

               遍历：循环

            2、Object - 面向对象

        两种特殊类型：
            1、Resource - 资源类型：连接上数据库才会看到
            2、Null - 释放内存
                "" - 有值，值为空
                null - 没有

全栈

1、前端->后端：
    前端需要发起请求：
        1、表单请求 提交
            注意：
              1、input必须添加name属性，甚至有的input/textarea/select*option还要添加value属性
              2、form表单必须添加action="服务器端文件的路径";
              3、method到底用get还是post，和后端沟通（安全性为主）
            只负责发送，不负责保存

        2、服务器端 需要接收住 前端传来的 请求消息
            语法：$_GET/POST/REQUEST["input的name的值"];

            REQUEST->请求：能接住一切请求不管是get还是post

  2、后端<->数据库：PHP自带操作MySQL数据的API，只需要学习4句话
    1、创建出连接数据库对象
        $conn=mysqli_connect("hostname","username","userpwd","dbname");

        我们班的固定：
            $conn=mysqli_connect("127.0.0.1","root","","h52106");

    1.5、立马为数据库传输设置中文编码
        mysqli_query($conn,"SET NAMES utf8");

    2、创建SQL语句：
        $sql="INSERT/DELETE/UPDATE/SELECT";

    3、某个数据库要执行某个操作
        $rs=mysqli_query($conn,$sql);
        //$rs：增删改，是一个布尔值，true->成功，false->失败
               查：是一个我们都不认识的结果集：解决将不认识结果集变为我们认识的数据
                mysqli_fetch_row($rs)//一次只能得到一行的数据，是一个索引数组
                   *mysqli_fetch_assoc($rs)//一次只能得到一行的数据，是一个hash数组  
               解决固定套路：
                while(($row=mysqli_fetch_assoc($rs))!=null){
                    $row;//当前行数据，做什么操作就看你了
                }

    4、断开和数据库的连接
        mysqli_close($conn);
    
扩展：<input type="hidden" name="hide" value="登录" /> - 隐藏作用域，不是给用户看/输入，提交时用户后端判断执行不同代码的

    

ajax：asynchronous javascript and xml：直译：异步的javascript和xml
    好处：1、不会让用户等待
          2、不会刷新页面也能和服务器端进行交互（比表单强）
          3、将服务器端的数据获取到前端页面

   使用步骤：4步
    1、创建ajax核心对象xhr
       var xhr=new XMLHttpRequest();

    2、创建和服务器端的连接
       xhr.open("GET/POST","xx.php");

    3、向服务器端发送请求消息
       xhr.send()

        特殊：
          1、GET方式，xhr.send失效，还不能省略，必须写为xhr.send(null)，请求消息需要拼接到url?后面
            xhr.open("GET","xx.php?key=value&key=value...");
            xhr.send(null);

          2、POST方式，xhr.send可用，在之前设置请求头部
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send("key=value&...");

    4、绑定监听状态改变事件
       xhr.onreadystatechange=()=>{
        if(xhr.readyState==4&&xhr.status==200){
            xhr.responseText;//php放在页面上的东西 - 服务器端响应的消息
        }
       }   

    ajax就是固定的方法：难就难在你拿到数据后要干什么