客户端JavaScript基础网页上的输入输出-CSDN博客

创建: 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" οnclick="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	输入的值一律被转换为字符串
input	checkbox, radio	checked	选项是否被选中的布尔值
select	无	selectedIndex	被选择的要素的index 从0开始
textarea	无	value	输入的字符串