JavaScript 基础语法（细节决定成败）[本人写的最难受的一篇]JavaScript 基础语法（细节决定成败） j

JavaScript 基础语法（细节决定成败）

前端 JavaScript ES5 学习目录

1. 认识 JavaScript

2. JavaScript 基础语法

3. JavaScript 变量数据类型运算操作符

4. JavaScript 逻辑运算符分支语句循环语句

5. JavaScript 函数作用域问题

6. JavaScript IIFE 面向对象函数中的this

7. JavaScript 类和对象 window对象常见内置类

8. JavaScript 数组基本使用 Date日期的使用

javascript 的编写的代码方式

我们是可以在html中书写我们的 javascript 代码的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 直接在内部进行编写我们的js代码 -->
  <a href="" class="clickA">百度</a>

  <!-- 第一种，书写在html排版下面 -->
  <script>
    document.querySelector(".clickA").addEventListener("click", function() {
      alert("已经点击了链接") 
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 第二种，书写在html排版下面 -->
  <script>
    window.onload = function() {
      document.querySelector(".clickA").addEventListener("click", function(){
        document.querySelector(".clickA").href = "https://www.baidu.com/"
      })
    }
  </script>
</head>
<body>
  <!-- 直接在内部进行编写我们的js代码 -->
  <a href="" class="clickA">百度</a>
</body>
</html>

<!--
    这个时候，我们就需要使用我们的window.onload 来实现预加载才可以
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./index.js"></script>
</head>
<body>
  <!-- 直接在内部进行编写我们的js代码 -->
  <a href="" class="clickA">百度</a>
</body>
</html>

<!--
这个就是我们的外链式的写法
-->

上面的几个书写 js 代码的格式，根据自己的喜好选择，但是我建议的是使用我们的第三种写法（不要成为单文件战神）

<noscript> 元素

这个就是我们的早期的浏览器不支持 javascript 元素的时候出现的一种解决方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --DO-Not-Use-js-color: red;

      .DoNotUseJs {
        color: var(--DO-Not-Use-js-color)
      }
    }
  </style>
</head>
<body>
  <noscript>
    <h1 class="DoNotUseJs">你的浏览器暂时还不支持JavaScript,请打开或者更换浏览器~~~</h1>
  </noscript>
</body>
</html>

JavaScript 的加载顺序
- 首先一个前端的html的加载顺序就是我们的从上到下的加载顺序的，所以说这个时候，我们实现书写的时候，就需要遵守规则
- 但是如果真的想要书写在前面，那么这个时候，我们就要使用我们的回调函数的格式进行书写
  - 就是我们的 window.onload, 这个的意思就是我们的页面加载完毕后，在实现运行这个回调函数
- 然后书写顺序的话，一般就是书写在我们的 body 子元素的最后一个的

Javascript 和浏览器的交互方式

交互方式一： alert() 这个是一个函数
交互方式二： console.log() 打印
交互方式三：prompt() 就是提示用户输入信息
- 由于这些都是全局的，所以说，前面的 window 是可以省略的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  </style>
</head>
<body>

  <script>
    window.alert("hello world")
    window.console.log("hello world")
    window.console.log(window.prompt("请输入内容"))
  </script>
</body>
</html>

javascript 的注释

// 单行注释
/* */ 多行注释

/** */ 文档注释

/**
 * 和某人打招呼的函数
 * @param {string} name 姓名
 * @param {number} age 年龄 
 */
function sayHello(name, age){
  console.log(name, age)
}

sayHello("76433", 18)

作者的评价是，作为开发了已经了两年半的我，写这篇博客，是真的难受，呜呜呜