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

创建: 2017/10/06

完成: 2017/10/07
 
更新: 2017/10/15 增加了通过事件监听器登陆事件的方法的 链接
 
# TODO: 补充 基于Canvas的图象
客户端JavaScript的写法
客户端JavaScript基础 <wbr>网页上的输入输出
 显示对话框
总结 注: 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参数都是一样
        多个参数用,隔开
客户端JavaScript基础 <wbr>网页上的输入输出
可用转意字符
 %o 转换为object的超链接
 node.js不兼容
 %d
 %i
 转换为整数值
 %d node.js里是转换为数值
 %i node.js不兼容
 %s 转换为字符串
 node.js兼容
 %f 转换为浮点数
 node.js不兼容
  
  
  
  
  
  
 输出对象(object)的对话型列表 console.dir
客户端JavaScript基础 <wbr>网页上的输入输出
 指定计时器开始 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的图象
  暂略
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值