Window 浏览器:

- location:地址
- history:历史
- Document:文档
- screen:窗口
- navigator:帮助

> 1.外部对象就是浏览器提供的API -- **BOM**
> 2.这些对象由w3c规定,由浏览器开发者设计并开发
> 3.这些对象分为2部分,其中BOM包含了DOM
> 4.我们可以通过js访问这些对象

# 外部对象

> BOM (Browser Object Model)
    浏览器对象模型,用来访问和操纵浏览器窗口,是JavaScript有能力与浏览器对话。
> DOM (Document Object Model)
    文档对象模型,用来操作文档。

##1.对话框
- alert(str)
    - 提示对话框,显示str字符串的内容
- confirm(str)
    - 确认对话框,显示str字符串的内容
    - 按"确定"按钮返回true,其他操作返回false

>案例
    
    //调用window对象的属性或方法,可以省略"window."
    //1.弹出框
        //1)弹出框
        function f1(){
            alert("你好,小俊子");
        }
        //2)确认框
        function f2(){
            var v = confirm("你吃了吗?");
            //点击确定返回true,否则返回false
            console.log(v);
        }
        //3)输入框
        function f3(){
            var p = prompt("你吃的什么?");
            //点击取消返回null
            console.log(p);
        }

## 2. 定时器
- 多用于网页动态时钟,制作倒计时,跑马灯效果
- 周期性时钟
    - 以一定的间隔执行代码,循环往复
    - setInterval(exp,time);
    - 返回已经启动的定时器对象
- 停止启动的定时器
    - clearInterval(tID) 
    - tID:启动的定时器对象
- 一次性时钟
    - 在一个设定的时间间隔之后来执行代码,而不是在函数被调用后执行
    - setTimeout(exp,time);
- 停止启动的定时器
    - clearTimeout(tID) 
    - tID:启动的定时器对象

> 案例

 1)周期性定时器
//每隔N毫秒执行一次函数,反复执行,直到达到停止条件位置。
function f4(){
var n = 5;
//启动定时器,返回定时器的ID,用来停止定时器
var id = setInterval(function(){
console.log(n); switch(n%4){
case 0: btn1();break;
case 3: btn2();break;
case 2: btn3();break;
case 1: btn4();break; default: ;
}
n++;
},100);
//启动定时器就相当于启动了一个支线程,当前方法f4相当于主线程。
//2个线程并发执行,不互相等待,
//因此主线程在启动完支线程后立刻向下执行,而支线程却需要在1秒后才执行
console.log("蹦");
} 2)一次性定时器
//推迟N毫秒执行一次函数,执行完之后,自动停止,
//也可以在未执行前手动停止
var id;
function f5(){
//启动定时器,若想在未执行定时器前就将它停止,需要使用id
id = setTimeout(function(){
console.log("叮叮叮");
f4();
},3000);
} function f6(){
//若定时器已经执行,则取消无效; 若定时器还未执行,则可以取消
clearTimeout(id);
console.log("已停止!");
}

## 3. 常用属性
- screen 对象
    - 包含有关客户端显示屏幕的信息
    - 常用于获取屏幕的分辨率和色彩
    - 常用属性:
        - width height
        - availWidth availHeight

-  history对象
    -  包含用户访问过的URL
        -  length属性:浏览器历史列表中的URL数量
    - 方法:
        - back();
        - forwird();
- location对象
    - 包含有关当前URL的信息
        - 常用于获取和改变当前浏览的网址
    - href属性:当前窗口正在浏览的网址地址
    - 方法
        - reload():重新载入当前网址,相当于刷新    
- navigator 对象
    - 包含有关浏览器的信息
        - 常用于获取客户端浏览器和操作系统的信息

> 案例

//Location对象
function f1(){
var b = confirm("你真的要离开我吗?");
if(b){
location.href = "http://www.tmooc.cn";
} }
//刷新页面
function f2(){
location.reload();
}
//screen 对象: 获取屏幕宽高
function f3(){
console.log(screen.width);
console.log(screen.height);
console.log(screen.availWidth);
console.log(screen.availHeight);
}
//history对象
function f4(){
history.forward();
}
//navigator对象
function f5(){
console.log(navigator.userAgent);
}

## DOM
### DOM操作
- 查找节点
- 读取节点信息
- 修改节点信息
- 创建节点信息
- 删除节点

### 读取、修改
- 节点信息
    - nodeName:节点名称
    - nodeType:节点类型
- (1) 读取节点
    - 读取节点的名称,类型
            
            <p id="p1">1.<b>读写</b>节点</p>
            <p id="p2">2.<b>查询</b>节点</p>
            <p id="p3">3.<b>增删</b>节点</p>

var p1 = document.getElementById("p1");
            console.log(p1.nodeName);
            console.log(p1.nodeType);
    - 读写节点的内容
         - 双标签中间的文本叫内容,任何双标签都有内容
         - innerHTML:包括子标签信息
         - innerText:忽略子标签
                 
                console.log(p1.innerHTML);
                p1.innerHTML="1.<i>读写</i>节点";

console.log(p1.innerText);
    - 读写节点的值
        - 表单控件中的数据叫值,只有如下表单控件才有值:
        - input
        - select
        - textarea

Javascript外部对象的更多相关文章

  1. JavaScript的对象——灵活与危险

    转:http://www.cnblogs.com/tolg/p/4873000.html 没有哪种数据结构比JavaScript的对象更简单灵活了.作为一个弱动态类型语言,JavaScript对对象的 ...

  2. JavaScript原生对象及扩展

    来源于 https://segmentfault.com/a/1190000002634958 内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始 ...

  3. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  4. 前端基础:JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  5. javascript 全局对象--w3school

    JavaScript全局对象 1.  decodeURI()解析某个编码的URI. 2.decodeURInComponent()解析一个编码的URI组件. 3.encodeURI()把字符串编码为U ...

  6. JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString

    JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...

  7. 从零构建JavaScript的对象系统

    一.正统的类与继承 类是对象的定义,而对象是类的实例(Instance).类不可直接使用,要想使用就必须在内存上生成该类的副本,这个副本就是对象. 以Java为例: public class Grou ...

  8. 关于javascript自定义对象(来自网络)(最近几天不会的)

    javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义 优点:动态的传递参数 缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...

  9. 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

    在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...

随机推荐

  1. oracleDBA-D1

    一.数据库备份 1.测试系统环境:win10 64位 企业版 测试数据库环境:oracle11gR2 2.步骤: I.首先以sysdba权限用户登录数据库,命令: SQL> connect  超 ...

  2. js三级地区联动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head ...

  3. Java笔记:关键字

    关键字 描述 abstract 抽象方法,抽象类的修饰符 assert 断言条件是否满足 boolean 布尔数据类型 break 跳出循环或者label代码段 byte 8-bit 有符号数据类型 ...

  4. spring自动扫描、DispatcherServlet初始化流程、spring控制器Controller 过程剖析

    spring自动扫描1.自动扫描解析器ComponentScanBeanDefinitionParser,从doScan开始扫描解析指定包路径下的类注解信息并注册到工厂容器中. 2.进入后findCa ...

  5. R语言 入门知识--常用操作和例子

    1 R的下载.安转   (转)R有很多的版本,支持目前主流的操作系统MAC.Linux和WINDOWS系列.因为我个人是在WINDOWS下用R的,所以在这里将只介绍WINDOWS下R的下载&安 ...

  6. Laravel中的日志与上传

    PHP中的框架众多,我自己就接触了好几个.大学那会啥也不懂啥也不会,拿了一个ThinkPHP学了.也许有好多人吐槽TP,但是个人感觉不能说哪个框架好,哪个框架不好,再不好的框架你能把源码读上一遍,框架 ...

  7. TextView属性android:ellipsize="marquee"不生效的解决办法

    最近自己在写自己的第一个app,过程中遇到了这个问题,查了不少帖子,经过尝试发现,这种问题一般分为两类: 1. TextView的Text值赋值后不更改,很多帖子上说如下写法就可以生效: <Te ...

  8. Optimal Flexible Architecture(最优灵活架构)

    来自:Oracle® Database Installation Guide 12_c_ Release 1 (12.1) for Linux Oracle base目录命名规范: /pm/s/u 例 ...

  9. 【leetcode】Longest Substring Without Repeating Characters

    题目描述: Given a string, find the length of the longest substring without repeating characters. For exa ...

  10. NoSql数据库初探-mongoDB读操作

    MongoDB以文档的形式来存储数据,此结果类似于JSON键值对.文档类似于编程语言中将键和值关联起来的结构(比如:字典.Map.哈希表.关联数组).MongoDB文档是以BOSN文档的形式存在的.B ...