• Javascript学习笔记


    Javascript学习笔记

    是一门程序设计语言

    基于对象和事件驱动语言(点击之类的),用于客户端,不同于jsp是用在服务端的。

    特点:

    1,交互性

    2,安全性(不允许直接访问硬盘)

    3,跨平台(只要能解释JS的浏览器就可以执行,和平台无关)

    Javascript和Java之间的关系

    Java和Javascript就像雷锋和雷峰塔的关系一样

    1,Javascript基于对象,Java面向对象

    2,Javascript解释执行,Java要先编译在执行。

    3,Javascript弱类型,Java强类型。

    Javascript和html结合方式

    1,将javascript代码封装到<script>标签中

    1 <script type="text/javascript">
    2       alert("Hello Javascript");
    3 </script>

    2,将javascript代码封装到js文件中,并通过<script>标签中的src属性进行导入,在这个js文件中的函数,当前页面的其他函数都可以使用

    注意:通过<script>中的src属性指定导入js之后,当前标签内部的js代码将不会执行,但是后续标签内部的代码不受影响。

    1 <script type="text/javascript" src="demo.js"></script>//通常用来导入工具包

    Javascript语法

    1,关键字

    2,标识符

    3,注释

    4,变量:标记一片内存空间

    5,运算符

    6,语句

    7,函数

    8,对象

    变量

    全局变量

    在<script type="text/javascript"></script>标签中定义的变量,在该页面中都是有效的

    <script type="text/javascript">  
      for(var x = 0 ;x<3;x++)
      {
        document.write("x="+x);
      }
      document.write("x="+x);//此时作为x仍然可以输出,是一个在该页面全局有效的全局变量
    
    </script>

     局部变量是在函数内部定义的,只在函数中有效。

    变量的一些命名规则

    var bX = true;//boolean类型
    var iN = 3;//整型
    var sStr = "abc";//字符串类型
    var oMap = {};//实体类型,数组,集合之类的

    运算符

     1 <script type="text/javascript">
     2     //算术运算符
     3     var  x = 4235;//弱类型
     4     alert(x/1000*1000);//输出为4235,并不是4000
     5     alert("12"+1);//121
     6     alert("12"-1);//11
     7     alert(true+1);//2   js中false就是0或者null,非0非null就是true,默认用1表示。
     8     //逻辑运算符 && ||
     9     //位运算符 & | >><< >>>按位运算
    10     var c = 6;
    11     alert(c&3);//2
    12     alert(5^3^3);//5 异或同一个数,等于本身
    13     alert(c>>1);//3  右移1位 除以2的1次方
    14     alert(c<<2);//24 左移2位 乘以2的平方
    15     //三元运算符
    16 </script>

    一些细节:

    a.undefined:未定义,就是一个常量

    var x;//定义一个变量,但是不对其进行赋值的话,如果下面使用到该变量,就会出现undefined,说明x的值就是undefined,如果变量x未定义就直接使用的话,会报未定义错误
        //一个是值未定义,一个是变量未定义

    b.获取变量类型:

    1 <script type="text/javascript">
    2     typeof("abc");//string 为什么是小写
    3     typeof('9');//string
    4     typeof(true);//boolean
    5     typeof(2.5);//number
    6     typeof(78);//number
    7 </script>

    语句

     1 <script type="text/javascript">
        //with语句,为了简化对象对象调用内容的书写
        with(对象){
          在这里调用该对象方法时,不用写 对象.方法,直接写方法
    
        }
        //for in 语句用于对对象进行遍历的语句,一般是对一些自定义的对象遍历
        for( 变量 in 对象){
    
        }
      
     2     //顺序结构
     3     //if语句
     4     var x = 3;
     5     if(4 == x)//这样写可以预防错误
     6     {
     7         alert("no");
     8     }else
     9     {
    10         alert("yes")
    11     }
    12     //switch语句
    13     var x = "abc";
    14     switch(x)
        {
    15         case "kk":
    16         alert("a");
    17         break;
    18         case "abc":
    19         alert("b");
    20         break;
    21         default:
    22         alert("c");
    23         break;//可省略
        }
    24     //循环结构
    25     //while语句
    26     var x = 3;
    27     while(x<3){
    28         alert("x="+x);
    29         //将数据直接写到当前页面中  如果输出的字符串是html标签,此时浏览器就可以进行解析
    30         document.write("x="+x+"<br/>");
    31         x++;
    32     }
    33     //for语句 
    34     for(var x = 0;x<3;x++){
    35         document.write("x="+x);
    36     }
    37         //break:跳出选择结构,跳出循环结构
    38         //continue:结束本次循环,执行下次循环
    39     //带标号的循环。直接break w所表示的循环
    40     w:for(var x = 0;x<3;x++){
    41         for(var y = 0;y<4;y++){
    42             document.write("x="+x);
    43             break w;//跳出w表示的循环 continue w;  跳出w的当前循环,并进行下一次循环
    44         }
    45     }
    46 
    47 </script>

    数组

    1,数组长度是可变的

    2,数组的元素类型是任意的

    建议在使用数组时使用同一类型的数据,操作方便

    <script type="text/javascript">
          //定义方式1    
        var arr = [];
        var arr1 = [1,2,3,5];
        alert(typeof(arr));
        alert("len="+arr.length);
        //定义方式2
        var arr = new Array();//与第一种一样
        var arr1 = new Array(5);//定义数组长度为5
        var arr2 = new Array(4,5,6);//定义一个数组,元素是4,5,6
        //遍历
        for(var x = 0;x<arr.length;x++){
            document.write("arr[x]")
        }
    </script>

    函数

    定义函数的格式

    通过关键字来定义

    function 函数名(参数列表){}

    细节问题

    1,只要使用了函数名称,就是对函数的调用

    2,函数中有一个数组在对传入的参数进行存储,数组就是arguments,遍历该数组就可以拿到所有的传入参数

    3,函数名就是函数对象的引用变量,如果直接把函数对象用字符串输出的话,那输出的结果就是函数的代码,如果把函数名赋值给另一个变量的话,那么就会有两个引用变量指向同一个函数对象。

     1 <script type="text/javascript">
     2     //定义一个函数
     3     function demo()
     4     {
     5         alert("demo run");
     6         return;
     7     }
     8     demo();//函数调用
     9     //定义加法
    10     function add(x,y)
    11     {
    12         return x+y;
    13     }
    14     var sum = add(4,5);
    15     alert("sum="+sum);
    16     //相关细节问题
    17     function show(x,y)
    18     {
    19         alert("len="+arguments.length)
    20         alert("x="+x+"..y="+y);
    21     }
    22     show(4,5,6,7,8);//调用时,传入5个实参,而函数只有两个形参,所以只有前两个有作用,但是所有的参数都会传入到函数中,存放在arguments参数中
    23 
    24     function getSum()//函数名就是函数对象的引用变量,如果直接把函数对象用字符串输出的话,那输出的结果就是函数的代码
    25     {        //如果把函数名赋值给另一个变量的话,那么就会有两个引用变量指向同一个函数对象
    26         return 100;
    27     }
    28     var sum1 = getSum();
    29     alert("sum1="+sum1);
    30 function show1() 31 { 32 alert("show1 run..."); 33 } 34 alert(show1());//这个语句会先运行show1(),所以会先弹窗 show1 run... 然后再显示 show1 这个函数的运行结果 由于show1没有返回值,所以会再输出undefined 36 alert(show1);//show1 是一个引用变量,指向了show1函数对象,这个语句会将 show1的函数代码弹出 37 38 39 </script>

    动态函数

    使用较少

    使用的是js中的一个内置对象Function

    Function中的参数全是字符串,可以通过外部赋值来改变函数的形参列表和具体函数功能

    1 <script type="text/javascript">
    2     var add = new Function("x,y","var sum; sum = x+y; return sum;")
    3     var he = add(4,8);
    4     alert("he="+he);
    5 </script>

    匿名函数

    函数的简写形式

    <script type="text/javascript">
        var add3 = function()
        {
            return a+b;    
        }
        alert(add3(4,5));
    
    </script>

    对象

    java中强调一类对象,js中强调某个对象(将js中的对象理解为java中的类?)

    A-,自定义对象(理解为java中的类?)

    如果想要自定义对象,应该先对对象进行描述,而Javascript是基于对象,不是面向对象的,不具备描述对象的能力,我还想按照面向对象的思想来编写Javascript。

    在Java中用类来描述一类事物,而在Javascript中可以用函数来模拟对象的描述。

    //定义方法一  用js来描述人,使用无参对象
    function Person(){   //相当于构造器
      alert("Person run...");
    }
    //用描述进行对象的建立 new
    var p = new Person();//这个函数在建立的时候就直接运行了,所有上面的函数相当于构造器
    //动态给p对象添加属性,直接使用 p.属性名即可
    p.name = "zhangsan";
    p.age = 23;
    //定义成员函数
    p.show = function(){
      alert("show run...");
      alert("name:"+this.name+"....age:"+this.age);
    }
    p.show();//调用p对象的show()方法


    //定义方法二  使用有参函数来描述,注意this关键字不省略
    function Person1(name,age){
      this.name = name;
      this.age = age;
      this.setName = function(name){
        this.name = name;
      }
      this.getName(){
        return this.name;
      }
       
    }
    var p1 = new Person("Jack",23);
    alert(p1.name);
    //定义方法三 封装一些实体,一个集合,封装一系列键值对,用逗号隔开,键值也可以不加引号 
    var p2 = {
      "name":"Jack","age":23,
      "getName":function(){
        return this.name;
      }
    }

    //对象调用成员两种方法
    alert("name:"+p2.name+"...age:"+p2["age"]);//注意引号不能少,中括号中应该是一个属性值,用字符串代表的属性值
    for(x in p2){
      document.write(x+":"+p2[x]);//这里需要用中括号这种引用方式,x代表这个集合中的键值
    }

     这三种定义方法都是建立了一系列的键值对集合,只是建立形式不同,对于成员变量来说,键就是变量名,值就是变量的值;对于成员函数来说,键就是函数名,值就是函数的具体代码,如果直接将函数名输出,那么输出结果是函数的代码,如果输出的函数名后面跟有小括号,那么输出的是函数的运行结果。  

    另外,第三种方式可以用来实现map集合,模拟Java中的map集合

    var map = {"name1":"xiaoming","name2":"xiaoqiang","name3":"zhangsan"};//键值不加引号也是可以的
    var val1 = map["name1"];//但是引用的时候一定要加引号
    alert("val1:"+val1);

    //键值对中的值也可以是一个数组
    var oMap = {
      names:["xiaoming","lisi","zhangsan"],ages:[23,34,45]
    }
    alert(oMap.names);//全部输出
    alert(oMap.names[2]);//某个数据


    A,Object对象的方法

    不同对象有不同的toString方法

    a,数组的toString()方法是将数组输出,用逗号隔开

    b,函数对象的toSting()方法是将函数代码输出

    //Object对象方法
    //toString方法
    function show(){
      alert("show run...");
    }
    alert(show.toString());//alert(show)默认也是调用show的toString()方法来输出
    
    var arr = [1,2,3,4];
    arr.toString();

    valueof()方法和toString()方法类似

    B,String对象

    var str1 = new String("abc");//在java中,String str = "abc";  js中所有数据类型都可以通过var来定义
    var str2 = "abcd";
    //string的length属性
    document.write(str2.length);//字符串长度
    //给字符串加上一些html标签的方法
    document.write(str2.bold);//在字符串两端加上<B></B>,如果直接输出到html页面中,就会被解析为加粗
    alert(str2.bold);//弹窗显示内容为<B>abcd</B>
    document.write(str2.fontcolor("red"));//设置字体颜色
    document.write(str2.link("http://www.baidu.com"));//将字符串设置为超链接  
    document.write(str2.sub(1,3));//子串,1是头,3是长度
    document.write(str2.substring(1,3))//子串,包含头,不包含尾 

     除了使用string自带的方法,还可以自定义字符串操作方法

    a,自定义一个外部函数,用来去除字符串两端的空格

    //自定义去除字符串两端空格的方法
    function
    mytrim(str) {   //定义两个变量,一个记录开始位置,一个记录结束位置,   //对开始位置的字符串进行判断,如果是空格,就递增,知道不是空格为止,结束位置一样   //必须保证开始<=结束,这样才可以进行截取。   var start,end;   start = 0;   end = str.length-1;   while(start <= end && str.charAt(start)==' '){     start++;   }   while(start <= end && str.charAt(end)==' '){     end--;   }   return str.substring(start,end+1); } var str = " abcde "; alert(trim(str));

    b,将该函数定义为string对象的内部函数

    使用字符串的原型来完成

    原型就是该对象的一个描述,该描述中如果添加了一个新功能,那么该对象也会添加一个功能,类似于java中在类中添加了一个成员方法,该类对象也就有了一个该方法, 用prototype就可以获得该原型,通过prototype就可以对对象的功能进行扩展。

    给string的原型添加一个属性,那么所有的字符串也就具备了这一属性,这个属性可以是成员变量,可以是成员函数

    1,加成员变量

    String.prototype.abc = 123;//给String的原型添加一个名为abc的成员变量,值为123,那么所有的字符串都会具有一个abc变量,可以直接调用输出

    2,加成员函数

    String.prototype.trim = mytrim;//给String的原型添加一个名为trim的成员函数,两个函数名不一定非要相同,mytrim就是一个已经定义好的函数

    或者使用匿名函数的方式

    String.prototype.trim = function(){
    
      //这样的话就没有形参列表了,这里用this来代替str
      var start,end
      start = 0;
      end = this.length-1;
      while(start <= end && this.charAt(start)==' '){
        start++;
      }
      while(start <= end && this.charAt(end)==' '){
        end--;
      }
      return this.substring(start,end+1);
    }

    C,Array对象

    var arr = ["abc","cba","nba","aaa","bbb"];
    var arr1 = ["qqq","xiaomi",20];
    var new Arr = arr.concat("mm",arr2);//在arr后面加上一个mm元素,arr2作为后续元素加上来
    arr.join();//以指定分隔符来分隔数组,默认为逗号分隔
    arr.pop();//移除最后一个元素,并返回剩下的数组
    arr.push();//添加一个元素并返回新数组长度,如果添加的元素为一个数组,就会形成一个二维数组
    arr.shift();//删除并返回第一个元素
    arr.unshift();//指定数组插入到开始位置并返回该数组
    arr.sort();//字符串怎么排序?字典顺序排序
    arr.splice(1,3,12,43,67,"xixi","haha");//从1开始删,删三个,并把后面所有的都加进去

     D,Date对象

         var date = new Date();//也可以以毫秒值为参数
           document.write(date.toLocaleString()+"<br>");//日期对象转成字符串 年月日时分秒
           document.write(date.getFullYear()+"<br>");//年份
           document.write(date.getMonth()+"<br>");//月份
           document.write(date.getTime()+"<br>");//毫秒值 1495174393709

    //字符串转成日期对象 var time; var str_date = "9/28/2017";//格式固定 time = Date.parse(str_date);//time为毫秒值 date1 = new Date(time); document.write(date1.toLocaleString()+"<br>");

    E,Math对象

    该对象中的方法都是静态的,直接调用即可

    var num1 = Math.ceil(12.34);//向上取整
    var num2 = Math.floor(12.34);//向下取整
    var num3 = Math.round(12.34);//四舍五入
    var num4 = Math.random();//随机数

    F,Number对象

    var num = new Number(6);
    document.write(num.toString(2));//6按照2进制输出

    全局方法

    这些方法的调用不需要对象,直接调用即可,全局方法都放在global对象中。

    parseInt();//字符串转换成整形
    var val = parseInt("123");//转成整形数
    var val = parseInt("123abc");//转成 123
    var val = parseInt("abc123");//报错 NaN错误
    //其他进制转成十进制
    var val = parseInt("110",2);//按照二进制转成10进制   6
    var val = parseInt("0x3C",16);//按照十六进制转成10进制 
    //十进制转成其他进制需要用到Number对象的toString()方法

    待续。。。。。

  • 相关阅读:
    HighTec-Eclipse for Tricore 的安装方法
    http升级https遇到的问题
    symfony中模板生成路径两种方式
    http请求在https中使用
    git tag标签
    Git查看两个版本之间修改了哪些文件
    mysql将语句写入表中
    使用fiddler抓包模拟器及配置fiddler过滤
    Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure resource 'xxx'.
    nginx 禁止某IP访问
  • 原文地址:https://www.cnblogs.com/mxck/p/6814699.html
Copyright © 2020-2023  润新知