JavaScript入门学习笔记

1.什么是JavaSript
     HTML只是描述页面长相的标记语言,没有计算,判断能力,如果所有计算,判断(比如判断文本框是否为空)都放到服务器执行的话网页的话页面会非常慢,用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算,判断.JavaScript就是一种浏览器执行的语言
     JavaScript和Java没有直接关系,简称JS
     JS是解释型语言,无需编译就可以随时运行,哪怕预压有错误,没有语法错误的部分还是能正确运行
     JavaScript组成：核心语法（ECMAScript）Dom（文档对象模型）Bom（浏览器对象模型）

2.JS入门
     <script type="text/javascript">
      alert(new Date().toLocaleDateString());
</script>
JS代码可以放在,head,body任何位置
new Date()是创建一个Date类的对象
<script language="">已经不推荐使用
除了可以在页面中声明JavaScript,还可以调用外部的js文件,比如外面的js文件为Common.js文件,里面alert(new Date().toLocaleDateString());
   <script src="Common.js" type="text/javascript"></script>

字符串推荐使用‘’把字符串显示

严格区分大小写

3.js的变量
     js中即可以使用双引号声明字符串,也可以用单引号(推荐)声明字符串,主要方便html继承,避免转义符的麻烦
     js中有null,undefined两种,null表示变量为空,underfined则表示变量还没有指向任何对象,未初始化.两者的区别参考资料
     js是弱类型,声明变量的时候无法:int i=0; 只能通过var i=0;声明变量,和C#中的var不一样,不是c#中哪样的类型判断
     js也可以不用var声明变量,直接用,这样的变量时"全局变量",因此除非却是想用全局变量,否则使用的时候最好加上var
     在js里面是没有承认的全局变量,不要不加var
     js是动态类型,因此var i=0; i="abc";是合法的

undefined和整数相加返回NAN

4.JavaScript共六种数据类型：

Boolean（布尔），取值：只有两种值：true或false
Number（数字），取值：所有数字，包含整数小数等，范围相当于double。
String（字符串），取值：所有字符串。
Undefined（未定义），取值：只有一个值undefined
Null（空对象），取值：只有一个值null
Object（对象类型），取值：任何对象、Array、function等等

5.类型中的未知和空，==和===问题
加断点,在vs环境下调试

   // ==相等和 ===完全相等
               var n=10;
               var n2='10';
               alert(n == n2); //true 因为没有类型判断
               alert(n === n2);//false

               var nn = 10;
               switch(nn){
                    case '10':
                         alert('字符串10');
                         break;
                    case 10:
                         alert('数字10');//这个就是说明case是===判断
                         break;
               }

  var nnn1;
               var nnn2 = null;
               alert(nnn1 == nnn2); //true 因为没有类型判断
               alert(nnn1 === nnn2);//false 类型不同

null与undefined表示的意义是完全不同的。

undifined表示一个未知的值，比如变量声明了没有赋值，方法没有返回值的时候，或是一个未知变量。
null，表示的是一个已知的值，这个值就是null，null表示不指向任何对象。

当一个变量为null，这时，这个变量的值不是未知的，为是一个已知的值，就是null，表示不指向任何变量

6.判断变量初始化

js中判断变量,参数是否非初始化的三种方法
var x;

if (x == null ) {

alert( "null")

}

if (typeof (x) == "undefined") {

alert( "undefined");

}

if (!x) { alert('不x' ); } //推荐,简单

7.变量所用域

总结1：直接在页面上声明的变量，在整个页面都能访问

总结2：在函数内任何地方声明的变量在函数内哪里都能使用

总结3：第二次重复声明变量会自动忽略var关键字

总结4：不声明直接赋值,直接作为全局变量

总结5：当局部变量和全局变量重复声明的时候，在函数内优先用局部变量

var n=10;//在整个页面内都能使用
               function myFunc(){
                    alert(n);
                    var m =100;
                    if( m>0){//在函数内任何地方声明的变量在函数内哪里都能使用
                         var x =10;
                    }
                    alert(x);
               }
               myFunc();
               alert(m);//这里报错，方法中的变量有局部性

var n=10;//在整个页面内都能使用

               function myFunc(){
                    var sum = 0;
                    n = 100;//不声明直接赋值,直接作为全局变量
                    n++;
               }
               myFunc();
               alert(n);
               alert(sum);//报错,函数

8.转义字符的问题

JavaScript中字符串同样需要转义符 ’ \ ’，与C#一样。
想在页面输出：c:\windows\microsoft\vs.txt，这句话，需要这样写：alert(‘c:\\windows\\microsoft\\vs.txt’);不能用@，@只在C#中有效。
常见转义符： \t、\n、\’、\”、\\
在用正则表达式的时候也会遇到转义符问题。（*）

9.js数据类型转换

一、字符串转换数字：
parseInt(numString[, radix])，字符串转换整数
parseFloat(numString)，字符串转换小数
二、任意类型到指定类型的转换：
将任意类型转换为数字：
Number(object);
任意类型转换为字符串：
1.String(object)
2.对象.toString();
任意类型转换为Boolean：
Boolean(object)
NaN（Not a Number）：当将某类型转换为数字失败时，返回NaN。表示不是一个数字。NaN不等于任何值，包括它自己，需要使用isNaN(arg)函数。（NaN==NaN返回false）
类型转换时从第一个字符依次转换，如果出错则终止转换，比如123r4.44转换int，结果是123；
//判断一个值是否是NaN用isNan()来判断

10.JavaScript的eval()方法（*）

eval(codeString)
将一段字符串的js代码，计算并执行。
alert(eval(‘2+3’));
eval(‘alert(100);’);
该方法知道即可，一般不建议使用，效率低，且不安全。
关于&&与||的补充，js中一种常见的用法：
var r="a" || ""; // 判断true || false == true 结果"a"
var r=null || 15; // false || true == true 结果15
var r="a" && 0; // true && false == true 结果 a
var r=null && 15; // false && true == true 结果15
var r=100 && 'hello'; // true && true = true结果'hello'
var r=100 || 'hello'; // true || true = true结果 100
见备注1.
如果必须使用eval,则用new Function()来代替eval()

10.函数的声明*
     function add(i1, i2){
               return i1+i2;
          }
     int add(int i1,int i2) //C#中的写法
     最好把声明放在前面,效率比较高
     alert(add(1,4));
     在js中不存在函数必须有返回值,如果没有就返回undefined

11.匿名函数
避免函数名冲突的问题

匿名函数的意思就是指：将函数定义语句当做一个表达式来处理。既然是表达式，则可以直接赋值，出现在小括号中等等。
第一种写法：
var fn = function (x, y) { return x + y; };（不要忘记分号）
调用：alert(fn(10,20)); 应用之一：设置事件处理程序。
第二种写法：
var result = (function (x, y) { return x + y; })(10, 20);
alert(result);
这种写法表示定义了一个匿名函数，立即调用。
第三种写法（动态函数）：
var fn = new Function("x", "y", "z", "var sum=x+y+z;alert(sum);");
或：var fn = new Function("x,y,z", "var sum=x+y+z;alert(sum);");
调用：fn(10, 20, 30);

12.js函数不能重载：arguments对象

JavaScript中没有方法重载的概念。
观察备注1中代码，说出执行结果及理由。
既然函数没有重载，那么如何实现类似C#中函数重载的功能？
add(10,20)
add(10,20,30);
add(10,20,30,40);
add(10,20,30,40,......);
要想实现以上n种调用方式都可以被正确执行该怎么办？
一、通过arguments对象可以判断用户在调用函数时，是否传递了参数，以及传递了几个参数。
二、虽然可以通过arguments对象获取参数，但在实际编程当中还是建议编写“命名参数”，增强程序可读性。
三、通过arguments对象获取参数的方式类似于C#中的params关键字效果。

13.事件

在超链接的点击里执行JavaScript: <a href="javascript:alert('hello')">点点</a> 
     当按钮被点击执行javaScript
     <input type="button" onclick="alert('99')" value="久久"/>
     只有超链接的href中的JavaScript中才需要加"javascript",因为它不是事件,而是把"javascript:"当成"http:","ftp:","thunder:","ed2k:"一样的网络协议,交给js引擎处理

14.函数定义与变量声明的“预解析”功能？？？

在程序执行之前，会先进行函数的预解析，先将函数定义定下来。

var x = 1, y = 0, z = 0;

function add(n) { n = n + 1; return n }

y = add(x);// 这里调用的是第二个函数定义，因为预先解析

function add(n) { n = n + 3; return n; }

z = add(x);

alert(y + '......' + z); //执行结果4 ................... 4

15.“函数”也是“对象”

16.Array对象*
js中的Arry对象就是数组,首先是一个动态数组,而且是一个像c#中的数组,arryList,Hashtable等的超强综合体
var names = new Array();

names[0] = "tom";

names[1] = "jerry";

names[2] = 'lily';

names[3] = 123;

names[3] += 1;

for (var i = 0; i < names.length; i++) {

alert(names[i]);

}

无需预先定制大小,动态,类型也是动态的

var arr=['2003','China','Lili']; 推荐这么写

14.Js中的Dictionary*

js中的arry是一个宝贝,不仅是一个数组,还是一个dictionary,还是一个Stack

var dict = new Array();

dict[ "人"] = "ren" ;

dict[ "口"] = "kou" ;

dict[ "手"] = "shou" ;

alert(dict[ "口"]);

alert(dict.口);

for(var k in dict) { //js中的foreach语法,遍历主键

alert(k);

}

结果是遍历了,人,口,手

数组用法只是一个dictionary的用法的一个特例,取出的是主键

自己:感觉投机取巧一点,可以alert(dic[k]);这样就可以遍历全部了

15.Array和Dictionary的简化声明*

var arr = [3, 5, 6, 7, 8]; //普通数组初始化

var arr1 = { "tom" : 30, "lily": 20, 'sayHi' : function(){ alert('Hello')!}}; //dictionary

alert(arr1[ "lily"]);

arr1.sayHi();

16.数组,for,以及其他

//获得对象所有的成员,为什么可以获得呢?对象的成员就是以对象的key的形式出现的

for (var e in document) {

alert(e);

}

var p1 = new Person();

p1.Age = 10;

p1.Name = "df";

p1.SayHello = function(){alert("dgf" );}; //外部动态生成对象

for (var e in p1) { //遍历所有对象,成功出现Name,Age,Hello,SayHello

alert(e);

}

17. String字符串对象

length属性：获取字符串的字符个数。（无论中文字符还是英文字符都算1个字符。）
charAt(index)方法：获取指定索引位置的字符。（索引从0开始）
indexOf(‘字符串’,startIndex)方法：获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。
split(‘分隔符’,limit);//根据分隔符将一个字符串返回为一个数组。limit表示要返回的数组的最大长度（可自定义）。多个分隔符使用正则表达式：var msg = 'a★b★c☆d☆e#f';var vals = msg.split(/☆|★|#/);alert(vals);
substr(startIndex,len)//从startIndex开始，截取len个字符。1970.1.1
substring(startIndex,stopIndex)//从startIndex开始，截取到stopIndex位置（不包括stopIndex所在的字符）。
toUpperCase()//转换大写、toLowerCase();//转换小写
match()、replace()、search()方法，正则表达式相关（在JS Dom课程里讲）。

15.js的面向对象*
js中没有类的语法,使用函数闭包(closure)模拟出来的,下面讲解的还是用c#中的类,构造函数的概念,js中的String,Date
<script type="text/javascript">

function Person(name, age) {//声明一个函数,来模拟类

this.Name = name; //this什么含义,动态对象,动态增加的属性

this.Age = age;

this.Hello = function () {

alert( this.Name);

}

var p1 = new Person("tom", 30);

//var p1 = Person('tom',30); //不要丢了new,否则返回undefined

p1.Gender = "男"; //也可以在外面增加动态属性,甚至可以动态加方法

p1.Hello();

</script>

function Person(name, age) {

this .Name = name;

var userAge = age;

this .SayHi = function () {

alert( "你好，我叫" + this.Name);

}

this .getUserAge = function () {

return userAge;

}

this .setUserAge = function (sage) {

if (sage >= 0 && sage <= 150) {

userAge = sage;

}

var arr = new Array();

arr[0] = new Person('张三' , 18);

arr[0].setUserAge(50);

arr[0].setUserAge(250);

arr[0].SayHi();

alert(arr[0].getUserAge());

必须声明类名,function

对象自变量

//=====================类对象自变量

var p = {

'userName': '低调' ,

userAge: 19,

sayHi: function () {

alert( this.userName + '=========' + this.userAge);

}

p.sayHi();

16.函数对象中的prototype属性：原型

“prototype”的中文解释：原型, 雏形, 蓝本。
强调：
一、prototype是“函数对象”的属性。（回忆“函数对象”其他成员）
二、通过该属性可以实现类似C#中的“扩展方法的功能”。
为Person、String分别添加扩展方法。
解释为什么可以这样做？（画图）
三、定义在prototpye中的成员是所有对象共享的。所以一般将方法定义在prototype中，而属性则定义在“构造函数”中。
四、通过该属性可以实现js中的继承。
提示：不要为“内置对象”随便添加新成员。防止混乱，可以对自定义对象通过该方式来添加新成员。

function Student(name,age) { //第一步定义“类”

this.Name = name;

this.Age = age;

}

Student.prototype.sayHi = function () {//第二步定义扩展属性或方法

alert( this.Name+'===========' +this.Age);

};

var s =new Student('张三',18); //第三步调用

s.sayHi();

17.JavaScript中的“继承”

js中的继承都是通过prototype实现的，所以一般叫做：“原型继承”。
注意：prototype属性只有函数对象才有（就像call()、apply()函数一样），其他对象只有__proto__属性，没有prototype.
一、创建“Person”、“Student”实现继承。（注意区别“类”继承，这里可以暂时理解为“对象继承”）
二、通过画图说明继承原理。
三、举例：“子对象”继承后重写“父对象”的方法。
四、通过“对象字面量”的方式创建的对象，该对象的__proto__引用的是Object.prototype。（obj.__proto__===Object.prototype），换句话说通过“对象字面量”的方式创建的对象直接继承自Object对象。
五、任何类型都直接或简介继承自Object。

18.正则表达式

1.正则表达式
var regexObj = /\d+/;
2.提取第一个 exec()方法
var result = regexObj.exec(msg);
全局模式匹配字符串 /\d+/g
反复调用exec()就能获得了不同
遍历while(result = regexObj.exec(msg)){}
bool regexObj.test()相当于isMatch方法
当正则表达式中有了小括号,则返回的就是一个数组
正则的替换
msg = '张三13856647815李四13856644565王五11256623835'
分组msg = msg.replace(regex,'$1****$3')
match方法
match直接放回数组var arr = msg.match(/\d+/g);

19.压缩

使用工具,需要安装java工具

java -jar compiler.jar --js hello.js --js_output_file helloc.js

20.移动字节

function moveSelected(selet, seletD, opts) {

                for (var i = opts.length-1 ; i >=0 ; i--) {
                    if (opts[i].selected) {
                        seletD.appendChild(opts[i]);
                    }
                }
            }

21.能力检测-事件对象的使用方式

//动态

document.getElementById('dv').onmousemove = function(e){

var etv = window.event || e;

document.title = etv.clientX+','+etv.clientY;

}

//手动

22.声明全局变量的问题

声明全局变量的时候,不要直接声明,这样大量的变量注册在window上.

正确的方式是: 把全局变量放到命名空间下

var itcast = {};

itcast.chuan = {};

itcast.chuan.heima = {};

itcast.chuan.heima.name = '张三';

23.文档碎片

在内存中创建一个文档碎片,当完成所有的动态增加,然后把文档碎片给相对的对象.

优点:在频繁操作页面的时候,这样可以减少对文档对象的操作.

浏览器测试性能

使用探查器 profiler

闭包

事件比较常用，在项目中比较实用

12.Arry练习

function getMax(arr) {

var max = arr[0];

for (var i = 0; i < arr.length; i++) {

if (arr[i] > max) {

max = arr[i];

}

return max;

}

var arr1 = new Array();

arr1[0] = 20;

arr1[1] = 10;

arr1[2] = 30;

alert(getMax(arr1));

13.练习

//矩阵翻转

function TurnArry(a) {

var temp;

for (var i = 0; i < a.length / 2; i++) {

temp = a[i];

a[i] = a[a.length - i - 1];

a[a.length - i - 1] = temp;

}

var arr = new Array();

arr[0] = "1";

arr[1] = '2';

arr[2] = '3**';

TurnArry(arr);

for (var i = 0; i < arr.length; i++) {

alert(arr[i]);

}

将一个字符串数组输出为' | '分割的形式,比如"梅西|卡卡|李白", arr1.jion('|');将数组分割符连接成一个字符串

//我的join

function myjoin(arr) {

if (arr.length <= 0) {

return '' ;

}

var s = arr[0];

for (var i = 1; i < arr.length; i++) {

s += '|' + arr[i];

}

return s;

}

var arr = new Array();

arr[0] = "1";

arr[1] = '2';

arr[2] = '3**';

alert(myjoin(arr));

posted @ 2013-01-19 01:53 朱京辉阅读(380) 评论(0) 编辑收藏举报

刷新页面返回顶部

朱京辉

JavaScript入门学习笔记

公告