你努力的样子很狼狈，但是还是要加油鸭。
因为，你认真的样子真的很帅。
经过之前两篇关于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
更改：数组名.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 οnclick="test_alert();">消息框</button>
<button οnclick="test_prompt();">输入框</button>
<button οnclick="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" οnclick='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="停止显示时间" οnclick='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="刷新" οnclick="window.location.reload();" />
<input type="button" value="百度" οnclick="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最基本的所有内容已经全部学完了，下一篇我们会去实际应用。
是龙是虫，该现行的时候了，我们下一篇见。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
