忠于人品,跳动在网页的精灵--JavaScript

你努力的样子很狼狈,但是还是要加油鸭。

因为,你认真的样子真的很帅。

经过之前两篇关于JavaScript的介绍,现在的你应该对于它不再陌生了。今天,我们继续,把剩下的内容做一个完整的总结。

9、数组

数组(array)是按次序排列的一组数据,每个值的位置都有编号(从 0 开始),整个数组用方括号表示。Js中定义数组的三种方式如下(也可先声明再赋值):

var arr = []; // 创建一个空数组
var arr = [值1, 值2, 值3];  // 创建一个数组并赋值
var arr = new Array(值1, 值2, 值3);  // 直接实例化
var arr = new Array(size);  // 创建数组并指定长度

创建

// 数组的创建
var arr1 = [];
console.log(arr1.length);  // 长度为0

var arr2 = [1, '2', 3.3, true, null];
console.log(arr2.length);  // 长度为5

var arr3 = new Array(1, '2', 3.3);
console.log(arr3.length);  // 长度为3

var arr4 = new Array(3);
console.log(arr4.length);  // 长度为3

基本操作

数组的长度可以通过length属性来获取,并可以任意更改

获取:数组名.length

扫描二维码关注公众号,回复: 5710810 查看本文章

更改:数组名.length = 新长度

数组中的每一个元素都可以被访问和修改,甚至是不存在的元素,无所谓越界 获取:数组名[下标]

更改:数组名[下标] = 新值

var arr2 = [1, '2', 3.3, true, null];
console.log(arr2.length);  // 长度为5

var arr4 = new Array(3);
// console.log(arr4.length); // 长度为3

// 修改长度后,原来已有的数据会被丢失,返回undefined
arr2.length = 3
console.log(arr2.length);
console.log(arr2[3]);

// 获取一个不存在的位置,不会报错越界,会返回undefined
console.log(arr4[5]);

数组的遍历

数组的遍历即依次访问数组的每一个元素 ,可以用for循环进行遍历。

for (var i = 0; i < 数组.length; i++) {
数组名[i]是获取元素
};

var arr = [1, '2', 3.3, true, null];
for (var i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}

10、函数

函数,即方法。就是一段预先设置的功能代码块,可以反复调用,根据输入参数的不同,返回不同的值。函数也是对象。

函数的定义

我们可以通过函数声明语句和函数定义表达式来初始化一个函数。

函数声明语句

function 函数名([参数列表]){
   
}

// 声明函数
function foo1() {
   console.log('foo1');
}
// 调用函数
foo1();

函数定义表达式

以表达式方式定义的函数,函数的名称是可以不需要的

var 变量名 = function ([参数列表]) {
   
}
变量名();

// 声明函数
var foo2 = function () {
   console.log('foo2');
}
// 调用函数
foo2();

这种写法是将一个匿名函数赋值给变量。

函数的参数

函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数,定义时的参数称为形参,调用时的参数称为实参。

a. 实参可以省略,那么对应形参为undefined

b. 若函数形参同名(一般不会这么干),在使用时以最后一个值为准。

c. 可以给参数默认值:当参数为特殊值时,可以赋予默认值。

d. 参数为值传递,传递副本;引用传递时传递地址,操作的是同一个对象。

// 调用函数时,实参可以省略,则对应形参为undefined
function func1(a, b) {
   console.log(a + "+" + b + "=" + (a + b));
}

func1(3, 4, 5);  // 3+4=7
func1(1);  // 1+undefined=NaN
func1();  // undefined+undefined=NaN

// 给参数默认值
function func2(a=1, b=2) {
   return a + b;
}
console.log('参数默认值-----' + func2());// 3
console.log('参数默认值-----' + func2(5, 7));// 12

// 参数为值传递,传递副本;引用传递时传递地址,操作的是同一个对象。
function func3(obj) {
   obj[6] = "我是第六个值"; // 在函数内操作了数组,因为是同一个对象的原因,外部也可以获取到
}
var arr = [1, "2", 3.14, true, null];
// 调用函数
func3(arr);
console.log(arr[6]); // 函数内操作的数据,因为是同一个对象的原因,外部也可以获取到

函数的调用

常用调用方式:函数名([实参]);

存在返回值可以变量接收,若接收无返回值函数则为undefined。

function add(a, b) {
   return a + b;
}
var sum = add(1, 2)
console.log(sum)

return语句

函数的执行可能会有返回值,需要使用return语句将结果返回。return语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回undefined。

作用:

在没有返回值的方法中,用来结束方法。

有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。

函数的作用域

函数作用域:全局(global variable)和局部(local variable)

var a = 1; // 全局变量

function func() {
   var b = 2; // 局部变量
   console.log("全局变量a-->" + a);
   console.log("局部变量b-->" + b);
}
func();

console.log("---------------------------");

// a可以访问
console.log("全局变量a-->" + a);
// b不能访问
console.log("b-->" + b);

四、JavaScript内置对象

String

charAt(idx):返回指定位置处的字符。

indexOf(Chr):返回指定子字符串的位置,从左到右。找不到返回-1

substr(m,n):返回给定字符串中从m位置开始,取n个字符,如果参数n省略,则意味着取到字符串末尾。

substring(m,n):返回给定字符串中从m位置开始,到n位置结束,不包含n位,如果参数n省略,则意味着取到字符串末尾。

toLowerCase():将字符串中的字符全部转化成小写。toUpperCase():将字符串中的字符全部转化成大写。

replace(s1, s2):替换,将s1替换为s2。

length: 属性,不是方法,返回字符串的长度。

// charAt(idx):返回指定位置处的字符
var msg = 'IT is very good!';
var result = msg.charAt(1); // T
console.log(result, result.length);

// indexOf(Chr):返回指定子字符串的位置,从左到右。找不到返回-1
var result = msg.indexOf("very");// 6
console.log(result);

// substr(m, n):返回给定字符串中从m位置开始,取n个字符,如果参数n省略,则意味着取到字符串末尾。
result = msg.substr(1, 8); // T is ver
console.log(result, result.length);

// substring(m,n):返回给定字符串中从m位置开始,到n位置结束,不包含n位,如果参数n省略,则意味着取到字符串末尾。
result = msg.substring(1, 8); // T is ve
console.log(result, result.length);

// toLowerCase():将字符串中的字符全部转化成小写。
result = msg.toLowerCase(); // it is very good!
console.log(result, result.length);

// toUpperCase():将字符串中的字符全部转化成大写。
result = msg.toUpperCase(); // IT IS VERY GOOD!
console.log(result, result.length);

// replace(s1, s2):将s1字符串替换为s2字符串
result = msg.replace('IT', 'it');
console.log(result, result.length);

Math

Math.random():生成随机数

Math.ceil():向上取整

Math.floor():向下取整

Math.round():四舍五入取整

var num = Math.random(); // 生成大于0小于1的浮点数
console.log(num);

num = Math.ceil(3.11223); // 向上取整 4
console.log(num);

num = Math.floor(3.55667); // 向下取整 3
console.log(num);

num = Math.round(3.11223); // 四舍五入 3
console.log(num);

Date

// 获取日期时间
getFullYear()年, getMonth()月, getDate()日, getDay()周,
getHours()时,getMinutes()分,getSeconds()秒

// 设置日期时间
setFullYear(), setMonth(), ...
toLoacaleString()

说明:

a. getMonth():得到的值:0~11(1月~12月)

b. setMonth():设置值时0~11

c. toLocaleString():可根据本地时间把 Date 对象转换为字符串,并返回结果。

// 获取日期时间
var current_date = new Date(); // 创建一个日期对象
console.log(current_date);

current_date_time = current_date.getFullYear(); // 年
console.log(current_date_time);

current_date_time = current_date.getMonth() + 1; // 月,返回的是0~11
console.log(current_date_time);

current_date_time = current_date.getDay(); // 周
console.log(current_date_time);

current_date_time = current_date.getDate(); // 日
console.log(current_date_time);

current_date_time = current_date.getHours(); // 时
console.log(current_date_time);

current_date_time = current_date.getMinutes(); // 分
console.log(current_date_time);

current_date_time = current_date.getSeconds(); // 秒
console.log(current_date_time);

// 返回一个本地时间的字符串
currrent_date_time = current_date.toLocaleString();
console.log(currrent_date_time);

// 设置日期时间
current_date.setFullYear(2008);
current_date.setMonth(7);
current_date.setDate(8);
current_date.setHours(20);
current_date.setMinutes(8);
current_date.setSeconds(8);
console.log(current_date.toLocaleString());

 

五、JavaScript操作BOM对象

ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心。BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何的网页内容无关。多年来,缺少事实上的规范导致BOM既有意思又有问题,因为浏览器厂商会按照各自的想法随意去扩展它。于是,浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在,很大程度上是由于他们提供了与浏览器的互操作型。W3C为了把浏览器中JavaScript最基本的部分标准化,已经将BOM的主要方面纳入了HTML5的规范当中。

1、window对象

BOM的核心对象是window,它表示浏览器的一个实例。window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数,都以window作为其Global对象,因此有权访问parseInt()等方法。如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引(从0开始,从左至右,从上到下)或者框架的名称来访问相应的window对象。

系统对话框

浏览器通过(实际是window对象的方法)alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。

a. 消息框:alert, 常用。

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

b. 输入框:prompt,返回提示框中的值。

prompt() 方法用于显示可提示用户进行输入的对话框。

参数(可选):

    第一个参数:要在对话框中显示的纯文本。

第二个参数:默认的输入文本。

c. 确认框:confirm,返回 true/false.

    confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

<div id="dv">this is a div</div>

<button onclick="test_alert();">消息框</button>
<button onclick="test_prompt();">输入框</button>
<button onclick="test_comfirm();">确认框</button> 

<script type="text/javascript">
   // 消息框
   function test_alert() {
       alert('消息框!');
  }

   // 输入框
   function test_prompt() {
       var item = prompt('请输入年龄');  // item得到输入的值
       alert(item);
       alert(prompt('请输入年龄', 18));  // 将输入的值输出
  }

   /*
  确认框
  返回值:boolean(true|false)
    */
   function test_comfirm() {
       var result = confirm('真的要改吗?');
       if (result) {
           // DOM操作
           var ele = document.getElementById("dv");
           ele.style.color = "red";
           ele.innerHTML = "<span>div is red</span>";
      } else {
           alert("没事别瞎点");
      }
  }
</script>

打开窗口

window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

<input type="button" onclick='openBaidu();' />

<script type="text/javascript">
   function openBaidu() {
       window.open('http://www.baidu.com', '_block');
       // window.open(); // 空白窗口
  }
</script>

时间函数

setTimeout():在指定的毫秒数后调用函数或计算表达式,只执行一次。

setInterval():在指定的毫秒数后不停的调用函数或计算表达式,多次执行。

通过返回的标识也可以clearTimeout()clearInterval()来清除指定函数的执行。

<h1 id="h1"></h1>
<input type="button" value="停止显示时间" onclick='stopShow();' />

<script type="text/javascript">
   // 延迟3 秒后出现 alert
   /*
function hello() {
alert("对不起, 久等了!");
}
window.setTimeout("hello()", 3000);
*/

   // 不停的打印当前时间,当时间秒数为0时显示为红色
   function showTime() {
       // 拿到当前时间
       var date = new Date();
       var time = date.toLocaleString();
       // 拿到相应对象
       var h1 = document.getElementById('h1');
       h1.innerHTML = time;

       console.log(date.getSeconds());
       var sec = date.getSeconds();
       sec = sec % 10; // 对10取余

       // 根据需求添加样式
       if(0 == sec) { // 当时间的秒数变成0时,显示红色字体
           h1.innerHTML = '<span style="color:red">' + time + '</span>';
      }
  }

   /*
* 定时操作
* 第一个参数:执行的方法;
* 第二个参数:定时,单位是毫秒
*/
   // 接收setInterval()返回的标识值
   var timeout = window.setInterval(showTime, 1000);

   // 停止操作
   function stopShow() {
       window.clearInterval(timeout); // 返回的标识值用来停止函数
  }
</script>

2、location对象

location对象是window对象之一,提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。也可通过 window.location 属性来访问。

location 对象的属性href:设置或返回完整的 URL;

location 对象的方法reload():重新加载当前文档。

<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" value="百度" onclick="openBaidu();" />

<script type="text/javascript">
   function openBaidu() {
       // 用新的文档替换当前文档
       window.location.href = "http://www.baidu.com";
  }
</script>

3、document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分,也可通过 window.document 属性对其进行访问。

document对象的body属性,提供对<body>元素的直接访问,在Document对象中我们会详细的讲解。该对象作为DOM中的核心对象存在。

完美ending


到此为止,我们已经把javas最基本的所有内容已经全部学完了,下一篇我们会去实际应用。

是龙是虫,该现行的时候了,我们下一篇见。

猜你喜欢

转载自blog.csdn.net/u014332333/article/details/88547705