JavaScript函数和BOM及DOM编程(详细总结-无尿点)(一)

简介: JavaScript函数和BOM及DOM编程(详细总结-无尿点)(一)

javascript 函数

一、javascript函数

1.1 概述

  • 函数可以把代码封装起来,并且可以重复调用,完成特定功能的代码块
  • 一个 JavaScript 函数用function关键字定义,后面跟着函数名和圆括号。
<script>
  // 声明函数
  function 函数名(){
     // 函数内部代码,又称为函数体
  }
// 调用函数
函数名();  
</script>
  • 函数:系统函数自定义函数

1.2 常见的系统函数

  • eval
  • parseInt
  • parseFloat
  • isNaN

1.2.1 eval

  • javascript中eval函数的作用是用于计算一个字符串,并将其作为脚本代码执行。
eval(string)
eval("x=10;y=20;document.write(x*y)") //返回200
document.write(eval("2+2")) //返回4
var x=10
document.write(eval(x+17)) //返回27

1.2.2 parseInt

parseInt(变量名);
  • 作用:从一个字符串提取整数
  • 提取规则:如果字符串第一个字符不是数字,就会返回NaN,它会遇到非数字就停止提取。

1.2.3 parseFloat

parseFloat(变量名);
  • 作用:从一个字符串提取小数
  • 提取规则:如果字符串第一个字符不是数字,就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。

1.2.1 isNaN

  • 如果是NaN就返回true,如果不是的就是false
  • 作用:先将一个变量的数据类型自动的转换为Number 如果是NaN就会得到true,如果是一个数字就得到false。
document.write(isNaN(5-2)); //返回false
document.write(isNaN(0)); //返回false
document.write(isNaN("Hello")); //返回true

1.3 自定义函数

1.3.1 声明函数

// 声明函数
function 函数名(){
    // 函数内部代码,又称为函数体
}
// 调用函数
函数名();  

例:将1~100 累加封装成函数

function sum(){
 var sum = 0;
 for(var i=1; i<=100; i++){
     sum = sum+i;
 }
 console.log(sum);
}
sum();

1.3.2 函数参数

function 函数名(形参1, 形参2){
    // 函数体
}
函数名(实参1, 实参2);

函数调用参数实例:

function cook(arg){
 console.log(arg);
}
cook('嗨害嗨');
  • 如果调用函数的时候,实参个数大于形参,则只会以形参个数为准
  • 如果调用函数的时候,实参个数小于形参,未使用的形参值为 undefined

1.3.3 return 返回值

函数执行完毕后,只完成里边的代码,如果我们想要获取到函数运行中产生的数据,就需要用到返回值。

function getResult(){
    return 666;
}
console.log(getResult());
  • return 会终止函数并只会返回一个值,返回的是最后一个值
  • 如果函数没有 return 则会返回 undefined

1.3.4 不定参数传递

function test(){
    console.log(arguments);
}
test(1,2,3,4,5);
// 输出结果
[1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

伪数组

  1. 具有数组 length 属性
  2. 按照索引方式进行存储
  3. 它没有真正数组的一些方法: pop(), push()

1.3.5 函数中调用函数

function test1(){
    console.log('test1');
}
function test2(){
    test();
    console.log('test2');
}
test2();

1.3.6 匿名函数

匿名函数没有名字

function(){
    // 代码块
}

调用匿名函数:

用小括号的方法实现函数的自调用,注意,这种调用方法只能调用一次

(function(){
    console.log('hello world');
})();

还可以将匿名函数赋值给一个变量,当给这个变量加上() 的时候,就相当于调用了这个函数

fn = function (x, y) {
    return x + y;
};
console.log(fn(1, 2));

1.3.7 将函数当做参数

var f1 = function () {
    return 100;
};
var f2 = function (fun) {
    console.log(f1());
};
f2(f1);
// 输出结果
100

1.3.8 函数的调用方式

  • 直接调用方式
  • 函数内调用函数方式
  • 事件属性调用
  • 匿名函数通过变量调用
//直接调用方式
function a(){}
a();
//函数内调用函数方式
function a(){}
function b(){
    a();
}
//事件属性调用
function a(){}
<button onclick = "a();">点击</button>
//匿名函数通过变量调用
var sb = function(){
}
console.log(sb);

1.3.9 内置函数对象

var calSum3 = new Function('num1', 'num2', 'return num1 + num2');
calSum3(1,2)

BOM基本编程

二、BOM编程

2.1 BOM基本介绍

  • BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
  • BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
  • BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。

2.2 BOM 的构成

BOM 比 DOM 更大,它包含 DOM。

  • window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
  • document 对象,文档对象;
  • location 对象,浏览器当前URL信息;
  • navigator 对象,浏览器本身信息;
  • screen 对象,客户端屏幕信息;
  • history 对象,浏览器访问历史信息;

2.3 window

window 对象是浏览器的顶级对象 它具有双重角色。

它是 JS 访问浏览器窗口的一个接口。

它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt() 等。

点击跳转: JavaScript初学者基础入门

2.3.1 窗口加载事件

在javascript的执行机制中,代码的执行是按照从上往下的顺序执行的,所以如果我们要给一个按钮添加点击事件,只能先设置按钮,然后获得按钮在进行操作

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function(){
            alert('您刚点击了一下!')
        }
    </script>
</body>

如果我们想要把绑定的点击事件放置到页面前面,很明显是无法操作的。那应该怎么办呢?这个时候就可以通过我们的窗口加载事件来完成。

window.onload 就是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

window.onload = function(){}
//或者 
window.addEventListener("load",function(){});

需要注意的是:

  • 有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload是等页面内容全部加载完毕,再去执行处理函数。
  • window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
  • 如果使用 addEventListener 则没有限制。

2.3.2 open()和close()

open()
  • open() 方法可以查找一个已经存在或者新建的浏览器窗口。
window.open([URL], [窗口名称], [参数字符串])
/*
参数说明:
1.URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
2.窗口名称:可选参数,被打开窗口的名称。
(1)该名称由字母、数字和下划线字符组成。
(2)"_top"、"_blank"、"_self"具有特殊意义的名称。
  _blank:在新窗口显示目标网页
  _self:在当前窗口显示目标网页
  _top:框架网页中在上部窗口中显示目标网页
(3)相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
(4)name 不能包含有空格。
  参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
*/

//例1:打开http://www.baidu.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:
<script type="text/javascript"> window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
//例2:打开http://www.baidu.com网页,将在新窗体中打开,宽为600,高为400,距屏顶100像素,屏左0像素。当点击按钮时,打开新窗口。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
  function Wopen(){
      window.open('http://www.baidu.com','_blank','width=600,height=400,top=100,left=0');
  }
</script>
</head>
<body>
    <input name="button" type="button" onClick="Wopen()" value="点击我,打开新窗口!" / >
</body>
</html>

close()
  • close()关闭窗口
window.close();//关闭本窗口
<窗口对象>.close();//关闭指定窗口
<script type="text/javascript">
   var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象,存储在变量mywin中
   mywin.close();
</script>
相关文章
|
13天前
|
JavaScript
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
12 0
|
15天前
|
JavaScript
js 高频实用函数封装汇总(持续更新)
js 高频实用函数封装汇总(持续更新)
12 0
|
15天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
13 0
|
15天前
|
JavaScript
js 调试 —— 断点(含进入函数、条件断点等)
js 调试 —— 断点(含进入函数、条件断点等)
17 0
|
15天前
|
JavaScript
JS【详解】函数.bind()
JS【详解】函数.bind()
7 0
|
15天前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
14 0
|
16天前
|
存储 JavaScript 前端开发
|
JavaScript 前端开发 Go
JavaScript系列--BOM(二)
JavaScript系列--BOM(二)
136 0
|
JavaScript 前端开发 API
JavaScript系列--BOM(一)
JavaScript系列--BOM(一)
91 0
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
23 2