Javascript Training

Javascript 基础和进阶数据类型篇马士华

Javascript 简介
JavaScript 是一种轻型的解释型的程序语言。
JavaScript 最开始就是被设计成一种彻底的面向对象语言。

如何调试脚本
调试 js 脚本推荐使用 Firebug console Firebug 提供了许多的有用的工具，如错误控制台， HTTP 请求日志，调试，以及元素查看。
Firebug console 调试例子：
var x = true;
if ( x ) console.log("x defaulted to true")
else console.log("x defaulted to false")

String
例子： "I'm a String in JavaScript!"
typeof "some string"; //"string"
运算符：
+
“ hello,” + “javascript”

String
引号的用法：
"You make 'me' sad.“
'Holy "cranking" moses!'
"<a href="home">Home</a>"

String
方法：
"hello".charAt(0) // "h"
"hello".toUpperCase() // "HELLO"
"Hello".toLowerCase() // "hello"
"hello".replace(/e|o/g, "x") // "hxllx"
"1,2,3".split(",") // ["1", "2", "3"]
“ hello". substring(1,4) //ell
“ hello". substr(1,2) //el
“ hello". Indexof(‘e’,0) //1
“ hello".lastIndexof(‘l’,’hello’.length-1) //3

String
长度属性：
"Hello".length // 5
"".length // 0
默认的 Boolean 属性：
!"" // true
!"hello" // false

Number
Javascript 并不区分整形和浮点，所有的数字都用浮点来表示（ IEEE754 标准的浮点格式，即 double ）。
例子：
123 ， 123.68
typeof 123 // "number"
typeof 123.68// "number"
运算符：
所有的 C 语言中对数字的运算符 (+, -, *, /, %, =, +=, -=, *=, /=, ++, --)

Number
!0 // true
!1 // false
!-1 // false
parseInt & parseFloat
parseInt("123") = 123 (implicit decimal)
parseInt("010") = 8 (implicit octal)
parseInt("010", 10) = 10 (explicit decimal)
parseInt("11", 2) = 3 (explicit binary)
parseFloat("10.10") = 10.1

Number
Numbers to Strings
"" + 1 + 2; // "12"
"" + (1 + 2); // "3"
NaN & Infinity
parseInt("hello", 10) // NaN isNaN(parseInt("hello", 10)) // true
1 / 0 // Infinity
typeof NaN // "number"
typeof Infinity // "number"

Boolean
Boolean 只有 true 和 false 的值
if ( true ) console.log("always!")
if ( false ) console.log("never print!")
运算符：
& ||
true & true //true
true & false //false
true || false //true
false || false //false

||
运用 || 运算符可以产生短路现象：
var t,y,x=0,z=1,w={} ；
var c = t || 0; //now c=0
var c = t || y || 0; //now c=0
var c = t || y || x || 0; //now c=0
var c = t || y || x || z || 0; //now c=z=1
var c = z || y || x || t || 0; //now c=z=1
var c = t || y || w || t || 0; //now c=w

Object
在 Javascript 中任何东西都是 Object. 下面是 Object 的表达式。
var x = {};
var y = { name: "Pete", age: 15 };
typeof {} // "object"

Object
. 符号：
用 . 符号读取和写入 Object 的属性。
y.name // "Pete"
y.age // 15
x.name = y.name + " Pan" // "Pete Pan
x.age = y.age + 1 // 16

Object
[] 符号
也可用 Array 的符号 [] 操作。
var operations = {
increase: "++", decrease: "--“
}
var operation = "increase";
operations[operation] // "++";
operations["multiply"] = "*"; // "*"
x [" age "] //16

Object
遍历：
var obj = { name: "Pete", age: 15 };
for(key in obj) {
console.log("key=" + key, "value="+obj[key]);
}
// "key=name", "value=Pete"
// "key=age", "value=15"
默认的 Boolean 属性 :
!{} //false

Array
例子：
var x = [];
var y = [1, 2, 3];
typeof []; // "object"
typeof [1, 2, 3]; // "object“
读取和写入值：
x[0] = 1;
y[2] // 3

遍历：
for (var i = 0; i < a.length; i++) {
// Do something with a[i]
}
for (var i = 0, j = a.length; i < j; i++) {
// Do something with a[i]
}
for (var i = 0, item; item = a[i]; i++) {
// Do something with item
}
Array

Array
Length 可以用来添加一个元素到 Array 的结尾，等同于 push 方法
var x = [];
x.push(1);
x[x.length] = 2;
x // 1, 2

Array
方法：
var x = [0, 3, 1, 2];
x.reverse() // [2, 1, 3, 0]
x.join(" – ") // "2 - 1 - 3 - 0"
x.pop() // [2, 1, 3]
x.unshift(-1) // [-1, 2, 1, 3]
x.shift() // [2, 1, 3]
x.sort() // [1, 2, 3]
x.splice(1, 2) // return [2, 3] a=[1]
![] // false

未定义的变量和未赋值的变量
var s;
console.log(d) //wrong,d is not defined
console.log(typeof d) //undefined
console.log(s) //undefined

typeof 和 constructor
if ( typeof num == "string" )
num = parseInt( num );
if ( typeof arr == "string" )
arr = arr.split(",");
if ( num.constructor == String )
num = parseInt( num );
if ( str.constructor == Array )
str = str.join(',');
变量类型检查　　——————————————————————————————— 　　 Variable 　　　　　 typeof Variable 　　 Variable.constructor 　　——————————————————————————————— 　　 {an:"object"} 　　　“ object” 　　　　　　 Object 　　 ["an","array"] 　　 “ object” 　　　　　　 Array 　　 function(){} 　　　 “ function” 　　　　　 Function 　　 "a string" 　　　　“ string” 　　　　　　 String 　　 55 　　　　　　　 ” number” 　　　　　 Number 　　 true 　　　　　　　“ boolean” 　　　　　　 Boolean 　　 new User() 　　　　“ object” 　　　　　　　 User 　　——————————————————————————————————

Function
例子：
function named() {}
var handler = function() {}
(function(){
if(console)
window.log=console.log
})()
var a = 1;
setTimeout(function(){log(a);},1000);

Function
Arguments
function log(x) {
console.log(typeof x, arguments.length);
}
log(); // "undefined", 0
log(1); // "number", 1
log("1", "2", "3"); // "string", 3

Function
Call and Apply
我们同样可以指定上下文到 function 通过 call 和 apply 方法，唯一不同的是 call 的参数必须是 Array 或 Arguments 对象。 Apply 接受 array 为 Arguments 。
function scope() {
console.log(this, arguments.length);
}
scope() // window, 0
scope.call("foobar", [1,2]); // "foobar", 1
scope.apply("foobar", [1,2]); // "foobar", 2

Function
Context
在 javascript 中， this 总是指导当前的上下文。默认是 window 对象。
var flashget=“flashget”
console.log(window.flashget) // “flashget”
下面的例子， this 指到 id 为 t 的元素中去了
Object.prototype.getHTML =function(){
if(this['nodeName'])
console.log(this.innerHTML);
}
document.getElementById("t"). getHTML();

Function
改变函数上下文的示例
function changeColor( color ) {
this.style.color = color;
}
//wrong,because window desn't hava style attribute
changeColor( "white" );
var main = document.getElementById("main");
changeColor.call( main, "black" );
function setBodyColor() {
changeColor.apply( document.body, arguments );
}
setBodyColor( "black" );

Function
Scope （作用域）
作用域是 JavaScript 中一个较难处理的特性。所有面向对象的编程语言都有某种形式的作用域；这要看是什么上下文约束着作用域。在 JavaScript 里，作用域由函数约束，而不由块约束 ( 如 while,if, 和 for 里的语句体 ) 。
var v = "globe";
function scope() {
console.log(v) //undefined
var v = "in a function“;
console.log(v); //in a function
}
scope()
console.log(v) //globe

Function
虽然在全局变量中可以不使用 var ，但是在局部变量中一定要使用 var ，下面代码可以说明问题。
var v = "globe";
function scope() {
console.log(v); // globe
v = "in a function"
console.log(v); // in a function
m = "in a function define a globe“
}
scope()
console.log(v) //in a function
console.log(m) // in a function define a globe

Function
Closures （闭包）
闭包意味着内层的函数可以引用存在于包绕它的函数的变量，即使外层的函数的执行已经终止。也意味着内层的函数可以创建外面不可访问的变量和方法。
var obj = document.getElementById("main"); obj.style.border = "1px solid red"; setTimeout(function(){ obj.style.display = 'none'; }, 1000); function delayedAlert( msg, time ) { setTimeout(function(){ alert( msg ); }, time ); } delayedAlert( "Welcome!", 2000 );

Function
使用匿名函数激发一个创建多个闭包函数所需的作用域的例子 :
var items = document.getElementsByTagName("a");
for ( var i = 0,item; item = items[i]; i++ ){
(function(){
var href = item.getAttribute("href");
item["onclick"] = function(){
console.log( href );
return false;
};
})();
item.setAttribute("href","#");
}

Function
function associateObjWithEvent(obj, methodName){
return ( function(e){
e = e||window.event;
return obj[methodName](e, this);
});
}
function DhtmlObject(elementId){
var el = getElementWithId(elementId);
if(el){
el.onclick = associateObjWithEvent(this, "doOnClick");
el.onmouseover = associateObjWithEvent(this, "doMouseOver");
el.onmouseout = associateObjWithEvent(this, "doMouseOut");
}
}
DhtmlObject.prototype.doOnClick = function(event, element){ // doOnClick method body.}
DhtmlObject.prototype.doMouseOver = function(event, element){ // doMouseOver method body.}
DhtmlObject.prototype.doMouseOut = function(event, element){ // doMouseOut method body.}

Function
Reference （引用）
JavaScript 的一个重要的方面是引用的概念。引用就是指向对象实际位置的指针。这是一项极其强大的功能。引用总是只指向最终被引用的对象，而不会是引用本身。 Number ， Boolean ， null 和为定义的值为基本类型。对象，数组，函数为引用类型。
var obj = new Object();
var objRef = obj;
obj.oneProperty = true;
console.log( obj.oneProperty === objRef.oneProperty ); //true
var items = new Array( "one", "two", "three" );
var itemsRef = items;
items.push( "four" );
console.log( items.length == itemsRef.length ); //true
var items = new Array( "one", "two", "three" );
var itemsRef = items;
items = new Array( "new", "array" ); //let items refer to new object.
Console.log( items !== itemsRef ); //true

Function
函数重载
function sendMessage( msg, obj ) {
if ( arguments.length == 2 )
obj.handleMsg( msg );
else
console.log( msg );
}
sendMessage( "Hello, World!" );
sendMessage( "How are you?", {
handleMsg: function( msg ) {
console.log( "This is a custom message: " + msg );
}
});

Function
继承
JavaScript 使用了一种独特的对象创建和继承的方式，称为原型继承（ prototypal inheritance ）。这一方法背后的前提是 , 一个对象的构造器能够从另一个对象中继承方法，建立起一个原型对象，所有的新的对象都将从这个原型创建。
function Person( name ) { this.name = name;}
Person.prototype.getName = function() { return this.name;};
function User( name, password ) {
this.name = name;
this.password = password;
};
User.prototype = new Person();
User.prototype.getPassword = function() { return this.password;
};

Function
类继承
Object.extend = function(destination, source) { for (property in source) { destination[property] = source[property]; } return destination;
}
Object.extend(String.prototype,{
trim:function() {
return this.replace(/(^s*)|(s*$)/g, '');
}
});
“ flashfget ”.trim(); //”flashget”

Function
function create() {
var counter = 0;
this.pi = 3.14;
return {
increment: function() { counter++;return counter ;},
print: function() { console.log(counter); }
}
}
var c = create();
c.increment();
c.[“print”](); // 1

Function
Prototype 和属性
在 javascript 里是先通过属性查找值，然后通过 prototype 查找值。
function Circle(r) {
this.r = r;
}
Circle.prototype.PI = 3.14;
Circle.prototype.Area = function(){return this.PI * this.r * this.r};
var c = new Circle(1);
console.log(c.Area()); //3.14
var d = new Circle(1);
d.PI = 4;
console.log(d.Area()); //4

Function
结合以上概念我们可以编写 AOP 的程序
if(!flashget){
var flashget={};
(function(){
function e(c,a){
var b=c.split(/./);
var d=window;
for(var e=0;e<b.length-1;e++){
d=d[b[e]]
}
d[b[b.length-1]]=a
}
function c(f){
window.onload = f;
}
e("flashget.callBack",c);
e("symbolTable",e);
})()
}
flashget.callBack(function(){alert(‘window.onload’)})

Function
function User( properties ) {
for ( var i in properties ) {
(function(which){
var p= i;
which[ "get" + i ] = function() {return properties[p]; };
which[ "set" + i ] = function(val) {properties[p] = val; };
})(this);
}
}
var user = new User({ name: "Bob", age: 44});
console.log( user.name == null );
console.log( user.getname() == "Bob" );
user.setage( 22 );
console.log( user.getage() == 22 );

Function
错误的代码：
function User( properties ) { for ( var i in properties ) {
(function(){ this[ "get" + i ] = function() { return properties[i]; }; this[ "set" + i ] = function(val) { properties[i] = val; }; })();
}
}
有谁能指出错在哪儿？

Thank you for listening ！

Javascript Training

by beijing.josh on Dec 27, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 2

Statistics

Javascript Training — Presentation Transcript