01-欧几里得算法

求最大公约数
function gcd(m, n) {
var r = m % n;
m = n;
n = r;
if (r == 0) {
return m;
} else {
return gcd(m, n);
}
}

02-事件与函数

事件 指的是用于在页面上执行的一系列操作(动作) 交互
比如
鼠标点击某个元素 鼠标移动 鼠标按下 鼠标弹起 键盘按下 键盘弹起 打开页面 关闭页面 ….
函数 是具有相对独立性的一系列功能
函数 是可以被事件触发执行的
window 窗口 浏览器窗口
load 加载
window.onload = function () { } 它是一个事件
当窗口中的资源加载完毕后 执行函数
语法: 对象.属性 = 函数 函数表达式(赋值式函数创建)

console.log(btn);
任意HTML元素 在JS中都是以对象的形式存在的
对象 是一种引用数据类型 它表示使用一个变量名保存一个完整的事物 可以存储多个属性
访问对象时 通过 . 操作符来访问对象的属性
console.log(btn.title);
console.log(btn.id);
btn.title = ‘你好世界’;
console.log(btn.className); 元素的class属性 使用className进行访问 原因是class在js中是关键字 不能用于命名
为元素添加事件 需要满足三个条件
1. 事件源(元素)
2. 事件属性(事件的类型)
3. 事件函数(事件发生时 触发的函数)

  1.  document.getElementById<br />     文档.通过id获得元素<br />     var btn = document.getElementById('btn');<br />     console.log(btn);

03-常见鼠标事件

  1. 事件源(元素)
    2. 事件属性(事件类型)
    3. 事件函数(事件发生时执行的函数)
    click 点击事件

    dblclick 鼠标左键双击
    box.ondblclick = function () {
    console.log(‘鼠标左键双击’);
    }
    mouseover 鼠标悬停
    box.onmouseover = function () {
    box.style.color = ‘red’;
    }
    mouseout 鼠标移出
    box.onmouseout = function () {
    box.style.color = ‘’;
    }
    mouseenter 鼠标进入
    mouseleave 鼠标离开
    box.onmouseenter = function () {
    box.style.background = ‘yellow’;
    }
    box.onmouseleave = function () {
    box.style.background = ‘’;
    }
    mousemove 鼠标移动
    box.onmousemove = function () {
    console.log(‘鼠标在移动’);
    }
    mousedown 鼠标按下
    mouseup 鼠标弹起
    contextmenu 鼠标右键点击
    box.oncontextmenu = function () {
    console.log(‘右键点击’);
    returnfalse; 阻止事件默认行为
    }

04-常见表单事件

submit 提交事件
myform.onsubmit = function () {
console.log(1);
returnfalse; 阻止默认行为
}
focus 输入框获得焦点
username.onfocus = function () {
username.style.padding = ‘5px’;
}
blur 输入框失去焦点
username.onblur = function () {
username.style.padding = ‘0’;
}
input 输入事件
username.oninput = function () {
console.log(username.value); 获得输入框中的值
}
change 改变事件
触发change事件需要满足两个要求
1. 内容(value)发生改变
2. 失去焦点

05-常见键盘事件

  1. 一般情况 键盘事件会作用于页面 或 输入框<br />     keydown  键盘按键按下<br />    document.onkeydown = function () {<br />      console.log('按键了!');<br />    }<br />     keyup    键盘按键弹起<br />    document.onkeyup = function () {<br />      console.log('弹起了!');<br />    }

06-匿名函数

匿名函数
没有名字的函数
实名函数
在预编译阶段 会创建函数 提前执行
哪怕函数最后没有被调用 也会占据内存空间(资源浪费)
匿名函数
1. 由于匿名函数没有名字 所以不存在声明提前
2. 匿名函数 仅在使用时 临时创建 使用结束后会立即销毁(相比实名函数 节约内存)
3. 由于函数有独立的作用域 匿名函数可以更好的隔离作用域 避免作用域之间相互污染

作用域越小越好

  1.  ---------------------------------------------<br />     匿名函数有两种用法:<br />     1. 自执行函数(自调用函数/一次性函数)<br />     2. 回调函数(callback)<br />     ---------------------------------------------<br />     自执行函数<br />     (function(){})();<br />     !function(){}();<br />     ~function(){}();<br />     可以将每一个功能都写成一个自执行函数

回调函数(callback)
回调函数 指的是将一个函数作为参数使用(函数可以是实名函数 也可以是匿名函数 推荐使用匿名函数)
函数在JS中是以对象的形式存在的 所以 函数是一种数据类型
函数的参数可以是任意类型 所以 函数也可以作为参数
当需要完成一项任务 但是这个任务当前不符合 xxx 条件
需要使用回调函数
当符合条件时 则通过回调函数完成任务

function buy(callback) {
var product = null; 没有商品
setTimeout(function () { 这个函数在5秒后执行
product = ‘牙膏’; 有货了
callback(product + ‘到货了’); 调用回调函数
}, 5000); 让代码5秒后执行
}
buy(function (msg) {
console.log(msg);
console.log(‘现在去买牙膏’);
});