JavaScript核心-CSDN博客

本文链接：https://blog.csdn.net/weixin_66059613/article/details/126650309

今天我们首先就来说一下为什么要学习JavaScript，JavaScript主要功能是什么：

嵌入动态文本于HTML页面。
对浏览器事件做出响应。读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。基于Node.js技术进行服务器端编程。

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
既然我们已经大致了解了JavaScript我们就来仔细的刨析一下，它由三个部分组成

ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

它主要有三种写法：

<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>
<!--2.js外部写法-->  
</head> <script src="./js外部.js"></script> 
//外部样式:写在JS文件中，使用script的src属性导入 
<body>
<!-- 1.行内写法 --> 
<button onclick="alert('01-行内写法')">我是按钮</button> 
//行内写法: 不推荐不便于维护 
4
<script> <!--2-内部写法 --> 
alert('02-我是js内部写法') 
// 内部写法:写在script标签中，如果界面JS代码较少可以使用 
/script> 复杂的话不推荐 
</body> </html> 细节点: 当一个html文件存在多种写法时， 
<!--js三种书写位置(与css一致) 是自上而下解析的。 
1.行内写法 :写在标签行内 script标签没有src属性表示内联样式， 
2.内部写法 :写在script标签内部 script标签有src属性表示外联样式. 
3.外部写法:写在js外部文件中，使用script标签的src属性导入 外联样式的JS代码只能写在js文件中。 
*注意:如果script标签写了src属性，就表示外部写法。此时内部的js代码不会执行。

我们来说一下它的输出语句和输入语句

输出语句
接下来我们说js在网页输出语句，先上几个简单的示例：
示例1

<!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>
<body>
    <script>
        //输出语句1：在网页弹出一个提示框，输出数据，通常用于提示用户
        alert('hello world');
    </script>
</body>
</html>

在这里插入图片描述
示例2：

<!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>
<body>
    <script>
        //输出语句2：在控制台打印某个数据。（这个写法不是给用户看的，而是给程序员自己看的）
        console.log('生活的意义就是为了活着');
    </script>
</body>
</html>

在这里插入图片描述
示例3：

<!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>
<body>
    <script>
        //输出语句3：将数据显示到网页，相当于给body添加内容
        document.write('生活不易,仍需努力');
    </script>
</body>
</html>

在这里插入图片描述
输入语句
接下来我们对输入语句也做一个简单的示例：
示例1：

<!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>
<body>
    <script>
        //输入语句
        //输入语句1：在网页弹出一个输入框，让用户输入数据
        prompt('你今天快乐吗？');
    </script>
</body>
</html>

在这里插入图片描述
示例2：

<!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>
<body>
    <script>
        //输入语句
        //输入语句2：在网页弹出一个确认框，让用户输入确认/取消
        confirm('你是学生吗？')
    </script>
</body>
</html>

在这里插入图片描述

说完了输出语句和输入语句接下来那就是它的数据类型：

每一种编程语言都有自己的语法规则,在处理数据的时候,也会有自己的规则,不是任何数据都可以处理的。JS编译器在解析代码的时候,会产生各种不同的数据。 而不同的数据'运算'与'存储'方式都不同, 计算机需要对这些数据进行分类,称之为数据类型。

如图示
在这里插入图片描述
JavaScript类型和存储位置
·js中有5种基本类型:Undefined、Null、Boolean、Number和Strin g，基本类型在内存中占据空间小、大小固定，他们的值保存在栈(stack)空间。
引用类型(对象、数组、函数)，引用类型占据空间大、大小不固定，栈内存中存放地址指向堆(heap)内存中的对象
然后我们来说一下检查数据类型的方法：
检查数据类型的方法：

<!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>
<body>
        <script>
        //(1)typeof 数据(2)typeof(数据)
        //语法结果:得到一个字符串来告讲你这个数据是什么类型。 
        console.log( typeof 123 )//'number' 
        console.log( typeof '123' )//'string' 
        console.log( typeof true )//'boolean'        
        console.log( typeof undefined )//'undefined'.
        console.log( typeof null )//'object'
        </script>
</body>
</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>
<body>
    <script>
        // //Boolean(数据)
        // 1.false: 有7种数据会得到false 0  -0 NaN '' undefined null false 
        // 2.true:除false 7种之外的一切数据
        console.log(Boolean(0))//false 
        console.log(Boolean(-0))//false
         console.log(Boolean(NaN))//false
         console.log(Boolean(''))//false
        console.log(Boolean(undefined))//false
         console.log(Boolean(null))//false
          console.log(Boolean(false))//false
        </script>
</body>
</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>
<body>
    
        <script>
        // /*
        // 隐式转换:当运算符两边的'数据类型不一致’的时候，编译器会转成一致后运算
        // (1)转换数字:算术运算符+-*/%
        // (2)转换字符串:连接符+(+号两边只要有一边是字符串，此时+就是连接符)(3)转换布尔:逻辑非!
        // //1.转换数字:算术运算符
        console.log('100'-10 )//90 Number(100')-10 
        console.log(1+true)//2 1+Number(tnue) 
        console.log(+'10')//10 +数学正号 Number(10)
        
        // 穿12.转换字符串 :连接符
        console.log( '1' + true )//'1true’'1' + String('true')
        //3.转换布尔:!
        console.log(!1)//false    !Boolean(1)
        console.log(!undefined )//true !Boolean(undefined) 
        </script>
        </body>
</html>

Number-特殊值

Infinity：正无穷大。-Infinity：负无穷大。
Infinity依然是一个数字，我们可以在控制台用typeof来测试。当我们输入1e308时，一切正常，但一旦把后面的308改成309就出界了。实践证明，JavaScript所能处理的最大值是1.7976931348623157e+308，而最小值为5e-324。
由于内存的限制，number有最大值和最小值，其中最大值保存在Number.MAX_VALUE中，最小值保存在Number.MIN_VALUE中。