javascript教程 (1)——javascript基础

JavaScript基础语法

1.JavaScript的来源和发展

  1. JavaScript介绍
            JavaScript一种直译式脚本语言,是一种动态语言、弱类型,内置支持类型。 它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
          在1995年时,由Netscape公司在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Java较为接近,其它的没有关系。    
            为了取得技术优势,微软推出了JScript,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
  2. javascript基本特点

            JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。    
            通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。是一种解释性脚本语言(代码不进行预编译)。     
            主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。    
            可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。    
            跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。    Javascript脚本语言同其他语言一样,有它自身的基本数据类型, 表达式和算术运算符及程序的基本程序框架。

  3. javascript的用途

    嵌入动态文本于HTML页面;   

    对浏览器事件做出响应;   

    读写HTML元素;      

    在数据被提交到服务器之前验证数据;

    检测访客的浏览器信息;  

    控制Cookies包括创建和修改等;   

    基于Node.js技术进行服务器端编程。 

  4. ECMAScript介绍
            ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。  
            这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript, 但实际上后两者是ECMA-262标准的实现和扩展。
        一般我们认为JavaScript包含三个部分:   
             1.ECMAScript规定核心语法    
             2.DOM (document object model) 文档对象模型 作用:操作文档  
             3.BOM (browser object model) 浏览器对象模型 作用:操作对象

  5. javascript写法

    我们的JavaScript语句可以有几种写法

    可以写在HTML页面里面的script标签里面:

    
        alert("js你好")
    
    
    也可以写在外部的后缀为.js的文件里面,然后在html页面里面指定script标签的scr属性引入:
    
    my.js文件里的内容:alert("js你好") 
    html页面里面:
    
    也可以直接写在标签里面:点我吧

2.标识符和关键字

  1. 标识符
    所谓的标识符(Identifier),就是一个名称。在JavaScript中,标识符用来命名变量和函数,或者用作JavaScript代码中某些循环的标签。在JavaScript中,合法的标识符命名规则和Java以及其他许多语言的命名规则相同,第一个字符必须是字母、下划线或者是美元符号($),其后的字符可以是字母、数字、下划线或美元符号。  
    注:标识符不能和javascript 中用于其他目的的关键字同名。数字不允许作为首字符出现,这样JavaScript可以轻易地区别开标识符和数字。
     

  2. 关键字
    关键字是指在JavaScript语言中有特定含义,成为JavaScript语法中一部分的那些单词。

    JavaScript关键字是不能作为变量名和函数名使用的。

    常见的关键字:
    break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

  3. 保留字
    “保留字”实际上就是预留的“关键字”,意思是现在虽然现在还不是关键字(也就是本身还不具备特殊含义的),但是未来可能会成为关键字的,你一样是不能使用它们当变量名啊方法名的。

    常见的保留字:
    abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等

  4. 注释
    所谓的注释,从中文含义就是标注解释,而我们代码里的注释就是用来解释代码的作用。在实际开发中我们可能是多人做相同的一个工作,或者大家写完的代码以后会交给别人看,或者很久以后再看,需要去重新理清思路。这个时候注释的作用就非常有用。可以清楚了解代码的思路,便于团队协作。注释是不会影响我们JS代码的运行,所以放心大胆的写注释,良好的注释习惯会让你的代码整齐,思路顺畅。

    注释的写法:  
    单行注释      //注释的内容
    多行注释     /*注释的内容*/

3.变量和常量

  1. 变量的定义
    变量是指程序中一个已经命名的存储单元,它的主要作用就是为数据操作提供存放信息的容器。对于变量的使用首先必须明确其命名规则、声明方法及其作用域。简而言之,就是可以变化的量。类似我们初中数学题目的时候假设变量的含义类似。

  2. 变量的命名规则
    必须以字母或下划线开头,中间可以是数字、字母或下划线变量名     不能包含空格、加号、减号等符号     不能使用JavaScript 中的关键字。   JavaScript  的变量名是严格区分大小写的。
    注:UserName 与username 代表两个不同的变量。与标识符的命名规则差不多。

  3.  变量的声明和赋值
    在JavaScript中,使用变量前需要先对其进行声明,所有的JavaScript变量都由关键字var 声明,语法格式如下:
            var age;
    在声明变量的同时也可以对变量进行赋值。
            var age=20;

    可以使用一个关键字var 同时声明多个变量:
            var a,b,c;
    也可以在声明变量的同时对其赋值,即初始化,如:
            var i = 1, j = 2, k = 3;
            
    如果只是声明了变量,并未对其赋值,则其值默认为undefined。var语句可以用作for循环和for/in循环的一部分,这样就使循环变量的声明成为循环语法自身的一部分,使用起来比较方便。 

    也可以使用var语句多次声明同一个变量,如果重复声明的变量已经有一个初始值,那么此时的声明就相当于对变量的重新赋值。

    由于JavaScript采用弱类型的形式,因此大家可以不必理会变量的数据类型,即可把任意类型的数据赋值给变量。

  4. 变量的作用域
    变量的作用域是指某变量在程序中的有效范围,也就是程序中定义该变量的区域。在JavaScript中变量根据作用域可以分为两种:全局变量和局部变量。  局部变量是定义在函数体内,只作用于函数体的变量,函数的参数也是局部性的,只在函数内部起作用。  例如,下面的程序代码说明了变量的作用域作用不同的有效范围。

     

  5. 变量的生存期
    变量的生存期是指变量在计算机中存在的有效时间。从变成的角度来说,可以简单地理解为该变量所赋的值在程序中的有效范围。JavaScript 中变量的生存期有两种:全局变量和局部变量。全局变量在主程序中定义,其有效范围从其定义开始,一直到本程序结束为止。局部变量在程序的函数中定义,其有效范围只有在该函数之中,在函数结束后,局部变量的生存期也就结束了。

  6. 常量
    当程序运行时,值不能改变的量为常量。常量主要用于为程序提供固定和精确的值,如数字,逻辑值真(true)、逻辑值假(false)等都是常量。需要改变的常量可以使用变量来进行提供。  在我们的ES5里面没有常量的概念,我们会使用大写的变量来假设是常量,从ES6开始我们有了常量的定义方法const,后面我们的介绍到。
     

4. 基本数据类型

        所谓的数据类型我们从字面含义,可以了解到就是描述数据的类型,数据就和我们人一样也有类型,人有男人,女人。数据也分,数据的类型有数字的,字符的,描述对错的。这就是我们的数据类型。那我们常见的基本数据类型有:数字型,字符串型,布尔型,undefined,null这五种基本的数据类型;同时还有我们对象类型 数组和对象

  1. 数字型(number)
    只有一种数字类型。数字可以带小数点,也可以不带;
    JavaScript 数字型数据可以为正数也可以为负数;JavaScript 数值极大或者极小的时候可以用e来表示。

    var x = 10; //整数 型  
    var y = 10.00;  //浮点型
    var x2 = 10;    //正数
    var y2 = -10 ;  //负数
    var x3 = 122e5; //12200000
    var y3 = 122e-5;    //0.00122

    JavaScript数字型数据可以使用八进制、十进制、十六进制运算十进制:是一个数字系列,如:1,2,-3,0十六进制:是以16为基数的数据,是以“0X”和“0x”开头,其后跟随十六进制数字串的直接量。十六进制的数字可以是0到9中的某个数字,也可以是a(A)到f(F)中的某个字母,它们用来表示0到15之间(包括0和15)的某个值。

    var x = 0xff ;  //  15*16+15 = 255  
    var y = 0xCAFE911;  // 212855057

    八进制:尽管ECMAScripr标准不支持八进制数据,但JavaScript的某些实现却允许采用八进制(基数为8)格式的整型数据。八进制数据以数字0开头,其后跟随一个数字序列,这个序列中的每个数字都在0和7之间(包括0和7)。

    var x = 0377;   // 3*64+7*8+7 = 255
  2. 字符串(string)
    字符串是存储字符的变量。用来表示文本的数据类型,程序中的字符串是包含单/双引号中的,由单引号定界的字符串中包含有双引号,反之也是如此。
     

    var x = "javascript";  
    var y = 'javascript基础';
    var str = '本节课的内容是:"javascript基础"';
    var str2 = "本节课的内容是:'javascript基础'";
  3. 布尔型(boolean)
    布尔值通常用于流程控制。字符串和数字型的值都是无穷尽的,然而布尔数据类型(逻辑)只能有两个值:true或false,这两个值分别用来说明某个事物是真还是假。布尔值通常在JavaScript 程序中用来比较所得的结果。例如:

    n==1    
    //这行代码测试了变量n的值是否与数值1是否相等,如果相等, 则表示结果为true,否则为false
  4. undefined(未定义)
    这个值表示变量不含有值,没有定义的值;或者被赋予了一个不存在的属性值。

    var i;  
    document.write(i) ; //结果就是undefined;
  5. null(空)
    关键字null是一个特殊的值,它表示为空值,用于定义空的或不存在的引用。如果试图引用一个没有定义的变量,则返回一个null值。这里必须要注意的是:null不等同于空的字符串("")或0。  null与undefined的区别是: null表示一个变量被赋予了一个空值,而undefined则表示该变量尚未被赋值。

    var i = 10;
    document.writeln(i);    //结果 10
    i = null;
    document.writeln(i);    //结果 null

    typeof  
    我们使用typeof函数,来检测变量的数据类型

    var aa = "你好";
    var res =  typeof(aa);  
    //或者简写  var res =  typeof aa; 
    console.log(res)  // string

5.运算符

        所谓的运算符是用于执行程序代码运算,会针对一个以上操作数项目来进行运算。例如我们以前数学学习中的加减乘除等等这种就属性运算符。

  1. 算术运算符
    加减乘除,取模,累加,累减

    运算符 描述 例子(y=5) x 运算结果 y 运算结果
    + 加法 x=y+2 7 5
    - 减法 x=y-2 3 5
    * 乘法 x=y*2 10 5
    / 除法 x=y/2 2.5 5
    % 取模(余数) x=y%2 1 5
    ++ 自增 x=++y 6 6
    -- 自减 x=--y 4 4



    所谓的累加是 ++运算符,所谓的累减是--运算符。

    var a = 10;
    a++;  // 实质是 a = a +1 结果a变成了11

    但是我们的累加和累减分为前后,在有的时候有点区别。

    var a = 10;
    ++a;  // 实质是 a = a +1  结果还是11 和 ++a没区别

    可是如果我们在将累加和累减放在运算中就会有点不同。

    var a = 10;
    var res = 9 + ++a;
    console.log(res);  //console.log()函数适用于控制台输出
    console.log(a); 

    你会以为结果是res是20,a的值是11。这符合大家的思考逻辑。好的看下面的代码。

    var a = 10;
    var res = 9 + a++;
    console.log(res);  //console.log()函数适用于控制台输出
    console.log(a); 

    这个时候你发现 res是19,a的值还是11。这个就让大家觉得很奇怪。 这里强调一点:我们的前++是将自己先进加1后再去和别人运算。这里我们可以看出来上面个案例 a在和9相加之前已经将自己加了1,而下面那个案例是先去和9进行运算,当运算完了以后再回来将自己加1 。口诀:前++是先加完自己再去和别人运算,后++是先和别人运算,运算结束后再将自己加一下。

  2. 比较运算符
    比较运算符在逻辑语句中使用,以测定变量或值是否相等。

    运算符 例子(y=5) 等同于 运算结果
    == 等于 x==8 false
    === 全等 x==="5" false
    != 不等于 x!=8 true
    !== 不全等 x!=="5" true
    > 大于 x>8 false
    < 小于 x<8 true
    >= 大于或等于 x>=8 false
    <= 小于或等于 x<=8 true

    全等于需要值相同并且数据类型相同
     

  3. 赋值运算符
    赋值语句是JavaScript程序中最常用的语句。在程序中,往往需要大量的变量来存储程序中用到的数据,所以用来对变量进行赋值的赋值语句也会在程序中大量出现。赋值运算符用于给 JavaScript 变量赋值。给定 x=10 和 y=5,下面的表格解释了赋值运算符:

    运算符 例子(y=5) 等同于 运算结果
    =   x=y x=5
    += x+=y x=x+y x=15
    -= x-=y x=x-y x=5
    *= x*=y x=x*y x=50
    /= x/=y x=x/y x=2
    %= x%=y x=x%y x=0

    用于字符串的 + 运算符 。+运算符用于把文本值或字符串变量加起来(连接起来)。如需把两个或多个字符串变量连接起来,请使用 + 运算符。

    var str = "javascript";
    var str2 = "基础";
    var str3 = str + str2;
    console.log(str3)  // "javascript基础"
    

    对字符串和数字进行加法运算  

    var x=15+15;  // 30 数字型
    var y="5"+5;  // 55  字符串
    var z="Hello"+5;  // Hello5 字符串

     

  4. 逻辑运算符
    逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3,下表解释了逻辑运算符:

    运算符 描述 例子
    && and (x < 10 && y > 1) 为 true
    ll or ( x<6 || y=3 ) 为true
    ! not !(x==y) 为 true
  5. 三元运算符

    var 变量 = 条件 ? 结果1 : 结果2 

    我们的条件成立的时候我们将结果1赋给变量,条件不成立的时候我们将结果2赋给变量。

    var a = 20;
    var c = a > 21 ? "a大于21" : "a不大于21";
    console.log(c) // 输出 a不大于21


    PS:纯属本人原创,如有错误 欢迎指点  不才会及时更正  互相学习   

你可能感兴趣的:(web前端,javascript)