JS基本使用

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
JavaScript系列文章——传送门

---

---

一、JS的书写方式

跟css样式一样，JS的书写也有3种方式，内嵌、外联和行内。

1.内联

JS是脚本语言，运行需要依赖HTML，HTML是由标签组成的，所以JS在HTML中就体现为一个script双标签。JS的代码就写在这个标签中。

这个标签可以放在HTML文档的任意位置，但在不同的位置，对于代码的执行有一定的影响，因为HTML的解析是按照顺序执行的，对于初学者，建议将script标签放在body结束之后。

当浏览器在执行HTML代码的时候，就会解析其中的script标签，并运行JS代码。

2.外联

将JS代码放在一个后缀为.js的文件中，通过script标签的src属性，将文件引入进来即可。

注意：一个script标签，只能作为内联或外联使用，不可以同时使用。

3.行内

将JS代码写在标签上，作为属性的值使用。

二、JS的注释

注释代码不会被执行，仅仅起到一个提示的作用。注释可以对复杂的代码进行解释，方便后期的维护和开发。

1. 单行注释：

 // js的单行注释是双斜杠

2. 多行注释：

   /*
   js的多行注释：
   开头是斜杠星号
   结尾是星号斜杠
   */

三、JS的输出

所谓输出，其实就是将内容显示在网页中，和HTML不同，JS代码不会主动显示在网页中。要显示指定的内容，需要特殊方法指定才能显示在网页中，这个指定显示的方式就叫做输出。

1. 以弹窗的形式显示

  alert("Hello World")

这种输出通常适用于给用户做提示，例如：登录成功；删除失败；用户名被占用等…
如下图所示：

2. 以文本的形式显示

   document.write('你好，世界！');

这种输出方式通常用于给body增加内容。

3. 可输入内容的弹窗

   prompt('hello world')

这种弹窗通常在项目使用较少，项目中要提示用户输入内容的时候通常都会使用表单。

4. 询问用户是否确认操作的弹窗

   confirm('hello world')

这种弹窗通常在项目中用户进行某些敏感操作时，提示用户是否继续进行下去，例如：用户点击了删除按钮之后，用户点击了退出按钮之后，需要让用户确认是否继续操作，可以取消。

5. 浏览器控制台输出

   console.log(123);

这种输出方式在开发过程中很常用，通常用于调试代码时，在浏览器的控制台查看调试结果，不会影响到整体项目的逻辑和效果。

注意：在js代码中，每行结束可以加分号，也可以不加分号。

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog