JavaScript基础语法

最新推荐文章于 2024-07-20 23:54:17 发布

DustinWangq

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量233

点赞数 1

分类专栏： # JavaScript基础文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Welitsi/article/details/132529104

版权

JavaScript基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、JavaScript编写方式

位置一：HTML代码行内（不推荐）

<!-- 方式一：行内编写 -->
<a href="javascript:alert('hello world')">hello world</a>
<!-- 方式二：行内编写，通过监听事件的方式 -->
<!-- href='#' 会导致点击后跳转到页面头部 -->
<a href="#" onclick="alert('hello world!')">hello world</a>
<!-- href="javascript:void(0)" 可以解决点击超链接跳转到页面头部的问题； void()是一个不会返回值的方法，它会执行方法内部的表达式 -->
<a href="javascript:void(0)" onclick="alert('hello world!')">hello world</a>

位置二：script标签中

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

位置三：外部的script文件

需要通过script元素的src属性来引入JavaScript文件

 <script>alert("hello world1")</script>

二、noscript元素的使用

如果运行的浏览器不支持JavaScript, 那么我们如何给用户更好的提示呢?

针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案;
最终， <noscript>元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容;

下面的情况下, 浏览器将显示包含在<noscript>中的内容:

浏览器不支持脚本;
浏览器对脚本的支持被关闭。

<noscript>
    <h1>您的浏览器不支持JavaScript, 请打开或者更换浏览器~</h1>
</noscript>

三、JavaScript注意事项

注意一: script 元素不能写成单标签

在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签；
即不能写成<script src='index.js' />；

注意二: 省略 type 属性

在以前的代码中，<<script>标签中会使用 type="text/javascript"；
现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言；

注意三: 加载顺序

作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序；
推荐将JavaScript代码和编写位置放在body子元素的最后一行；

注意四: JavaScript代码严格区分大小写

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

后续补充：script元素还有defer、async属性，我们后续再详细讲解

四、JavaScript交互方式

JavaScript有如下和用户交互的手段：

最常见的是通过console.log, 目前大家掌握这个即可;

在这里插入图片描述

<!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>
  <style>
    /*  */
  </style>
</head>
<body>
  
  <!-- <input type="text"> -->

  <script>
    // 1.交互方式一: alert函数
    alert("Hello World");

    // 2.交互方式二: console.log函数, 将内容输出到控制台中(console)
    // 使用最多的交互方式
    console.log("Hello Coderwhy");

    // 编写的JavaScript代码出错了
    // message.length

    // 3.交互方式三: document.write()
    document.write("Hello Kobe");

    // 4.交互方式四: prompt函数, 作用获取用户输入的内容
    var result = prompt("请输入你的名字: ");
    alert("您刚才输入的内容是:" + result);

  </script>
</body>
</html>

1.Chrome的调试工具

在前面我们利用Chrome的调试工具来调试了HTML、CSS，它也可以帮助我们来调试JavaScript。

当我们在JavaScript中通过console函数显示一些内容时，也可以使用Chrome浏览器来查看：

在这里插入图片描述

另外补充几点：

如果在代码中出现了错误，那么可以在console中显示错误；
console中有个 > 标志，它表示控制台的命令行
1. 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码；
2. 如果希望编写多行代码，可以按下shift+enter来进行换行编写；
在后续我们还会学习如何通过debug方式来调试、查看代码的执行流程；

五、JavaScript语句和分号

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

语句英文是Statements；
比如下面这个就是一条赋值语句；

var a = 1 + 2;

1 + 2 叫做表达式，一个为了得到返回值的计算式。

语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。

通常每条语句的后面我们会添加一个分号，表示语句的结束：

分号的英文是semicolon
当存在换行符（line break）时，在大多数情况下可以省略分号；
JavaScript 将换行符理解成“隐式”的分号；
这也被称之为自动插入分号（Automatic Semicolon Insertion 简称ASI）；

分号表示一条语句的结束。JavaScript 允许省略行尾的分号。事实上，确实有一些开发者行尾从来不写分号。但是，由于下面要讨论的原因，建议还是不要省略这个分号。

是否省略分号的讨论

六、JavaScript注释方式

在HTML、CSS中我们都添加过注释，JavaScript也可以添加注释。

JavaScript的注释主要分为三种：

单行注释
多行注释
文档注释（VSCode中需要在单独的JavaScript文件中编写才有效）

详情见代码

// 单行注释
/* 多行注释 */
/**
 * 文档注释
 */

注意：JavaScript也不支持注释的嵌套

VSCode插件和配置

推荐一个VSCode的插件：（个人经常使用的）

ES7+ React/Redux/React-Native snippets
这个插件是在react开发中会使用到的，但是我经常用到它里面的打印语句；

另外再推荐一个插件：

Bracket Pair Colorizer 2，但是该插件已经不再推荐使用了；
因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果；
如何配置呢？

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active"