JavaScript

Posted 2021-10-03 想成为大师啊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript相关的知识，希望对你有一定的参考价值。

javascript的介绍

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

插一句题外话：JavaScript和Java 就是老婆饼和老婆的关系一样（两者没啥关系）

什么是JavaScript

原文链接：https://blog.csdn.net/fuzhongmin05/article/details/69665829

JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给html网页增加动态功能。

动态：在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。
弱类：计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。
原型：新对象继承对象（作为模版），将自身的属性共享给新对象，模版对象称为原型。这样新对象实例化后不但可以享有自己创建时和运行时定义的属性，而且可以享有原型对象的属性。

第一个JavaScript程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_js</title>

</head>
<body>
    <!--1、写在标签属性里-->>
    <a href="https://www.baidu.com" onclick="alert('11')">1111</a>

    <!-- 2、写在script标签 -->
    <!-- <script>
        alert('hello')
    </script> -->

    <!-- 3、导入js文件 -->
    <!-- <script src="hello.js"></script> -->
</body>
</html>

在上述代码，我们可以通过三种方式来运用 script

第一种：写在标签属性里，我们通过一个超链接的形式，在a标签里面放了一个 onclick点击事件。再点击页面出现的 1111后，会弹出一个弹窗显示11，随后会切换到其他网页
第二种：写在script标签，进入页面后，弹出跳窗；

但在这里要说明一下：如果第一种和第二种一起运行的话，就会先执行JavaScript，再执行HTML

原因是：

<body>中的js和html执行的顺序是：加载直到<script>之前的所
有html到内存（此时不渲染，浏览器上看不到内容），执行完
html直接兄弟<script>（此<script>后紧挨着还有<script>也
不执行），而后渲染html。加载html->执行script->渲染html。

第三种：导入js文件，可以将要导入的 JavaScript的代码集中在一起，最后通过在 HTML代码中加入，可以将写的导入出来
```
 <script src="hello.js"></script>
```

alert('111')

JavaScript的变量

在Script中引入变量属性，类似Java，C等语言类似

var 语句用于声明变量

输出在弹窗

<script>
    var a = 1;
    alert(a);
</script>

输出在网页

<script>
    var a = "1";
    document.write(a);  // 输出在网页
</script>

关于 document.write()方法：

document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。
记住，在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。因此，假如希望用脚本生成的HTML替换当前页面，就必须把HTML内容连接起来赋给一个变量，使用一个
document.write()方法完成写操作。不必清除文档并打开一个新数据流，一个document.write()调用就可完成所有的操作。
关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写
完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，不这样做就不能显示图像和表单。并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。为了演示document.write()方法，我们提供了同一个应用程序的两个版本。一个向包含脚本的文档中写内容，另—个向—个单独的窗口写内容。请在文本编辑器中键人每个文档，以.html文件扩展名保存，并在浏览器中打开文档。

输出在网页控制台

<script>
    var a = "1";
    console.log(a)
</script>

而这三种方法都是以后程序报错时会采用的调试工具

JavaScript的基本数据类型

typeof(参数) ：输出传入参数的数据类型，用来判断变量的数据类型

<script>
	var a = 1;
	console.log(typeof(a));	// 在网页控制台输出数据类型 (number)
</script>

1、number 数字类型

<script>
	// not a number : 表示未定义和不可表示的值
	var b = NaN;

	// Infinity : 正无穷大
    var c = Infinity;

	// -Infinity : 负无穷大
    var d = -Infinity;
</script>

2、string 字符串类型

<script>
	// 字符串类型
	var s = "name";
</script>

3、boolean 布尔类型
```
<script>
	var e = true;
</script>
```

4、undefined 未定义类型（两种表示形式）

<script>
	var f;
    var f = undefined;
</script>

5、null object类型（特殊）

<script>
	var n = null;   // object类型
</script>

6、symbol : 唯一性; === 比较的就是值和数据类型

<script>
	var m = Symbol("kk");
   	var n = Symbol("kk");
   	console.log(m === n);

   	a = 1;
   	document.write(typeof(a));
</script>

JavaScript的算数运算符

<script>
    var a = 1;
    // 1、+ : 字符串拼接,加法
    a = a + 1; 
    document.write(a + "<br>")
    // 2、- : 减法
    b = a - 1;
    document.write(b + "<br>")
    // 3、++ : 自增
    a++; 
    document.write(a + "<br>")
    // 4、-- : 自减
    ++a; 
    document.write(a + "<br>")
    // 5、* : 乘法
    a = a*b; 
    document.write(a + "<br>")
    // 6、/ : 除法
    a = a/b; 
    document.write(a + "<br>")
    // 7、**: 幂运算
    a = a**2; 
    document.write(a + "<br>")
    document.write(0/0 + "<br>");    // 输出 NaN
    document.write(1/0 + "<br>");   // 输出 Infinity
    document.write(-1/0 + "<br>");  // 输出-Infinity
</script>

JavaScript的比较运算符

<script>
    // 1、 >、<、>=、<=、==
    document.write(2>1);

    // 2、== : 比较的是值 
    document.write(1==1)    // true
    document.write(1=="1");     // true

    // 3、=== : 比较值和数据类型
    document.write(1==="1")     // false
</script>

简单来说： == 代表相同， =代表严格相同, 为啥这么说呢，这么理解：当进行双等号比较时候：先检查两个操作数数据类型，如果相同，则进行=比较，如果不同，则愿意为你进行一次类型转换，转换成相同类型后再进行比较，而===比较时，如果类型不同，直接就是false.

操作数1 == 操作数2，操作数1 === 操作数2

比较过程：

双等号==：

如果两个值类型相同，再进行三个等号(===)的比较
如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：
- 如果一个是null，一个是undefined，那么相等
- 如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较

三等号===:

如果类型不同，就一定不相等
如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( )
来判断）
如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
如果两个值都是true，或是false，那么相等
如果两个值都引用同一个对象或是函数，那么相等，否则不相等
如果两个值都是null，或是undefined，那么相等

JavaScript的逻辑运算符

<script>
    // 1、&& || !
    // && : 两边都为true 结果为true
    document.write((1>2) && (1<2) + "<br>");

    // || : 一边为true 结果为true
    document.write((1>2) || (1<2) + "<br>");

    // ! : 取反
    var a = true
    document.write(!a + "<br>");
    
    // 除了0 和 NaN, 其他的所有数字转布尔类型都是true
    document.write(!0 + "<br>");    // true
    document.write(!1 + "<br>");    // false
    document.write(!2 + "<br>");    // false
    document.write(!NaN + "<br>");  // true

    // 除了空字符串, 其他的string类型代表true
    var a = "111";
    document.write(!a + "<br>");     // false

    var b = "";
    document.write(!b);     // true

    var n = null;
    var m = undefined;
    document.write(n==m + "<br>")   // true

    document.write(!n + "<br>")     // n是false
    document.write(!m + "<br>")     // m是false
    document.write(n===m + "<br>")  // false

</script>

JavaScript的判断、循环语句

JavaScript的 if-else 基本语句和 Java和C 一样

但关于 switch语句就和其他语句有点区别了

首先回顾一下 Java的switch语句的 switch(a)

表达式中的类型必须是 byte、short、int 或 char；case语句中指定的每个值必须具有与表达式兼容的类型。注意：从Java7开始，表达式中支持String

JavaScript中的 var通过后面写的值来决定var所代表的具体值。所以switch表达式中的类型不会像Java那样有严格规定

<script>
    var a = 2;
    switch(a){
        case 1:
            document.write("number");
            break;
        case "a":
            document.write("string");
            break;
        case true:
            document.write("boolean");
            break;
        case undefined:
            document.write("undefined")
            break;
        case null:
            document.write("null")
            break;
    }
</script>

九九乘法表

相对于其他语言在控制台上输出九九乘法表在功能上没什么区别，但是既然是在 HTML上运行，自然可以加上表格啥有趣的东西啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   td{
       border: 2px solid;
   }
</style>
<body>
    <script>
        document.write("<table>");
        for(var i=1;i<=9;i++){
            document.write("<tr>");
            for(var j=1;j<=9;j++){
                if(j<=i){
                    document.write("<td>")
                    document.write(i +" * "+j+" = " + i*j + "&nbsp;&nbsp;&nbsp;");
                    document.write("</td>")
                }
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</body>
</html>

功能实现方面没什么区别，但是要注意做成表格的形式要加上相关的标签，也要在 head 里面加上style：让表格线条更清楚

以上是关于JavaScript的主要内容，如果未能解决你的问题，请参考以下文章

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？

javascript 代码片段

javascript JS-常用代码片段