你的位置:首页 > Java教程

[Java教程]Summary—【base】(JavaScript)


1、认识Js

    1.1 Js就是一门运行在客户端浏览器的脚本编程语言
    1.2 组成
           ECMAScript:Js的语法标准
           DOM:JS操作网页上的元素的API(应用接口),即操作网页
           BOM:JS操作浏览器的部分功能的API,即控制浏览器
    1.3特点
        ①简单易用
        ②解释执行(解释语言):JS源代码是直接通过JS引擎执行的,并且是逐行解释执行
        ③基于对象

2、JS与HTML、CSS

    Html:  是用来制作网页,简单来说就是编写网页结构。
    CSS:用来编写网页的样式
    Javascript:   实现网页与客户之间互动的桥梁,让网页具有丰富的生命力

3、JS执行过程中的小原理

    1)html页面中出现<script>标签后,就会让页面暂停等待脚本的解析和执行。
    2)无论当前脚本是内嵌式还是外链式,页面的下载和渲染都必须停下来等待脚本的执行完成才能继续,这在页面的生命周期中是必须的。
 例如:通过外链式js文件查看加载速度。

4、JS语法规范

    4.1 js书写位置
        ①与css类似,直接嵌入到html页面中,放到页面中任何一个位置都可以。
        ②文件调用:JavaScript代码写到另一个文件当中(其后缀通常为“.js”),然后用格式为“<script src="javascript.js"></script>”的标记把它嵌入到文档中。
    4.2 基础知识
        
    4.3 注释语法
           // 单行注释 ;       /**/  多行注释 ; 快捷键:ctrl+/   
   4.4 声明变量

          ①变量定义:       var 自定义名称;
          ②变量的赋值:    通过“=”复制运算符给变量赋值
          ③变量的命名规范:
              1)不能使用纯数字定义,并且不能以数字开头;
              2)不能使用特殊字符定义变量或者以特殊字符开头,下划线_除外
              3)不能使用关键字定义
              4)不推荐使用汉字定义
              5)不推荐使用保留自定义变量
              6)JS中严格区分字符大小写

5、数据类型介绍

    5.1 简单数据类型

            ①Number类型:所有的数字(整数,小数,负数)
                表示方式:十六进制:以0x开头,同时以0—9或者a(A)—f(F)
                                    八进制:以0开头,0—7组成
            ②String(字符串类型):凡是用" "或者' '引起来的都是字符串类型
                转义字符:\"     转双引号
                                   \'      转单引号
                                   \r      回车符
                                   \n      换行
            ③Boolean(布尔类型): 取值只有两种——true 和 false
            ④NULL:值为空
            ⑤“ ” :空字符串
            ⑥undefined :未初始化——定义了变量没有给变量赋值
    5.2 复杂数据类型
           ①Object(对象)
            ②Array (数组)                  

6、比较运算符

        >    <    !=    >=    <=
    其结果:一种是true(正确的);一种是false(错误的)

7、JS中的运算符

+ 加i)当两个Number类型的变量相加,结果为Number
ii)当一个Number类型的变量和一个String类型的变量相加,最后结果为字符串(加号起到的是连接的作用)
- 减i)当两个Number类型的变量相减,结果为Number
ii)当一个Number数据类型的变量和一个数字的字符串类型变量相减,最后的结果为Number类型
* 乘

结果与减法的结果一致

/ 除结果同上,区别:当一个数字除以0最后的结果为 infinity(Infinity: 无穷大的数字)
%       取余获取余数。
()     优先级

有括号先算括号里面的值


8、等号运算符

运算符含义
=赋值运算符
==等于,判断变量是否相同,不关心数据类型是否相同,只关心内容是否相同
===全等,不仅判断内容是否相同,还要判断数据类型是否一致
!=不等于,判断的是内容,不考虑数据类型
!==不全等于,判断的是内容和数据类型

9、逗号运算符


    var n1=123, n2=456;  //变量的集体申明

10、Math对象方式使用

    Math.ceil()   结果:整数  没有对数字进行四舍五入

    Math.floor()  结果:整数  没有对数字进行四舍五入

    Math.max(n1,n2);     返回两个数字的最大值

    Math.min(n1,n2);      返回两个数字的最小值

    Math.pow(n1,n2)  返回数字的几次方

    Math.round(n2)       四舍五入

    Math.random()       随机数

11、数据类型判断

——typeof(变量)  直接获取变量的数据类型

    ①NaN(not a number):number数据类型

    ②变量的取值为null:  变量的数据类型object

    ③undefined取值的变量或者变量未赋值: 数据类型为undefined

    ④infinity: 数据类型属于number类型


12、数据类型转化

   ① 隐式类型转化
   ② 强制类型转化
12.1 字符串转化为数字
    1)隐式类型转化——只要将数字的字符串与0相减(参与运算加法运算除外)
    2) 强制类型转化——Number()   parseInt()  parseFloat()
     ①Number方式转化后:原来的数字,如果数字后面跟有非数字的字符,那么转化失败。
     ②ParseInt()方法转化后:保留的是整数部分,如果后面跟有非数字的字符,能转化成功。
     ③ParseFloat(): 还是保留原来的数字,如果数字后面跟有非数字的字符,那么转化成功。

12.2 数字转化为字符串
    1)隐式类型转化——通过prompt方法可以实现转化或者将当前数字和一个字符串相加
    2)强制类型转化—— String()  ;  变量.tostring()
12.3 其他类型转化为布尔类型
1)隐式类型转化——通过取反面实现转化
2)强制类型转化—— Boolean();

 除0外所有的数据类型都转化为true  ,0 转化为false


13、逻辑运算符

——注意:逻辑运算之前,必须是两个Boolean类型的数据进行 ||  && ! 运算
    13.1  ||  或 

 1)如果有一个结果为false 和一个结果为true进行或运算 结果为: true

 2)如果两个结果都为false ,  结果为false

 3)如果两个结果都为true,进行或运算后结果为 true


结果1结果2|| 运算结果
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse
    13.2  && 且
结果1结果2&& 运算结果
truetruetrue
truefalsefalse
falsetruefalse
falsefalsefalse

    13.3    !非

        1)如果为true     非运算后  结果为false

        2)如果为false    非运算后 结果为true

14、三元运算符

   14.1 语法结构——条件表达式?结果1:结果2


   14.2 含义——问号前面的位置是判断的条件,判断结果为Boolean型,为true时执行结果1,为false时执行结果2。可看成是 if....else... 的另一种写法


15、逻辑结构

    15.1 if...else条件分支
1 if(条件表达式)   条件表达式的结果必须为Boolean2       {3          如果条件表达式的结果为true,那么执行这里面的代码4      }else{5          如果条件表达式的结果为false,那么执行这里面的代码6     }




   15.2 if...else if...else嵌套

 1 if(条件表达式1) 2  { 3    结果为true 执行该处代码; 4 }else if(条件表达式2){ 5   结果为true 执行该处代码; 6 }else if(条件表达式3){ 7   结果为true 执行该处代码; 8 }else{ 9 如果以上代码条件都不满足,执行该处代码10 }




    15.3 switch

 1 switch(变量) 2     { 3     case 情况1:  //Case  后面的数据类型和switch里面的数据类型必须一致;并且可以作条件集体判断 4   Js代码; 5      break; 6   case 情况2: 7     Js 代码; 8    break; 9   default:10     Js代码;   11 break;12    }



    15.4  while循环

        1)语法:

            初始化一个变量;

            while(循环体){}

        2)执行顺序:

    当while条件表达式结果为true,那么一直会执行whlie循环体内的代码

    15.5 do...while 循环

        1)语法结构:

1 do{2     Js代码;3  }while(条件);




        2)区别于while循环:

            do...while循环比while循环至少多执行一次代码

    15.6 for循环

1 for(var a=1; a<=10; a++)2   {3     Js代码;4   } 





    4)下标介绍——数组中所有元素从0位置开始
    5)通过下标方式赋值及取值

1 var  ary=[];2 ary[0]=1 ; 数组的赋值3 alert(ary[0]); 数组的取值




    6)length 属性介绍——数组名.length用来获取数组的长度(数组中包含多少个元素)
    7)可通过for循环为数组赋值及取值
    8)数组合并方法concat介绍
                var newArray =  array.concat(ary);
    9)数组join方法介绍
                array.join();  // 默认返回的是一个逗号,值是字符串

18、函数(方法) function

——通常情况下,函数是完成特定功能的一段代码
        1)函数的定义:

                通过   function  +函数名+()  ===》函数的定义;

1 function a()   /函数的定义2    {3  方法体;4    }





       2)函数的调用:
                a(); // 直接写上方法名就可以实现方法的调用