JavaScript基础入门

04-06 21:12 654浏览

举报 T字号

大字

中字

小字

1.JavaScript的构成

JS的构成：ECMAScript、BOM、DOM

ECMAScript：定义的JS的基本语法，如数组、函数、字符串。ES5、ES6、ES7
BOM：浏览器对象模型，规定了浏览器以及浏览器里面内容的API，有兼容问题。
DOM：规定了操作页面内容的API，由w3c组织提出的。

DOM和BOM的区别和联系?

BOM的顶级对象是：window
DOM的顶级对象是：document

在JavaScript语言的类型大致可以分为以下三种：

(1)用户定义对象

用户定义对象自行创建的对象，例如：

var obj = { }

(2)内置对象

内置在JavaScript中的对象，无需我们创建，可以直接使用，例如：Array、Math和Data等

(3)宿主对象

上期我们知道了什么是宿主环境以后，应该对宿主对象是什么有了一定的了解，在这里我们指的是浏览器提供的对象，例如:window、document。

DOM中主要关注的就是document，document对象的主要功能就是处理网页内容。

2.浏览器对象模型(Browser Object Model)

BOM :Browser Object Model

浏览器对象模型，它不是一个对象，它是一个对象集合，包含大量的用来操作浏览器窗口或者浏览器里面的内容的对象。如：window、screen、navigator、history等。这些对象中window对象是顶层对象，其他对象是window的一个属性，不过这些属性本身也是对象。

window对象

window对象：它是BOM中的顶层对象，BOM中的其他对象其实是window的属性。

BOM也是一个全局对象，所谓全局对象就是指在全局环境中所定义的所有的变量和方法，其实就是给window添加属性和方法。

可以使用window.属性名称的形式来使用该变量，或者采用window.函数名称()的形式调用全局变量的函数。只不过通常情况下window对象可以省略。

另外，如果要使用全局变量或者方法也可以使用this.的形式，因为全局环境下面this代表window。window对象不需要手动创建，当浏览器窗口打开后后台自动创建window对象。

3.window对象包含的方法

(1)alert方法

作用：以提示框的形式输出信息
格式：window.alert(要输出的信息);
注意：alert支持转义字符，不能解析标签

(2)confirm方法

作用：弹出确认框
格式：window.confirm (‘提示文字’);
返回值：true(点击确认)、false(点击取消)

var res = window.confirm('是否删除');

console.log(res);

(3)prompt方法

作用：弹出输入框
格式：window.prompt(‘提示文字，默认值’);
注意：返回值类型为字符串

(4)isFinite方法

作用：判断某个数据是否为有限数据
格式：window.isFinite(数据)
返回值：如果是有限数据则返回true，否则返回false

注意：参数可以是任意类型，那么在判断是否为有限数据时，系统会先调用Number方法将参数转换为数值型，如果转换成功，且是有限的，那么最终的返回值是true，如果转换成功，但是是Infinity或则是-Infinity，那么最终的结果是false。如果在转型时，转换的结果是NaN，那么最终结果是false。

console.log(window.isFinite(3 / 2));

(5)isNaN方法

作用：判断某个数据是否为NaN,如果是NaN则返回true，否则返回false
格式：window.isNaN(数据);

console.log(window.isNaN('a' * 3));

(6)open方法

作用：打开一个新的浏览器窗口
格式：window.open(‘新的窗口的地址’,‘新窗口名称’,‘新窗口特性’);
返回值：返回值为代表打开的窗口的window对象

参数说明：

三个参数都可以省略，如果省略，打开的就是空白窗口。
如果将两个参数省略，那么会打开多个窗口。
新窗口特性：“width=窗口宽度 height=窗口高度 top=窗口距离屏幕顶端距离 left=窗口距离屏幕左侧的距离”。

<body>
    <button id='box'>打开一个新的窗口</button>
    <script>
        //点击按钮打开新的窗口
        var btn = document.getElementById('box');
        btn.onclick = function() {
       
            window.open(); //省略所有参数表示打开一个空白窗口
            // window.open('http://www.baidu.com');

        }
    </script>
</body>

(7)close方法

作用：关闭窗口
格式：window.close();

<body>
    <button id="box">关闭窗口</button>
    <script>
        var btn = document.getElementById('box');

        btn.onclick = function() {
       
            window.close();
        }
    </script>
</body>

(8)moveTo方法

作用：将窗口移动到指定位置
格式：window.moveTo(x,y);

(9)moveBy方法

作用：将窗口按照指定的尺寸进行移动
格式：window.moveBy(x,y);

<body>
    <button id='box1'>打开新的窗口</button>
    <button id='box2'>moveBy方法</button>
    <script>
        var btn1 = document.getElementById('box1');
        var btn2 = document.getElementById('box2');
        var cc;
        btn1.onclick = function() {
       
            cc = window.open('', 'aaa', "width=500 height=300")
        };

        btn2.onclick = function() {
       
            cc.moveBy(100, 200);
        }
    </script>
</body>

4.window对象的定时器方法

(1)setInterval方法与clearInterval方法

1)setInterval方法

作用：被称为间歇调用函数，可以在一定的间隔时间下重负执行某些操作
使用格式如下：window.setInterval(要重复执行的操作，时间间隔);

参数说明如下：

要重复执行的操作：可以是匿名函数，也可以是函数名称
时间间隔：以毫秒作为单位，1秒=1000毫秒

注意：该方法的返回值为:定时器的编号，该编号可以用来清除定时器

var timer = window.setInterval(fn, 100);
function fn() {
    console.log('hello');
}

2)clearInterval方法

作用：该方法的作用就是用来清除setInterval方法启动的定时器
格式：window.clearInterval(定时器的编号);

(2)setTimeout方法与clearTimeout方法

1)setTimeout方法

作用：被称为超时调用函数，即可以在指定的时间后执行某些行为。
格式：window.setTimeout(要执行的操作，延迟时间);

参数说明：

要重复执行的操作：可以是匿名函数，也可以是函数名称
时间间隔：以毫秒作为单位，1秒=1000毫秒

注意：该方法返回的值为定时器编号，该编号用来取消定时器。

2)clearTimeout方法：

作用：该方法是用来清除有setTimeout启动的定时器
格式：window.clearTimeout(定时器编号);

var timer = window.setTimeout(function() {
     console.log('hello');
}, 5000);

0人推荐

共同学习，写下你的评论

0条评论

暴风城-小飞

5篇文章贡献20965字

JavaScript基础入门

1.JavaScript的构成

2.浏览器对象模型(Browser Object Model)

3.window对象包含的方法

4.window对象的定时器方法

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

JavaScript基础入门

1.JavaScript的构成

2.浏览器对象模型(Browser Object Model)

3.window对象包含的方法

4.window对象的定时器方法

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>