Javascript学习笔记之 javascript中的浏览器对象

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量924 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 浏览器 文档 url button function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/viperasi/article/details/1721331
版权

Javascript学习笔记之 javascript中的浏览器对象

 

Javascript 时间处理的 原则为  时间 触发 动作

时间调用多个动作函数时，函数之间用逗号隔开

 

Javascript常用事件

 

onclick() 鼠标单击  触发两个动作  submit  和  函数 所以无法阻止表单的提交

onchange()  内容改变  一般用在文本框 和下拉列表

onfocus()   获得焦点 

onblur()  失去焦点   对应   onfocusout()

onmouseover()  鼠标经过事件

onmouseont()   鼠标离开事件

onmousemove()  鼠标移动事件

onload()   页面载入事件  用在<body>标签中

onsubmit()  表单提交事件  用在 form标签中 当点击submit按钮後  触发  在做表单验证的时候  如果表单出错  return false  可以是终止表单的提交  多用与客户端验证

onmousedown()  鼠标按下事件 

onmouseup()  鼠标弹起事件

onresize()  窗口大小改变

 

onblur() 时间 可以作出注册 或 登录 表单中 自动判断 格式的效果

 

function logonDisplay()

{

       var name = document.helloForm.emailValue.value; //获得 登录名的值

       name=name.substr(0,name.indexOf("@",0));  //取@前的字符

       var birthdayYear=document.helloForm.year.value;

       var now=new Date();

       var day=now.getDay();

       switch(day)

       {

              case 0:day="星期日";break;

              case 1:day="星期一";break;

              case 2:day="星期二";break;

              case 3:day="星期三";break;

              case 4:day="星期四";break;

              case 5:day="星期五";break;

              case 6:day="星期六";break;

       }

       alert("欢迎光临！/n"+name+"先生/小姐(^_^)");

       document.write("今天是"+day+"<br>");

       if(now.getYear()-parseInt(birthdayYear)<=20)

       {

              document.write("<br>欢迎光临 <a href='p209_starname.html'>游戏世界</a>");

       }else if(now.getYear()-parseInt(birthdayYear)<=30){

              document.write("<br>欢迎光临<a href='p209_myHelloTime.html'>理财专区</a>");

       }else{

              document.write("<br>欢迎光临<a href='p336_buypaycalc.html'>夕阳红专区</a>");

       }

      

      

}

function funCheckEmail()            //登录邮件检查   用于 emailValue onblur时调用

{

       var checkEmail = document.helloForm.emailValue.value;  //获得登录窗口的值

       if(checkEmail.length==0)                                 //长度不能为0

       {

              document.helloForm.statusEmail.value="Email地址不能为空！";   //一个readonly border-width:0px的 文本框  用来显示信息  位于  emailValue的后面

              document.helloForm.emailValue.focus();     // 重新获得焦点

       }else if(checkEmail.indexOf("@",1)==-1 || checkEmail.indexOf(".",1)==-1)

       {

              document.helloForm.statusEmail.value="Email地址格式不正确！";

              document.helloForm.emailValue.focus();            //检查@和 dot 的存在

       }else{

              document.helloForm.statusEmail.value="Email地址填写正确！";          //格式正确的输出

       }

}

function funCheckPwd()     //密码检查    用于pwdValue onblur时调用

{

       var checkPwd=document.helloForm.pwdValue.value;  //获得密码文本框的值

       if(checkPwd.length == 0)    //长度不能为0

       {

              document.helloForm.statusPwd.value="密码不能为空！";  //一个readonly border-width:0px的 文本框  用来显示信息  位于  pwdValue的后面

              //没有重新获得焦点  防止出现逻辑错误

       }else{

              document.helloForm.statusPwd.value="";

       }

}

function funCheckYear()     

{

       var checkYear=document.helloForm.year.value;

       if(checkYear.length==0)

       {

              document.helloForm.statusYear.value="年不能为空！";

       }else if(isNaN(checkYear)){

              document.helloForm.statusYear.value="年必须为数字！";

       }else{

              document.helloForm.statusYear.value="";

       }

}

</script>

 

JAVASCRIPT浏览器对象

 

Window对象 

属性

Document 文档   history  历史记录    location  地址  

Name 窗体名称   screen   客户的屏幕和显示性能    status 浏览器底部状态栏的消息

 

方法

Alert(); 警告窗    blur() 使对象失去焦点 并触发 onblur()事件

Close()  关闭当前浏览器窗口  open(“url”,”name”,”option”); 打开新窗口 按照窗口特征

Focus() 使对象接受焦点  并触发onfocus()事件

Confirm(); 确认对话框    确定 返回 true  取消 返回  false

setTimeout()   定时器    clearTimeout() 清除定时器对象

 

open() 方法

窗口特征属性：

Height  width  窗口高度  宽度

Top left  上  左 边距

Toolbars  工具栏    menubars  菜单栏   scrollbars  滚动栏   resizable 可控大小

Location  地址栏   statusbars  状态栏

实例

 

<body>

<input type="button" name="Submit" value="打开窗口" οnclick="window.open('stayTime_p342.html');"/>

<input type="button" name="Submit2" value="打开固定大小窗口，无菜单栏等" οnclick="window.open('stayTime_p342.html','','height=150,width=150,toolbars=0,menubars=0,scrollbars=0,resizable=0,location=0,status=0');"/>

<input type="button" name="Submit3" value="打开全屏窗口" οnclick="window.open('stayTime_p342.html','','fullscreen=1');"/>

<input type="button" name="Submit4" value="全屏" οnclick="window.open(document.location,'','fullscreen=1');"/>

<input type="button" name="Submit5" value="关闭退出" οnclick="window.close();"/>

</body>


 

Document对象

属性

Alinkcolor  活动链接颜色    bgcolor  背景颜色  body  文档的开始与结束

Linkcolor  文档链接颜色   location 当前url的信息   title  标题   url 当前文档的url

Vlinkcolor 访问过的链接的颜色

 

方法

Clear() 清除当前文档   close()  关闭输出流 并强制显示发送的数据

Write()  写入文档  会清除当前文档

getElementById(); 根据 ID名称 获得 HTML对象  一般用来操作 层对象

 

history对象

方法

back()  加载列表中的上一个url   forward() 加载 列表中的下一个url

go(url  or  number)  加载 列表中的 url  或者  移动 指定页面数

 

location 对象

属性

host 当前主机 和 端口   hostname 主机 名   href  完整url字符串

方法

assign(url)  加载url指定的新文档

reload() 重新加载当前页面   replace(url)  通过加载URL指定的文档替换当前文档

 

 
viperasi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记之内置对象
11-30
在这个学习笔记中，我们将探讨JavaScript的内置对象，主要包括Window、Screen、Location、History等，它们都是JavaScript环境中非常重要的组成部分。 首先，Window对象是JavaScript的核心，它代表了浏览器的窗口。...
Javascript获取value值的三种方法及注意点
热门推荐
Akikang的博客
06-25 12万+
  今天在js中用id名直接获取value值时遇到点问题，所以顺便做一下总结。   JavaScript获取value值，主要有以下三种：         1.用document.getElementById(“id名”).value来获取（例1）；         2.通过form表单中的id名或者name名来获取（例2）。        3.通过id名（不用写getElementById，也不...
Android11.0(R) 预留清空锁屏密码接口
cczhengv
10-24 3337
前言 出厂的设备有些客户喜欢设置锁屏密码，无奈记性不好，忘记密码后就只能恢复出厂或者重新刷机了，啊这客户肯定不接受的。 为了防止客户逼逼赖赖，我们就未雨绸缪，给它加个清除接口。 先说结论，系统锁屏密码数据库存储位于 /data/system/locksettings.db 经过测试 O 版本直接删除 locksettings.db 就已经达到要求 测试 Q、R 版本直接删除 locksettings.db 后，系统锁屏界面确实没了，但一直卡在安卓正在启动界面了， 无法进入桌面，进入设置中查看 Launche
表单密码MD5加密处理
Sakura0FF的博客
12-20 616
直接设置pwd.value为加密的value会造成用户体验不好，直接设置个hidden来提交加密密码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&
linux命令详解之pwd命令
蝈蝈的博客
04-24 6万+
pwd命令概述pwd是Print Working Directory的缩写，其功能是显示当前所在工作目录的全路径。主要用在当不确定当前所在位置时，通过pwd来查看当前目录的绝对路径。pwd命令语法pwd [选项] 参数： -L：--logical，显示当前的路径，有连接文件时，直接显示连接文件的路径，(不加参数时默认此方式)，参考示例1。 -p：--physical，显示当前的路径，有连接文件
HTML用户登录界面（表单验证）JavaScript简单运用
Yuyao_Xu的博客
08-22 2万+
实训第三天 <html> <head> <title> 用户登录界面 </title> <meta charset="utf-8"> <script> function checkUser(){ var username = document.getElementById("usernam...
JavaScript 学习笔记之基础中的基础
12-12
这篇学习笔记将带你深入了解JavaScript的基础知识，包括它的组成、主要组成部分的作用，以及如何在HTML中使用`<script>`元素。 首先，JavaScript由三个主要部分组成： 1. **ECMAScript (ES)**：这是JavaScript的...
JavaScript学习笔记之Cookie对象
10-24
JavaScript 中的 Cookie 对象是一个存储在用户计算机中的小文本文件，它由 Web 站点创建，并且保存在客户端的硬盘中。Cookie 的主要目的是保持 Web 应用程序之间的会话状态，允许 Web 站点存储用户的偏好设置或者...
JavaScript学习笔记之JS事件对象
10-24
在IE浏览器中，event对象是全局变量window.event，而在Firefox浏览器中，需要通过事件处理函数的参数来获取event对象。也就是说，在Firefox中event对象不能在函数外部直接引用，而是一个运行时的临时变量。开发者...
密码输入框组件的实现
Jay的博客
05-03 3254
一般情况下，如果要实现密码输入框，采用浏览器原生的密码输入框是很好的选择。比如登录界面,使用浏览器原生的密码输入框，用户就可以使用浏览器自身的‘’记住密码“功能，不用每次登录都需要手动输入账号密码。但是呢！有某些情况下，只需要密码框的密码显示/隐藏功能。如果使用浏览器原生的密码框，“记住密码”功能的弹窗，就会造成很大的不便。所以，在这种情况下，就需要模拟实现密码框的功能了。 密码框的功能解析 在实现密码框之前，首先要了解密码框的功能。 密码框的功能有： 文本输入功能 密码显示隐藏功能 文本输入功能 首先
刷题模式(附答案)：1+x 证书 Web 前端开发初级实操考试样题（2019）
王佳斌
12-13 2万+
试题一（每空 2 分，共 22 分） 阅读下列说明、效果图和 HTML 代码，进行静态网页开发，请在红线处补全代码。 1.【说明】 这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季女装。现在我们需要编写该网站效果图部分代码。 项目名称为 shopping，包含首页 index.html、css 文件夹、img 文件夹，其中，css 文件夹包含 index.css 文件；img 文件夹包含...
模拟input 密码框效果 （中文输入法处理）
qq_31620497的博客
05-21 1177
inputPwd: (function () { var map = {}; function inputPwd(el) { // var $el = $(el); // var key = $el.attr('input-pwd'); // map[key] = $el; this.el = el; this.initInput(); }.
Ext.form.HtmlEditor 的 表情扩展
路漫漫其修远，我哪里有时间去求索
08-06 2812
/* * IChat Emote Chooser v0.1 * IChat Emote Chooser -- EmoteChooser * viperasi@gmail.com * 根据Ext.ColorPalette修改 * 文件名:EmoteChooser.js */Ext.EmoteChooser = function(config){    Ext.
JavaScript 学习笔记 之 JavaScript 核心语言对象
路漫漫其修远，我哪里有时间去求索
07-26 837
JavaScript JAVA,JAVASCRIPT 之 JavaScript 核心语言对象 数组 下标从0开始 并且用 new关键字 声明 Array的新实例对象 如： var arr = new Array(10); 构造方法里的参数可以为数组容量，也可以直接为数组赋值 属性： arr.length 数组长度 返回整型 方法：arr.join()
Html 标签
路漫漫其修远，我哪里有时间去求索
07-29 730
Html 标签  标签   标记网页的开始的结束  个人认为一对相当于 javascript内的document对象头部标签  主要是 网页导航栏中的标题 标签 网页主体标签  网页显性的显示内容 基本都在里面标签，搜索引擎使用此标签内部提供信息 此标签位于 内部 属性:http-equiv="expires" content="time" 网页过期  超过time自动重新
nodejs安装
a1241436267的博客
08-19 337
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 277
npm。
2024前端面试题-js篇
FormAda的博客
08-22 649
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
JavaScript学习笔记：脚本位置与对象解析
在JavaScript学习笔记中，我们关注的是脚本的放置位置、外部JavaScript的使用以及JavaScript中的对象，特别是Date对象。 1. JavaScript脚本放置位置 脚本在HTML文档中的位置对执行时机有直接影响。放在`<head>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值