JavaScript学习笔记

100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
*书籍：
JavaScript高级编程设计
JavaScript语法精辟
FunctionJavaScript
周爱民-JavaScript
JavaScript模式
 
*JavaSript前身LiveScript由Netscape公司开发。
JavaScript本身与Java无直接关系。
*当到了高级的时候看高手的开源代码学习最快。
编程在精，贪多嚼不烂。
*只要是Web开发都是请求和响应。
JavaScript代码可以在浏览器进行简单计算，避免频繁访问服务器（TCP三次握手协议）的耗费流量和时间。
HTML只是描述网页长相的标记语言，没有计算和判断能力，如果所有计算、判断（比如文本框是否为空，判断两次密码是否一致）都放在服务器端执行的话，网页会非常慢，服务器压力会很大，因此要求能在浏览器执行一些简单的运算和判断。JavaScript就是一种在浏览器端执行的脚本语言。
*JavaScript组成：核心语法（ECMAScript）、Dom（文档对象模型）、Bom（浏览器对象模型）。Bom没有标准，易不兼容，慎重使用。
*JavaScript是一种脚本语言，由所使用的浏览器来执行。
*脚本，一条条的文字命令。执行时由系统的一个解释器将其一条条的翻译成机械可识别的命令，然后执行。常见的脚本：批处理脚本、T-SQL脚本、VBSCript等。（.net生成的EXE文件用记事本打开看不懂）
*JavaScript是解析型语言，无需编译，直接执行。不像C#或java需要先将源代码编译后才能运行。
 
描述：
*js是基于对象和事件的脚本语言，主要应用在客户端，由浏览来执行js代码。
*可以与用户执行信息交互。
*安全性，不允许访问本地磁盘。
*跨平台，只要是支持js的浏览器即可。
*js也是一门编程语言，所以也具有编程语言的基本特征，如：数据类型、变量、语句、函数、数组、对象等，但是表现实现和C#不同。
*js也是C系语言，所以语法与C、java、C#非常类似。
开发环境：
*记事本，没有语法着色、没有良好的缩进、行号，不方便。但用VS准确和快一些。
*高级记事本：editplus、ultraedit、notepad++
*VS中直接写在html文件里。 
 
*js代码必须写在js标签里，如
<script type="text/javascipt">
  alert('hello')/*警告信息：hello*/
     
  alert（new Date().toLocateTimeString()）;//显示当前时间
</script>
*整个网页代码从上到下依次执行，上面没执行下面不会执行。
*在<script>块中有一处语法出错，本块整体不执行，直接跳过，不会影响其他部分。
*提取js代码到单独的js文件：右键添加建项-JScript文件-
*如果要使用js文件，直接将单独js文件拖拽到目标文件。
 
语法介绍：
*严格区分大小写。（n和N是两个不同的变量）
*js中定义字符串可以使用双引号也可以使用单引号。
推荐js中使用单引号，html中使用双引号，避免发生冲突。
*在js中声明变量不需要写数据类型，统一用var来声明。
*JavaScript是“弱类型”语言，支持动态类型。var n=10;n="a";
*每条语句后面用;结尾。（不是必须浏览器有自动插入分号的机制）
原因：1可以放心的做js压缩多余空白。2提高代码的可读性、性能（省去编译器加分号步骤）、避免出错。
*js注释
 单行注释：//这里是注释代码【建议对于代码推荐都用单行注释】
 块级注释：/*这里是注释代码*/【建议对于说明性文字使用块级注释】
*变量命名规则：以字母、下划线或$（英文模式下）开头，中间可以包含数字、字母、下划线或$.
*js是灵活的动态语言不想C#静态语言那样严谨。智能提示只能辅助，并不全面，不要因为"点不出来"而烦恼。
数据类型
*js共六种数据类型：
Boolean(布尔），取值：只有两种true或false
Number（数字），取值：所有数字，包含整数、小数等，范围相当于double
String(字符串)，取值：所有字符串。
Undefined（未定义），取值：只有一个值underfined
Null（空对象），取值：只有一个值null
Object（对象类型），取值：任何对象、Array、function等等。
以上除了Object是引用类型以外，其他都是基本类型。
typeof运算符，该运算符返回一个表达式的数据类型的字符串表示形式。
<script type="text/javascript">
    var n= new Date();
    alert(typeof (n));
     
    var n='hi ';
    alert(typeof (n));
 
</script>
循环语句
if-else、while、do-while、for、switch、continue、break语句几乎和C#一致。但是for循环和switch语句也有点不同。
 
var sum=0;//变量声明后，使用前一定要赋，不赋值会认为是Undefined。
//var sum;
//sum=0;
for(var i=1;i<=100;i++){
    sum=sum+i;
}
alert(sum);
奇数和、偶数和
var sum=0;
for(var i=1;i<=100;i++){
    if(i%2=0)
    { sum1=sum+i}
    else
    { sum2=sum+i}
 
}
alert("奇数和={0},偶数和={1}",sum1，sum2)
 
js中的==与===
*相等运算符：==、（！=）
   对于==两边的表达式，如果类型相同，则直接比较。
   对于==两边的表达式，如果类型不同，则先试图将==两边的运算符转换为String、Boolean、Number这些相同的数据类型，然后在判断是否相等。
   ==认为null与undefined、null与null、undefined与undefined是相等的。
*完全相等运算符（恒等运算符）：===、（！==）
   ====运算符判断前不进行类型转换，并且===两边必须类型相同、值也相同的情况下才返回true。
<script type="text/javascript">
    var n1='123';
    var n2=123;
    alert(n1==n2);//true
    alert(n1==n2);//false
 
    var n1=null;
    var n2;
    alert(n1==n2);//true
    alert(n1===n2);//false
 
    var n1=true;
    var n2='false';
    alert(n1==n2);//false
    alert(n1===n2);//false
 
//switch内部使用的也是===恒等于来判断是否相等。
    var s=123;
    switch(s){
    case'123':
        alert('等于字符串123');
    case 123:
        alert('等于数字123');
    default:
        alert('没有找到相等的');
        break;
     
}
 
 
</script> 
 
W3C资料：Ecma-262
1如果==两边都是字符串类型，那么必须这两个字符串完全相同才返回ture
2如果==两边的两个变量指向了同一个对象，那么也返回true
3如果==两边一个是字符串一个是数字类型，那么js引擎会尝试把其中的字符串类型转换为数字类型后在进行比较。
4如果==两边一个字符串类型，一个是数字类型，会尝试吧其中布尔类型转换为数字类型后在比较。
5如果==两边其中一是string或number类型，而另外一个是object类型，那么判断相等前先将object转化为string或number，然后在于另一个值比较。
 
null和undefined
*当声明变量未赋值的时候，那么变量的值 就是undefined
    var x；
    alert(x);
*变量压根没有声明。
    alert(w);//报错
在使用变量前，先校验该变量是否可用。
    if(typeof(w)=='undefined'){
    alert('变量不可用');
    }else{
    alert(w);
}
*方法没有返回值的时候，接受的返回值就是undefined类型
    var n=fun1();
    alert(n);
    functon fun1(){
}
*---------null----------
*null值表示指定了一个空对象，需要我们为n赋值一个null值。
一般爱对象使用完毕，需要显示告诉浏览器可以被垃圾回收站回收的情况下，需要显示吧变量赋值为null，这样这个变量所指向的对象就可以被垃圾回收站回收了。var n=null;
*无论变量的值为null还是nudefined都表示变量不可用。所以在使用变量前可以先判断变量是否可用。
    var x;
    //var x;
    //var x='';
    //var x=null;
    if(typeof(x)!='undefined'&&x!=null){
    alert('x变量可用！');
    }else{
        alert('x变量不可用！');
    }
     
js中变量作用域
<head>
    <title></title>
    <script type="text/javascript">
        //在页面声明的变量，在整个页面中任何一个地方都可以访问。
        //        var n = 10;
        //        alert(n);//10
 
 
        //        var x = 100;
        //        function f1() {
        //            x++;
        //            alert(x);//101
        //        }
        //        f1();
        //        alert(x);//101
 
 
 
        //        var y = 100;
        //        function f1(){
        //            var x = 1;
        //            x++;
        //            alert(x); //2
        //        }
        //        f1();
        //        alert(x); //报错，未定义。（实际：360浏览器并没有报错，只是没有任何显示）
 
 
 
        //        function f1() {
        //  在js中不存在块级作用域范围，所以在方法累不任何一个地方声明变量，都是在整个方法内部有效。
        //            var x = 10;
        //            if (x > 5) {
        //                var y = 100;
        //                alert(y);//100
        //            }
        //            alert(y);//100
        //        }
        //        f1();
        //        alert(y); //无显示
 
 
 
        //        function f1() {
        //            var sum=0;
        //            for (var i = 0; i < 10; i++) {
        //                sum=sum+i;
        //            }
        //            alert(i);//10
        //            for (var i = 0; i < 5; i++) {
        //            //当重复声明变量（i）时，js会自动忽略第一次以后的所有声明语句，但是赋值会正常执行。
        //                alert(i);
        //            }
        //            alert(i);//5//i++后i变成了5
        //        }
        //        f1();
 
        function f1() {
            //声明变量时不写var关键字，表示该变量时一个整个页面都能访问的全局变量。
            //建议：声明变量时，一定不要忘记加var，避免使用全局变量。
 
            x = 100;
            x++;
            alert(x);//101
        }
        f1();
        alert(x);//101
 
 
         
 
    </script>
</head>
<body>
   <!-- <script type="text/javascript">
        //在页面声明的变量，在整个页面中任何一个地方都可以访问。
         n++;
        alert(n); //11
    </script>-->
</body>
</html>
 
转义符和C#中一样
注意：js不能用@，@只在C#中有效。想在页面输出：c:\windows\microsoft\vs.txt,需要这样写：alert('c:\\windows\\microsoft\\vs.txt').
 
 
innerHTML在JS是双向功能：获取对象的内容  或  向对象插入内容；
如：<div id="aa">这是内容</div>   ，我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如  document.getElementById('abc').innerHTML='这是被插入的内容';   这样就能向id为abc的对象插入（还是替换？）内容
 
 
 
<head>
    <title></title>
    <script type="text/javascript">
////        数据类型转换
 
        //字符串转换为数字类型
//        var n = '123';
//        alert(n + 1); //1231
 
        // var n='2pew3';//2
        //var n='e2343';//NaN
//        var n = '123dfjafda';
//        alert(typeof (n));//string  显示该数据的数据类型
//        n = parseInt(n);//将字符串转换为整数的函数，当他遇到非字符时停止解析。
//        alert(typeof (n));//number
//        alert(n + 2);//125
 
//        var n = '15';
//        //把15转为8进制
//        n = parseInt(n, 8);
//        alert(n); //13
 
        //--------------
//        alert(parseInt('828.3'));//828
//        alert(parseFloat('232.3.4.4')); //232.3
        //        alert(parseInt('0782')); //782
//        alert(parseInt(0782)); //782
 
//        //---------把任意类型转换为数字类型
//        var n = '123.3';
//        alert(Number(n));
 
//        var n = 123;
//        n.toString(); //把任何类型转换为string类型
//        alert(n);
        //        alert(typeof (n)); //number？？？？？
 
 
//        var n = null;
//        alert(n.toString()); //null对象不能调用任何方法
//        alert(String(n)); //字符型的"null"
//        var s4;
//        alert(s4); //undefined
 
//isNaN()函数
//        var n = parseInt('a432v');
//        //判断一个值是否是一个NaN不能用==或!=，必须使用isNaN()函数。
//        if (isNaN(n)) {
//            alert('转换失败！');
 
//        } else {
//        alert('转换成功结果是：'+n);
//        }
 
////js中的逻辑运算符
 
//eval() 函数
//        var n = 'var x=1;x++;alert(x);';
//       eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。; //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
//        x++;
//        alert(x);
 
//        var r = "a" || "";
//        alert(r); //a
//        r = null || 15;
//        alert(r);//15
//        r = null && 15;
//        alert(r);//null
//        r = "123" || 12;
//        alert(r);//123
//        r = "1234" && 12;
//        alert(r);//12(同时为真，以最后一个为准)
 
        ////在浏览器中调试错误
        //        aletr('hello'); //浏览器-工具-开发人员工具-console（控制台）
 
//        for (var i = 0; i < 10; i++) {
//            alert(i);
 
//        }
 
//        var arr = [1,2,3,'hello,true'];
 
    var sum=0;
        for (var i = 0; i < 5; i++) {
         sum=sum+i;
        }
        alert(sum);
 
//调试问题：
//1、没有刷新页面；
//2、浏览器安装了各种插件影响了调试结果。
//卸载插件-IE浏览器Internet选项-删除信息-高级-还原高级设置-重置-应用-重启IE。
//3、浏览器禁用了javascript.
//4、IE和vs调试功能同时只能用一个。
//5、火狐浏览器-f12-控制台，有错不报的原因是没有安装插件,需要添加Firebug组件。
 
 
//函数的定义：
//    1.在C#中创建函数
//    public string GetMessage（int id）
//    {
 
//    }
 
//    2、在js中创建函数
//    //定义一个函数
//    function getMessage(id){
//        return id+'Hello';
//    }
//    //调用函数
//    var msg = getMessage('0001');
//    //输出返回结果
//    alert(msg);
 
        //定义一个函数
         
         
//        function sayHi(){
//        alert('Hi');
//        }
//        //调用一个函数
//        sayHi();
 
 
//        //定义一个函数
//        function getSum(x, y) {
//            return x + y;
//        }
//        var result = getSum(50, 20);
//        alert(result);
//    
//    注意：1、js函数永远有返回值，如果没有则返回undefined。
//          把函数当做’构造函数‘时，return语句将不返回。
//          2、自定义函数名不要与js内置、dom内置函数重名。
 
//        function f1() {
//            alert('first f1');
//        }
//        function f1(name) {
//            alert(name);
//        }
//        f1();
        //因为js中没有函数重载的概念，所以遇到同名的函数，会用最后一次定义覆盖前面的函数定义。
        //所以下面调用f1()函数，其实调用的是最后一次函数定义，但最后一次函数定义需要传递一个参数
        //给name变量，但是却没有传递，所以name变量没有赋值，所以就是undefined
 
//函数和变量的预解析功能
//        1、如果不确定函数中将来要传递的参数的个数，那么可以使用了类似于C#中可变
//        参数的解决方法。在js中叫做arguement对象。
//        2、其实所有的方法都无需定义形参，定义形参的目的仅仅是为了使用方便。
//        无论是否定义了“形参”，在实际调用该函数的时候，所有的参数都包含了arguement对象中。
//        function add() {
//            var sum = 0;
//            for (var i = 0; i < arguments.length; i++) {
//                sum += arguments[i];
//            }
//            return sum;
//            
//        }
//        //add(10,20);
//        //add(1);
//        //add(x1,x2,x3,...xn);
//        var result = add(10, 23, 0, 12);
//        alert(result);
//
 
//        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); //结果是多少？why？4...4
        //因为函数有预解析功能，所以函数从上到下依次执行之前，最后一个定义add
        //函数就已经覆盖了前面的定义的add函数。但是预解析无法解析函数体里面的东西。
 
 
//        var user_name = 'steve';
//        function f1() {
//            alert(user_name); //undefined
 
////          变量与函数具有同样的预解析功能，在函数的代码正式执行之前，先会
////        解析函数中声明的多有的变量。也就是说正执行第一句代码： alert(user_name); 的时候，
////        局部变量user_name已经声明了，但是没有赋值（为yzk）。因为预解析只解析声明，不包含赋值语句（所以是underfined）。
////        
//            var user_name = 'yzk';
 
//            alert(user_name); //yzk
//             //如果遇到局部变量与全局变量冲突，优先选用局部变量。
//        }
//        f1();
//        alert(user_name); //steve
//        //1、函数内部声明的变量作用域只在这个函数内，超过作用域则失效。
//        //2、函数内部声明的变量在整个函数中都有效，相当于在函数内部（的函数和声明）也有预解析功能，只不过不能超出作用域。。
 
//        正是因为函数中具有变量预解析功能，所以一般函数中声明变量不会像下面这样:
//        function myfunction(){
//            var n=10;
//            alert(n);
//            var m=n++;
//            alert(m);
//            var sum=n+m;
//            alert(sum);
//        }
//        而是在函数一看是就把所有要使用的变量都统一声明好：
//        function myfuncton(){
//            var n=10,m,sum;
//               alert(n);//10
//                  m=n++;
//               alert(m);//10 ???
//                sum = n + m;
//                alert(n);//11 ???
//                alert(sum);//21
//        }
//        myfuncton();
 
//        //alert(n);//错误，超出局部变量作用域。
 
 
        //匿名函数
 
    </script>
</head>
<body>
 
</body>
</html>
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
*document.getElementById('btn').click()搜索引擎的智能提示，点击后相当于点击了"搜索"按钮
*click();focus();blur();相当于通过程序来触发元素的单击事件，获得焦点以及失去焦点的事件。
*form对象是表单中的Dom对象。
*submit()提交表单，但是不会触发onsubmit事件。
*实现autopost,也就是焦点离开控件以后页面立即提交，而不需要提交submit按钮，当光标离开的时候
触发onblur事件，在onblur中调用form的submit方法。
*在待机submit后form的onsubmit事件比触发，在onsubmit中可以进行数据校验。如果数据有问题，返回false即可取消提交。
    <title></title>
    <style type="text/css">
        #dv1
        {
            width:100px;
            height:100px;
            background-color:Blue;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //为div层注册一个单击事件
            document.getElementById('dv1').onclick = function () {
                //单击层的时候提交表单
 
                //1.手动获取提交表单的按钮，并且调用该按钮的click()方法，触发该按钮的单击事件，从而实现表单的提交
              // document.getElementById('btnSearch').click();
                //2.直接调用表单对象的submit()方法来实现提交
               document.getElementById('form1').submit();
                //如果是通过调用submit按钮来提交的表单，会触发onsubmit事件，但是如果是通过调用的表单的submit()函数提交的表单不会触发事件的。
 
            };
            //为表单对象注册一个提交事件
            document.getElementById('form1').onsubmit = function() {
                //在表单的提交事件中验证用户是否在文本框中输入了内容，如果输入了内容则提交表单，否则停止提交表单
                var searchTxt =document.getElementsByName('wd')[0].value;
                if (searchTxt.length == 0) {
                    alert('请输入内容！');
                    return false;
                }
            };
        };
    </script>
</head>
<body>
    <form action="http://www.baidu.com/s" method="get" id="form1">
    <input type="text" name="wd" value="" />
    <input type="submit" value="百度很强大哦" id="btnSearch"/>
    <div id="dv1">
     
    </div>
    </form>
</body>
</html>
 
 
<!DOCTYPE html>
<html>
<body>
 
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
 
<p id="demo">请点击按钮向列表中添加项目。</p>
 
<button onclick="myFunction()">亲自试一试</button>
 
<script>
function myFunction()
{
var node=document.createElement("LI");
var textnode=document.createTextNode("hi");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>
 
<p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>
 
</body>
</html>
 
 
 
 
 
 
 
 
 
 
    