最新Javascript 基础知识全总结(持续更新)

原创

已于 2022-04-18 10:34:30 修改 · 9.7k 阅读

148 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-04-17 20:41:07 首次发布

本文是JavaScript初学者的全面指南，涵盖了JavaScript的基础知识，包括JavaScript的作用、组成、书写位置、注释、结束符、输入输出语法、字面量、变量（let和var的区别、数组）、常量、数据类型及类型转换等。适合零基础的学习者，内容将持续更新。

语法一: document.write --向html页面输出内容

语法二 : alert --页面弹出警示框

语法三: console.log --控制台输出,程序员调试使用

2, 输入语法

语法一 : prompt ---弹出输入框

语法二 : confirm ---弹出确认框

2, 使用数组 -- 数组名[索引号/(也叫下标)]

1.2 parseInt(数据) : 只保留整数

1.3 parseFloat(数据) : 可以保留小数

本人目前在黑马程序员培训,现将所学的知识整理出来,希望能帮到零基础的初学者,后续会持续更新~~~

一,JavaScript 是什么

1, JavaScript 是什么

JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果

2, 作用

网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)

3, JavaScript的组成

ECMAScript:

规定了js基础语法核心知识。

 比如：变量、分支语句、循环语句、对象等等

Web APIs :

 DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

 BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

权威网站： MDN

JavaScript权威网站： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

二, JavaScript 书写位置

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中.

1,内部 JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

<body>
    <script>
        let age = 18
        console.log(typeof age)
    </script>
</body>

注意:

我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。

如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。

因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

2, 外部 JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中。

<body>
    <!-- 2, 外部JS书写位置 -->
    <script src="./my.js">
        // 中间不要写内容
    </script>
</body>

注意:

\1. script标签中间无需写代码，否则会被忽略！

\2. 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

3, 内联 JavaScript

代码写在标签内部

语法：

注意：此处作为了解即可，但是后面vue框架会用这种模式

<body>
    <!-- 3， 内联Javascript -->
    <button onclick="alert('逗你玩')">点击我月薪过万</button>

</body>

三, JavaScript 的注释

1, 单行注释

 符号：//

 作用：//右边这一行的代码会被忽略

 快捷键：ctrl + /

    <script>
        // 这种是单行注释
        // 一次只能注释一行
        // 可以重复注释
    </script>

2, 多行注释

 符号：/* */

 作用：在/* 和 */ 之间的所有内容都会被忽略

 快捷键：shift + alt + A (可以在VScode里面修改默认快捷键)

<script>
    /*  这种是多行注释的写法*/
   /*  有些可以任意换行
    多少行都可以 */
</script>

四, JavaScript的结束符

 作用： 使用英文的 ; 代表语句结束

 实际情况： 实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置

 现状： 在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符

 约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求.）

<script>
 alert(1);
 alert(2);
</script>

或者 
<script>
    alert(3)
    alert(4)
</script>

五, 输入和输出语法

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

1, 输出语法

语法一: document.write - 向html页面输出内容

作用：向body内输出内容

<script>
document.write('要输出的内容')
 </script>

注意：如果输出的内容写的是标签，也会被解析成网页元素, 如

<script>
        document.write('<h2>h2我是二级标题</h2>')
    </script>

页面输出的结果:

后面渲染页面时会用到

语法二 : alert -页面弹出警示框

作用：页面弹出警告对话框

<script>
    alert('你好,JS')
</script>

语法三: console.log --控制台输出,程序员调试使用

作用：控制台输出语法，程序员调试使用

<script>
    console.log('控制台打印')
</script>

2, 输入语法

语法一 : prompt ---弹出输入框

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

<script>
  prompt('请输入您的姓名')
</script>

语法二 : confirm---弹出确认框

作用：在网页弹出一个确认框,让用户输入确认/取消, 二选一

confirm('你确认成年了吗?')

JavaScript 代码执行顺序：

 按HTML文档流顺序执行JavaScript代码

 alert() 和 prompt() 它们会跳过页面渲染先被执行（目前作为了解，后期讲解详细执行过程）

六, 字面量

定义:在计算机科学中，字面量（literal）是在计算机中描述事/物

比如：

最低0.47元/天解锁文章