创建: 2017/10/06
完成: 2017/10/07
更新: 2017/10/15 增加了通过事件监听器登陆事件的方法的
链接
# TODO: 补充 基于Canvas的图象
客户端JavaScript的写法
| 显示对话框 |
| 总结 |
注: window可以省略
| window.alert |
表示警告信息
按ok后对话框消失，聚焦返回原窗口
例:
|
| window.prompt |
接收用户输入的对话框
返回的是用户输入的字符串
想要数字就parseInt()或者parseFloat
点击取消的话，获得null
例:
let name = prompt("说点啥啊大佬😳😄😂"); |
| window.confirm |
带有接收和取消按钮的对话框
ok ---> true
cancel ---> false
例:
let result = confirm(name + "是你咩😳 "); |
| |
|
| |
|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| console |
| 利用环境 |
浏览器, node.js等 |
| 主要方法 |
| 输出简单信息 |
| 输出错误信息 |
console.error |
| 输出信息式的log |
console.info |
| 输出一般的log |
console.log |
| 输出警告信息 |
console.warn |
注意: error, info, log, warn参数都是一样
多个参数用,隔开
可用转意字符
| %o |
转换为object的超链接
node.js不兼容 |
%d
%i |
转换为整数值
%d node.js里是转换为数值
%i node.js不兼容 |
| %s |
转换为字符串
node.js兼容 |
| %f |
转换为浮点数
node.js不兼容 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 输出对象(object)的对话型列表 |
console.dir
|
| 指定计时器开始 |
console.time
参数指定计时器名字，字符串 |
|
停止指定的计时器，输出经过的时间(单位:毫秒) |
console.timeEnd
let timerStr =
"96A5C9C6-6D20-4036-A1B8-F136EECC8879";
console.time(timerStr); ;
console.timeEnd(timerStr);
|
| 输出堆栈跟踪 |
console.trace |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| 事件句柄的登陆 |
| 总结 |
登陆事件句柄的三种方法
| 设定在HTML属性 |
本页下方 |
| 设定在DOM要素的属性上 |
本页下方 |
| 通过addEventListener方法 |
15.2(p409) |
| |
|
| |
|
|
|
HTML属性里增加 |
| 位置 |
任意的标签 |
| 事件种类 |
| onclick |
鼠标点击 |
| ondblclick |
鼠标双击 |
| onmousedown |
鼠标按下 |
| onmouseup |
鼠标收起 |
| onmousemove |
鼠标在要素上移动 |
| onmouseout |
鼠标移出要素 |
| onmouseover |
鼠标移入要素 |
| onkeydown |
键盘按下 |
| onkeyup |
键盘收起 |
| onkeypress |
键盘按下并收起 |
| onchange |
input的内容改变 |
| onblur |
input失去聚焦 |
| onfocus |
input获得聚焦 |
| onselect |
文字输入框等文字被选中 |
| onsubmit |
form的submit按钮被按下时 |
| onload |
读取完成 |
| onunload |
关闭浏览器，调向新页面等?? |
| onabort |
页面或者图像的读取被中断（取消） |
| onerror |
页面或者图象读取出错 |
| onresize |
元素的大小改变 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 例子 |
《script》
function dialogTest() {
;
}
《/script》
《input type="button" value="6.1 dialog"
onclick="dialogTest()"》 |
| 分析 |
优点: 简单
缺点: HTML被JavaScript污染 |
|
通过DOM来登陆事件 |
| DOM的主要object |
| window |
Window Obejct
浏览器的一个标签或者窗口 |
| document |
Document Object
HTML全体相关 |
| 元素obejct |
HTML内部的元素 |
| |
|
| |
|
|
| DOM登陆事件的方法 |
| |
window.onload
在html读取完成时候开始运行 |
| |
document.getElementByIdx_x_x_x_x_x_x
通过这个获取相应id的html元素 |
| |
对元素Object的事件句柄登陆元素 |
|
| 解除登陆的事件 |
带入null
button.onclick = null |
| |
|
| 通过addEventListener方法 |
| |
15.2(p409)
传送门 |
| |
|
| 计时器 |
| |
都属于window
func可以使字符串，作为javascript运行 |
| 一定时间后运行 |
| 设定 |
let timer =
setTimeout(func, time); 单位毫秒
time设为0不是立刻执行，等当前任务结束立刻执行
例:
let timer = setTimeout(timeoutSample, 1000); |
| 取消 |
clearTimeout(timer) |
| 注意 |
只运行一次 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 按一定间隔反复执行 |
| 设定 |
let timer = setInterval(func, time); |
| 取消 |
clearInterval(timer); |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| 动态读取html元素 |
| |
通过元素Object的innerHTML |
| 取得form的输入值 |
| 要素 |
type属性的值 |
属性 |
说明 |
| input |
number, text等 |
value |
输入的值一律被转换为字符串 |
| checkbox, radio |
checked |
选项是否被选中的布尔值 |
| select |
无 |
selectedIndex |
被选择的要素的index
从0开始 |
| textarea |
无 |
value |
输入的字符串 |
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
|
| document.write |
最初的JavaScript只有这一种输出方法
现在开发的时候不用
把script部分转换成输出,标签也是自己制定 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| 基于Canvas的图象 |
| |
暂略 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
