标签:
# window对象(浏览器对象模型) #
---------------
window对象表示在浏览器中打开的窗口, 它是JavaScript浏览器对象模型中的顶层对象.其中还包括了:
. Document: 使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
. History: 包含用户(在浏览器窗口中)访问过的 URL。
. Location: 包含有关当前 URL 的信息。
. Navigator: 包含有关浏览器的信息。
. Screen: 包含有关客户端显示屏幕的信息。
说明:
1. 说有浏览器都支持 window 对象。它表示浏览器窗口。
2. 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
3. 全局变量是 window 对象的属性。
4. 全局函数是 window 对象的方法。
#### 1. window对象 ####
#### 1.1 位置 ####
方法 描述
screenX 返回相对于屏幕窗口的x坐标(IE不支持)
screenY 返回相对于屏幕窗口的y坐标(IE不支持,距离浏览器最顶端)
screenLeft 返回相对于屏幕窗口的x坐标
screenTop 返回相对于屏幕窗口的y坐标(在IE中包括工具栏+菜单栏+地址栏)
#### 1.2 窗口大小 ####
方法 描述
window.innerWidth 返回窗口的文档显示区的宽度。(IE不支持)
window.innerHeight 返回窗口的文档显示区的高度。(IE不支持)
document.documentElement.clientWidth 返回窗口的文档显示区的宽度。(通用方法)
document.documentElement.clientHeight 返回窗口的文档显示区的高度。(通用方法)
## 2. window对象的方法 ##
#### 2.1 窗体的移动和尺寸(仅IE有效) ####
方法 描述
window.moveBy(x, y) 可相对窗口的当前坐标把它移动指定的像素。
window.moveTo(x, y) 把窗口的左上角移动到一个指定的坐标。
window.resizeBy(x, y) 按照指定的像素相对的调整窗口的大小。
window.resizeTo(x, y) 把窗口的大小调整到指定的宽度和高度。
#### 2.2 滚动条的控制 ####
示例: 滚动条移动
方法 描述
window.scrollBy(x, y) 相对于当前滚动条的位置移动
window.scrollTo(x, y) 把内容滚动到指定的坐标。
#### 2.3 时间间隔函数(计时器) ####
方法 描述
window.setInterval(code, millisec) 按照指定的周期(以毫秒计)来调用函数或计算表达式。
window.clearInterval(obj) 取消由 setInterval() 设置的 timeout。
window.setTimeout(code, millisec) 在指定的毫秒数后调用函数或计算表达式。
window.clearTimeout(obj) 取消由 setTimeout() 方法设置的 timeout。
#### 2.4 打开新窗口 ####
window.open(URL,name,specs,replace)
参数说明:http://www.runoob.com/jsref/met-win-open.html
#### 2. history对象 ####
包含用户(在浏览器窗口中)访问过的 URL。
#### 2.1 属性 ####
属性 描述
length 返回历史列表中的网址数
#### 2.2 方法 ####
方法 描述
history.back() 加载历史列表中的前一个 URL(如果存在),调用该方法的效果等价于点击后退按钮或调用history.go(-1)
history.forward() 加载历史列表中的下一个 URL。调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
history.go(number|URL) 加载历史列表中的某个具体的页面
## 3. location对象 ##
包含有关当前 URL 的信息。
#### 3.1 属性 ####
属性 描述
href 返回完整的URL
hostname 返回URL的主机名
pathname 返回的URL路径名
port 返回一个URL服务器使用的端口号
search 返回一个URL的查询部分
#### 3.2 方法 ####
方法 描述
location.assign(URL) 加载一个新的文档
location.reload() 用于刷新当前文档
location.replace(newURL) 用一个新文档取代当前文档(没有历史记录)
示例:等待3秒跳转
## 4. screen对象 ##
包含有关客户端显示屏幕的信息。
#### 4.1 属性 ####
属性 描述
availHeight 返回屏幕的高度(不包括Windows任务栏)
availWidth 返回屏幕的宽度(不包括Windows任务栏)
width 返回屏幕的总宽度
height 返回屏幕的总高度
## 5. Navigator 对象 ##
对象包含有关浏览器的信息
#### 5.1 属性 ####
属性 描述
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
platform 返回运行浏览器的操作系统平台
总结
语法:
条件判断1:
1. if语句
语法:
if(表达式1){
表达式2;
}
表达式3;
.程序判断表达式1,成立执行表达式2,不成立执行表达式3
2. if...else... 语句
语法:
if(表达式1){
表达式2;
}
表达式3;
.程序判断表达式1,成立执行表达式2,不成立执行表达式3
2. if...else... 语句
语法:
if(表达式1) {
表达式2;
} else {
表达式3;
}
表达式4;
说明: 程序判断表达式1,成立执行表达式2,不成立执行表达式3,再执行表达式4
3. if...else if..
if(表达式1) {
表达式2;
} else if(表达式3) {
表达式4;
} else if(表达式5) {
表达式6;
} else {
表达式7;
}
表达式8;
4. 嵌套使用
if(表达式1) { //区块1
if(表达式2) { //区块2
表达式3;
}
表达式4;
}
表达式5;
说明:
1. 程序判断表达式1,不成立执行表达式5,成立进入区块1;
2. 进入区块1,判断表达式2,成立执行表达式3,否则执行表达式4;
5. switch结构
var a = 1;
switch(a) {
case 1 :
console.log(1);
break;
case 2 :
console.log(2);
break;
case 3 :
console.log(3);
break;
default :
console.log("default");
}
说明: ...break:...跳出控制语句;...default:...当所有...case...都不匹配时执行...default...;
循环语句
循环语句用于重复执行某个操作,它有许多种形式。
1. while循环
while(表达式1) {
表达式2;
}
表达式3;
>说明:首先判断表达式1,成立执行表达式2,然后继续判断表达式1,如果不成立执行表达式3
2. do...while...循环
do {
表达式1;
} while(表达式2);
表达式3;
说明:先执行表达式1,在判断表达式2,如果成立,继续执行表达式1,不成立执行表达式3;
3. for循环
for语句是循环命令的另一种形式,它分成三步:
初始化(initialize):确定循环的初始值,只在循环开始时执行一次;
测试(test):检查循环条件,只要为真就进行后续操作;
递增(increment):完成后续操作,然后返回上一步,再一次检查循环条件。
语义:
for(初始化;测试;递增) {}
执行流程:
for(表达式1;表达式2;表达式3) {
表达式4;
}
表达式5;
>说明:首先执行表达式1,再判断表达式2,如果表达式2成立,则执行表达式4,再执行表达式3,再判断表达式2,不成立的话执行表达式5;
break语句和continue语句
- break语句用于跳出代码块或循环。
- continue语句用于立即终止本次循环,返回循环结构的头部,开始下一次循环
**# 总结** #
----------------------
# 函数 #
----------
## 1. 函数的声明 ##
#### 1.1 关键字 function ####
函数就是使用function命令命名的代码区块,便于反复调用。function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。函
数体放在大括号里面。
//函数的声明
function test() {
//方法体
}
#### #1.2 函数表达式 # ####
除了用function命令声明函数,还可以采用变量赋值的写法。
//函数表达式
var test = function() {
//方法体
}
说明:
1.采用函数表达式声明函数时,function命令后面不带有函数名。
2.函数的表达式需要在语句的结尾加上分号,表示语句结束。而函数的声明在结尾的大括号后面不用加分号。总的来说,这两种声
明函数的方式,差别很细微(变量提升),这里可以近似认为是等价的。
#### ## 1.3 Function构造函数 ## ####
通过Function构造函数声明。总的来说,这种声明函数的方式非常不直观,几乎无人使用。
var add = new Function("x", "y", "return x + y");
console.log(add(1, 2));
#### 1.4 函数的重复声明 ####
如果多次采用function命令,重复声明同一个函数,则后面的声明会覆盖前面的声明。
function f(){
console.log(1);
}
f(); // 2
function f(){
console.log(2);
}
f(); // 2
#### 2. 形式参数和return语句 ####
调用函数时,要使用圆括号运算符。圆括号之中,可以加入函数的参数。
function add(x,y) {
return x+y;
}
add(1,1) // 2
## 3. 立即调用的函数表达式(IIFE(Immediately-Invoked Function Expression)) ##
有时,我们需要在定义函数之后,立即调用该函数。这时,你不能在函数的定义之后加上圆括号,这会产生语法错误。产生这个错误的原因
是,Javascript引擎看到function关键字之后,认为后面跟的是函数定义语句,不应该以圆括号结尾。
function(){ /* code */ }();
// SyntaxError: Unexpected token (
解决方法: 圆括号前面的部分不是函数定义语句,而是一个表达式,可以对此进行运算。
(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
注意,上面的两种写法的结尾,都必须加上分号。
## 4. 第一等公民 ##
JavaScript的函数与其他数据类型处于同等地位,可以使用其他数据类型的地方就能使用函数。比如,可以把函数赋值给变量和对象的属性,也
可以当作参数传入其他函数,或者作为函数的结果返回。这表示函数与其他数据类型的地方是平等,所以又称函数为第一等公民。
function add(x, y) {
return x + y;
}
// 将函数赋值给一个变量
var fn = add;
console.log(fn(1, 2));
// 将函数作为参数和返回值
function operator(fn) {
return fn;
}
console.log(operator(add)(1, 2));
## 5. 函数名的提升 ##
JavaScript引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会被提升到代码头部。所以,下面的代码不会报错。
var sum = add(1, 2);
console.log(sum);
function add(x, y) {
return x + y;
}
表面上,上面代码好像在声明之前就调用了函数add。但是实际上,由于“变量提升”,函数f被提升到了代码头部,也就是在调用之
前已经声明了。但是,如果采用赋值语句定义函数,JavaScript就会报错。
var sum = add(1, 2);
console.log(sum);
var add = function (x, y) {
return x + y;
}
//Uncaught TypeError: add is not a function
如果同时采用function命令和赋值语句声明同一个函数,最后总是采用赋值语句的定义。
var fn = function() {
console.log ("1");
};
function fn() {
console.log("2");
}
fn();
// 1
## 6. 函数的属性和方法 ##
#### 6.1 name属性:返回紧跟在function关键字之后的那个函数名。 ####
function fn1() {}
console.log(fn1.name);
var fn2 = function() {};
console.log(fn2.name);
var fn3 = function fn3() {};
console.log(fn3.name);
#### 6.2 length属性:返回函数定义中参数的个数。 ####
function fn(x, y) {}
console.log(fn.length);
7. 函数作用域
7.1 定义
作用域(scope)指的是变量存在的范围。Javascript只有两种作用域:一种是全局作用域,变量在整个程序中一直存在;另一种是函数作用域,
变量只在函数内部存在。
(1) 在函数外部声明的变量就是全局变量(global variable),它可以在函数内部读取。
(2) 在函数内部定义的变量,外部无法读取,称为“局部变量”(local variable)。
(3) 函数内部定义的变量,会在该作用域内覆盖同名全局变量。
7.2 函数内部的变量提升
与全局作用域一样,函数作用域内部也会产生“变量提升”现象。var命令声明的变量,不管在什么位置,变量声明都会被提升到函数体的头部。
7.3 函数本身的作用域
函数本身也是一个值,也有自己的作用域。它的作用域绑定其声明时所在的作用域。
var a = 1;
var fn = function() {
console.log(a);
};
function fn1() {
var a = 2;
fn();
}
fn1(); //1
### 8. 参数 ###
#### 8.1 概述 ####
函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。
function square(x) {
return x * x;
}
square(2); //4
square(3); //9
8.2 传递方式
JavaScript的函数参数传递方式是传值传递(passes by value),这意味着,在函数体内修改参数值,不会影响到函数外部。
//原始数据类型
var a = 1;
function fn(a) {
a = 3;
}
fn(a);
console.log(a); //1
//引用类型
var arr = [1, 2, 3];
function fn1(arr) {
arr = [4, 5, 6];
}
fn1(arr);
console.log(arr); //[1, 2, 3]
注意 , 虽然参数本身是传值传递,但是对于复合类型的变量来说,属性值是传址传递(pass by reference),也就是说,属性值是通过
地址读取的。所以在函数体内修改复合类型变量的属性值,会影响到函数外部。
//修改对象的属性值
var obj = {
attr : 1
};
function fn(obj) {
obj.attr = 2;
}
console.log(obj.attr);
//修改数组的元素值
var arr = [1, 2, 3];
function fn(arr) {
arr[0] = 4;
arr[1] = 5;
arr[2] = 6;
}
fn(arr);
console.log(arr.toString());
#### 8.3 arguments对象 ####
1) 由于JavaScript允许函数有不定数目的参数,所以我们需要一种机制,可以在函数体内部读取所有参数。这就是arguments对象的由来。
2) arguments对象包含了函数运行时的所有参数,arguments[0]就是第一个参数,arguments[1]就是第二个参数,依次类推。这个对象只有在函
数体内部,才可以使用。
3) 可以通过arguments对象的length属性,判断函数调用时到底带几个参数。
语法
function.apply(thisobj, args)
参数
thisobj
调用function的对象。在函数主体中,thisobj是关键字this的值。
args
一个数组,它的元素是要传递给函数function的参数值。
返回值
调用函数function的返回值。
抛出
TypeError
如果调用该函数的对象不是函数,或参数args不是数组和Arguments对象,则抛出该异常。
描述
apply()将指定的函数function作为对象thisobj的方法来调用,传递给它的是存放在数组args中的参数,返回的是调用function的返回值。在函数体内,关键字this引用thisobj对象。
参数args必须是数组或Arguments对象。如果想单独指定传递给函数的参数,而不是指定数组元素,请使用Function.call()方法。
示例
// 在对象上应用默认的Object.toString()方法,
/ /该对象用该方法的版本覆盖了它。注意,没有参数
Object.prototype.toString.apply(o);
//使用数组中用来查找最大元素的方法来调用Math.max()
// 注意本例中第一个参数没有什么作用
var data = [1,2,3,4,5,6,7,8];
Math.max.apply(null, data);
// function add(a,b){
// return a+b;
// }
//console.log(add(1,2));
//
//function saysomething(){
//console.log("hello world!!")
# ATM #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ATM</title>
<script type="text/javascript">
var users=[
["王海建","123456",1000],
["王建","111111",2000]
];
var username=window.prompt("请输入用户名:");
var password=window.prompt("请输入密码:");
var userIndex = isLogin(username,password);
operation(userIndex);
function save(user){
var money = parseInt(window.prompt("请输入存款金额:"));
user[2] += money;
console.log("操作成功!!")
}
function getMoney(user){
var money = parseInt(window.prompt("请输入取款金额:"));
user[2] -= money;
console.log("操作成功!!")
}
function operation(userIndex){
var flag = true;
while (flag){
var option=window.prompt("1、存款 2、取款 3、查询 4、退出");
switch(option){
case"1":
save(users[userIndex]);
console.log("1");
break;
case"2":
getMoney(users[userIndex]);
console.log("2");
break;
case"3":
console.log("余额:" + users[userIndex][2]);
break;
default:
flag = false;
}
}
}
function isLogin(username,password){
for(var i=0;i<users.length;i++){
if(username == users[i][0]&&password ==users[i][1]){
return i;
}
}
return -1;
}
</script>
</head>
<body>
</body>
</html>
**### 总结 ###**
-
----------
冒泡排序(Bubble Sort
-
冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。
它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。</br>
这个算法的名字由来是因为越大的元素会经由交换慢慢“浮”到数列的顶端,故名。</br>
1.
冒泡排序算法的运作如下:(从后往前)</br>
1. 比较相邻的元素。如果第一个比第二个大,就交换他们两个。</br>
2. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。</br>
3. 针对所有的元素重复以上的步骤,除了最后一个。</br>
4. 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。</br>
function bubbleSort(arr) {
var i = arr.length, j;
var tempexchangval;
while (i > 0) {
for (j = 0; j < i - 1; j++) {
if (arr[j] > arr[j + 1]) {
tempexchangval = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = tempexchangval;
}
}
i--;
}
return arr;
}
var arr = [3, 2, 4, 9, 1, 5, 7, 6, 8];
var arrSorted = bubbleSort(arr);
console.log(arrSorted);
alert(arrSorted);
# 控制台将输出:[1, 2, 3, 4, 5, 6, 7, 8, 9]
并且弹窗; #
**
JS 索引数组、关联数组和静态数组、动态数组 **
-
数组分类:</br>
1、从数组的下标分为索引数组、关联数组 </br>
/* 索引数组,即通常情况下所说的数组 */</br>
var ary1 = [1,3,5,8];</br>
//按索引去取数组元素,从0开始(当然某些语言实现从1开始)</br>
//索引实际上就是序数,一个整型数字</br>
alert(ary1[0]);
alert(ary1[1]);
alert(ary1[2]);
alert(ary1[3]);
/* 关联数组,指以非序数类型为下标来存取的数组 python中称为字典</br> */
var ary2 = {};
//存取时,以非序数(数字),这里是字符串</br>
ary2["one"] = 1;
ary2["two"] = 2;
ary2["thr"] = 3;
ary2["fou"] = 4;
2、从对数据的存储分为静态数组、动态数组 </br>
/* java中的静态数组 */ Int[] ary1 = {1,3,6,9};//定义后数组的长度固定了不能改变,按索引取数组元素 /* java中的动态数组 (java中的ArrayList实现是以Array为基础的,这里说动态数组是广义的,不管采用什么方式实现。不要较劲) */ List<Integer> ary2 = new ArrayList<Integer>(); ary2.add(1);//可以动态的添加元素,数组的长度也随着变化 ary2.add(3); ary2.add(6); </br>
/* js的数组属于动态数组 */</br>
var ary = [];//定义一个数组,未指定长度
ary[0] = 1;//可以动态的添加元素
ary.push(3);
ary.push(5);
alert(ary.join(","));//输出1,3,5
js的数组同时属于索引数组和动态数组,因为本质上它就是一个js对象,体现着js动态语言特性。但js的索引数组并非“连续分配”内存的,因此索引方式并不会带来很高的效率。而Java中的数组则是连续分配内存的。</br>
Array 对象sort 方法</br>
描述:
返回一个元素已经进行了排序的 Array 对象.</br>
语法:
sort() 默认对 字符传进行排序.</br>
arrayobj.sort(sortfunction)
如要求结果是10、16、120这样的数字大小排序,应该使用下面的程序:</br>
<SCRIPT language=JavaScript>
var a=new Array(3);
a[0]=10;
a[1]=16;
a[2]=120;
a.sort(function(x,y){return parseInt(x)-parseInt(y);});
document.write(a+" ");
</SCRIPT>
function(x,y)是具体实现排序功能的函数, 上面的方法是实现升序,如果想实现降序,可以改下返回结果:return parseInt(y)-parseInt(x);</br>
当然如果想实现字符串的排序,则可以直接使用a.sort(param);即sort(param) 默认对字符串进行排序,参数为一函数,如果省略该参数,则那么元素将按照 ASCII 字符顺序进行升序排列.当然也可以实现对Long型数据排序,将parseInt改为parseLong即可.</br>
冒泡排序的原理是这样的,比方说有五个数字54321,要按从小到大排列;</br>
首先比较前两个,就是5和4,如果第一个小于第二个,不做操作,如果第一个大于第二个,那么交换二者的位置,即变成45321,然后比较第二个和第三个,交换位置,变成43521,然后第三个和第四个,第四个和第五个,这样一次循环下来,变成43215</br>
所以,一层循环的效果就是挑出最大的一个数字5,冒泡到最后面。但是还要挑出第二大,第三大的数字,等等。所以一层循环根本就不够用,必须再套一层才行。像这个例子,五个数字,起码要进行四轮循环才行。至于为什么要this.length-i,是因为第一次比较五个数字,第二个只要比较前四个就行了,第五个肯定是最大的了。。</br>
var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i < array.length; i++)
{
for (var j = 0; j < array.length - i; j++)
{
if (array[j] > array[j + 1])
{
temp = array[j + 1];
array[j + 1] = array[j];
array[j] = temp;
}
}
}
console.log(array);
**1.概述**
-
Array是JavaScript的内置对象,同时也是一个构造函数,可以用它生成新的数组。
作为构造函数时,Array可以接受参数,但是不同的参数,会使得Array产生不同的行为。
-
new Array(1); 返回length为1的空数组;
new Array(1, 2);
2. 静态方法
-
-
isArray方法: 用来判断一个值是否为数组。它可以弥补typeof运算符的不足。
-
var a = [1, 2, 3];
typeof a // "object"
Array.isArray(a) // true
上面代码表示,typeof运算符只能显示数组的类型是Object,而Array.isArray方法可以对数组返回true。
-
3. Array实例的方法
-
-
valueOf: valueOf方法返回数组本身。
-
-
toString: 返回数组的字符串形式。
-
-
var a = [1, 2, 3];
a.toString() // "1,2,3"
var a = [1, 2, 3, [4, 5, 6]];
a.toString() // "1,2,3,4,5,6"
push: 用于在数组的末端添加一个或多个元素,并返回添加后的数组的长度。
-
var a = [];
a.push(1) // 1
a.push(‘a‘) // 2
a.push(true, {}) // 4
a // [1, ‘a‘, true, {}]
pop: 用于删除数组的最后一个元素,并返回该元素。
-
var a = [‘a‘, ‘b‘, ‘c‘];
a.pop() // ‘c‘
a // [‘a‘, ‘b‘]
join: 以参数作为分隔符,将所有数组成员组成一个字符串返回。
-
var a = [1, 2, 3, 4];
a.join() // "1,2,3,4"
a.join(‘‘) // ‘1234‘
a.join("|") // "1|2|3|4"
concat: 用于多个数组的合并。它将新数组的成员,添加到原数组的尾部,然后返回一个新数组。
-
[‘hello‘].concat([‘world‘])
// ["hello", "world"]
[‘hello‘].concat([‘world‘], [‘!‘])
// ["hello", "world", "!"]
[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]
shift: 用于删除数组的第一个元素,并返回该元素。
-
var a = [‘a‘, ‘b‘, ‘c‘];
a.shift() // ‘a‘
a // [‘b‘, ‘c‘]
shift: 可以遍历并清空一个数组。
-
var list = [1,2,3,4,5,6,7,8,9,10];
var item;
while (item = list.shift()) {
console.log(item);
}
list // []
unshift: 用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。
-
var a = [‘a‘, ‘b‘, ‘c‘];
a.unshift(‘x‘); // 4
a // [‘x‘, ‘a‘, ‘b‘, ‘c‘]
reverse: 用于颠倒数组中元素的顺序,使用这个方法以后,返回改变后的原数组。
-