JavaScript基础语法

Rsquo
81 阅读2分钟

1. 编写JavaScript的位置

  • HTML代码行内（不推荐）

    <!-- 1.编写位置一: 编写在html内部(了解) -->
<a href="#" onclick="alert('百度一下')">百度一下</a>
<a href="javascript: alert('百度一下')">百度一下</a>

  • script标签中

    <!-- 2.编写位置二: 编写在script元素之内 -->
<a class="google" href="#">Google一下</a>

<script>
var googleAEl = document.querySelector(".google")
googleAEl.onclick = function() {
  alert("Google一下")
}
</script>

  • 外部的script文件（需要通过script元素的src属性来引入JavaScript文件）

    <!-- 3.编写位置三: 独立的js文件 -->
<a class="bing" href="#">bing一下</a>
<script src="./js/bing.js"></script>

2. noscript

如果运行的浏览器不支持JavaScript， <noscript> 元素用于给不支持 JavaScript 的浏览器提供替代内容

  • 下面的情况下，浏览器将显示包含在中的内容:

    • 浏览器不支持脚本

    • 浏览器对脚本的支持被关闭

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

<script>
  alert("您的浏览器正在运行JavaScript代码")
</script>

3. 编写JavaScript注意事项

  • script元素不能写成单标签

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

  • 省略type属性

    • 以前的代码中，<script>标签中会使用 type=“text/javascript”

    • 现在可以不写这个代码了，因为JavaScript是所有现代浏览器以及 HTML5 中的默认脚本语言

  • 加载顺序

    • 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序

    • 推荐将JavaScript代码和编写位置放在body子元素的最后一行

      <body>

  <h1 class="title">我是标题</h1>
  <p>我是段落, 哈哈哈哈</p>

  <!-- 普通的元素 -->
  <script>
    var titleEl = document.querySelector(".title")
    alert(titleEl)
  </script>

</body>

  • JavaScript代码严格区分大小写

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

  • script元素还有defer、async属性（后续补充）

4. 浏览器交互方式

交互方式.png

// 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);

5. chrome调试工具补充

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

    console.png

  • 其他

    1. 如果在代码中出现了错误，那么可以在console中显示错误

    2. console中有个 > 标志，它表示控制台的命令行

      ✓ 在命令行中可以直接编写JavaScript代码，按下enter会执行代码

      ✓ 如果希望编写多行代码，可以按下shift+enter来进行换行编写

    3. 后续补充如何通过debug方式来调试、查看代码的执行流程

6. JavaScript注释的写法

  • 单行注释
  • 多行注释
  • 文档注释 
    // 1.单行注释

// 2.多行注释
/* 
 我是一行注释
 我是另外一行注释
*/

// 3.文档注释
/**
 * 和某人打招呼
 * @param {string} name 姓名
 * @param {number} age 年龄
 */
function sayHello(name, age) {

}

sayHello()

7. 插件和配置

快速生成console.log()

// 推荐方式一: log -> enter
console.log("Hello World");

// 推荐方式二: react插件 -> clg -> enter
console.log("Hello World")

  • ES7+ React/Redux/React-Native snippets

  • 配置{}高亮

    • Bracket Pair Colorizer 2，但是该插件已经不再推荐使用了

    • 因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果，在vscode的setting.json中输入以下代码即可。

      "editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active"
avatar
文章
阅读
粉丝