欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端--javaScript之简单介绍

程序员文章站 2022-05-08 13:49:46
一.javaScript(以下简称js)的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Net ......

一.javascript(以下简称js)的历史

  • 1992年nombas开发出c-minus-minus(c--)的嵌入式脚本语言(最初绑定在cenvi软件中).后将其改名scriptease.(客户端执行的语言)

  • netscape(网景)接收nombas的理念,(brendan eich)在其netscape navigator 2.0产品中开发出一套livescript的脚本语言.sun和netscape共同完成.后改名叫javascript

  • 微软随后模仿在其ie3.0的产品中搭载了一个javascript的克隆版叫jscript.

  • 为了统一三家,ecma(欧洲计算机制造协会)定义了ecma-262规范.国际标准化组织及国际电工委员会(iso/iec)也采纳 ecmascript 作为标准(iso/iec-16262)。从此,web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ecmascript 作为 javascript 实现的基础。ecmascript是规范.

二.ecmascript

尽管ecmascript是一个重要的标准,但他并不是js唯一的部分,当然,也不是唯一被标准化的部分.实际上,一个完整的js实现是由以下3个不同部分组成的:

核心(ecmascript)

文档对象模型(dom) document object model(整合js,css,html)

浏览器对象模型(bom)broswer object model(整合js和浏览器)

js在开发中绝大多数情况是基于对象的,也是面向对象的.

前端--javaScript之简单介绍

简单地说,ecmascript描述了一下内容:

语法

类型

语句

关键字

保留字

运算符

对象(封装,继承,多态)基于对象的语言,使用对象.

三.js基础

1.js的引入方式

  1.直接编写:

<script>
    alert("hello world!")
</script>

  2.导入文件:

<script src = "hello.js"></script>

2.js的变量

  1.声明变量时不用声明变量类型,全部使用var关键字

var a = 3;

  2.一行可以声明多个变量,并且可以是不同类型

var name = "corn" , age = 21;

  3.变量命名,首字母只能是字母,下划线,美元符号$,三选一,余下的字符可以是任意字符,且区分大小写

3.常量和标识符

常量:直接在程序中出现的数据值

标识符:

  1.由不是数字开头的字母,数字,下划线(_),美元符号($)组成

  2.常用于表示函数,变量等的名称

  3.例如:_abc.$abc,abc,abc123是标识符,而1abc不是

  4.js语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

关键字:

前端--javaScript之简单介绍

前端--javaScript之简单介绍

4.js的数据类型

数据类型有:

number        ------  数值
boolean       ------  布尔值
string        ------  字符串
undefined     ------  undefined
null          ------  null

数字类型:

  不区分整型数值和浮点型数值

前端--javaScript之简单介绍

字符串类型(string):

是由unicode字符,数字,标点符号组成的序列;字符串常量首尾由单引号或双引号括起;js中没有字符类型;常用特殊字符在字符串中表达;

字符串中特殊部分必须加上右斜杠\;常用的转义字符 \n:换行\` ; \':单引号 ; \":双引号 ; \\:右斜杠

布尔类型(boolean):

boolen类型仅有两个值:true和false,也代表1和0,实际运算中true = 1,false = 0

布尔值也可以看作on/off,yes/no,1/0对应true/false

boolean值主要用于js的控制语句,例如:

if (x==1){
        y=y+1;
}else{
        y=y-1;    
        }    

null和undedined类型

undefined类型

1.undefined类型只有一个值,即undefined.当声明的变量未初始化时,该变量的默认值是undefined.

2.当函数无明确返回值时,返回的也是值"undedined".

null类型

另一种只有一个值的类型是null,它只有一个专用值null,即它的字面量.值undefined实际上是从值null派生来的,因此ecmascript把它们定义为相等的.

尽管这两个值相等,但它们的含义不同.undefined是声明了变量但未对其初始化时赋予该变量的值,null则用于表示尚未存在的对象(在讨论typeof运算符时,简单的介绍过这一点).如果函数或者方法要返回的是对象时,返回的通常是null.

四.运算符

运算符分类

算数运算符:
    +   -    *    /     %求余       ++ 自增       -- 自减    (++i:先计算后赋值,i++:先赋值后计算)

比较运算符:
    >  >=  <   <=  !=  ==  === !== 等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。

逻辑运算符:
     &&   ||   !

赋值运算符:
    =  +=   -=  *=   /=

字符串运算符:
    +  连接,两边操作数有一个或两个是字符串就做连接运算

五.流程控制

顺序结构(从上向下执行)

分支结构

循环结构

分支结构:

  1.if.....else结构

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

  2.if.....else if.....else结构

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

  3.switch.....case结构

var day = new date().getday();
switch (day) {
  case 0:
  console.log("sunday");
  break;
  case 1:
  console.log("monday");
  break;
default:
  console.log("...")
}

switch中的case字句通常都会加break语句,否则程序会继续执行后续case中的语句.

循环结构:

for循环:(推荐使用)

for (var i=0;i<10;i++) {
  console.log(i);
}

for循环的另一种形式:

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

while循环:

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元运算:

var a = 1;
var b = 2;
var c = a > b ? a : b

六.string对象(字符串)

1.字符串对象的创建

字符串创建(两种方式)

  1)变量 = "字符串"

  2)字符串对象名称 = new string(字符串)

//        方式一
          var s = 'sffghgfd';
//        方式二
          var s1 = new string('  hel lo ');
          console.log(s,s1);
          console.log(typeof(s)); //object类型
          console.log(typeof (s1)); //string类型

2.字符串对象的属性和函数

-------属性
x.length         ----获取字符串的长度

------方法
 x.tolowercase()        ----转为小写
 x.touppercase()        ----转为大写
 x.trim()               ----去除字符串两边空格       


----字符串查询方法

x.charat(index)         ----str1.charat(index);----获取指定位置字符,其中index为要获取的字符索引

x.indexof(index)----查询字符串位置
x.lastindexof(findstr)  

x.match(regexp)         ----match返回匹配字符串的数组,如果没有匹配则返回null
x.search(regexp)        ----search返回匹配字符串的首字符位置索引

                        示例:
                        var str1="welcome to the world of js!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 结果为"world"
                        alert(str3);     // 结果为15
                        

----子字符串处理方法

x.substr(start, length) ----start表示开始位置,length表示截取长度
x.substring(start, end) ----end是结束位置

x.slice(start, end)     ----切片操作字符串
                        示例:
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //结果为"cd"
                            
                            alert(str3); //结果为"efgh"
                            
                            alert(str4); //结果为"cdefg"
                            
                            alert(str5); //结果为"fg"

x.replace(findstr,tostr) ----    字符串替换

x.split();                 ----分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strarray=str1.split(",");
                                alert(strarray[1]);//结果为"二"
                                
x.concat(addstr)         ----    拼接字符串

方法的使用

<script>
//        ========================
//        字符串对象的创建有两种方式
//        方式一
          var s = 'sffghgfd';
//        方式二
          var s1 = new string('  hel lo ');
          console.log(s,s1);
          console.log(typeof(s)); //object类型
          console.log(typeof (s1)); //string类型

//        ======================
//        字符串对象的属性和方法
//           1.字符串就这么一个属性
        console.log(s.length);  //获取字符串的长度

//           2.字符串的方法
        console.log(s.touppercase()) ; //变大写
        console.log(s.tolocalelowercase()) ;//变小写
        console.log(s1.trim());  //去除字符串两边的空格(和python中的strip方法一样,不会去除中间的空格)
////           3.字符串的查询方法
        console.log(s.charat(3));  //获取指定索引位置的字符
        console.log(s.indexof('f')); //如果有重复的,获取第一个字符的索引,如果没有你要找的字符在字符串中没有就返回-1
        console.log(s.lastindexof('f')); //如果有重复的,获取最后一个字符的索引
        var str='welcome to the world of js!';
        var str1 = str.match('world');  //match返回匹配字符串的数组,如果没有匹配则返回null
        var str2 = str.search('world');//search返回匹配字符串从首字符位置开始的索引,如果没有返回-1
        console.log(str1);//打印
        alert(str1);//弹出
        console.log(str2);
        alert(str2);


//        =====================
//        子字符串处理方法
        var aaa='welcome to the world of js!';
        console.log(aaa.substr(2,4)); //表示从第二个位置开始截取四个
        console.log(aaa.substring(2,4)); //索引从第二个开始到第四个,注意顾头不顾尾
        //切片操作(和python中的一样,都是顾头不顾尾的)
        console.log(aaa.slice(3,6));//从第三个到第六个
        console.log(aaa.slice(4)); //从第四个开始取后面的
        console.log(aaa.slice(2,-1)); //从第二个到最后一个
        console.log(aaa.slice(-3,-1));


//        字符串替换、、
        console.log(aaa.replace('w','c')); //字符串替换,只能换一个
        //而在python中全部都能替换
        console.log(aaa.split(' ')); //把字符串按照空格分割
        alert(aaa.split(' ')); //把字符串按照空格分割
        var strarray = aaa.split(' ');
        alert(strarray[2])
    </script>

七.array对象(数组)

1.创建数组的三种方式

创建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:
var arrname = new array(元素0,元素1,….); // var test=new array(100,"a",true);

创建方式3:
var arrname = new array(长度); 
            //  初始化数组对象:
                var cnweek=new array(7);
                    cnweek[0]="星期日";
                    cnweek[1]="星期一";
                    ...
                    cnweek[6]="星期六";

2.数组的属性和方法

//        ====================
//        数组对象的属性和方法
          var arr = [11,55,'hello',true,656];
//      1.join方法
        var arr1 = arr.join('-'); //将数组元素拼接成字符串,内嵌到数组了,
        alert(arr1);                //而python中内嵌到字符串了
//        2.concat方法(链接)
        var v = arr.concat(4,5);
        alert(v.tostring())  //返回11,55,'hello',true,656,4,5
//        3.数组排序reserve  sort
//        reserve:倒置数组元素
        var li = [1122,33,44,20,'aaa',2];
        console.log(li,typeof (li));  //array [ 1122, 33, 44, 55 ] object
        console.log(li.tostring(), typeof(li.tostring())); //1122,33,44,55 string
        alert(li.reverse());  //2,'aaa',55,44,33,1122
//         sort :排序数组元素
        console.log(li.sort().tostring()); //1122,2,20,33,44,aaa  是按照ascii码值排序的
//        如果就想按照数字比较呢?(就在定义一个函数)
//        方式一
        function intsort(a,b) {
            if (a>b){
                return 1;
            }
            else if (a<b){
                return -1;
            }
            else{
                return 0;
            }
        }
        li.sort(intsort);
        console.log(li.tostring());//2,20,33,44,1122,aaa

//        方式二
        function intsort(a,b) {
            return a-b;
        }
        li.sort(intsort);
        console.log(li.tostring());
        // 4.数组切片操作
        //x.slice(start,end);
        var arr1=['a','b','c','d','e','f','g','h'];
        var arr2=arr1.slice(2,4);
        var arr3=arr1.slice(4);
        var arr4=arr1.slice(2,-1);
        alert(arr2.tostring());//结果为"c,d"
        alert(arr3.tostring());//结果为"e,f,g,h"
        alert(arr4.tostring());//结果为"c,d,e,f,g"
//        5.删除子数组
        var a = [1,2,3,4,5,6,7,8];
        a.splice(1,2);
        console.log(a) ;//array [ 1, 4, 5, 6, 7, 8 ]
//        6.数组的push和pop
//        push:是将值添加到数组的结尾
        var b=[1,2,3];
        b.push('a0','4');
        console.log(b) ; //array [ 1, 2, 3, "a0", "4" ]

//        pop;是讲数组的最后一个元素删除
        b.pop();
        console.log(b) ;//array [ 1, 2, 3, "a0" ]
        //7.数组的shift和unshift
        unshift: 将值插入到数组的开始
        shift: 将数组的第一个元素删除
        b.unshift(888,555,666);
        console.log(b); //array [ 888, 555, 666, 1, 2, 3, "a0" ]

        b.shift();
        console.log(b); //array [ 555, 666, 1, 2, 3, "a0" ]
//        8.总结js的数组特性
//        java中的数组特性:规定是什么类型的数组,就只能装什么类型.只有一种类型.
//        js中的数组特性
//            js中的数组特性1:js中的数组可以装任意类型,没有任何限制.
//            js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
    </script>

八.日期

1.创建data对象

创建date对象
//        方式一:
        var now = new date();
        console.log(now.tolocalestring()); //2017/9/25 下午6:37:16
        console.log(now.tolocaledatestring()); //2017/9/25
//        方式二
        var now2 = new date('2004/2/3 11:12');
        console.log(now2.tolocalestring());  //2004/2/3 上午11:12:00
        var now3 = new date('08/02/20 11:12'); //2020/8/2 上午11:12:00
        console.log(now3.tolocalestring());

        //方法3:参数为毫秒数
        var nowd3=new date(5000);
        alert(nowd3.tolocalestring( ));
        alert(nowd3.toutcstring()); //thu, 01 jan 1970 00:00:05 gmt

2.data对象的方法---获取日期和时间

获取日期和时间
getdate()                 获取日
getday ()                 获取星期
getmonth ()               获取月(0-11)
getfullyear ()            获取完整年份
getyear ()                获取年
gethours ()               获取小时
getminutes ()             获取分钟
getseconds ()             获取秒
getmilliseconds ()        获取毫秒
gettime ()                返回累计毫秒数(从1970/1/1午夜)

九.math对象(数学相关的)

//该对象中的属性方法 和数学有关.
   

abs(x)    返回数的绝对值。
exp(x)    返回 e 的指数。
floor(x)对数进行下舍入。
log(x)    返回数的自然对数(底为e)。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。

十.function对象(重点)

1.函数的定义

function 函数名 (参数){
<br>    函数体;

    return 返回值;

}

功能说明:

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致,大小写是敏感的
返回值必须使用return
function 类可以表示开发者定义的任何函数。

用 function 类直接创建函数的语法如下:

var 函数名 = new function("参数1","参数n","function_body");

虽然由于字符串的关系,第二种形式写起来有些困难,但有助于理解函数只不过是一种引用类型,它们的行为与用 function 类明确创建的函数行为是相同的。

示例:

var  func2 = new function('name',"alert(\"hello\"+name);");
    func2('haiyan');

注意:js函数加载执行与python不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或下面都可以:

f();//----->ok
      function f(){
       console.log("hello")
      }
f();//----->ok

2.function对象的属性

如前所说,函数属于引用类型,所以它们也有属性和方法.

比如,ecmascript定义的属性 length声明了函数期望的参数个数

alert{func1.length}

3.function的调用

//    ========================函数的调用
    function fun1(a,b) {
           console.log(a+b)
    }
    fun1(1,2);// 3
    fun1(1,2,3,4); //3
    fun1(1); //nan
    fun1(); //nan
    console.log(fun1())

//    ===================加个知识点
    var d="yuan";
    d=+d;
    alert(d);//nan:属于number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个nan数据
    alert(typeof(d));//number
    nan特点:
    var n=nan;
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==nan);
    alert(n!=nan);//nan参与的所有的运算都是false,除了!=

    =============一道面试题、、
    function a(a,b) {
        console.log(a+b);
    }
    var a=1;
    var b=2;
    a(a,b)   //如果这样的话就会报错了,不知道是哪个a了。

4.函数的内置对象arguments

//    函数的内置对象arguments,相当于python中的动态参数
    function add(a,b){
        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]
    }
    add(1,2)
//     ------------------arguments的用处1 ------------------
    function ncadd() {
        var sum = 0;
        for (var i =0;i<arguments.length;i++){
//            console.log(i);//打印的是索引
//            console.log(arguments);//arguments { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 等 2 项… }
            console.log(arguments[i]);//1,2,3,4,5
            sum +=arguments[i]
        }
        return sum
    }
    ret = ncadd(1,2,3,4,5,6);
    console.log(ret);


//     ------------------arguments的用处2 ------------------

    function f(a,b,c){
        if (arguments.length!=3){
            throw new error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
        }
        else {
            alert("success!")
        }
    }

    f(1,2,3,4,5)

5.匿名函数

/    =======================
    // 匿名函数
    var func = function(arg){
        return "tony";
    };

// 匿名函数的应用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
    })('123')

6.regexp对象

//regexp对象

//创建正则对象方式1
// 参数1 正则表达式(不能有空格)
// 参数2 匹配模式:常用g(全局匹配;找到所有匹配,而不是在第一个匹配后停止)和i(忽略大小写)

// 用户名只能是英文字母、数字和_,并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建regexp对象方式(逗号后面不要加空格)
var reg1 = new regexp("^[a-za-z][a-za-z0-9_]{5,11}$");

// 匹配响应的字符串
var s1 = "bc123";

//regexp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。
reg1.test(s1);  // true

// 创建方式2
// /填写正则表达式/匹配模式(逗号后面不要加空格)
var reg2 = /^[a-za-z][a-za-z0-9_]{5,11}$/;

reg2.test(s1);  // true


// string对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

// 关于匹配模式:g和i的简单示例
var s1 = "name:alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写


// 注意事项1:
// 如果regexpobject带有全局标志g,test()函数不是从字符串的开头开始查找,而是从属性regexpobject.lastindex所指定的索引处开始查找。
// 该属性值默认为0,所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时,test()函数会将regexpobject.lastindex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时,将会从该索引位置处开始查找,从而找到下一个匹配。
// 因此,当我们使用test()函数执行了一次匹配之后,如果想要重新使用test()函数从头开始查找,则需要手动将regexpobject.lastindex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时,该函数会自动把regexpobject.lastindex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastindex=0
reg3.test('foo'); // 返回true
// 此时 regex.lastindex=3
reg3.test('xxxfoo'); // 还是返回true
// 所以我们在使用test()方法校验一个字符串是否完全匹配时,一定要加上^和$符号。

// 注意事项2(说出来你可能不信系列):
// 当我们不加参数调用regexpobj.test()方法时, 相当于执行regexpobj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true