Javascript自学-2

来源：互联网发布：人为恶意攻击网络手段编辑：程序博客网时间：2024/04/28 12:32

变量的数据类型
- 变量是有数据类型的，这个类型来源于“变量的值”，换句话说：值是什么类型的，变量就是什么类型的。
- JS中变量的类型有：数值型、字符型、布尔型、undefined、null、array（数组型）、object
- - 数值型
  - - 可以进行算术运算的（加、减、乘、除）
    - 数值型包括：整型和浮点型
```
    <script type="text/javascript">    // 数值型变量：变量的值是数值型的    var a = 10;    var a = 0;    var a = -10;    var a = 0.9;    var b = a *10;    // b = a *10 = 0.9 *10 = 9    // 同名变量：下面的变量讲替换上面的变量    document.write(b);    </script>
```

字符型：用单引号或双引号引起来的一个字符串

注意：字符型变量不能进行算术运算，只能进行“连接”

   var a = "北京传智";    var b = "科技有限公司有限公司";    var c = a + b;             //c = "北京传智" + "科技有限公司"    // 这里的“+”号是作为连接号，而不是加法。    document.write(c);    </script>

显示：北京传智科技有限公司

- JS中的运算符
- - 运算时，只能进行同类型运算。如果类型不同，将进行类型转换。
  - 算术运算符：+、-、*、/、
  - - 举例
```
   var a = 10;   var b = a + 10;  //b = a + 10= 10+ 10=20
```
      显示：20
    - 注意：如果“+”左右两个操作数，都是数值的话，将执行“加法“运算
    - ```
        document.write(c);    document.write("<hr />")    var a = "10";    // 以下代码中，有一个操作数是字符串，因此，将执行字符串的“连接”运算    // 所谓“连接”就是将左右两个字符串品在一起，构成一个更多的字符串。    var b = a +10;  // b = a + 10= "10" + 10 ="1010 "    document.write(b); 
```
  显示：1010
注意：如果”+“左右有一个操作数是字符的话，那么，另一个值将转成字符串。这两个操作数进行的是”连接“运算。

赋值运算符：=、+=

赋值运算符，将”=“右边的运算结果，赋给左边的变量
- var a = 10 + 10;

”+=“先加后等

    //声明变量，并且给变量赋值    var a = 10;    // 使用var关键字声明变量，说明变量不存在才进行变量    // 变量a先加20，再将运算结果再赋给左边的变量    a += 20; //展开后 a = a + 20 = 10 + 20 = 30    document.write(a);

显示：30

    var a = "10";    a += 20;  //展开后 a = a + 20 = "10" + 20= "10" + "20" = 1020    document.write(a);

显示：1020

写程序的一般步骤：
- 变量初始化
- - 变量声明
  - 变量赋值
- 程序的运行过程
- 输出结果

实例：输出个人的基本信息

    <script type="text/javascript">        //实例：输出个人信息        //(1)变量初始化        var name = "张三";        var sex  = "男";        var age  = 32;        var edu  = "本科双学位";        var school = "中国人民公安大学";        //(2)构建要输出的结果        var str = "<h1>" + name + "的基本信息如下</h1>";        str += "<br />姓名：" + name;        str += "<br />性别：" + sex;        str += "<br />年龄：" + age;        str += "<br />学历：" + edu;        str += "<br />毕业学校：" + school;        //（3）输出结果        document.write(str);

变量的类型——就是数据类型
- 变量的数据类型：数值型、字符型、布尔型、未定义型、空型、数组、对象、函数
- 变量的数据类型，分两大类：
- - 基本数据类型：数值型、字符型、布尔型、未定义型、空型，很显著的特点：一个变量名只能存一个变量值。
  - - 举例：var a = 10 + 20;
    - 复合数据类型：数组、对象、函数.显著特点：一个变量名，可以存多个值。
    - 举例：var arr = [10,20,30,40];
  - 数值型：变量能进行数学运算的
  - - 数值型包括：整型和浮点型。
    - 数值型还有一个很特殊的值NaN。NaN（Not a Number)。
    - 当将其他数据类型，转成数值型，转不过去，但程序又不能报错，这时将返回一个NaN的值。
```
    <script type="text/javascript">    //假设想让一个<div>的宽变成原来的2倍宽        var width = "400px";    /*一个字符串，是不能直接转成有意义的数值；    只能转成NaN    一个含有字母的数值字符串，转成数值后变成NaN。如："300px"--->NaN    一个纯数字的字符串，可以转成有意义的数值。如："120"--->120    */        width = width * 2;        document.write(width); // width = NaN    </script>
```
      显示：NaN
- - 字符型：用单引号或双引号，引起来的一个字串。
  - - var a = "我是一个字符串";
    - var a = '我也是一个字符串';
    - var c = ""; //空字符串也算字符串
    - 单引号和双引号之间可以相互嵌套
    - - 单引号内只能嵌套双引号。
      - 双引号内只能嵌套单引号。
        str += "<h1>\"" + name +"\"的基本信息</h1>"; //展开后 str = str + "abc" = "" + "abc" = "abc" str += "姓名：" + name;<span style="font-size: 16px;"></span>

- - - 如果想在双引号内，再嵌套双引号，里面的双引号，一定要进行转义(\")。
    - - JS中的转义字符是是反斜杠（\）
      - 常用的转义字符：\'、\"、\\、\r、\n等。
      - 也就是，当浏览器遇到反斜杠时（\），将会对其后的一个字符进行特殊对待，当成普通字符来对待。所谓“普通”字符就是a、b、c、&等。
        /* 弹窗中的换行只能使用\n来实现；而不能使用<br />,只有<body>中的<br />才会解析成换行符。*/ window.alert("HTML超文本标注语言\nCSS层叠样式表\njavascript脚本程序")
- 布尔型
- - 布尔型又称逻辑型。只有两个值：true（真）、false（假）。
  - 布尔型只有两个状态。如：性别、婚否、灯的开关、是否列入黑名单等。
  - var a = true;
  - var b = false;
  - 布尔型常用语if条件判断语句中
- if条件判断
- - 语法结构：
  - 只判断true，不判断false
```
if(条件判断：结果只有真或假){   条件为true，将执行改代码}；<span style="font-size: 16px;"></span>
```

说明：
if是系统关键字，必须全小写。
（）小括号中，是条件判断语句，判断的结果只有两种可能true或false。

{}大括号中，是条件为true时，将执行的程序代码。

    //根据isMarried的值，来输出是“未婚”，还是“已婚”。    var name = "周更胜";    var isMarried = true;    // 进行条件判断    if(isMarried)    {        document.write(name+"的婚否状态是：已婚！");    }<span style="font-size: 16px;"></span>

语法结构——既判断true，也判断false

if(条件判断：结果只有两个true或false){    条件为true，将执行该代码；}else{    条件为false，将执行该代码;}说明：如果条件为true，则执行第一个{}；          如果条件为false，则执行第二个大括号{}中的代码。          其中，if和else都是系统关键字。else表示“否则”的含义

举例：        //根据isMarried的值，来输出是“未婚”，还是“已婚”。    var name = "周更胜";    var isMarried = true;    // 进行条件判断：二选一，不可能同时执行    if(isMarried)    {        document.write(name+"的婚否状态是：已婚！");    }else    {        document.write(name+"的婚否状态是：未婚！");           }

- 未定义型
- - 当一个变量定义，但未赋值时，将返回未定义型，未定义型的值只有一个undefined。
  - 当一个对象的属性不存在，也返回未定义型。
```
    // 定义变量a，但未赋值，此时的值为underfined。    var a;    document.write(a);
```
- 空型
- - 当一个对象不存在时，将返回空型，空型的值只有一个null。
  - 也可以理解为：是一个对象的占位符。
  - 如果你想清除一个变量的值的话，可以给其赋一个null的值。
  - var a = 100;
  - var a = null; //将一个null赋给一个变量，用于清除它的值。

变量的数据类型转换
- 变量的类型转换，一般情况下是JS自动转换的，但也有些时候需要手动转换。
- 其他类型转成布尔型
判断变量的数据类型：typeof(a)
- 使用一元运算符typeof()，可以测试一个变量的类型。
- typeof()测试的结果是一个类型字符串。
- typeof()的结果字符串有几种情况：
- - "string"
  - "number"
  - "boolean"
  - "undefined"
  - "object"
  - - null、对象、数组这三种类型，typeof()返回的"object"类型。
  - "function"
函数和方法的区别

Boolean(a) //函数可以独立使用

document.write(a) //方法不能独立使用，方法是必须要属于哪一个对象。

    var a = undefined; //false    //var a = null;       //false    // 验证自己口算的结果    // 我们可以使用boolean()全局函数，强制 转成布尔型    var result = Boolean(a);  //Boolean判断时首字母一定要大写    // 输出变量的类型和结果    document.write("类型："+typeof(result)+",值："+result);<span style="font-size: 16px;"></span>

其他类型转换成布尔型

    <script type="text/javascript">    // （1）其他类型转成布尔型    var a = "abc";  //true    var a = "123";  //true    var a = "";       //true    var a = 100;    //true    var a = 0;        //false    var a = NaN;    //false    var a = undefined; //false    //var a = null;   //false    // 验证自己口算的结果    // 我们可以使用boolean()全局函数，强制 转成布尔型    var result = Boolean(a);    // 输出变量的类型和结果    document.write("类型："+typeof(result)+",值："+result);    </script>

其他类型转换成字符型

<script type="text/javascript">    // （2）其他类型转成字符型    var a = true;    //"true"    var a = false;    //"false"    var a = 100;    //"100"    var a = 0;      //"0"    var a = NaN;    //"NaN"    var a = undefined; //"undefined"    var a = null;   //"null"    // 验证自己口算的结果    // 我们可以使用string()全局函数，强制 转成布尔型    var result = String(a);    // 输出变量的类型和结果    document.write("类型："+typeof(result)+",值："+result);    </script>

var a = "";// "+"左右只要有一个字符串，那么另一个一定得转换成字符串，才能运算var b = a + true;   //b = a + true = "" + "true" = "true"<strong><span style="font-size: 16px;"></span></strong>

二元运算符：运算符左右，应该有两个操作数。如10 + 20
一算运算符：只有一个操作数。如typeof(a)或typeof a

其他类型转换成数值型

    <script type="text/javascript">    // （3）其他类型转成数值型    var a = true;        // 1    var a = false;        // 0    var a = "100";        // 100    var a = "120px";    // NaN    var a = "";            // 0    var a = null;        // 0    var a = undefined;  // NaN    // 使用number()全局函数，进行强制转换    // 全局函数或系统函数，是JS内置的函数，名称或大小写必须一致。    var result = Number(a);    // 输出变量函数    document.write("类型："+typeof(result)+",值："+result);    </script>

从字符串中提取整数和浮点数函数
- parseInt()系统函数、全局函数
- - 功能：在一个字符串中，从左往右提取整型数值。如果遇到非整型的内容，则停止提取，并返回结果。
  - 注意：如果第一个字符就是非整型，则立即停止，并返回NaN。
  - - parseInt("120px") = 120;
    - parseInt("120.98") = 120;
    - parseInt("a120px") = NaN;
```
<script type="text/javascript">    // 实例：将一个div元素的宽度乘以2后，重新赋给div元素    var width = "100px";    // 提取整型    width = parseInt(width);    // 将宽乘以2    width = width * 2;    document.write(width+"px");    </script>
```

- parseFloat()系统函数、全局函数
- - 功能：在一个字符串中，从左往右提取浮点型，遇到非浮点型内容，则停止提取，并返回结果。
  - 注意：如果第一个字符是非浮点型，则立即停驶，并返回NaN。
  - - parseFloat("120px") = 120;
    - parseFloat("120.98") = 120.98;
    - parseFloat(".98") = 0.98;
    - parseFloat("120.34px") = 120.34;
    - parseFloat("a.98f") = NaN;

0 0