javascript笔记--尚学堂--白鹤翔 20140828
*************************************************************************************************
001
<!--
<script type="text/javascript" charset="utf-8" >
// helloworld
//浏览器对象 window 弹出警告框
//window.alert('hello javascript! my comming....');
//文档的对象
//document.write('我是第一个程序...!');
//把内容打印到控制台
//console.info('hello js!!!');
</script>
-->
<!-- 外部引入文件 src属性 -->
<!-- 解析顺序 从上到下 边解析边执行 -->
<!-- 延迟执行：defer 可以延迟执行代码（当页面都加载完毕以后 window.onload） -->
<script type=text/javascript charset=utf-8 defer="defer" src='../commons/001.js'></script>
<script type=text/javascript charset=utf-8 >
alert('我是内部代码!!!!');
</script>
*************************************************************************************************
002--
<script type=text/javascript charset=utf-8>
//关于全局变量和局部变量的简单说明
/*
var a = 3 ; // number 全局变量
//变量一共有两种： 全局变量 局部变量
function test(){
//var b = 2 ; //局部变量
c = 5 ; //全局变量
alert(a);
}
test();
alert(c);
//alert(b);
*/
//javascript是弱类型变量的脚本语言 ,根据赋值决定变量的类型
// Number类型 整数和小数
var a1 = 10 ;
var a2 = 10.5 ;
var a3 = NaN; //not a number
var a4 = 1/0 ; //正无穷
var a5 = 070; //8进制 和16进制(0xA)
//alert(a4);
//alert(a5);
/*
var a6 = 0.1 ;
var a7 = 0.2 ;
if(a6+ a7 == 03){
alert('等于0.3');
} else {
alert('不等于0.3');
}
*/
var a8 = parseInt("aaabbcc"); //不是一个数
//alert(a8);
var a9 = parseInt("12bbcc");
//alert(a9);
//undefined 数据类型 他的值只有一个：undefined 表示变量声明了,但是没有被赋值
var b1 ;
//alert(b1);
//Null 空值
var b2 = null ;
//alert(b2);
//String
var str1 = "我是字符串1";
var str2 = '我是字符串2';
// Boolean
var flag1 = false ;
var flag2 = true ;
// 引用数据类型
var arr = [1,2,3]; //数组类型
var dates = new Date(); //日期类型
var obj = {}; //空对象
// typeof 操作符 用来判断数据类型的
var a = 10 ;
var b = 10.3 ;
var c = true ;
var d = 'abcd';
var e = new Date();
var f = NaN ;
var g = [1,2,3];
var h = undefined ;
var i = null; //表示一个空对象的引用
alert(typeof i);
</script>
*************************************************************************************************
003--
/*
var a1 = 10 ;
var a2 = 10.0 ;
if(a1 == a2){
alert('相等');
}
*/
//js数据自动转换的机制
/*
var a = "1" ; //number
var b = true ; //boolean
// == 表示 可以经过自动转换 比较的是数值
// === 表示 可以经过自动转换 先比较值, 再比较数据类型
if(a == b){
alert('相等');
} else {
alert('不等');
}
*/
//三目运算符：
//var c = 10/2>4?5:3;
//alert(c);
*************************************************************************************************
004--
<script type=text/javascript charset=utf-8>
/**
* 数组本身也是对象
* js中数组类似于java里的map容器 长度可随意改变 ,元素类型任意
*
*/
// var arr = new Array();
// var arr = [1,2,3,4,true ,'abc' , new Date()] ;
// alert(arr.length);
// arr.length = 5 ;
// alert(arr.toString()); // [object object]
/**
* push 和 pop 方法
*/
//var arr = [new Date(),false] ;
//var result = arr.push(1,2,true); //push方法向数组中追加元素(返回值为新数组的长度)
//alert(arr);
//alert(result);
//var obj = arr.pop(); //从数组的尾部移除一个元素(返回值为移除的元素)
//alert(arr);
//alert(obj);
/**
* shift 和 unshift 方法
*/
//var arr = [1,2,3, true , new Date()];
//var r1 = arr.shift(); //从头部移除一个元素(返回移除的元素)
//alert(arr);
//alert(r1);
//var r2 = arr.unshift(10,false); //从头部插入多个元素(返回新数组的长度)
//alert(arr);
//alert(r2);
/**
* splice、slice 方法 (截取的方法)
* splice方法操作数组本身
* slice方法不操作数组本身
*
*/
// splice: 第一个参数 :起始位置
// 第二个参数 ：表示截取的个数
// 第三个参数以后:表示追加的新元素个数
//var arr = [1,2,3,4,5];
//arr.splice(1,2,3,4,5); // 134545
//alert(arr);
// slice：//返回截取的内容 //截取范围 (左闭右开区间)
//var arr = [1,2,3,4,5];
//var reuslt = arr.slice(2,4);
//alert(reuslt); //3,4
//操作数组的方法: concat join
//var arr1 = [1,2,3];
//var arr2 = [true , 4 , 5];
//var reuslt = arr1.concat(arr2); //合并粘连的操作(不操作数组本身)
//alert(reuslt);
//var result = arr1.join('-'); //在每个元素之间加入内容(不操作数组本身)
//alert(arr1);
//alert(result);
/**
* sort排序
* reverse倒叙
*/
var arr1 = [5,2,1,4,3];
var arr2 = [10,2,4,1,7];
//arr1.sort();
//arr1.reverse(); //倒叙排序 是按照集合的位置进行倒叙的
//alert(arr1);
//arr2.sort();
//alert(arr2); // 1 10 2 4 7
function compare(value1 , value2){
if(value1 < value2){
return -1 ;
} else if(value1 > value2){
return 1 ;
} else {
return 0 ;
}
}
arr2.sort(compare);
alert(arr2);
</script>
*************************************************************************************************
005--
<script type=text/javascript charset=utf-8>
var arr = [1,2,3,4,5,4,3,2,1];
/*
//新加位置的方法: indexOf lastIndexOf
// 1个参数的时候表示传值 返回索引位置(index从0开始)
//var index = arr.indexOf(4);
// 2个参数的时候 第一个参数表示起始位置 第二个参数还是值
//var index = arr.indexOf(4,4);
//alert(index);
//他们查找数组比较的时候 '==='
// lastIndexOf
//var index = arr.lastIndexOf(2);
//alert(index);
*/
//5个新加迭代的方法
//every :对于数组每一个元素进行一个函数的运行 如果都返回true 最后则返回true 如果有一个返回false最后结果则返回false
/*
var result = arr.every(function(item , index , array){
return item > 2 ;
});
alert(result);
*/
//filter :对于数组的每一个元素进行一个函数的运行 给定的函数去执行 把过滤后的结果返回
/*
var result = arr.filter(function(item , index , array){
return item > 2 ;
});
alert(result);
*/
//forEach :循环数组每一项的值 并执行一个方法
/*
arr.forEach(function(item, index, array){
alert(item);
});
*/
//map 对于数组的每一个元素进行一个函数的运行 可以经过函数执行完毕后 把新的结果返回
/*
var result = arr.map(function(item, index, array){
return item*2;
});
alert(result);
*/
//some :对于数组每一个元素进行一个函数的运行 如果有一项返回true 最后则返回true 如果每一项都返回false最后结果则返回false
/*
var result = arr.some(function(item, index, array){
return item >=5 ;
});
alert(result);
*/
//reduce reduceRight
//变量的起始位置不同
//前一个值 , 当前值 , 索引位置 , array
/*
var result = arr.reduce(function(prev , cur , index , array){
return prev + cur ;
});
alert(result);
*/
/*
var result = arr.reduceRight(function(prev , cur , index , array){
return prev + cur ;
});
alert(result);
*/
</script>
*************************************************************************************************
004-arrayECMA5
<script type=text/javascript charset=utf-8>
var arr = [1,2,3,4,5,4,3,2,1];
/*
//新加位置的方法: indexOf lastIndexOf
// 1个参数的时候表示传值 返回索引位置(index从0开始)
//var index = arr.indexOf(4);
// 2个参数的时候 第一个参数表示起始位置 第二个参数还是值
//var index = arr.indexOf(4,4);
//alert(index);
//他们查找数组比较的时候 '==='
// lastIndexOf
//var index = arr.lastIndexOf(2);
//alert(index);
*/
//5个新加迭代的方法
//every :对于数组每一个元素进行一个函数的运行 如果都返回true 最后则返回true 如果有一个返回false最后结果则返回false
/*
var result = arr.every(function(item , index , array){
return item > 2 ;
});
alert(result);
*/
//filter :对于数组的每一个元素进行一个函数的运行 给定的函数去执行 把过滤后的结果返回
/*
var result = arr.filter(function(item , index , array){
return item > 2 ;
});
alert(result);
*/
//forEach :循环数组每一项的值 并执行一个方法
/*
arr.forEach(function(item, index, array){
alert(item);
});
*/
//map 对于数组的每一个元素进行一个函数的运行 可以经过函数执行完毕后 把新的结果返回
/*
var result = arr.map(function(item, index, array){
return item*2;
});
alert(result);
*/
//some :对于数组每一个元素进行一个函数的运行 如果有一项返回true 最后则返回true 如果每一项都返回false最后结果则返回false
/*
var result = arr.some(function(item, index, array){
return item >=5 ;
});
alert(result);
*/
//reduce reduceRight
//变量的起始位置不同
//前一个值 , 当前值 , 索引位置 , array
/*
var result = arr.reduce(function(prev , cur , index , array){
return prev + cur ;
});
alert(result);
*/
/*
var result = arr.reduceRight(function(prev , cur , index , array){
return prev + cur ;
});
alert(result);
*/
</script>
*************************************************************************************************
005--
<script type=text/javascript charset=utf-8>
//Object 所有类的基础类
//var obj = new Object();
var obj = {} ; // 实例化对象
// 给对象设置属性
obj.name = '张3';
obj.age = 20 ;
//obj.sex = '男';
obj["birthday"] = '1980-08-07';
obj.say = function(){
alert('hello world!');
}
// 访问对象的属性或方法
//alert(obj.name);
//alert(obj.age);
//obj.say();
// delete 操作符 删除对象的属性或方法的
/*
delete obj.age ;
delete obj.say ;
alert(obj.name);
alert(obj.age);
alert(obj.sex);
obj.say();
*/
// 如何去变量一个js对象 for in 语句式
/*
for(var attribute in obj) {
alert(attribute +" : "+ obj[attribute]);
}
*/
//Constructor保存对象的创建函数
//alert(obj.constructor);
//var arr = [] ;
//alert(arr.constructor);
//hasOwnProperty(propertyName) 用于检测给定属性在对象中是否存在
//alert(obj.hasOwnProperty('sex'));
//isPrototypeOf(Object) 检测原型
//检测给定的属性是否能被for in 所枚举出来
//alert(obj.propertyIsEnumerable('say'));
</script>
*************************************************************************************************
006--
<script type=text/javascript charset=utf-8>
function Map(){
// private
var obj = {} ;// 空的对象容器,承装键值对
// put 方法
this.put = function(key , value){
obj[key] = value ; // 把键值对绑定到obj对象上
}
// size 方法 获得map容器的个数
this.size = function(){
var count = 0 ;
for(var attr in obj){
count++;
}
return count ;
}
// get 方法 根据key 取得value
this.get = function(key){
if(obj[key] || obj[key] === 0 || obj[key] === false){
return obj[key];
} else {
return null;
}
}
//remove 删除方法
this.remove = function(key){
if(obj[key] || obj[key] === 0 || obj[key] === false){
delete obj[key];
}
}
// eachMap 变量map容器的方法
this.eachMap = function(fn){
for(var attr in obj){
fn(attr, obj[attr]);
}
}
}
//模拟java里的Map
var m = new Map();
m.put('01' , 'abc');
m.put('02' , false) ;
m.put('03' , true);
m.put('04' , new Date());
//alert(m.size());
//alert(m.get('02'));
//m.remove('03');
//alert(m.get('03'));
m.eachMap(function(key , value){
alert(key +" ："+ value);
});
</script>
*************************************************************************************************
007--
<script type=text/javascript charset=utf-8>
var arr = [2,1,2,10,2,3,5,5,1,10,13]; //object
// js对象的特性 : 在js对象中 key 是永远不会重复的
/*
var obj = new Object();
obj.name = 'z3';
obj.age = 20 ;
//alert(obj.name);
obj.name = 'w5';
alert(obj.name);
*/
// 1 把数组转成一个js的对象
// 2 把数组中的值,变成js对象当中的key
// 3 把这个对象 再还原成数组
// 把数组转成对象
function toObject(arr){
var obj = {} ; // 私有的对象
var j ;
for(var i=0 , j= arr.length ; i<j; i++){
obj[arr[i]] = true ;
}
return obj ;
}
// 把这个对象转成数组
function keys(obj){
var arr = [] ; // 私有对象
for(var attr in obj){
if(obj.hasOwnProperty(attr)){ //YUI底层代码
arr.push(attr);
}
}
return arr ;
}
//综合的方法 去掉数组中的重复项
function uniq(newarr){
return keys(toObject(newarr));
}
alert(uniq(arr));
</script>
*************************************************************************************************
008--
<script type=text/javascript charset=utf-8>
/*
//Global 全局的 终极的 兜底的对象 (不存在的)
var uri = 'http://www.bjsxt.com cn';
//encodeURI 、encodeURIComponent
var str1 = encodeURI(uri); // %20 // (url : // 不会进行编码)
var str2 = encodeURIComponent(uri); //常用的方法 (任何不标准的文字都会进行编码)
//alert(str1);
//alert(str2);
//decodeURI、decodeURIComponent
//alert(decodeURI(str1));
//alert(decodeURIComponent(str2));
*/
/*
//eval(string) 方法 无形的javascript解析器
//var str1 = "var a = 10 ; var b = 20;";
//eval(str1);
//alert(a+b);
// 数组字符串 直接使用: eval(stringarr);
// {name:z3 , age:20}
var strobj = "{name:'z3' , age:20}";
var obj = eval('('+strobj+')');
alert(obj.name);
*/
//parseInt parseFloat
/*
var num1 = parseInt('20');
var num2 = parseFloat('20.5');
alert(num1 + ' ' + num2);
alert(typeof num1);
alert(typeof num2);
*/
//escape unescape URI
/*
var str1 = '尚学堂';
var str2 = escape(str1);
alert(str2);
var str3 = unescape(str2);
alert(str3);
*/
/*
//isNaN // 如果不是number类型 true 是number类型 false
var num1 = '10';
var num2 = 'abcd10e';
alert(isNaN(num2));
//在js里面 只有NaN 自己不等于自己本身的
if(NaN == NaN){
alert('相等');
} else {
alert('不等')
}
*/
/*
//Date 日期类型
var date = new Date();
//alert(date);
var year = date.getFullYear();
var month = date.getMonth() + 1 ;
var da = date.getDate();
var day = date.getDay();
var hours = date.getHours();
var min = date.getMinutes();
var sc = date.getSeconds();
document.write('今天是' + year + '年' + month + '月 ' + da+ '日' + hours +':' + min +':' +sc+ '星期' +day );
document.write('\n' + date.getTime());
*/
</script>
*************************************************************************************************
009--
<script type=text/javascript charset=utf-8>
//简单的一个函数: function关键字+函数的名字 (没有返回值类型)
//参数列表相当于函数的入口, return 相当于函数的出口
/*
function test(a ,b){
//alert(a+b);
//alert(111);
return a+b;
}
var c = test(10 , 20);
//alert(c);
alert(typeof test); //函数也是一种数据类型 (function类型)
*/
function test1(aa){
aa();
}
function test2(){
alert('执行啦');
}
test1(function(){ alert('我也执行啦!')});
// 在js中函数是可以嵌套定义的 (尽量不要这样去定义)
function test3(){
function test4(){
alert('我是test4!');
}
test4();
}
test3();
</script>
*************************************************************************************************
010--
<script type=text/javascript charset=utf-8>
// 3种方式定义函数
/*
// 1 function语句式
function test1(){
alert('我是test1');
}
//test1();
// 2函数的直接量 ECMAScript
var test2 = function(){
alert('我是test2');
}
//test2();
// 3function构造函数式
var test3 = new Function("a" , "b" ,"return a+b;");
//alert(test3(10,20));
*/
//效率对比
/*
var d1 = new Date();
var t1 = d1.getTime();
for(var i =0 ; i <100000;i++){
//function test1(){;} //function语句的形式
var test2 = new Function();
}
var d2 = new Date();
var t2 = d2.getTime();
alert(t2 -t1);
*/
// 解析顺序问题 对于function语句式的函数，javascript解析器会优先的解释
/*
test1();
function test1(){
alert('1111');
}
*/
//alert(test2); //表示变量声明了 但是没有被赋值
//test2();
/*
var test2 = function(){
alert('2222');
}
*/
/*
// 4 2 3 3 5 6
function f(){return 1;} // 函数1
alert(f()); //返回值为4 说明第1个函数被第4个函数覆盖
var f = new Function("return 2;"); // 函数2
alert(f()); //返回值为2 说明第4个函数被第2个函数覆盖
var f = function(){return 3;} // 函数3
alert(f()); //返回值为3 说明第2个函数被第3个函数覆盖
function f(){return 4;} // 函数4
alert(f()); //返回值为3 说明第4个函数被第3个函数覆盖
var f = new Function("return 5"); // 函数5
alert(f()); //返回值为5 说明第3个函数被第5个函数覆盖
var f = function(){return 6 ;} // 函数6
alert(f()); //返回值为6 说明第5个函数被第6个函数覆盖
*/
//函数作用域的概念
/*
var k = 1 ;
function t1(){
var k = 2 ; //局部变量 k
//function test(){return k ;} //function语句
//var test = function(){ return k}; //函数直接量
//var test = new Function('return k;'); // 构造函数的方式
alert(test());
}
t1();
*/
</script>
*************************************************************************************************
011--
<script type=text/javascript charset=utf-8>
// function参数
//形参列表
/*
//js中 函数的参数: 形参 实参
function test(a,b){
//alert(test.length); // 4个
//函数的实际参数 内部就是用一个数组去接受函数的实际参数
// arguments 对象 可以访问函数的实际参数
// arguments 对象 只能在函数的内部访问和使用
//alert(arguments.length);
//alert(arguments[0]);
//alert(arguments[1]);
if(arguments.callee.length == arguments.length){
return a+b;
} else {
return '参数不正确!';
}
//arguments对象 用的最多的 还是做递归操作
//arguments.callee
}
alert(test(10,20)); // 30
*/
/*
function fact(num){
if(num <=1) return 1 ;
else return num*arguments.callee(num-1);
}
//alert(fact(5));
var F = fact ;
fact = null;
alert(F(5));
*/
</script>
*************************************************************************************************
012--
<script type=text/javascript charset=utf-8>
// this:this对象是指在运行时期基于执行环境所绑定的
// this总是指向调用者,也就是说 谁调用了我 我就指向谁
/*
var k = 10 ;
function test(){
this.k = 20 ;
}
//window.test();
window.test();
//alert(test.k); undefined
alert(k);
*/
</script>
*************************************************************************************************
013--
<script type=text/javascript charset=utf-8>
//call apply 简单的用法:绑定一些函数 用于传递参数 调用
/*
function sum(x , y){
return x+y;
}
function call1(num1 , num2){
return sum.call(this , num1 , num2);
}
function apply1(num1 , num2){
return sum.apply(this , [num1,num2]);
}
alert(call1(10 , 20));
alert(apply1(20,40));
*/
//扩充作用域
/*
window.color = 'red';
var obj = {color:'blue'};
var obj2 = {color:'yellow'};
function showColor(){
alert(this.color);
}
//showColor.call(window);
//showColor.call(obj);
*/
// call方法的简单模拟与实现
//function 方法
function test1(a , b){
return a+b;
}
// 自定义的对象
function Obj(x, y){
this.x = x ;
this.y = y ;
return x*y;
}
var o = new Obj(10 , 20);
o.method = test1 ;
alert(o.method(o.x , o.y));
delete o.method;
//alert(test1.call(o,o.x ,o.y));
</script>
*************************************************************************************************
014--
<script type=text/javascript charset=utf-8>
//1 执行环境 window对象(最上层的执行环境)
var color1 = "blue";
function changeColor(){ // 每一个函数 都有一个执行环境 （variable obj）
var color2 = "red";
function swapColor(){ // 这个函数 又产生了一个执行环境 (variable obj)
// c3 3级作用域 c2 2级作用域 c1 1级作用域
var color3 = color2;
color2 = color1;
color1 = color3;
//这里可以访问：color1、2、3
}
//这里可以访问color1、color2、但不能访问color3
swapColor();
}
//这里只能访问color1
changeColor(); // 作用域 window 第一个作用环境
// 环境变量 可以一层一层的向上进行追溯 可以访问它的上级 环境(变量和函数)
// 一层一层的像上追溯
</script>
*************************************************************************************************
015--
<script type=text/javascript charset=utf-8>
//垃圾收集 方法1 标记方法 2 引用计数法
/*
function test(){
var a = 10 ; //被使用
var b = 20 ; //被使用
var c ;
}
test(); //执行完毕 之后 a、b又被标记了一次 :没有被使用
*/
//块级作用域的概念
//高级程序语言 java for if 块级作用域的概念、
// js 没有块级作用域的概念
/*
function test(){
for(var i = 1 ; i <=5; i++){ //i
alert(i);
}
//alert(i); //6
}
*/
//test();
// js : () 表示执行
/*
function test(){
(function(){
for(var i = 1 ; i <=5; i++){ //i
alert(i);
}
})();
alert(i);
}
test();
*/
//(function(){alert('我直接执行了!');})();
</script>
*************************************************************************************************
016--
<script type=text/javascript charset=utf-8>
/*
var name = "xiao A";
var obj = {
name : "xiao B" ,
getName: function(){
return function(){
return this.name;
}
}
};
//alert(obj.getName()());
var k = obj.getName(); //全局作用域
//alert(typeof k); // function类型
alert(k());
*/
/*
var name = "xiao A";
var obj = {
name : "xiao B" ,
getName: function(){
// this总是指向调用者
var o = this;
return function(){
return o.name;
}
}
};
//alert(obj.getName()());
var k = obj.getName();
alert(k());
*/
// 闭包：一个函数 可以访问另外一个函数作用域中的变量
// 封闭性 : private 起到一个保护变量的作用
// 1
function f(x){ // 2
var temp = x ; //局部变量 //temp已经没有被使用
return function(x){ // 3 (function 有了一个执行域 var obj)
temp += x ; // 又被使用了
alert(temp);
}
}
var a = f(50);
//alert(a);
a(5);
a(10);
a(20);
</script>
*************************************************************************************************
浙公网安备 33010602011771号