JS计算

一、js是怎样,是用来干什么的?

  js也就是javascript,它是一种基于对象和事件驱动的并装有绝对安全性的客户端脚本语言。用于web客户端支出的脚本语言,常用来给html网页添加动态成效,如响应用户的种种操作。

  javascript(以下简称js)由中央语法ECMAScript、浏览器对象模型(BOM)
,、文档对象模型(DOM)三片段组成.

二、引入JS的常用形式

  1、内部引入

    在<head>标签中引入

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    //head中引入js
    <script></script>
</head>    

    在<body>标签中引入

<body>
    //body中引入js
    <script></script>
</body>

  2、外部引入

    引入外部JS文件,就是将js代码存放在一个后缀名为.js的文书中,然后使用script标签来引用。其它,引用外部JS文件的script标签可以置身head标签内,也得以放在body标签中。一般只有引用一些插件的时候才会将JS引入在head内,大部分是写在body内最上边,因为在加载页面时css和html是先加载的,而JS文件要求最终才加载。

<body>
     //在body的最末尾引入外部的JS.
        <script src="js/index.js" type="text/javascript"></script>
</body>

三、JS中的数据类型

    基本数据类型:String、boolean、Number、undefined、null
    引用数据类型:Object、Array、Date、RegExp、Function

四、变量命名规范

    (1)、变量名区分轻重缓急写,允许包括字母、数字、法郎符号($)和下划线,但首先个字符不容许是数字,差异意包罗空格和其他标点符号,不可能是汉语.

    (2)、变量命名长度应该尽量的短,并引发要点,尽量在变量名中突显出值的种类

    (3)、尽量防止使用没有意义的命名

    (4)、禁止行使JavaScript关键词、保留字全名

    (5)、变量名命超模式常见为驼峰命名法

五、JS中的类型转换

    强制类型转换:

    Boolean(value):把给定的值转换成Boolean型。它的规则:

    以下值会被转换为false:false、”"、0、NaN、null、undefined,其余任何值都会被转换为true。

 

    String(value):把给定的值转换成字符串。它的条条框框:

    (1)如果有toString()方法,则调用该方法(不传递radix参数)并返回结果
    (2)如果是null,返回”null”
    (3)如果是undefined,返回”undefined”

    

    Number(value):把给定的值转换成数字(能够是整数或浮点数)。它的条条框框:

    (1)如果是布尔值,true和false分别被转换为1和0
    (2)如果是数字值,返回本身。
    (3)如果是null,返回0.
    (4)如果是undefined,返回NaN。
    (5)如果是字符串,遵循以下规则:
      1、如果字符串中只包含数字,则将其转换为十进制(忽略前导0)
      2、如果字符串中包含有效的浮点格式,将其转换为浮点数值(忽略前导0)
      3、如果是空字符串,将其转换为0
      4、如果字符串中包含非以上格式,则将其转换为NaN
    (6)如果是对象,则调用对象的valueOf()方法,然后依据前面的规则转换返回的值。如果转换的结果是NaN,则调用对象的toString()方法,再次依照前面的规则转换返回的字符串值

 

    转换函数:

    ParseInt(string,radix):将字符串转换为整数种类的数值。它的平整:

    (1)忽略字符串前面的空格,直至找到第一个非空字符
    (2)如果第一个字符不是数字符号或者负号,返回NaN
    (3)如果第一个字符是数字,则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
    (4)如果上步解析的结果以0开头,则将其当作八进制来解析;如果以x开头,则将其当作十六进制来解析
    (5)如果指定radix参数,则以radix为基数进行解析

 

    parseFloat(string):将字符串转换为浮点数类型的数值。它的平整:

它的规则与parseInt基本相同,但也有点区别:字符串中第一个小数点符号是有效的,另外parseFloat会忽略所有前导0,如果字符串包含一个可解析为整数的数,则返回整数值而不是浮点数值

 

六、JS运算符

    1、算数运算符,算术运算符用于实践变量与/或值时期的算术运算。

运算符 描述 例子 结果
+ x=y+2 x=7
x=y-2 x=3
* x=y*2 x=10
/ x=y/2 x=2.5
% 求余数 (取膜,保留整数) x=y%2 x=1
++ 累加(自加) x=++y x=6
递减(自减) x=–y x=4

    

    2、赋值运算符,赋值运算符用于给 JavaScript 变量赋值。

运算符 例子 等价于 结果
= 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

    

    3、相比运算符,比较运算符在逻辑语句中行使,以测定变量或值是或不是等于。

            给定 x=5,上边的报表解释了比较运算符:

运算符 描述 例子
== 等于 x==8 为 false
=== 全等(值和类型) x===5 为 true;x==="5" 为 false
!= 不等于 x!=8 为 true
> 大于 x>8 为 false
< 小于 x<8 为 true
>= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true

    

    4、逻辑运算符,逻辑运算符用于测定变量或值时期的逻辑。

            给定 x=6 以及 y=3,下表解释了逻辑运算符:

运算符 描述 例子
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true

    

    5、三目运算符

          格式:表明式?“值1”:“值2”,左边为三目运算符的表明式,?后的第二个值为true,:后的值为false.

          例子:var  num  = 10;

             num>100?”num的值不超出100″:”num的值超出100″;

七、JS中的流程控制

    1、条件语句,常常在写代码时,您总是必要为不相同的支配来举办不一的动作。您可以在代码中利用标准语句来成功该职分。在
JavaScript 中,大家可选取以下标准语句:

      (1)、if 语句
:唯有当指定条件为 true 时,该语句才会履行代码。

        语法:

 if (条件){
    只有当条件为 true 时执行的代码
  }

        例如:

var a = 5;     //if else 判断大小  
var b = 3;   
if(a>b){       //只有当指定条件为 true 时,使用该语句来执行代码
   alert("a的值大");
}

        注意:请使用小写的 if。使用大写字母(IF)会转移
JavaScript 错误!

 

      (2)、if  else语句 :在标准为 true 时举办代码,在标准为 false
时实施其它代码。

        语法:

if (条件)
  {
  当条件为 true 时执行的代码
  }
else
  {
  当条件不为 true 时执行的代码
  }

        例如:

var a = 3;     //if else 判断大小  
var b = 5;   
if(a>b){       //只有当指定条件为 true 时,使用该语句来执行代码
  alert("a的值大");
}else{        //当条件不为true 时执行其他代码
  alert("b的值大")
}

 

      (3)、 if….else if…else
语句来摘取两个代码块之一来执行。

        语法:

if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

        例如:

var score = 60;   //判断成绩
if(score<=100 && score>=90){
  alert("成绩优");     
}else if(score<90 && score>=80){
  alert("成绩良");    
}else if(score<80 && score>=60){
  alert("成绩及格");
}else if(score<60){
  alert("成绩差");
}

        

    2、switch语句,基于差距的尺度执行不一的动作

      语法:表明式n平常为一个变量,n的值与case的值作相比较,假诺case匹配成功,则举行该case中的代码段,每个case中请使用break来阻止代码向下一个case运行。

 倘诺每个case中都从未有过break,它将履行所有的case。default代表即使n的值与case都不合作,则实施default的代码段。

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

      例子:

switch (1){   //表达式的值如果等于case的值,并且类型值相同,就运行相应case代码
  case 1:
    alert("1");
    break;   //如果不写break,它将执行所有的case,直到遇到某一个case中写了break
  case 2:
    alert("2");
    break;
  default:  
    alert("如果上面的case与n的值都不匹配,则执行我哦~");
    break;
}

 

    3、循环流程控制(for,while,do while)

      当大家要求再行执行某一个动作或运行相同的代码的时候,我们就足以应用循环

      (1)、for循环

        语法:

for (语句 1; 语句 2; 语句 3){
    被执行的代码块
 }

        语句 1 在循环初始前举办,寻常大家会在此处声可瑞康(Nutrilon)(阿博特(Abbott))个变量

        语句
2 定义运行循环的尺度,日常我们会在此间写一个表明式  

        语句3只有在这次巡回落成后才实施,寻常我们会在此地写一个变量的自增或自减,

        例如:

//for循环小例子   求1-100的和
var sum = 0;   
for(var i=1;i<=100;i++){
  sum = sum + i;
}
document.write(sum);

      

      (2)、while循环

        语法:

while (条件){
  需要执行的代码
}

        例如:

       //while循环1-10
       var i=1;
            while(i<=10){
                document.write(i+'<br/>');
                i++;
            }    

 

      (3)、do while循环

        语法:do/while 循环是 while
循环的变体。不管while中的表明式成不树立,do中的代码段都会执行两遍。

do
  {
  需要执行的代码
  }
while (条件);

        例如:

        //do while  
            var num = 12;
            do{  //至少被执行一次,即使为false也会执行,因为输出代码块在条件之前。
                num++;
                document.write("num的值为:"+num+"<br />");
            }
            while(num<1);

    

      (4)、break和continue

        语法:

continue;   //跳出本次循环,且continue上面的代码会执行完,continue下面的代码不会执行。
break;      //结束整个循环

        例如:

       /*break*/
            var i=1;
            while(i<=10){
                if(i==3){
                    document.write(i+'<br/>');
                    break;   //结束整个循环
                }
                document.write(i+'<br/>'); //输出的值为:1,2,3
                i++;
            }

       /*continue循环*/
            i=1;
            while(i<=10){
                if(i==3){
                    i++;   //4
                    continue;  //结束本次循环,且continue上面的代码会执行完,continue下面的代码不会执行
                }
                document.write(i+'<br/>');  //输出1,2,4,5,6,7,8,9,10
                i++; 
            }    

 

八、函数

    函数是何许?

     定义:函数是为着形成某个意义的代码段,意义是方便维护和另行使用。

     函数命有名的模特式:无法用特殊字符,尽量语义化,驼峰式命名,严苛不一致轻重缓急写,函数名重名会产生覆盖,函数最好用事件驱动。

     函数的成立方法有二种:

      //JS函数创建方法一:
            function fun(){
                alert("Hello JavaScript");
            }
            fun();  //定义好的函数如果不被调用,函数是不会执行的哦~

       //JS函数创建方法二:将函数存储在变量中,
            var fun =  function(){
                alert("Hello HTML");
            }
            fun();  //定义好的函数如果不被调用,函数是不会执行的哦~

       //JS函数创建方法三:构造函数,函数可以自调!
            var fun = new Function(alert("Hello Java"));

 

 

     函数的调用方法:

     //声明一个函数,并调用        
            function fun(){
                alert("Hello JavaScript");
            }
            fun();  

     <!--HTML中通过事件调用函数-->
     <p>第一题:请问你会HTML吗</p>
        <button id="a" onclick="fun()" value="会">会</button>

     

     函数的参数传递:

     所谓参数传递,就是将实参的值传递给形参。通过调节可以规定形参在函数调用此前是不设有的,当函数被调用的那一刻,实参被创立,并且把实参的内容传递给形参。

        //声明一个函数increase(),括号中的num就是这个函数的形参。
            function increase(num){
                num++;
                return num;
            }
            //调用方法,并传入一个实参10,根据函数要完成的功能的不同,可传入的参数也不同,
            alert(increase(10));

      参数传递的注意事项:

     (1)、形参的命名,不能使用特殊符号,开头只能以$_字母开头,同名产生覆盖,不能有中文。

     (2)、虽然JS属于弱类型语言,不强制要求形参和实参必须个数相等,但是实际项目中,形参有多少个,实参我们就传入多少个。

 

      参数传递蕴含三种办法:值传递和引用传递。 

        值传递:形参是实参值的一个副本,对形参的改变不会影响实参 
        
        引用传递(object,array等):形参实际上是对实参引用变量的复制,导致这实参、形参都指向同一个对象实体。形参改变会同时改变实参的值。 

       //值传递
            var a = 10;
            function increase(a){
                a++;
                return a;
            }
       increase(a); //弹出形参11
       alert(a);    //弹出实参10
       //a的值并没有显示预期中的11,还是10。因为形参a和实参a是两个不同的变量,形参a的变化和实参a没有任何关系。

        /*引用传递*/
            //声明一个person对象
            var person = {
                name:'Tom',
                age:22
            }
            function myfunc(person){
                person.name='jeck';
                alert(person.age); //22
            }
            myfunc(person);
            alert(person.name);  //输出jeck,而不是Tom

 

      回调函数:传统函数以参数格局输入数据,并且应用重返语句再次来到值。理论上,在函数结尾处有一个return重回语句,结构上就是:一个输入点和一个输出点。那相比较不难精晓,函数本质上就是输入和出口之间落成进程的炫耀。不过,当函数的贯彻进度非常悠久,你是选项等待函数落成处理,照旧使用回调函数进行异步处理啊?那种场所下,使用回调函数变得至关主要,例如:AJAX请求。倘使使用回调函数进行拍卖,代码就足以一连拓展任何职务,而无需空等。实际开发中,日常在javascript中应用异步调用,甚至在此处强烈推荐使用!

       //回调函数
            function fun(){
                var num = 1;
                return  function(){
                    num = num *10;
                    document.write(num);
                    return num;
                };
            }
            var fun = fun();
            fun();

      

      window(浏览器对象模型):

        所有 JavaScript 全局对象、函数以及变量均自动成为 window
对象的成员。

        全局变量是 window 对象的性能。

        全局函数是 window 对象的不二法门。

        甚至 HTML DOM 的 document 也是 window 对象的性能之一。