JS简介、变量、数据类型、运算符与弹出框

JS

1、JavaScript 简介

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

JS的书写位置

 <script>
         1. // 这是JS的注释，属于单行注释。 
         2.  /* 
            这是JS的注释，属于多行注释 
            可以换行
            */
          3.这里面写的是JS代码
        document.write("你好，世界");
   </script>

<script>
第一种，书写的位置是在当前页面的script标签中
        document.write("hello world");
    </script>
第二种，书写的位置是外部的JS文件中
    <script src="./1908.js"></script>
注意：如果一个script标签拥有了src属性，不论是否有src的属性值，该标签之间不能够
        再书写JS代码 
    <script src="">
        document.write("1908");

注：JavaScript 没有任何打印或者输出的函数。但是 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

2、变量

变量是用于存储信息的"容器"。
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
变量名称不可以是关键字和保留字
推荐使用驼峰命名法 （驼峰命名法：首字母小写，之后的每一个单词的首字母大写 var snakeAndGameAnd = “”;）

变量的定义

  我们通常使用var来定义变量
    var  name；变量声明之后，该变量是空的（它没有值）。 
    赋值变量，需要使用 =
    name = “value”
    也可以对变量直接进行赋值
    var  name = "value";

3、数据类型

编程语言所操作的一切，都是数据。
// 在JS中，数据一共有6种类型。 可以划分为两大类：值类型(基本数据类型、原始值)、 引用类型(会在数组和对象的时候讲解)
// 值类型（基本类型、原始值）：string(字符串)、 number(数值)、 boolean(布尔值)、 undefined(undefined)、 null(null)

     // 引用类型：object
var str = "你好，世界";
        var num = 10;
        var bool = false;
        var und;  声明变量，没有准确的值
        var nul = null;

    // 判定不同的数据类型
    console.log(typeof(str)); 
    console.log(typeof(num));
    console.log(typeof(bool));
    console.log(typeof und);  
    console.log(typeof null); // object
    // 判定的方式有两种： typeof 变量  typeof(变量)

数据类型间的转换

字符串转为数字

    **// 方式1： parseInt()** 
    // 该方法用于将字符串转为数字 第一个参数是被转换的字符串 
    // 转换规则：1 忽略字符串开头的空格 
    // 2 能转几个数字就转换几个数字 
    // 3 一旦开始转换之后，遇见的第一个非数字字符就停止 
    // 4 如果第一个就是非数字字符 则立刻停止并返回NaN
    var str = "   123";
    var str1 = "   123df";
    var str2 = "ddd";
    var str3 = "d1111";
    var str4 = "    12  3.456";
    
    console.log(parseInt(str)); // 123
    console.log(parseInt(str1)); // 123
    console.log(parseInt(str2)); // NaN: Not a Number
    console.log(parseInt(str3)); // NaN
    console.log(parseInt(str4)); // 12

    **// 方式2： parseFloat()**
    // 转换规则：1 忽略字符串开头的空格 
    // 2 能转几个数字就转换几个数字 
    // 3 一旦开始转换之后，遇见的第一个非小数点数字字符就停止 
    // 4 如果第一个就是非数字字符 则立刻停止并返回NaN
    var str5 = "    123.4sd56.789";
    console.log(parseFloat(str));// 123
    console.log(parseFloat(str1));// 123
    console.log(parseFloat(str2));// NaN
    console.log(parseFloat(str3));// NaN
    console.log(parseFloat(str4));//12
    console.log(parseFloat(str5));//123.4
    
    **// 方式3： Number()** 
    // 转换规则： 能够全部转为数字的才能转换成功 只要有任何一个非数字字符 就转换失败 返回NaN 忽略开头和结尾的空白
    console.log(Number(str))//123
    console.log(Number(str1))// NaN
    console.log(Number(str2))// NaN
    console.log(Number(str3))// NaN
    console.log(Number(str4))// NaN
    console.log(Number(str5))// NaN

    **// 方式4： +**
    // 转换规则： 等同于Number
    console.log(+str); //123
    console.log(+str1);// NaN
    console.log(+str2);// NaN
    console.log(+str3);// NaN
    console.log(+str4);// NaN
    console.log(+str5);// NaN

数字转为字符串

// 定义数字
var num = 123;

    // 方式1： String()
    console.log(String(num));

    // 方式2： toString()
    console.log(num.toString());

    // 方式3： 数字 + ""
    console.log(num + ""); 
    /* +运算符的规则： 如果它两侧有任何一个运算数是字符串，
    则会对另外一侧默认调用toString方法 */

    // 方式4： toFixed
    console.log(num.toFixed(2));      

4、运算符

JS中的运算符：数学运算符、赋值运算符、逻辑运算符、比较运算符(关系运算符)、三元运算符、位运算符。

数学运算符： + - * / %

    var a = 10;
    console.log(a + 1);
    console.log(a);
    a = a + 1;
    console.log(a);
    // a = a + 1; 这条代码可以简写成： a += 1;

    var b = 12;
    b -= 11; // 减法也可以简写
    console.log(b); 

    var c = 13;
    c *= c;
    console.log(c);

    var d = 14;
    d /= 2;
    console.log(d);

    var f = 100;
    f %= d;
    console.log(f);

    // 加法运算条件：两侧必须是数字

比较运算符

比较运算符就是用于比较两者的关系
> < >= <= == != === !==
比较运算符返回一个布尔值作为结果
注： == 是相等的意思 不比较数据类型 === 是全等的意思 比较数据类型
var a = 10;
var b = 11;
console.log(a > b); // false
console.log(a < b); // true
console.log(a >= b); // false
console.log(a <= b); // true
console.log(a == b); // false
console.log(a != b); // true
console.log(a === b); // false
console.log(a !== b); // true
如果比较的是字符串 则实际比较的是每一个字符的unicode编码数字
当字符串的长度是多个时，则两两比较，知道分出大小
var a = “10”;
var b = 10;
console.log(a == b); // true
console.log(a === b); // false

逻辑运算符

// 逻辑运算符有三个： && 逻辑与 || 逻辑或 ! 逻辑非
console.log(true && true); // 真
console.log(true && false); // 假
console.log(false && false); // 假
// 逻辑与：有假就假 都真才真
console.log(true || true); // 真
console.log(false || true); // 真
console.log(true || false); // 真
console.log(false || false); // 假
// 逻辑或： 有真就真 都假才假
// 逻辑非的含义就是取反： 真的变假的 假的变真的
console.log(!true); // 假
console.log(!false); // 真
// 在JS中，能够表示假的数据：0 “” NaN undefined null false 其余的都为真
console.log(!0); // 真

逻辑运算符

// i++ i-- 中的++ – 就是自增自减运算符
var a = “10”;
// a++; // 等价于 a = a + 1; a += 1;
// console.log(a); // 11

    console.log(a++); // 因为 ++ 在变量的后面 所以先使用a的值 再+1
    console.log(++a); // 因为 ++ 在变量的前面 所以先+1 再使用a的值

    // 如果变量的值是字符串，则会先向数字进行转换 再进行++ --的操作

5、弹出框

// 浏览器自带了一些提示框 alert() prompt() confirm()
console.log(1);
// alert(“你好，我是警告框”);
// var result = prompt(“输入点内容”);
// console.log(“用户输入的是” + result);
var result = confirm(“此网页需要您的位置权限，是否同意？”);
console.log(result);
console.log(2);
// 注：这三个方法都会阻塞线程
// 注: JavaScript是一个单线程的语言。
// 注：这三个方法都是BOM的内容。