MySQL入门JavaScript知识点自学

MySQL入门JavaScript知识点自学，整理了MySQL入门Canal知识点、JavaScript的内容，欢迎一起学习。

MySQL入门CanalJavaScript知识点自学

• MySQL入门Canal知识点
  • 基于MySQL的主从复制原理
    • 主机
      • BinaryLog
    • 从机
      • I/O Thread
        • Write
          • RelayLog
            • SQL Thread
              • Replay
    • 步骤
      • Master主库将改变记录，写到二进制日志(binary log)中
      • Slave从库向mysql master发送dump协议，将master主库的binary log events拷贝到它的中继日志(relay log)；
      • Slave从库读取并重做中继日志中的事件，将改变的数据同步到自己的数据库。
    • 图示
  • MySQL的binlog
    • binlog是什么
      • 记录了所有的DDL和DML(除了数据查询语句)语句，以事件形式记录，还包含语句所执行的消耗的时间，MySQL的二进制日志是事务安全型的
    • binlog的功能
      • 主从复制
      • 数据恢复
    • binlog的组成
      • 二进制日志索引文件（文件名后缀为.index）用于记录所有的二进制文件
      • 二进制日志文件（文件名后缀为.00000*）记录数据库所有的DDL和DML(除了数据查询语句)语句事件
    • binlog的开启与分类设置
      • 开启
        • vim /etc/my.cnf
          • log-bin=mysql-bin
      • 分类设置
        • vim /etc/my.cnf
          • binlog_format=row
            • statement
              • 语句级，binlog会记录每次一执行写操作的语句
                • 优点：节省空间
                • 缺点：易造成数据的不一致
            • row
              • 行级， binlog会记录每次操作后每行记录的变化
                • 优点：保持数据的绝对一致性
                • 缺点：占用较大空间
            • mixed
              • statement的升级版
                • 节省空间，同时兼顾了一定的一致性
                • 还有些极个别情况依旧会造成不一致，另外statement和mixed对于需要对binlog的监控的情况都不方便
  • Canal的适用场景
    • 原始场景
    • 常用场景
      • 更新缓存
      • 抓取业务数据新增变化表，用于制作拉链表
      • 抓取业务表新增变化数据，用于制作实时统计
• JavaScript
  • first
    • Javascript简介
      • Javascript是什么 Javascript是一种脚本语言，无需编译即可运行，也不需要在服务器上或在命令行执行，编写、执行、调试和应用Javascript脚本只需要文本编辑器和浏览器即可，而这两者在所有操作系统中都提供。 为什么要使用Javascript HTML网页是静态网页，网页状态是固定不变的。如果想改变网页内容或使用用户输入的数据，就要使用动态技术，如JSP、PHP、ASP、ASP.NET等将表单或者参数把信息发送到服务器。然后由服务器完成计算、测试、数据库查找等，再生成一个HTML文档返回给用户浏览器查看。但如果任何一个小变化都要将这个过程重复一遍的话，就会显得笨重缓慢，并且还可能冒着页面加载失败的风险。所以我们需要更加灵活的技术，能让我们不需要任何一个小改变都需要重新加载整个文档，能快速地获得错误提示。这时Javascript就有用武之地了。 有了Javascript，就可以减少与服务器交互的成本，并且使网站运行更快，丰富界面，增强界面交互性。 Javascript历史简介 Javascript虽然名字带Java，有些语法也接近（Javascript和Java语法同样大量借鉴了C语言语法），但其与Java语言没什么关系。 网景公司的Netscape Navigator获得成功后，打算在Netscape Navigator2版本开发了一种名为LiveScript的在客户端运行的脚本语言，用以解决客户端表单验证的问题。并在1996年发布前夕，为搭上媒体热炒Java的顺风车，把LiveScript改名为Javascipt。 Javascript推出后获得了巨大成功，微软随后也发布了自己的类Javascript语言——Jscript，两者都共同遵守一种名为ECMAScript的新脚本语言的标准，因此大大推动了Javascript的开发步伐。 今天，Javascript已经成为浏览器标准扩展。因为有了Javascript，我们才可以享受谷歌地图、搜索关键字提示、表单验证提示等等Web程序带给我们的便捷。 Javascript的实现 一个完整的Javascript实现由下列三个不同的部分组成：  ECMAScript ECMAScript是符合ECMA-262规范的脚本语言，现在主流浏览器都支持 ECMAScript3.X版本。ECMA-262规范规定了这门语言下列组成部分： 语法 类型 语句 关键字 保留字 操作符 对象 文档对象模型（DOM） 文档对象模型（DOM，Document Object Model）是针对XML但经过扩展用于HTML的应用程序编程接口（API，Application Programming Interface）。DOM把整个网页页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点。1998年10月W3C推出了DOM的标准。 这个页面可映射为这样的一个分层节点结构：  浏览器对象模型（BOM） 浏览器对象模型（BOM，Browser Object Model），使用BOM可以控制浏览器显示的页面以外的部分。BOM真正与从不同的地方（也是经常会导致问题的地方），还是它作为Javascript实现的一部分，至今仍没有相关的标准。 人们也习惯把所有针对浏览器的Javascript扩展算作BOM的一部分，例如： 弹出新浏览器窗口的功能 移动、缩放和关闭浏览器窗口的功能 提供浏览器详细信息的navigator对象 提供浏览器所加载页面的详细信息的location对象 提供用户显示器分辨率详细信息的screen对象 对cookies的支持 像XMLHttpRequest和IE的ActiveXObject这个的自定义对象
    • Javascript基础知识
      • Javascript语法大量借鉴了C语言及其他类C语言的语法，因此，熟悉这些语言的开发人员在使用Javascript时，会有一种轻松自在的感觉。 1. 区分大小写 Javascript下一切变量、函数名和操作符都区分大小写 2. 标识符 所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。 关键字：Javascript已经定义了一组具有特殊特用途的标识，称之为关键字  保留字：Javascript还定义了一组未定义用途的，但预留将来用作关键字的标识，称之为保留字  标识符的规则： 第一个字符必须是一个字母、下划线或一个美元符号 其它字符可以是字母、下划线、美元符号或数字 不能把关键字、保留字用作标识符 一般来说，Javascript标识符采用驼峰大小写格式，第一个字母小写，剩下的每个有意义的单词的首字母大写。如：firstJavascript、myCar。虽然这种格式是非强制性的，但为了和Javascript内置的函数和对象命名格式保持一致，建议采用这种命名方法。 3. 注释 Javascript的注释使用C语言风格的注释，分单行注释和块级注释。 格式如下： // 单行注释 /* 块级注释 */ 4. 语句 Javascript语句以一个分号结尾，如果省略分号，将由解析器确定语句的结尾。 注意： ** 虽然语句结尾不是必须要加分号，但建议任何时候都不要省略它。因为加了分号，开发人员可以放心地删除多余的空格来压缩Javascript代码；另外解析器也不需要花时间推测在那里插入分号，从而增进代码的性能。 ** 虽然控制语句只有执行多条语句的情况下才要求使用代码块，但最好始终在控制语句中使用代码块，即使代码块中只有一条语句，这样可以让编码意图更加清晰，降低修改代码时出错的几率。
    • 变量和数据类型
      • 1. 变量 Javascript变量是松散类型的，可以用来保存任何类型的数据。或者说，在Javascript里，每个变量只是一个保存值的占位符而已。 格式： var identification; var identification = "xx"; idenetification = "xx"; //有效，但不推荐这种定义方式 ** var操作符不是必须的。如果不使用var操作符定义变量，则该变量为全局变量；如果使用var定义，则该变量是一个局部变量 2. 数据类型 Javascript有5种简单数据类型，也称基本数据类型： Undefined Null Boolean Number String 还有一种复杂数据类型：Object —— Object本质上是由一组无序的名值对组成的。 ** Javascript不支持任何创建自定义类型的机制，所有值都将是上述6种数据类型之一。由于Javascript数据类型具有动态性，因此使用上述6种数据类型也可满足用户需求。 2.1 typeof操作符 typeof操作符是用来检测变量的数据类型的。 格式： var varType = typeof(variable); 其返回值可能为： undefined —— 值没定义 boolean —— 布尔值 number —— 数值 string —— 字符串 object —— 对象或null function —— 函数 2.2 undefined类型 使用var声明一个变量但未对其加以初始化时，这个变量的值就是undefined 例： var message; alert(message == undefined); //值为true 2.3 null类型 null类型是只有一个值的数据类型，这个特殊的值是null。null表示一个空对象指针，所以使用typeof操作符检测时会返回object类型。当一个变量准备用来保存对象时，可将其初始化为null。 例： var car = null; alert(typeof(car)); 2.4 boolean类型 boolean类型只有两个值，其它类型都有与boolean值等价的值，可以使用Boolean()函数来实现值的转型。 例： var message = "hello"; var bool = Boolean(message); //布尔值转换 2.5 number类型 number类型包括整数和浮点数。 例： var intNum = 55; //十进制 var octalNum = 073; //八进制 var hexNum = 0x1f; //十六进制 var floatNum = 1.1; var floatNum = .1; //0.1 var floatNum = 1.0 NaN （Not a Number，非数值） 2.6 String类型 string类型是由零个或多个16位字符组成的字符序列，字符串可以由双引号民或单引号表示 2.7 object类型 object类型就是一组数据和功能的集合 例： var o = new object();
    • 表达式与运算符
      • 1. 操作符 1.1 一元操作符 递增和递减操作符：--、++ 1.2 位操作符 非（NOT）~ 与（AND）& 或（OR）| 异或（XOR）^ 左移、右移 > 1.3 布尔操作符 逻辑非 ! 逻辑与 && 逻辑或 || 1.4 乘性操作符 乘和除 * / 1.5 加性操作符 加和减 + - 1.6 关系操作符 大于，小于，小于等于和大于等于 = 1.7 相等操作符 相等、全相等产、不相等、不全等 == === != !== 1.8 条件操作符 例：var variable = boolean_expression? true_value : false_value; 1.9 赋值操作符 =号及复合赋值操作符
    • 控制语句
      • 控制语句 1. if语句 2. do while语句 3. while语句 4. for语句 5. for in语句 6. label语句 7. break和continue语句 8. with语句 9. switch语句
    • 常用方法及数组
      • 常用方法 isNaN(判断内容); //判断是否是非数值 parseInt(内容); //将内容转换成为整型 parseFloat(内容); //将内容转换成为浮点数 encodeURI(字符串); //将字符串转换成为URI编码 decodeURI(字符串); //将URI编码字符串解析为字符串 string.split(分割符); //将字符串按分割符分割为数组 string.indexOf(字符串); //返回string中匹配字符串的位置，无则返回-1 数组 定义数组： var arr = new Array(); var arr = new Array(长度); var arr = new Array(元素1,元素2,元素3,元素4...);
    • 函数
      • 函数是任何语言的核心概念。通过函数可以封装任意多条语句，而且可以在任何地方、像模像样时候调用执行。Javascript下使用function关键字来声明函数。 格式： function functionName(arg0, arg1.....argN){ statements; } 1. 函数的参数 Javascript不介意传递进来多少个参数，也不在乎传进来的参数是什么数据类型。函数的参数在内部是用一个数组来表示的，函数接收到的是这个数组，而不关心数组中包含那些参数。参数可通过arguments对象来访问 2. 没有重载 由于Javascript的函数没有签名，因此Javascript的函数不能实现重载，两个名字一样的函数，后定义的将会覆盖先定义的函数
  • second
    • 面向对象的程序设计
      • Javascript没有类的概念，因此它的对象与基于类的语言中的对象有所不同。 在Javascript中，对象被看作“无序属性的集合，其属性可以包含基本值，对象或者函数”。在Javascript中，对象是一组没有特定顺序的值，对象的每个属性或方法都有一个名字，而每个名字都映射到一个值，因此，也可以把Javascript的对象想象成散列表，就是一组名值对，其中值可以是数据或者函数。
      • 创建对象
        • 创建对象 四种方法： 1. 最简单的方式 var person = new Object(); person.name = "Tom"; person.age = 20; person.say = function(){ alert(this.name + "'s age is" + this.age); } person.say(); 2. 使用工厂函数 function createPerson(name, age){ var o = new Object(); o.name = name; o.age = age; o.say = function(){ alert(this.name + "'s age is " + this.age); } return o; } var person = createPerson("Tom",20); person.say(); 3. 构造函数模式 function Person(name, age){ this.name = name; this.age = age; this.say = function(){ alert(this.name + "'s age is " + this.age); } } var person = new Person("Tom", 20); person.say(); 问题：在创建对象时，会重复创建方法 4. 原型模式 function Person(name, age){ Person.prototype.name = name; Person.prototype.age = age; Person.prototype.say = function(){ alert(this.name + "'s age is " + this.age); } } var person = new Person("Tom", 20); person.say();
    • BOM
      • BOM（Brower Object Model） BOM的核心对象Window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过Javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。 例： var age = 29; function sayAge(){ alert(this.age); } alert(window.age); sayAge(); window.sayAge();
      • window对象
        • 1. 窗口关系及框架 如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从零开始，从左至右，从上到下）或者框架名称（每个window对象都有一个name属性）来访问相应的window对象。 2. 窗口位置 窗口相对于屏幕左边\上边的位置 (IE\Safari\Opera\Chrome) screenLeft、screenTop (Firefox) screenX、ScreenY 通用例： var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; 3. 移动到屏幕一个新位置（不适用于框架） moveTo(X, Y); //X,Y分别是屏幕X轴和Y轴坐标 moveBy(xLength, yLength);//xLength和yLength分别是水平方向和垂直方向移动的距离 4. 窗口大小 （Safari\Firefox\Opera\Chrome） innerWidth、innerHeight、outerWidth、outerHeight （IE\Safari\Firefox\Opera\Chrome）：通过DOM实现 document.documentElement.clientWidth、document.documentElement.clientHeight、document.body.clientWidth、document.body.clientHeight 通用例： var pageWidth = window.innerWidth; var pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ if (document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else{ pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } 改变窗口大小（不适用框架） resizeTo(X, Y);//X，Y是窗口的宽高 resizeBy(_X, _Y);//_X，_Y是新旧窗口的宽高之差 5. 导航和打开窗口 open()：导航到一个特定的URL或打开一个新的浏览器窗口 格式： window.open("http://baidu.com","main"); 6. 间歇调用和超时调用 Javascript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。 setTimeout(code, time)：在指定的时间过后执行代码，该方法会返回一个数值ID setInterval(code, time)：每隔指定的时间就执行一次代码，该方法会返回一个数值ID clearTimeout(timeoutID)：调用setTimeout方法返回的ID来取消setTimeout的执行 clearInterval(intervalID)：调用setInterval方法返回的ID来取消setInterval的执行 参数： code：要执行的代码，可以是函数 time：以毫秒表示的时间 7. 系统对话框 alert(message)：警告对话框 confirm(message)：确认对话框 prompt(message, info)：输入提示对话框 参数： message：显示的信息 info：输入框内容 例： alert("Hello, World"); confirm("请确认或取消"); var result = prompt("请输入名字：","在此处输入");
      • location对象
        • location对象是最有用的BOM对象之一，它提供子当前窗口中加载的文档有关的信息，还提供了一些导航功能。location对象很特别，它既是window对象的属性，也是document对象的属性。也就是说，window.location和document.location引用的是同一个对象。 1. 查询字符串参数 属性名 例子 说明 hash "#contents" 返回URL中的hash（#号后带零或多个字符），如果URL中不包含散列，则返回空字符串 host "www.baidu.com:80" 返回服务器名称和端口号 hostname "www.baidu.com" 返回不带端口号的服务器名称 href "http://www.baidu.com" 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值 pathname "/news/" 返回URL中的目录和文件名 port "8080" 返回URL指定的端口号，如果URL中不包含端口号，则这个属性返回空字符串 protocol "http:" 返回页面使用的协议。通常是http:或https: search "?wd=javascript" 返回URL的查询字符串，这个字符串以问号开头 2. 位置操作 以下方法的效果是完全一样的： location.assign("www.baidu.com"); location.href = "www.baidu.com"; window.location = "www.baidu.com"; 每次修改location属性（hash除外），页面都会以新URL重新加载
      • navigator对象
        • navigetor对象是识别客户 端的事实标准。 1. 检验插件 检查Ï览è中是否安装了特定„插件是一种最常见„例程。 对于非IEÏ览è，可以使用plugins数组来达到这个î„，该数组每一项都包含下列属性： name：插件名称 description：插件„描述 filename：插件„文件名 length：插件所处理„MIME类型数量 例： function hasPlugin(name){ name = name.toLowerCase(); for (var i=0; i if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) return true; } } alert(hasPlugin("Flash")); 因为IE不支持Netscape式的插件，所以在IE中检测插件唯一方式就是使用专有的ActiveXobject类型，并尝试创建一个特定的插件的实例。而IE是以COM对象的方式实现插件的，而COM对象使用唯一标识符来标识，因此，想要检查特定的插件，就必须知道其COM标识符，如Flash的标识符是ShockwaveFlash.ShockwaveFlash。 例： function hasPlugin(name){ try{ new ActiveXobject(name); return true; } catch(ex){ return false; } } alert(hasPlugin("ShockwaveFlash.ShockwaveFlash")); 2. screen对象 screen.height; //屏幕的像素高度 screen.width; //屏幕的像素宽度 3. history对象 history.back();//后退一页 history.go(-1);//后退一页 history.forward();//前进一页 history.go(2);//前进两页
    • DOM
      • DOM（Document Object Model） 文档对象模型，DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
      • 获取节点
        • 1. 获取节点的三种方法 document.getElementById(元素ID); //通过元素ID获取节点 document.getElementsByName(元素Name属性); //通过元素的Name属性获取节点 document.getElementsByTagName(元素标签); //通过元素标签获取节点 2. 节点操作，通过节点获取其它节点 //node为已获取的节点 node.firstChild; //获取节点的第一个子节点 node.lastChild; //获取节点的最后一个子节点 node.childNodes; //获取节点的所有子节点列表 node.previousSibling; //获取节点的前一个兄弟节点 node.nextSibling; //获取节点的下一个兄弟节点 node.parentNode; //获取节点的父节点
      • 节点操作
        • 注：所有下面的node均指已获取的节点 1. 创建节点 document.createElement(元素标签); //按名称创建元素节点 document.createAttribute(元素属性); //按名称创建属性节点 document.createTextNode(文本内容); //创建文本节点 2. 插入节点 node.appendChild(新子节点); //在节点的子节点未尾添加新的子节点 node.insertBefore(新子节点,子节点); //在节点的指定子节点前添加新的子节点 3. 替换节点 node.replaceChild(新节点,被替换的节点); //将节点的某个子节点替换为新节点 4. 复制节点 node.cloneNode(true/false); //复制节点，true为复制当前节点及其所有子节点，false为仅复制当前节点 5. 删除节点 node.removeChild(要删除的节点); //删除指定的子节点
      • 属性操作
        • 注：所有下面的node均指已获取的节点 1. 获取属性 node.getAttribute(属性名称); //获取节点指定属性的值 2. 设置属性 node.setAttribute(属性名, 属性值); //创建或改变节点的指定属性的值 3. 删除属性 node.removeAttribute(属性名); //删除节点中的指定属性
      • 文本操作
        • 注：所有下面的node均指已获取的节点 node.innerText; //设置和获取节点下的文本内容（纯文本，不包含HTML代码） node.outerHTML; //设置和获取节点的HTML代码（包含节点本身） node.innerHTML; //设置和获取节点下的HTML代码（包含文本内容） node.insertData(位置, 字符串); //在指定位置插入字符串 node.appendData(字符串); //将字符串插入到文本的末尾 node.deleteData(位置, 长度); //从指定位置起删除指定长度的字符 node.replaceData(位置, 长度, 字符串); //将从指定位置起的指定长度字符用指定的字符串替代 node.splitData(位置); //从指定位置起的文本节点分成两个节点 node.substring(位置, 长度); //从指定位置起获取指定长度的字符
    • 事件
      • Javascript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。 1. 事件流 事件流描述的是从页面中接收事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。 1.1 事件冒泡 IE的事件流叫做事件冒泡，即事件开始时由文档中嵌套层次最深的那个节点接收，然后逐级向上传播到较为不具体的节点。 画图 1.2 事件捕获 Netscape提出了另一个事件流叫做事件捕获，顺序和事件冒泡完全相反。最早接收到事件的是不太具体的节点，而最具体的节点最后接收到事件。 2. 事件处理程序（或事件侦听器） 事件就是用户或浏览器自身执行的某种动作，如click、load、mouseover等，都是事件的名字，而响应某个事件的函数就叫做事件处理程序（事件侦听器）。事件处理程序的名字都是以“on”开头，如：onclick、onload、onmouseover
    • 错误处理与调试工具
      • Debug
  • JavaScript实例
    • Hello World! 弱变量演示 数据类型演示 数据类型转换 乘法口决表 创建时钟 BOM和DOM对象演示查看 走马灯 灯箱 选项卡效果 表格编辑器 窗口拖动效果 地图拖动效果 动态样式表 检查浏览器已安装的插件 后退 window.open();