JS基础 - JavaScript基础语法

coderklaus
164 阅读5分钟

编写位置

内联脚本

可以在HTML元素的事件属性（如onclick）中编写JavaScript代码：

  • 自定义的JavaScript代码会优先于元素的默认行为。
  • 事件属性名称都是小写。
  • 使用单引号和双引号时要注意嵌套。
  • onclick是DOM0级事件绑定，本质只是DOM元素的一个属性，所以只能绑定一个事件处理函数。
 <a href="https://www.google.com" onclick="alert('Hello World')">click me</a>

在href属性中使用JavaScript代码时，需要加上javascript:前缀：

 <a href="javascript: alert('Hello World')">click me</a>

注意：在HTML元素上编写JavaScript代码不被推荐，因为可读性和维护性较差。「 尤其是代码过多的时候 」

内部脚本

可以在<script>标签中编写JavaScript代码：

  • 页面中可以有多个<script>标签，它们共享同一个全局作用域。
  • 会按照文档流顺序，依次加载<script>中的脚本，因此通常放在<body>元素的最后，以便于正常操作DOM元素。
  • <script>脚本可以放到body或html元素后边，不推荐 => 因为这是浏览器兼容性处理，不是合法语法
 <a href="#" id="foo">click me</a>
 ​
 <script>
   const aEl = document.getElementById('foo')
   aEl.onclick = () => alert('Hello World')
 </script>

外部脚本

将js文件编写到外部的js文件中，随后通过script标签的src属性来进行引入

 <script src="./index.js"></script>

noscript元素

在某些情况下，script脚本可能无法被正常解析

  • 早期的不支持JS的浏览器
  • 浏览器的JS功能被关闭了

所以我们解决这种情况，浏览器需要一个页面优雅降级的处理方案，也就是<noscript>

 <!-- 当支持js的时候，会执行script元素中的内容，不执行noscript中的内容 -->
 <script>
   alert('Hello World')
 </script>
 ​
 <!-- 浏览器不支持JS代码的时候，会自动执行noscript元素中的内容  -->
 <noscript>
   <p>浏览器不支持JS代码或已关闭了JS功能</p>
 </noscript>

JavaScript编写注意事项

  1. <script>标签不推荐写成单标签：

    • 可以使用单标签写法，但兼容性不佳，且此时<script>标签必须用双标签闭合。
    • 如果通过<script>加载外部脚本，则该<script>标签的内部脚本会静默失效
 <!-- 不推荐，兼容性不好 -->
 <script src="./index.js" />
 ​
 <!-- 推荐写法 -->
 <script src="./index.js"></script>
 ​
 <script src="./index.js">
   // 这里的代码会被忽略
   alert('Hello JavaScript')
 </script>
  1. text/javascript

早期浏览器加载script脚本，需要显示声明

 <script type="text/javascript"> /**/ </script>

而现代浏览器中可以省略，因为现代浏览器的默认脚本语言是JavaScript。

此外还有别的type类型

 <script type="text/babel"> /**/ </script>

表示脚本先交给babel进行转换后仔交给JavaScript进行解析

  1. JavaScript代码严格区分大小写

HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写

交互方式

交互方式功能参数个数
alert弹窗查看 用户点击确定后，才会执行后续代码一个
console.log在浏览器控制台查看多个
console.dir在浏览器控制台以对象形式查看多个
prompt接受用户输入 用户输入永远被认为是字符串类型值 用户点取消，获取的结果是null一个
document.write将内容追加到页面中 如果是渲染过程中执行，是往页面插入内容 如果是渲染结束后执行，是替换页面中内容 一般很少使用多个
 alert('Hello World')
 ​
 console.log('Hello World')
 ​
 // console.log可以传入多个参数
 // 参数和参数之间在展示的时候，会使用空格进行分割
 console.log('Hello', 'World') // => Hello World
 ​
 const res = prompt('请输入内容')
 ​
 // 插入新内容，且插入的新内容后无换行
 document.write('Hello World')
 ​
 // 插入新内容，且插入的新内容后存在换行 
 // 但是这个换行在HTML解析的时候，会被转换为空格
 // 如果需要显示这个空格，需要将输出的内容包裹在pre标签中
 document.writeln('Hello World') // 等价于 document.write('Hello World/n')
 ​
 // document.write可以传入多个参数
 // 参数和参数之间并不会使用空格进行分割, 而是会紧挨在一起
 document.write('Hello', 'World') // => HelloWorld

语句和表达式

语句(Statements)是向浏览器发出的指令，通常表达的是一个操作或者行为(Action)

表达式是语句的一个组成部分，一般情况下表达式计算后会存在值

一个识别标准是表达式可以放在return关键字后边，而语句不行

常见的表达式

  1. 变量/值
  2. 函数调用
  3. 四则运算
  4. 三目表达式
  5. 。。。

ASI

  • 每条语句通常以分号作为结尾。

  • 当语句以换行结尾时，可以省略分号「 隐式分号 」。 => 这个行为被称之为ASI ( automatic semicolon )

  • 但以下情况下，ASI会识别错误，需要显示处理

    1. 多条语句位于同一行 「 多见于压缩后的代码，构建工具会帮我们加上分号 」

    2. 语句以括号、方括号、花括号开头时，ASI会识别错误，需要手动处理

      解决方法如下「 任选其一 」

      1. 在当前语句结尾 或 下一条语句开头 显示插入分号 「 不使用ASI 」
      2. 在下一条语句开头使用+、-、! 「 让JS引擎将下一条识别为表达式，从而和前一条语句分割开 」
 console.log('Hello World')
 ​
 // 除了通过在第一条语句的结尾加上分号，以将console.log和IIFE进行划分
 // 我们也可以在IIFE前，加上分号或者叹号、加号或减号来进行两条语句之间的划分
 ;(function(){
   console.log('Hello JavaScript')
 })()

注释

 
 // 在JS中，注释不支持嵌套
 ​
 // 单行注释
 ​
 /*
   多行注释或者叫块级注释
 */
 ​
 // 文档注释 一般用于对类和函数进行注释的说明
 // 常用于工具类或工具函数中
 // 在vscode的html格式文件中，对文档注释的支持度并不高
 // 所以推荐在vscode的单独的js文件中，为对应的类或函数添加文档注释
 ​
 /**
  * 一个简单的加法运算函数 --- 用于演示文档注释的使用
  * @param {number} num1 参数加法运算的第一个参数
  * @param {number} num2 参加加法运算的第二个参数
  * @returns 两数之和
  */
 function sum(num1, num2) {
   return num1 + num2
 }
avatar
文章
阅读
粉丝