zoukankan      html  css  js  c++  java
  • JS基础-变量及输入输出和运算符的使用

    一、什么是JavaScript?

    再讲JS的基础之前,先让我们了解一下什么是JS吧。

    JS,全称JavaScript。是t一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。


    二、使用JS的三种方式

    1、在HTML标签中直接内嵌JS():并不提倡使用。
      

    <button onclick="alert('小婊砸!你真点啊!')">有本事点我啊!!</button>

      >>>不符合w3c内容与行为分离的要求!!!


    2、在html页面中使用<script></script>包裹JS代码:

      < script type="text/javascript">
        //JS代码;
      </script>

      >>>Script标签可以放到页面中的任何位置。

    3、引入外部的JS文件,使用<script></script>标签:

    <script language="JavaScript" src="js/01.js"></script>

    [注意事项]
    ①<script></script>可以嵌入到页面的任意位置。但是,位置的不同会导致JS代码的执行顺序不同
      比如<script></script>放到<body>前面,则JS代码会在页面加载之前就执行
    ②引入外部的JS代码,<script></script>必须是成堆的标签。而且,标签中不能再有任何的代码。


    三、JS中的变量

    1、JS中变量声明的写法;
      var num = 10; //使用var声明的变量,属于局部变量,只在当前作用域内有效。
      num = 10; //不用var声明的变量,默认为全局变量,在整个JS文件中都有效。
      var = x=8,y,z=10; //使用一行语句同时声明多个变量。上式中,y属于已声明,但未赋值状态,结果为undefined;

    [声明变量的注意事项]
      ①JS中所有变量的声明,均使用var关键字。变量具体是什么数据类型,取决于给变量赋值的类型;
      ②JS中同一个变量,可以在多次不同赋值时,修改变量的数据类型;
      var a = 10; //从初始声明,是a属于整数型;
      a = "哈哈哈"; //重复赋值时,整数型的a被修改为字符串类型;
      ③变量可以使用var声明,也可以不实用var声明。

      [区别]使用var声明为局部变量,不实用var声明为全局变量;

      ④只用var声明,但是不赋值,结果为undefined;
      例如: var a; // a为undefined。但是,如果不声明也不赋值的a,直接使用会报错。
      ⑤同一变量名可以多次使用var声明。但是,后面的var并没有任何卵用。第二次再使用var声明时,只会被理解为普通的赋值操作。

    2、变量名的命名要求:
      ①变量名,只能有字母、数字、下划线组成;
      ②开头 不能是数字;
      ③变量名区分大小写,大写字母与小写字母为不同变量;

    3、变量名的命名规范:
      ①要符合小驼峰法则:
      首字母小写,之后每个单词的首字母大写;var myNameIsSong = 1;
      ②或者使用匈牙利命名法:
      所有字母小写,单次之间用_分隔;var my_name_is_song = 1;
      ③var mynameissong = 1; ✖,能用,但是不规范。
      

    4、JS中的数据类型

      ①Undefined:未定义。已经使用var声明的变量,但是没有赋值。如,var a;
      ②Null:表示空的引用。
      ③boolean:布尔类型。表示真假,只有两个值: true/false
      ④Number:数值类型。可以是整数,也可以是小数;
      ⑤String:字符串类型。用双引号或单引号包裹的内容,称为字符串;
      ⑥Object:对象类型。

    5、常用的数值函数
      ①isNaN(): 判断一个变量或常量,是否是NaN(not a num 非数值);
        使用isNaN()判断时,会尝试 使用Number()函数进行转换,如果最终结果能够转为数字,则不是NaN,结果为false。
      ②Number()函数: 将其他类型的数据,尝试转为数值型;

      var num = 1;
      alert(Number(num));

    [字符串类型]
      >>>字符串为纯数值字符串,会转为对应的数字;"111"->111
      >>>字符串为空字符串,会转为0; ""->0
      >>>字符串包含任何其他字符串时,都不能转; "1a"->NaN
      
    [布尔类型]
      true -> 1; false -> 0

    [Null/Undefined]
       Null -> 0; Undefined -> 1

    [Object]

      ③ ParseInt(): 将字符串转为整数类型;
      >>>純数值字符串,能转。 "12" -> 12; "12.9" -> 12;(小数转化时,直接抹掉小数点,不进行四舍五入)
      >>>空字符串,不能转,"" -> NaN
      >>>包含其他字符的字符传,会截取第一个非数值字符串前的数字部分;"123a456" -> 123; "a123b456" -> NaN
      >>>PassInt()只能转字符串,转其他类型,全是NaN。

    [Number函数与ParseInt函数的区别]
      1、Number函数能转各种数据类型,ParseInt函数只能转字符串。
      2、两者在转字符串时,结果不完全相同。(详见上面解释)
      
       ④ParseFloat:将字符串转为数值型;
      转换规则与ParseInt相同,值是如果有小数,则保留小数点:如果没有小数,则依然是正数
       "12.5" -> 12.5; "12" -> 12;
      
      ⑤typeof:检测变量的数据类型:
       字符串 -> String          未定义 -> Undefined        true/flase -> Boolean
       数值 -> Number          对象/Null -> Object           函数 -> function


    四、JS中常用的输入输出语句

    1、document.write(); 将()中的内容打印输出到浏览器屏幕上;
      使用时需注意:除变量/常量外的所有内容,必须放到""中。变量和常量必须放到""外面
      
      如果同时有变量和字符串,必须用+链接;

    var num1 = prompt("请输入第一个数");
    var num2 = prompt("请输入第二个数");
    var sum  = parseFloat(num1) + parseFloat(num2)
    alert("结果是"+sum);

      2、alert():使用弹窗输出;
      弹窗警告,()中的内容与上述要求相同。
      3、promt(); 弹窗输入;
        接受两部分参数:
        ①输入框上面的提示内容,可选;
          ②输入框里面的默认信息,可选;
        当只写一部分时,表示输入框上面的提示内容;
      可以定义变量,接收输入的内容。点击确定按钮,变量将被赋值为输入的内容,点击取消按钮,变量将被赋值为null。
      输入内容时,默认接收的数据类型都是字符串!!!


    五、运算符的使用

    1、算术运算(单目运算符)
    + 加、 -减、 *乘、 /除、 %取余、 ++ 自增、 --自减
      >>> +:有两种作用,链接字符串/加法运算。当+两边全为数字时,运行加法运算;
        当+两边有任意一边为字符串时,起链接字符串的作用,链接之后的结果为字符串。
        除+外,其余符号运算时,会先尝试将左右变量用Number函数转为数字。
      >>> /:结果将会保留小数点。
      >>> ++:自增运算符,将变量在原有基础上+1。
      >>> --:自减运算符,将变量在原有基础上-1。

    【a++和++a的异同】
      ①相同点:无论是a++还是++a,运算完以后,a的值均会+1;
      ②不同点:a++,先用a的值去运算,再把a+1;
           ++a,先把a+1,在用a+1以后的值去运算;

    <script type="text/javascript">
        var a= 3,b,c;
        b = a++ +2;   //先用a运算,b=3+2  再把a+1,a+4
        c = ++a +2;   //先把a+1,a=5,在用a+1以后的值去运算,c5+2
        alert(a)
        alert(b)
        alert(c)
    </script>

    2、 赋值运算
    = 赋值、 += -= *= /= %=

      +=: a+=b;相当于 a=a+b;但是,前者的运算效率要比后者快,所以推荐使用+=的写法;

      其余的运算符类似。

    3、关系运算
    == 等于、===全等(严格等于)、 != 不等、 !== 不全等、 >、<、>=、<=

      >>>关系运算符,运算之后的结果,只能Boolean类型
      >>>判断一个数字是否处于某个区间,必须用&&链接;
      a<10 && a>0;✔ 10>a>0;
      >>> ===:严格等于;要求不但要类型相同,值也必须相同;类型不同,结果直接为false;类型相同,在进行下一步判断;
        ==: 等于。类型相同,与===效果一样。类型不同时会先尝试用Number函数将两边转为数字,然后再进行判断。
          但是有个别特例,如: Null==false; Null==Undefined;

    4、条件运算符(多目运算)
    a>b?true:false

      有两个重要符号:
      当?前面部分运算结果为true时,执行:前面的代码
      当?前面部分运算结果为false时,执行:后面的代码
      冒号两边可以为数值,则整个式子可用于赋值。var a = 1<2?1:2;
      冒号两边可以为代码块,将直接执行代码。1<2?alert(1):alert(2);
      多目运算符可以多层嵌套。var a = 1<2?alert(1):(1>0?4:5);

    5、位运算符、 逻辑运算符
    &&与、 ||或 、!非

      &&: 两边都成立,结果为true
      ||: 两边有任意一边成立,结果为true

    6、运算符的优先级:
    ()                       //小括号最高
    ! 、++ 、 --                //单目运算符
    * 、 / 、 %
    + 、 -
    > 、 < 、 >= 、 <=
    == 、 !=
    &&                     //与或同时存在时,&&比||高
    ||
    = 、 += 、 -= 、 *= 、 /=      //最低的是各种赋值

  • 相关阅读:
    树上差分
    Java学习笔记(二)事件监听器
    Java学习笔记(三)Java2D组件
    1066. Root of AVL Tree (25)
    有一种蓝,是神往,是心醉,是心伤
    软考论文的六大应对策略V1.0
    iOS 图形编程总结
    【悼鲁迅】诗一首
    【秋游】诗一首
    【游普罗旺斯薰衣草庄园】诗一首
  • 原文地址:https://www.cnblogs.com/realsdg/p/7470317.html
Copyright © 2011-2022 走看看