动力节点首页 全国咨询热线:400-8080-105

绑定手机号,登录
手机号

验证码

微信登录
手机号登录
手机号

验证码

30天自动登录
微信登录与注册
微信扫码登录与注册

扫码关注微信公众号完成登录与注册
手机号登录
首页 > 文章

JavaScript基础入门

04-06 21:12 334浏览
举报 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字

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

JavaWeb的3大组件

代码小兵49806-11 15:28

全面解析Cookie技术

代码小兵49806-11 15:51

浅谈JavaWeb架构演变

代码小兵49806-11 16:22

探讨Web开发中的Session存储与管理

代码小兵51603-29 17:28

JavaScript基础知识

 04-06 20:49

发评论

举报

0/150

取消