• Web前端之Javascript详解20180330


    一、javascript概述

    javascript是基于对象和事件的脚本语言。

    特点:

    1.安全性(不允许直接访问本地硬盘(因为是被远程的浏览器解释)),它可以做的就是信息的动态交互

    2.跨平台性(只要可以解释JS的浏览器都可以执行,和平台(系统)无关),java被虚拟机解析所以也不需要依赖平台。

    二、javascript与Java不同

    1.JS是Netscape公司的产品,Java早期是SUN公司的产品

    2.JS是基于对象(也就说对象都已经封装好了)和事件驱动的,Java是面向对象

    3.JS只需解释就可以执行(js在客户端,只要可以解释JS的浏览器都可以执行),Java需要先编译成字节码文件,再执行

    4.JS是弱类型(非严谨的,甚至不写分号都可以,规范来说还是要写),Java是强类型(严谨的)。

    比如JAVA定义了8种数据类型(5种基本,3种引用),而js根本就没有数据类型

    对于注释,js也是使用/**/和//

    三、javascript与html的结合方式

    想要将其他代码融入到html中,都是以标签的形式。script标签可以存放在页面的任意位置,无论是在head里,body里,还是在head body之间,或者在head body之外都是可以的。

    1.js代码存放在标签对<script type="text/javascript>..</script>中

    2.使用script标签的src属性引入一个js文件。(方便后期维护,扩展,独立出来提高了复用与封装性,方便多个页面引用)

    例:<script src="test.js" type="text/javascript"></script>

    注:规范中script标签中必须加入type属性。

    四、语法

    alert("123");//这个是win系统提供的,可以直接放在js中,效果是弹出一个对话框。

    一门程序设计语言的基本要素有:变量,语句,函数,数据结构(数组等),类似高级语言还有,操作数据对象(io),操作网络对象(socket)等等

    1.变量

    定义变量使用关键字var,弱类型即是不用指定具体的数据类型

    例:

    var x=3;

    x="abc";//或者x='abc'也可以,表示js里面都是字符串,没有字符的概念,所以单双引号都可以

    alert(x);//结果显示abc

    var y;

    alert(y);//结果显示undefined

    注意,js中特殊的常量值:undefined,当变量没有初始化就被使用,该变量值就是undefined,类似Java中null。

    注意,由于js里面没有类型的概念,所以在运算的时候不涉及到类型转换,比如:3250/1000*1000,js的结果就是3250,而不是3000。

    2.语句(与Java语句格式相同)

    1).判断结果(if语句)

    注意:var x=3;

             if(x==4)//可以进行比较运算

             if(x=4)//可以进行赋值运算,而且可以同样进行判断,不报错

             因为在js中0就是false,非0就是true(通常用1表示)。也就是空就是假,非空就是真

             所以if(x==4)结果是true;

    2).选择结果(switch语句)

    注意,js的case后面,可以是字符串

    3).循环结构(while语句,do..while语句,for语句)。

    例:

    for(var x=0;x<3;x++)

    {

             alert("x="+x);

    }

    var sum="";

    for(var x=1;x<=4;x++)

    {

             if(x==4)

                       sum=sum+"x="+x;//连接字符串

             else

                       sum=sum+"x="+x+",";

    }

    alert(sum);

    //写到页面中去的方法:

    document.write("<font color='red'>"+sum+"</font>");//html中的部分要用引号包括,js中的不用

    注意,不同的是,没有了具体数据类型的限制,使用时要注意。

    注意,js出错时,会在网页的状态栏里面出现一个黄色的感叹号,点击后会有提示在哪里出错了。

    注意,js在表达式中,逻辑与使用&&

    用表格形式显示一个99乘法表:

    table,table td{

             border: #0000ff double 1px;

             600px;

    }

                                document.write("<table>");

                                for(var x=1; x<=9; x++){

                                         document.write("<tr>");

                                         for(var y=1; y<=x; y++){

                                                   document.write("<td>"+y+"*"+x+"="+y*x+"</td>");

                                         }

                                         document.write("</tr>");

                                }

                                document.write("</table>");

    3.数组

    方便操作多元素的容器,可以对其中的元素进行编号。

    特点:可以存任意元素,长度是可变的

    格式:

    var arr =new Array();//new完就可以随时往这个数组里面填充元素。

    arr[0] = "hello";

    arr[1] = 123;

    var arr =[4,1,6,8];

    arr[6]=100;//这样会改变数组的长度,长度变为7,中间没有定义的部分为undefined

    var arr = {'hello',123,true,"abc"};

    可以存放任意类型的数据,但是规范上最好还是同类型的,方便操作。

    通过遍历即可对数组进行基本操作

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

    {

             alert(arr[x]);

    }

    4.函数

    由于没有数据类型,所以不涉及到返回类型,以及参数类型。

    1).一般函数

    格式(一般函数定义方式):

             function 函数名(形式参数...)

    {

             执行语句;

             (return 返回值;)

    }

    代码:

                                function add(x,y){

                                        

                                         return x+y;

                                }

                               

                                var sum = add(4,5);

    注意,js也有全局变量和局部变量,这方面的使用也和java的一样。

    注意,js没有重载形式,定义两个参数,传一个也不会有错,如下:

    fuction show(x,y)

    {

             alert(x+','+y);

    }

    show(3);//结果显示3,undefined

    同时,正因为如此,当定义的传参少了,但是传入的更多时,也不会有错,还会接收到,接收到一个名为arguments的数组中,(这个数组每个函数都有,不需要手动去定义)

    例:

    fuction show()

    {

             for(var x=0;x<arguments.length;x++)

                       alert(arguments[x]);

    }

    show(3,4,5,7);//结果显示3,4,5,7

    虽然可以这么做,但是从规范上来说,需要哪些都定义在参数上,这样阅读性才好。

    注意,函数本身在js中就是一个对象,函数名就是这个对象的名字,函数名就指向了这个函数对象,所以:

    var x=show;//这个不会调用show方法,而是表示x指向show所指向的一个函数对象

    alert(x);//这样就会把整个函数内容打印出来

    2).动态函数

    js中内置了一个函数对象Function

    所以定义函数,可以类似定义对象的形式:

    var 函数名 = new Function("形参","形参",...,"函数内部代码");

    例:

    var show = new Function("x","y","var sum=x+y;return sum;");

    var sum = show(5,2);

    特点:

    定义的时候,参数和函数体都可以作为变量向内传递。

    即,动态函数,参数以及函数体都可以通过参数进行传递,可以动态指定。

    动态函数,相对少见一些。

    3).匿名函数

    定义与使用格式:

    var 变量名 = function()

    {

    }

    变量名();

    js还是基于事件驱动的,所以匿名函数往往可以作为一个事件的处理方式而存在。所以说在定义事件属性的行为时较为常用。

    例:

    窗口的数据一加载完毕会有一个onload事件,它可以直接等于一个匿名函数,这样就可以通过匿名函数来处理这个事件。

    即,

    window.onload = function()

    {//匿名函数就类似匿名对象一样,所以可以赋值

             alert("onload over");

    }

    这是一种简化的写法,也可以这么写:

    fuction method()

    {

             alert("onload over");

    }

    window.onload = method;//不是返回值所有不能有括号,用对象赋值

    5.对象

    js中没有class这类关键字,js是通过函数的形式创建对象出来。也就是说JS除了已经提供的内置对象(如document对象)外,也可以自定义对象

    例:

    function Person()

    {//类似构造函数

             alert("Person inti");

    }

    var p = new Person();//定义一个Person对象,此时构造函数Person()会被调用

    p.name ="133";//定义(增加)Person对象的属性

    p.age =22;//定义成员变量

    p.eat= function()

    {//定义(增加)Person对象的行为,定义成员函数

             alert("eat");

    }

    p.eat();//对象中函数被调用。

    注意,构造函数里也可以增加并初始化属性:

    function Person(name,age)

    {//类似构造函数

             this.name=name;

             this.age=age;

    }

    var p= new Person("lisi",90);//实例化对象时传入初始化值

    alert(p.name);

    alert(p["name"]);//这样也可以,效果和前面一样,这种方式的好处在于可以往p里面传递参数

    注意,对象即上面的p可以单独出来封装到一个js文件,其他页面可以通过引用这个文件,就可以访问该对象即p对象。这样就可以实现一个js文件被多个页面使用,消灭了重复性代码。

    注意,如果在引用js文件的页面中,new了一个与js文件中对象所属类一样的对象,那么这个对象只可以访问到类中的属性,而无法访问到js中的对象,即便两个对象名字一样(就近原则)。

    JS用于操作对象的语句:

    1).with语句

    格式:

             with(对象)

             {//这个区域内可以直接使用该对象的任意属性和方法

             }

    应用:当调用一个对象中多个成员时,为了简化调用,编码"对象."这种格式的重复书写。

    或者说,用来确认某一对象所作用的范围。

    例:

    function Person(name,age)

    {//类似构造函数

             this.name=name;

             this.age=age;

    }

    var p= new Person("lisi",90);//实例化对象时传入初始化值

    with(p)

    {

             alert(name,age);

    }

    2).for(...in...)语句

    用于遍历对象或者数组

    例:

    遍历对象:

    function Person(name,age)

    {//类似构造函数

             this.name=name;

             this.age=age;

    }

    var p= new Person("lisi",90);//实例化对象时传入初始化值

    for(s in p)

    {

             alert(s+":"+p[s]);//s是属性名,p[s]就是对应的属性值,由于p里面没有s属性,所以不能使用stu.s

    }

    遍历数组:

    var arr={5,1,2,3};

    for(x in arr)

    {

             alert(arr[x]);//x是数组的下标。

    }

    6.js内置对象(已有对象)

    查看内置对象,可以查看js手册。

    比如object对象,new的时候传入值也可以定义对象,只不过这种方式用的很少

    1).String对象

    String对象一般不用new来创建,直接var str=""这种形式创建即可,也就是说String对象可用字符串文字显示创建。

    至于该对象的属性和方法可以查看手册。

    其中bold方法会给字符串加上b标签,

    fontcolor则给字符串在html中加上颜色,

    link方法会把当前字符串变成一个超链接

    substring方法取开始位和结束位,不包含结束位

    substr方法,从开始位开始指定长度,长度比字符串长度长,则长度使用字符串长度

    match方法,正则表达式中会用到

    代码:

    var str ="abcde";

    var y=str.bold();

    document.write(y);

    var z=str.fontcolor("red");

    document.write(z);

    alert(z);

    var a=str.link("http://www.baidu.com");

    document.write(a);

    var i=str.substring(2,4);//结果cd,不包含第四个

    var j=str.substr(2,4);//结果cde,只有三个那么长,所以长度变为3,如果够的话那就cdef

    注意获取字符串长度时,没有方法,只有属性

    2).Math对象

    是一个固有对象,提供基本数学函数和常数。

    也就是说可以直接使用,可以使用.的形式来使用属性和方法,

    格式:

             Math.[{属性|方法}]

    比如,

    其中的random方法,用于获取随机数.

    代码:

    var d =Math.random()*10+1;

    3).Global对象

    一些常用的方法会封装在这个对象中,这个对象是一个固有对象,也就是可以直接使用,但是这种直接使用是不需要写Global的,直接写其内部的属性和方法就行了。

    比如,

    其中的parseInt方法,当其参数里的字符串没有字符串时,会返回NaN,至于判断这个返回值可以用其中的isNaN方法,

    例:

    parseInt("abc") //返回NaN

    parseInt("12abc") //返回12

    如上个的随机数中就可以用这个方法取整

    注意,parseInt还可以传入基数参数,表示按照哪种进制进行解析,

    例:

    var num=parseInt("110",2);//结果num等于6

    类似于parseInt还有把数字转换为字符串的方法toString,不过该方法是固定方法(全局方法)不在global对象中,可以直接使用(每一个变量都有的方法),

    例:

    var x=6;

    var num =x.toString(2);//结果num=“110”,2是基数,注意不能直接写成6.toString

    //

    4).Date对象

    对象内的方法可以单独获取年月日,也可以直接使用对象,new返回的对象也是一串字符串。

    例:

    var d = new Date();

    alert(d);//直接显示日期信息

    with(d)

    {

             var month=(getMouth()+1);

             month = (mouth>9)?month;"0"+mount;//月份小于9的拼凑成两位显示

             alert(getYear()+"年"+mouth+"月"+getDate()+"日 星期" +getDay());

    }

    5).所有内置对象都有的prototype属性

    返回对象类型原型的引用,也就是说返回对象的引用,这个属性的用途在于,可以通过返回对象引用的形式,给该对象添加新的属性和方法。

    代码:

    function getMax()

    {

             var max = this[0];

             for(var i=0;x<this.length;x++)

             {

                       if(this[x]>max)

                                max=this[x];

             }

             return max;

    }

    Array.prototype.getZuiDa =getMax;//getMax为定义好的方法,这样就给Array对象增加了新的方法,方法名为getZuiDa

    var arr={1,23,8,9};

    var x=arr.getZuiDa();//由于前面增加了新的方法,所以定义的数组对象都可以使用新增加的方法

    alert(x);

    arr.sort();//排序

    for(y in arr)

    {

             alert(arr[y]);

    }

  • 相关阅读:
    CSRF-防御与攻击
    windows 命令
    Integer.parseInt(String str, int i)
    springCloud springmvc 七牛云存储整合百度富文本编辑器
    jsp 文件
    标签的使用
    富文本编辑器
    项目总结 js
    namenode 和 datanode 节点
    Hadoop wordcount
  • 原文地址:https://www.cnblogs.com/yuweifeng/p/8678264.html
Copyright © 2020-2023  润新知