基本语法

辉哥大约 4 分钟

JavaScript基本语法

以下为学习过程中的极简提炼笔记，以供重温巩固学习

基本语法学习准备

准备工作

已完成html5标签学习
已完成css的选择器、技巧与特性、元素属性学习，已熟悉css语法键值
已熟悉使用编译器：vscode

学习目的

掌握JavaScript语法，包括书写位置、规范、注释、交互/输入输出语法、引入方式

JavaScript书写位置

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码

与CSS类似，JavaScript也有3种书写位置引入方式

行内 JavaScript
内部 JavaScript
外部 JavaScript

行内/内联 JavaScript

行内/内联JavaScript代码：写在html标签内部

注意： vue框架会用这种模式

语法格式案例

行内JavaScript


<body>
  <button onclick="alert('行内引入JavaScript')">JavaScript写在html标签中</button>
</body>

内部 JavaScript

通过 script 标签包裹 JavaScript 代码，写在同一个*.html文件内部，称为内部引入

1. 写在html文件内
2. 通过script标签包裹，包在body标签中
3. 只在</body>标签前

语法格式案例

内部JavaScript引入


<body>
  <!-- 内部js -->
  <script>
    // 页面弹出警示框
    alert('你好，js~')
  </script>
</body>

外部 JavaScript

将 JavaScript 代码写在独立的以 *.js 结尾的文件中

通过 script 标签的 src 属性，在需要引入的*.html中引入，称为外部引入

1. 写在独立*.js文件
2. 通过<script src="*.js></script>"引入，包在body标签中
3. 只在</body>标签前

语法格式案例

外部JavaScript引入


<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>

注意：如果 script 标签使用 src 属性引入了某 .js 文件，那么 script 标签自身的代码会被忽略！！！

语法格式案例

外部JavaScript引入忽略


<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>

JavaScript注释

简单使用 ctrl + / 快速整行注释，可得知当前语言下的注释符规则

通过注释可以屏蔽代码被执行或者添加备注信息

JavaScript 支持两种形式注释语法：使用 // 内容 注释单行代码使用 /* 内容 */ 注释多行代码

结束符

在 JavaScript 中 ; 代表一段代码的结束

多数情况下可以省略 ; 使用回车（enter）替代

输入和输出

接收用户输入，然后再将输入的结果输出，语法如下：alert()、document.wirte()、console.log

向 prompt() 输入任意内容，则会以弹窗形式出现在浏览器中，一般提示用户输入一些内容

本质上是JavaScript预先设置的四个函数

作用：向body内输出内容

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

语法格式案例

JavaScript默认预先内嵌的输入和输出函数


<body>
  <script src="demo.js">
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容')

    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')  

    // 3. 控制台打印输出日志
    console.log('日志')

    // 案例
    // 1. 文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是标题</h1>')
    // 2. 控制台打印输出 给 程序员
    console.log('看看对不对')
    console.log('日志')
    // 3. 输入语句
    prompt('请输入您的年龄：')

  </script>
</body>

JavaScript 代码执行顺序

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

alert() 和 prompt() 它们会跳过页面渲染先被执行

字面量

字面量（literal）是在计算机中描述事/物

12345 数字字面量
'12345' 字符串字面量
[] 数组字面量
{} 对象字面量等等