• JavaScript学习笔记


    *书籍:
    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:windowsmicrosoftvs.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
            {
                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>
    
    
    
    
    
    
    
    
    
    
    	
    
  • 相关阅读:
    《Mysql
    《算法
    《Redis
    《Mysql
    《Mysql
    SSH免密码登录
    TCP/IP四层模型和OSI七层模型的概念
    简单描述RAID级别:
    awk内置变量 awk有许多内置变量用来设置环境信息,这些变量可以被改变,下面给出了最常用的一些变量。
    awk 的逻辑运算字符
  • 原文地址:https://www.cnblogs.com/hao-1234-1234/p/6188885.html
Copyright © 2020-2023  润新知