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

创建: 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  输入的值一律被转换为字符串  checkbox, radio  checked  选项是否被选中的布尔值  select  无  selectedIndex  被选择的要素的index  从0开始  textarea  无  value  输入的字符串
document.write	最初的JavaScript只有这一种输出方法  现在开发的时候不用  把script部分转换成输出,标签也是自己制定
基于Canvas的图象
	暂略

参考文献: 磯博, 2017/3/8 , [徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく]

 

转载于:https://www.cnblogs.com/lancgg/p/8281706.html